From 3ae0c90209c4aeacc3f8a7958e943361097a272d Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 21 Oct 2015 21:18:30 +0200 Subject: add support for Firefox 38 esr --- arc-firefox-theme/chrome/browser/Push-16.png | Bin 606 -> 0 bytes arc-firefox-theme/chrome/browser/Push-64.png | Bin 8056 -> 0 bytes arc-firefox-theme/chrome/browser/Secure.png | Bin 0 -> 865 bytes .../chrome/browser/Toolbar-inverted.png | Bin 12572 -> 12277 bytes arc-firefox-theme/chrome/browser/Toolbar.png | Bin 17383 -> 16018 bytes arc-firefox-theme/chrome/browser/aboutNetError.css | 51 +- .../chrome/browser/aboutNetError_alert.svg | 29 +- .../chrome/browser/aboutNetError_info.svg | 7 +- .../chrome/browser/aboutProviderDirectory.css | 105 +- .../chrome/browser/aboutSocialError.css | 105 +- .../chrome/browser/aboutWelcomeBack.css | 8 +- .../chrome/browser/addons/addon-install-anchor.svg | 27 - .../browser/addons/addon-install-blocked.svg | 38 - .../browser/addons/addon-install-confirm.svg | 19 - .../browser/addons/addon-install-downloading.svg | 38 - .../chrome/browser/addons/addon-install-error.svg | 38 - .../browser/addons/addon-install-installed.svg | 38 - .../browser/addons/addon-install-restart.svg | 46 - .../browser/addons/addon-install-warning.svg | 38 - .../chrome/browser/bad-content-blocked-16.png | Bin 0 -> 346 bytes .../chrome/browser/bad-content-blocked-16@2x.png | Bin 0 -> 691 bytes .../chrome/browser/bad-content-blocked-64.png | Bin 0 -> 2062 bytes .../chrome/browser/bad-content-unblocked-16.png | Bin 0 -> 462 bytes .../chrome/browser/bad-content-unblocked-64.png | Bin 0 -> 3209 bytes .../chrome/browser/browser-lightweightTheme.css | 6 +- arc-firefox-theme/chrome/browser/browser.css | 1524 ++++++--------- .../chrome/browser/content-contextmenu.svg | 109 +- .../browser/controlcenter/arrow-subview-back.svg | 7 - .../chrome/browser/controlcenter/arrow-subview.svg | 7 - .../chrome/browser/controlcenter/conn-degraded.svg | 27 - .../browser/controlcenter/conn-not-secure.svg | 8 - .../chrome/browser/controlcenter/conn-secure.svg | 26 - .../chrome/browser/controlcenter/mcb-disabled.svg | 33 - .../chrome/browser/controlcenter/panel.css | 305 --- .../chrome/browser/controlcenter/permissions.svg | 11 - .../controlcenter/tracking-protection-disabled.svg | 23 - .../browser/controlcenter/tracking-protection.svg | 21 - .../chrome/browser/controlcenter/warning-gray.svg | 9 - .../browser/controlcenter/warning-yellow.svg | 9 - .../menuPanel-customizeFinish@2x.png | Bin 399 -> 0 bytes .../browser/customizableui/panelUIOverlay.css | 390 +--- .../browser/customizableui/thumburger-inverted.png | Bin 411 -> 0 bytes .../chrome/browser/customizableui/thumburger.png | Bin 453 -> 0 bytes arc-firefox-theme/chrome/browser/devedition.css | 140 +- .../chrome/browser/devedition/search.svg | 58 +- .../chrome/browser/devedition/urlbar-arrow.png | Bin 189 -> 0 bytes .../chrome/browser/devedition/urlbar-arrow@2x.png | Bin 263 -> 0 bytes .../devedition/urlbar-history-dropmarker.svg | 19 +- arc-firefox-theme/chrome/browser/devtools/add.svg | 9 - .../browser/devtools/animation-fast-track.svg | 9 - .../chrome/browser/devtools/animationinspector.css | 253 +-- .../chrome/browser/devtools/app-manager/add.svg | 9 +- .../chrome/browser/devtools/app-manager/error.svg | 10 +- .../browser/devtools/app-manager/index-icons.svg | 94 +- .../chrome/browser/devtools/app-manager/plus.svg | 9 +- .../chrome/browser/devtools/app-manager/remove.svg | 7 +- .../chrome/browser/devtools/app-manager/rocket.svg | 28 +- .../browser/devtools/app-manager/warning.svg | 10 +- .../chrome/browser/devtools/canvasdebugger.css | 19 +- .../chrome/browser/devtools/command-rulers.png | Bin 1281 -> 0 bytes .../chrome/browser/devtools/command-rulers@2x.png | Bin 1369 -> 0 bytes .../chrome/browser/devtools/commandline.css | 46 +- .../chrome/browser/devtools/common.css | 44 +- .../chrome/browser/devtools/computedview.css | 15 +- .../chrome/browser/devtools/dark-theme.css | 234 +-- .../chrome/browser/devtools/debugger.css | 44 +- .../browser/devtools/dock-bottom-maximize@2x.png | Bin 1096 -> 0 bytes .../browser/devtools/dock-bottom-minimize@2x.png | Bin 1125 -> 0 bytes .../chrome/browser/devtools/dropmarker.svg | 9 +- .../chrome/browser/devtools/fast-forward.png | Bin 1260 -> 0 bytes .../chrome/browser/devtools/fast-forward@2x.png | Bin 1621 -> 0 bytes .../chrome/browser/devtools/filetype-dir-close.svg | 5 +- .../chrome/browser/devtools/filetype-dir-open.svg | 5 +- .../chrome/browser/devtools/filetype-globe.svg | 7 +- .../chrome/browser/devtools/filetype-store.svg | 13 +- .../chrome/browser/devtools/filter-swatch.svg | 12 - .../chrome/browser/devtools/filters.svg | 26 +- .../browser/devtools/floating-scrollbars.css | 4 +- .../chrome/browser/devtools/font-inspector.css | 3 - .../chrome/browser/devtools/inspector.css | 38 - .../chrome/browser/devtools/itemArrow-dark-ltr.svg | 9 +- .../chrome/browser/devtools/itemArrow-dark-rtl.svg | 11 +- .../chrome/browser/devtools/itemArrow-ltr.svg | 9 +- .../chrome/browser/devtools/itemArrow-rtl.svg | 9 +- .../chrome/browser/devtools/layoutview.css | 319 +--- .../chrome/browser/devtools/light-theme.css | 226 +-- .../chrome/browser/devtools/netmonitor.css | 210 ++- .../chrome/browser/devtools/performance-icons.svg | 83 +- .../chrome/browser/devtools/performance.css | 601 ++---- .../chrome/browser/devtools/power.svg | 2 +- .../devtools/profiler-stopwatch-checked.svg | 29 +- .../chrome/browser/devtools/profiler-stopwatch.svg | 29 +- .../chrome/browser/devtools/profiler.css | 402 ++++ .../chrome/browser/devtools/promisedebugger.css | 3 - .../chrome/browser/devtools/pseudo-class.svg | 29 - .../chrome/browser/devtools/rewind.png | Bin 1269 -> 0 bytes .../chrome/browser/devtools/rewind@2x.png | Bin 1650 -> 0 bytes .../chrome/browser/devtools/ruleview.css | 124 +- .../chrome/browser/devtools/scratchpad.css | 4 + .../chrome/browser/devtools/search-clear-dark.svg | 15 - .../browser/devtools/search-clear-failed.svg | 15 - .../chrome/browser/devtools/search-clear-light.svg | 15 - .../chrome/browser/devtools/shadereditor.css | 6 +- .../chrome/browser/devtools/splitview.css | 17 + .../chrome/browser/devtools/storage.css | 4 +- .../chrome/browser/devtools/styleeditor.css | 2 +- .../chrome/browser/devtools/timeline-filter.svg | 53 +- .../chrome/browser/devtools/timeline.css | 250 +++ .../browser/devtools/tool-debugger-paused.svg | 7 +- .../chrome/browser/devtools/tool-debugger.svg | 15 +- .../chrome/browser/devtools/tool-inspector.svg | 19 +- .../chrome/browser/devtools/tool-network.svg | 73 +- .../chrome/browser/devtools/tool-options.svg | 7 +- .../browser/devtools/tool-profiler-active.svg | 17 - .../chrome/browser/devtools/tool-profiler.svg | 29 +- .../chrome/browser/devtools/tool-scratchpad.svg | 13 +- .../chrome/browser/devtools/tool-shadereditor.svg | 26 - .../chrome/browser/devtools/tool-storage.svg | 15 +- .../chrome/browser/devtools/tool-styleeditor.svg | 13 +- .../chrome/browser/devtools/tool-webaudio.svg | 7 +- .../chrome/browser/devtools/tool-webconsole.svg | 7 +- .../chrome/browser/devtools/webaudioeditor.css | 6 +- .../chrome/browser/devtools/webconsole.css | 48 +- .../chrome/browser/devtools/webconsole.png | Bin 0 -> 1943 bytes .../chrome/browser/devtools/webconsole.svg | 101 - .../chrome/browser/devtools/webconsole@2x.png | Bin 0 -> 2633 bytes .../chrome/browser/devtools/widgets.css | 238 +-- .../browser/downloads/allDownloadsViewOverlay.css | 2 +- .../browser/downloads/contentAreaDownloadsView.css | 21 +- .../chrome/browser/downloads/downloads.css | 2 +- arc-firefox-theme/chrome/browser/drm-icon.svg | 25 +- .../chrome/browser/feeds/audioFeedIcon.png | Bin 0 -> 1794 bytes .../chrome/browser/feeds/audioFeedIcon16.png | Bin 0 -> 799 bytes .../chrome/browser/feeds/subscribe.css | 9 +- .../chrome/browser/feeds/videoFeedIcon.png | Bin 0 -> 1794 bytes .../chrome/browser/feeds/videoFeedIcon16.png | Bin 0 -> 799 bytes arc-firefox-theme/chrome/browser/fxa/android.png | Bin 15286 -> 0 bytes .../chrome/browser/fxa/android@2x.png | Bin 736 -> 0 bytes .../chrome/browser/fxa/default-avatar.png | Bin 1562 -> 0 bytes .../chrome/browser/fxa/default-avatar@2x.png | Bin 2560 -> 0 bytes arc-firefox-theme/chrome/browser/fxa/logo.png | Bin 17703 -> 0 bytes arc-firefox-theme/chrome/browser/fxa/logo@2x.png | Bin 4517 -> 0 bytes .../chrome/browser/fxa/sync-illustration.png | Bin 18697 -> 0 bytes .../chrome/browser/fxa/sync-illustration@2x.png | Bin 8682 -> 0 bytes .../chrome/browser/heartbeat-icon.svg | 38 +- .../chrome/browser/heartbeat-star-lit.svg | 476 ++++- .../chrome/browser/heartbeat-star-off.svg | 476 ++++- .../chrome/browser/identity-icons-generic.png | Bin 0 -> 965 bytes .../chrome/browser/identity-icons-https-ev.png | Bin 0 -> 708 bytes .../browser/identity-icons-https-mixed-active.png | Bin 0 -> 984 bytes .../browser/identity-icons-https-mixed-display.png | Bin 0 -> 535 bytes .../chrome/browser/identity-icons-https.png | Bin 0 -> 672 bytes .../browser/identity-mixed-active-blocked.svg | 31 - .../browser/identity-mixed-active-loaded.svg | 38 - .../browser/identity-mixed-passive-loaded.svg | 31 - .../chrome/browser/identity-not-secure.svg | 8 - .../chrome/browser/identity-secure.svg | 27 - arc-firefox-theme/chrome/browser/identity.png | Bin 0 -> 9690 bytes arc-firefox-theme/chrome/browser/info.svg | 9 - .../chrome/browser/loop/menuPanel@2x.png | Bin 8223 -> 0 bytes .../chrome/browser/loop/toolbar-inverted@2x.png | Bin 5637 -> 0 bytes .../chrome/browser/loop/toolbar@2x.png | Bin 3605 -> 0 bytes arc-firefox-theme/chrome/browser/mask.png | Bin 0 -> 1286 bytes arc-firefox-theme/chrome/browser/mask@2x.png | Bin 0 -> 2438 bytes .../chrome/browser/menuPanel-customize@2x.png | Bin 2193 -> 0 bytes .../chrome/browser/menuPanel-exit@2x.png | Bin 1139 -> 0 bytes .../chrome/browser/menuPanel-help@2x.png | Bin 5300 -> 0 bytes .../chrome/browser/menuPanel-small@2x.png | Bin 3305 -> 0 bytes arc-firefox-theme/chrome/browser/menuPanel.png | Bin 18814 -> 17178 bytes arc-firefox-theme/chrome/browser/menuPanel@2x.png | Bin 47300 -> 0 bytes arc-firefox-theme/chrome/browser/newtab/close.png | Bin 931 -> 0 bytes .../chrome/browser/newtab/controls.svg | 93 +- arc-firefox-theme/chrome/browser/newtab/newTab.css | 70 +- .../chrome/browser/newtab/whimsycorn.png | Bin 3875 -> 0 bytes .../chrome/browser/panic-panel/header-small@2x.png | Bin 2966 -> 0 bytes .../chrome/browser/panic-panel/header@2x.png | Bin 4369 -> 0 bytes .../chrome/browser/panic-panel/icons@2x.png | Bin 1388 -> 0 bytes .../browser/preferences/aboutPermissions.css | 40 +- .../browser/preferences/in-content/icons.svg | 96 +- .../browser/preferences/in-content/preferences.css | 224 +-- .../chrome/browser/privatebrowsing/attention.png | Bin 602 -> 0 bytes .../browser/privatebrowsing/attention@2x.png | Bin 902 -> 0 bytes .../chrome/browser/privatebrowsing/check.png | Bin 338 -> 0 bytes .../chrome/browser/privatebrowsing/check@2x.png | Bin 370 -> 0 bytes .../chrome/browser/privatebrowsing/mask.svg | 8 - .../chrome/browser/privatebrowsing/shield-page.png | Bin 4257 -> 0 bytes .../browser/privatebrowsing/shield-page@2x.png | Bin 9367 -> 0 bytes arc-firefox-theme/chrome/browser/reader-tour.png | Bin 2672 -> 12172 bytes .../chrome/browser/reader-tour@2x.png | Bin 6426 -> 0 bytes arc-firefox-theme/chrome/browser/readerMode.svg | 59 +- .../chrome/browser/readinglist/icons.svg | 56 + .../browser/readinglist/readinglist-icon.svg | 9 + .../chrome/browser/readinglist/sidebar.css | 148 ++ .../chrome/browser/reload-stop-go@2x.png | Bin 3661 -> 0 bytes .../chrome/browser/sass/_browser-sass.scss | 1934 +++++++------------- .../chrome/browser/sass/browser-dark.css | 1524 ++++++--------- .../chrome/browser/sass/browser-darker.css | 1524 ++++++--------- .../chrome/browser/sass/browser-light.css | 1524 ++++++--------- .../chrome/browser/search-arrow-go.svg | 22 - .../chrome/browser/search-history-icon.svg | 44 +- .../chrome/browser/search-indicator-add-engine.png | Bin 0 -> 252 bytes .../browser/search-indicator-magnifying-glass.svg | 7 - arc-firefox-theme/chrome/browser/searchbar.css | 22 +- .../chrome/browser/session-restore.svg | 23 +- .../chrome/browser/social/chat-icons.svg | 70 +- .../chrome/browser/sync-horizontalbar@2x.png | Bin 1376 -> 0 bytes .../browser/syncProgress-horizontalbar@2x.png | Bin 9668 -> 0 bytes .../chrome/browser/syncProgress-menuPanel@2x.png | Bin 55953 -> 0 bytes arc-firefox-theme/chrome/browser/syncProgress.css | 46 + arc-firefox-theme/chrome/browser/tab-crashed.svg | 27 +- .../chrome/browser/tabbrowser/crashed.svg | 17 +- .../chrome/browser/tabbrowser/pendingpaint.png | Bin 30233 -> 158914 bytes .../browser/tabbrowser/tab-active-middle.png | Bin 92 -> 388 bytes .../chrome/browser/tabbrowser/tab-audio-small.svg | 44 - .../chrome/browser/tabbrowser/tab-audio.svg | 87 - .../browser/tabbrowser/tab-background-end.png | Bin 802 -> 1047 bytes .../browser/tabbrowser/tab-background-middle.png | Bin 122 -> 308 bytes .../browser/tabbrowser/tab-background-start.png | Bin 814 -> 1019 bytes .../chrome/browser/tabbrowser/tab-selected-end.svg | 18 +- .../browser/tabbrowser/tab-selected-start.svg | 18 +- .../chrome/browser/tabbrowser/tab-separator.png | Bin 0 -> 143 bytes .../chrome/browser/tabbrowser/tab-stroke-end.png | Bin 652 -> 1215 bytes .../chrome/browser/tabbrowser/tab-stroke-start.png | Bin 658 -> 1219 bytes .../chrome/browser/theme-switcher-icon.png | Bin 2084 -> 666 bytes .../chrome/browser/tracking-protection-16.svg | 21 - .../browser/tracking-protection-disabled-16.svg | 23 - .../chrome/browser/update-badge-failed.svg | 6 - arc-firefox-theme/chrome/browser/update-badge.svg | 5 +- arc-firefox-theme/chrome/browser/urlbar-arrow.png | Bin 265 -> 305 bytes .../chrome/browser/urlbar-arrow@2x.png | Bin 324 -> 0 bytes arc-firefox-theme/chrome/browser/warning.svg | 7 - arc-firefox-theme/chrome/browser/warning16.png | Bin 0 -> 445 bytes arc-firefox-theme/chrome/browser/warning16@2x.png | Bin 0 -> 583 bytes .../chrome/browser/webRTC-shareDevice-16@2x.png | Bin 367 -> 0 bytes .../chrome/browser/webRTC-shareDevice-64@2x.png | Bin 1643 -> 0 bytes .../chrome/browser/webRTC-shareMicrophone-16.png | Bin 1162 -> 1161 bytes .../browser/webRTC-shareMicrophone-16@2x.png | Bin 1359 -> 0 bytes .../chrome/browser/webRTC-shareMicrophone-64.png | Bin 2549 -> 2858 bytes .../browser/webRTC-shareMicrophone-64@2x.png | Bin 5734 -> 0 bytes .../chrome/browser/webRTC-shareScreen-16@2x.png | Bin 3986 -> 0 bytes .../chrome/browser/webRTC-shareScreen-64@2x.png | Bin 5732 -> 0 bytes .../chrome/browser/webRTC-sharingDevice-16@2x.png | Bin 4020 -> 0 bytes .../browser/webRTC-sharingMicrophone-16@2x.png | Bin 4122 -> 0 bytes .../chrome/browser/webRTC-sharingScreen-16@2x.png | Bin 4005 -> 0 bytes arc-firefox-theme/chrome/browser/welcome-back.svg | 28 +- arc-firefox-theme/chrome/global/aboutReader.css | 523 +++++- .../chrome/global/aboutReaderContent.css | 113 -- .../chrome/global/aboutReaderControls.css | 371 ---- arc-firefox-theme/chrome/global/aboutSupport.css | 36 +- .../chrome/global/arrow/arrow-lft-hov.gif | Bin 0 -> 54 bytes .../chrome/global/arrow/arrow-rit-hov.gif | Bin 0 -> 54 bytes .../global/arrow/panelarrow-horizontal-themed.svg | 11 +- .../chrome/global/arrow/panelarrow-horizontal.svg | 11 +- .../global/arrow/panelarrow-vertical-themed.svg | 11 +- .../chrome/global/arrow/panelarrow-vertical.svg | 11 +- .../chrome/global/dirListing/folder.png | Bin 572 -> 446 bytes .../chrome/global/dirListing/local.png | Bin 655 -> 688 bytes arc-firefox-theme/chrome/global/dirListing/up.png | Bin 711 -> 607 bytes arc-firefox-theme/chrome/global/global.css | 11 +- arc-firefox-theme/chrome/global/icons/Error.png | Bin 2148 -> 1477 bytes .../chrome/global/icons/Landscape.png | Bin 485 -> 801 bytes arc-firefox-theme/chrome/global/icons/Portrait.png | Bin 540 -> 837 bytes .../chrome/global/icons/Print-preview.png | Bin 514 -> 715 bytes arc-firefox-theme/chrome/global/icons/Question.png | Bin 2257 -> 1693 bytes .../chrome/global/icons/Search-close.png | Bin 685 -> 586 bytes .../chrome/global/icons/Search-glass.png | Bin 1350 -> 1448 bytes arc-firefox-theme/chrome/global/icons/Warning.png | Bin 1623 -> 1269 bytes .../chrome/global/icons/autocomplete-search.svg | 45 +- .../chrome/global/icons/close-XPVista7.png | Bin 931 -> 0 bytes .../chrome/global/icons/close-XPVista7@2x.png | Bin 2031 -> 0 bytes .../global/icons/close-inverted-XPVista7.png | Bin 855 -> 0 bytes .../global/icons/close-inverted-XPVista7@2x.png | Bin 1865 -> 0 bytes .../chrome/global/icons/close-inverted.png | Bin 598 -> 0 bytes .../chrome/global/icons/close-inverted@2x.png | Bin 1207 -> 0 bytes .../chrome/global/icons/close-lunaBlue.png | Bin 0 -> 905 bytes .../chrome/global/icons/close-lunaOlive.png | Bin 0 -> 909 bytes .../chrome/global/icons/close-lunaSilver.png | Bin 0 -> 901 bytes arc-firefox-theme/chrome/global/icons/close.png | Bin 572 -> 1016 bytes arc-firefox-theme/chrome/global/icons/close.svg | 42 +- arc-firefox-theme/chrome/global/icons/close@2x.png | Bin 1160 -> 0 bytes arc-firefox-theme/chrome/global/icons/error-16.png | Bin 926 -> 722 bytes arc-firefox-theme/chrome/global/icons/error-24.png | Bin 0 -> 1155 bytes arc-firefox-theme/chrome/global/icons/error-48.png | Bin 0 -> 2432 bytes arc-firefox-theme/chrome/global/icons/error-64.png | Bin 5590 -> 3914 bytes arc-firefox-theme/chrome/global/icons/find.png | Bin 0 -> 1498 bytes .../chrome/global/icons/folder-item.png | Bin 1302 -> 1602 bytes .../chrome/global/icons/information-16.png | Bin 648 -> 769 bytes .../chrome/global/icons/information-24.png | Bin 1477 -> 1244 bytes .../chrome/global/icons/information-32.png | Bin 2080 -> 1609 bytes .../chrome/global/icons/information-48.png | Bin 0 -> 2598 bytes .../chrome/global/icons/information-64.png | Bin 0 -> 4214 bytes .../chrome/global/icons/panelarrow-horizontal.svg | 11 +- .../chrome/global/icons/panelarrow-vertical.svg | 11 +- .../chrome/global/icons/question-16.png | Bin 759 -> 854 bytes .../chrome/global/icons/question-24.png | Bin 0 -> 1427 bytes .../chrome/global/icons/question-48.png | Bin 0 -> 2849 bytes .../chrome/global/icons/question-64.png | Bin 5181 -> 4204 bytes .../chrome/global/icons/warning-16.png | Bin 780 -> 563 bytes .../chrome/global/icons/warning-24.png | Bin 0 -> 914 bytes .../chrome/global/icons/warning-64.png | Bin 4086 -> 3525 bytes .../chrome/global/icons/warning-large.png | Bin 2603 -> 2125 bytes arc-firefox-theme/chrome/global/icons/warning.svg | 23 +- .../chrome/global/icons/windowControls.png | Bin 3001 -> 2060 bytes arc-firefox-theme/chrome/global/icons/wrap.png | Bin 0 -> 680 bytes .../chrome/global/in-content/check-partial.svg | 15 +- .../chrome/global/in-content/check.svg | 15 +- .../chrome/global/in-content/common.css | 241 +-- .../chrome/global/in-content/dropdown.svg | 10 +- .../chrome/global/in-content/help-glyph.svg | 11 +- .../chrome/global/in-content/info-pages.css | 25 +- .../chrome/global/in-content/radio.svg | 8 +- arc-firefox-theme/chrome/global/inContentUI.css | 41 + .../global/inContentUI/background-texture.png | Bin 0 -> 1751 bytes .../chrome/global/media/TopLevelVideoDocument.css | 1 - .../chrome/global/media/videoClickToPlayButton.svg | 83 +- arc-firefox-theme/chrome/global/menu.css | 18 +- .../global/menu/shared-menu-check-active.svg | 7 - .../chrome/global/menu/shared-menu-check-black.svg | 7 - .../chrome/global/menu/shared-menu-check-hover.svg | 7 - arc-firefox-theme/chrome/global/notification.css | 30 +- arc-firefox-theme/chrome/global/popup.css | 16 +- .../chrome/global/printpreview/arrow-left-end.png | Bin 500 -> 875 bytes .../chrome/global/printpreview/arrow-left.png | Bin 424 -> 676 bytes .../chrome/global/printpreview/arrow-right-end.png | Bin 491 -> 868 bytes .../chrome/global/printpreview/arrow-right.png | Bin 444 -> 688 bytes .../chrome/global/reader/RM-Add-24x24.svg | 9 +- .../chrome/global/reader/RM-Close-24x24.svg | 16 +- .../chrome/global/reader/RM-Delete-24x24.svg | 9 +- .../chrome/global/reader/RM-Minus-24x24.svg | 42 +- .../chrome/global/reader/RM-Plus-24x24.svg | 42 +- .../chrome/global/reader/RM-Reading-List-24x24.svg | 54 +- .../global/reader/RM-Type-Controls-24x24.svg | 27 +- .../global/reader/RM-Type-Controls-Arrow.svg | 46 +- arc-firefox-theme/chrome/global/reader/pocket.svg | 22 - arc-firefox-theme/chrome/global/tabbox.css | 4 +- arc-firefox-theme/chrome/global/toolbarbutton.css | 28 +- arc-firefox-theme/chrome/global/tree/sort-asc.png | Bin 209 -> 161 bytes arc-firefox-theme/chrome/global/tree/sort-dsc.png | Bin 215 -> 155 bytes .../chrome/global/tree/twisty-clsd-hover-rtl.png | Bin 181 -> 0 bytes .../chrome/global/tree/twisty-clsd-hover.png | Bin 179 -> 0 bytes .../chrome/global/tree/twisty-clsd-rtl.png | Bin 227 -> 0 bytes .../chrome/global/tree/twisty-clsd.png | Bin 221 -> 235 bytes .../chrome/global/tree/twisty-open-hover-rtl.png | Bin 180 -> 0 bytes .../chrome/global/tree/twisty-open-hover.png | Bin 179 -> 0 bytes .../chrome/global/tree/twisty-open-rtl.png | Bin 189 -> 0 bytes .../chrome/global/tree/twisty-open.png | Bin 192 -> 232 bytes .../chrome/mozapps/aboutServiceWorkers.css | 44 - .../chrome/mozapps/downloads/downloadButtons.png | Bin 5148 -> 3243 bytes .../mozapps/extensions/category-dictionaries.png | Bin 0 -> 1290 bytes .../mozapps/extensions/category-experiments.png | Bin 0 -> 822 bytes .../mozapps/extensions/category-extensions.png | Bin 0 -> 1862 bytes .../mozapps/extensions/category-languages.png | Bin 0 -> 1860 bytes .../chrome/mozapps/extensions/category-themes.png | Bin 0 -> 1734 bytes .../chrome/mozapps/extensions/extensions.css | 684 +++---- .../chrome/mozapps/extensions/navigation.png | Bin 663 -> 1411 bytes .../chrome/mozapps/extensions/newaddon.css | 10 +- .../chrome/mozapps/extensions/utilities.svg | 13 +- .../mozapps/formautofill/requestAutocomplete.css | 2 +- .../chrome/mozapps/passwordmgr/key.png | Bin 658 -> 712 bytes .../chrome/mozapps/places/defaultFavicon@2x.png | Bin 477 -> 0 bytes .../chrome/mozapps/plugins/notifyPluginCrashed.png | Bin 0 -> 565 bytes .../chrome/mozapps/plugins/notifyPluginGeneric.png | Bin 0 -> 565 bytes .../chrome/mozapps/update/downloadButtons.png | Bin 5148 -> 3243 bytes .../mozapps/xpinstall/xpinstallItemGeneric.png | Bin 0 -> 1862 bytes arc-firefox-theme/install.rdf | 6 +- 365 files changed, 7941 insertions(+), 11317 deletions(-) delete mode 100644 arc-firefox-theme/chrome/browser/Push-16.png delete mode 100644 arc-firefox-theme/chrome/browser/Push-64.png create mode 100644 arc-firefox-theme/chrome/browser/Secure.png delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-error.svg delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg delete mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg create mode 100644 arc-firefox-theme/chrome/browser/bad-content-blocked-16.png create mode 100644 arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png create mode 100644 arc-firefox-theme/chrome/browser/bad-content-blocked-64.png create mode 100644 arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png create mode 100644 arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/panel.css delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/permissions.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg delete mode 100644 arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg delete mode 100644 arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png delete mode 100755 arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png delete mode 100755 arc-firefox-theme/chrome/browser/customizableui/thumburger.png delete mode 100644 arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png delete mode 100644 arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/add.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/command-rulers.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/fast-forward.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/profiler.css delete mode 100644 arc-firefox-theme/chrome/browser/devtools/promisedebugger.css delete mode 100644 arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/rewind.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/rewind@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/timeline.css delete mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png create mode 100644 arc-firefox-theme/chrome/browser/feeds/audioFeedIcon.png create mode 100644 arc-firefox-theme/chrome/browser/feeds/audioFeedIcon16.png create mode 100644 arc-firefox-theme/chrome/browser/feeds/videoFeedIcon.png create mode 100644 arc-firefox-theme/chrome/browser/feeds/videoFeedIcon16.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/android.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/android@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/default-avatar.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/logo.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/logo@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/sync-illustration.png delete mode 100644 arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png create mode 100644 arc-firefox-theme/chrome/browser/identity-icons-generic.png create mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-ev.png create mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png create mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png create mode 100644 arc-firefox-theme/chrome/browser/identity-icons-https.png delete mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-not-secure.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity-secure.svg create mode 100644 arc-firefox-theme/chrome/browser/identity.png delete mode 100644 arc-firefox-theme/chrome/browser/info.svg delete mode 100644 arc-firefox-theme/chrome/browser/loop/menuPanel@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/loop/toolbar-inverted@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/loop/toolbar@2x.png create mode 100644 arc-firefox-theme/chrome/browser/mask.png create mode 100644 arc-firefox-theme/chrome/browser/mask@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel-customize@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel-exit@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel-help@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel-small@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/menuPanel@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/newtab/close.png delete mode 100644 arc-firefox-theme/chrome/browser/newtab/whimsycorn.png delete mode 100644 arc-firefox-theme/chrome/browser/panic-panel/header-small@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/panic-panel/header@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/panic-panel/icons@2x.png delete mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/attention.png delete mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png delete mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/check.png delete mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png delete mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg delete mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png delete mode 100755 arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/reader-tour@2x.png create mode 100644 arc-firefox-theme/chrome/browser/readinglist/icons.svg create mode 100644 arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg create mode 100644 arc-firefox-theme/chrome/browser/readinglist/sidebar.css delete mode 100644 arc-firefox-theme/chrome/browser/reload-stop-go@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/search-arrow-go.svg create mode 100644 arc-firefox-theme/chrome/browser/search-indicator-add-engine.png delete mode 100644 arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg delete mode 100644 arc-firefox-theme/chrome/browser/sync-horizontalbar@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/syncProgress-horizontalbar@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/syncProgress-menuPanel@2x.png create mode 100644 arc-firefox-theme/chrome/browser/syncProgress.css delete mode 100644 arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg delete mode 100644 arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg create mode 100644 arc-firefox-theme/chrome/browser/tabbrowser/tab-separator.png delete mode 100755 arc-firefox-theme/chrome/browser/tracking-protection-16.svg delete mode 100755 arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg delete mode 100644 arc-firefox-theme/chrome/browser/update-badge-failed.svg delete mode 100644 arc-firefox-theme/chrome/browser/urlbar-arrow@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/warning.svg create mode 100644 arc-firefox-theme/chrome/browser/warning16.png create mode 100644 arc-firefox-theme/chrome/browser/warning16@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-shareDevice-16@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-shareDevice-64@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-shareScreen-16@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-shareScreen-64@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-sharingDevice-16@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-sharingMicrophone-16@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/webRTC-sharingScreen-16@2x.png delete mode 100644 arc-firefox-theme/chrome/global/aboutReaderContent.css delete mode 100644 arc-firefox-theme/chrome/global/aboutReaderControls.css create mode 100644 arc-firefox-theme/chrome/global/arrow/arrow-lft-hov.gif create mode 100644 arc-firefox-theme/chrome/global/arrow/arrow-rit-hov.gif delete mode 100644 arc-firefox-theme/chrome/global/icons/close-XPVista7.png delete mode 100644 arc-firefox-theme/chrome/global/icons/close-XPVista7@2x.png delete mode 100644 arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7.png delete mode 100644 arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7@2x.png delete mode 100644 arc-firefox-theme/chrome/global/icons/close-inverted.png delete mode 100644 arc-firefox-theme/chrome/global/icons/close-inverted@2x.png create mode 100644 arc-firefox-theme/chrome/global/icons/close-lunaBlue.png create mode 100644 arc-firefox-theme/chrome/global/icons/close-lunaOlive.png create mode 100644 arc-firefox-theme/chrome/global/icons/close-lunaSilver.png delete mode 100644 arc-firefox-theme/chrome/global/icons/close@2x.png create mode 100644 arc-firefox-theme/chrome/global/icons/error-24.png create mode 100644 arc-firefox-theme/chrome/global/icons/error-48.png create mode 100644 arc-firefox-theme/chrome/global/icons/find.png create mode 100644 arc-firefox-theme/chrome/global/icons/information-48.png create mode 100644 arc-firefox-theme/chrome/global/icons/information-64.png create mode 100644 arc-firefox-theme/chrome/global/icons/question-24.png create mode 100644 arc-firefox-theme/chrome/global/icons/question-48.png create mode 100644 arc-firefox-theme/chrome/global/icons/warning-24.png create mode 100644 arc-firefox-theme/chrome/global/icons/wrap.png create mode 100644 arc-firefox-theme/chrome/global/inContentUI.css create mode 100644 arc-firefox-theme/chrome/global/inContentUI/background-texture.png delete mode 100644 arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg delete mode 100644 arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg delete mode 100644 arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg delete mode 100644 arc-firefox-theme/chrome/global/reader/pocket.svg delete mode 100644 arc-firefox-theme/chrome/global/tree/twisty-clsd-hover-rtl.png delete mode 100644 arc-firefox-theme/chrome/global/tree/twisty-clsd-hover.png delete mode 100644 arc-firefox-theme/chrome/global/tree/twisty-clsd-rtl.png delete mode 100644 arc-firefox-theme/chrome/global/tree/twisty-open-hover-rtl.png delete mode 100644 arc-firefox-theme/chrome/global/tree/twisty-open-hover.png delete mode 100644 arc-firefox-theme/chrome/global/tree/twisty-open-rtl.png delete mode 100644 arc-firefox-theme/chrome/mozapps/aboutServiceWorkers.css create mode 100644 arc-firefox-theme/chrome/mozapps/extensions/category-dictionaries.png create mode 100644 arc-firefox-theme/chrome/mozapps/extensions/category-experiments.png create mode 100644 arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png create mode 100644 arc-firefox-theme/chrome/mozapps/extensions/category-languages.png create mode 100644 arc-firefox-theme/chrome/mozapps/extensions/category-themes.png delete mode 100644 arc-firefox-theme/chrome/mozapps/places/defaultFavicon@2x.png create mode 100644 arc-firefox-theme/chrome/mozapps/plugins/notifyPluginCrashed.png create mode 100644 arc-firefox-theme/chrome/mozapps/plugins/notifyPluginGeneric.png create mode 100644 arc-firefox-theme/chrome/mozapps/xpinstall/xpinstallItemGeneric.png (limited to 'arc-firefox-theme') diff --git a/arc-firefox-theme/chrome/browser/Push-16.png b/arc-firefox-theme/chrome/browser/Push-16.png deleted file mode 100644 index 082b177..0000000 Binary files a/arc-firefox-theme/chrome/browser/Push-16.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/Push-64.png b/arc-firefox-theme/chrome/browser/Push-64.png deleted file mode 100644 index 6e09ab9..0000000 Binary files a/arc-firefox-theme/chrome/browser/Push-64.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/Secure.png b/arc-firefox-theme/chrome/browser/Secure.png new file mode 100644 index 0000000..5ee25e9 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/Secure.png differ diff --git a/arc-firefox-theme/chrome/browser/Toolbar-inverted.png b/arc-firefox-theme/chrome/browser/Toolbar-inverted.png index e2ee578..b58b78a 100644 Binary files a/arc-firefox-theme/chrome/browser/Toolbar-inverted.png and b/arc-firefox-theme/chrome/browser/Toolbar-inverted.png differ diff --git a/arc-firefox-theme/chrome/browser/Toolbar.png b/arc-firefox-theme/chrome/browser/Toolbar.png index d05345d..fa0e25f 100644 Binary files a/arc-firefox-theme/chrome/browser/Toolbar.png and b/arc-firefox-theme/chrome/browser/Toolbar.png differ diff --git a/arc-firefox-theme/chrome/browser/aboutNetError.css b/arc-firefox-theme/chrome/browser/aboutNetError.css index ff80788..6a65ab4 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError.css +++ b/arc-firefox-theme/chrome/browser/aboutNetError.css @@ -6,7 +6,7 @@ body { display: flex; - box-sizing: border-box; + box-sizing: padding-box; min-height: 100vh; padding: 0 48px; align-items: center; @@ -33,23 +33,18 @@ ul { max-width: 512px; } -#errorTitle { - background: url("aboutNetError_info.svg") left 0 no-repeat; - background-size: 3em; - -moz-margin-start: -5em; - -moz-padding-start: 5em; -} - #errorTitleText { - border-bottom: 1px solid #C1C1C1; - padding-bottom: 0.4em; + background: url("aboutNetError_info.svg") left 0 no-repeat; + background-size: 1.2em; + -moz-margin-start: -2em; + -moz-padding-start: 2em; } #errorTitleText:-moz-dir(rtl) { background-position: right 0; } -#errorTitle[sslv3=true] { +#errorTitleText[sslv3=true] { background-image: url("aboutNetError_alert.svg"); } @@ -63,7 +58,7 @@ ul { } @media (max-width: 675px) { - #errorTitle { + #errorTitleText { padding-top: 0; background-image: none; -moz-padding-start: 0; @@ -125,15 +120,6 @@ div#certificateErrorReportingPanel:-moz-dir(rtl) { right: 0; } -#errorStatePanel { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-content: space-between; - align-items: flex-start; -} - span#hostname { font-weight: bold; } @@ -141,3 +127,26 @@ span#hostname { #automaticallyReportInFuture { cursor: pointer; } + +#reportingState { + padding-left: 150px; +} + +#reportSendingMessage { + position: relative; + display: none; +} + +#reportSentMessage { + position: relative; + display: none; +} + +button#reportCertificateError { + position: relative; +} + +button#reportCertificateErrorRetry { + position: relative; + display: none; +} diff --git a/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg b/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg index 66215d4..7b95d68 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg +++ b/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg @@ -1,18 +1,15 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/aboutNetError_info.svg b/arc-firefox-theme/chrome/browser/aboutNetError_info.svg index 2fc0607..20010c1 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError_info.svg +++ b/arc-firefox-theme/chrome/browser/aboutNetError_info.svg @@ -1,8 +1,5 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css b/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css index ba1a542..ecd54b7 100644 --- a/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css +++ b/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css @@ -1,43 +1,102 @@ -@import url("chrome://global/skin/in-content/common.css"); +body { + background-color: rgb(241, 244, 248); + margin-top: 2em; + font: message-box; + font-size: 100%; + min-height: 200px; +} + +p { + font-size: .8em; +} + +#error-box { + background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px; + -moz-padding-start: 30px; +} -#errorPageContainer { - min-width: 50%; +#error-box:-moz-locale-dir(rtl) { + background-position: right 4px; } -#errorTitle { - background: url("aboutNetError_info.svg") left 0 no-repeat; - background-size: 2em; - -moz-padding-start: 3em; +#main-error-msg { + color: #4b4b4b; + font-weight: bold; } + #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; - -moz-padding-start: 0 !important; +@media all and (min-width: 300px) { + #error-box { + max-width: 50%; + margin: 0 auto; + background-image: url('chrome://global/skin/icons/information-32.png'); + min-height: 36px; + -moz-padding-start: 38px; } + button { width: auto !important; - min-width: auto !important; + min-width: 150px; } } +@media all and (min-width: 780px) { + #error-box { + max-width: 30%; + } +} + +button { + font: message-box; + font-size: 0.6875em; + -moz-appearance: none; + -moz-user-select: none; + width: 100%; + margin: 2px 0; + padding: 2px 6px; + line-height: 1.2; + background-color: hsla(210,30%,95%,.1); + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); + background-clip: padding-box; + border: 1px solid hsla(210,15%,25%,.4); + border-color: hsla(210,15%,25%,.3) hsla(210,15%,25%,.35) hsla(210,15%,25%,.4); + border-radius: 3px; + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 1px 0 hsla(0,0%,100%,.1); + + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; + +} + +button:hover { + background-color: hsla(210,30%,95%,.8); + border-color: hsla(210,15%,25%,.45) hsla(210,15%,25%,.5) hsla(210,15%,25%,.55); + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 1px 0 hsla(0,0%,100%,.1), + 0 0 3px hsla(210,15%,25%,.1); + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; +} + +button:hover:active { + background-color: hsla(210,15%,25%,.2); + box-shadow: 0 1px 1px hsla(210,15%,25%,.2) inset, + 0 0 2px hsla(210,15%,25%,.4) inset; + transition-property: background-color, border-color, box-shadow; + transition-duration: 10ms; + transition-timing-function: linear; +} body { width: 310px; diff --git a/arc-firefox-theme/chrome/browser/aboutSocialError.css b/arc-firefox-theme/chrome/browser/aboutSocialError.css index cb4a890..cdf6b40 100644 --- a/arc-firefox-theme/chrome/browser/aboutSocialError.css +++ b/arc-firefox-theme/chrome/browser/aboutSocialError.css @@ -1,40 +1,99 @@ -@import url("chrome://global/skin/in-content/common.css"); +body { + background-color: rgb(241, 244, 248); + margin-top: 2em; + font: message-box; + font-size: 100%; + min-height: 200px; +} + +p { + font-size: .8em; +} -#errorPageContainer { - min-width: 50%; +#error-box { + background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px; + -moz-padding-start: 30px; } -#errorTitle { - background: url("aboutNetError_info.svg") left 0 no-repeat; - background-size: 2em; - -moz-padding-start: 3em; +#error-box:-moz-locale-dir(rtl) { + background-position: right 4px; } +#main-error-msg { + color: #4b4b4b; + font-weight: bold; +} + + #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; - -moz-padding-start: 0 !important; +@media all and (min-width: 300px) { + #error-box { + max-width: 50%; + margin: 0 auto; + background-image: url('chrome://global/skin/icons/information-32.png'); + min-height: 36px; + -moz-padding-start: 38px; } + button { width: auto !important; - min-width: auto !important; + min-width: 150px; } } +@media all and (min-width: 780px) { + #error-box { + max-width: 30%; + } +} + +button { + font: message-box; + font-size: 0.6875em; + -moz-appearance: none; + -moz-user-select: none; + width: 100%; + margin: 2px 0; + padding: 2px 6px; + line-height: 1.2; + background-color: hsla(210,30%,95%,.1); + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); + background-clip: padding-box; + border: 1px solid hsla(210,15%,25%,.4); + border-color: hsla(210,15%,25%,.3) hsla(210,15%,25%,.35) hsla(210,15%,25%,.4); + border-radius: 3px; + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 1px 0 hsla(0,0%,100%,.1); + + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; + +} + +button:hover { + background-color: hsla(210,30%,95%,.8); + border-color: hsla(210,15%,25%,.45) hsla(210,15%,25%,.5) hsla(210,15%,25%,.55); + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 1px 0 hsla(0,0%,100%,.1), + 0 0 3px hsla(210,15%,25%,.1); + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; +} + +button:hover:active { + background-color: hsla(210,15%,25%,.2); + box-shadow: 0 1px 1px hsla(210,15%,25%,.2) inset, + 0 0 2px hsla(210,15%,25%,.4) inset; + transition-property: background-color, border-color, box-shadow; + transition-duration: 10ms; + transition-timing-function: linear; +} diff --git a/arc-firefox-theme/chrome/browser/aboutWelcomeBack.css b/arc-firefox-theme/chrome/browser/aboutWelcomeBack.css index 815ad46..eb0b7a9 100644 --- a/arc-firefox-theme/chrome/browser/aboutWelcomeBack.css +++ b/arc-firefox-theme/chrome/browser/aboutWelcomeBack.css @@ -13,10 +13,14 @@ /* 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]) { +#tabList { display: none; } +#tabList[available] { + display: -moz-box; +} + treechildren::-moz-tree-image(icon), treechildren::-moz-tree-image(noicon) { padding-right: 2px; @@ -44,4 +48,4 @@ treechildren::-moz-tree-image(partial) { } treechildren::-moz-tree-image(partial, selected) { list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); -} +} \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg deleted file mode 100644 index 563ca35..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg deleted file mode 100644 index caaaa46..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg deleted file mode 100644 index a164552..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg deleted file mode 100644 index 9dcc806..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-error.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-error.svg deleted file mode 100644 index e25950f..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-error.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg deleted file mode 100644 index 3b352c2..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg deleted file mode 100644 index e3269c3..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg deleted file mode 100644 index bac1903..0000000 --- a/arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/bad-content-blocked-16.png b/arc-firefox-theme/chrome/browser/bad-content-blocked-16.png new file mode 100644 index 0000000..7cf33ec Binary files /dev/null and b/arc-firefox-theme/chrome/browser/bad-content-blocked-16.png differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png b/arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png new file mode 100644 index 0000000..c2e49b3 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/bad-content-blocked-16@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-blocked-64.png b/arc-firefox-theme/chrome/browser/bad-content-blocked-64.png new file mode 100644 index 0000000..75cf7f9 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/bad-content-blocked-64.png differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png b/arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png new file mode 100644 index 0000000..2bf0868 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/bad-content-unblocked-16.png differ diff --git a/arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png b/arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png new file mode 100644 index 0000000..54eb9f3 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/bad-content-unblocked-64.png differ diff --git a/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css b/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css index 8bc1b45..83b86fe 100644 --- a/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css +++ b/arc-firefox-theme/chrome/browser/browser-lightweightTheme.css @@ -14,8 +14,8 @@ */ /* Lightweight theme on tabs */ -#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start[selected=true]:-moz-lwtheme::before, +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before { background-attachment: scroll, fixed; background-color: transparent; background-image: linear-gradient(transparent 0px, transparent 2px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.35) 3px, hsla(0,0%,100%,0.65) 3px, hsla(0,0%,100%,0.65) 4px, rgba(255,255,255,.3));/*, lwtHeader;*/ @@ -23,7 +23,7 @@ background-repeat: repeat-x, no-repeat; } -#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[visuallyselected=true]:-moz-lwtheme { +#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme { background-attachment: scroll, scroll, fixed; background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index 1e9114c..7f2ea86 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -15,9 +15,7 @@ --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); - --verified-identity-box-backgroundcolor: transparent; - --panel-separator-color: ThreeDShadow; - --urlbar-separator-color: rgba(41, 41, 41, 0.2); } + --verified-identity-box-backgroundcolor: transparent; } #menubar-items { -moz-box-orient: vertical; @@ -62,8 +60,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(212, 213, 219, 0.95) !important; background-clip: padding-box; + margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ - margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -283,7 +281,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +440,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#panelMenu_pocket, -#menu_pocket, -#BMB_pocket { - list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); } +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } #menu_openDownloads { list-style-image: url("chrome://browser/skin/Toolbar-small.png"); @@ -491,7 +488,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -500,22 +497,25 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-badge-container > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } +toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarbutton[type="socialmark"] > .toolbarbutton-icon { + max-width: 32px !important; } + /* Help SDK icons fit: */ -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { width: 16px; } -:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ width: 32px; } #nav-bar #PanelUI-menu-button { - -moz-padding-start: 5px; + -moz-padding-start: 7px; -moz-padding-end: 5px; } #nav-bar #PanelUI-button, @@ -527,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -549,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -690,11 +690,13 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #sync-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 270px, 18px, 252px); } -#sync-button[cui-areatype="toolbar"][status="active"] { +#sync-button[cui-areatype="toolbar"][status="active"], +#sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png"); -moz-image-region: rect(0, 18px, 18px, 0px); } -toolbar[brighttext] #sync-button[status="active"] { +toolbar[brighttext] #sync-button[status="active"], +toolbar[brighttext] #sync-button[status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png"); } #feed-button[cui-areatype="toolbar"] { @@ -739,13 +741,6 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } -#PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; - -moz-image-region: auto !important; } - -toolbar[brighttext] #PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } - #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -788,459 +783,234 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button { +#loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button { +toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"], -#loop-button[disabled="true"] { +#loop-button[state="disabled"] > .toolbarbutton-badge-container, +#loop-button[disabled="true"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] { +#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] { +#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] { +#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 738px, 18px, 720px); } -#pocket-button[cui-areatype="toolbar"] { - -moz-image-region: rect(0, 774px, 18px, 756px); } - -#pocket-button[cui-areatype="toolbar"][open] { - -moz-image-region: rect(18px, 774px, 36px, 756px); } - /* Menu panel and palette styles */ +/* Note that this file isn't used for HiDPI on OS X. */ :root { --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 384px, 32px, 352px); } - - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); - -moz-image-region: rect(0px, 32px, 32px, 0px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 608px, 32px, 576px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 928px, 32px, 896px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 992px, 32px, 960px); } - - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 992px, 64px, 960px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel.png); - -moz-image-region: rect(0, 32px, 32px, 0); } - - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 32px, 32px, 0) !important; } - - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 64px, 32px, 32px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 96px, 32px, 64px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 128px, 32px, 96px); } + --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 160px, 32px, 128px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button) { + list-style-image: var(--menupanel-list-style-image); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 192px, 32px, 160px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 224px, 32px, 192px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } +#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 192px, 64px, 160px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } +#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 224px, 64px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 384px, 32px, 352px); } - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } +#sync-button[cui-areatype="menu-panel"][status="active"] { + list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); } - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 768px, 64px, 704px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png); - -moz-image-region: rect(0px, 64px, 64px, 0px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 480px, 64px, 448px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#tabview-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #tabview-button { + -moz-image-region: rect(0px, 608px, 32px, 576px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 1984px, 64px, 1920px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1984px, 128px, 1920px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); - -moz-image-region: rect(0, 64px, 64px, 0); } +#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 736px, 64px, 704px); } - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 64px, 64px, 0) !important; } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 128px, 64px, 64px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 192px, 64px, 128px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 256px, 64px, 192px); } +#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 864px, 64px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 320px, 64px, 256px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 384px, 64px, 320px); } +#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 896px, 64px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 448px, 64px, 384px); } +#web-apps-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #web-apps-button { + -moz-image-region: rect(0, 928px, 32px, 896px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 1216px, 64px, 1152px); } +#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/menuPanel.png); + -moz-image-region: rect(0, 32px, 32px, 0); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +/* Make sure that the state icons are not shown in the customization palette. */ +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, +#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 64px, 32px, 32px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 96px, 32px, 64px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 128px, 32px, 96px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 160px, 32px, 128px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 192px, 32px, 160px); } - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 1856px, 64px, 1792px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 224px, 32px, 192px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: var(--menupanel-small-list-style-image); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.png); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1282,7 +1052,7 @@ toolbar[brighttext] #loop-button { #urlbar, .searchbar-textbox { -moz-appearance: none; - padding: 2px 3px; + padding: 3px; border-radius: 3px; margin: 0 3px; color: #5c616c; @@ -1314,25 +1084,6 @@ toolbar[brighttext] #loop-button { #urlbar-icons { -moz-box-align: center; } -#urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings { - -moz-appearance: none; - -moz-user-focus: ignore; - color: inherit; - margin: 0; - border: 0; - padding: 8px 20px; - background: transparent; } - -#urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } - #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1349,57 +1100,14 @@ toolbar[brighttext] #loop-button { -moz-margin-start: 0; color: GrayText; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); - padding: 6px 0; - -moz-padding-start: 44px; - -moz-padding-end: 6px; - background-image: url("chrome://browser/skin/info.svg"); - background-clip: padding-box; - background-position: 20px center; - background-repeat: no-repeat; - background-size: 16px 16px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { - background-position: right 20px center; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { - margin: 0; - padding: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { - -moz-margin-start: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - -moz-appearance: none; - -moz-user-focus: ignore; - min-width: 80px; - border-radius: 3px; - padding: 4px 16px; - margin: 0; - -moz-margin-start: 10px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { - color: #616161; - background-color: #e0e0e0; - border: 1px solid #d1d1d1; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { - background-color: #d6d6d6; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { - color: white; - background-color: #67cc14; - border: 1px solid #67cc14; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { - background-color: #5eba12; } - #search-container { min-width: calc(54px + 11ch); } /* identity box */ +#identity-box { + padding: 1px; + font-size: .9em; } + #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1408,98 +1116,192 @@ toolbar[brighttext] #loop-button { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { - background-color: var(--identity-box-verified-background-color); } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { + transition: padding-left, padding-right; } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + -moz-margin-end: 4px; } + +#identity-box.verifiedIdentity:not(:-moz-lwtheme) { + background-color: var(--verified-identity-box-backgroundcolor); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-box { +#identity-icon-labels { + -moz-padding-start: 2px; + -moz-padding-end: 5px; } + +:root { --identity-box-verified-color: #479900; + --identity-box-verified-background-image: linear-gradient(rgba(39, 74, 8, 0), rgba(39, 74, 8, 0.2) 35%, rgba(39, 74, 8, 0.2) 65%, rgba(39, 74, 8, 0)); --identity-box-chrome-color: #e57300; - border-inline-end: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; - font-size: .9em; - padding: 3px 5px 3px 3px; - margin-inline-end: 4px; - overflow: hidden; } + --identity-box-chrome-background-image: linear-gradient(rgba(229, 114, 0, 0), rgba(229, 114, 0, 0.5) 35%, rgba(229, 114, 0, 0.5) 65%, rgba(229, 114, 0, 0)); } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); } + background-position: right; + background-size: 1px; + background-repeat: no-repeat; } -#identity-icon-labels { - padding-inline-start: 2px; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { + background-position: left; } -#notification-popup-box:not([hidden]) + #identity-box { - padding-inline-start: 5px; - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + color: var(--identity-box-verified-color); + background-image: var(--identity-box-verified-background-image); } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { + color: var(--identity-box-chrome-color); + background-image: var(--identity-box-chrome-background-image); } -/* TRACKING PROTECTION ICON */ -#tracking-protection-icon { +/* page proxy icon */ +#page-proxy-favicon { width: 16px; height: 16px; - margin-inline-start: 0; - margin-inline-end: 2px; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } +.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.png); } -#tracking-protection-icon[animate] { - transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } +.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } -#tracking-protection-icon:not([state]) { - margin-inline-start: -18px; - pointer-events: none; - opacity: 0; - /* Only animate the shield in, when it disappears hide it immediately. */ - transition: none; } +.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } -#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { - visibility: collapse; } +.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } + +.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } + +#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { + list-style-image: url("chrome://branding/content/icon64.png"); } + +#identity-popup-brandName { + font-weight: bold; + font-size: 1.25em; + margin-top: .5em; + margin-bottom: .5em; } + +#identity-popup-content-box { + max-width: 50ch; } -/* MAIN IDENTITY ICON */ #page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } + margin-top: 1px; + margin-bottom: 1px; + -moz-margin-start: 3px; + -moz-margin-end: 1px; + -moz-image-region: rect(0, 16px, 16px, 0); } -.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } +#identity-box:hover > #page-proxy-favicon { + -moz-image-region: rect(0, 32px, 16px, 16px); } -.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-secure.svg); } +#identity-box:hover:active > #page-proxy-favicon, +#identity-box[open=true] > #page-proxy-favicon { + -moz-image-region: rect(0, 48px, 16px, 32px); } -.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } +/* Identity popup icons */ +#identity-popup-icon { + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); } -.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(64px, 64px, 128px, 0px); } -.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(128px, 64px, 192px, 0px); } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +/* Identity popup body text */ +.identity-popup-description { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; } -#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { - -moz-image-region: inherit; - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; +.identity-popup-label { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; } + +#identity-popup-content-host, +#identity-popup-content-owner { + font-weight: bold; + max-width: 300px; } + +#identity-popup-content-host, +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { + font-size: 140%; } + +#identity-popup-content-owner { + margin-bottom: 0 !important; } + +#identity-popup-content-verifier { + margin: 4px 0 2px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { + margin-top: 10px; + -moz-margin-start: -18px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/Secure.png"); } + +#identity-popup-help-icon { + -moz-appearance: none; + margin-left: 0px; + border: none; + background: none; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/question-16.png"); + cursor: pointer; } + +#identity-popup-help-icon > .button-box > .button-text { + display: none; } + +#identity-popup-help-icon > .button-box > .button-icon { height: 16px; - opacity: 1; } + width: 16px; } + +#identity-popup-help-icon:-moz-focusring { + outline: 1px dotted; + outline-offset: 1px; } + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +#identity-popup-container { + min-width: 280px; + padding: 10px; } + +#identity-popup-button-container { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); + padding: 10px; + margin-top: 5px; } + +/* Notification popup */ +#notification-popup { + min-width: 280px; } .popup-notification-icon { width: 64px; @@ -1509,31 +1311,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="geolocation"] { list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); } - .popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-progress"], +.popup-notification-icon[popupid="addon-install-cancelled"], .popup-notification-icon[popupid="addon-install-blocked"], -.popup-notification-icon[popupid="addon-install-origin-blocked"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } - -.popup-notification-icon[popupid="addon-progress"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } - -.popup-notification-icon[popupid="addon-install-failed"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } - -.popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } - -#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } - +.popup-notification-icon[popupid="addon-install-origin-blocked"], +.popup-notification-icon[popupid="addon-install-failed"], .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } - -.popup-notification-icon[popupid="addon-install-restart"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); + width: 32px; + height: 32px; } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1541,18 +1328,46 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="web-notifications"] { list-style-image: url(chrome://browser/skin/notification-64.png); } +.addon-progress-description { + width: 350px; + max-width: 350px; } + +.popup-progress-label, +.popup-progress-meter { + -moz-margin-start: 0; + -moz-margin-end: 0; } + +.popup-progress-cancel { + -moz-appearance: none; + background: transparent; + border: none; + padding: 0; + margin: 0; + -moz-margin-start: 5px; + min-height: 0; + min-width: 0; + list-style-image: url("moz-icon://stock/gtk-cancel?size=menu"); } + .popup-notification-icon[popupid="indexedDB-permissions-prompt"], .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } -.popup-notification-icon[popupid="password"] { +.popup-notification-icon[popupid="password-save"], +.popup-notification-icon[popupid="password-change"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } .popup-notification-icon[popupid="webapps-install-progress"], .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } +.popup-notification-icon[popupid="bad-content"] { + list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } + +.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], +.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } + .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1579,36 +1394,36 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #dcdfe3; } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; height: 16px; margin: 0 2px; } +.notification-anchor-icon:-moz-focusring { + outline: 1px dotted -moz-DialogText; } + +.default-notification-icon, +#default-notification-icon { + list-style-image: url(chrome://global/skin/icons/information-16.png); } + .identity-notification-icon, #identity-notification-icon { - list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); - /* XXX: need HiDPI version */ } + list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); } .geo-notification-icon, #geo-notification-icon { list-style-image: url(chrome://browser/skin/Geolocation-16.png); } -#push-notification-icon { - list-style-image: url(chrome://browser/skin/Push-16.png); } - #addons-notification-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } - -#addons-notification-icon:hover { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } - -#addons-notification-icon:hover:active { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1617,12 +1432,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } -#login-fill-notification-icon { - /* Temporary icon until the capture and fill doorhangers are unified. */ - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); - transform: scaleX(-1); } - -.webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1658,6 +1467,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } +.bad-content-blocked-notification-icon, +#bad-content-blocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } + +.bad-content-unblocked-notification-icon, +#bad-content-unblocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } + .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1686,104 +1503,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #web-notifications-notification-icon { list-style-image: url(chrome://browser/skin/notification-16.png); } -.pointerLock-notification-icon, #pointerLock-notification-icon { list-style-image: url(chrome://browser/skin/pointerLock-16.png); } -.translate-notification-icon, -#translate-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 16px, 16px, 0px); } - -.translated-notification-icon, -#translated-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 32px, 16px, 16px); } - -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url(chrome://browser/skin/social/services-64.png); } - -#servicesInstall-notification-icon { - list-style-image: url(chrome://browser/skin/social/services-16.png); } - -/* EME notifications */ -.popup-notification-icon[popupid="drmContentPlaying"], -#eme-notification-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } - -#eme-notification-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; } - -@keyframes emeTeachingMoment { - 0% { - transform: translateX(0); } - 25% { - transform: translateX(3px); } - 75% { - transform: translateX(-3px); } - 100% { - transform: translateX(0); } } -/* HiDPI notification icons */ -@media (min-resolution: 1.1dppx) { - .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); } - - .webRTC-shareDevices-notification-icon, - #webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); } - - .webRTC-sharingDevices-notification-icon, - #webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); } - - .webRTC-shareMicrophone-notification-icon, - #webRTC-shareMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); } - - .webRTC-sharingMicrophone-notification-icon, - #webRTC-sharingMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); } - - .webRTC-shareScreen-notification-icon, - #webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); } - - .webRTC-sharingScreen-notification-icon, - #webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingDevices"], - .popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingMicrophone"], - .popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingScreen"], - .popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); } } -.popup-notification-body[popupid="addon-progress"], -.popup-notification-body[popupid="addon-install-confirmation"] { - width: 28em; - max-width: 28em; } - -.addon-install-confirmation-name { - font-weight: bold; } - -/* Notification icon box */ -#notification-popup-box { - border-radius: 2.5px 0 0 2.5px; } - -.notification-anchor-icon:-moz-focusring { - outline: 1px dotted -moz-DialogText; } - -.indexedDB-notification-icon, -#indexedDB-notification-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } +#pointerLock-cancel { + margin: 0px; } /* Translation infobar */ notification[value="translation"] .messageImage { @@ -1801,9 +1525,6 @@ notification[value="translation"][state="translating"] .messageImage { @media (min-resolution: 1.25dppx) { notification[value="translation"][state="translating"] .messageImage { list-style-image: url(chrome://browser/skin/translating-16@2x.png); } } -notification[value="translation"] hbox[anonid="details"] { - overflow: hidden; } - notification[value="translation"] button, notification[value="translation"] menulist { -moz-appearance: none; @@ -1914,6 +1635,16 @@ notification[value="translation"] button:not([type="menu"]) > .button-box { notification[value="translation"] menulist > .menulist-dropmarker { display: block; } +.translate-notification-icon, +#translate-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); } + +.translated-notification-icon, +#translated-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 32px, 16px, 16px); } + /* Loop/ Hello browser styles */ notification[value="loop-sharing-notification"] .button-menubutton-button { min-width: 0; } @@ -1949,9 +1680,7 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { +.ac-comment { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -1983,24 +1712,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ -#urlbar-go-button, -#urlbar-reload-button, -#urlbar-stop-button { +#urlbar > toolbarbutton { -moz-appearance: none; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); - padding: 0 4px 0 6px; - margin-inline-start: 2px; - border-inline-start: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; } + padding: 0 2px; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { + background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2010,9 +1735,11 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2022,51 +1749,43 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } -@media (min-resolution: 1.1dppx) { - #urlbar-go-button, - #urlbar-reload-button, - #urlbar-stop-button { - list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } - - #urlbar-go-button > .toolbarbutton-icon, - #urlbar-reload-button > .toolbarbutton-icon, - #urlbar-stop-button > .toolbarbutton-icon { - width: 14px; } - - #urlbar-go-button { - -moz-image-region: rect(0, 84px, 28px, 56px); } - - #urlbar-go-button:hover { - -moz-image-region: rect(28px, 84px, 56px, 56px); } +/* Popup blocker button */ +#page-report-button { + list-style-image: url("chrome://browser/skin/Info.png"); } - #urlbar-go-button:hover:active { - -moz-image-region: rect(56px, 84px, 84px, 56px); } +/* Reading List button */ +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; } - #urlbar-reload-button { - -moz-image-region: rect(0, 28px, 28px, 0); } +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; } - #urlbar-reload-button:not([disabled]):hover { - -moz-image-region: rect(28px, 28px, 56px, 0); } +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - #urlbar-reload-button:not([disabled]):hover:active { - -moz-image-region: rect(56px, 28px, 84px, 0); } +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - #urlbar-stop-button { - -moz-image-region: rect(0, 56px, 28px, 28px); } +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - #urlbar-stop-button:not([disabled]):hover { - -moz-image-region: rect(28px, 56px, 56px, 28px); } +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); } } -/* Popup blocker button */ -#page-report-button { - list-style-image: url("chrome://browser/skin/Info.png"); } +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } /* Reader mode button */ #reader-mode-button { @@ -2262,12 +1981,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /* Tabstrip */ :root { --tab-toolbar-navbar-overlap: 1px; - --navbar-tab-toolbar-highlight-overlap: 1px; --tab-min-height: 31px; } -#TabsToolbar { - --tab-stroke-background-size: auto 100%; } - /* image preloading hack */ #tabbrowser-tabs::before { /* Because of bug 853415, we need to ordinal this to the first position: */ @@ -2290,13 +2005,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-tab { -moz-box-align: stretch; } +.tabbrowser-tab[remote] { + text-decoration: underline; } + .tabbrowser-tab[selected="true"], .tabbrowser-tab[selected="true"]:hover, .tabbrowser-tab:not([selected="true"]):hover { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -2316,7 +2034,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, -.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2332,33 +2049,14 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-icon-overlay { width: 16px; height: 16px; - margin-top: -12px; + margin-top: 10px; -moz-margin-start: -16px; - position: relative; } + display: none; } .tab-icon-overlay[crashed] { + display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]) { - border-radius: 8px; } - -.tab-icon-overlay[soundplaying]:hover, -.tab-icon-overlay[muted]:not([crashed]):hover { - background-color: white; } - -.tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio"); } - -.tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio-muted"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio-muted"); } - .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2374,48 +2072,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } -.tab-icon-sound { - -moz-margin-start: 4px; - width: 16px; - height: 16px; - padding: 0; } - -.tab-icon-sound[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab"); } - -.tab-icon-sound[soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-hover"); } - -.tab-icon-sound[soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-pressed"); } - -.tab-icon-sound[muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-muted"); } - -.tab-icon-sound[muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } - -.tab-icon-sound[muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } - -.tab-icon-sound[visuallyselected=true][soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[visuallyselected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2432,7 +2088,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-overflow-indicator.png); background-size: 100% 100%; width: 14px; - margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); + margin-bottom: var(--tab-toolbar-navbar-overlap); pointer-events: none; position: relative; z-index: 3; @@ -2458,16 +2114,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2484,8 +2140,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ -moz-margin-start: -30px; background-size: 100% 100%; @@ -2493,64 +2149,64 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: -moz-box; position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: var(--tab-stroke-background-size); + background-size: auto; /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } + background-size: auto 100%, auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/light/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/light/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; @@ -2563,9 +2219,6 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]), -.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2575,7 +2228,7 @@ lwtHeader;*/ height: 100%; position: absolute; } -.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; @@ -2605,9 +2258,8 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content { - outline: 1px dotted; - outline-offset: -6px; } +.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { + outline: 1px dotted; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2812,12 +2464,19 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } +#full-screen-warning-container[obscure-browser] { + background-color: rgba(0, 0, 0, 0.3); } + .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } +.full-screen-approval-button, +#full-screen-remember-decision { + font-size: 120%; } + /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -2943,7 +2602,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2956,7 +2615,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2966,7 +2625,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3068,7 +2727,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3078,47 +2737,14 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-resizehandle { background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png"); } } /* Developer toolbar */ -/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. - We are copy/pasting variables from light-theme and dark-theme, - since they aren't loaded in this context (within browser.css). */ -:root[devtoolstheme="light"] #developer-toolbar { - --gcli-background-color: #ebeced; - /* --theme-tab-toolbar-background */ - --gcli-input-background: #f0f1f2; - /* --theme-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; - /* --theme-sidebar-background */ - --gcli-input-color: #18191a; - /* --theme-body-color */ - --gcli-border-color: #aaaaaa; - /* --theme-splitter-color */ - --selection-background: #4c9ed9; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - -:root[devtoolstheme="dark"] #developer-toolbar { - --gcli-background-color: #343c45; - /* --theme-toolbar-background */ - --gcli-input-background: rgba(37, 44, 51, 0.6); - /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #252c33; - /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; - /* --theme-body-color-alt */ - --gcli-border-color: black; - /* --theme-splitter-color */ - --selection-background: #1d4f73; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - #developer-toolbar { -moz-appearance: none; padding: 0; min-height: 32px; - background-color: var(--gcli-background-color); - border-top: 1px solid var(--gcli-border-color); } + background-color: #343C45; + /* Toolbars */ + border-top: 1px solid #060a0d; + box-shadow: 0 1px 0 rgba(248, 250, 252, 0.05) inset, 0 -1px 0 rgba(6, 11, 14, 0.1) inset; } #developer-toolbar > toolbarbutton { -moz-appearance: none; @@ -3131,10 +2757,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { .developer-toolbar-button > image { margin: auto 10px; } -:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image, -:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); } - .developer-toolbar-button > .toolbarbutton-icon, #developer-toolbar-closebutton > .toolbarbutton-icon { width: 16px; @@ -3156,7 +2778,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3178,7 +2800,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3218,22 +2840,21 @@ html|*#gcli-output-frame { text-shadow: none; box-shadow: none; border-width: 0; - background-color: transparent; - border-radius: 0; } + background-color: transparent; } .gclitoolbar-input-node { -moz-appearance: none; - color: var(--gcli-input-color); - background-color: var(--gcli-input-background); + color: #cdd9e4; + background-color: #242b33; background-repeat: no-repeat; background-position: 4px center; - box-shadow: 1px 0 0 var(--gcli-border-color) inset, -1px 0 0 var(--gcli-border-color) inset; + box-shadow: 0 1px 1px rgba(6, 11, 14, 0.2) inset, 1px 0 0 rgba(6, 11, 14, 0.2) inset, -1px 0 0 rgba(6, 11, 14, 0.2) inset; line-height: 32px; outline-style: none; padding: 0; } .gclitoolbar-input-node[focused="true"] { - background-color: var(--gcli-input-focused-background); } + background-color: #232e38; } .gclitoolbar-input-node::before { content: ""; @@ -3249,12 +2870,12 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { - background-color: var(--selection-background); - color: var(--selection-color); + background-color: #cdd9e4; + color: #1f2933; text-shadow: none; } .gclitoolbar-complete-node { @@ -3343,69 +2964,22 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; +.popup-notification-item-title[popupid="bad-content"] { font-weight: bold; } -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } +.popup-notification-item-message[popupid="bad-content"] { + width: 17em; } -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } +.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), +.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { + color: GrayText; } -.login-fill-item.different-hostname > .login-hostname { - color: #888; +.popup-notification-item-message-critical[popupid="bad-content"] { + color: #d74345; font-style: italic; } -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - -moz-margin-start: 38px; } +.popup-notification-footer[popupid="bad-content"] { + padding-top: 1em; } /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3576,6 +3150,16 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); } + +#servicesInstall-notification-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); } + +#social-undoactivation-button { + -moz-margin-start: 0; + /* override default label margin to match description margin */ } + .social-activation-icon { width: auto; height: auto; @@ -3761,6 +3345,7 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; + margin: -285px 0 0; overflow: hidden; } chatbar { @@ -3804,6 +3389,26 @@ chatbox { border-top-left-radius: 2.5px; border-top-right-radius: 2.5px; } +/* EME notifications */ +.popup-notification-icon[popupid="drmContentPlaying"], +#eme-notification-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } + +#eme-notification-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; } + +@keyframes emeTeachingMoment { + 0% { + transform: translateX(0); } + 25% { + transform: translateX(3px); } + 75% { + transform: translateX(-3px); } + 100% { + transform: translateX(0); } } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3930,36 +3535,19 @@ chatbox { #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-lwtheme-button, -#customization-titlebar-visibility-button { + -moz-image-region: rect(0, 24px, 24px, 0); padding: 2px 7px; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ -moz-margin-start: 6px !important; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { - width: 20px; - height: 20px; - border-radius: 2px; - background-size: contain; } - #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); } } #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; @@ -3992,13 +3580,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4318,11 +3906,9 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } -#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4331,7 +3917,6 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4351,7 +3936,6 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4544,15 +4128,6 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } -#context-bookmarkpage[starred=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } - -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { @@ -4571,6 +4146,3 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } - -.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/content-contextmenu.svg b/arc-firefox-theme/chrome/browser/content-contextmenu.svg index b72b247..f3b4376 100644 --- a/arc-firefox-theme/chrome/browser/content-contextmenu.svg +++ b/arc-firefox-theme/chrome/browser/content-contextmenu.svg @@ -2,45 +2,72 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg deleted file mode 100644 index 8566d63..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview-back.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg deleted file mode 100644 index 98c8f61..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg deleted file mode 100644 index e3e82c1..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/conn-degraded.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg deleted file mode 100644 index d4ee83a..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg deleted file mode 100644 index b82ee42..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg b/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg deleted file mode 100644 index af45b90..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/mcb-disabled.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/panel.css b/arc-firefox-theme/chrome/browser/controlcenter/panel.css deleted file mode 100644 index 15577de..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/panel.css +++ /dev/null @@ -1,305 +0,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/. */ - - -/* Hide all conditional elements by default. */ -:-moz-any([when-connection],[when-mixedcontent],[when-ciphers]) { - display: none; -} - -/* Show the right elements for the right connection states. */ -#identity-popup[connection=not-secure] [when-connection~=not-secure], -#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 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 '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(--panel-arrowcontent-background); - border-bottom-right-radius: 3.5px; - padding: 0; -} - -#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) { - border-bottom-right-radius: 0; - border-bottom-left-radius: 3.5px; -} - -.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 { - padding: 0.5em 0 1em; - -moz-padding-start: calc(2em + 24px); - -moz-padding-end: 1em; - background-repeat: no-repeat; - background-position: 1em 1em; - background-size: 24px auto; -} - -#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: 38px; - border: 0 none; - -moz-appearance: none; - background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg"), - linear-gradient(rgba(255,255,255,0.3), transparent); - background-size: 16px, auto; - background-position: center; - background-repeat: no-repeat; - background-color: transparent; -} - -.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: hsla(210,4%,10%,.07); -} - -.identity-popup-expander:hover:active { - background-color: hsla(210,4%,10%,.12); - box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; -} - -/* CONTENT */ - -#identity-popup-security-content > description, -#identity-popup-security-descriptions > description, -#identity-popup-securityView-header > description, -#identity-popup-securityView-body > 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-warning-gray { - -moz-padding-start: 24px; - background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%; -} - -.identity-popup-warning-yellow { - -moz-padding-start: 24px; - background: url(chrome://browser/skin/controlcenter/warning-yellow.svg) no-repeat 0 50%; -} - -/* SECURITY */ - -.identity-popup-connection-secure { - color: #418220; -} - -.identity-popup-connection-not-secure { - color: #d74345; -} - -#identity-popup-securityView { - padding-bottom: 2em; - 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/conn-secure.svg); -} - -/* 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/conn-degraded.svg); -} - -#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 { - border-bottom: 1px solid var(--panel-separator-color); - padding-bottom: 1em; -} - -#identity-popup-securityView-body { - -moz-padding-end: 1em; -} - -#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"); -} - -#tracking-protection-content[state="loaded-tracking-content"] { - background-image: url("chrome://browser/skin/controlcenter/tracking-protection-disabled.svg"); -} - -#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-permission-list { - margin-top: 5px; -} - -.identity-popup-permission-label { - -moz-margin-start: 0; -} - - -.identity-popup-expander:-moz-focusring { - padding: 1px; -} - -.identity-popup-expander:-moz-focusring > .button-box { - outline: 1px -moz-dialogtext dotted; -} diff --git a/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg b/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg deleted file mode 100644 index 9a0cb2b..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg deleted file mode 100644 index 363b0df..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection-disabled.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg b/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg deleted file mode 100644 index a58d8bd..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/tracking-protection.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg b/arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg deleted file mode 100644 index 5f122c3..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/warning-gray.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - diff --git a/arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg b/arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg deleted file mode 100644 index e2d3a36..0000000 --- a/arc-firefox-theme/chrome/browser/controlcenter/warning-yellow.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - diff --git a/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png b/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png deleted file mode 100644 index 593e1df..0000000 Binary files a/arc-firefox-theme/chrome/browser/customizableui/menuPanel-customizeFinish@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css index c96ee12..56646db 100644 --- a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css +++ b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css @@ -13,7 +13,12 @@ :root { - --panel-ui-exit-subview-gutter-width: 38px; + --panel-ui-button-background-image: linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, transparent), + linear-gradient(to bottom, transparent, hsla(210,54%,20%,.3) 30%, hsla(210,54%,20%,.3) 70%, transparent), + linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 30%, hsla(0,0%,100%,.3) 70%, transparent); + --panel-ui-button-background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 1px) !important; + --panel-ui-button-background-position: 0px 0px, 1px 0px, 2px 0px; + --panel-ui-button-background-repeat: no-repeat; } #PanelUI-popup #PanelUI-contents:empty { @@ -83,43 +88,20 @@ } #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; + background-image: var(--panel-ui-button-background-image); + background-size: var(--panel-ui-button-background-size); + background-position: var(--panel-ui-button-background-position); + background-repeat: var(--panel-ui-button-background-repeat); } -#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-button:-moz-locale-dir(rtl) { + background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0; } -#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - display: -moz-box; +#PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after { + content: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; height: 10px; - width: 10px; - background-size: contain; - border: 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="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; - height: 13px; - box-shadow: none; - filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); -} - -#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { - filter: none; } .panel-subviews { @@ -128,7 +110,7 @@ border-left: 1px solid hsla(210,4%,10%,.3); box-shadow: 0 3px 5px hsla(210,4%,10%,.1), 0 0 7px hsla(210,4%,10%,.1); - -moz-margin-start: var(--panel-ui-exit-subview-gutter-width); + -moz-margin-start: 38px; } .panel-viewstack[viewtype="main"] > .panel-subviews { @@ -186,6 +168,16 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan flex-direction: column; } +#app-extension-point-end > #PanelUI-menu-button { + padding: 2px 5px; +} +#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text { + display: none; +} +#app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon { + margin: 0; +} + #PanelUI-popup > arrowscrollbox > autorepeatbutton { display: none; } @@ -245,11 +237,6 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan max-width: 30em; } -/* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */ -panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) { - max-width: 33em; /* standaloneSubviewWidth + 3 */ -} - panelview:not([mainview]) .toolbarbutton-text, .cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; @@ -260,11 +247,6 @@ panelview:not([mainview]) .toolbarbutton-text, padding: 4px 0; } -.cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent { - padding-top: 0; - padding-bottom: 0; -} - .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { padding-bottom: 0; } @@ -310,19 +292,12 @@ toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 { } /* 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 { +toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon, +toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .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; @@ -403,10 +378,8 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { #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-fxa-status, #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"]) { @@ -431,15 +404,13 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon, -.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack, +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container, .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .customization-palette .toolbarbutton-1 > .toolbarbutton-icon, -.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack, +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container, .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) @@ -459,11 +430,8 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it /* 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; +/* has the minum size we want, but no padding/margin. */ +.panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon { min-width: 32px; min-height: 32px; margin: 0; @@ -504,82 +472,29 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { margin: 0; } -#main-window[customizing] #PanelUI-footer-fxa > toolbarseparator { - 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-right: 16.5px; - box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.1) inset, 0px 1px 0px rgba(12, 27, 38, 0.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]) { +#PanelUI-footer-inner { display: flex; border-top: 1px solid hsla(210,4%,10%,.14); } -#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, -#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa { +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner { position: relative; } -#PanelUI-footer-inner > toolbarseparator, -#PanelUI-footer-fxa > toolbarseparator { +#PanelUI-footer-inner > toolbarseparator { border: 0; border-left: 1px solid hsla(210,4%,10%,.14); margin: 7px 0 7px; -moz-appearance: none; } -#PanelUI-footer-inner:hover > toolbarseparator, -#PanelUI-footer-fxa:hover > toolbarseparator { +#PanelUI-footer-inner:hover > toolbarseparator { margin: 0; } #PanelUI-update-status, #PanelUI-help, -#PanelUI-fxa-label, -#PanelUI-fxa-icon, +#PanelUI-fxa-status, #PanelUI-customize, #PanelUI-quit { margin: 0; @@ -588,22 +503,21 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { min-height: 40px; -moz-appearance: none; box-shadow: none; - border: none; + border: none; border-radius: 0; transition: background-color; -moz-box-orient: horizontal; } -#PanelUI-update-status { +#PanelUI-update-status, +#PanelUI-fxa-status { border-top: 1px solid hsla(210,4%,10%,.14); -} - -#PanelUI-update-status { border-bottom: 1px solid transparent; margin-bottom: -1px; } -#PanelUI-update-status > .toolbarbutton-text { +#PanelUI-update-status > .toolbarbutton-text, +#PanelUI-fxa-status > .toolbarbutton-text { width: 0; /* Fancy cropping solution for flexbox. */ } @@ -613,7 +527,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-update-status > .toolbarbutton-text, -#PanelUI-fxa-label > .toolbarbutton-text, +#PanelUI-fxa-status > .toolbarbutton-text, #PanelUI-customize > .toolbarbutton-text { margin: 0; padding: 0 6px; @@ -621,37 +535,25 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-help > .toolbarbutton-text, -#PanelUI-quit > .toolbarbutton-text, -#PanelUI-fxa-avatar > .toolbarbutton-text { +#PanelUI-quit > .toolbarbutton-text { display: none; } #PanelUI-update-status > .toolbarbutton-icon, -#PanelUI-fxa-label > .toolbarbutton-icon, -#PanelUI-fxa-icon > .toolbarbutton-icon, +#PanelUI-fxa-status > .toolbarbutton-icon, #PanelUI-customize > .toolbarbutton-icon, #PanelUI-help > .toolbarbutton-icon, #PanelUI-quit > .toolbarbutton-icon { -moz-margin-end: 0; } -#PanelUI-fxa-icon { - -moz-padding-start: 15px; - -moz-padding-end: 15px; -} - -#PanelUI-fxa-label, +#PanelUI-fxa-status, #PanelUI-customize { flex: 1; -moz-padding-start: 15px; -moz-border-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 { - -moz-padding-start: 0px; -} - #PanelUI-update-status { width: calc(22.35em + 30px); -moz-padding-start: 15px; @@ -662,19 +564,18 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url(chrome://branding/content/icon16.png); } -#PanelUI-fxa-label, -#PanelUI-fxa-icon { +#PanelUI-fxa-status { list-style-image: url(chrome://browser/skin/sync-horizontalbar.png); } -#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon { +#PanelUI-fxa-status[syncstatus="active"] { 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-fxa-status[fxastatus="migrate-signup"], +#PanelUI-fxa-status[fxastatus="migrate-verify"] { + list-style-image: url(chrome://browser/skin/warning16.png); + -moz-image-region: rect(0, 32px, 16px, 16px); } #PanelUI-customize { @@ -694,50 +595,13 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url(chrome://browser/skin/menuPanel-exit.png); } -#PanelUI-fxa-label, -#PanelUI-fxa-icon, +#PanelUI-fxa-status, #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-avatar[disabled], -#PanelUI-fxa-icon[disabled] { - display: none; -} - -#PanelUI-fxa-status[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; - -moz-margin-end: 0; -} - -#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { - list-style-image: url(chrome://browser/skin/fxa/default-avatar.png) -} - #PanelUI-customize:hover, #PanelUI-help:not([disabled]):hover, #PanelUI-quit:not([disabled]):hover { @@ -760,7 +624,6 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #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 { @@ -769,7 +632,6 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #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 { @@ -779,26 +641,10 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #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 { +#PanelUI-fxa-status:not([disabled]):hover:active { outline: none; } -#PanelUI-footer-fxa[fxastatus="error"] { - background-color: hsla(42, 94%, 88%, 1.0); - border-top: 1px solid hsla(42, 94%, 70%, 1.0); -} - -#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { - background-color: hsla(42, 94%, 85%, 1.0); -} - -#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { - background-color: hsla(42, 94%, 82%, 1.0); - box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; -} - #PanelUI-update-status { color: black; } @@ -948,7 +794,7 @@ panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover, menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], -.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover:not([checked="true"]), +.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover, .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not(:-moz-any([disabled],[open],:active)):hover { background-color: hsla(210,4%,10%,.08); @@ -1096,7 +942,7 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button position: absolute; top: 0; height: 100%; - width: var(--panel-ui-exit-subview-gutter-width); + width: 38px; background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png), linear-gradient(rgba(255,255,255,0.3), transparent); background-repeat: no-repeat; @@ -1113,14 +959,14 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button toolbarbutton[panel-multiview-anchor="true"] { background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png), linear-gradient(rgba(255,255,255,0.3), transparent); - background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center; + background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center; background-repeat: no-repeat, repeat; } toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) { background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png), linear-gradient(rgba(255,255,255,0.3), transparent); - background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center; + background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center; } toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, @@ -1318,9 +1164,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { #customizationui-widget-multiview > .panel-viewcontainer, #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack, #PanelUI-panicView > .panel-subview-body, -#PanelUI-panicView, -#PanelUI-pocketView > .panel-subview-body, -#PanelUI-pocketView { +#PanelUI-panicView { overflow: visible; } @@ -1509,117 +1353,6 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { border-color: #aaa; } -@media (min-resolution: 1.1dppx) { - #PanelUI-help[panel-multiview-anchor="true"]::after, - toolbarbutton[panel-multiview-anchor="true"] { - background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png), - linear-gradient(rgba(255,255,255,0.3), transparent); - background-size: 16px, auto; - } - - #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after, - toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) { - background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl@2x.png), - linear-gradient(rgba(255,255,255,0.3), transparent); - } - - #PanelUI-update-status { - list-style-image: url(chrome://branding/content/icon32.png); - } - - #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { - list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png) - } - - #PanelUI-fxa-label, - #PanelUI-fxa-icon { - list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png); - } - - #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon { - list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png); - } - - #PanelUI-customize { - list-style-image: url(chrome://browser/skin/menuPanel-customize@2x.png); - } - - #customization-panelHolder #PanelUI-customize { - list-style-image: url(chrome://browser/skin/customizableui/menuPanel-customizeFinish@2x.png); - } - - #PanelUI-help { - list-style-image: url(chrome://browser/skin/menuPanel-help@2x.png); - } - - #PanelUI-quit { - list-style-image: url(chrome://browser/skin/menuPanel-exit@2x.png); - } - - #PanelUI-fxa-label, - #PanelUI-fxa-icon, - #PanelUI-customize, - #PanelUI-help, - #PanelUI-quit { - -moz-image-region: rect(0, 32px, 32px, 0); - } - - #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 { - width: 16px; - } - - #PanelUI-customize:hover, - #PanelUI-help:not([disabled]):hover, - #PanelUI-quit:not([disabled]):hover { - -moz-image-region: rect(0, 64px, 32px, 32px); - } - - #PanelUI-customize:hover:active, - #PanelUI-help:not([disabled]):hover:active, - #PanelUI-quit:not([disabled]):hover:active { - -moz-image-region: rect(0, 96px, 32px, 64px); - } - - #PanelUI-help[panel-multiview-anchor="true"] { - -moz-image-region: rect(0, 128px, 32px, 96px); - background-size: auto; - } - - .subviewbutton[checked="true"] { - background-image: url("chrome://global/skin/menu/shared-menu-check@2x.png"); - } - - #panic-button-success-icon, - #PanelUI-panic-timeframe-icon { - list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png); - } - - #PanelUI-panic-timeframe-icon-small { - list-style-image: url(chrome://browser/skin/panic-panel/header-small@2x.png); - } - - #PanelUI-panic-actionlist-cookies { - background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0); - } - - #PanelUI-panic-actionlist-history { - background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 64, 32, 32); - } - - #PanelUI-panic-actionlist-windows { - background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 96, 32, 64); - } - - #PanelUI-panic-actionlist-newwindow { - background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96); - } -} - .panel-subviews { background-color: -moz-dialog; } @@ -1708,8 +1441,7 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) { .PanelUI-subView toolbarseparator, .PanelUI-subView menuseparator, .cui-widget-panelview menuseparator, -#PanelUI-footer-inner > toolbarseparator, -#PanelUI-footer-fxa > toolbarseparator { +#PanelUI-footer-inner > toolbarseparator { -moz-appearance: none !important; } diff --git a/arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png b/arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png deleted file mode 100755 index 5bd6385..0000000 Binary files a/arc-firefox-theme/chrome/browser/customizableui/thumburger-inverted.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/customizableui/thumburger.png b/arc-firefox-theme/chrome/browser/customizableui/thumburger.png deleted file mode 100755 index bd75b44..0000000 Binary files a/arc-firefox-theme/chrome/browser/customizableui/thumburger.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devedition.css b/arc-firefox-theme/chrome/browser/devedition.css index d1ddeca..272118b 100644 --- a/arc-firefox-theme/chrome/browser/devedition.css +++ b/arc-firefox-theme/chrome/browser/devedition.css @@ -6,10 +6,10 @@ :root { --tab-toolbar-navbar-overlap: 0px; - --navbar-tab-toolbar-highlight-overlap: 0px; --space-above-tabbar: 0px; --toolbarbutton-text-shadow: none; - --backbutton-urlbar-overlap: 0px; + --panel-ui-button-background-size: 1px calc(100% - 1px); + --panel-ui-button-background-position: 1px 0px; } :root[devtoolstheme="dark"] { @@ -21,7 +21,6 @@ --chrome-nav-bar-separator-color: rgba(0,0,0,.2); --chrome-nav-buttons-background: #252C33; --chrome-nav-buttons-hover-background: #1B2127; - --chrome-nav-bar-controls-border-color: #1D2328; --chrome-selection-color: #fff; --chrome-selection-background-color: #074D75; @@ -29,6 +28,7 @@ --tabs-toolbar-color: #F5F7FA; --tab-background-color: #1C2126; --tab-hover-background-color: #07090a; + --tab-separator-color: #474C50; --tab-selection-color: #f5f7fa; --tab-selection-background-color: #1a4666; --tab-selection-box-shadow: 0 2px 0 #D7F1FF inset, @@ -47,25 +47,25 @@ --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px); + /* Identity box */ + --identity-box-chrome-color: #46afe3; + --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%); + --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%); + --verified-identity-box-backgroundcolor: transparent; + /* Url and search bars */ --url-and-searchbar-background-color: #171B1F; --url-and-searchbar-color: #fff; - --urlbar-separator-color: #5F6670; --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px); - --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px); - --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px); --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px); - --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px); - --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px); --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted"); -} -:root[devtoolstheme="dark"] #identity-box { - --identity-box-chrome-color: #46afe3; - --identity-box-verified-background-color: transparent; - --identity-box-selected-background-color: rgba(231,230,230,.2); + /* Menu button separator */ + --panel-ui-button-background-image: linear-gradient(to bottom, transparent, #5F6670 30%, #5F6670 70%, transparent); } :root[devtoolstheme="dark"] .searchbar-dropmarker-image { @@ -78,17 +78,17 @@ --chrome-background-color: #E3E4E6; --chrome-color: #18191a; - --chrome-secondary-background-color: #f5f6f7; + --chrome-secondary-background-color: #f0f1f2; --chrome-navigator-toolbox-separator-color: #cccccc; --chrome-nav-bar-separator-color: #B6B6B8; - --chrome-nav-buttons-background: #fcfcfc; + --chrome-nav-buttons-background: #f0f1f2; --chrome-nav-buttons-hover-background: #DADBDB; - --chrome-nav-bar-controls-border-color: #ccc; --chrome-selection-color: #f5f7fa; --chrome-selection-background-color: #4c9ed9; --tab-background-color: #E3E4E6; --tab-hover-background-color: #D7D8DA; + --tab-separator-color: #C6C6C7; --tab-selection-color: #f5f7fa; --tab-selection-background-color: #4c9ed9; --tab-selection-box-shadow: 0 2px 0 #9FDFFF inset, @@ -98,18 +98,21 @@ /* Toolbar buttons */ - --toolbarbutton-hover-background: #eaeaea; + --toolbarbutton-hover-background: #D7D7D8; --toolbarbutton-hover-boxshadow: none; --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1); - --toolbarbutton-active-background: #d7d7d8 border-box; + --toolbarbutton-active-background: rgba(76,158,217,.5) linear-gradient(rgba(76,158,217,.5), rgba(76,158,217,.5)) border-box --toolbarbutton-active-boxshadow: none; - --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15); - --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8; + --toolbarbutton-active-bordercolor: rgba(0,0,0,0.3); + --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,0.2); --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 18px); /* Url and search bars */ --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon"); + + /* Menu button separator */ + --panel-ui-button-background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 70%, transparent); } /* Give some space to drag the window around while customizing @@ -136,17 +139,17 @@ -moz-padding-start: 0; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { width: 0; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { -moz-margin-start: 0; } /* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */ @@ -182,11 +185,6 @@ background-image: none; } -.browserContainer > .findbar-textbox { - background-color: var(--url-and-searchbar-background-color) !important; - color: var(--url-and-searchbar-color); -} - /* Default findbar text color doesn't look good - Bug 1125677 */ .browserContainer > findbar .findbar-find-status, .browserContainer > findbar .found-matches { @@ -212,41 +210,28 @@ toolbar[brighttext] #downloads-indicator-counter { } /* URL bar and search bar*/ +/* XXX :root[devtoolstheme="dark"] is a workaround for bug 1096413 on the findbar. */ #urlbar, -#navigator-toolbox .searchbar-textbox { +#navigator-toolbox .searchbar-textbox, +:root[devtoolstheme="dark"] .browserContainer > findbar .findbar-textbox { background-color: var(--url-and-searchbar-background-color) !important; background-image: none !important; - color: var(--url-and-searchbar-color) !important; - border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + color: var(--url-and-searchbar-color); + border: none !important; box-shadow: none !important; } -#urlbar { - -moz-border-start: none !important; - opacity: 1 !important; -} - window:not([chromehidden~="toolbar"]) #urlbar-wrapper { overflow: -moz-hidden-unscrollable; clip-path: none; -moz-margin-start: 0; } -/* Swap out the white arrow with a dark one for the dark theme */ -:root[devtoolstheme="dark"] #notification-popup-box { - border-image: url("chrome://browser/skin/devedition/urlbar-arrow.png") 0 8 0 0 fill; -} - -@media (min-resolution: 1.1dppx) { - :root[devtoolstheme="dark"] #notification-popup-box { - border-image: url("chrome://browser/skin/devedition/urlbar-arrow@2x.png") 0 16 0 0 fill; - } -} - -/* The (white) notification box background color should match the theme */ +/* Make the white notication box stick out less. */ #notification-popup-box { border-radius: 0; - background-color: var(--url-and-searchbar-background-color); + border: none; + background: transparent; } /* Nav bar specific stuff */ @@ -281,11 +266,23 @@ searchbar:not([oneoffui]) .search-go-button { visibility: hidden; } -/* Tab separators */ -.tabbrowser-tab::after, -.tabbrowser-tab::before { - background: currentColor; - opacity: 0.2 !important; +/* Make the tab splitter 1px wide with a solid background. */ +#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, +.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, +#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { + background: var(--tab-separator-color); + width: 1px; + -moz-margin-start: 0; + -moz-margin-end: -1px; +} + +/* For the last tab separator, use margin-start of -1px to prevent jittering + due to the ::after element causing the width of the tab to extend, which + causes an overflow and makes it disappear, which removes the overflow and + causes it to reappear, etc, etc. */ +#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { + -moz-margin-start: -1px; + -moz-margin-end: 0; } .tabbrowser-arrowscrollbox > .scrollbutton-down, @@ -294,13 +291,18 @@ searchbar:not([oneoffui]) .search-go-button { border-color: transparent; } +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { + margin-bottom: 0; +} + .tabbrowser-tab { /* We normally rely on other tab elements for pointer events, but this theme hides those so we need it set here instead */ pointer-events: auto; } -.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: var(--pinned-tab-glow); background-position: center; background-size: 100%; @@ -312,7 +314,7 @@ searchbar:not([oneoffui]) .search-go-button { background-color: var(--tab-hover-background-color); } -.tabbrowser-tab[visuallyselected] { +.tabbrowser-tab[selected] { color: var(--tab-selection-color) !important; /* Override color: inherit */ background-color: var(--tab-selection-background-color); box-shadow: var(--tab-selection-box-shadow); @@ -329,7 +331,7 @@ searchbar:not([oneoffui]) .search-go-button { background-image: none; } -.tab-close-button[visuallyselected]:not(:hover) { +.tab-close-button[selected]:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } @@ -352,19 +354,15 @@ searchbar:not([oneoffui]) .search-go-button { } /* Square back and forward buttons */ -#back-button > .toolbarbutton-icon, -#forward-button > .toolbarbutton-icon { +#back-button:not(:-moz-lwtheme) > .toolbarbutton-icon, +#forward-button:not(:-moz-lwtheme) > .toolbarbutton-icon { margin: 0; - border: 1px solid var(--chrome-nav-bar-controls-border-color); - padding: 2px 5px; + border: none; + padding: 2px 6px; background: var(--chrome-nav-buttons-background); box-shadow: none !important; } -#forward-button > .toolbarbutton-icon { - -moz-border-start: none; -} - /* Override a box shadow for disabled back button */ #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon { box-shadow: none !important; @@ -400,9 +398,3 @@ searchbar:not([oneoffui]) .search-go-button { #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top-width: 0 !important; } - -/* Prevent devedition foreground color from seeping into the sidebar-box (since - * its background colors aren't affected by the devedition theme) */ -#sidebar-box { - color: initial; -} diff --git a/arc-firefox-theme/chrome/browser/devedition/search.svg b/arc-firefox-theme/chrome/browser/devedition/search.svg index 6bacdc0..1d7f558 100644 --- a/arc-firefox-theme/chrome/browser/devedition/search.svg +++ b/arc-firefox-theme/chrome/browser/devedition/search.svg @@ -2,26 +2,40 @@ - - - - - - - - - + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png b/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png deleted file mode 100644 index c14afc7..0000000 Binary files a/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png b/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png deleted file mode 100644 index e6867a4..0000000 Binary files a/arc-firefox-theme/chrome/browser/devedition/urlbar-arrow@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg b/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg index 115fbf1..7af3149 100644 --- a/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg +++ b/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg @@ -1,22 +1,19 @@ - - - + + - - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/add.svg b/arc-firefox-theme/chrome/browser/devtools/add.svg deleted file mode 100644 index b8b93de..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/add.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg b/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg deleted file mode 100644 index ee84427..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css index 40efab7..c632d91 100644 --- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -1,17 +1,3 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* Animation-inspector specific theme variables */ - -.theme-dark { - --even-animation-timeline-background-color: rgba(255,255,255,0.03); -} - -.theme-light { - --even-animation-timeline-background-color: rgba(128,128,128,0.03); -} - html { height: 100%; } @@ -42,17 +28,10 @@ body { } #toggle-all { - border-width: 0 0 0 1px; + border-width: 0px 1px; min-height: 20px; } -/* The main animations container */ - -#players { - height: calc(100% - 20px); - overflow: auto; -} - /* The error message, shown when an invalid/unanimated element is selected */ #error-message { @@ -65,6 +44,12 @@ body { display: none; } +/* The animation players container */ + +#players { + flex: 1; + overflow: auto; +} /* Element picker and toggle-all buttons */ @@ -99,7 +84,7 @@ body { background-image: url("debugger-play.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #element-picker::before { background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); background-size: 64px; @@ -114,184 +99,11 @@ body { } } -/* Animation timeline component */ - -.animation-timeline { - height: 100%; - overflow: hidden; - /* The timeline gets its background-image from a canvas element created in - /browser/devtools/animationinspector/utils.js drawGraphElementBackground - thanks to document.mozSetImageElement("time-graduations", canvas) - This is done so that the background can be built dynamically from script */ - background-image: -moz-element(#time-graduations); - background-repeat: repeat-y; - /* The animations are drawn 150px from the left edge so that animated nodes - can be displayed in a sidebar */ - background-position: 150px 0; - display: flex; - flex-direction: column; -} - -.animation-timeline .time-header { - margin-left: 150px; - height: 20px; - overflow: hidden; - position: relative; - border-bottom: 1px solid var(--theme-splitter-color); -} - -.animation-timeline .time-header .time-tick { - position: absolute; - top: 3px; -} - -.animation-timeline .animations { - width: 100%; - overflow-y: auto; - overflow-x: hidden; - margin: 0; - padding: 0; - list-style-type: none; -} - -/* Animation block widgets */ - -.animation-timeline .animation { - margin: 4px 0; - height: 20px; - position: relative; -} - -.animation-timeline .animation:nth-child(2n) { - background-color: var(--even-animation-timeline-background-color); -} - -.animation-timeline .animation .target { - width: 150px; - overflow: hidden; - height: 100%; -} - -.animation-timeline .animation-target { - background-color: transparent; -} +/* Disabled playerWidget when the animation has ended */ -.animation-timeline .animation .time-block { - position: absolute; - top: 0; - left: 150px; - right: 0; - height: 100%; -} - -/* Animation iterations */ - -.animation-timeline .animation .iterations { - position: relative; - height: 100%; - border: 1px solid var(--theme-highlight-lightorange); - box-sizing: border-box; - background: var(--theme-contrast-background); - /* Iterations are displayed with a repeating linear-gradient which size is - dynamically changed from JS */ - background-image: - linear-gradient(to right, - var(--theme-highlight-lightorange) 0, - var(--theme-highlight-lightorange) 1px, - transparent 1px, - transparent 2px); - background-repeat: repeat-x; - background-position: -1px 0; -} - -.animation-timeline .animation .iterations.infinite { - border-right-width: 0; -} - -.animation-timeline .animation .iterations.infinite::before, -.animation-timeline .animation .iterations.infinite::after { - content: ""; - position: absolute; - top: 0; - right: 0; - width: 0; - height: 0; - border-right: 4px solid var(--theme-body-background); - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; -} - -.animation-timeline .animation .iterations.infinite::after { - bottom: 0; - top: unset; -} - -.animation-timeline .animation .animation-title { - height: 1.5em; - width: 100%; - box-sizing: border-box; - overflow: hidden; -} - -.animation-timeline .animation .delay { - position: absolute; - top: 0; - height: 100%; - background-image: linear-gradient(to bottom, - transparent, - transparent 9px, - var(--theme-highlight-lightorange) 9px, - var(--theme-highlight-lightorange) 11px, - transparent 11px, - transparent); -} - -.animation-timeline .animation .delay::before { - position: absolute; - content: ""; - left: 0; - width: 2px; - height: 8px; - top: 50%; - margin-top: -4px; - background: var(--theme-highlight-lightorange); -} - -.animation-timeline .animation .name { - position: absolute; - z-index: 1; - padding: 2px; - white-space: nowrap; -} - -/* Animation target node gutter, contains a preview of the dom node */ - -.animation-target { - background-color: var(--theme-toolbar-background); - padding: 1px 4px; - box-sizing: border-box; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.animation-target .attribute-name { - padding-left: 4px; -} - -.animation-target .node-selector { - background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; - padding-left: 16px; - margin-right: 5px; - cursor: pointer; -} - -.animation-target .node-selector:hover { - background-position: -32px 0; -} - -.animation-target .node-selector:active { - background-position: -16px 0; +.finished { + pointer-events: none; + opacity: .5; } /* Animation title gutter, contains the name, duration, iteration */ @@ -312,17 +124,6 @@ body { margin: 0 .5em; } -.animation-title .meta-data .compositor-icon { - display: none; - background-image: url("animation-fast-track.svg"); - background-repeat: no-repeat; - padding-left: 12px; - /* Make sure the icon is positioned above the timeline range input so that - its tooltip appears on hover */ - z-index: 1; - position: relative; -} - /* Timeline wiget */ .timeline { @@ -334,6 +135,7 @@ body { } .timeline .playback-controls { + width: 50px; display: flex; flex-direction: row; } @@ -345,6 +147,8 @@ body { border-width: 0 1px 0 0; } +/* Play/pause button */ + .timeline .toggle::before { background-image: url(debugger-pause.png); } @@ -354,15 +158,7 @@ body { background-image: url(debugger-play.png); } -.timeline .ff::before { - background-image: url(fast-forward.png); -} - -.timeline .rw::before { - background-image: url(rewind.png); -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .timeline .toggle::before { background-image: url(debugger-pause@2x.png); } @@ -371,21 +167,6 @@ body { .finished .timeline .toggle::before { background-image: url(debugger-play@2x.png); } - - .timeline .ff::before { - background-image: url(fast-forward@2x.png); - } - - .timeline .rw::before { - background-image: url(rewind@2x.png); - } -} - -.timeline .rate { - -moz-appearance: none; - text-align: center; - color: var(--theme-body-color); - border-right: 1px solid var(--theme-splitter-color); } /* Slider (input type range) container */ @@ -429,4 +210,4 @@ body { width: 50px; border-left: 1px solid var(--theme-splitter-color); background: var(--theme-toolbar-background); -} \ No newline at end of file +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg index 4a8e12a..f1b5594 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg @@ -1,7 +1,12 @@ + - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg index 7876e46..21261cd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg @@ -1,7 +1,13 @@ + - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg index 3fea1e4..b0a414d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg @@ -1,18 +1,80 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg index d21764e..10e8d2b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg @@ -1,7 +1,12 @@ + - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg index 9b98e8f..3d36871 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg @@ -1,7 +1,10 @@ + - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg index a0cca5c..95c42a4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg @@ -1,12 +1,30 @@ + - + + - - - - + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg index d26e2e6..89e7c6f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg @@ -1,7 +1,13 @@ + - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css index a749260..24b191c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css @@ -1,3 +1,7 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -7,6 +11,7 @@ .notice-container { margin-top: -50vh; + font-size: 120%; background-color: var(--theme-toolbar-background); color: var(--theme-body-color-alt); } @@ -22,8 +27,14 @@ display: none; } -#waiting-notice { - font-size: 110%; +.theme-dark #import-notice { + font-size: 250%; + color: rgba(255,255,255,0.2); +} + +.theme-light #import-notice { + font-size: 250%; + color: rgba(0,0,0,0.2); } /* Snapshots pane */ @@ -138,7 +149,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #resume { list-style-image: url(debugger-play@2x.png); -moz-image-region: rect(0px,64px,32px,32px); @@ -243,7 +254,7 @@ background-size: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .selected .call-item-gutter { background-image: url("editor-debug-location@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers.png deleted file mode 100644 index ae7c705..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/command-rulers.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png deleted file mode 100644 index 8378959..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline.css b/arc-firefox-theme/chrome/browser/devtools/commandline.css index 7666eed..06d7512 100644 --- a/arc-firefox-theme/chrome/browser/devtools/commandline.css +++ b/arc-firefox-theme/chrome/browser/devtools/commandline.css @@ -2,36 +2,18 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. - We are copy/pasting variables from light-theme and dark-theme, - since they aren't loaded in this context (within commandlineoutput.xhtml - and commandlinetooltip.xhtml). */ -:root[devtoolstheme="light"] { - --gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */ - --gcli-input-color: #18191a; /* --theme-body-color */ - --gcli-border-color: #aaaaaa; /* --theme-splitter-color */ -} - -:root[devtoolstheme="dark"] { - --gcli-background-color: #343c45; /* --theme-toolbar-background */ - --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; /* --theme-body-color-alt */ - --gcli-border-color: black; /* --theme-splitter-color */ -} - .gcli-body { margin: 0; font: message-box; - color: var(--gcli-input-color); + color: hsl(210,30%,85%); } #gcli-output-root, #gcli-tooltip-root { - border: 1px solid var(--gcli-border-color); + border: 1px solid hsl(206,37%,4%); + box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; + background-image: linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%)); border-radius: 3px; - background-color: var(--gcli-background-color); } #gcli-output-root { @@ -50,9 +32,9 @@ margin-left: 8px; width: 20px; height: 10px; - border-left: 1px solid var(--gcli-border-color); - border-right: 1px solid var(--gcli-border-color); - background-color: var(--gcli-background-color); + border-left: 1px solid hsl(206,37%,4%); + border-right: 1px solid hsl(206,37%,4%); + background-color: hsl(209,23%,18%); } .gcli-tt-description, @@ -65,7 +47,7 @@ line-height: 1.2em; border-top: none; border-bottom: none; - color: var(--gcli-input-color); + color: hsl(210,30%,85%); } .gcli-row-out p, @@ -83,7 +65,7 @@ .gcli-row-out th, .gcli-row-out strong, .gcli-row-out pre { - color: var(--gcli-input-color); + color: hsl(210,30%,95%); } .gcli-row-out pre { @@ -101,13 +83,13 @@ font-weight: normal; font-size: 90%; border-radius: 3px; - background-color: var(--gcli-background-color); - border: 1px solid var(--gcli-border-color); + background-color: hsl(209,23%,18%); + border: 1px solid hsl(206,37%,4%); } .gcli-out-shortcut:before, .gcli-help-synopsis:before { - color: var(--gcli-input-color); + color: hsl(210,30%,85%); -moz-padding-end: 2px; } @@ -135,12 +117,12 @@ .gcli-menu-desc { -moz-padding-end: 8px; - color: var(--gcli-input-color); + color: hsl(210,30%,75%); } .gcli-menu-name:hover, .gcli-menu-desc:hover { - background-color: var(--gcli-input-focused-background); + background-color: hsla(0,0%,0%,.3); } .gcli-menu-highlight, diff --git a/arc-firefox-theme/chrome/browser/devtools/common.css b/arc-firefox-theme/chrome/browser/devtools/common.css index 0a655c7..0686832 100644 --- a/arc-firefox-theme/chrome/browser/devtools/common.css +++ b/arc-firefox-theme/chrome/browser/devtools/common.css @@ -1,19 +1,13 @@ :root { font: message-box; - --monospace-font-family: monospace; } .devtools-monospace { - font-family: var(--monospace-font-family); + font-family: monospace; font-size: 80%; } -/* Bottom-docked toolbox minimize transition */ -.devtools-toolbox-bottom-iframe { - transition: margin-bottom .1s; -} - /* Splitters */ .devtools-horizontal-splitter { -moz-appearance: none; @@ -40,11 +34,6 @@ cursor: e-resize; } -.devtools-horizontal-splitter.disabled, -.devtools-side-splitter.disabled { - pointer-events: none; -} - .devtools-toolbox-side-iframe { min-width: 465px; } @@ -241,34 +230,3 @@ background-color: transparent; border: none; } - -/* links to source code, like displaying `myfile.js:45` */ - -.devtools-source-link { - font-family: var(--monospace-font-family); - color: var(--theme-highlight-blue); - cursor: pointer; - white-space: nowrap; - display: flex; - text-decoration: none; - font-size: 11px; - width: 12em; /* probably should be changed for each tool */ -} - -.devtools-source-link:hover { - text-decoration: underline; -} - -.devtools-source-link > .filename { - text-overflow: ellipsis; - text-align: end; - overflow: hidden; - margin: 2px 0px; - cursor: pointer; -} - -.devtools-source-link > .line-number { - flex: none; - margin: 2px 0px; - cursor: pointer; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css index f770681..463fc91 100644 --- a/arc-firefox-theme/chrome/browser/devtools/computedview.css +++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css @@ -61,7 +61,7 @@ body { background-size: 5px 8px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .property-value, .other-property-value { background-image: url(arrow-e@2x.png); } @@ -124,6 +124,11 @@ body { border-bottom-width: 1px; } +/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ +.rule-text { + direction: ltr; +} + .matched { text-decoration: line-through; } @@ -148,7 +153,7 @@ body { #root .devtools-toolbar { width: 100%; - display: flex; + border-bottom-width: 0; } .link { @@ -178,9 +183,9 @@ body { .computedview-colorswatch { border-radius: 50%; - width: 0.9em; - height: 0.9em; - vertical-align: middle; + width: 1em; + height: 1em; + vertical-align: text-top; -moz-margin-end: 5px; display: inline-block; position: relative; diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css index 53a868f..1f90b49 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -3,9 +3,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* Colors are taken from: - * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. - * Changes should be kept in sync with commandline.css and commandline.inc.css. +/* According to: + * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 */ :root { --theme-body-background: #14171a; @@ -15,33 +14,25 @@ --theme-tab-toolbar-background: #252c33; --theme-toolbar-background: #343c45; --theme-selection-background: #1d4f73; - --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); --theme-selection-color: #f5f7fa; + --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); --theme-splitter-color: black; - --theme-comment: #757873; + --theme-comment: #5c6773; - --theme-body-color: #8fa1b2; + --theme-body-color: #a9bacb; --theme-body-color-alt: #b6babf; --theme-content-color1: #a9bacb; --theme-content-color2: #8fa1b2; - --theme-content-color3: #5f7387; + --theme-content-color3: #667380; - --theme-highlight-green: #70bf53; - --theme-highlight-blue: #46afe3; + --theme-highlight-green: #5c9966; + --theme-highlight-blue: #3689b2; --theme-highlight-bluegrey: #5e88b0; - --theme-highlight-purple: #6b7abb; - --theme-highlight-lightorange: #d99b28; - --theme-highlight-orange: #d96629; - --theme-highlight-red: #eb5368; - --theme-highlight-pink: #df80ff; - - /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ - --theme-graphs-green: #70bf53; - --theme-graphs-blue: #46afe3; - --theme-graphs-purple: #df80ff; - --theme-graphs-yellow: #d99b28; - --theme-graphs-red: #eb5368; - --theme-graphs-grey: #757873; + --theme-highlight-purple: #6270b2; + --theme-highlight-lightorange: #a18650; + --theme-highlight-orange: #b26b47; + --theme-highlight-red: #bf5656; + --theme-highlight-pink: #a673bf; } .theme-body { @@ -138,7 +129,7 @@ .cm-s-mozilla .cm-unused-line { text-decoration: line-through; - text-decoration-color: #0072ab; + text-decoration-color: #5f88b0; } .cm-s-mozilla .cm-executed-line { @@ -212,8 +203,9 @@ color: black; } -.ruleview-swatch, -.computedview-colorswatch { +.ruleview-colorswatch, +.computedview-colorswatch, +.ruleview-bezierswatch { box-shadow: 0 0 0 1px #818181; } @@ -334,7 +326,7 @@ div.CodeMirror span.eval-text { background-position: -42px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -372,7 +364,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-tooltip-panel .panel-arrow[side="top"], .theme-tooltip-panel .panel-arrow[side="bottom"] { list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png"); @@ -412,24 +404,10 @@ div.CodeMirror span.eval-text { -/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ -.theme-light { - --searchbox-background-color: #ffee99; - --searchbox-border-color: #ffbf00; - --searcbox-no-match-background-color: #ffe5e5; - --searcbox-no-match-border-color: #e52e2e; -} - -.theme-dark { - --searchbox-background-color: #4d4222; - --searchbox-border-color: #d99f2b; - --searcbox-no-match-background-color: #402325; - --searcbox-no-match-border-color: #cc3d3d; -} - /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -447,12 +425,10 @@ div.CodeMirror span.eval-text { .devtools-toolbar checkbox { margin: 0 2px; padding: 0; - line-height: -moz-block-height; } .devtools-toolbar checkbox .checkbox-check { margin: 0; padding: 0; - vertical-align: bottom; } .devtools-toolbar checkbox .checkbox-label-box { border: none !important; /* overrides .checkbox-label-box from checkbox.css */ @@ -669,7 +645,6 @@ div.CodeMirror span.eval-text { .devtools-button { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); - color: var(--theme-body-color); margin: 0; padding: 0; min-width: 32px; @@ -720,12 +695,7 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } -.devtools-button[disabled]::before, -.devtools-button:disabled::before { - opacity: 0.5; -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-button::before { background-size: 32px; } @@ -748,7 +718,7 @@ div.CodeMirror span.eval-text { margin-bottom: 1px; padding: 0; -moz-padding-start: 22px; - -moz-padding-end: 4px; + -moz-padding-end: 12px; background-position: 8px center; background-size: 11px 11px; background-repeat: no-repeat; @@ -763,95 +733,28 @@ div.CodeMirror span.eval-text { background-image: url(magnifying-glass-light.png); } -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 8px) center; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { - visibility: hidden; -} - -/* Searchbox is a div container element for a search input element */ -.devtools-searchbox { - display: flex; - flex: 1; - position: relative; -} +@media (min-resolution: 2dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } -.devtools-rule-searchbox { - -moz-box-flex: 1; - padding-right: 23px; - width: 100%; - font: inherit; + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } } -.devtools-rule-searchbox[filled] { - background-color: var(--searchbox-background-color); - border-color: var(--searchbox-border-color); +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; } -.devtools-style-searchbox-no-match { - background-color: var(--searcbox-no-match-background-color) !important; - border-color: var(--searcbox-no-match-border-color) !important; +.devtools-searchinput > .textbox-input-box > .textbox-search-icons { + display: none; } .devtools-no-search-result { border-color: var(--theme-highlight-red) !important; } -.devtools-searchinput-clear { - position: absolute; - top: 3.5px; - right: 7px; - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position: 0 0; - background-repeat: no-repeat; - background-color: transparent; -} - -.theme-dark .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); -} - -.theme-light .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); -} - -.devtools-style-searchbox-no-match + .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important; -} - -.devtools-searchinput-clear:hover { - background-position: -16px 0; -} - -.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark .devtools-searchinput { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light@2x.png); - } -} - /* Close button */ .devtools-closebutton { @@ -913,17 +816,13 @@ div.CodeMirror span.eval-text { } .devtools-sidebar-alltabs { - -moz-appearance: none; - height: 24px; - line-height: 24px; - padding: 0 4px; margin: 0; border-width: 0 0 1px 0; -moz-border-start-width: 1px; border-style: solid; } -.devtools-sidebar-alltabs .toolbarbutton-icon { +.devtools-sidebar-alltabs dropmarker { display: none; } @@ -953,57 +852,73 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; -} - -.devtools-sidebar-tabs tabs > tab[selected], -.devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; -} - .devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + .theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected], .theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected], .theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); } /* Toolbox - moved from toolbox.css. @@ -1046,20 +961,6 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/undock@2x.png"); } -#toolbox-dock-bottom-minimize { - /* Bug 1177463 - The minimize button is currently hidden until we agree on - the UI for it, and until bug 1173849 is fixed too. */ - display: none; -} - -#toolbox-dock-bottom-minimize > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); -} - -#toolbox-dock-bottom-minimize.minimized > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); -} - #toolbox-dock-window, #toolbox-dock-bottom, #toolbox-dock-side { @@ -1168,11 +1069,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); } -#command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers.png"); -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } @@ -1208,10 +1105,6 @@ div.CodeMirror span.eval-text { #command-button-eyedropper > image { background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); } - - #command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); - } } /* Tabs */ @@ -1281,12 +1174,9 @@ div.CodeMirror span.eval-text { background-color: rgba(170,170,170,.4); } -.devtools-tab:not([selected])[highlighted] { - box-shadow: 0 2px 0 var(--theme-highlight-green) inset; -} - .theme-dark .devtools-tab:not([selected])[highlighted] { background-color: hsla(99,100%,14%,.2); + box-shadow: 0 2px 0 #7bc107 inset; } .theme-light .devtools-tab:not([selected])[highlighted] { diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css index 97eb3b0..39df7a9 100644 --- a/arc-firefox-theme/chrome/browser/devtools/debugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css @@ -1,3 +1,7 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* vim:set ts=2 sw=2 sts=2 et: */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -45,16 +49,6 @@ margin: 2px; } -.dbg-breakpoint-condition-thrown-message { - display: none; - color: var(--theme-highlight-red); -} - -.dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message { - display: block; - -moz-padding-start: 0; -} - /* Sources toolbar */ #sources-toolbar > .devtools-toolbarbutton, @@ -66,7 +60,7 @@ list-style-image: url(debugger-blackbox.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #black-box { list-style-image: url(debugger-blackbox@2x.png); } @@ -76,7 +70,7 @@ list-style-image: url(debugger-prettyprint.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #pretty-print { list-style-image: url(debugger-prettyprint@2x.png); } @@ -86,16 +80,12 @@ list-style-image: url(debugger-toggleBreakpoints.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #toggle-breakpoints { list-style-image: url(debugger-toggleBreakpoints@2x.png); } } -#toggle-promise-debugger { - /* TODO Bug 1186119: Add a toggle promise debugger image */ -} - #sources-toolbar .devtools-toolbarbutton:not([label]) { -moz-image-region: rect(0px,16px,16px,0px); } @@ -104,7 +94,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #sources-toolbar .devtools-toolbarbutton:not([label]) { -moz-image-region: rect(0px,32px,32px,0px); } @@ -138,7 +128,7 @@ -moz-margin-end: 5px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #black-boxed-message-button > .button-box > .button-icon { background-image: url(debugger-blackbox@2x.png); } @@ -226,7 +216,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #trace { list-style-image: url(tracer-icon@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -328,7 +318,7 @@ margin: 2px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .dbg-expression-arrow { background-image: url(commandline-icon@2x.png); } @@ -564,7 +554,7 @@ list-style-image: url(debugger-play.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #resume { list-style-image: url(debugger-pause@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -576,12 +566,12 @@ } } -#debugger-controls toolbarbutton { +#resume ~ toolbarbutton { transition: opacity 0.15s ease-in-out; } -#debugger-controls toolbarbutton[disabled] { - opacity: .5; +#resume:not([checked]) ~ toolbarbutton { + opacity: 0.5; } #step-over { @@ -596,7 +586,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #step-over { list-style-image: url(debugger-step-over@2x.png); } @@ -626,7 +616,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #instruments-pane-toggle { list-style-image: url(debugger-collapse@2x.png); -moz-image-region: rect(0px,32px,32px,0px); diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png deleted file mode 100644 index feb4d78..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png deleted file mode 100644 index a82983c..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg index 7592790..09b65c7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg +++ b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg @@ -1,6 +1,3 @@ - - - - + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward.png deleted file mode 100644 index f2c6c52..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/fast-forward.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png deleted file mode 100644 index 4c3cf88..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg index ae6f221..e8ff440 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg @@ -1,7 +1,4 @@ - - + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg index c7fafc2..fd8209d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg @@ -1,7 +1,4 @@ - - + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg index a5580b4..809e098 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg index c85c560..95be627 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg @@ -1,8 +1,7 @@ - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg deleted file mode 100644 index 1f63b4f..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg index 700fdbf..916028b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filters.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg @@ -1,16 +1,18 @@ - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css index 934a38e..ff70d64 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css @@ -9,10 +9,8 @@ scrollbar { padding: 2px; } -/* Scrollbar code will reset the margin to the correct side depending on - where layout actually puts the scrollbar */ scrollbar[orient="vertical"] { - margin-left: -10px; + -moz-margin-start: -10px; min-width: 10px; max-width: 10px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css index 2c4a365..30424df 100644 --- a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css @@ -3,9 +3,6 @@ } body { - display: flex; - flex-direction: column; - height: 100%; margin: 0; padding-bottom: 20px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/inspector.css b/arc-firefox-theme/chrome/browser/devtools/inspector.css index cab78e7..2d80e76 100644 --- a/arc-firefox-theme/chrome/browser/devtools/inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/inspector.css @@ -26,44 +26,6 @@ max-width: 200px !important; } -/* Expand/collapse panel toolbar button */ - -#inspector-pane-toggle { - background: none; - box-shadow: none; - border: none; - list-style-image: url(debugger-collapse.png); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#inspector-pane-toggle > .toolbarbutton-icon { - width: 16px; - height: 16px; -} - -#inspector-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand.png); -} - -#inspector-pane-toggle:active { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 1.25dppx) { - #inspector-pane-toggle { - list-style-image: url(debugger-collapse@2x.png); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #inspector-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand@2x.png); - } - - #inspector-pane-toggle:active { - -moz-image-region: rect(0px,64px,32px,32px); - } -} - /* Tooltip: Events */ #devtools-tooltip-events-container { diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg index c2accab..7bd7028 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg @@ -1,7 +1,4 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg index 18d3702..9315d9e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg @@ -1,7 +1,4 @@ - - - - - + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg index bca667a..93913c9 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg @@ -1,7 +1,4 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg index e83fa63..e580b88 100755 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg @@ -1,7 +1,4 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css index 642e89c..3e0ca8b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/layoutview.css +++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css @@ -1,67 +1,16 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ .theme-sidebar { box-sizing: border-box; } -body { - /* The view will grow bigger as the window gets resized, until 400px */ - max-width: 400px; - margin: 0px auto; - padding: 0; - /* "Contain" the absolutely positioned #main element */ - position: relative; -} - -/* Header: contains the position and size of the element */ - -#header { - box-sizing: border-box; - width: 100%; - padding: 4px 14px; - display: -moz-box; - vertical-align: top; -} - -#header:-moz-dir(rtl) { - -moz-box-direction: reverse; -} - -#header > span { - display: -moz-box; -} - -#element-size { - -moz-box-flex: 1; -} - -#element-size:-moz-dir(rtl) { - -moz-box-pack: end; -} - -@media (max-height: 228px) { - #header { - padding-top: 0; - padding-bottom: 0; - margin-top: 10px; - margin-bottom: 8px; - } -} - -/* Main: contains the box-model regions */ - #main { - position: absolute; - box-sizing: border-box; - /* The regions are semi-transparent, so the white background is partly - visible */ background-color: white; + border-color: hsla(210,100%,85%,0.7); + border-style: dotted; color: var(--theme-selection-color); - /* Make sure there is some space between the window's edges and the regions */ - margin: 0 14px 10px 14px; - width: calc(100% - 2 * 14px); } .margin, @@ -69,271 +18,43 @@ body { color: var(--theme-highlight-blue); } -/* Regions are 3 nested elements with wide borders and outlines */ - #content { - height: 25px; + background-color: #87ceeb; + border-color: hsl(210,100%,85%); + border-style: dotted; } -#margins, -#borders, -#padding { +#padding, +#margins { border-color: hsla(210,100%,85%,0.2); - border-width: 25px; - border-style: solid; outline: dotted 1px hsl(210,100%,85%); } -#margins { - /* This opacity applies to all of the regions, since they are nested */ - opacity: .8; -} - -/* Respond to window size change by changing the size of the regions */ - -@media (max-height: 228px) { - #content { - height: 18px; - } - - #margins, - #borders, - #padding { - border-width: 18px; - } -} - -/* Regions colors */ - -#margins { - border-color: #edff64; -} - -#borders { - border-color: #444444; -} - #padding { - border-color: #6a5acd; -} - -#content { - background-color: #87ceeb; -} - -/* Editable region sizes are contained in absolutely positioned

*/ - -#main > p { - position: absolute; - pointer-events: none; -} - -#main > p { - margin: 0; - text-align: center; -} - -#main > p > span { - vertical-align: middle; - pointer-events: auto; -} - -/* Coordinates for the region sizes */ - -.top, -.bottom { - width: calc(100% - 2px); - text-align: center; -} - -.padding.top { - top: 55px; -} - -.padding.bottom { - bottom: 57px; -} - -.border.top { - top: 30px; + background-color: #6a5acd; } -.border.bottom { - bottom: 31px; -} - -.margin.top { - top: 5px; -} - -.margin.bottom { - bottom: 6px; -} - -.size, -.margin.left, -.margin.right, -.border.left, -.border.right, -.padding.left, -.padding.right { - top: 22px; - line-height: 132px; -} - -.size { - width: calc(100% - 2px); -} - -.margin.right, -.margin.left, -.border.left, -.border.right, -.padding.right, -.padding.left { - width: 25px; -} - -.padding.left { - left: 52px; -} - -.padding.right { - right: 51px; -} - -.border.left { - left: 26px; -} - -.border.right { - right: 26px; -} - -.margin.right { - right: 0; -} - -.margin.left { - left: 0; -} - -.rotate.left:not(.editing) { - transform: rotate(-90deg); -} - -.rotate.right:not(.editing) { - transform: rotate(90deg); -} - -/* Coordinates should be different when the window is small, because we make - the regions smaller then */ - -@media (max-height: 228px) { - .padding.top { - top: 37px; - } - - .padding.bottom { - bottom: 38px; - } - - .border.top { - top: 19px; - } - - .border.bottom { - bottom: 20px; - } - - .margin.top { - top: 1px; - } - - .margin.bottom { - bottom: 2px; - } - - .size, - .margin.left, - .margin.right, - .border.left, - .border.right, - .padding.left, - .padding.right { - line-height: 80px; - } - - .margin.right, - .margin.left, - .border.left, - .border.right, - .padding.right, - .padding.left { - width: 21px; - } - - .padding.left { - left: 35px; - } - - .padding.right { - right: 35px; - } - - .border.left { - left: 16px; - } - - .border.right { - right: 17px; - } -} - -/* Legend, displayed inside regions */ - -.legend { - position: absolute; - margin: 5px 6px; - z-index: 1; -} - -.legend[data-box="margin"] { - color: var(--theme-highlight-blue); +#borders { + background-color: #444444; + border-style: dotted; + border-color: hsl(210,100%,85%); } -@media (max-height: 228px) { - .legend { - margin: 2px 6px; - } +#margins { + background-color: #edff64; + /* This opacity applies to all of the regions, since they are nested. */ + opacity: .8; } -/* Editable fields */ - .editable { - border: 1px dashed transparent; - -moz-user-select: text; + border-bottom: 1px dashed transparent; } .editable:hover { - border-bottom-color: hsl(0, 0%, 50%); + border-bottom-color: hsl(0,0%,50%); } .styleinspector-propertyeditor { - border: 1px solid #ccc; + border: 1px solid #CCC; padding: 0; } - -/* Make sure the content size doesn't appear as editable like the other sizes */ - -.size > span { - cursor: default; -} - -/* Hide all values when the view is inactive */ - -body.inactive > #header > #element-position, -body.inactive > #header > #element-size, -body.inactive > #main > p { - visibility: hidden; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css index 92515ff..b13e682 100644 --- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -3,9 +3,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* Colors are taken from: - * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. - * Changes should be kept in sync with commandline.css and commandline.inc.css. +/* According to: + * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 */ :root { --theme-body-background: #fcfcfc; @@ -15,10 +14,10 @@ --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: #f0f1f2; --theme-selection-background: #4c9ed9; - --theme-selection-background-semitransparent: rgba(76, 158, 217, .23); --theme-selection-color: #f5f7fa; + --theme-selection-background-semitransparent: rgba(76, 158, 217, .23); --theme-splitter-color: #aaaaaa; - --theme-comment: #757873; + --theme-comment: hsl(90,2%,46%); --theme-body-color: #18191a; --theme-body-color-alt: #585959; @@ -26,22 +25,14 @@ --theme-content-color2: #8fa1b2; --theme-content-color3: #667380; - --theme-highlight-green: #2cbb0f; - --theme-highlight-blue: #0088cc; - --theme-highlight-bluegrey: #0072ab; + --theme-highlight-green: hsl(72,100%,27%); + --theme-highlight-blue: hsl(208,56%,40%); + --theme-highlight-bluegrey: hsl(208,81%,21%); --theme-highlight-purple: #5b5fff; - --theme-highlight-lightorange: #d97e00; - --theme-highlight-orange: #f13c00; - --theme-highlight-red: #ed2655; + --theme-highlight-lightorange: #a18650; + --theme-highlight-orange: hsl(24,85%,39%); + --theme-highlight-red: #bf5656; --theme-highlight-pink: #b82ee5; - - /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */ - --theme-graphs-green: #85d175; - --theme-graphs-blue: #83b7f6; - --theme-graphs-purple: #b693eb; - --theme-graphs-yellow: #efc052; - --theme-graphs-red: #e57180; - --theme-graphs-grey: #cccccc; } .theme-body { @@ -211,8 +202,9 @@ border-color: var(--theme-splitter-color); } -.ruleview-swatch, -.computedview-colorswatch { +.ruleview-colorswatch, +.computedview-colorswatch, +.ruleview-bezierswatch { box-shadow: 0 0 0 1px #c4c4c4; } @@ -343,7 +335,7 @@ div.CodeMirror span.eval-text { background-position: -14px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -381,7 +373,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-tooltip-panel .panel-arrow[side="top"], .theme-tooltip-panel .panel-arrow[side="bottom"] { list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png"); @@ -410,24 +402,10 @@ div.CodeMirror span.eval-text { -/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ -.theme-light { - --searchbox-background-color: #ffee99; - --searchbox-border-color: #ffbf00; - --searcbox-no-match-background-color: #ffe5e5; - --searcbox-no-match-border-color: #e52e2e; -} - -.theme-dark { - --searchbox-background-color: #4d4222; - --searchbox-border-color: #d99f2b; - --searcbox-no-match-background-color: #402325; - --searcbox-no-match-border-color: #cc3d3d; -} - /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -445,12 +423,10 @@ div.CodeMirror span.eval-text { .devtools-toolbar checkbox { margin: 0 2px; padding: 0; - line-height: -moz-block-height; } .devtools-toolbar checkbox .checkbox-check { margin: 0; padding: 0; - vertical-align: bottom; } .devtools-toolbar checkbox .checkbox-label-box { border: none !important; /* overrides .checkbox-label-box from checkbox.css */ @@ -667,7 +643,6 @@ div.CodeMirror span.eval-text { .devtools-button { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); - color: var(--theme-body-color); margin: 0; padding: 0; min-width: 32px; @@ -718,12 +693,7 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } -.devtools-button[disabled]::before, -.devtools-button:disabled::before { - opacity: 0.5; -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-button::before { background-size: 32px; } @@ -746,7 +716,7 @@ div.CodeMirror span.eval-text { margin-bottom: 1px; padding: 0; -moz-padding-start: 22px; - -moz-padding-end: 4px; + -moz-padding-end: 12px; background-position: 8px center; background-size: 11px 11px; background-repeat: no-repeat; @@ -761,95 +731,28 @@ div.CodeMirror span.eval-text { background-image: url(magnifying-glass-light.png); } -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 8px) center; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { - visibility: hidden; -} - -/* Searchbox is a div container element for a search input element */ -.devtools-searchbox { - display: flex; - flex: 1; - position: relative; -} +@media (min-resolution: 2dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } -.devtools-rule-searchbox { - -moz-box-flex: 1; - padding-right: 23px; - width: 100%; - font: inherit; + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } } -.devtools-rule-searchbox[filled] { - background-color: var(--searchbox-background-color); - border-color: var(--searchbox-border-color); +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; } -.devtools-style-searchbox-no-match { - background-color: var(--searcbox-no-match-background-color) !important; - border-color: var(--searcbox-no-match-border-color) !important; +.devtools-searchinput > .textbox-input-box > .textbox-search-icons { + display: none; } .devtools-no-search-result { border-color: var(--theme-highlight-red) !important; } -.devtools-searchinput-clear { - position: absolute; - top: 3.5px; - right: 7px; - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position: 0 0; - background-repeat: no-repeat; - background-color: transparent; -} - -.theme-dark .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); -} - -.theme-light .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); -} - -.devtools-style-searchbox-no-match + .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important; -} - -.devtools-searchinput-clear:hover { - background-position: -16px 0; -} - -.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark .devtools-searchinput { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light@2x.png); - } -} - /* Close button */ .devtools-closebutton { @@ -911,17 +814,13 @@ div.CodeMirror span.eval-text { } .devtools-sidebar-alltabs { - -moz-appearance: none; - height: 24px; - line-height: 24px; - padding: 0 4px; margin: 0; border-width: 0 0 1px 0; -moz-border-start-width: 1px; border-style: solid; } -.devtools-sidebar-alltabs .toolbarbutton-icon { +.devtools-sidebar-alltabs dropmarker { display: none; } @@ -951,57 +850,73 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; -} - -.devtools-sidebar-tabs tabs > tab[selected], -.devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; -} - .devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + .theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected], .theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected], .theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); } /* Toolbox - moved from toolbox.css. @@ -1044,20 +959,6 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/undock@2x.png"); } -#toolbox-dock-bottom-minimize { - /* Bug 1177463 - The minimize button is currently hidden until we agree on - the UI for it, and until bug 1173849 is fixed too. */ - display: none; -} - -#toolbox-dock-bottom-minimize > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); -} - -#toolbox-dock-bottom-minimize.minimized > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); -} - #toolbox-dock-window, #toolbox-dock-bottom, #toolbox-dock-side { @@ -1166,11 +1067,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); } -#command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers.png"); -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } @@ -1206,10 +1103,6 @@ div.CodeMirror span.eval-text { #command-button-eyedropper > image { background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); } - - #command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); - } } /* Tabs */ @@ -1279,12 +1172,9 @@ div.CodeMirror span.eval-text { background-color: rgba(170,170,170,.4); } -.devtools-tab:not([selected])[highlighted] { - box-shadow: 0 2px 0 var(--theme-highlight-green) inset; -} - .theme-dark .devtools-tab:not([selected])[highlighted] { background-color: hsla(99,100%,14%,.2); + box-shadow: 0 2px 0 #7bc107 inset; } .theme-light .devtools-tab:not([selected])[highlighted] { diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css index 9448a39..1724759 100644 --- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -7,15 +7,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:root.theme-dark { - --table-splitter-color: rgba(255,255,255,0.15); - --table-zebra-background: rgba(255,255,255,0.05); -} -:root.theme-light { - --table-splitter-color: rgba(0,0,0,0.15); - --table-zebra-background: rgba(0,0,0,0.05); -} - #requests-menu-empty-notice { margin: 0; padding: 12px; @@ -42,6 +33,7 @@ margin: 0; } + /* Network requests table */ #requests-menu-toolbar { @@ -57,9 +49,26 @@ padding: 3px; } -.requests-menu-header:not(:last-child), -.requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid var(--table-splitter-color); +.theme-dark .requests-menu-header:not(:last-child), +.theme-dark .requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid rgba(0,0,0,0.2); + box-shadow: 1px 0 0 rgba(128,128,128,0.15); +} + +.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), +.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 rgba(128,128,128,0.15); +} + +.theme-light .requests-menu-header:not(:last-child), +.theme-light .requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid rgba(128,128,128,0.25); + box-shadow: 1px 0 0 transparent; +} + +.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), +.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 transparent; } .requests-menu-header-button { @@ -129,8 +138,12 @@ -moz-margin-end: 4px; } -.requests-menu-icon { - outline: 1px solid var(--table-splitter-color); +.theme-dark .requests-menu-icon { + outline: 1px solid rgba(0,0,0,0.2); +} + +.theme-light .requests-menu-icon { + outline: 1px solid rgba(128,128,128,0.25); } .requests-menu-file { @@ -143,28 +156,35 @@ } .requests-security-state-icon { - width: 16px; - height: 16px; -moz-margin-end: 4px; + -moz-image-region:rect(0px, 16px, 16px, 0px); +} + +.requests-security-state-icon:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +.requests-security-state-icon:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); } .security-state-insecure { - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } .security-state-secure { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-secure.svg); + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .security-state-weak { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } .security-state-broken { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } .requests-menu-type { @@ -199,42 +219,70 @@ label.requests-menu-status-code { -moz-margin-end: -3em !important; } -box.requests-menu-status:not([code]) { - background-color: var(--theme-content-color2); +.theme-dark box.requests-menu-status:not([code]) { + background-color: rgba(95, 115, 135, 1); /* dark grey */ +} + +.theme-light box.requests-menu-status:not([code]) { + background-color: rgba(143, 161, 178, 1); /* grey */ } -box.requests-menu-status[code="cached"] { - border: 2px solid var(--theme-content-color2); - background-color: transparent; +.theme-dark box.requests-menu-status[code^="1"] { + background-color: rgba(70, 175, 227, 1); /* light blue */ } -box.requests-menu-status[code^="1"] { - background-color: var(---theme-highlight-blue); +.theme-light box.requests-menu-status[code^="1"] { + background-color: rgba(0, 136, 204, 1); /* light blue */ } -box.requests-menu-status[code^="2"] { - background-color: var(--theme-highlight-green); +.theme-dark box.requests-menu-status[code^="2"] { + background-color: rgba(112, 191, 83, 1); /* green */ +} + +.theme-light box.requests-menu-status[code^="2"] { + background-color: rgba(44, 187, 15, 1); /* green */ } /* 3xx are triangles */ -box.requests-menu-status[code^="3"] { +.theme-dark box.requests-menu-status[code^="3"] { + background-color: transparent; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */ + border-radius: 0; +} + +.theme-light box.requests-menu-status[code^="3"] { background-color: transparent; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 10px solid var(--theme-highlight-lightorange); + border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ border-radius: 0; } /* 4xx and 5xx are squares - error codes */ -box.requests-menu-status[code^="4"] { - background-color: var(--theme-highlight-red); +.theme-dark box.requests-menu-status[code^="4"] { + background-color: rgba(235, 83, 104, 1); /* red */ + border-radius: 0; /* squares */ +} + +.theme-light box.requests-menu-status[code^="4"] { + background-color: rgba(237, 38, 85, 1); /* red */ border-radius: 0; /* squares */ } -box.requests-menu-status[code^="5"] { - background-color: var(--theme-highlight-pink); +.theme-dark box.requests-menu-status[code^="5"] { + background-color: rgba(223, 128, 255, 1); /* pink? */ + border-radius: 0; + transform: rotate(45deg); +} + +.theme-light box.requests-menu-status[code^="5"] { + background-color: rgba(184, 46, 229, 1); /* pink! */ border-radius: 0; transform: rotate(45deg); } @@ -375,26 +423,17 @@ box.requests-menu-status[code^="5"] { } /* SideMenuWidget */ -#network-table .side-menu-widget-empty-text, -#network-table .side-menu-widget-container { - background-color: var(--theme-body-background); -} - -#network-table .side-menu-widget-item { - border-top-color: transparent; - border-bottom-color: transparent; -} .side-menu-widget-item-contents { padding: 0px; } -.side-menu-widget-item:not(.selected)[odd] { - background-color: var(--table-zebra-background); +.theme-dark .side-menu-widget-item:not(.selected)[odd] { + background: rgba(255,255,255,0.05); } -.side-menu-widget-item:not(.selected):hover { - background-color: var(--theme-selection-background-semitransparent); +.theme-light .side-menu-widget-item:not(.selected)[odd] { + background: rgba(128,128,128,0.05); } /* Network request details */ @@ -420,7 +459,7 @@ box.requests-menu-status[code^="5"] { -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #details-pane-toggle { list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); -moz-image-region: rect(0px,32px,32px,0px); @@ -437,16 +476,9 @@ box.requests-menu-status[code^="5"] { /* Network request details tabpanels */ -.tabpanel-content { - background-color: var(--theme-sidebar-background); -} - .theme-dark .tabpanel-content { - color: var(--theme-selection-color); -} - -#headers-tabpanel { background-color: var(--theme-toolbar-background); + color: var(--theme-selection-color); } /* Summary tabpanel */ @@ -466,10 +498,6 @@ box.requests-menu-status[code^="5"] { -moz-padding-start: 3px; } -.theme-dark .tabpanel-summary-value { - color: var(--theme-selection-color); -} - /* Headers tabpanel */ #headers-summary-status, @@ -560,7 +588,7 @@ box.requests-menu-status[code^="5"] { height: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .security-warning-icon { background-image: url(alerticon-warning@2x.png); } @@ -586,9 +614,16 @@ box.requests-menu-status[code^="5"] { /* Footer */ -#requests-menu-footer { +.theme-dark #requests-menu-footer { + border-top: 1px solid rgba(0,0,0,0.2); + box-shadow: 0 1px 0 rgba(128,128,128,0.15) inset; + background-color: var(--theme-toolbar-background); +} + +.theme-light #requests-menu-footer { + border-top: 1px solid rgba(128,128,128,0.25); + box-shadow: 0 1px 0 transparent inset; background-color: var(--theme-toolbar-background); - border-top: 1px solid var(--table-splitter-color); } .requests-menu-footer-button, @@ -615,12 +650,14 @@ box.requests-menu-status[code^="5"] { .theme-dark .requests-menu-footer-spacer:not(:first-child), .theme-dark .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid var(--table-splitter-color); + -moz-border-start: 1px solid rgba(128,128,128,0.15); + box-shadow: -1px 0 0 rgba(0,0,0,0.2); } .theme-light .requests-menu-footer-spacer:not(:first-child), .theme-light .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid var(--table-splitter-color); + -moz-border-start: 1px solid transparent; + box-shadow: -1px 0 0 rgba(128,128,128,0.25); } .requests-menu-footer-button { @@ -632,40 +669,27 @@ box.requests-menu-status[code^="5"] { background: rgba(0,0,0,0.10); } -.requests-menu-footer-button:hover:active { - background-color: var(--theme-selection-background-semitransparent); -} - -.requests-menu-footer-button:not(:active)[checked] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.requests-menu-footer-label { - padding-top: 3px; - font-weight: 600; +.theme-dark .requests-menu-footer-button:hover:active { + background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ } -#requests-menu-filter-freetext-text { - transition-property: max-width, -moz-padding-end, -moz-padding-start; - transition-duration: 250ms; - transition-timing-function: ease; +.theme-light .requests-menu-footer-button:hover:active { + background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ } -#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box { - overflow: hidden; +.theme-dark .requests-menu-footer-button:not(:active)[checked] { + background-color: rgba(29,79,115,1); /* Select Highlight Blue */ + color: rgba(245,247,250,1); /* Light foreground text */ } -#requests-menu-filter-freetext-text:not([focused]):not([filled]) { - max-width: 20px !important; - -moz-padding-end: 5px; - -moz-padding-start: 22px; - background-position: 8px center, top left, top left; +.theme-light .requests-menu-footer-button:not(:active)[checked] { + background-color: rgba(76,158,217,1); /* Select Highlight Blue */ + color: rgba(245,247,250,1); /* Light foreground text */ } -#requests-menu-filter-freetext-text[focused], -#requests-menu-filter-freetext-text[filled] { - max-width: 200px !important; +.requests-menu-footer-label { + padding-top: 3px; + font-weight: 600; } /* Performance analysis buttons */ @@ -718,7 +742,7 @@ box.requests-menu-status[code^="5"] { } #network-statistics-charts { - background-color: var(--theme-sidebar-background); + background-color: var(--theme-toolbar-background); } #network-statistics-charts .pie-chart-container { diff --git a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg index a115938..8bea997 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg +++ b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg @@ -1,45 +1,42 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 8eafa36..198e56a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -1,3 +1,7 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* vim:set ts=2 sw=2 sts=2 et: */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, @@ -6,7 +10,6 @@ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-dark { --cell-border-color: rgba(255,255,255,0.15); - --cell-border-color-light: rgba(255,255,255,0.1); --focus-cell-border-color: rgba(255,255,255,0.5); --row-alt-background-color: rgba(29,79,115,0.15); --row-hover-background-color: rgba(29,79,115,0.25); @@ -14,7 +17,6 @@ .theme-light { --cell-border-color: rgba(0,0,0,0.15); - --cell-border-color-light: rgba(0,0,0,0.1); --focus-cell-border-color: rgba(0,0,0,0.3); --row-alt-background-color: rgba(76,158,217,0.1); --row-hover-background-color: rgba(76,158,217,0.2); @@ -22,8 +24,13 @@ /* Toolbar */ -#performance-toolbar-control-other { - -moz-padding-end: 5px; +#performance-toolbar > tabs, +#performance-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#performance-toolbar-controls-detail-views > toolbarbutton { + min-width: 0; } #performance-toolbar-controls-detail-views .toolbarbutton-text { @@ -31,167 +38,69 @@ -moz-padding-end: 8px; } -#filter-button { - list-style-image: url(timeline-filter.svg#filter); - min-width: 24px; -} - -#filter-button[disabled] { - list-style-image: url(timeline-filter.svg#filter-disabled); -} - -#filter-button[open] { - list-style-image: url(timeline-filter.svg#filter-open); -} - -#performance-filter-menupopup > menuitem:before { - content: ""; - display: block; - width: 8px; - height: 8px; - margin: 0 8px; - border-radius: 1px; -} +/* Recording Notice */ -/* Details panel buttons */ - -#select-waterfall-view { - list-style-image: url(performance-icons.svg#details-waterfall); -} - -#select-js-calltree-view, -#select-memory-calltree-view { - list-style-image: url(performance-icons.svg#details-call-tree); -} - -#select-js-flamegraph-view, -#select-memory-flamegraph-view { - list-style-image: url(performance-icons.svg#details-flamegraph); +#performance-view .notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; } -#select-optimizations-view { - list-style-image: url(profiler-stopwatch.svg); +#performance-view .notice-container button { + min-width: 30px; + min-height: 28px; + margin: 0; } -/* Recording buttons */ +/* Overview Panel */ -#main-record-button { +.record-button { list-style-image: url(profiler-stopwatch.svg); } -#main-record-button[checked] { +.record-button[checked] { list-style-image: url(profiler-stopwatch-checked.svg); } -#main-record-button .button-icon { - margin: 0; -} - -#main-record-button .button-text { - display: none; -} - -.notice-container .record-button { - padding: 5px !important; -} - -.notice-container .record-button[checked], -.notice-container .record-button[checked] { - color: var(--theme-selection-color) !important; - background: var(--theme-selection-background) !important; -} - .record-button[locked] { pointer-events: none; - opacity: 0.5; -} - -/* Sidebar & recording items */ - -.recording-item { - padding: 4px; -} - -.recording-item-title { - font-size: 110%; -} - -.recording-item-footer { - padding-top: 4px; - font-size: 90%; -} - -.recording-item-save { - text-decoration: underline; - cursor: pointer; -} - -.recording-item-duration, -.recording-item-save { - color: var(--theme-body-color-alt); -} - -#recordings-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Recording notices */ - -.notice-container { - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color); - padding-bottom: 20vh; } -.console-profile-command { - font-family: monospace; - margin: 3px 2px; +.record-button .button-icon { + margin: 0; } -.realtime-disabled-message, -.realtime-disabled-on-e10s-message { +.record-button .button-text { display: none; } -#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { - display: initial; - opacity: 0.5; - -} -#performance-view[e10s="unsupported"] .realtime-disabled-message { - display: initial; - opacity: 0.5; -} +/* Details Panel */ -.buffer-status-message, -.buffer-status-message-full { - display: none; -} - -#details-pane-container[buffer-status="in-progress"] .buffer-status-message { - display: initial; - opacity: 0.5; +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); } -#details-pane-container[buffer-status="full"] .buffer-status-message { - display: initial; - color: var(--theme-highlight-red); - font-weight: bold; - opacity: 1; +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); } -#details-pane-container[buffer-status="full"] .buffer-status-message-full { - display: initial; +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); } /* Profile call tree */ .call-tree-cells-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); overflow: auto; } +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], .call-tree-cells-container[categories-hidden] .call-tree-category { display: none; } @@ -221,11 +130,11 @@ width: 4.5vw; } -.call-tree-header[type="count"], -.call-tree-cell[type="count"], -.call-tree-header[type="self-count"], -.call-tree-cell[type="self-count"] { - width: 9vw; +.call-tree-header[type="allocations"], +.call-tree-cell[type="allocations"], +.call-tree-header[type="self-allocations"], +.call-tree-cell[type="self-allocations"] { + width: 7vw; } .call-tree-header[type="function"], @@ -260,7 +169,7 @@ background-color: var(--theme-tab-toolbar-background); } -.call-tree-item:last-child { +.call-tree-item:last-child:not(:focus) { border-bottom: 1px solid var(--cell-border-color); } @@ -276,7 +185,7 @@ background-color: var(--theme-selection-background); } -.call-tree-item:focus description { +.call-tree-item:focus label { color: var(--theme-selection-color) !important; } @@ -292,11 +201,8 @@ opacity: 0.6; } -.call-tree-name { - -moz-margin-end: 4px !important; -} - .call-tree-url { + -moz-margin-start: 4px !important; cursor: pointer; } @@ -304,11 +210,11 @@ text-decoration: underline; } -.call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { +.call-tree-url { color: var(--theme-highlight-blue); } -.call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { +.call-tree-line { color: var(--theme-highlight-orange); } @@ -323,131 +229,127 @@ color: var(--theme-content-color2); } -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; +.call-tree-name[value=""], +.call-tree-url[value=""], +.call-tree-line[value=""], +.call-tree-column[value=""], +.call-tree-host[value=""] { + display: none; } -/** - * Waterfall ticks header - */ +.call-tree-zoom { + -moz-appearance: none; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: 11px; + min-width: 11px; + -moz-margin-start: 8px !important; + cursor: zoom-in; + opacity: 0; +} -.waterfall-header-ticks { - overflow: hidden; +.theme-dark .call-tree-zoom { + background-image: url(magnifying-glass.png); } -.waterfall-header-name { - padding: 2px 4px; - font-size: 90%; +.theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light.png); } -.waterfall-header-tick { - width: 100px; - font-size: 9px; - transform-origin: left center; - color: var(--theme-body-color); +@media (min-resolution: 2dppx) { + .theme-dark .call-tree-zoom { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light@2x.png); + } } -.waterfall-header-tick:not(:first-child) { - -moz-margin-start: -100px !important; /* Don't affect layout. */ +.call-tree-item:hover .call-tree-zoom { + transition: opacity 0.3s ease-in; + opacity: 1; } -.waterfall-background-ticks { - /* Background created on a in js. */ - /* @see browser/devtools/timeline/widgets/waterfall.js */ - background-image: -moz-element(#waterfall-background); - background-repeat: repeat-y; - background-position: -1px center; +.call-tree-item:hover .call-tree-zoom:hover { + opacity: 0; +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; } /** - * Markers waterfall breakdown + * Details Waterfall Styles */ -#waterfall-breakdown { +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); overflow-x: hidden; overflow-y: auto; } -.theme-light .waterfall-tree-item:not([level="0"]) { - background-image: repeating-linear-gradient( - -45deg, - transparent 0px, - transparent 2px, - rgba(0,0,0,0.025) 2px, - rgba(0,0,0,0.025) 4px - ); +.waterfall-header-contents { + overflow-x: hidden; } -.theme-dark .waterfall-tree-item:not([level="0"]) { - background-image: repeating-linear-gradient( - -45deg, - transparent 0px, - transparent 2px, - rgba(255,255,255,0.05) 2px, - rgba(255,255,255,0.05) 4px - ); +.waterfall-background-ticks { + /* Background created on a in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; } -.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bullet, -.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bar { - background-image: repeating-linear-gradient( - -45deg, - transparent 0px, - transparent 5px, - rgba(255,255,255,0.35) 5px, - rgba(255,255,255,0.35) 10px - ); +.waterfall-marker-container[is-spacer] { + pointer-events: none; } -.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bullet, -.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bar { - background-image: repeating-linear-gradient( - -45deg, - transparent 0px, - transparent 5px, - rgba(0,0,0,0.35) 5px, - rgba(0,0,0,0.35) 10px - ); +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); } -.waterfall-tree-item[expanded], -.waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] { - box-shadow: 0 -1px var(--cell-border-color-light); +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); } -.waterfall-tree-item:nth-child(2n) > .waterfall-marker { - background-color: var(--row-alt-background-color); +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; } -.waterfall-tree-item:hover { - background-color: var(--row-hover-background-color); +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; } -.waterfall-tree-item:last-child { - border-bottom: 1px solid var(--cell-border-color); +.waterfall-marker-item { + overflow: hidden; } -.waterfall-tree-item:focus { - background-color: var(--theme-selection-background); +.waterfall-sidebar { + -moz-border-end: 1px solid var(--theme-splitter-color); } -.waterfall-tree-item:focus description { - color: var(--theme-selection-color) !important; +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; } -/** - * Marker left sidebar - */ +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; +} -.waterfall-sidebar { - -moz-border-end: 1px solid var(--cell-border-color); +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); } -.waterfall-tree-item > .waterfall-sidebar:hover, -.waterfall-tree-item:hover > .waterfall-sidebar, -.waterfall-tree-item:focus > .waterfall-sidebar { - background: transparent; +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ } .waterfall-marker-bullet { @@ -455,6 +357,7 @@ height: 8px; -moz-margin-start: 8px; -moz-margin-end: 6px; + border: 1px solid; border-radius: 1px; } @@ -463,48 +366,51 @@ padding-bottom: 1px !important; } -/** - * Marker timebar - */ - -.waterfall-marker { - overflow: hidden; -} - .waterfall-marker-bar { height: 9px; - transform-origin: left center; + border: 1px solid; border-radius: 1px; + transform-origin: left center; } -.waterfall-marker > .theme-twisty { - /* Don't affect layout. */ - width: 14px; - -moz-margin-end: -14px; +.waterfall-marker-container.selected > .waterfall-sidebar, +.waterfall-marker-container.selected > .waterfall-marker-item { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } -/** - * Marker details view - */ +.waterfall-marker-container.selected .waterfall-marker-bullet, +.waterfall-marker-container.selected .waterfall-marker-bar { + border-color: initial !important; +} + +.waterfall-marker-location { + color: -moz-nativehyperlinktext; +} + +.waterfall-marker-location:hover, +.waterfall-marker-location:focus { + text-decoration: underline; +} #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; padding-top: 2vh; overflow: auto; - min-width: 50px; -} - -#waterfall-details > * { - padding-top: 3px; } .marker-details-bullet { width: 8px; height: 8px; + border: 1px solid; border-radius: 1px; } +#waterfall-details > * { + padding-top: 3px; +} + .marker-details-labelname { -moz-padding-end: 4px; } @@ -518,205 +424,32 @@ font-weight: bold; } -/** - * Marker colors - */ +/* Recording items */ -menuitem.marker-color-graphs-purple:before, -.marker-color-graphs-purple { - background-color: var(--theme-graphs-purple); -} -menuitem.marker-color-graphs-grey:before, -.marker-color-graphs-grey{ - background-color: var(--theme-graphs-grey); -} -menuitem.marker-color-graphs-green:before, -.marker-color-graphs-green { - background-color: var(--theme-graphs-green); -} -menuitem.marker-color-graphs-yellow:before, -.marker-color-graphs-yellow { - background-color: var(--theme-graphs-yellow); -} -menuitem.marker-color-graphs-red:before, -.marker-color-graphs-red { - background-color: var(--theme-graphs-red); -} -menuitem.marker-color-graphs-blue:before, -.marker-color-graphs-blue { - background-color: var(--theme-graphs-blue); -} - -/** - * JIT View - */ - -#jit-optimizations-view { - width: 350px; - overflow-x: hidden; - overflow-y: auto; - min-width: 200px; -} - -/* override default styles for tree widget */ -#jit-optimizations-view .tree-widget-empty-text { - font-size: inherit; - padding: 0px; - margin: 8px; -} - -#jit-optimizations-view:not(.empty) .tree-widget-empty-text { - display: none; -} - -#jit-optimizations-toolbar { - height: 18px; - min-height: 0px; /* override .devtools-toolbar min-height */ +.recording-item { + padding: 4px; } -.jit-optimizations-title { - margin: 0px 4px; - font-weight: 600; +.recording-item-title { + font-size: 110%; } -#jit-optimizations-raw-view { +.recording-item-footer { + padding-top: 4px; font-size: 90%; } -/* override default .tree-widget-item line-height */ -#jit-optimizations-raw-view .tree-widget-item { - line-height: 20px !important; - display: block; - overflow: hidden; -} - -#jit-optimizations-raw-view .tree-widget-item[level="1"] { - font-weight: 600; -} - -#jit-optimizations-view .opt-outcome::before { - content: "→"; - margin: 4px 0px; - color: var(--theme-body-color); -} -#jit-optimizations-view .theme-selected .opt-outcome::before { - color: var(--theme-selection-color); -} - -#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] { - color: var(--theme-highlight-green); -} -#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] { - color: var(--theme-highlight-red); -} -#jit-optimizations-view .tree-widget-container { - -moz-margin-end: 0px; -} -#jit-optimizations-view .tree-widget-container > li, -#jit-optimizations-view .tree-widget-children > li { - overflow: hidden; -} - -.opt-line::before { - content: ":"; - color: var(--theme-highlight-orange); -} -.theme-selected .opt-line::before { - color: var(--theme-selection-color); -} -.opt-line.header-line::before { - color: var(--theme-body-color); -} -#jit-optimizations-view.empty .opt-line.header-line::before { - display: none; -} - -.opt-url { - -moz-margin-start: 4px !important; -} -.opt-url:hover { +.recording-item-save { text-decoration: underline; -} -.opt-url.debugger-link { - cursor: pointer; -} - -.opt-icon::before { - content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.svg); - background-repeat: no-repeat; - background-size: 72px 60px; - /* show grey "i" bubble by default */ - background-position: -36px -36px; - width: 12px; - height: 12px; - display: inline-block; - - max-height: 12px; -} - -#jit-optimizations-view .opt-icon::before { - margin: 5px 6px 0 0; -} -description.opt-icon { - margin: 0px 0px 0px 0px; -} -description.opt-icon::before { - margin: 1px 4px 0px 0px; -} -.theme-light .opt-icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); -} -.opt-icon[severity=warning]::before { - background-position: -24px -24px; -} -.opt-icon[type=linkable]::before { cursor: pointer; } -ul.frames-list { - list-style-type: none; - padding: 0px; - margin: 0px; -} - -ul.frames-list li { - cursor: pointer; -} - -ul.frames-list li.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -/** - * Configurable Options - * - * Elements can be tagged with a class and visibility is controlled via a - * preference being applied or removed. - */ - -/** - * devtools.performance.ui.experimental - */ -menuitem.experimental-option::before { - content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.svg); - background-repeat: no-repeat; - background-size: 72px 60px; - width: 12px; - height: 12px; - display: inline-block; - - background-position: -24px -24px; - margin: 2px 5px 0 0; - max-height: 12px; -} -.theme-light menuitem.experimental-option::before { - background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); } -#performance-options-menupopup:not(.experimental-enabled) .experimental-option, -#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { - display: none; +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } diff --git a/arc-firefox-theme/chrome/browser/devtools/power.svg b/arc-firefox-theme/chrome/browser/devtools/power.svg index d3a3284..2888951 100644 --- a/arc-firefox-theme/chrome/browser/devtools/power.svg +++ b/arc-firefox-theme/chrome/browser/devtools/power.svg @@ -10,5 +10,5 @@ The above copyright notice and this permission notice shall be included in all c The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software. --> - + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg index abe68dc..f682354 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg @@ -1,17 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg index 690fc7d..d8e1bdd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg @@ -1,17 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler.css b/arc-firefox-theme/chrome/browser/devtools/profiler.css new file mode 100644 index 0000000..2e29fe8 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/profiler.css @@ -0,0 +1,402 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* vim:set ts=2 sw=2 sts=2 et: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* CSS Variables specific to this panel that aren't defined by the themes */ +.theme-dark { + --cell-border-color: rgba(255,255,255,0.15); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(29,79,115,0.15); + --row-hover-background-color: rgba(29,79,115,0.25); + --tab-hover-background-color: rgba(0,0,0,0.3); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); + --tab-hover-background-color: rgba(255,255,255,0.8); +} + +/* Reload and waiting notices */ + +.notice-container { + margin-top: -50vh; + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#empty-notice button, +#recording-notice button { + min-width: 30px; + min-height: 28px; + margin: 0; + list-style-image: url(profiler-stopwatch.svg); +} + +#empty-notice button[checked], +#recording-notice button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#empty-notice button .button-text, +#recording-notice button .button-text { + display: none; +} + +.theme-dark #loading-notice { + font-size: 250%; + color: rgba(255,255,255,0.2); +} + +.theme-light #loading-notice { + font-size: 250%; + color: rgba(0,0,0,0.2); +} + +/* Recordings pane */ + +#recordings-pane > tabs, +#recordings-pane .devtools-toolbar { + -moz-border-end-width: 1px; +} + +#recordings-pane > tabs, +#recordings-pane .devtools-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#record-button { + list-style-image: url(profiler-stopwatch.svg); +} + +#record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#record-button[locked] { + pointer-events: none; +} + +/* Recording items */ + +.recording-item { + padding: 4px; +} + +.recording-item-title { + font-size: 110%; +} + +.recording-item-footer { + padding-top: 4px; + font-size: 90%; +} + +.recording-item-save { + text-decoration: underline; + cursor: pointer; +} + +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); +} + +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Profile pane */ + +#profile-content tabs { + -moz-box-align: stretch; + height: 24px; + font: inherit; +} + +#profile-content tab { + -moz-box-flex: 0; + background-color: transparent; + border: none; + border-radius: 0; + padding: 0; + text-shadow: none; + transition-duration: 0.25s; + transition-timing-function: ease-in-out; + transition-property: opacity, transform; +} + +#profile-content tab { + color: var(--theme-body-color); +} + +#profile-content tab:not([selected]) { + cursor: pointer; +} + +#profile-content tab[covered] { + opacity: 0; + transform: translateY(100%); +} + +#profile-content tab { + -moz-appearance: none; + -moz-border-end: 1px solid var(--theme-splitter-color); +} + +#profile-content tab:hover { + background-color: var(--tab-hover-background-color); +} + +#profile-content tab[selected] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +#profile-content tabpanel { + -moz-box-orient: vertical; + transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */ +} + +#profile-newtab-button { + -moz-appearance: none; + background-color: transparent; + background-position: 4px 2px; + background-size: 54px 20px; + min-width: 26px; + margin: 0; + border: none; + cursor: pointer; +} + +.theme-dark #profile-newtab-button { + background-color: rgba(112,191,83,0.2); +} + +.theme-light #profile-newtab-button { + background-color: rgba(44,187,15,0.2); +} + +.theme-dark #profile-newtab-button { + background-image: url(newtab-inverted.png); +} + +.theme-light #profile-newtab-button { + background-image: url(newtab.png); +} + +@media (min-resolution: 2dppx) { + .theme-dark #profile-newtab-button { + background-image: url(newtab-inverted@2x.png); + } + + .theme-light #profile-newtab-button { + background-image: url(newtab@2x.png); + } +} + +#profile-newtab-button:hover { + background-position: 40px 2px; +} + +#profile-newtab-button:hover:active { + background-position: 22px 2px; +} + +/* Profile call tree */ + +.call-tree-headers-container { + border-top: 1px solid var(--theme-splitter-color); +} + +.call-tree-cells-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow: auto; +} + +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], +.call-tree-cells-container[categories-hidden] .call-tree-category { + display: none; +} + +.call-tree-header[type="duration"], +.call-tree-cell[type="duration"], +.call-tree-header[type="self-duration"], +.call-tree-cell[type="self-duration"] { + width: 9em; +} + +.call-tree-header[type="percentage"], +.call-tree-cell[type="percentage"], +.call-tree-header[type="self-percentage"], +.call-tree-cell[type="self-percentage"] { + width: 6em; +} + +.call-tree-header[type="samples"], +.call-tree-cell[type="samples"] { + width: 5em; +} + +.call-tree-header[type="function"], +.call-tree-cell[type="function"] { + -moz-box-flex: 1; +} + +.call-tree-header, +.call-tree-cell { + -moz-box-align: center; + overflow: hidden; + padding: 1px 4px; + color: var(--theme-body-color); +} + +.call-tree-header:not(:last-child), +.call-tree-cell:not(:last-child) { + -moz-border-end-width: 1px; + -moz-border-end-style: solid; +} + +.call-tree-header, +.call-tree-cell { + -moz-border-end-color: var(--cell-border-color); +} + +.call-tree-header:not(:last-child) { + text-align: center; +} + +.call-tree-cell:not(:last-child) { + text-align: end; +} + +.call-tree-header { + background-color: var(--theme-tab-toolbar-background); +} + +.call-tree-item:last-child:not(:focus) { + border-bottom: 1px solid var(--cell-border-color); +} + +.call-tree-item:nth-child(2n) { + background-color: var(--row-alt-background-color); +} + +.call-tree-item:hover { + background-color: var(--row-hover-background-color); +} + +.call-tree-item:focus { + background-color: var(--theme-selection-background); +} + +.call-tree-item:focus label { + color: var(--theme-selection-color) !important; +} + +.call-tree-item:focus .call-tree-cell { + -moz-border-end-color: var(--focus-cell-border-color); +} + +.call-tree-item:not([origin="content"]) .call-tree-name, +.call-tree-item:not([origin="content"]) .call-tree-url, +.call-tree-item:not([origin="content"]) .call-tree-line, +.call-tree-item:not([origin="content"]) .call-tree-column { + /* Style chrome and non-JS nodes differently. */ + opacity: 0.6; +} + +.call-tree-url { + -moz-margin-start: 4px !important; + cursor: pointer; +} + +.call-tree-url:hover { + text-decoration: underline; +} + +.call-tree-url { + color: var(--theme-highlight-blue); +} + +.call-tree-line { + color: var(--theme-highlight-orange); +} + +.call-tree-column { + color: var(--theme-highlight-orange); + opacity: 0.6; +} + +.call-tree-host { + -moz-margin-start: 8px !important; + font-size: 90%; + color: var(--theme-content-color2); +} + +.call-tree-name[value=""], +.call-tree-url[value=""], +.call-tree-line[value=""], +.call-tree-column[value=""], +.call-tree-host[value=""] { + display: none; +} + +.call-tree-zoom { + -moz-appearance: none; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: 11px; + min-width: 11px; + -moz-margin-start: 8px !important; + cursor: zoom-in; + opacity: 0; +} + +.theme-dark .call-tree-zoom { + background-image: url(magnifying-glass.png); +} + +.theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light.png); +} + +@media (min-resolution: 2dppx) { + .theme-dark .call-tree-zoom { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light@2x.png); + } +} + +.call-tree-item:hover .call-tree-zoom { + transition: opacity 0.3s ease-in; + opacity: 1; +} + +.call-tree-item:hover .call-tree-zoom:hover { + opacity: 0; +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; +} + +#profile-content tab label { + margin-bottom: 4px; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css b/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css deleted file mode 100644 index e003224..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css +++ /dev/null @@ -1,3 +0,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/. */ diff --git a/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg deleted file mode 100644 index 830d5fa..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind.png b/arc-firefox-theme/chrome/browser/devtools/rewind.png deleted file mode 100644 index 098e256..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/rewind.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png b/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png deleted file mode 100644 index eaac45d..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css index 8fad666..2bc650f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -2,29 +2,20 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* CSS Variables specific to this panel that aren't defined by the themes */ -.theme-light { - --rule-highlight-background-color: #ffee99; -} - -.theme-dark { - --rule-highlight-background-color: #594724; -} - .ruleview { height: 100%; } .ruleview-rule-source { + -moz-padding-start: 5px; text-align: end; float: right; -moz-user-select: none; - margin-bottom: 2px; } +.ruleview-rule-source, .ruleview-rule-source > label { cursor: pointer; - margin: 0; } .ruleview-rule-source[unselectable], @@ -57,11 +48,7 @@ padding: 2px 4px; } -/** - * Display rules that don't match the current selected element and uneditable - * user agent styles differently - */ -.ruleview-rule[unmatched=true], +/* User agent styles are not editable, display them differently */ .ruleview-rule[uneditable=true] { background: var(--theme-tab-toolbar-background); } @@ -78,13 +65,14 @@ visibility: hidden; } -.ruleview-rule[uneditable=true] .ruleview-swatch { +.ruleview-rule[uneditable=true] .ruleview-colorswatch, +.ruleview-rule[uneditable=true] .ruleview-bezierswatch { cursor: default; } + .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > -.ruleview-propertyvalue { +.ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue { border-bottom-color: transparent; } @@ -109,7 +97,7 @@ } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .ruleview-warning { background-image: url(alerticon-warning@2x.png); } @@ -144,7 +132,7 @@ } .ruleview-namecontainer, -.ruleview-propertyvaluecontainer, +.ruleview-propertycontainer, .ruleview-propertyname, .ruleview-propertyvalue { text-decoration: inherit; @@ -159,12 +147,13 @@ -moz-margin-start: 35px; } -.ruleview-swatch { +.ruleview-colorswatch, +.ruleview-bezierswatch { cursor: pointer; border-radius: 50%; - width: 0.9em; - height: 0.9em; - vertical-align: middle; + width: 1em; + height: 1em; + vertical-align: text-top; -moz-margin-end: 5px; display: inline-block; position: relative; @@ -191,12 +180,7 @@ background-size: 1em; } -.ruleview-filterswatch { - background: url("chrome://browser/skin/devtools/filter-swatch.svg"); - background-size: 1em; -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .ruleview-bezierswatch { background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png"); background-size: 1em; @@ -221,7 +205,7 @@ clear: right; } -.ruleview-propertycontainer > * { +.ruleview-property > * { vertical-align: middle; } @@ -229,90 +213,20 @@ border-left-color: var(--theme-highlight-green); } -.ruleview-highlight { - background-color: var(--rule-highlight-background-color); -} - .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-propertyvaluecontainer > .ruleview-propertyvalue { +.ruleview-propertycontainer > .ruleview-propertyvalue { border-bottom: 1px dashed transparent; } .ruleview-namecontainer:hover > .ruleview-propertyname, -.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { +.ruleview-propertycontainer:hover > .ruleview-propertyvalue { border-bottom-color: hsl(0,0%,50%); } -.ruleview-selectorcontainer { +.ruleview-selector { word-wrap: break-word; - cursor: text; } .ruleview-selector-separator, .ruleview-selector-unmatched { color: #888; } - -.ruleview-selector-matched > .ruleview-selector-attribute { - /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ -} - -.ruleview-selector-matched > .ruleview-selector-pseudo-class { - /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ -} - -.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock { - font-weight: bold; - color: var(--theme-highlight-orange); -} - -.ruleview-selectorhighlighter { - background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; - padding-left: 16px; - margin-left: 5px; - cursor: pointer; -} - -.ruleview-selectorhighlighter:hover { - background-position: -32px 0; -} - -.ruleview-selectorhighlighter:active, -.ruleview-selectorhighlighter.highlighted { - background-position: -16px 0; -} - -#ruleview-add-rule-button::before { - background-image: url("chrome://browser/skin/devtools/add.svg"); - background-size: cover; -} - -#pseudo-class-panel-toggle::before { - background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class"); - background-size: cover; -} -#pseudo-class-panel-toggle[checked]::before { - background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked"); - filter: none !important; -} - -/** - * These buttons are using opacity instead of background color to indicate - * the state - */ -#ruleview-add-rule-button, -#pseudo-class-panel-toggle { - opacity: 0.8; -} - -#ruleview-add-rule-button:not([disabled]):hover, -#pseudo-class-panel-toggle:hover, -#pseudo-class-panel-toggle[checked] { - opacity: 1; -} - -#ruleview-add-rule-button, -#pseudo-class-panel-toggle, -#pseudo-class-panel-toggle:hover, -#pseudo-class-panel-toggle[checked]::before { - background-color: transparent !important; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/scratchpad.css b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css index 4c8a5d1..96d6f70 100644 --- a/arc-firefox-theme/chrome/browser/devtools/scratchpad.css +++ b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css @@ -1,3 +1,7 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + #scratchpad-sidebar > tabs { height: 0; diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg deleted file mode 100644 index 422a7ce..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg deleted file mode 100644 index a8f9fd8..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg deleted file mode 100644 index 066ef44..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css index 9ba9ff8..3d01e20 100644 --- a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css @@ -1,3 +1,7 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -60,7 +64,7 @@ border: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .side-menu-widget-item-checkbox .checkbox-check { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/splitview.css b/arc-firefox-theme/chrome/browser/devtools/splitview.css index 902fedb..9710c38 100644 --- a/arc-firefox-theme/chrome/browser/devtools/splitview.css +++ b/arc-firefox-theme/chrome/browser/devtools/splitview.css @@ -133,3 +133,20 @@ min-width: 48px; min-height: 0; } + + +/* Resizers */ + +.splitview-portrait-resizer { + -moz-appearance: none; + background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), + linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); + height: 12px; + background-size: 10px 2px, 100% 12px; + background-clip: content-box, border-box; + background-repeat: repeat-y, no-repeat; + background-position: center center; + padding: 2px 0; + border-top: 1px solid hsla(210,8%,5%,.5); + border-bottom: 1px solid hsla(210,8%,5%,.5); +} diff --git a/arc-firefox-theme/chrome/browser/devtools/storage.css b/arc-firefox-theme/chrome/browser/devtools/storage.css index a5a897e..5f6d78e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/storage.css +++ b/arc-firefox-theme/chrome/browser/devtools/storage.css @@ -10,8 +10,8 @@ overflow: auto; } -#storage-tree { - background: var(--theme-sidebar-background); +.theme-dark #storage-tree { + background: #343c45; /* Toolbars */ } #storage-tree .tree-widget-item[type="store"]:after { diff --git a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css index a4a300f..788d4aa 100644 --- a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css @@ -115,7 +115,7 @@ height: 40px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .stylesheet-enabled { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg index 1919e2c..60ebf9a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg +++ b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg @@ -2,25 +2,36 @@ - - - - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline.css b/arc-firefox-theme/chrome/browser/devtools/timeline.css new file mode 100644 index 0000000..503527b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/timeline.css @@ -0,0 +1,250 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* vim:set ts=2 sw=2 sts=2 et: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +#record-button { + list-style-image: url(profiler-stopwatch.svg); + min-width: 24px; +} + +#record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#record-button:not([checked]) ~ #record-label { + visibility: hidden; +} + +#memory-checkbox .checkbox-label { + line-height: 100%; +} + +#filter-button { + list-style-image: url(timeline-filter.svg#filter); + min-width: 24px; +} + +#filter-button[disabled] { + list-style-image: url(timeline-filter.svg#filter-disabled); +} + +#filter-button[open] { + list-style-image: url(timeline-filter.svg#filter-open); +} + +#timelineFilterPopup > menuitem:before { + content: ""; + display: block; + width: 8px; + height: 8px; + margin: 0 8px; + border: 1px solid; + border-radius: 1px; + background-color: var(--bullet-bg); + border-color: var(--bullet-border); +} + +.notice-container { + font-size: 120%; + padding-bottom: 35vh; +} + +.theme-dark .notice-container { + background: #343c45; /* Toolbars */ + color: #f5f7fa; /* Light foreground text */ +} + +.theme-light .notice-container { + background: #f0f1f2; /* Toolbars */ + color: #585959; /* Grey foreground text */ +} + +#empty-notice button, +#recording-notice button { + min-width: 30px; + min-height: 28px; + margin: 0; + list-style-image: url(profiler-stopwatch.svg); +} + +#empty-notice button[checked], +#recording-notice button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#empty-notice button .button-text, +#recording-notice button .button-text { + display: none; +} + +.theme-dark #timeline-pane { + border-top: 1px solid #000; +} + +.theme-light #timeline-pane { + border-top: 1px solid #aaa; +} + +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow-x: hidden; + overflow-y: auto; +} + +.waterfall-header-contents { + overflow-x: hidden; +} + +.waterfall-background-ticks { + /* Background created on a in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +.waterfall-marker-container[is-spacer] { + pointer-events: none; +} + +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); +} + +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); +} + +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; +} + +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; +} + +.waterfall-marker-item { + overflow: hidden; +} + +.waterfall-sidebar { + -moz-border-end: 1px solid; +} + +.theme-dark .waterfall-sidebar { + -moz-border-end-color: #000; +} + +.theme-light .waterfall-sidebar { + -moz-border-end-color: #aaa; +} + +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; +} + +.waterfall-header-name { + padding: 4px; +} + +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; +} + +.theme-dark .waterfall-header-tick { + color: #a9bacb; +} + +.theme-light .waterfall-header-tick { + color: #292e33; +} + +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ +} + +.waterfall-marker-bullet { + width: 8px; + height: 8px; + -moz-margin-start: 8px; + -moz-margin-end: 6px; + border: 1px solid; + border-radius: 1px; +} + +.waterfall-marker-name { + font-size: 95%; + padding-bottom: 1px !important; +} + +.waterfall-marker-bar { + height: 9px; + border: 1px solid; + border-radius: 1px; + transform-origin: left center; +} + +.theme-light .waterfall-marker-container.selected > .waterfall-sidebar, +.theme-light .waterfall-marker-container.selected > .waterfall-marker-item { + background-color: #4c9ed9; /* Select Highlight Blue */ + color: #f5f7fa; /* Light foreground text */ +} + +.theme-dark .waterfall-marker-container.selected > .waterfall-sidebar, +.theme-dark .waterfall-marker-container.selected > .waterfall-marker-item { + background-color: #1d4f73; /* Select Highlight Blue */ + color: #f5f7fa; /* Light foreground text */ +} + +.waterfall-marker-container.selected .waterfall-marker-bullet, +.waterfall-marker-container.selected .waterfall-marker-bar { + border-color: initial!important; +} + +.waterfall-marker-location { + color: -moz-nativehyperlinktext; +} + +.waterfall-marker-location:hover, +.waterfall-marker-location:focus { + text-decoration: underline; +} + +#timeline-waterfall-details { + -moz-padding-start: 8px; + -moz-padding-end: 8px; + padding-top: 2vh; + overflow: auto; +} + +.marker-details-bullet { + width: 8px; + height: 8px; + border: 1px solid; + border-radius: 1px; +} + +#timeline-waterfall-details > * { + padding-top: 3px; +} + +.marker-details-labelname { + -moz-padding-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg index 998f21b..ae294f6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg index 655d482..128e6e8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg @@ -1,10 +1,7 @@ - - - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg index 45ec67f..5a8cbb8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg @@ -1,12 +1,9 @@ - - - - - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg index 8e232d6..bec394d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg @@ -1,39 +1,36 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg index 2885ef9..62a6d75 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg deleted file mode 100644 index 0882cca..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg index 8441af3..d8e1bdd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg @@ -1,17 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg index c1e8e08..ad2133a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg @@ -1,9 +1,6 @@ - - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg deleted file mode 100644 index e4e239a..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg index 8c2c291..7f5013b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg @@ -1,10 +1,7 @@ - - - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg index e123f45..ac1f5c7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg @@ -1,9 +1,6 @@ - - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg index cd317de..59d9d90 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg @@ -1,6 +1,3 @@ - - + - + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg index f62307d..0739e82 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css index 0d66638..de0e21e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css @@ -1,3 +1,7 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ @@ -187,7 +191,7 @@ text { -moz-box-flex: 1; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #inspector-pane-toggle { list-style-image: url(debugger-collapse@2x.png); -moz-image-region: rect(0px,32px,32px,0px); diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css index d875c23..ea87584 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css @@ -27,11 +27,10 @@ a { box-sizing: border-box; } -.message > .prefix, .message > .timestamp { flex: none; color: GrayText; - margin: 3px 6px 0 0; + margin: 4px 6px 0 0; } .message > .indent { @@ -48,17 +47,19 @@ a { .message > .icon::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.svg); - background-position: 12px 12px; + background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-position: 8px 8px; background-repeat: no-repeat; - background-size: 72px 60px; - width: 12px; - height: 12px; + background-size: 48px 40px; + width: 8px; + height: 8px; display: inline-block; } -.theme-light .message > .icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); +@media (min-resolution: 2dppx) { + .message > .icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); + } } .message > .message-body-wrapper { @@ -230,7 +231,7 @@ a { } .message[category=network][severity=error] > .icon::before { - background-position: -12px 0; + background-position: -8px 0; } .message[category=network] > .message-body { @@ -287,11 +288,11 @@ a { } .message[category=cssparser][severity=error] > .icon::before { - background-position: -12px -12px; + background-position: -8px -8px; } .message[category=cssparser][severity=warn] > .icon::before { - background-position: -24px -12px; + background-position: -16px -8px; } /* JS styles */ @@ -305,11 +306,11 @@ a { } .message[category=exception][severity=error] > .icon::before { - background-position: -12px -24px; + background-position: -8px -16px; } .message[category=exception][severity=warn] > .icon::before { - background-position: -24px -24px; + background-position: -16px -16px; } /* Web Developer styles */ @@ -324,15 +325,15 @@ a { .message[category=console][severity=error] > .icon::before, .message[category=output][severity=error] > .icon::before { - background-position: -12px -36px; + background-position: -8px -24px; } .message[category=console][severity=warn] > .icon::before { - background-position: -24px -36px; + background-position: -16px -24px; } .message[category=console][severity=info] > .icon::before { - background-position: -36px -36px; + background-position: -24px -24px; } /* Input and output styles */ @@ -342,11 +343,11 @@ a { } .message[category=input] > .icon::before { - background-position: -48px -36px; + background-position: -32px -24px; } .message[category=output] > .icon::before { - background-position: -60px -36px; + background-position: -40px -24px; } /* JSTerm Styles */ @@ -364,7 +365,7 @@ a { background-size: 16px 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .jsterm-input-node { background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); } @@ -378,9 +379,6 @@ a { .inlined-variables-view .message-body { display: flex; flex-direction: column; - resize: vertical; - overflow: auto; - min-height: 200px; } .inlined-variables-view iframe { display: block; @@ -413,11 +411,11 @@ a { } .message[category=security][severity=error] > .icon::before { - background-position: -12px -48px; + background-position: -8px -32px; } .message[category=security][severity=warn] > .icon::before { - background-position: -24px -48px; + background-position: -16px -32px; } .navigation-marker { diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.png b/arc-firefox-theme/chrome/browser/devtools/webconsole.png new file mode 100644 index 0000000..8aee790 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/webconsole.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg deleted file mode 100644 index 6c21e54..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png new file mode 100644 index 0000000..2d5e97f Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css index 18a6757..181faa6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -7,14 +7,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.theme-dark { - --table-splitter-color: rgba(255,255,255,0.15); - --table-zebra-background: rgba(255,255,255,0.05); -} -.theme-light { - --table-splitter-color: rgba(0,0,0,0.15); - --table-zebra-background: rgba(0,0,0,0.05); -} /* Generic pane helpers */ @@ -108,7 +100,7 @@ padding: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .scrollbutton-up > .toolbarbutton-icon, .scrollbutton-down > .toolbarbutton-icon { background-image: url("breadcrumbs-scrollbutton@2x.png"); @@ -638,7 +630,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variable-or-property-non-writable-icon { background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); } @@ -738,7 +730,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variables-view-delete { background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); } @@ -764,7 +756,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variables-view-edit { background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); } @@ -790,7 +782,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variables-view-open-inspector { background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png"); } @@ -865,10 +857,6 @@ cursor: col-resize; } -.graph-widget-canvas[input=adjusting-view-area] { - cursor: grabbing; -} - .graph-widget-canvas[input=hovering-selection-contents] { cursor: grab; } @@ -881,22 +869,13 @@ .line-graph-widget-gutter { position: absolute; + background: rgba(255,255,255,0.75); width: 10px; height: 100%; top: 0; left: 0; + border-right: 1px solid rgba(255,255,255,0.25); pointer-events: none; - -moz-border-end: 1px solid; -} - -.theme-light .line-graph-widget-gutter { - background: rgba(255,255,255,0.75); - -moz-border-end-color: rgba(255,255,255,0.25); -} - -.theme-dark .line-graph-widget-gutter { - background: rgba(0,0,0,0.5); - -moz-border-end-color: rgba(0,0,0,0.25); } .line-graph-widget-gutter-line { @@ -919,24 +898,17 @@ .line-graph-widget-tooltip { position: absolute; + background: rgba(255,255,255,0.75); border-radius: 2px; line-height: 15px; -moz-padding-start: 6px; -moz-padding-end: 6px; transform: translateY(-50%); - font-size: 0.8rem !important; + font-size: 80%; z-index: 1; pointer-events: none; } -.theme-light .line-graph-widget-tooltip { - background: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip { - background: rgba(0,0,0,0.5); -} - .line-graph-widget-tooltip[with-arrows=true]::before { content: ""; position: absolute; @@ -946,31 +918,15 @@ } .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end: 3px solid; + -moz-border-end: 3px solid rgba(255,255,255,0.75); left: -3px; } .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start: 3px solid; + -moz-border-start: 3px solid rgba(255,255,255,0.75); right: -3px; } -.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end-color: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end-color: rgba(0,0,0,0.5); -} - -.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start-color: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start-color: rgba(0,0,0,0.5); -} - .line-graph-widget-tooltip[type=maximum] { left: 14px; } @@ -984,7 +940,7 @@ } .line-graph-widget-tooltip > [text=info] { - color: var(--theme-content-color1); + color: #18191a; } .line-graph-widget-tooltip > [text=value] { @@ -993,39 +949,35 @@ .line-graph-widget-tooltip > [text=metric] { -moz-margin-start: 1px; - color: var(--theme-content-color3); + color: #667380; } -.theme-light .line-graph-widget-tooltip > [text=value], -.theme-light .line-graph-widget-tooltip > [text=metric] { - text-shadow: 1px 0px rgba(255,255,255,0.5), - -1px 0px rgba(255,255,255,0.5), - 0px -1px rgba(255,255,255,0.5), - 0px 1px rgba(255,255,255,0.5); -} - -.theme-dark .line-graph-widget-tooltip > [text=value], -.theme-dark .line-graph-widget-tooltip > [text=metric] { - text-shadow: 1px 0px rgba(0,0,0,0.5), - -1px 0px rgba(0,0,0,0.5), - 0px -1px rgba(0,0,0,0.5), - 0px 1px rgba(0,0,0,0.5); +.line-graph-widget-tooltip > [text=value], +.line-graph-widget-tooltip > [text=metric] { + text-shadow: 1px 0px rgba(255,255,255,0.6), + -1px 0px rgba(255,255,255,0.6), + 0px -1px rgba(255,255,255,0.6), + 0px 1px rgba(255,255,255,0.6); } .line-graph-widget-tooltip[type=maximum] > [text=value] { - color: var(--theme-highlight-green); + color: #2cbb0f; } .line-graph-widget-tooltip[type=minimum] > [text=value] { - color: var(--theme-highlight-red); + color: #ed2655; } .line-graph-widget-tooltip[type=average] > [text=value] { - color: var(--theme-highlight-orange); + color: #d97e00; } /* Bar graph widget */ +.bar-graph-widget-canvas { + background: #f7f7f7; +} + .bar-graph-widget-legend { position: absolute; top: 4px; @@ -1207,16 +1159,43 @@ overflow: auto; } -.table-widget-body, -.table-widget-empty-text { - background-color: var(--theme-body-background); +.theme-light .table-widget-body { + background: var(--theme-sidebar-background); +} + +.theme-dark .table-widget-body, +.theme-dark .table-widget-empty-text { + background-color: var(--theme-toolbar-background); +} + +.theme-dark .table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #aaa; +} + +.table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; } /* Column Headers */ -.table-widget-column-header, -.table-widget-cell { - -moz-border-end: 1px solid var(--table-splitter-color) !important; +.theme-dark .table-widget-column-header, +.theme-dark .table-widget-cell { + -moz-border-end: 1px solid rgba(0,0,0,0.2); + box-shadow: inset 1px 0 0 rgba(128,128,128,0.15); +} + +.theme-light .table-widget-column-header, +.theme-light .table-widget-cell { + -moz-border-end: 1px solid rgba(128,128,128,0.25); + box-shadow: inset 1px 0 0 transparent; } /* Table widget column header colors are taken from netmonitor.inc.css to match @@ -1227,8 +1206,10 @@ background: rgba(0,0,0,0); position: sticky; top: 0; + min-height: 32px; width: 100%; - padding: 5px 0 0 !important; + border: none; + padding: 8px 0 0 !important; color: inherit; text-align: center; font-weight: inherit !important; @@ -1236,29 +1217,27 @@ } .table-widget-column-header:hover { - background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)); + background: rgba(0,0,0,0.10); } .table-widget-column-header:hover:active { - background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)); + background: rgba(0,0,0,0.25); } .table-widget-column-header:not(:active)[sorted] { - background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); + background: rgba(0,0,0,0.15); } .table-widget-column-header:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)), - linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); - background-size: 100% 1px, auto; - background-repeat: no-repeat, repeat; + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; } .table-widget-column-header:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)), - linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); - background-size: 100% 1px, auto; - background-repeat: no-repeat, repeat; + background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; background-position: bottom; } @@ -1266,22 +1245,44 @@ .table-widget-cell { width: 100%; + margin: -1px 0 !important; padding: 3px 4px; background-clip: padding-box; min-width: 100px; -moz-user-focus: normal; - margin-bottom: -1px !important; +} + +.theme-dark .table-widget-cell { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); + color: var(--theme-selection-color); +} + +.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-dark .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(255,255,255,0.05); +} + +.theme-dark .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .table-widget-cell { + border-top: 1px solid rgba(128,128,128,0.15); border-bottom: 1px solid transparent; +} + +.theme-light .table-widget-cell:not(.theme-selected) { color: var(--theme-body-color); } -.table-widget-cell:last-child { - border-bottom: 1px solid var(--table-splitter-color); +.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-light .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(128,128,128,0.05); } -:root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.table-widget-cell:not(.theme-selected)[odd] { - background: var(--table-zebra-background); +.theme-light .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); } .table-widget-cell.flash-out { @@ -1303,6 +1304,10 @@ margin-top: -20px !important; } +.theme-light .table-widget-empty-text { + background: #F7F7F7; /* Background-Sidebar */ +} + .table-widget-body:empty + .table-widget-empty-text:not([value=""]), .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { display: block; @@ -1354,11 +1359,11 @@ } .tree-widget-item[level="1"] { - font-weight: 700; + font-weight: 800; } /* Twisties */ -.tree-widget-item::before { +.tree-widget-item:before { content: ""; width: 14px; height: 14px; @@ -1371,24 +1376,24 @@ background-position: -28px -14px; } -.tree-widget-item:-moz-locale-dir(rtl)::before { +.tree-widget-item:-moz-locale-dir(rtl):before { float: right; transform: scaleX(-1); } -.theme-light .tree-widget-item:not(.theme-selected)::before { +.theme-light .tree-widget-item:before { background-position: 0 -14px; } -.tree-widget-item[empty]::before { +.tree-widget-item[empty]:before { background: transparent; } -.tree-widget-item[expanded]::before { +.tree-widget-item[expanded]:before { background-position: -42px -14px; } -.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before { +.theme-light .tree-widget-item[expanded]:before { background-position: -14px -14px; } @@ -1421,7 +1426,7 @@ } } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .tree-widget-item:before { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -1466,7 +1471,7 @@ /* Custom icons for certain tree items indicating the type of the item */ -.tree-widget-item[type]::after { +.tree-widget-item[type]:after { content: ""; float: left; width: 16px; @@ -1474,36 +1479,31 @@ -moz-margin-end: 4px; background-repeat: no-repeat; background-size: 20px auto; + filter: url('filters.svg#invert'); background-position: 0 0; background-size: auto 20px; - opacity: 0.75; -} - -.tree-widget-item.theme-selected[type]::after { - opacity: 1; } -.tree-widget-item:-moz-locale-dir(rtl)::after { +.tree-widget-item:-moz-locale-dir(rtl):after { float: right; } -.theme-light .tree-widget-item.theme-selected[type]::after, -.theme-dark .tree-widget-item[type]::after { - filter: invert(1); +.theme-dark .tree-widget-item[type]:after { + filter: url('filters.svg#invert-white'); } -.tree-widget-item[type="dir"]::after { +.tree-widget-item[type="dir"]:after { background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg); background-position: 2px 0; background-size: auto 16px; width: 20px; } -.tree-widget-item[type="dir"][expanded]:not([empty])::after { +.tree-widget-item[type="dir"][expanded]:not([empty]):after { background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg); } -.tree-widget-item[type="url"]::after { +.tree-widget-item[type="url"]:after { background-image: url(chrome://browser/skin/devtools/filetype-globe.svg); background-size: auto 18px; width: 18px; diff --git a/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css b/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css index 473e401..323ead9 100644 --- a/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css +++ b/arc-firefox-theme/chrome/browser/downloads/allDownloadsViewOverlay.css @@ -21,7 +21,7 @@ } .blockedIcon { - list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog"); + list-style-image: url("chrome://global/skin/icons/Error.png"); } .downloadTarget { diff --git a/arc-firefox-theme/chrome/browser/downloads/contentAreaDownloadsView.css b/arc-firefox-theme/chrome/browser/downloads/contentAreaDownloadsView.css index 73e42fb..56917d7 100644 --- a/arc-firefox-theme/chrome/browser/downloads/contentAreaDownloadsView.css +++ b/arc-firefox-theme/chrome/browser/downloads/contentAreaDownloadsView.css @@ -2,26 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/in-content/common.css"); - -#contentAreaDownloadsView { - padding: 18px; -} - -#downloadsRichListBox:not(:-moz-focusring) { - border-color: transparent; -} - -.downloadButton:not([disabled="true"]):hover, -.downloadButton:not([disabled="true"]):hover:active, -.downloadButton:not([disabled]):hover:active { - background: transparent; - border: none; -} - -.downloadButton > .button-box { - padding-bottom: 0; -} +@import url("chrome://global/skin/inContentUI.css"); #downloadsListEmptyDescription { margin: 1em; diff --git a/arc-firefox-theme/chrome/browser/downloads/downloads.css b/arc-firefox-theme/chrome/browser/downloads/downloads.css index 78c2f42..7fbc756 100644 --- a/arc-firefox-theme/chrome/browser/downloads/downloads.css +++ b/arc-firefox-theme/chrome/browser/downloads/downloads.css @@ -103,7 +103,7 @@ richlistitem[type="download"]:last-child { } .blockedIcon { - list-style-image: url("moz-icon://stock/gtk-dialog-error?size=dialog"); + list-style-image: url("chrome://global/skin/icons/Error.png"); } /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of diff --git a/arc-firefox-theme/chrome/browser/drm-icon.svg b/arc-firefox-theme/chrome/browser/drm-icon.svg index bd7c7ba..3ae6a57 100644 --- a/arc-firefox-theme/chrome/browser/drm-icon.svg +++ b/arc-firefox-theme/chrome/browser/drm-icon.svg @@ -1,8 +1,6 @@ - - + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg b/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg index 921354a..aecaf69 100644 --- a/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg +++ b/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg @@ -1,50 +1,428 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg b/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg index 48f7a0f..e068551 100644 --- a/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg +++ b/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg @@ -1,50 +1,428 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/identity-icons-generic.png b/arc-firefox-theme/chrome/browser/identity-icons-generic.png new file mode 100644 index 0000000..a39e493 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/identity-icons-generic.png differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-ev.png b/arc-firefox-theme/chrome/browser/identity-icons-https-ev.png new file mode 100644 index 0000000..d49be13 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/identity-icons-https-ev.png differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png new file mode 100644 index 0000000..3c77bc8 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-active.png differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png new file mode 100644 index 0000000..09b4e97 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/identity-icons-https-mixed-display.png differ diff --git a/arc-firefox-theme/chrome/browser/identity-icons-https.png b/arc-firefox-theme/chrome/browser/identity-icons-https.png new file mode 100644 index 0000000..ffd6694 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/identity-icons-https.png differ diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg b/arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg deleted file mode 100644 index 8b442ba..0000000 --- a/arc-firefox-theme/chrome/browser/identity-mixed-active-blocked.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg b/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg deleted file mode 100644 index b7191a8..0000000 --- a/arc-firefox-theme/chrome/browser/identity-mixed-active-loaded.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg b/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg deleted file mode 100644 index d1e9dbd..0000000 --- a/arc-firefox-theme/chrome/browser/identity-mixed-passive-loaded.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity-not-secure.svg b/arc-firefox-theme/chrome/browser/identity-not-secure.svg deleted file mode 100644 index a57a5af..0000000 --- a/arc-firefox-theme/chrome/browser/identity-not-secure.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity-secure.svg b/arc-firefox-theme/chrome/browser/identity-secure.svg deleted file mode 100644 index 5dad890..0000000 --- a/arc-firefox-theme/chrome/browser/identity-secure.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/identity.png b/arc-firefox-theme/chrome/browser/identity.png new file mode 100644 index 0000000..f3f790e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/identity.png differ diff --git a/arc-firefox-theme/chrome/browser/info.svg b/arc-firefox-theme/chrome/browser/info.svg deleted file mode 100644 index f004119..0000000 --- a/arc-firefox-theme/chrome/browser/info.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/loop/menuPanel@2x.png b/arc-firefox-theme/chrome/browser/loop/menuPanel@2x.png deleted file mode 100644 index f52cf22..0000000 Binary files a/arc-firefox-theme/chrome/browser/loop/menuPanel@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/loop/toolbar-inverted@2x.png b/arc-firefox-theme/chrome/browser/loop/toolbar-inverted@2x.png deleted file mode 100644 index 1178851..0000000 Binary files a/arc-firefox-theme/chrome/browser/loop/toolbar-inverted@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/loop/toolbar@2x.png b/arc-firefox-theme/chrome/browser/loop/toolbar@2x.png deleted file mode 100644 index c1fc1de..0000000 Binary files a/arc-firefox-theme/chrome/browser/loop/toolbar@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/mask.png b/arc-firefox-theme/chrome/browser/mask.png new file mode 100644 index 0000000..f48d176 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/mask.png differ diff --git a/arc-firefox-theme/chrome/browser/mask@2x.png b/arc-firefox-theme/chrome/browser/mask@2x.png new file mode 100644 index 0000000..e284af0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/mask@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel-customize@2x.png b/arc-firefox-theme/chrome/browser/menuPanel-customize@2x.png deleted file mode 100644 index 5ce3b76..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel-customize@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel-exit@2x.png b/arc-firefox-theme/chrome/browser/menuPanel-exit@2x.png deleted file mode 100644 index d484265..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel-exit@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel-help@2x.png b/arc-firefox-theme/chrome/browser/menuPanel-help@2x.png deleted file mode 100644 index b8f0a80..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel-help@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel-small@2x.png b/arc-firefox-theme/chrome/browser/menuPanel-small@2x.png deleted file mode 100644 index f3eb362..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel-small@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel.png b/arc-firefox-theme/chrome/browser/menuPanel.png index ccdc35b..4620649 100644 Binary files a/arc-firefox-theme/chrome/browser/menuPanel.png and b/arc-firefox-theme/chrome/browser/menuPanel.png differ diff --git a/arc-firefox-theme/chrome/browser/menuPanel@2x.png b/arc-firefox-theme/chrome/browser/menuPanel@2x.png deleted file mode 100644 index d1d5256..0000000 Binary files a/arc-firefox-theme/chrome/browser/menuPanel@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/newtab/close.png b/arc-firefox-theme/chrome/browser/newtab/close.png deleted file mode 100644 index ea6ada4..0000000 Binary files a/arc-firefox-theme/chrome/browser/newtab/close.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/newtab/controls.svg b/arc-firefox-theme/chrome/browser/newtab/controls.svg index 6eb0096..b6898bf 100644 --- a/arc-firefox-theme/chrome/browser/newtab/controls.svg +++ b/arc-firefox-theme/chrome/browser/newtab/controls.svg @@ -1,85 +1,116 @@ - - + + + - + - + + - + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - + + diff --git a/arc-firefox-theme/chrome/browser/newtab/newTab.css b/arc-firefox-theme/chrome/browser/newtab/newTab.css index 4073cd9..b051e74 100644 --- a/arc-firefox-theme/chrome/browser/newtab/newTab.css +++ b/arc-firefox-theme/chrome/browser/newtab/newTab.css @@ -12,6 +12,16 @@ background-color: transparent; } +/* SCROLLBOX */ +#newtab-scrollbox:not([page-disabled]) { + color: rgb(0,0,0); + background-color: #f9f9f9; +} + +#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom { + background: inherit; +} + /* UNDO */ #newtab-undo-container { padding: 4px 3px; @@ -51,49 +61,23 @@ border: none; } -#newtab-undo-close-button { - -moz-appearance: none; - padding: 0; - border: none; - height: 16px; - width: 16px; - float: right; - right: 0; - background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 16, 16, 0); - background-color: transparent; -} - -#newtab-undo-close-button:hover { - background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 32, 16, 16); -} - -#newtab-undo-close-button:hover:active { - background-image: -moz-image-rect(url(chrome://browser/skin/newtab/close.png), 0, 48, 16, 32); +#newtab-undo-close-button:-moz-focusring { + outline: 1px dotted; } /* CUSTOMIZE */ #newtab-customize-button, .newtab-customize { + background-color: transparent; background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 32, 32, 0); background-size: 28px; - height: 38px; - width: 38px; - background-repeat: no-repeat; - background-position: center; - background-color: transparent; border: none; -} - -.newtab-customize { height: 28px; width: 28px; } #newtab-customize-button:-moz-any(:hover, :active, [active]) { background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32); - background-color: #FFFFFF; - border: solid 1px #CCCCCC; - border-radius: 2px; } /* CELLS */ @@ -115,8 +99,7 @@ transition-property: top, left, opacity, box-shadow, background-color; } -.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link, -.newtab-cell:not([ignorehover]) .newtab-link:hover, +.newtab-cell:not([ignorehover]) > .newtab-site:hover, .newtab-site[dragged] { border: 2px solid white; box-shadow: 0 0 6px 2px #4cb1ff; @@ -130,8 +113,7 @@ /* LINKS */ .newtab-link { - border-radius: 10px; - overflow: hidden; + border-radius: 6px; } /* THUMBNAILS */ @@ -140,12 +122,11 @@ background-clip: padding-box; background-repeat: no-repeat; background-size: cover; - border-radius: 8px 8px 0px 0px; - height: 180px; + border-radius: inherit; transition: opacity 100ms ease-out; } -.newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content { +.newtab-site:hover .newtab-thumbnail.enhanced-content { opacity: 0; } @@ -158,24 +139,18 @@ } /* TITLES */ +#newtab-intro-what, .newtab-sponsored, -.newtab-title, -.newtab-suggested { +.newtab-title { color: #5c5c5c; } -.newtab-suggested[active] { - background-color: rgba(51, 51, 51, 0.95); - border: 0; - color: white; -} - .newtab-site:hover .newtab-title { color: #222; } .newtab-site[pinned] .newtab-title { - -moz-padding-start: 24px; + padding: 0 15px; } .newtab-site[pinned] .newtab-title::before { @@ -186,11 +161,9 @@ left: 0; position: absolute; width: 10px; - margin-left: 8px; - margin-top: 6px; } -.newtab-site[pinned] .newtab-title:-moz-dir(rtl)::before { +.newtab-site[pinned] .newtab-title:-moz-locale-dir(rtl)::before { left: auto; right: 0; } @@ -241,6 +214,7 @@ width: 16px; } +#newtab-intro-panel, .newtab-title { font-family: sans-serif; } diff --git a/arc-firefox-theme/chrome/browser/newtab/whimsycorn.png b/arc-firefox-theme/chrome/browser/newtab/whimsycorn.png deleted file mode 100644 index 5c5c2f4..0000000 Binary files a/arc-firefox-theme/chrome/browser/newtab/whimsycorn.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/panic-panel/header-small@2x.png b/arc-firefox-theme/chrome/browser/panic-panel/header-small@2x.png deleted file mode 100644 index ae445a4..0000000 Binary files a/arc-firefox-theme/chrome/browser/panic-panel/header-small@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/panic-panel/header@2x.png b/arc-firefox-theme/chrome/browser/panic-panel/header@2x.png deleted file mode 100644 index f137928..0000000 Binary files a/arc-firefox-theme/chrome/browser/panic-panel/header@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/panic-panel/icons@2x.png b/arc-firefox-theme/chrome/browser/panic-panel/icons@2x.png deleted file mode 100644 index 959ebf5..0000000 Binary files a/arc-firefox-theme/chrome/browser/panic-panel/icons@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css b/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css index 16d0aee..94549d8 100644 --- a/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css +++ b/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css @@ -2,16 +2,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/in-content/common.css"); +@import url("chrome://global/skin/inContentUI.css"); -#permissions-content { - padding-top: 48px; - -moz-padding-end: 0; /* no padding to move the scroll bar to the edge */ -} /* sites box */ #sites-box { + padding: 10px; width: 25em; } @@ -42,17 +39,13 @@ /* permissions box */ #permissions-box { - -moz-padding-start: 10px; -} - -#permissions-list { + padding-top: 10px; overflow-y: auto; - padding-top: 5px; - -moz-padding-end: 44px; } #site-description { font-size: 125%; + -moz-margin-start: 6px; /* to match button margin */ } #site-label { @@ -64,15 +57,7 @@ #defaults-description { font-size: 125%; font-weight: bold; -} - -#header-deck { - -moz-margin-end: 44px; -} - -#site-header, -#defaults-header { - margin-bottom: 1px; + -moz-margin-start: 6px; } .pref-item { @@ -94,9 +79,6 @@ .pref-icon[type="geo"] { list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -.pref-icon[type="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); -} .pref-icon[type="indexedDB"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } @@ -112,6 +94,9 @@ .pref-icon[type="plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginGeneric.png); } +.pref-icon[type="fullscreen"] { + list-style-image: url(chrome://global/skin/icons/question-64.png); +} .pref-icon[type="camera"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } @@ -121,16 +106,11 @@ .pref-title { font-size: 125%; - -moz-margin-start: 4px; margin-bottom: 0; font-weight: bold; } .pref-menulist { - min-width: 10em; - } - -#cookies-label, -#passwords-label { - -moz-margin-start: 4px; /* align with the menulists */ + margin-left: 6px; + margin-right: 6px; } diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg b/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg index 2d0b671..b74eb6d 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg @@ -1,8 +1,7 @@ - - + - + - - + + - + - + - + - + - + - + - - + + diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css index c83e0eb..216826d 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css @@ -9,6 +9,7 @@ padding: 0; font: message-box; font-size: 1.25rem; + line-height: 22px; } * { @@ -149,11 +150,6 @@ treecol { margin-right: 4px !important; } -#defaultFontSizeLabel { - /* !important needed to override common !important rule */ - -moz-margin-start: 4px !important; -} - /* Applications Pane Styles */ #applicationsContent { @@ -194,23 +190,15 @@ treecol { -moz-margin-end: 8px !important; } -/* Privacy pane */ - -#doNotTrackInfo, -#trackingProtectionPBMLearnMore, -#trackingProtectionLearnMore { - -moz-margin-start: 1.5em !important; - margin-top: 0; -} - /* Collapse the non-active vboxes in decks to use only the height the active vbox needs */ #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, #historyPane:not([selectedIndex="2"]) > #historyCustomPane, #weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount, #weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate, -#weavePrefsDeck:not([selectedIndex="3"]) > #noFxaAccount, -#weavePrefsDeck:not([selectedIndex="4"]) > #hasFxaAccount, +#weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus, +#weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount, +#weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount, #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected { visibility: collapse; @@ -222,13 +210,19 @@ description > html|a { cursor: pointer; } +#noFxaAccount { + /* Overriding the margins from the base preferences.css theme file. + These overrides can be simplified by fixing bug 1027174 */ + margin: 0; +} + #weavePrefsDeck > vbox > label, #weavePrefsDeck > vbox > groupbox, #weavePrefsDeck > vbox > description, #weavePrefsDeck > vbox > #pairDevice > label, #weavePrefsDeck > #needsUpdate > hbox > #loginError, -#weavePrefsDeck > #hasFxaAccount > vbox > label, -#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label { +#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label, +#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label { /* no margin-start for elements at the begin of a line */ -moz-margin-start: 0; } @@ -252,8 +246,16 @@ description > html|a { -moz-margin-start: 33px; } -.text-link { - margin-bottom: 0; +#trackingProtectionImage { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); +} + +@media (min-resolution: 2dppx) { + #trackingProtectionImage { + list-style-image: url(chrome://browser/skin/bad-content-blocked-16@2x.png); + } } #showUpdateHistory { @@ -299,17 +301,15 @@ description > html|a { #dialogTitle { text-align: center; - -moz-user-select: none; } .close-icon { background-color: transparent !important; border: none; box-shadow: none; + height: 18px; padding: 0; - height: auto; - min-height: 16px; - min-width: 0; + min-width: 18px; } #dialogBox > .groupbox-body { @@ -366,180 +366,8 @@ description > html|a { to { opacity: 1; } } -/** - * Sync - */ - -#fxaProfileImage { - max-width: 60px; - border-radius: 50%; - list-style-image: url(chrome://browser/skin/fxa/default-avatar.png); - margin-inline-end: 15px; -} - -#fxaProfileImage.actionable { - cursor: pointer; -} - -#fxaProfileImage.actionable:hover { - box-shadow: 0px 0px 0px 1px #0095DD; -} - -#fxaProfileImage.actionable:hover:active { - box-shadow: 0px 0px 0px 1px #ff9500; -} - -#noFxaAccount { - /* Overriding the margins from the base preferences.css theme file. - These overrides can be simplified by fixing bug 1027174 */ - margin: 0; - padding-top: 15px; -} - -#fxaContentWrapper { - -moz-box-flex: 1; -} - -#noFxaGroup { - -moz-box-flex: 1; - margin: 0; -} - -#fxaContentWrapper { - padding-right: 15px; -} - -#noFxaGroup > vbox, -#fxaGroup { - -moz-box-align: start; -} - -#fxaSyncEngines > vbox:first-child { - margin-right: 80px; -} - -#fxaSyncComputerName { - margin-inline-start: 0px; - -moz-box-flex: 1; -} - -#tosPP-small-ToS { - margin-bottom: 14px; -} - -#noFxaCaption { - font-weight: bold; - margin-bottom: 11px; -} - -.fxaSyncIllustration { - margin-top: 35px; -} - -#syncOptions caption { - margin-bottom: 11px; -} - -#fxaDeviceName { - margin-bottom: 27.5px; -} - -#noFxaDescription { - margin-bottom: 20px !important; -} - -.separator { - border-bottom: 1px solid var(--in-content-header-border-color); -} - -.fxaAccountBox { - border: 1px solid #D1D2D3; - border-radius: 5px; - padding: 14px 20px 14px 14px; -} - -#signedOutAccountBoxTitle { - margin-inline-start: 6px !important; - font-weight: bold; -} - -.fxaAccountBoxButtons { - margin-bottom: 0 !important; - margin-top: 11px; -} - -.fxaAccountBoxButtons > button { - padding-left: 11px; - padding-right: 11px; -} - -.fxaSyncIllustration { - width: 231px; - list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png) -} - -#fxaEmailAddress1, -#fxaEmailAddress2, -#fxaEmailAddress3 { - word-break: break-all; -} - -.fxaFirefoxLogo { - list-style-image: url(chrome://browser/skin/fxa/logo.png); - max-width: 64px; - margin-inline-end: 14px; -} - -.fxaMobilePromo { - margin-top: 14px; - margin-bottom: 41px; -} - -#fxaLoginRejectedWarning { - list-style-image: url(chrome://browser/skin/warning.svg); - filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); - margin: 4px 8px 0px 0px; -} - -#syncOptions { - margin-bottom: 27.5px; -} - -.androidLogo { - list-style-image: url(chrome://browser/skin/fxa/android.png); - max-width: 24px; - position: relative; - top: 8px; - margin: 0px; - margin-inline-end: 5px; -} - -.androidLink { - margin: 0; -} - -#tosPP-small { - margin-bottom: 20px; -} - -.androidAttribution { - font-size: 12px; - color: #D1D2D3; -} - -@media (min-resolution: 1.1dppx) { - .fxaSyncIllustration { - list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png) - } - .fxaFirefoxLogo { - list-style-image: url(chrome://browser/skin/fxa/logo@2x.png); - } - .androidLogo { - list-style-image: url(chrome://browser/skin/fxa/android@2x.png); - } - #fxaProfileImage { - list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png); - } +spinbuttons { + -moz-appearance: none; } .treecol-sortdirection { diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png b/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png deleted file mode 100755 index 8706928..0000000 Binary files a/arc-firefox-theme/chrome/browser/privatebrowsing/attention.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png deleted file mode 100755 index 5b32888..0000000 Binary files a/arc-firefox-theme/chrome/browser/privatebrowsing/attention@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/check.png b/arc-firefox-theme/chrome/browser/privatebrowsing/check.png deleted file mode 100755 index 59ca51b..0000000 Binary files a/arc-firefox-theme/chrome/browser/privatebrowsing/check.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png deleted file mode 100755 index 031685c..0000000 Binary files a/arc-firefox-theme/chrome/browser/privatebrowsing/check@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg b/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg deleted file mode 100755 index 655445e..0000000 --- a/arc-firefox-theme/chrome/browser/privatebrowsing/mask.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png deleted file mode 100755 index 2ddcf34..0000000 Binary files a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png b/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png deleted file mode 100755 index 72a0b82..0000000 Binary files a/arc-firefox-theme/chrome/browser/privatebrowsing/shield-page@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/reader-tour.png b/arc-firefox-theme/chrome/browser/reader-tour.png index be346b3..8e557e0 100644 Binary files a/arc-firefox-theme/chrome/browser/reader-tour.png and b/arc-firefox-theme/chrome/browser/reader-tour.png differ diff --git a/arc-firefox-theme/chrome/browser/reader-tour@2x.png b/arc-firefox-theme/chrome/browser/reader-tour@2x.png deleted file mode 100644 index 1a60d93..0000000 Binary files a/arc-firefox-theme/chrome/browser/reader-tour@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/readerMode.svg b/arc-firefox-theme/chrome/browser/readerMode.svg index 9293d1d..3d024ea 100644 --- a/arc-firefox-theme/chrome/browser/readerMode.svg +++ b/arc-firefox-theme/chrome/browser/readerMode.svg @@ -1,29 +1,34 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/readinglist/icons.svg b/arc-firefox-theme/chrome/browser/readinglist/icons.svg new file mode 100644 index 0000000..6aa0159 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/readinglist/icons.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg b/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg new file mode 100644 index 0000000..0a24a67 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/readinglist/sidebar.css b/arc-firefox-theme/chrome/browser/readinglist/sidebar.css new file mode 100644 index 0000000..27fc12b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/readinglist/sidebar.css @@ -0,0 +1,148 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + + +:root, body { + overflow-x: hidden; +} + +body { + margin: 0; + font: message-box; + color: #333333; + -moz-user-select: none; + overflow: hidden; +} + +#emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.item { + display: flex; + flex-flow: row; + cursor: pointer; + padding: 6px; + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.active { + background: #FEFEFE; +} + +.item.selected { + background: #FDFDFD; +} + +.item-thumb-container { + min-width: 64px; + max-width: 64px; + min-height: 40px; + max-height: 40px; + border: 1px solid white; + box-shadow: 0px 1px 2px rgba(0,0,0,.35); + margin: 5px; + background-color: #ebebeb; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-image: url("chrome://branding/content/silhouette-40.svg"); +} + +.item-thumb-container.preview-available { + background-color: #fff; + background-size: cover; +} + +.item-summary-container { + display: flex; + flex-flow: column; + -moz-padding-start: 4px; + overflow: hidden; + flex-grow: 1; +} + +.item-title-lines { + display: flex; +} + +.item-title { + overflow: hidden; + max-height: 2.8em; + line-height: 1.4; + flex-grow: 1; +} + +.item-domain { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-height: 1.4em; + color: #0095DD; +} + +.item:hover .item-domain { + color: #008ACB; +} + +.item:not(:hover):not(.selected) .remove-button { + visibility: hidden; +} + +.remove-button { + padding: 0; + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + background-size: contain; + background-color: transparent; + border-width: 0; +} + +.item.visible { + opacity: 1; + max-height: 80px; + transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms; +} + +html { + border: 1px solid ThreeDShadow; + background-color: -moz-Field; + color: -moz-FieldText; + box-sizing: border-box; +} + +.item { + -moz-padding-end: 0; +} + +.item.active { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +.item-title { + margin: 1px 0 0; +} + +.item-title, .item-domain { + -moz-margin-end: 6px; +} + +.remove-button { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0); +} + +.remove-button:hover { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16); +} + +.remove-button:hover:active { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); +} diff --git a/arc-firefox-theme/chrome/browser/reload-stop-go@2x.png b/arc-firefox-theme/chrome/browser/reload-stop-go@2x.png deleted file mode 100644 index 38b27bf..0000000 Binary files a/arc-firefox-theme/chrome/browser/reload-stop-go@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 4d2fecb..ae3752e 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -35,10 +35,6 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); --toolbarbutton-combined-backgroundimage: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); --verified-identity-box-backgroundcolor: transparent; - - --panel-separator-color: ThreeDShadow; - - --urlbar-separator-color: hsla(0,0%,16%,.2); } #menubar-items { @@ -89,8 +85,7 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid $header_border !important; background-clip: padding-box; - /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ - margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); + margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; @@ -354,7 +349,7 @@ menuitem.bookmark-item { } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } @@ -549,10 +544,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#panelMenu_pocket, -#menu_pocket, -#BMB_pocket { - list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } #menu_openDownloads { @@ -610,7 +604,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -620,25 +614,29 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-badge-container > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } +toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarbutton[type="socialmark"] > .toolbarbutton-icon { + max-width: 32px !important; +} + /* Help SDK icons fit: */ -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { width: 16px; } -:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ width: 32px; } #nav-bar #PanelUI-menu-button { - -moz-padding-start: 5px; + -moz-padding-start: 7px; -moz-padding-end: 5px; } @@ -653,7 +651,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -681,7 +679,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -947,12 +945,14 @@ list-style-image: url("chrome://browser/skin/custom_images/toolbar-icons-active. -moz-image-region: rect(0, 270px, 18px, 252px); } -#sync-button[cui-areatype="toolbar"][status="active"] { +#sync-button[cui-areatype="toolbar"][status="active"], +#sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png"); -moz-image-region: rect(0, 18px, 18px, 0px); } -toolbar[brighttext] #sync-button[status="active"] { +toolbar[brighttext] #sync-button[status="active"], +toolbar[brighttext] #sync-button[status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png"); } @@ -1012,15 +1012,6 @@ toolbar[brighttext] #sync-button[status="active"] { -moz-image-region: rect(0, 486px, 18px, 468px); } -#PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; - -moz-image-region: auto !important; -} - -toolbar[brighttext] #PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; -} - #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -1077,582 +1068,294 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button { + +#loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button { +toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"], -#loop-button[disabled="true"] { +#loop-button[state="disabled"] > .toolbarbutton-badge-container, +#loop-button[disabled="true"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] { +#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] { +#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] { +#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 738px, 18px, 720px); } - -#pocket-button[cui-areatype="toolbar"] { - -moz-image-region: rect(0, 774px, 18px, 756px); -} - -#pocket-button[cui-areatype="toolbar"][open] { - -moz-image-region: rect(18px, 774px, 36px, 756px); -} - /* Menu panel and palette styles */ +/* Note that this file isn't used for HiDPI on OS X. */ :root { --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } -@media not all and (min-resolution: 1.1dppx) { - - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image); - } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); - } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); - } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); - } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); - } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); - } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); - } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); - } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 384px, 32px, 352px); - } - - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); - -moz-image-region: rect(0px, 32px, 32px, 0px); - } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); - } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); - } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); - } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); - } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); - } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); - } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); - } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); - } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); - } - - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 608px, 32px, 576px); - } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); - } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); - } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); - } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); - } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); - } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); - } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); - } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); - } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); - } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); - } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); - } - - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 928px, 32px, 896px); - } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); - } - - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 992px, 32px, 960px); - } - - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 992px, 64px, 960px); - } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); - } - - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel.png); - -moz-image-region: rect(0, 32px, 32px, 0); - } - - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 32px, 32px, 0) !important; - } - - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 64px, 32px, 32px); - } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 96px, 32px, 64px); - } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 128px, 32px, 96px); - } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) { - -moz-image-region: rect(0, 160px, 32px, 128px); - } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 192px, 32px, 160px); - } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) { - -moz-image-region: rect(0, 224px, 32px, 192px); - } - - /* Wide panel control icons */ - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); - } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); - } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); - } - - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); - } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); - } - - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); - } - - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); - } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button) { + list-style-image: var(--menupanel-list-style-image); } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image-2x); - } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); - } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); - } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); +} - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); - } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); +} - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); - } +#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 192px, 64px, 160px); +} - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); - } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); +} - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); - } +#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 224px, 64px, 192px); +} - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); - } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); +} - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); - } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); +} - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 768px, 64px, 704px); - } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); +} - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png); - -moz-image-region: rect(0px, 64px, 64px, 0px); - } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); +} - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); - } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 384px, 32px, 352px); +} - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); - } +#sync-button[cui-areatype="menu-panel"][status="active"] { + list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); +} - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); - } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); +} - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); - } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); +} - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); - } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); +} - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); - } +#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 480px, 64px, 448px); +} - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); - } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); +} - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); - } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); +} - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 1984px, 64px, 1920px); - } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); +} - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1984px, 128px, 1920px); - } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); +} - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); - -moz-image-region: rect(0, 64px, 64px, 0); - } +#tabview-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #tabview-button { + -moz-image-region: rect(0px, 608px, 32px, 576px); +} - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 64px, 64px, 0) !important; - } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); +} - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 128px, 64px, 64px); - } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); +} - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 192px, 64px, 128px); - } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); +} - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 256px, 64px, 192px); - } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); +} - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) { - -moz-image-region: rect(0, 320px, 64px, 256px); - } +#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 736px, 64px, 704px); +} - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 384px, 64px, 320px); - } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); +} - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) { - -moz-image-region: rect(0, 448px, 64px, 384px); - } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); +} - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); - } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); +} - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); - } +#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 864px, 64px, 832px); +} - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 1216px, 64px, 1152px); - } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); +} - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); - } +#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 896px, 64px, 864px); +} - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); - } +#web-apps-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #web-apps-button { + -moz-image-region: rect(0, 928px, 32px, 896px); +} - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); - } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); +} - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); - } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); +} - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); - } +#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/menuPanel.png); + -moz-image-region: rect(0, 32px, 32px, 0); +} - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); - } +/* Make sure that the state icons are not shown in the customization palette. */ +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 32px, 32px, 0) !important; +} - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); - } +#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, +#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 64px, 32px, 32px); +} - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); - } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 96px, 32px, 64px); +} - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); - } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 128px, 32px, 96px); +} - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); - } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 160px, 32px, 128px); +} - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); - } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 192px, 32px, 160px); +} - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 1856px, 64px, 1792px); - } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 224px, 32px, 192px); +} - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); - } +/* Wide panel control icons */ - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: var(--menupanel-small-list-style-image); +} - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); - } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); +} - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); - } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); +} - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); - } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); +} - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); - } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.png); + -moz-image-region: rect(0px, 96px, 16px, 80px); } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, @@ -1699,7 +1402,7 @@ toolbar[brighttext] #loop-button { #urlbar, .searchbar-textbox { -moz-appearance: none; - padding: 2px 3px; + padding: 3px; border-radius: 3px; margin: 0 3px; @include entry(normal); @@ -1750,7 +1453,7 @@ toolbar[brighttext] #loop-button { //window:not([chromehidden~="toolbar"]) #urlbar-wrapper { // clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path"); -// margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); +// -moz-margin-start: -5px; //} //window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl), @@ -1771,29 +1474,6 @@ toolbar[brighttext] #loop-button { // padding: 0 3px; //} -#urlbar-search-footer { - border-top: 1px solid hsla(210,4%,10%,.14); - background-color: hsla(210,4%,10%,.07); -} - -#urlbar-search-settings { - -moz-appearance: none; - -moz-user-focus: ignore; - color: inherit; - margin: 0; - border: 0; - padding: 8px 20px; - background: transparent; -} - -#urlbar-search-settings:hover { - background-color: hsla(210,4%,10%,.07); -} - -#urlbar-search-settings:hover:active { - background-color: hsla(210,4%,10%,.12); -} - #urlbar-search-splitter { -moz-appearance: none; width: 8px; @@ -1818,80 +1498,70 @@ toolbar[brighttext] #loop-button { color: GrayText; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid hsla(210, 4%, 10%, 0.14); - background-color: hsla(210, 4%, 10%, 0.07); - padding: 6px 0; - -moz-padding-start: 44px; - -moz-padding-end: 6px; - background-image: url("chrome://browser/skin/info.svg"); - background-clip: padding-box; - background-position: 20px center; - background-repeat: no-repeat; - background-size: 16px 16px; +#search-container { + min-width: calc(54px + 11ch); } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { - background-position: right 20px center; -} +/* identity box */ -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { - margin: 0; - padding: 0; +#identity-box { + padding: 1px; + font-size: .9em; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { - -moz-margin-start: 0; +#identity-box:-moz-locale-dir(ltr) { + border-top-left-radius: 1.5px; + border-bottom-left-radius: 1.5px; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - -moz-appearance: none; - -moz-user-focus: ignore; - min-width: 80px; - border-radius: 3px; - padding: 4px 16px; - margin: 0; - -moz-margin-start: 10px; +#identity-box:-moz-locale-dir(rtl) { + border-top-right-radius: 1.5px; + border-bottom-right-radius: 1.5px; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { - color: hsl(210, 0%, 38%); - background-color: hsl(210, 0%, 88%); - border: 1px solid hsl(210, 0%, 82%); +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { - background-color: hsl(210, 0%, 84%); +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { - color: white; - background-color: hsl(93, 82%, 44%); - border: 1px solid hsl(93, 82%, 44%); +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { + transition: padding-left, padding-right; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { - background-color: hsl(93, 82%, 40%); -} +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { +// padding-left: 5px; +//} -#search-container { - min-width: calc(54px + 11ch); -} +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { +// padding-right: 5px; +//} -/* identity box */ +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { +// /* forward button hiding is delayed when hovered */ +// transition-delay: 100s; +//} -#identity-box:-moz-locale-dir(ltr) { - border-top-left-radius: 1.5px; - border-bottom-left-radius: 1.5px; -} +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { +// /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ +// padding-left: 5.01px; +//} -#identity-box:-moz-locale-dir(rtl) { - border-top-right-radius: 1.5px; - border-bottom-right-radius: 1.5px; +//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { +// /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ +// padding-right: 5.01px; +//} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + -moz-margin-end: 4px; } -#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { - background-color: var(--identity-box-verified-background-color); +#identity-box.verifiedIdentity:not(:-moz-lwtheme) { + background-color: var(--verified-identity-box-backgroundcolor); } #identity-box:-moz-focusring { @@ -1899,187 +1569,239 @@ toolbar[brighttext] #loop-button { outline-offset: -3px; } +#identity-icon-labels { + -moz-padding-start: 2px; + -moz-padding-end: 5px; +} -#identity-box { -// --identity-box-selected-background-color: rgb(231,230,230); + +:root { --identity-box-verified-color: hsl(92,100%,30%); + --identity-box-verified-background-image: linear-gradient(hsla(92,81%,16%,0), + hsla(92,81%,16%,.2) 35%, + hsla(92,81%,16%,.2) 65%, + hsla(92,81%,16%,0)); --identity-box-chrome-color: rgb(229,115,0); + --identity-box-chrome-background-image: linear-gradient(rgba(229,114,0,0), + rgba(229,114,0,.5) 35%, + rgba(229,114,0,.5) 65%, + rgba(229,114,0,0)); +} - border-inline-end: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, - var(--urlbar-separator-color) 15%, - var(--urlbar-separator-color) 85%, - transparent 85%); - border-image-slice: 1; - font-size: .9em; - padding: 3px 5px 3px 3px; - margin-inline-end: 4px; - overflow: hidden; -// /* The latter two properties have a transition to handle the delayed hiding of -// the forward button when hovered. */ -// transition: background-color 150ms ease, padding-left, padding-right; +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + background-position: right; + background-size: 1px; + background-repeat: no-repeat; } -//#identity-box:hover, -//#identity-box[open=true] { -// background-color: var(--identity-box-selected-background-color); -// border-image-source: none; -//} +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { + background-position: left; +} #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { color: var(--identity-box-verified-color); + background-image: var(--identity-box-verified-background-image); } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { color: var(--identity-box-chrome-color); + background-image: var(--identity-box-chrome-background-image); } -#identity-icon-labels { - padding-inline-start: 2px; +/* page proxy icon */ + +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } -#notification-popup-box:not([hidden]) + #identity-box { - padding-inline-start: 5px; - border-radius: 0; +.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.png); } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; +.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { -// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4px); -//} +.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); +} -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { -// /* Forward button hiding is delayed when hovered, so we should use the same -// delay for the identity box. We handle both horizontal paddings (for LTR and -// RTL), the latter two delays here are for padding-left and padding-right. */ -// transition-delay: 0s, 100s, 100s; -//} +.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); +} -//window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box { -// /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ -// padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4.01px); -//} +.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); +} -/* TRACKING PROTECTION ICON */ +.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); +} -#tracking-protection-icon { - width: 16px; - height: 16px; - margin-inline-start: 0; - margin-inline-end: 2px; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); +#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { + list-style-image: url("chrome://branding/content/icon64.png"); } -#tracking-protection-icon[animate] { - transition: margin-left 200ms ease-out, margin-right 200ms ease-out; +#identity-popup-brandName { + font-weight: bold; + font-size: 1.25em; + margin-top: .5em; + margin-bottom: .5em; } -#tracking-protection-icon:not([state]) { - margin-inline-start: -18px; - pointer-events: none; - opacity: 0; - /* Only animate the shield in, when it disappears hide it immediately. */ - transition: none; +#identity-popup-content-box { + max-width: 50ch; } -#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { - visibility: collapse; +#page-proxy-favicon { + margin-top: 1px; + margin-bottom: 1px; + -moz-margin-start: 3px; + -moz-margin-end: 1px; + -moz-image-region: rect(0, 16px, 16px, 0); } -/* MAIN IDENTITY ICON */ +#identity-box:hover > #page-proxy-favicon { + -moz-image-region: rect(0, 32px, 16px, 16px); +} -#page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); +#identity-box:hover:active > #page-proxy-favicon, +#identity-box[open=true] > #page-proxy-favicon { + -moz-image-region: rect(0, 48px, 16px, 32px); } -.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +/* Identity popup icons */ +#identity-popup-icon { + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); } -.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-secure.svg); +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(64px, 64px, 128px, 0px); } -.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(128px, 64px, 192px, 0px); } -.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); +/* Identity popup body text */ +.identity-popup-description { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; } -.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); +.identity-popup-label { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; +#identity-popup-content-host , +#identity-popup-content-owner { + font-weight: bold; + max-width: 300px; } -#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { - -moz-image-region: inherit; - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; - height: 16px; - opacity: 1; +#identity-popup-content-host , +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { + font-size: 140%; } +#identity-popup-content-owner { + margin-bottom: 0 !important; +} -.popup-notification-icon { - width: 64px; - height: 64px; - -moz-margin-end: 10px; +#identity-popup-content-verifier { + margin: 4px 0 2px; } -.popup-notification-icon[popupid="geolocation"] { - list-style-image: url(chrome://browser/skin/Geolocation-64.png); +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { + margin-top: 10px; + -moz-margin-start: -18px; } -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/Secure.png"); } -.popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-install-blocked"], -.popup-notification-icon[popupid="addon-install-origin-blocked"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); +#identity-popup-help-icon { + -moz-appearance: none; + margin-left: 0px; + border: none; + background: none; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/question-16.png"); + cursor: pointer; } -.popup-notification-icon[popupid="addon-progress"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); +#identity-popup-help-icon > .button-box > .button-text { + display: none; } -.popup-notification-icon[popupid="addon-install-failed"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); +#identity-popup-help-icon > .button-box > .button-icon { + height: 16px; + width: 16px; } -.popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); +#identity-popup-help-icon:-moz-focusring { + outline: 1px dotted; + outline-offset: 1px; } -#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } -.popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); +#identity-popup-container { + min-width: 280px; + padding: 10px; +} + +#identity-popup-button-container { + background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent); + padding: 10px; + margin-top: 5px; +} + +/* Notification popup */ +#notification-popup { + min-width: 280px; +} + +.popup-notification-icon { + width: 64px; + height: 64px; + -moz-margin-end: 10px; +} + +.popup-notification-icon[popupid="geolocation"] { + list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -.popup-notification-icon[popupid="addon-install-restart"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); +.popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-progress"], +.popup-notification-icon[popupid="addon-install-cancelled"], +.popup-notification-icon[popupid="addon-install-blocked"], +.popup-notification-icon[popupid="addon-install-origin-blocked"], +.popup-notification-icon[popupid="addon-install-failed"], +.popup-notification-icon[popupid="addon-install-complete"] { + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); + width: 32px; + height: 32px; } .popup-notification-icon[popupid="click-to-play-plugins"] { @@ -2090,13 +1812,37 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/notification-64.png); } +.addon-progress-description { + width: 350px; + max-width: 350px; +} + +.popup-progress-label, +.popup-progress-meter { + -moz-margin-start: 0; + -moz-margin-end: 0; +} + +.popup-progress-cancel { + -moz-appearance: none; + background: transparent; + border: none; + padding: 0; + margin: 0; + -moz-margin-start: 5px; + min-height: 0; + min-width: 0; + list-style-image: url("moz-icon://stock/gtk-cancel?size=menu"); +} + .popup-notification-icon[popupid="indexedDB-permissions-prompt"], .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } -.popup-notification-icon[popupid="password"] { +.popup-notification-icon[popupid="password-save"], +.popup-notification-icon[popupid="password-change"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } @@ -2105,6 +1851,15 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://global/skin/icons/webapps-64.png); } +.popup-notification-icon[popupid="bad-content"] { + list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); +} + +.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], +.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); +} + .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); @@ -2142,22 +1897,34 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box // padding-left: 7px; //} +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; +} + #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; height: 16px; margin: 0 2px; } +.notification-anchor-icon:-moz-focusring { + outline: 1px dotted -moz-DialogText; +} + +.default-notification-icon, +#default-notification-icon { + list-style-image: url(chrome://global/skin/icons/information-16.png); +} + .identity-notification-icon, #identity-notification-icon { list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); - /* XXX: need HiDPI version */ } .geo-notification-icon, @@ -2165,20 +1932,8 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Geolocation-16.png); } -#push-notification-icon { - list-style-image: url(chrome://browser/skin/Push-16.png); -} - #addons-notification-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); -} - -#addons-notification-icon:hover { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); -} - -#addons-notification-icon:hover:active { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } .indexedDB-notification-icon, @@ -2190,13 +1945,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } -#login-fill-notification-icon { - /* Temporary icon until the capture and fill doorhangers are unified. */ - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); - transform: scaleX(-1); -} - -.webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -2204,11 +1952,9 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #plugins-notification-icon { list-style-image: url(chrome://browser/skin/notification-pluginNormal.png); } - #plugins-notification-icon.plugin-hidden { list-style-image: url(chrome://browser/skin/notification-pluginAlert.png); } - #plugins-notification-icon.plugin-blocked { list-style-image: url(chrome://browser/skin/notification-pluginBlocked.png); } @@ -2245,166 +1991,56 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } } -.webRTC-shareDevices-notification-icon, -#webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); -} - -.webRTC-sharingDevices-notification-icon, -#webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); -} - -.webRTC-shareMicrophone-notification-icon, -#webRTC-shareMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png); -} - -.webRTC-sharingMicrophone-notification-icon, -#webRTC-sharingMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png); -} - -.webRTC-shareScreen-notification-icon, -#webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); -} - -.webRTC-sharingScreen-notification-icon, -#webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png); -} - -.web-notifications-notification-icon, -#web-notifications-notification-icon { - list-style-image: url(chrome://browser/skin/notification-16.png); -} - -.pointerLock-notification-icon, -#pointerLock-notification-icon { - list-style-image: url(chrome://browser/skin/pointerLock-16.png); -} - -.translate-notification-icon, -#translate-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -.translated-notification-icon, -#translated-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url(chrome://browser/skin/social/services-64.png); -} -#servicesInstall-notification-icon { - list-style-image: url(chrome://browser/skin/social/services-16.png); -} - -/* EME notifications */ - -.popup-notification-icon[popupid="drmContentPlaying"], -#eme-notification-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); -} - -#eme-notification-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); -} - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; -} - -@keyframes emeTeachingMoment { - 0% {transform: translateX(0); } - 25% {transform: translateX(3px) } - 75% {transform: translateX(-3px) } - 100% { transform: translateX(0); } -} - -/* HiDPI notification icons */ -@media (min-resolution: 1.1dppx) { - #notification-popup-box { - //border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill; - } - - .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); - } - - .webRTC-shareDevices-notification-icon, - #webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); - } - - .webRTC-sharingDevices-notification-icon, - #webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); - } - - .webRTC-shareMicrophone-notification-icon, - #webRTC-shareMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); - } - - .webRTC-sharingMicrophone-notification-icon, - #webRTC-sharingMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); - } - - .webRTC-shareScreen-notification-icon, - #webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); - } - - .webRTC-sharingScreen-notification-icon, - #webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); - } +.bad-content-blocked-notification-icon, +#bad-content-blocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); +} - .popup-notification-icon[popupid="webRTC-sharingDevices"], - .popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); - } +.bad-content-unblocked-notification-icon, +#bad-content-unblocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); +} - .popup-notification-icon[popupid="webRTC-sharingMicrophone"], - .popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); - } +.webRTC-shareDevices-notification-icon, +#webRTC-shareDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); +} - .popup-notification-icon[popupid="webRTC-sharingScreen"], - .popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); - } +.webRTC-sharingDevices-notification-icon, +#webRTC-sharingDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16.png); +} +.webRTC-shareMicrophone-notification-icon, +#webRTC-shareMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16.png); } -.popup-notification-body[popupid="addon-progress"], -.popup-notification-body[popupid="addon-install-confirmation"] { - width: 28em; - max-width: 28em; +.webRTC-sharingMicrophone-notification-icon, +#webRTC-sharingMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16.png); } -.addon-install-confirmation-name { - font-weight: bold; +.webRTC-shareScreen-notification-icon, +#webRTC-shareScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); } -/* Notification icon box */ -#notification-popup-box { - border-radius: 2.5px 0 0 2.5px; +.webRTC-sharingScreen-notification-icon, +#webRTC-sharingScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png); } -.notification-anchor-icon:-moz-focusring { - outline: 1px dotted -moz-DialogText; +.web-notifications-notification-icon, +#web-notifications-notification-icon { + list-style-image: url(chrome://browser/skin/notification-16.png); } -.indexedDB-notification-icon, -#indexedDB-notification-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); +#pointerLock-notification-icon { + list-style-image: url(chrome://browser/skin/pointerLock-16.png); +} +#pointerLock-cancel { + margin: 0px; } /* Translation infobar */ @@ -2432,10 +2068,6 @@ notification[value="translation"][state="translating"] .messageImage { } } -notification[value="translation"] hbox[anonid="details"] { - overflow: hidden; -} - notification[value="translation"] button, notification[value="translation"] menulist { -moz-appearance: none; @@ -2570,6 +2202,18 @@ notification[value="translation"] menulist > .menulist-dropmarker { display: block; } +.translate-notification-icon, +#translate-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +.translated-notification-icon, +#translated-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + /* Loop/ Hello browser styles */ notification[value="loop-sharing-notification"] .button-menubutton-button { @@ -2613,9 +2257,7 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { +.ac-comment { font-size: 1.05em; } @@ -2656,19 +2298,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /* Combined go/reload/stop button in location bar */ -#urlbar-go-button, -#urlbar-reload-button, -#urlbar-stop-button { +#urlbar > toolbarbutton { -moz-appearance: none; + padding: 0 2px; list-style-image: url("chrome://browser/skin/reload-stop-go.png"); - padding: 0 4px 0 6px; - margin-inline-start: 2px; - border-inline-start: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, - var(--urlbar-separator-color) 15%, - var(--urlbar-separator-color) 85%, - transparent 85%); - border-image-slice: 1; } #urlbar-reload-button { @@ -2676,10 +2309,12 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-reload-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { + background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } @@ -2692,10 +2327,12 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-go-button:hover { + background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { + background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } @@ -2708,66 +2345,53 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-stop-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { + background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } -@media (min-resolution: 1.1dppx) { - #urlbar-go-button, - #urlbar-reload-button, - #urlbar-stop-button { - list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); - } - - #urlbar-go-button > .toolbarbutton-icon, - #urlbar-reload-button > .toolbarbutton-icon, - #urlbar-stop-button > .toolbarbutton-icon { - width: 14px; - } - - #urlbar-go-button { - -moz-image-region: rect(0, 84px, 28px, 56px); - } - - #urlbar-go-button:hover { - -moz-image-region: rect(28px, 84px, 56px, 56px); - } +/* Popup blocker button */ +#page-report-button { + list-style-image: url("chrome://browser/skin/Info.png"); +} - #urlbar-go-button:hover:active { - -moz-image-region: rect(56px, 84px, 84px, 56px); - } +/* Reading List button */ - #urlbar-reload-button { - -moz-image-region: rect(0, 28px, 28px, 0); - } +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; +} - #urlbar-reload-button:not([disabled]):hover { - -moz-image-region: rect(28px, 28px, 56px, 0); - } +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; +} - #urlbar-reload-button:not([disabled]):hover:active { - -moz-image-region: rect(56px, 28px, 84px, 0); - } +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); +} - #urlbar-stop-button { - -moz-image-region: rect(0, 56px, 28px, 28px); - } +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); +} - #urlbar-stop-button:not([disabled]):hover { - -moz-image-region: rect(28px, 56px, 56px, 28px); - } +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); +} - #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); - } +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } -/* Popup blocker button */ -#page-report-button { - list-style-image: url("chrome://browser/skin/Info.png"); +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } /* Reader mode button */ @@ -3025,12 +2649,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- :root { --tab-toolbar-navbar-overlap: 1px; - --navbar-tab-toolbar-highlight-overlap: 1px; --tab-min-height: 31px; } -#TabsToolbar { - --tab-stroke-background-size: auto 100%; -} /* image preloading hack */ @@ -3063,6 +2683,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-box-align: stretch; } +.tabbrowser-tab[remote] { + text-decoration: underline; +} + //Selected tab color .tabbrowser-tab[selected="true"], .tabbrowser-tab[selected="true"]:hover, @@ -3071,7 +2695,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -3095,7 +2719,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, -.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -3114,49 +2737,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-icon-overlay { width: 16px; height: 16px; - margin-top: -12px; + margin-top: 10px; -moz-margin-start: -16px; - position: relative; + display: none; } .tab-icon-overlay[crashed] { + display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]) { - border-radius: 8px; -} - -.tab-icon-overlay[soundplaying]:hover, -.tab-icon-overlay[muted]:not([crashed]):hover { - background-color: white; -} - -.tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio-small.svg#tab-audio"); -} - -.tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio-small.svg#tab-audio-muted"); -} - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio-small.svg#tab-audio"); -} - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio-small.svg#tab-audio-muted"); -} - -//#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); -//} - -//#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); -//} - .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -3176,85 +2766,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } -.tab-icon-sound { - -moz-margin-start: 4px; - width: 16px; - height: 16px; - padding: 0; -} - -.tab-icon-sound[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab"); -} - -.tab-icon-sound[soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-hover"); -} - -.tab-icon-sound[soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-pressed"); -} - -.tab-icon-sound[muted] { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-muted"); -} - -.tab-icon-sound[muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); -} - -.tab-icon-sound[muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); -} - -.tab-icon-sound[visuallyselected=true][soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio"); -} - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-hover"); -} - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-pressed"); -} - -.tab-icon-sound[visuallyselected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted"); -} - -.tab-icon-sound[visuallyselected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted-hover"); -} - -.tab-icon-sound[visuallyselected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted-pressed"); -} - -//#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white"); -//} - -//#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover"); -//} - -//#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed"); -//} - -//#TabsToolbar[brighttext] .tab-icon-sound[muted] { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white"); -//} - -//#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover"); -//} - -//#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { -// list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed"); -//} - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -3273,7 +2784,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-overflow-indicator.png); background-size: 100% 100%; width: 14px; - margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); + margin-bottom: var(--tab-toolbar-navbar-overlap); pointer-events: none; position: relative; z-index: 3; /* the selected tab's z-index + 1 */ @@ -3304,17 +2815,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -3336,8 +2847,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ -moz-margin-start: -30px; background-size: 100% 100%; @@ -3346,33 +2857,33 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } @@ -3386,12 +2897,12 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- // background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png); //} -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: var(--tab-stroke-background-size); + background-size: auto; /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; @@ -3399,31 +2910,31 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 0px, transparent 2px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.35) 3px, hsla(0,0%,100%,0.65) 3px, hsla(0,0%,100%,0.65) 4px, rgba(255,255,255,.3));/*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: var(--tab-stroke-background-size), auto 100%, auto auto; + background-size: auto 100%, auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 0px, transparent 2px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.35) 3px, hsla(0,0%,100%,0.65) 3px, hsla(0,0%,100%,0.65) 4px, rgba(255,255,255,.3)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-middle-hover.svg), @@ -3440,9 +2951,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-background-middle, .tabs-newtab-button, -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]), -.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -3455,7 +2963,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- position: absolute; } -.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; @@ -3516,9 +3024,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content { +.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { outline: 1px dotted; - outline-offset: -6px; } #context_reloadTab { @@ -3793,6 +3300,10 @@ toolbarbutton.chevron > .toolbarbutton-icon { box-shadow: 0 0 2px white; } +#full-screen-warning-container[obscure-browser] { + background-color: rgba(0,0,0,0.3); +} + .full-screen-description { font-size: 150%; } @@ -3801,6 +3312,11 @@ toolbarbutton.chevron > .toolbarbutton-icon { font-size: 300%; } +.full-screen-approval-button, +#full-screen-remember-decision { + font-size: 120%; +} + /* Responsive Mode */ @@ -3953,7 +3469,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -3972,7 +3488,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px,32px,32px,0px); @@ -3987,7 +3503,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } @@ -4119,7 +3635,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -4135,35 +3651,13 @@ toolbarbutton.chevron > .toolbarbutton-icon { /* Developer toolbar */ -/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. - We are copy/pasting variables from light-theme and dark-theme, - since they aren't loaded in this context (within browser.css). */ -:root[devtoolstheme="light"] #developer-toolbar { - --gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */ - --gcli-input-background: #f0f1f2; /* --theme-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */ - --gcli-input-color: #18191a; /* --theme-body-color */ - --gcli-border-color: #aaaaaa; /* --theme-splitter-color */ - --selection-background: #4c9ed9; /* --theme-selection-background */ - --selection-color: #f5f7fa; /* --theme-selection-color */ -} - -:root[devtoolstheme="dark"] #developer-toolbar { - --gcli-background-color: #343c45; /* --theme-toolbar-background */ - --gcli-input-background: rgba(37, 44, 51, .6); /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; /* --theme-body-color-alt */ - --gcli-border-color: black; /* --theme-splitter-color */ - --selection-background: #1d4f73; /* --theme-selection-background */ - --selection-color: #f5f7fa; /* --theme-selection-color */ -} - #developer-toolbar { -moz-appearance: none; padding: 0; min-height: 32px; - background-color: var(--gcli-background-color); - border-top: 1px solid var(--gcli-border-color); + background-color: #343C45; /* Toolbars */ + border-top: 1px solid #060a0d; + box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset; } #developer-toolbar > toolbarbutton { @@ -4179,11 +3673,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { margin: auto 10px; } -:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image, -:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); -} - .developer-toolbar-button > .toolbarbutton-icon, #developer-toolbar-closebutton > .toolbarbutton-icon { width: 16px; @@ -4211,7 +3700,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); @@ -4240,7 +3729,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -4291,25 +3780,24 @@ html|*#gcli-output-frame { box-shadow: none; border-width: 0; background-color: transparent; - border-radius: 0; } .gclitoolbar-input-node { -moz-appearance: none; - color: var(--gcli-input-color); - background-color: var(--gcli-input-background); + color: hsl(210,30%,85%); + background-color: #242b33; background-repeat: no-repeat; background-position: 4px center; - box-shadow: 1px 0 0 var(--gcli-border-color) inset, - -1px 0 0 var(--gcli-border-color) inset; - + box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset, + 1px 0 0 hsla(206,37%,4%,.2) inset, + -1px 0 0 hsla(206,37%,4%,.2) inset; line-height: 32px; outline-style: none; padding: 0; } .gclitoolbar-input-node[focused="true"] { - background-color: var(--gcli-input-focused-background); + background-color: #232e38; } .gclitoolbar-input-node::before { @@ -4328,15 +3816,15 @@ html|*#gcli-output-frame { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { - background-color: var(--selection-background); - color: var(--selection-color); + background-color: hsl(210,30%,85%); + color: hsl(210,24%,16%); text-shadow: none; } @@ -4444,84 +3932,26 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; -} - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); -} - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); -} - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; -} - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); -} - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); -} - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: hsla(210,4%,10%,.1); -} - -#login-fill-testing { - color: #b33; +.popup-notification-item-title[popupid="bad-content"] { font-weight: bold; } -#login-fill-list { - border: 1px solid black; - max-height: 20em; -} - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; -} - -.login-fill-item[disabled][selected] { - background-color: #eef; +.popup-notification-item-message[popupid="bad-content"] { + width: 17em; } -.login-hostname { - margin: 4px; - font-weight: bold; +.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), +.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { + color: GrayText; } -.login-fill-item.different-hostname > .login-hostname { - color: #888; +.popup-notification-item-message-critical[popupid="bad-content"] { + color: #d74345; font-style: italic; } -.login-username { - margin: 4px; - color: #888; -} - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid hsla(210,4%,10%,.3); - box-shadow: 0 3px 5px hsla(210,4%,10%,.1), - 0 0 7px hsla(210,4%,10%,.1); - -moz-margin-start: 38px; +.popup-notification-footer[popupid="bad-content"] { + padding-top: 1em; } /* This Source Code Form is subject to the terms of the Mozilla Public @@ -4730,6 +4160,16 @@ toolbar[brighttext] #downloads-indicator-counter { /* Social toolbar item */ +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); +} +#servicesInstall-notification-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); +} +#social-undoactivation-button { + -moz-margin-start: 0; /* override default label margin to match description margin */ +} + .social-activation-icon { width: auto; height: auto; @@ -4959,6 +4399,7 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; + margin: -285px 0 0; overflow: hidden; } @@ -5013,6 +4454,28 @@ chatbox { border-top-right-radius: 2.5px; } +/* EME notifications */ + +.popup-notification-icon[popupid="drmContentPlaying"], +#eme-notification-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); +} + +#eme-notification-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); +} + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public @@ -5168,26 +4631,14 @@ chatbox { #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-lwtheme-button, -#customization-titlebar-visibility-button { padding: 2px 7px; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ -moz-margin-start: 6px !important; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { - width: 20px; - height: 20px; - border-radius: 2px; - background-size: contain; -} - #customization-titlebar-visibility-button > .button-box > .button-icon { vertical-align: middle; } @@ -5196,17 +4647,6 @@ chatbox { -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); - } -} - #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"), @@ -5250,14 +4690,14 @@ toolbarpaletteitem[notransition][place="panel"] { } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { transform: scale(1.3); } @@ -5642,12 +5082,10 @@ toolbarpaletteitem[place="toolbar"] { padding: 2em 15px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } -#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -5658,7 +5096,6 @@ toolbarpaletteitem[place="toolbar"] { -moz-margin-end: 5px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -5681,7 +5118,6 @@ toolbarpaletteitem[place="toolbar"] { box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -5929,18 +5365,6 @@ notification.heartbeat { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } -#context-bookmarkpage[starred=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); -} - -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); -} - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); -} - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { @@ -5963,7 +5387,3 @@ notification.heartbeat { -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } - -.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; -} diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index 93f1d7a..0142e1a 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -15,9 +15,7 @@ --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); - --verified-identity-box-backgroundcolor: transparent; - --panel-separator-color: ThreeDShadow; - --urlbar-separator-color: rgba(41, 41, 41, 0.2); } + --verified-identity-box-backgroundcolor: transparent; } #menubar-items { -moz-box-orient: vertical; @@ -62,8 +60,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(38, 42, 51, 0.97) !important; background-clip: padding-box; + margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ - margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -283,7 +281,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +440,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#panelMenu_pocket, -#menu_pocket, -#BMB_pocket { - list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); } +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } #menu_openDownloads { list-style-image: url("chrome://browser/skin/Toolbar-small.png"); @@ -491,7 +488,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -500,22 +497,25 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-badge-container > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } +toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarbutton[type="socialmark"] > .toolbarbutton-icon { + max-width: 32px !important; } + /* Help SDK icons fit: */ -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { width: 16px; } -:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ width: 32px; } #nav-bar #PanelUI-menu-button { - -moz-padding-start: 5px; + -moz-padding-start: 7px; -moz-padding-end: 5px; } #nav-bar #PanelUI-button, @@ -527,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -549,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -690,11 +690,13 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #sync-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 270px, 18px, 252px); } -#sync-button[cui-areatype="toolbar"][status="active"] { +#sync-button[cui-areatype="toolbar"][status="active"], +#sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png"); -moz-image-region: rect(0, 18px, 18px, 0px); } -toolbar[brighttext] #sync-button[status="active"] { +toolbar[brighttext] #sync-button[status="active"], +toolbar[brighttext] #sync-button[status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png"); } #feed-button[cui-areatype="toolbar"] { @@ -739,13 +741,6 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } -#PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; - -moz-image-region: auto !important; } - -toolbar[brighttext] #PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } - #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -788,459 +783,234 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button { +#loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button { +toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"], -#loop-button[disabled="true"] { +#loop-button[state="disabled"] > .toolbarbutton-badge-container, +#loop-button[disabled="true"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] { +#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] { +#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] { +#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 738px, 18px, 720px); } -#pocket-button[cui-areatype="toolbar"] { - -moz-image-region: rect(0, 774px, 18px, 756px); } - -#pocket-button[cui-areatype="toolbar"][open] { - -moz-image-region: rect(18px, 774px, 36px, 756px); } - /* Menu panel and palette styles */ +/* Note that this file isn't used for HiDPI on OS X. */ :root { --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 384px, 32px, 352px); } - - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); - -moz-image-region: rect(0px, 32px, 32px, 0px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 608px, 32px, 576px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 928px, 32px, 896px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 992px, 32px, 960px); } - - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 992px, 64px, 960px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel.png); - -moz-image-region: rect(0, 32px, 32px, 0); } - - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 32px, 32px, 0) !important; } - - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 64px, 32px, 32px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 96px, 32px, 64px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 128px, 32px, 96px); } + --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 160px, 32px, 128px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button) { + list-style-image: var(--menupanel-list-style-image); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 192px, 32px, 160px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 224px, 32px, 192px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } +#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 192px, 64px, 160px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } +#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 224px, 64px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 384px, 32px, 352px); } - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } +#sync-button[cui-areatype="menu-panel"][status="active"] { + list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); } - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 768px, 64px, 704px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png); - -moz-image-region: rect(0px, 64px, 64px, 0px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 480px, 64px, 448px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#tabview-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #tabview-button { + -moz-image-region: rect(0px, 608px, 32px, 576px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 1984px, 64px, 1920px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1984px, 128px, 1920px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); - -moz-image-region: rect(0, 64px, 64px, 0); } +#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 736px, 64px, 704px); } - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 64px, 64px, 0) !important; } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 128px, 64px, 64px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 192px, 64px, 128px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 256px, 64px, 192px); } +#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 864px, 64px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 320px, 64px, 256px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 384px, 64px, 320px); } +#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 896px, 64px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 448px, 64px, 384px); } +#web-apps-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #web-apps-button { + -moz-image-region: rect(0, 928px, 32px, 896px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 1216px, 64px, 1152px); } +#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/menuPanel.png); + -moz-image-region: rect(0, 32px, 32px, 0); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +/* Make sure that the state icons are not shown in the customization palette. */ +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, +#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 64px, 32px, 32px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 96px, 32px, 64px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 128px, 32px, 96px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 160px, 32px, 128px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 192px, 32px, 160px); } - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 1856px, 64px, 1792px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 224px, 32px, 192px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: var(--menupanel-small-list-style-image); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.png); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1282,7 +1052,7 @@ toolbar[brighttext] #loop-button { #urlbar, .searchbar-textbox { -moz-appearance: none; - padding: 2px 3px; + padding: 3px; border-radius: 3px; margin: 0 3px; color: #D3DAE3; @@ -1315,25 +1085,6 @@ toolbar[brighttext] #loop-button { #urlbar-icons { -moz-box-align: center; } -#urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings { - -moz-appearance: none; - -moz-user-focus: ignore; - color: inherit; - margin: 0; - border: 0; - padding: 8px 20px; - background: transparent; } - -#urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } - #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1350,57 +1101,14 @@ toolbar[brighttext] #loop-button { -moz-margin-start: 0; color: GrayText; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); - padding: 6px 0; - -moz-padding-start: 44px; - -moz-padding-end: 6px; - background-image: url("chrome://browser/skin/info.svg"); - background-clip: padding-box; - background-position: 20px center; - background-repeat: no-repeat; - background-size: 16px 16px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { - background-position: right 20px center; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { - margin: 0; - padding: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { - -moz-margin-start: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - -moz-appearance: none; - -moz-user-focus: ignore; - min-width: 80px; - border-radius: 3px; - padding: 4px 16px; - margin: 0; - -moz-margin-start: 10px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { - color: #616161; - background-color: #e0e0e0; - border: 1px solid #d1d1d1; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { - background-color: #d6d6d6; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { - color: white; - background-color: #67cc14; - border: 1px solid #67cc14; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { - background-color: #5eba12; } - #search-container { min-width: calc(54px + 11ch); } /* identity box */ +#identity-box { + padding: 1px; + font-size: .9em; } + #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1409,98 +1117,192 @@ toolbar[brighttext] #loop-button { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { - background-color: var(--identity-box-verified-background-color); } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { + transition: padding-left, padding-right; } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + -moz-margin-end: 4px; } + +#identity-box.verifiedIdentity:not(:-moz-lwtheme) { + background-color: var(--verified-identity-box-backgroundcolor); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-box { +#identity-icon-labels { + -moz-padding-start: 2px; + -moz-padding-end: 5px; } + +:root { --identity-box-verified-color: #479900; + --identity-box-verified-background-image: linear-gradient(rgba(39, 74, 8, 0), rgba(39, 74, 8, 0.2) 35%, rgba(39, 74, 8, 0.2) 65%, rgba(39, 74, 8, 0)); --identity-box-chrome-color: #e57300; - border-inline-end: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; - font-size: .9em; - padding: 3px 5px 3px 3px; - margin-inline-end: 4px; - overflow: hidden; } + --identity-box-chrome-background-image: linear-gradient(rgba(229, 114, 0, 0), rgba(229, 114, 0, 0.5) 35%, rgba(229, 114, 0, 0.5) 65%, rgba(229, 114, 0, 0)); } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); } + background-position: right; + background-size: 1px; + background-repeat: no-repeat; } -#identity-icon-labels { - padding-inline-start: 2px; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { + background-position: left; } -#notification-popup-box:not([hidden]) + #identity-box { - padding-inline-start: 5px; - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + color: var(--identity-box-verified-color); + background-image: var(--identity-box-verified-background-image); } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { + color: var(--identity-box-chrome-color); + background-image: var(--identity-box-chrome-background-image); } -/* TRACKING PROTECTION ICON */ -#tracking-protection-icon { +/* page proxy icon */ +#page-proxy-favicon { width: 16px; height: 16px; - margin-inline-start: 0; - margin-inline-end: 2px; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } +.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.png); } -#tracking-protection-icon[animate] { - transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } +.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } -#tracking-protection-icon:not([state]) { - margin-inline-start: -18px; - pointer-events: none; - opacity: 0; - /* Only animate the shield in, when it disappears hide it immediately. */ - transition: none; } +.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } -#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { - visibility: collapse; } +.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } + +.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } + +#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { + list-style-image: url("chrome://branding/content/icon64.png"); } + +#identity-popup-brandName { + font-weight: bold; + font-size: 1.25em; + margin-top: .5em; + margin-bottom: .5em; } + +#identity-popup-content-box { + max-width: 50ch; } -/* MAIN IDENTITY ICON */ #page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } + margin-top: 1px; + margin-bottom: 1px; + -moz-margin-start: 3px; + -moz-margin-end: 1px; + -moz-image-region: rect(0, 16px, 16px, 0); } -.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } +#identity-box:hover > #page-proxy-favicon { + -moz-image-region: rect(0, 32px, 16px, 16px); } -.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-secure.svg); } +#identity-box:hover:active > #page-proxy-favicon, +#identity-box[open=true] > #page-proxy-favicon { + -moz-image-region: rect(0, 48px, 16px, 32px); } -.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } +/* Identity popup icons */ +#identity-popup-icon { + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); } -.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(64px, 64px, 128px, 0px); } -.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(128px, 64px, 192px, 0px); } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +/* Identity popup body text */ +.identity-popup-description { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; } -#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { - -moz-image-region: inherit; - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; +.identity-popup-label { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; } + +#identity-popup-content-host, +#identity-popup-content-owner { + font-weight: bold; + max-width: 300px; } + +#identity-popup-content-host, +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { + font-size: 140%; } + +#identity-popup-content-owner { + margin-bottom: 0 !important; } + +#identity-popup-content-verifier { + margin: 4px 0 2px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { + margin-top: 10px; + -moz-margin-start: -18px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/Secure.png"); } + +#identity-popup-help-icon { + -moz-appearance: none; + margin-left: 0px; + border: none; + background: none; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/question-16.png"); + cursor: pointer; } + +#identity-popup-help-icon > .button-box > .button-text { + display: none; } + +#identity-popup-help-icon > .button-box > .button-icon { height: 16px; - opacity: 1; } + width: 16px; } + +#identity-popup-help-icon:-moz-focusring { + outline: 1px dotted; + outline-offset: 1px; } + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +#identity-popup-container { + min-width: 280px; + padding: 10px; } + +#identity-popup-button-container { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); + padding: 10px; + margin-top: 5px; } + +/* Notification popup */ +#notification-popup { + min-width: 280px; } .popup-notification-icon { width: 64px; @@ -1510,31 +1312,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="geolocation"] { list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); } - .popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-progress"], +.popup-notification-icon[popupid="addon-install-cancelled"], .popup-notification-icon[popupid="addon-install-blocked"], -.popup-notification-icon[popupid="addon-install-origin-blocked"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } - -.popup-notification-icon[popupid="addon-progress"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } - -.popup-notification-icon[popupid="addon-install-failed"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } - -.popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } - -#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } - +.popup-notification-icon[popupid="addon-install-origin-blocked"], +.popup-notification-icon[popupid="addon-install-failed"], .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } - -.popup-notification-icon[popupid="addon-install-restart"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); + width: 32px; + height: 32px; } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1542,18 +1329,46 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="web-notifications"] { list-style-image: url(chrome://browser/skin/notification-64.png); } +.addon-progress-description { + width: 350px; + max-width: 350px; } + +.popup-progress-label, +.popup-progress-meter { + -moz-margin-start: 0; + -moz-margin-end: 0; } + +.popup-progress-cancel { + -moz-appearance: none; + background: transparent; + border: none; + padding: 0; + margin: 0; + -moz-margin-start: 5px; + min-height: 0; + min-width: 0; + list-style-image: url("moz-icon://stock/gtk-cancel?size=menu"); } + .popup-notification-icon[popupid="indexedDB-permissions-prompt"], .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } -.popup-notification-icon[popupid="password"] { +.popup-notification-icon[popupid="password-save"], +.popup-notification-icon[popupid="password-change"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } .popup-notification-icon[popupid="webapps-install-progress"], .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } +.popup-notification-icon[popupid="bad-content"] { + list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } + +.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], +.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } + .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1580,36 +1395,36 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #2b2e39; } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; height: 16px; margin: 0 2px; } +.notification-anchor-icon:-moz-focusring { + outline: 1px dotted -moz-DialogText; } + +.default-notification-icon, +#default-notification-icon { + list-style-image: url(chrome://global/skin/icons/information-16.png); } + .identity-notification-icon, #identity-notification-icon { - list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); - /* XXX: need HiDPI version */ } + list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); } .geo-notification-icon, #geo-notification-icon { list-style-image: url(chrome://browser/skin/Geolocation-16.png); } -#push-notification-icon { - list-style-image: url(chrome://browser/skin/Push-16.png); } - #addons-notification-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } - -#addons-notification-icon:hover { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } - -#addons-notification-icon:hover:active { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1618,12 +1433,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } -#login-fill-notification-icon { - /* Temporary icon until the capture and fill doorhangers are unified. */ - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); - transform: scaleX(-1); } - -.webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1659,6 +1468,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } +.bad-content-blocked-notification-icon, +#bad-content-blocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } + +.bad-content-unblocked-notification-icon, +#bad-content-unblocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } + .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1687,104 +1504,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #web-notifications-notification-icon { list-style-image: url(chrome://browser/skin/notification-16.png); } -.pointerLock-notification-icon, #pointerLock-notification-icon { list-style-image: url(chrome://browser/skin/pointerLock-16.png); } -.translate-notification-icon, -#translate-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 16px, 16px, 0px); } - -.translated-notification-icon, -#translated-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 32px, 16px, 16px); } - -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url(chrome://browser/skin/social/services-64.png); } - -#servicesInstall-notification-icon { - list-style-image: url(chrome://browser/skin/social/services-16.png); } - -/* EME notifications */ -.popup-notification-icon[popupid="drmContentPlaying"], -#eme-notification-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } - -#eme-notification-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; } - -@keyframes emeTeachingMoment { - 0% { - transform: translateX(0); } - 25% { - transform: translateX(3px); } - 75% { - transform: translateX(-3px); } - 100% { - transform: translateX(0); } } -/* HiDPI notification icons */ -@media (min-resolution: 1.1dppx) { - .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); } - - .webRTC-shareDevices-notification-icon, - #webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); } - - .webRTC-sharingDevices-notification-icon, - #webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); } - - .webRTC-shareMicrophone-notification-icon, - #webRTC-shareMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); } - - .webRTC-sharingMicrophone-notification-icon, - #webRTC-sharingMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); } - - .webRTC-shareScreen-notification-icon, - #webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); } - - .webRTC-sharingScreen-notification-icon, - #webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingDevices"], - .popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingMicrophone"], - .popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingScreen"], - .popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); } } -.popup-notification-body[popupid="addon-progress"], -.popup-notification-body[popupid="addon-install-confirmation"] { - width: 28em; - max-width: 28em; } - -.addon-install-confirmation-name { - font-weight: bold; } - -/* Notification icon box */ -#notification-popup-box { - border-radius: 2.5px 0 0 2.5px; } - -.notification-anchor-icon:-moz-focusring { - outline: 1px dotted -moz-DialogText; } - -.indexedDB-notification-icon, -#indexedDB-notification-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } +#pointerLock-cancel { + margin: 0px; } /* Translation infobar */ notification[value="translation"] .messageImage { @@ -1802,9 +1526,6 @@ notification[value="translation"][state="translating"] .messageImage { @media (min-resolution: 1.25dppx) { notification[value="translation"][state="translating"] .messageImage { list-style-image: url(chrome://browser/skin/translating-16@2x.png); } } -notification[value="translation"] hbox[anonid="details"] { - overflow: hidden; } - notification[value="translation"] button, notification[value="translation"] menulist { -moz-appearance: none; @@ -1915,6 +1636,16 @@ notification[value="translation"] button:not([type="menu"]) > .button-box { notification[value="translation"] menulist > .menulist-dropmarker { display: block; } +.translate-notification-icon, +#translate-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); } + +.translated-notification-icon, +#translated-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 32px, 16px, 16px); } + /* Loop/ Hello browser styles */ notification[value="loop-sharing-notification"] .button-menubutton-button { min-width: 0; } @@ -1950,9 +1681,7 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { +.ac-comment { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -1984,24 +1713,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ -#urlbar-go-button, -#urlbar-reload-button, -#urlbar-stop-button { +#urlbar > toolbarbutton { -moz-appearance: none; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); - padding: 0 4px 0 6px; - margin-inline-start: 2px; - border-inline-start: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; } + padding: 0 2px; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { + background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2011,9 +1736,11 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2023,51 +1750,43 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } -@media (min-resolution: 1.1dppx) { - #urlbar-go-button, - #urlbar-reload-button, - #urlbar-stop-button { - list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } - - #urlbar-go-button > .toolbarbutton-icon, - #urlbar-reload-button > .toolbarbutton-icon, - #urlbar-stop-button > .toolbarbutton-icon { - width: 14px; } - - #urlbar-go-button { - -moz-image-region: rect(0, 84px, 28px, 56px); } - - #urlbar-go-button:hover { - -moz-image-region: rect(28px, 84px, 56px, 56px); } +/* Popup blocker button */ +#page-report-button { + list-style-image: url("chrome://browser/skin/Info.png"); } - #urlbar-go-button:hover:active { - -moz-image-region: rect(56px, 84px, 84px, 56px); } +/* Reading List button */ +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; } - #urlbar-reload-button { - -moz-image-region: rect(0, 28px, 28px, 0); } +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; } - #urlbar-reload-button:not([disabled]):hover { - -moz-image-region: rect(28px, 28px, 56px, 0); } +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - #urlbar-reload-button:not([disabled]):hover:active { - -moz-image-region: rect(56px, 28px, 84px, 0); } +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - #urlbar-stop-button { - -moz-image-region: rect(0, 56px, 28px, 28px); } +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - #urlbar-stop-button:not([disabled]):hover { - -moz-image-region: rect(28px, 56px, 56px, 28px); } +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); } } -/* Popup blocker button */ -#page-report-button { - list-style-image: url("chrome://browser/skin/Info.png"); } +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } /* Reader mode button */ #reader-mode-button { @@ -2262,12 +1981,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /* Tabstrip */ :root { --tab-toolbar-navbar-overlap: 1px; - --navbar-tab-toolbar-highlight-overlap: 1px; --tab-min-height: 31px; } -#TabsToolbar { - --tab-stroke-background-size: auto 100%; } - /* image preloading hack */ #tabbrowser-tabs::before { /* Because of bug 853415, we need to ordinal this to the first position: */ @@ -2290,13 +2005,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-tab { -moz-box-align: stretch; } +.tabbrowser-tab[remote] { + text-decoration: underline; } + .tabbrowser-tab[selected="true"], .tabbrowser-tab[selected="true"]:hover, .tabbrowser-tab:not([selected="true"]):hover { color: #D3DAE3; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -2316,7 +2034,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, -.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2332,33 +2049,14 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-icon-overlay { width: 16px; height: 16px; - margin-top: -12px; + margin-top: 10px; -moz-margin-start: -16px; - position: relative; } + display: none; } .tab-icon-overlay[crashed] { + display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]) { - border-radius: 8px; } - -.tab-icon-overlay[soundplaying]:hover, -.tab-icon-overlay[muted]:not([crashed]):hover { - background-color: white; } - -.tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio-small.svg#tab-audio"); } - -.tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio-small.svg#tab-audio-muted"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio-small.svg#tab-audio"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio-small.svg#tab-audio-muted"); } - .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2374,48 +2072,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } -.tab-icon-sound { - -moz-margin-start: 4px; - width: 16px; - height: 16px; - padding: 0; } - -.tab-icon-sound[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab"); } - -.tab-icon-sound[soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-hover"); } - -.tab-icon-sound[soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-pressed"); } - -.tab-icon-sound[muted] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted"); } - -.tab-icon-sound[muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } - -.tab-icon-sound[muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } - -.tab-icon-sound[visuallyselected=true][soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[visuallyselected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2432,7 +2088,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-overflow-indicator.png); background-size: 100% 100%; width: 14px; - margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); + margin-bottom: var(--tab-toolbar-navbar-overlap); pointer-events: none; position: relative; z-index: 3; @@ -2458,16 +2114,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2484,8 +2140,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ -moz-margin-start: -30px; background-size: 100% 100%; @@ -2493,64 +2149,64 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: -moz-box; position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: var(--tab-stroke-background-size); + background-size: auto; /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } + background-size: auto 100%, auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/dark/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/dark/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; @@ -2563,9 +2219,6 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]), -.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2575,7 +2228,7 @@ lwtHeader;*/ height: 100%; position: absolute; } -.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; @@ -2605,9 +2258,8 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content { - outline: 1px dotted; - outline-offset: -6px; } +.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { + outline: 1px dotted; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2812,12 +2464,19 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } +#full-screen-warning-container[obscure-browser] { + background-color: rgba(0, 0, 0, 0.3); } + .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } +.full-screen-approval-button, +#full-screen-remember-decision { + font-size: 120%; } + /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -2943,7 +2602,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2956,7 +2615,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2966,7 +2625,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3068,7 +2727,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3078,47 +2737,14 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-resizehandle { background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png"); } } /* Developer toolbar */ -/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. - We are copy/pasting variables from light-theme and dark-theme, - since they aren't loaded in this context (within browser.css). */ -:root[devtoolstheme="light"] #developer-toolbar { - --gcli-background-color: #ebeced; - /* --theme-tab-toolbar-background */ - --gcli-input-background: #f0f1f2; - /* --theme-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; - /* --theme-sidebar-background */ - --gcli-input-color: #18191a; - /* --theme-body-color */ - --gcli-border-color: #aaaaaa; - /* --theme-splitter-color */ - --selection-background: #4c9ed9; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - -:root[devtoolstheme="dark"] #developer-toolbar { - --gcli-background-color: #343c45; - /* --theme-toolbar-background */ - --gcli-input-background: rgba(37, 44, 51, 0.6); - /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #252c33; - /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; - /* --theme-body-color-alt */ - --gcli-border-color: black; - /* --theme-splitter-color */ - --selection-background: #1d4f73; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - #developer-toolbar { -moz-appearance: none; padding: 0; min-height: 32px; - background-color: var(--gcli-background-color); - border-top: 1px solid var(--gcli-border-color); } + background-color: #343C45; + /* Toolbars */ + border-top: 1px solid #060a0d; + box-shadow: 0 1px 0 rgba(248, 250, 252, 0.05) inset, 0 -1px 0 rgba(6, 11, 14, 0.1) inset; } #developer-toolbar > toolbarbutton { -moz-appearance: none; @@ -3131,10 +2757,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { .developer-toolbar-button > image { margin: auto 10px; } -:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image, -:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); } - .developer-toolbar-button > .toolbarbutton-icon, #developer-toolbar-closebutton > .toolbarbutton-icon { width: 16px; @@ -3156,7 +2778,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3178,7 +2800,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3218,22 +2840,21 @@ html|*#gcli-output-frame { text-shadow: none; box-shadow: none; border-width: 0; - background-color: transparent; - border-radius: 0; } + background-color: transparent; } .gclitoolbar-input-node { -moz-appearance: none; - color: var(--gcli-input-color); - background-color: var(--gcli-input-background); + color: #cdd9e4; + background-color: #242b33; background-repeat: no-repeat; background-position: 4px center; - box-shadow: 1px 0 0 var(--gcli-border-color) inset, -1px 0 0 var(--gcli-border-color) inset; + box-shadow: 0 1px 1px rgba(6, 11, 14, 0.2) inset, 1px 0 0 rgba(6, 11, 14, 0.2) inset, -1px 0 0 rgba(6, 11, 14, 0.2) inset; line-height: 32px; outline-style: none; padding: 0; } .gclitoolbar-input-node[focused="true"] { - background-color: var(--gcli-input-focused-background); } + background-color: #232e38; } .gclitoolbar-input-node::before { content: ""; @@ -3249,12 +2870,12 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { - background-color: var(--selection-background); - color: var(--selection-color); + background-color: #cdd9e4; + color: #1f2933; text-shadow: none; } .gclitoolbar-complete-node { @@ -3343,69 +2964,22 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; +.popup-notification-item-title[popupid="bad-content"] { font-weight: bold; } -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } +.popup-notification-item-message[popupid="bad-content"] { + width: 17em; } -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } +.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), +.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { + color: GrayText; } -.login-fill-item.different-hostname > .login-hostname { - color: #888; +.popup-notification-item-message-critical[popupid="bad-content"] { + color: #d74345; font-style: italic; } -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - -moz-margin-start: 38px; } +.popup-notification-footer[popupid="bad-content"] { + padding-top: 1em; } /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3576,6 +3150,16 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); } + +#servicesInstall-notification-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); } + +#social-undoactivation-button { + -moz-margin-start: 0; + /* override default label margin to match description margin */ } + .social-activation-icon { width: auto; height: auto; @@ -3761,6 +3345,7 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; + margin: -285px 0 0; overflow: hidden; } chatbar { @@ -3804,6 +3389,26 @@ chatbox { border-top-left-radius: 2.5px; border-top-right-radius: 2.5px; } +/* EME notifications */ +.popup-notification-icon[popupid="drmContentPlaying"], +#eme-notification-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } + +#eme-notification-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; } + +@keyframes emeTeachingMoment { + 0% { + transform: translateX(0); } + 25% { + transform: translateX(3px); } + 75% { + transform: translateX(-3px); } + 100% { + transform: translateX(0); } } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3930,36 +3535,19 @@ chatbox { #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-lwtheme-button, -#customization-titlebar-visibility-button { + -moz-image-region: rect(0, 24px, 24px, 0); padding: 2px 7px; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ -moz-margin-start: 6px !important; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { - width: 20px; - height: 20px; - border-radius: 2px; - background-size: contain; } - #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); } } #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; @@ -3992,13 +3580,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4318,11 +3906,9 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } -#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4331,7 +3917,6 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4351,7 +3936,6 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4544,15 +4128,6 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } -#context-bookmarkpage[starred=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } - -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { @@ -4571,6 +4146,3 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } - -.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index cb09ca3..9e22daa 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -15,9 +15,7 @@ --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); - --verified-identity-box-backgroundcolor: transparent; - --panel-separator-color: ThreeDShadow; - --urlbar-separator-color: rgba(41, 41, 41, 0.2); } + --verified-identity-box-backgroundcolor: transparent; } #menubar-items { -moz-box-orient: vertical; @@ -62,8 +60,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(38, 42, 51, 0.97) !important; background-clip: padding-box; + margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ - margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -283,7 +281,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +440,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#panelMenu_pocket, -#menu_pocket, -#BMB_pocket { - list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); } +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } #menu_openDownloads { list-style-image: url("chrome://browser/skin/Toolbar-small.png"); @@ -491,7 +488,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -500,22 +497,25 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-badge-container > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } +toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarbutton[type="socialmark"] > .toolbarbutton-icon { + max-width: 32px !important; } + /* Help SDK icons fit: */ -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { width: 16px; } -:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ width: 32px; } #nav-bar #PanelUI-menu-button { - -moz-padding-start: 5px; + -moz-padding-start: 7px; -moz-padding-end: 5px; } #nav-bar #PanelUI-button, @@ -527,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -549,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -690,11 +690,13 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #sync-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 270px, 18px, 252px); } -#sync-button[cui-areatype="toolbar"][status="active"] { +#sync-button[cui-areatype="toolbar"][status="active"], +#sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png"); -moz-image-region: rect(0, 18px, 18px, 0px); } -toolbar[brighttext] #sync-button[status="active"] { +toolbar[brighttext] #sync-button[status="active"], +toolbar[brighttext] #sync-button[status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png"); } #feed-button[cui-areatype="toolbar"] { @@ -739,13 +741,6 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } -#PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; - -moz-image-region: auto !important; } - -toolbar[brighttext] #PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } - #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -788,459 +783,234 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button { +#loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button { +toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"], -#loop-button[disabled="true"] { +#loop-button[state="disabled"] > .toolbarbutton-badge-container, +#loop-button[disabled="true"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] { +#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] { +#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] { +#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 738px, 18px, 720px); } -#pocket-button[cui-areatype="toolbar"] { - -moz-image-region: rect(0, 774px, 18px, 756px); } - -#pocket-button[cui-areatype="toolbar"][open] { - -moz-image-region: rect(18px, 774px, 36px, 756px); } - /* Menu panel and palette styles */ +/* Note that this file isn't used for HiDPI on OS X. */ :root { --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 384px, 32px, 352px); } - - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); - -moz-image-region: rect(0px, 32px, 32px, 0px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 608px, 32px, 576px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 928px, 32px, 896px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 992px, 32px, 960px); } - - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 992px, 64px, 960px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel.png); - -moz-image-region: rect(0, 32px, 32px, 0); } - - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 32px, 32px, 0) !important; } - - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 64px, 32px, 32px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 96px, 32px, 64px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 128px, 32px, 96px); } + --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 160px, 32px, 128px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button) { + list-style-image: var(--menupanel-list-style-image); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 192px, 32px, 160px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 224px, 32px, 192px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } +#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 192px, 64px, 160px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } +#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 224px, 64px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 384px, 32px, 352px); } - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } +#sync-button[cui-areatype="menu-panel"][status="active"] { + list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); } - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 768px, 64px, 704px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png); - -moz-image-region: rect(0px, 64px, 64px, 0px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 480px, 64px, 448px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#tabview-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #tabview-button { + -moz-image-region: rect(0px, 608px, 32px, 576px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 1984px, 64px, 1920px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1984px, 128px, 1920px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); - -moz-image-region: rect(0, 64px, 64px, 0); } +#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 736px, 64px, 704px); } - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 64px, 64px, 0) !important; } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 128px, 64px, 64px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 192px, 64px, 128px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 256px, 64px, 192px); } +#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 864px, 64px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 320px, 64px, 256px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 384px, 64px, 320px); } +#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 896px, 64px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 448px, 64px, 384px); } +#web-apps-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #web-apps-button { + -moz-image-region: rect(0, 928px, 32px, 896px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 1216px, 64px, 1152px); } +#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/menuPanel.png); + -moz-image-region: rect(0, 32px, 32px, 0); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +/* Make sure that the state icons are not shown in the customization palette. */ +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, +#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 64px, 32px, 32px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 96px, 32px, 64px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 128px, 32px, 96px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 160px, 32px, 128px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 192px, 32px, 160px); } - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 1856px, 64px, 1792px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 224px, 32px, 192px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: var(--menupanel-small-list-style-image); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.png); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1282,7 +1052,7 @@ toolbar[brighttext] #loop-button { #urlbar, .searchbar-textbox { -moz-appearance: none; - padding: 2px 3px; + padding: 3px; border-radius: 3px; margin: 0 3px; color: #5c616c; @@ -1314,25 +1084,6 @@ toolbar[brighttext] #loop-button { #urlbar-icons { -moz-box-align: center; } -#urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings { - -moz-appearance: none; - -moz-user-focus: ignore; - color: inherit; - margin: 0; - border: 0; - padding: 8px 20px; - background: transparent; } - -#urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } - #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1349,57 +1100,14 @@ toolbar[brighttext] #loop-button { -moz-margin-start: 0; color: GrayText; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); - padding: 6px 0; - -moz-padding-start: 44px; - -moz-padding-end: 6px; - background-image: url("chrome://browser/skin/info.svg"); - background-clip: padding-box; - background-position: 20px center; - background-repeat: no-repeat; - background-size: 16px 16px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { - background-position: right 20px center; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { - margin: 0; - padding: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { - -moz-margin-start: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - -moz-appearance: none; - -moz-user-focus: ignore; - min-width: 80px; - border-radius: 3px; - padding: 4px 16px; - margin: 0; - -moz-margin-start: 10px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { - color: #616161; - background-color: #e0e0e0; - border: 1px solid #d1d1d1; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { - background-color: #d6d6d6; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { - color: white; - background-color: #67cc14; - border: 1px solid #67cc14; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { - background-color: #5eba12; } - #search-container { min-width: calc(54px + 11ch); } /* identity box */ +#identity-box { + padding: 1px; + font-size: .9em; } + #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1408,98 +1116,192 @@ toolbar[brighttext] #loop-button { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { - background-color: var(--identity-box-verified-background-color); } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { + transition: padding-left, padding-right; } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + -moz-margin-end: 4px; } + +#identity-box.verifiedIdentity:not(:-moz-lwtheme) { + background-color: var(--verified-identity-box-backgroundcolor); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-box { +#identity-icon-labels { + -moz-padding-start: 2px; + -moz-padding-end: 5px; } + +:root { --identity-box-verified-color: #479900; + --identity-box-verified-background-image: linear-gradient(rgba(39, 74, 8, 0), rgba(39, 74, 8, 0.2) 35%, rgba(39, 74, 8, 0.2) 65%, rgba(39, 74, 8, 0)); --identity-box-chrome-color: #e57300; - border-inline-end: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; - font-size: .9em; - padding: 3px 5px 3px 3px; - margin-inline-end: 4px; - overflow: hidden; } + --identity-box-chrome-background-image: linear-gradient(rgba(229, 114, 0, 0), rgba(229, 114, 0, 0.5) 35%, rgba(229, 114, 0, 0.5) 65%, rgba(229, 114, 0, 0)); } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); } + background-position: right; + background-size: 1px; + background-repeat: no-repeat; } -#identity-icon-labels { - padding-inline-start: 2px; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { + background-position: left; } -#notification-popup-box:not([hidden]) + #identity-box { - padding-inline-start: 5px; - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + color: var(--identity-box-verified-color); + background-image: var(--identity-box-verified-background-image); } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { + color: var(--identity-box-chrome-color); + background-image: var(--identity-box-chrome-background-image); } -/* TRACKING PROTECTION ICON */ -#tracking-protection-icon { +/* page proxy icon */ +#page-proxy-favicon { width: 16px; height: 16px; - margin-inline-start: 0; - margin-inline-end: 2px; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } +.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.png); } -#tracking-protection-icon[animate] { - transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } +.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } -#tracking-protection-icon:not([state]) { - margin-inline-start: -18px; - pointer-events: none; - opacity: 0; - /* Only animate the shield in, when it disappears hide it immediately. */ - transition: none; } +.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } -#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { - visibility: collapse; } +.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } + +.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } + +#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { + list-style-image: url("chrome://branding/content/icon64.png"); } + +#identity-popup-brandName { + font-weight: bold; + font-size: 1.25em; + margin-top: .5em; + margin-bottom: .5em; } + +#identity-popup-content-box { + max-width: 50ch; } -/* MAIN IDENTITY ICON */ #page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } + margin-top: 1px; + margin-bottom: 1px; + -moz-margin-start: 3px; + -moz-margin-end: 1px; + -moz-image-region: rect(0, 16px, 16px, 0); } -.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } +#identity-box:hover > #page-proxy-favicon { + -moz-image-region: rect(0, 32px, 16px, 16px); } -.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-secure.svg); } +#identity-box:hover:active > #page-proxy-favicon, +#identity-box[open=true] > #page-proxy-favicon { + -moz-image-region: rect(0, 48px, 16px, 32px); } -.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } +/* Identity popup icons */ +#identity-popup-icon { + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); } -.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(64px, 64px, 128px, 0px); } -.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(128px, 64px, 192px, 0px); } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +/* Identity popup body text */ +.identity-popup-description { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; } -#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { - -moz-image-region: inherit; - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; +.identity-popup-label { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; } + +#identity-popup-content-host, +#identity-popup-content-owner { + font-weight: bold; + max-width: 300px; } + +#identity-popup-content-host, +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { + font-size: 140%; } + +#identity-popup-content-owner { + margin-bottom: 0 !important; } + +#identity-popup-content-verifier { + margin: 4px 0 2px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { + margin-top: 10px; + -moz-margin-start: -18px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/Secure.png"); } + +#identity-popup-help-icon { + -moz-appearance: none; + margin-left: 0px; + border: none; + background: none; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/question-16.png"); + cursor: pointer; } + +#identity-popup-help-icon > .button-box > .button-text { + display: none; } + +#identity-popup-help-icon > .button-box > .button-icon { height: 16px; - opacity: 1; } + width: 16px; } + +#identity-popup-help-icon:-moz-focusring { + outline: 1px dotted; + outline-offset: 1px; } + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +#identity-popup-container { + min-width: 280px; + padding: 10px; } + +#identity-popup-button-container { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); + padding: 10px; + margin-top: 5px; } + +/* Notification popup */ +#notification-popup { + min-width: 280px; } .popup-notification-icon { width: 64px; @@ -1509,31 +1311,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="geolocation"] { list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); } - .popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-progress"], +.popup-notification-icon[popupid="addon-install-cancelled"], .popup-notification-icon[popupid="addon-install-blocked"], -.popup-notification-icon[popupid="addon-install-origin-blocked"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } - -.popup-notification-icon[popupid="addon-progress"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } - -.popup-notification-icon[popupid="addon-install-failed"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } - -.popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } - -#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } - +.popup-notification-icon[popupid="addon-install-origin-blocked"], +.popup-notification-icon[popupid="addon-install-failed"], .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } - -.popup-notification-icon[popupid="addon-install-restart"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); + width: 32px; + height: 32px; } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1541,18 +1328,46 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="web-notifications"] { list-style-image: url(chrome://browser/skin/notification-64.png); } +.addon-progress-description { + width: 350px; + max-width: 350px; } + +.popup-progress-label, +.popup-progress-meter { + -moz-margin-start: 0; + -moz-margin-end: 0; } + +.popup-progress-cancel { + -moz-appearance: none; + background: transparent; + border: none; + padding: 0; + margin: 0; + -moz-margin-start: 5px; + min-height: 0; + min-width: 0; + list-style-image: url("moz-icon://stock/gtk-cancel?size=menu"); } + .popup-notification-icon[popupid="indexedDB-permissions-prompt"], .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } -.popup-notification-icon[popupid="password"] { +.popup-notification-icon[popupid="password-save"], +.popup-notification-icon[popupid="password-change"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } .popup-notification-icon[popupid="webapps-install-progress"], .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } +.popup-notification-icon[popupid="bad-content"] { + list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } + +.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], +.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } + .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1579,36 +1394,36 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #dcdfe3; } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; height: 16px; margin: 0 2px; } +.notification-anchor-icon:-moz-focusring { + outline: 1px dotted -moz-DialogText; } + +.default-notification-icon, +#default-notification-icon { + list-style-image: url(chrome://global/skin/icons/information-16.png); } + .identity-notification-icon, #identity-notification-icon { - list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); - /* XXX: need HiDPI version */ } + list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); } .geo-notification-icon, #geo-notification-icon { list-style-image: url(chrome://browser/skin/Geolocation-16.png); } -#push-notification-icon { - list-style-image: url(chrome://browser/skin/Push-16.png); } - #addons-notification-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } - -#addons-notification-icon:hover { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } - -#addons-notification-icon:hover:active { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1617,12 +1432,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } -#login-fill-notification-icon { - /* Temporary icon until the capture and fill doorhangers are unified. */ - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); - transform: scaleX(-1); } - -.webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1658,6 +1467,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } +.bad-content-blocked-notification-icon, +#bad-content-blocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } + +.bad-content-unblocked-notification-icon, +#bad-content-unblocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } + .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1686,104 +1503,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #web-notifications-notification-icon { list-style-image: url(chrome://browser/skin/notification-16.png); } -.pointerLock-notification-icon, #pointerLock-notification-icon { list-style-image: url(chrome://browser/skin/pointerLock-16.png); } -.translate-notification-icon, -#translate-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 16px, 16px, 0px); } - -.translated-notification-icon, -#translated-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 32px, 16px, 16px); } - -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url(chrome://browser/skin/social/services-64.png); } - -#servicesInstall-notification-icon { - list-style-image: url(chrome://browser/skin/social/services-16.png); } - -/* EME notifications */ -.popup-notification-icon[popupid="drmContentPlaying"], -#eme-notification-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } - -#eme-notification-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; } - -@keyframes emeTeachingMoment { - 0% { - transform: translateX(0); } - 25% { - transform: translateX(3px); } - 75% { - transform: translateX(-3px); } - 100% { - transform: translateX(0); } } -/* HiDPI notification icons */ -@media (min-resolution: 1.1dppx) { - .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); } - - .webRTC-shareDevices-notification-icon, - #webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); } - - .webRTC-sharingDevices-notification-icon, - #webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); } - - .webRTC-shareMicrophone-notification-icon, - #webRTC-shareMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); } - - .webRTC-sharingMicrophone-notification-icon, - #webRTC-sharingMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); } - - .webRTC-shareScreen-notification-icon, - #webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); } - - .webRTC-sharingScreen-notification-icon, - #webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingDevices"], - .popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingMicrophone"], - .popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingScreen"], - .popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); } } -.popup-notification-body[popupid="addon-progress"], -.popup-notification-body[popupid="addon-install-confirmation"] { - width: 28em; - max-width: 28em; } - -.addon-install-confirmation-name { - font-weight: bold; } - -/* Notification icon box */ -#notification-popup-box { - border-radius: 2.5px 0 0 2.5px; } - -.notification-anchor-icon:-moz-focusring { - outline: 1px dotted -moz-DialogText; } - -.indexedDB-notification-icon, -#indexedDB-notification-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } +#pointerLock-cancel { + margin: 0px; } /* Translation infobar */ notification[value="translation"] .messageImage { @@ -1801,9 +1525,6 @@ notification[value="translation"][state="translating"] .messageImage { @media (min-resolution: 1.25dppx) { notification[value="translation"][state="translating"] .messageImage { list-style-image: url(chrome://browser/skin/translating-16@2x.png); } } -notification[value="translation"] hbox[anonid="details"] { - overflow: hidden; } - notification[value="translation"] button, notification[value="translation"] menulist { -moz-appearance: none; @@ -1914,6 +1635,16 @@ notification[value="translation"] button:not([type="menu"]) > .button-box { notification[value="translation"] menulist > .menulist-dropmarker { display: block; } +.translate-notification-icon, +#translate-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); } + +.translated-notification-icon, +#translated-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 32px, 16px, 16px); } + /* Loop/ Hello browser styles */ notification[value="loop-sharing-notification"] .button-menubutton-button { min-width: 0; } @@ -1949,9 +1680,7 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { +.ac-comment { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -1983,24 +1712,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ -#urlbar-go-button, -#urlbar-reload-button, -#urlbar-stop-button { +#urlbar > toolbarbutton { -moz-appearance: none; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); - padding: 0 4px 0 6px; - margin-inline-start: 2px; - border-inline-start: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; } + padding: 0 2px; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { + background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2010,9 +1735,11 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2022,51 +1749,43 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } -@media (min-resolution: 1.1dppx) { - #urlbar-go-button, - #urlbar-reload-button, - #urlbar-stop-button { - list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } - - #urlbar-go-button > .toolbarbutton-icon, - #urlbar-reload-button > .toolbarbutton-icon, - #urlbar-stop-button > .toolbarbutton-icon { - width: 14px; } - - #urlbar-go-button { - -moz-image-region: rect(0, 84px, 28px, 56px); } - - #urlbar-go-button:hover { - -moz-image-region: rect(28px, 84px, 56px, 56px); } +/* Popup blocker button */ +#page-report-button { + list-style-image: url("chrome://browser/skin/Info.png"); } - #urlbar-go-button:hover:active { - -moz-image-region: rect(56px, 84px, 84px, 56px); } +/* Reading List button */ +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; } - #urlbar-reload-button { - -moz-image-region: rect(0, 28px, 28px, 0); } +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; } - #urlbar-reload-button:not([disabled]):hover { - -moz-image-region: rect(28px, 28px, 56px, 0); } +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - #urlbar-reload-button:not([disabled]):hover:active { - -moz-image-region: rect(56px, 28px, 84px, 0); } +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - #urlbar-stop-button { - -moz-image-region: rect(0, 56px, 28px, 28px); } +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - #urlbar-stop-button:not([disabled]):hover { - -moz-image-region: rect(28px, 56px, 56px, 28px); } +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); } } -/* Popup blocker button */ -#page-report-button { - list-style-image: url("chrome://browser/skin/Info.png"); } +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } /* Reader mode button */ #reader-mode-button { @@ -2262,12 +1981,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /* Tabstrip */ :root { --tab-toolbar-navbar-overlap: 1px; - --navbar-tab-toolbar-highlight-overlap: 1px; --tab-min-height: 31px; } -#TabsToolbar { - --tab-stroke-background-size: auto 100%; } - /* image preloading hack */ #tabbrowser-tabs::before { /* Because of bug 853415, we need to ordinal this to the first position: */ @@ -2290,13 +2005,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-tab { -moz-box-align: stretch; } +.tabbrowser-tab[remote] { + text-decoration: underline; } + .tabbrowser-tab[selected="true"], .tabbrowser-tab[selected="true"]:hover, .tabbrowser-tab:not([selected="true"]):hover { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -2316,7 +2034,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, -.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2332,33 +2049,14 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-icon-overlay { width: 16px; height: 16px; - margin-top: -12px; + margin-top: 10px; -moz-margin-start: -16px; - position: relative; } + display: none; } .tab-icon-overlay[crashed] { + display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]) { - border-radius: 8px; } - -.tab-icon-overlay[soundplaying]:hover, -.tab-icon-overlay[muted]:not([crashed]):hover { - background-color: white; } - -.tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio-small.svg#tab-audio"); } - -.tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio-small.svg#tab-audio-muted"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio-muted"); } - .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2374,48 +2072,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } -.tab-icon-sound { - -moz-margin-start: 4px; - width: 16px; - height: 16px; - padding: 0; } - -.tab-icon-sound[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab"); } - -.tab-icon-sound[soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-hover"); } - -.tab-icon-sound[soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-pressed"); } - -.tab-icon-sound[muted] { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted"); } - -.tab-icon-sound[muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } - -.tab-icon-sound[muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } - -.tab-icon-sound[visuallyselected=true][soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[visuallyselected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2432,7 +2088,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-overflow-indicator.png); background-size: 100% 100%; width: 14px; - margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); + margin-bottom: var(--tab-toolbar-navbar-overlap); pointer-events: none; position: relative; z-index: 3; @@ -2458,16 +2114,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2484,8 +2140,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ -moz-margin-start: -30px; background-size: 100% 100%; @@ -2493,64 +2149,64 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: -moz-box; position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: var(--tab-stroke-background-size); + background-size: auto; /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } + background-size: auto 100%, auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/darker/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/darker/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; @@ -2563,9 +2219,6 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]), -.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2575,7 +2228,7 @@ lwtHeader;*/ height: 100%; position: absolute; } -.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; @@ -2605,9 +2258,8 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content { - outline: 1px dotted; - outline-offset: -6px; } +.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { + outline: 1px dotted; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2812,12 +2464,19 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } +#full-screen-warning-container[obscure-browser] { + background-color: rgba(0, 0, 0, 0.3); } + .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } +.full-screen-approval-button, +#full-screen-remember-decision { + font-size: 120%; } + /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -2943,7 +2602,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2956,7 +2615,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2966,7 +2625,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3068,7 +2727,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3078,47 +2737,14 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-resizehandle { background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png"); } } /* Developer toolbar */ -/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. - We are copy/pasting variables from light-theme and dark-theme, - since they aren't loaded in this context (within browser.css). */ -:root[devtoolstheme="light"] #developer-toolbar { - --gcli-background-color: #ebeced; - /* --theme-tab-toolbar-background */ - --gcli-input-background: #f0f1f2; - /* --theme-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; - /* --theme-sidebar-background */ - --gcli-input-color: #18191a; - /* --theme-body-color */ - --gcli-border-color: #aaaaaa; - /* --theme-splitter-color */ - --selection-background: #4c9ed9; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - -:root[devtoolstheme="dark"] #developer-toolbar { - --gcli-background-color: #343c45; - /* --theme-toolbar-background */ - --gcli-input-background: rgba(37, 44, 51, 0.6); - /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #252c33; - /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; - /* --theme-body-color-alt */ - --gcli-border-color: black; - /* --theme-splitter-color */ - --selection-background: #1d4f73; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - #developer-toolbar { -moz-appearance: none; padding: 0; min-height: 32px; - background-color: var(--gcli-background-color); - border-top: 1px solid var(--gcli-border-color); } + background-color: #343C45; + /* Toolbars */ + border-top: 1px solid #060a0d; + box-shadow: 0 1px 0 rgba(248, 250, 252, 0.05) inset, 0 -1px 0 rgba(6, 11, 14, 0.1) inset; } #developer-toolbar > toolbarbutton { -moz-appearance: none; @@ -3131,10 +2757,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { .developer-toolbar-button > image { margin: auto 10px; } -:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image, -:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); } - .developer-toolbar-button > .toolbarbutton-icon, #developer-toolbar-closebutton > .toolbarbutton-icon { width: 16px; @@ -3156,7 +2778,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3178,7 +2800,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3218,22 +2840,21 @@ html|*#gcli-output-frame { text-shadow: none; box-shadow: none; border-width: 0; - background-color: transparent; - border-radius: 0; } + background-color: transparent; } .gclitoolbar-input-node { -moz-appearance: none; - color: var(--gcli-input-color); - background-color: var(--gcli-input-background); + color: #cdd9e4; + background-color: #242b33; background-repeat: no-repeat; background-position: 4px center; - box-shadow: 1px 0 0 var(--gcli-border-color) inset, -1px 0 0 var(--gcli-border-color) inset; + box-shadow: 0 1px 1px rgba(6, 11, 14, 0.2) inset, 1px 0 0 rgba(6, 11, 14, 0.2) inset, -1px 0 0 rgba(6, 11, 14, 0.2) inset; line-height: 32px; outline-style: none; padding: 0; } .gclitoolbar-input-node[focused="true"] { - background-color: var(--gcli-input-focused-background); } + background-color: #232e38; } .gclitoolbar-input-node::before { content: ""; @@ -3249,12 +2870,12 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { - background-color: var(--selection-background); - color: var(--selection-color); + background-color: #cdd9e4; + color: #1f2933; text-shadow: none; } .gclitoolbar-complete-node { @@ -3343,69 +2964,22 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; +.popup-notification-item-title[popupid="bad-content"] { font-weight: bold; } -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } +.popup-notification-item-message[popupid="bad-content"] { + width: 17em; } -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } +.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), +.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { + color: GrayText; } -.login-fill-item.different-hostname > .login-hostname { - color: #888; +.popup-notification-item-message-critical[popupid="bad-content"] { + color: #d74345; font-style: italic; } -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - -moz-margin-start: 38px; } +.popup-notification-footer[popupid="bad-content"] { + padding-top: 1em; } /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3576,6 +3150,16 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); } + +#servicesInstall-notification-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); } + +#social-undoactivation-button { + -moz-margin-start: 0; + /* override default label margin to match description margin */ } + .social-activation-icon { width: auto; height: auto; @@ -3761,6 +3345,7 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; + margin: -285px 0 0; overflow: hidden; } chatbar { @@ -3804,6 +3389,26 @@ chatbox { border-top-left-radius: 2.5px; border-top-right-radius: 2.5px; } +/* EME notifications */ +.popup-notification-icon[popupid="drmContentPlaying"], +#eme-notification-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } + +#eme-notification-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; } + +@keyframes emeTeachingMoment { + 0% { + transform: translateX(0); } + 25% { + transform: translateX(3px); } + 75% { + transform: translateX(-3px); } + 100% { + transform: translateX(0); } } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3930,36 +3535,19 @@ chatbox { #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-lwtheme-button, -#customization-titlebar-visibility-button { + -moz-image-region: rect(0, 24px, 24px, 0); padding: 2px 7px; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ -moz-margin-start: 6px !important; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { - width: 20px; - height: 20px; - border-radius: 2px; - background-size: contain; } - #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); } } #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; @@ -3992,13 +3580,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4318,11 +3906,9 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } -#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4331,7 +3917,6 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4351,7 +3936,6 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4544,15 +4128,6 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } -#context-bookmarkpage[starred=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } - -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { @@ -4571,6 +4146,3 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } - -.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index 1e9114c..7f2ea86 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -15,9 +15,7 @@ --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); - --verified-identity-box-backgroundcolor: transparent; - --panel-separator-color: ThreeDShadow; - --urlbar-separator-color: rgba(41, 41, 41, 0.2); } + --verified-identity-box-backgroundcolor: transparent; } #menubar-items { -moz-box-orient: vertical; @@ -62,8 +60,8 @@ #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top: 1px solid rgba(212, 213, 219, 0.95) !important; background-clip: padding-box; + margin-top: -1px; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ - margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); /* Position the toolbar above the bottom of background tabs */ position: relative; z-index: 1; } @@ -283,7 +281,7 @@ menuitem.bookmark-item { opacity: 0.7; } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } #placesContext_open\:newwindow, @@ -442,10 +440,9 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e #panelMenu_unsortedBookmarks { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } -#panelMenu_pocket, -#menu_pocket, -#BMB_pocket { - list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); } +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); } #menu_openDownloads { list-style-image: url("chrome://browser/skin/Toolbar-small.png"); @@ -491,7 +488,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e .findbar-button > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-icon { -moz-margin-end: 0; padding: 2px 6px; @@ -500,22 +497,25 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([e transition-property: background-color, border-color; transition-duration: 150ms; } -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-stack, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-badge-container > .toolbarbutton-icon, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not(:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } +toolbarbutton.badged-button > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarbutton[type="socialmark"] > .toolbarbutton-icon { + max-width: 32px !important; } + /* Help SDK icons fit: */ -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { width: 16px; } -:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { +:-moz-any(#TabsToolbar, #nav-bar) toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ width: 32px; } #nav-bar #PanelUI-menu-button { - -moz-padding-start: 5px; + -moz-padding-start: 7px; -moz-padding-end: 5px; } #nav-bar #PanelUI-button, @@ -527,7 +527,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background: var(--toolbarbutton-hover-background); border-width: 1px; @@ -549,7 +549,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, -:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, +:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container > .toolbarbutton-icon, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: var(--toolbarbutton-active-background); box-shadow: var(--toolbarbutton-active-boxshadow); @@ -690,11 +690,13 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #sync-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 270px, 18px, 252px); } -#sync-button[cui-areatype="toolbar"][status="active"] { +#sync-button[cui-areatype="toolbar"][status="active"], +#sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png"); -moz-image-region: rect(0, 18px, 18px, 0px); } -toolbar[brighttext] #sync-button[status="active"] { +toolbar[brighttext] #sync-button[status="active"], +toolbar[brighttext] #sync-button[status="active"]:hover:active:not([disabled="true"]) { list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png"); } #feed-button[cui-areatype="toolbar"] { @@ -739,13 +741,6 @@ toolbar[brighttext] #sync-button[status="active"] { #PanelUI-menu-button { -moz-image-region: rect(0, 486px, 18px, 468px); } -#PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger.png") !important; - -moz-image-region: auto !important; } - -toolbar[brighttext] #PanelUI-menu-button.thumburger { - list-style-image: url("chrome://browser/skin/customizableui/thumburger-inverted.png") !important; } - #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button { -moz-image-region: rect(0, 504px, 18px, 486px); } @@ -788,459 +783,234 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #web-apps-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 720px, 18px, 702px); } -#loop-button { +#loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar.png); -moz-image-region: rect(0, 18px, 18px, 0); } -toolbar[brighttext] #loop-button { +toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); } -#loop-button[state="disabled"], -#loop-button[disabled="true"] { +#loop-button[state="disabled"] > .toolbarbutton-badge-container, +#loop-button[disabled="true"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 36px, 18px, 18px); } -#loop-button:not([disabled="true"])[state="error"] { +#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 54px, 18px, 36px); } -#loop-button:not([disabled="true"])[state="action"] { +#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 72px, 18px, 54px); } -#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 90px, 18px, 72px); } -#loop-button:not([disabled="true"])[state="active"] { +#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { -moz-image-region: rect(0, 108px, 18px, 90px); } -#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { +#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { -moz-image-region: rect(0, 126px, 18px, 108px); } #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 738px, 18px, 720px); } -#pocket-button[cui-areatype="toolbar"] { - -moz-image-region: rect(0, 774px, 18px, 756px); } - -#pocket-button[cui-areatype="toolbar"][open] { - -moz-image-region: rect(18px, 774px, 36px, 756px); } - /* Menu panel and palette styles */ +/* Note that this file isn't used for HiDPI on OS X. */ :root { --menupanel-list-style-image: url(chrome://browser/skin/menuPanel.png); - --menupanel-list-style-image-2x: url(chrome://browser/skin/menuPanel@2x.png); - --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); - --menupanel-small-list-style-image-2x: url(chrome://browser/skin/menuPanel-small@2x.png); } - -@media not all and (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 192px, 64px, 160px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 224px, 32px, 192px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 224px, 64px, 192px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 256px, 32px, 224px); } - - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 288px, 32px, 256px); } - - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 320px, 32px, 288px); } - - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 352px, 32px, 320px); } - - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 384px, 32px, 352px); } - - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); - -moz-image-region: rect(0px, 32px, 32px, 0px); } - - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 416px, 32px, 384px); } - - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 416px, 64px, 384px); } - - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 448px, 32px, 416px); } - - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0px, 480px, 32px, 448px); } - - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 480px, 64px, 448px); } - - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 512px, 32px, 480px); } - - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 544px, 32px, 512px); } - - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 576px, 32px, 544px); } - - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 608px, 32px, 576px); } - - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 640px, 32px, 608px); } - - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 672px, 32px, 640px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 704px, 32px, 672px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 736px, 32px, 704px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 736px, 64px, 704px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 768px, 32px, 736px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0, 800px, 32px, 768px); } - - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0, 864px, 32px, 832px); } - - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 864px, 64px, 832px); } - - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 896px, 32px, 864px); } - - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 896px, 64px, 864px); } - - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 928px, 32px, 896px); } - - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 960px, 32px, 928px); } - - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 992px, 32px, 960px); } - - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(32px, 992px, 64px, 960px); } - - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 832px, 32px, 800px); } - - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel.png); - -moz-image-region: rect(0, 32px, 32px, 0); } - - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 32px, 32px, 0) !important; } - - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 64px, 32px, 32px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 96px, 32px, 64px); } - - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 128px, 32px, 96px); } + --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanel-small.png); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 160px, 32px, 128px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton, +:-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button) { + list-style-image: var(--menupanel-list-style-image); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 192px, 32px, 160px); } +#home-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #home-button { + -moz-image-region: rect(0px, 128px, 32px, 96px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 224px, 32px, 192px); } +#bookmarks-menu-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { + -moz-image-region: rect(0px, 192px, 32px, 160px); } - /* Wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image); } +#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 192px, 64px, 160px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 32px, 16px, 16px); } +#history-panelmenu[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #history-panelmenu { + -moz-image-region: rect(0px, 224px, 32px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 48px, 16px, 32px); } +#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 224px, 64px, 192px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 64px, 16px, 48px); } +#downloads-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #downloads-button { + -moz-image-region: rect(0px, 256px, 32px, 224px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 80px, 16px, 64px); } +#add-ons-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #add-ons-button { + -moz-image-region: rect(0px, 288px, 32px, 256px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 96px, 16px, 80px); } +#open-file-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #open-file-button { + -moz-image-region: rect(0px, 320px, 32px, 288px); } - #add-share-provider { - list-style-image: url(chrome://browser/skin/menuPanel-small.png); - -moz-image-region: rect(0px, 96px, 16px, 80px); } } -/* Menu panel and palette styles */ -@media (min-resolution: 1.1dppx) { - toolbaritem[sdkstylewidget="true"] > toolbarbutton, - :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > :-moz-any(#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, #tabview-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, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { - list-style-image: var(--menupanel-list-style-image-2x); } - - #home-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #home-button { - -moz-image-region: rect(0px, 256px, 64px, 192px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #bookmarks-menu-button { - -moz-image-region: rect(0px, 384px, 64px, 320px); } - - #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 384px, 128px, 320px); } - - #history-panelmenu[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #history-panelmenu { - -moz-image-region: rect(0px, 448px, 64px, 384px); } - - #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 448px, 128px, 384px); } - - #downloads-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #downloads-button { - -moz-image-region: rect(0px, 512px, 64px, 448px); } +#save-page-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #save-page-button { + -moz-image-region: rect(0px, 352px, 32px, 320px); } - #add-ons-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #add-ons-button { - -moz-image-region: rect(0px, 576px, 64px, 512px); } +#sync-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sync-button { + -moz-image-region: rect(0px, 384px, 32px, 352px); } - #open-file-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #open-file-button { - -moz-image-region: rect(0px, 640px, 64px, 576px); } +#sync-button[cui-areatype="menu-panel"][status="active"] { + list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png); + -moz-image-region: rect(0px, 32px, 32px, 0px); } - #save-page-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #save-page-button { - -moz-image-region: rect(0px, 704px, 64px, 640px); } +#feed-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #feed-button { + -moz-image-region: rect(0px, 416px, 32px, 384px); } - #sync-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sync-button { - -moz-image-region: rect(0px, 768px, 64px, 704px); } +#social-share-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #social-share-button { + -moz-image-region: rect(0px, 448px, 32px, 416px); } - #sync-button[cui-areatype="menu-panel"][status="active"] { - list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png); - -moz-image-region: rect(0px, 64px, 64px, 0px); } +#characterencoding-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #characterencoding-button { + -moz-image-region: rect(0px, 480px, 32px, 448px); } - #feed-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #feed-button { - -moz-image-region: rect(0px, 832px, 64px, 768px); } +#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 480px, 64px, 448px); } - #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 832px, 128px, 768px); } +#new-window-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-window-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #social-share-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #social-share-button { - -moz-image-region: rect(0px, 896px, 64px, 832px); } +#e10s-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #e10s-button { + -moz-image-region: rect(0px, 512px, 32px, 480px); } - #characterencoding-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #characterencoding-button { - -moz-image-region: rect(0, 960px, 64px, 896px); } +#new-tab-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #new-tab-button { + -moz-image-region: rect(0px, 544px, 32px, 512px); } - #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 960px, 128px, 896px); } +#privatebrowsing-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #privatebrowsing-button { + -moz-image-region: rect(0px, 576px, 32px, 544px); } - #new-window-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-window-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#tabview-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #tabview-button { + -moz-image-region: rect(0px, 608px, 32px, 576px); } - #e10s-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #e10s-button { - -moz-image-region: rect(0px, 1024px, 64px, 960px); } +#find-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #find-button { + -moz-image-region: rect(0px, 640px, 32px, 608px); } - #webide-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #webide-button { - -moz-image-region: rect(0px, 1920px, 64px, 1856px); } +#print-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #print-button { + -moz-image-region: rect(0px, 672px, 32px, 640px); } - #pocket-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #pocket-button { - -moz-image-region: rect(0px, 1984px, 64px, 1920px); } +#fullscreen-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #fullscreen-button { + -moz-image-region: rect(0px, 704px, 32px, 672px); } - #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1984px, 128px, 1920px); } +#developer-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #developer-button { + -moz-image-region: rect(0px, 736px, 32px, 704px); } - #loop-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #loop-button { - list-style-image: url(chrome://browser/skin/loop/menuPanel@2x.png); - -moz-image-region: rect(0, 64px, 64px, 0); } +#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 736px, 64px, 704px); } - /* Make sure that the state icons are not shown in the customization palette. */ - toolbarpaletteitem[place="palette"] > #loop-button { - -moz-image-region: rect(0, 64px, 64px, 0) !important; } +#preferences-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #preferences-button { + -moz-image-region: rect(0px, 768px, 32px, 736px); } - #loop-button[cui-areatype="menu-panel"][state="disabled"], - #loop-button[cui-areatype="menu-panel"][disabled="true"] { - -moz-image-region: rect(0, 128px, 64px, 64px); } +#email-link-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #email-link-button { + -moz-image-region: rect(0, 800px, 32px, 768px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { - -moz-image-region: rect(0, 192px, 64px, 128px); } +#sidebar-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #sidebar-button { + -moz-image-region: rect(0, 864px, 32px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { - -moz-image-region: rect(0, 256px, 64px, 192px); } +#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 864px, 64px, 832px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 320px, 64px, 256px); } +#panic-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #panic-button { + -moz-image-region: rect(0, 896px, 32px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { - -moz-image-region: rect(0, 384px, 64px, 320px); } +#panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 896px, 64px, 864px); } - #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) { - -moz-image-region: rect(0, 448px, 64px, 384px); } +#web-apps-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #web-apps-button { + -moz-image-region: rect(0, 928px, 32px, 896px); } - #new-tab-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #new-tab-button { - -moz-image-region: rect(0px, 1088px, 64px, 1024px); } +#webide-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #webide-button { + -moz-image-region: rect(0px, 960px, 32px, 928px); } - #privatebrowsing-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #privatebrowsing-button { - -moz-image-region: rect(0px, 1152px, 64px, 1088px); } +toolbaritem[sdkstylewidget="true"] > toolbarbutton { + -moz-image-region: rect(0, 832px, 32px, 800px); } - #tabview-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #tabview-button { - -moz-image-region: rect(0px, 1216px, 64px, 1152px); } +#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + list-style-image: url(chrome://browser/skin/loop/menuPanel.png); + -moz-image-region: rect(0, 32px, 32px, 0); } - #find-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #find-button { - -moz-image-region: rect(0px, 1280px, 64px, 1216px); } +/* Make sure that the state icons are not shown in the customization palette. */ +toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 32px, 32px, 0) !important; } - #print-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #print-button { - -moz-image-region: rect(0px, 1344px, 64px, 1280px); } - - #fullscreen-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #fullscreen-button { - -moz-image-region: rect(0px, 1408px, 64px, 1344px); } - - #developer-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #developer-button { - -moz-image-region: rect(0px, 1472px, 64px, 1408px); } - - #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1472px, 128px, 1408px); } - - #preferences-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #preferences-button { - -moz-image-region: rect(0px, 1536px, 64px, 1472px); } - - #email-link-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #email-link-button { - -moz-image-region: rect(0px, 1600px, 64px, 1536px); } +#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, +#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 64px, 32px, 32px); } - #sidebar-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #sidebar-button { - -moz-image-region: rect(0px, 1728px, 64px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 96px, 32px, 64px); } - #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1728px, 128px, 1664px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 128px, 32px, 96px); } - #panic-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #panic-button { - -moz-image-region: rect(0, 1792px, 64px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 160px, 32px, 128px); } - #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { - -moz-image-region: rect(64px, 1792px, 128px, 1728px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 192px, 32px, 160px); } - #web-apps-button[cui-areatype="menu-panel"], - toolbarpaletteitem[place="palette"] > #web-apps-button { - -moz-image-region: rect(0, 1856px, 64px, 1792px); } +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover, :hover:active, [open]) > .toolbarbutton-badge-container { + -moz-image-region: rect(0, 224px, 32px, 192px); } - toolbaritem[sdkstylewidget="true"] > toolbarbutton { - -moz-image-region: rect(0, 1664px, 64px, 1600px); } +/* Wide panel control icons */ +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, +toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, +toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { + list-style-image: var(--menupanel-small-list-style-image); } - /* Footer and wide panel control icons */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton { - list-style-image: var(--menupanel-small-list-style-image-2x); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { + -moz-image-region: rect(0px, 32px, 16px, 16px); } - /* Wide items like the Cut/Copy/Paste and Zoom controls are special in that their icons - are 16x16 when in the panel, but 18x18 when in a toolbar. */ - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon, - toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon { - width: 16px; } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { + -moz-image-region: rect(0px, 48px, 16px, 32px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button { - -moz-image-region: rect(0px, 64px, 32px, 32px); } +#edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, +toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { + -moz-image-region: rect(0px, 64px, 16px, 48px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button { - -moz-image-region: rect(0px, 96px, 32px, 64px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { + -moz-image-region: rect(0px, 80px, 16px, 64px); } - #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button, - toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button { - -moz-image-region: rect(0px, 128px, 32px, 96px); } +#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, +toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button { - -moz-image-region: rect(0px, 160px, 32px, 128px); } +#add-share-provider { + list-style-image: url(chrome://browser/skin/menuPanel-small.png); + -moz-image-region: rect(0px, 96px, 16px, 80px); } - #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button, - toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { - -moz-image-region: rect(0px, 192px, 32px, 160px); } } #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker, #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker, @@ -1282,7 +1052,7 @@ toolbar[brighttext] #loop-button { #urlbar, .searchbar-textbox { -moz-appearance: none; - padding: 2px 3px; + padding: 3px; border-radius: 3px; margin: 0 3px; color: #5c616c; @@ -1314,25 +1084,6 @@ toolbar[brighttext] #loop-button { #urlbar-icons { -moz-box-align: center; } -#urlbar-search-footer { - border-top: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings { - -moz-appearance: none; - -moz-user-focus: ignore; - color: inherit; - margin: 0; - border: 0; - padding: 8px 20px; - background: transparent; } - -#urlbar-search-settings:hover { - background-color: rgba(24, 26, 27, 0.07); } - -#urlbar-search-settings:hover:active { - background-color: rgba(24, 26, 27, 0.12); } - #urlbar-search-splitter { -moz-appearance: none; width: 8px; } @@ -1349,57 +1100,14 @@ toolbar[brighttext] #loop-button { -moz-margin-start: 0; color: GrayText; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { - border-bottom: 1px solid rgba(24, 26, 27, 0.14); - background-color: rgba(24, 26, 27, 0.07); - padding: 6px 0; - -moz-padding-start: 44px; - -moz-padding-end: 6px; - background-image: url("chrome://browser/skin/info.svg"); - background-clip: padding-box; - background-position: 20px center; - background-repeat: no-repeat; - background-size: 16px 16px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { - background-position: right 20px center; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { - margin: 0; - padding: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { - -moz-margin-start: 0; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { - -moz-appearance: none; - -moz-user-focus: ignore; - min-width: 80px; - border-radius: 3px; - padding: 4px 16px; - margin: 0; - -moz-margin-start: 10px; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { - color: #616161; - background-color: #e0e0e0; - border: 1px solid #d1d1d1; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { - background-color: #d6d6d6; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { - color: white; - background-color: #67cc14; - border: 1px solid #67cc14; } - -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { - background-color: #5eba12; } - #search-container { min-width: calc(54px + 11ch); } /* identity box */ +#identity-box { + padding: 1px; + font-size: .9em; } + #identity-box:-moz-locale-dir(ltr) { border-top-left-radius: 1.5px; border-bottom-left-radius: 1.5px; } @@ -1408,98 +1116,192 @@ toolbar[brighttext] #loop-button { border-top-right-radius: 1.5px; border-bottom-right-radius: 1.5px; } -#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { - background-color: var(--identity-box-verified-background-color); } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { + border-radius: 0; } + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { + transition: padding-left, padding-right; } + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + -moz-margin-end: 4px; } + +#identity-box.verifiedIdentity:not(:-moz-lwtheme) { + background-color: var(--verified-identity-box-backgroundcolor); } #identity-box:-moz-focusring { outline: 1px dotted #000; outline-offset: -3px; } -#identity-box { +#identity-icon-labels { + -moz-padding-start: 2px; + -moz-padding-end: 5px; } + +:root { --identity-box-verified-color: #479900; + --identity-box-verified-background-image: linear-gradient(rgba(39, 74, 8, 0), rgba(39, 74, 8, 0.2) 35%, rgba(39, 74, 8, 0.2) 65%, rgba(39, 74, 8, 0)); --identity-box-chrome-color: #e57300; - border-inline-end: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; - font-size: .9em; - padding: 3px 5px 3px 3px; - margin-inline-end: 4px; - overflow: hidden; } + --identity-box-chrome-background-image: linear-gradient(rgba(229, 114, 0, 0), rgba(229, 114, 0, 0.5) 35%, rgba(229, 114, 0, 0.5) 65%, rgba(229, 114, 0, 0)); } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - color: var(--identity-box-verified-color); } - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { - color: var(--identity-box-chrome-color); } + background-position: right; + background-size: 1px; + background-repeat: no-repeat; } -#identity-icon-labels { - padding-inline-start: 2px; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { + background-position: left; } -#notification-popup-box:not([hidden]) + #identity-box { - padding-inline-start: 5px; - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { + color: var(--identity-box-verified-color); + background-image: var(--identity-box-verified-background-image); } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { - border-radius: 0; } +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI { + color: var(--identity-box-chrome-color); + background-image: var(--identity-box-chrome-background-image); } -/* TRACKING PROTECTION ICON */ -#tracking-protection-icon { +/* page proxy icon */ +#page-proxy-favicon { width: 16px; height: 16px; - margin-inline-start: 0; - margin-inline-end: 2px; - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); - opacity: 1; } + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); } +.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://branding/content/identity-icons-brand.png); } -#tracking-protection-icon[animate] { - transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } +.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } -#tracking-protection-icon:not([state]) { - margin-inline-start: -18px; - pointer-events: none; - opacity: 0; - /* Only animate the shield in, when it disappears hide it immediately. */ - transition: none; } +.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } -#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { - visibility: collapse; } +.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } + +.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } + +#page-proxy-favicon[pageproxystate="invalid"] { + opacity: 0.3; } + +#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { + list-style-image: url("chrome://branding/content/icon64.png"); } + +#identity-popup-brandName { + font-weight: bold; + font-size: 1.25em; + margin-top: .5em; + margin-bottom: .5em; } + +#identity-popup-content-box { + max-width: 50ch; } -/* MAIN IDENTITY ICON */ #page-proxy-favicon { - width: 16px; - height: 16px; - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } + margin-top: 1px; + margin-bottom: 1px; + -moz-margin-start: 3px; + -moz-margin-end: 1px; + -moz-image-region: rect(0, 16px, 16px, 0); } -.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } +#identity-box:hover > #page-proxy-favicon { + -moz-image-region: rect(0, 32px, 16px, 16px); } -.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-secure.svg); } +#identity-box:hover:active > #page-proxy-favicon, +#identity-box[open=true] > #page-proxy-favicon { + -moz-image-region: rect(0, 48px, 16px, 32px); } -.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } +/* Identity popup icons */ +#identity-popup-icon { + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); } -.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], -.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(64px, 64px, 128px, 0px); } -.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); } +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(128px, 64px, 192px, 0px); } -#page-proxy-favicon[pageproxystate="invalid"] { - opacity: 0.3; } +/* Identity popup body text */ +.identity-popup-description { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; } -#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { - -moz-image-region: inherit; - list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); - width: 16px; +.identity-popup-label { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; } + +#identity-popup-content-host, +#identity-popup-content-owner { + font-weight: bold; + max-width: 300px; } + +#identity-popup-content-host, +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { + font-size: 140%; } + +#identity-popup-content-owner { + margin-bottom: 0 !important; } + +#identity-popup-content-verifier { + margin: 4px 0 2px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { + margin-top: 10px; + -moz-margin-start: -18px; } + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/Secure.png"); } + +#identity-popup-help-icon { + -moz-appearance: none; + margin-left: 0px; + border: none; + background: none; + min-width: 0; + list-style-image: url("chrome://global/skin/icons/question-16.png"); + cursor: pointer; } + +#identity-popup-help-icon > .button-box > .button-text { + display: none; } + +#identity-popup-help-icon > .button-box > .button-icon { height: 16px; - opacity: 1; } + width: 16px; } + +#identity-popup-help-icon:-moz-focusring { + outline: 1px dotted; + outline-offset: 1px; } + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; } + +#identity-popup-container { + min-width: 280px; + padding: 10px; } + +#identity-popup-button-container { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); + padding: 10px; + margin-top: 5px; } + +/* Notification popup */ +#notification-popup { + min-width: 280px; } .popup-notification-icon { width: 64px; @@ -1509,31 +1311,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="geolocation"] { list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); } - .popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-progress"], +.popup-notification-icon[popupid="addon-install-cancelled"], .popup-notification-icon[popupid="addon-install-blocked"], -.popup-notification-icon[popupid="addon-install-origin-blocked"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } - -.popup-notification-icon[popupid="addon-progress"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } - -.popup-notification-icon[popupid="addon-install-failed"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } - -.popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } - -#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } - +.popup-notification-icon[popupid="addon-install-origin-blocked"], +.popup-notification-icon[popupid="addon-install-failed"], .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } - -.popup-notification-icon[popupid="addon-install-restart"] { - list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); + width: 32px; + height: 32px; } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1541,18 +1328,46 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box .popup-notification-icon[popupid="web-notifications"] { list-style-image: url(chrome://browser/skin/notification-64.png); } +.addon-progress-description { + width: 350px; + max-width: 350px; } + +.popup-progress-label, +.popup-progress-meter { + -moz-margin-start: 0; + -moz-margin-end: 0; } + +.popup-progress-cancel { + -moz-appearance: none; + background: transparent; + border: none; + padding: 0; + margin: 0; + -moz-margin-start: 5px; + min-height: 0; + min-width: 0; + list-style-image: url("moz-icon://stock/gtk-cancel?size=menu"); } + .popup-notification-icon[popupid="indexedDB-permissions-prompt"], .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } -.popup-notification-icon[popupid="password"] { +.popup-notification-icon[popupid="password-save"], +.popup-notification-icon[popupid="password-change"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } .popup-notification-icon[popupid="webapps-install-progress"], .popup-notification-icon[popupid="webapps-install"] { list-style-image: url(chrome://global/skin/icons/webapps-64.png); } +.popup-notification-icon[popupid="bad-content"] { + list-style-image: url(chrome://browser/skin/bad-content-blocked-64.png); } + +.popup-notification-icon[popupid="bad-content"][mixedblockdisabled], +.popup-notification-icon[popupid="bad-content"][trackingblockdisabled] { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-64.png); } + .popup-notification-icon[popupid="webRTC-sharingDevices"], .popup-notification-icon[popupid="webRTC-shareDevices"] { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64.png); } @@ -1579,36 +1394,36 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #dcdfe3; } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 2px; + border-radius: 0; } + #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; height: 16px; margin: 0 2px; } +.notification-anchor-icon:-moz-focusring { + outline: 1px dotted -moz-DialogText; } + +.default-notification-icon, +#default-notification-icon { + list-style-image: url(chrome://global/skin/icons/information-16.png); } + .identity-notification-icon, #identity-notification-icon { - list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); - /* XXX: need HiDPI version */ } + list-style-image: url(chrome://mozapps/skin/profile/profileicon.png); } .geo-notification-icon, #geo-notification-icon { list-style-image: url(chrome://browser/skin/Geolocation-16.png); } -#push-notification-icon { - list-style-image: url(chrome://browser/skin/Push-16.png); } - #addons-notification-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } - -#addons-notification-icon:hover { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } - -#addons-notification-icon:hover:active { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } + list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1617,12 +1432,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } -#login-fill-notification-icon { - /* Temporary icon until the capture and fill doorhangers are unified. */ - list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); - transform: scaleX(-1); } - -.webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1658,6 +1467,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0; } to { opacity: 1; } } +.bad-content-blocked-notification-icon, +#bad-content-blocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-blocked-16.png); } + +.bad-content-unblocked-notification-icon, +#bad-content-unblocked-notification-icon { + list-style-image: url(chrome://browser/skin/bad-content-unblocked-16.png); } + .webRTC-shareDevices-notification-icon, #webRTC-shareDevices-notification-icon { list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16.png); } @@ -1686,104 +1503,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #web-notifications-notification-icon { list-style-image: url(chrome://browser/skin/notification-16.png); } -.pointerLock-notification-icon, #pointerLock-notification-icon { list-style-image: url(chrome://browser/skin/pointerLock-16.png); } -.translate-notification-icon, -#translate-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 16px, 16px, 0px); } - -.translated-notification-icon, -#translated-notification-icon { - list-style-image: url(chrome://browser/skin/translation-16.png); - -moz-image-region: rect(0px, 32px, 16px, 16px); } - -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url(chrome://browser/skin/social/services-64.png); } - -#servicesInstall-notification-icon { - list-style-image: url(chrome://browser/skin/social/services-16.png); } - -/* EME notifications */ -.popup-notification-icon[popupid="drmContentPlaying"], -#eme-notification-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } - -#eme-notification-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; } - -@keyframes emeTeachingMoment { - 0% { - transform: translateX(0); } - 25% { - transform: translateX(3px); } - 75% { - transform: translateX(-3px); } - 100% { - transform: translateX(0); } } -/* HiDPI notification icons */ -@media (min-resolution: 1.1dppx) { - .notification-anchor-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog); } - - .webRTC-shareDevices-notification-icon, - #webRTC-shareDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); } - - .webRTC-sharingDevices-notification-icon, - #webRTC-sharingDevices-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); } - - .webRTC-shareMicrophone-notification-icon, - #webRTC-shareMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); } - - .webRTC-sharingMicrophone-notification-icon, - #webRTC-sharingMicrophone-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); } - - .webRTC-shareScreen-notification-icon, - #webRTC-shareScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); } - - .webRTC-sharingScreen-notification-icon, - #webRTC-sharingScreen-notification-icon { - list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingDevices"], - .popup-notification-icon[popupid="webRTC-shareDevices"] { - list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingMicrophone"], - .popup-notification-icon[popupid="webRTC-shareMicrophone"] { - list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); } - - .popup-notification-icon[popupid="webRTC-sharingScreen"], - .popup-notification-icon[popupid="webRTC-shareScreen"] { - list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); } } -.popup-notification-body[popupid="addon-progress"], -.popup-notification-body[popupid="addon-install-confirmation"] { - width: 28em; - max-width: 28em; } - -.addon-install-confirmation-name { - font-weight: bold; } - -/* Notification icon box */ -#notification-popup-box { - border-radius: 2.5px 0 0 2.5px; } - -.notification-anchor-icon:-moz-focusring { - outline: 1px dotted -moz-DialogText; } - -.indexedDB-notification-icon, -#indexedDB-notification-icon { - list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } +#pointerLock-cancel { + margin: 0px; } /* Translation infobar */ notification[value="translation"] .messageImage { @@ -1801,9 +1525,6 @@ notification[value="translation"][state="translating"] .messageImage { @media (min-resolution: 1.25dppx) { notification[value="translation"][state="translating"] .messageImage { list-style-image: url(chrome://browser/skin/translating-16@2x.png); } } -notification[value="translation"] hbox[anonid="details"] { - overflow: hidden; } - notification[value="translation"] button, notification[value="translation"] menulist { -moz-appearance: none; @@ -1914,6 +1635,16 @@ notification[value="translation"] button:not([type="menu"]) > .button-box { notification[value="translation"] menulist > .menulist-dropmarker { display: block; } +.translate-notification-icon, +#translate-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 16px, 16px, 0px); } + +.translated-notification-icon, +#translated-notification-icon { + list-style-image: url(chrome://browser/skin/translation-16.png); + -moz-image-region: rect(0px, 32px, 16px, 16px); } + /* Loop/ Hello browser styles */ notification[value="loop-sharing-notification"] .button-menubutton-button { min-width: 0; } @@ -1949,9 +1680,7 @@ richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-t width: 16px; height: 16px; } -.ac-comment, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { +.ac-comment { font-size: 1.05em; } .ac-extra > .ac-comment { @@ -1983,24 +1712,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border-top: 1px solid GrayText; } /* Combined go/reload/stop button in location bar */ -#urlbar-go-button, -#urlbar-reload-button, -#urlbar-stop-button { +#urlbar > toolbarbutton { -moz-appearance: none; - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); - padding: 0 4px 0 6px; - margin-inline-start: 2px; - border-inline-start: 1px solid var(--urlbar-separator-color); - border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%); - border-image-slice: 1; } + padding: 0 2px; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { + background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2010,9 +1735,11 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2022,51 +1749,43 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { + background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } -@media (min-resolution: 1.1dppx) { - #urlbar-go-button, - #urlbar-reload-button, - #urlbar-stop-button { - list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); } - - #urlbar-go-button > .toolbarbutton-icon, - #urlbar-reload-button > .toolbarbutton-icon, - #urlbar-stop-button > .toolbarbutton-icon { - width: 14px; } - - #urlbar-go-button { - -moz-image-region: rect(0, 84px, 28px, 56px); } - - #urlbar-go-button:hover { - -moz-image-region: rect(28px, 84px, 56px, 56px); } +/* Popup blocker button */ +#page-report-button { + list-style-image: url("chrome://browser/skin/Info.png"); } - #urlbar-go-button:hover:active { - -moz-image-region: rect(56px, 84px, 84px, 56px); } +/* Reading List button */ +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; } - #urlbar-reload-button { - -moz-image-region: rect(0, 28px, 28px, 0); } +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; } - #urlbar-reload-button:not([disabled]):hover { - -moz-image-region: rect(28px, 28px, 56px, 0); } +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); } - #urlbar-reload-button:not([disabled]):hover:active { - -moz-image-region: rect(56px, 28px, 84px, 0); } +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); } - #urlbar-stop-button { - -moz-image-region: rect(0, 56px, 28px, 28px); } +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); } - #urlbar-stop-button:not([disabled]):hover { - -moz-image-region: rect(28px, 56px, 56px, 28px); } +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); } - #urlbar-stop-button:hover:active { - -moz-image-region: rect(56px, 56px, 84px, 28px); } } -/* Popup blocker button */ -#page-report-button { - list-style-image: url("chrome://browser/skin/Info.png"); } +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); } /* Reader mode button */ #reader-mode-button { @@ -2262,12 +1981,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- /* Tabstrip */ :root { --tab-toolbar-navbar-overlap: 1px; - --navbar-tab-toolbar-highlight-overlap: 1px; --tab-min-height: 31px; } -#TabsToolbar { - --tab-stroke-background-size: auto 100%; } - /* image preloading hack */ #tabbrowser-tabs::before { /* Because of bug 853415, we need to ordinal this to the first position: */ @@ -2290,13 +2005,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-tab { -moz-box-align: stretch; } +.tabbrowser-tab[remote] { + text-decoration: underline; } + .tabbrowser-tab[selected="true"], .tabbrowser-tab[selected="true"]:hover, .tabbrowser-tab:not([selected="true"]):hover { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -2316,7 +2034,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-throbber, .tab-icon-image, -.tab-icon-sound, .tab-close-button { margin-top: 1px; } @@ -2332,33 +2049,14 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tab-icon-overlay { width: 16px; height: 16px; - margin-top: -12px; + margin-top: 10px; -moz-margin-start: -16px; - position: relative; } + display: none; } .tab-icon-overlay[crashed] { + display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]) { - border-radius: 8px; } - -.tab-icon-overlay[soundplaying]:hover, -.tab-icon-overlay[muted]:not([crashed]):hover { - background-color: white; } - -.tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio"); } - -.tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio-muted"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio"); } - -.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[muted]:not([crashed]) { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio-small.svg#tab-audio-muted"); } - .tab-throbber[busy] { list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); } @@ -2374,48 +2072,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -2px; padding: 0; } -.tab-icon-sound { - -moz-margin-start: 4px; - width: 16px; - height: 16px; - padding: 0; } - -.tab-icon-sound[soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab"); } - -.tab-icon-sound[soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-hover"); } - -.tab-icon-sound[soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-pressed"); } - -.tab-icon-sound[muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-muted"); } - -.tab-icon-sound[muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-hover"); } - -.tab-icon-sound[muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } - -.tab-icon-sound[visuallyselected=true][soundplaying] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } - -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } - -.tab-icon-sound[visuallyselected=true][muted] { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } - -.tab-icon-sound[visuallyselected=true][muted]:hover:active { - list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } - .tab-background, .tabs-newtab-button { /* overlap the tab curves */ @@ -2432,7 +2088,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-overflow-indicator.png); background-size: 100% 100%; width: 14px; - margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); + margin-bottom: var(--tab-toolbar-navbar-overlap); pointer-events: none; position: relative; z-index: 3; @@ -2458,16 +2114,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2484,8 +2140,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ -moz-margin-start: -30px; background-size: 100% 100%; @@ -2493,64 +2149,64 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: -moz-box; position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-middle.svg); background-repeat: repeat-x; - background-size: var(--tab-stroke-background-size); + background-size: auto; /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */ padding-top: 2px; } /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); /*, lwtHeader;*/ /* Don't stretch the LWT header images */ - background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } + background-size: auto 100%, auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 0px, transparent 2px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0.3)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/light/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/light/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; @@ -2563,9 +2219,6 @@ lwtHeader;*/ .tab-background-middle, .tabs-newtab-button, -.tab-icon-overlay[soundplaying], -.tab-icon-overlay[muted]:not([crashed]), -.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -2575,7 +2228,7 @@ lwtHeader;*/ height: 100%; position: absolute; } -.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; @@ -2605,9 +2258,8 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag"); } -.tabbrowser-tab:focus > .tab-stack > .tab-content { - outline: 1px dotted; - outline-offset: -6px; } +.tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label { + outline: 1px dotted; } #context_reloadTab { list-style-image: url("moz-icon://stock/gtk-refresh?size=menu"); } @@ -2812,12 +2464,19 @@ toolbarbutton.chevron > .toolbarbutton-icon { padding: 30px 50px; box-shadow: 0 0 2px white; } +#full-screen-warning-container[obscure-browser] { + background-color: rgba(0, 0, 0, 0.3); } + .full-screen-description { font-size: 150%; } #full-screen-domain-text { font-size: 300%; } +.full-screen-approval-button, +#full-screen-remember-decision { + font-size: 120%; } + /* Responsive Mode */ .browserContainer[responsivemode] { background-color: #222; @@ -2943,7 +2602,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2956,7 +2615,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2966,7 +2625,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3068,7 +2727,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3078,47 +2737,14 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-resizehandle { background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png"); } } /* Developer toolbar */ -/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. - We are copy/pasting variables from light-theme and dark-theme, - since they aren't loaded in this context (within browser.css). */ -:root[devtoolstheme="light"] #developer-toolbar { - --gcli-background-color: #ebeced; - /* --theme-tab-toolbar-background */ - --gcli-input-background: #f0f1f2; - /* --theme-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; - /* --theme-sidebar-background */ - --gcli-input-color: #18191a; - /* --theme-body-color */ - --gcli-border-color: #aaaaaa; - /* --theme-splitter-color */ - --selection-background: #4c9ed9; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - -:root[devtoolstheme="dark"] #developer-toolbar { - --gcli-background-color: #343c45; - /* --theme-toolbar-background */ - --gcli-input-background: rgba(37, 44, 51, 0.6); - /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #252c33; - /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; - /* --theme-body-color-alt */ - --gcli-border-color: black; - /* --theme-splitter-color */ - --selection-background: #1d4f73; - /* --theme-selection-background */ - --selection-color: #f5f7fa; - /* --theme-selection-color */ } - #developer-toolbar { -moz-appearance: none; padding: 0; min-height: 32px; - background-color: var(--gcli-background-color); - border-top: 1px solid var(--gcli-border-color); } + background-color: #343C45; + /* Toolbars */ + border-top: 1px solid #060a0d; + box-shadow: 0 1px 0 rgba(248, 250, 252, 0.05) inset, 0 -1px 0 rgba(6, 11, 14, 0.1) inset; } #developer-toolbar > toolbarbutton { -moz-appearance: none; @@ -3131,10 +2757,6 @@ toolbarbutton.chevron > .toolbarbutton-icon { .developer-toolbar-button > image { margin: auto 10px; } -:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image, -:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); } - .developer-toolbar-button > .toolbarbutton-icon, #developer-toolbar-closebutton > .toolbarbutton-icon { width: 16px; @@ -3156,7 +2778,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3178,7 +2800,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3218,22 +2840,21 @@ html|*#gcli-output-frame { text-shadow: none; box-shadow: none; border-width: 0; - background-color: transparent; - border-radius: 0; } + background-color: transparent; } .gclitoolbar-input-node { -moz-appearance: none; - color: var(--gcli-input-color); - background-color: var(--gcli-input-background); + color: #cdd9e4; + background-color: #242b33; background-repeat: no-repeat; background-position: 4px center; - box-shadow: 1px 0 0 var(--gcli-border-color) inset, -1px 0 0 var(--gcli-border-color) inset; + box-shadow: 0 1px 1px rgba(6, 11, 14, 0.2) inset, 1px 0 0 rgba(6, 11, 14, 0.2) inset, -1px 0 0 rgba(6, 11, 14, 0.2) inset; line-height: 32px; outline-style: none; padding: 0; } .gclitoolbar-input-node[focused="true"] { - background-color: var(--gcli-input-focused-background); } + background-color: #232e38; } .gclitoolbar-input-node::before { content: ""; @@ -3249,12 +2870,12 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { - background-color: var(--selection-background); - color: var(--selection-color); + background-color: #cdd9e4; + color: #1f2933; text-shadow: none; } .gclitoolbar-complete-node { @@ -3343,69 +2964,22 @@ notification.pluginVulnerable { notification.pluginVulnerable .messageImage { list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); } -#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { - /* Since we display a sliding subview that extends to the border, we cannot - * keep the default padding of arrow panels. We use the same padding in the - * individual content views instead. Since we removed the padding, we also - * have to ensure the contents are clipped to the border box. */ - padding: 0; - overflow: hidden; } - -#login-fill-mainview, -#login-fill-details { - padding: var(--panel-arrowcontent-padding); } - -#login-fill-doorhanger[inDetailView] > #login-fill-mainview { - transform: translateX(-14px); } - -#login-fill-mainview, -#login-fill-details { - transition: transform 150ms; } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { - transform: translateX(105%); } - -#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { - transform: translateX(-105%); } - -#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { - background-color: rgba(24, 26, 27, 0.1); } - -#login-fill-testing { - color: #b33; +.popup-notification-item-title[popupid="bad-content"] { font-weight: bold; } -#login-fill-list { - border: 1px solid black; - max-height: 20em; } - -.login-fill-item[disabled] { - color: #888; - background-color: #fff; } +.popup-notification-item-message[popupid="bad-content"] { + width: 17em; } -.login-fill-item[disabled][selected] { - background-color: #eef; } - -.login-hostname { - margin: 4px; - font-weight: bold; } +.popup-notification-item-message[popupid="bad-content"][mixedblockdisabled]:not(.popup-notification-item-message-critical), +.popup-notification-item-message[popupid="bad-content"][trackingblockdisabled]:not(.popup-notification-item-message-critical) { + color: GrayText; } -.login-fill-item.different-hostname > .login-hostname { - color: #888; +.popup-notification-item-message-critical[popupid="bad-content"] { + color: #d74345; font-style: italic; } -.login-username { - margin: 4px; - color: #888; } - -#login-fill-details { - padding: 4px; - background: var(--panel-arrowcontent-background); - color: var(--panel-arrowcontent-color); - background-clip: padding-box; - border-left: 1px solid rgba(24, 26, 27, 0.3); - box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); - -moz-margin-start: 38px; } +.popup-notification-footer[popupid="bad-content"] { + padding-top: 1em; } /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3576,6 +3150,16 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url(chrome://browser/skin/social/services-64.png); } + +#servicesInstall-notification-icon { + list-style-image: url(chrome://browser/skin/social/services-16.png); } + +#social-undoactivation-button { + -moz-margin-start: 0; + /* override default label margin to match description margin */ } + .social-activation-icon { width: auto; height: auto; @@ -3761,6 +3345,7 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; + margin: -285px 0 0; overflow: hidden; } chatbar { @@ -3804,6 +3389,26 @@ chatbox { border-top-left-radius: 2.5px; border-top-right-radius: 2.5px; } +/* EME notifications */ +.popup-notification-icon[popupid="drmContentPlaying"], +#eme-notification-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } + +#eme-notification-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; } + +@keyframes emeTeachingMoment { + 0% { + transform: translateX(0); } + 25% { + transform: translateX(3px); } + 75% { + transform: translateX(-3px); } + 100% { + transform: translateX(0); } } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this @@ -3930,36 +3535,19 @@ chatbox { #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-lwtheme-button, -#customization-titlebar-visibility-button { + -moz-image-region: rect(0, 24px, 24px, 0); padding: 2px 7px; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ -moz-margin-start: 6px !important; } -#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { - width: 20px; - height: 20px; - border-radius: 2px; - background-size: contain; } - #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); } } #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; @@ -3992,13 +3580,13 @@ toolbarpaletteitem[notransition][place="panel"] { transition: none; } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform 0.3s cubic-bezier(0.6, 2, 0.75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { transform: scale(1.3); } toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item, @@ -4318,11 +3906,9 @@ toolbarpaletteitem[place="toolbar"] { margin: 24px -16px -16px; padding: 2em 15px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } -#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -4331,7 +3917,6 @@ toolbarpaletteitem[place="toolbar"] { height: 16px; -moz-margin-end: 5px; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -4351,7 +3936,6 @@ toolbarpaletteitem[place="toolbar"] { border-color: rgba(24, 26, 27, 0.15); box-shadow: 0 1px 0 0 rgba(24, 26, 27, 0.05) inset; } -#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -4544,15 +4128,6 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } -#context-bookmarkpage[starred=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } - -#context-bookmarkpage[starred=true][_moz-menuactive=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } - -#context-bookmarkpage[starred=true][disabled=true] { - list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } - #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { @@ -4571,6 +4146,3 @@ notification.heartbeat { /* override toolkit/themes/linux/global/menu.css */ -moz-padding-end: 0 !important; -moz-margin-end: 0 !important; } - -.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } diff --git a/arc-firefox-theme/chrome/browser/search-arrow-go.svg b/arc-firefox-theme/chrome/browser/search-arrow-go.svg deleted file mode 100644 index ddddff1..0000000 --- a/arc-firefox-theme/chrome/browser/search-arrow-go.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/search-history-icon.svg b/arc-firefox-theme/chrome/browser/search-history-icon.svg index 213694a..be66d39 100644 --- a/arc-firefox-theme/chrome/browser/search-history-icon.svg +++ b/arc-firefox-theme/chrome/browser/search-history-icon.svg @@ -2,21 +2,31 @@ - - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/search-indicator-add-engine.png b/arc-firefox-theme/chrome/browser/search-indicator-add-engine.png new file mode 100644 index 0000000..bff355b Binary files /dev/null and b/arc-firefox-theme/chrome/browser/search-indicator-add-engine.png differ diff --git a/arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg b/arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg deleted file mode 100644 index 15bddfb..0000000 --- a/arc-firefox-theme/chrome/browser/search-indicator-magnifying-glass.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/browser/searchbar.css b/arc-firefox-theme/chrome/browser/searchbar.css index 08fd9dd..02c8a01 100644 --- a/arc-firefox-theme/chrome/browser/searchbar.css +++ b/arc-firefox-theme/chrome/browser/searchbar.css @@ -7,6 +7,11 @@ padding: 1px; } +.searchbar-textbox { + min-height: 22px; + background-color: -moz-field; +} + .autocomplete-textbox-container { -moz-box-align: stretch; } @@ -76,8 +81,6 @@ menuitem[cmd="cmd_clearhistory"][disabled] { .searchbar-search-button { list-style-image: url("chrome://browser/skin/search-indicator.png"); -moz-image-region: rect(0, 20px, 20px, 0); - margin-top: 1px; - margin-bottom: 1px; -moz-margin-start: 2px; } @@ -116,7 +119,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon -moz-box-align: center; } -.search-panel-current-engine { +.search-panel-current-engine:not([showonlysettings]) { border-bottom: 1px solid #ccc; } @@ -128,17 +131,8 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon color: #666; } -.search-panel-tree[collapsed=true] + .search-panel-header { - border-top: none; -} - -.search-panel-header > label { - margin-top: 2px !important; - margin-bottom: 1px !important; -} - .search-panel-current-input > label { - margin: 2px 0 1px !important; + margin: 0 0 !important; } .search-panel-input-value { @@ -165,7 +159,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon } .searchbar-engine-one-off-item:not(.last-row) { - box-sizing: content-box; + box-sizing: padding-box; border-bottom: 1px solid #ccc; } diff --git a/arc-firefox-theme/chrome/browser/session-restore.svg b/arc-firefox-theme/chrome/browser/session-restore.svg index f545a33..aadee35 100644 --- a/arc-firefox-theme/chrome/browser/session-restore.svg +++ b/arc-firefox-theme/chrome/browser/session-restore.svg @@ -1,13 +1,12 @@ - - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/social/chat-icons.svg b/arc-firefox-theme/chrome/browser/social/chat-icons.svg index a11bc65..272fe5b 100644 --- a/arc-firefox-theme/chrome/browser/social/chat-icons.svg +++ b/arc-firefox-theme/chrome/browser/social/chat-icons.svg @@ -2,34 +2,44 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/sync-horizontalbar@2x.png b/arc-firefox-theme/chrome/browser/sync-horizontalbar@2x.png deleted file mode 100644 index fadb575..0000000 Binary files a/arc-firefox-theme/chrome/browser/sync-horizontalbar@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/syncProgress-horizontalbar@2x.png b/arc-firefox-theme/chrome/browser/syncProgress-horizontalbar@2x.png deleted file mode 100644 index e1de476..0000000 Binary files a/arc-firefox-theme/chrome/browser/syncProgress-horizontalbar@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/syncProgress-menuPanel@2x.png b/arc-firefox-theme/chrome/browser/syncProgress-menuPanel@2x.png deleted file mode 100644 index 04b2cae..0000000 Binary files a/arc-firefox-theme/chrome/browser/syncProgress-menuPanel@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/syncProgress.css b/arc-firefox-theme/chrome/browser/syncProgress.css new file mode 100644 index 0000000..d7aa599 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/syncProgress.css @@ -0,0 +1,46 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@import url(chrome://global/skin/inContentUI.css); + +:root { + height: 100%; + width: 100%; + padding: 0; +} + +body { + margin: 0; + padding: 0 2em; +} + +#floatingBox { + margin: 4em auto; + max-width: 40em; + min-width: 23em; + padding: 1em 1.5em; + position: relative; + text-align: center; +} + +#successLogo { + margin: 1em 2em; +} + +#loadingText { + margin: 2em 6em; +} + +#progressBar { + margin: 2em 10em; +} + +#uploadProgressBar{ + width: 100%; +} + +#bottomRow { + margin-top: 2em; + padding: 0; + text-align: end; +} diff --git a/arc-firefox-theme/chrome/browser/tab-crashed.svg b/arc-firefox-theme/chrome/browser/tab-crashed.svg index 41470df..9a656eb 100644 --- a/arc-firefox-theme/chrome/browser/tab-crashed.svg +++ b/arc-firefox-theme/chrome/browser/tab-crashed.svg @@ -1,13 +1,16 @@ - - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg b/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg index 85f3d85..013e2b9 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg @@ -1,14 +1,11 @@ - - - - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png b/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png index 512b525..82bac53 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png and b/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-active-middle.png b/arc-firefox-theme/chrome/browser/tabbrowser/tab-active-middle.png index b7e6d6f..c3e5e18 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/tab-active-middle.png and b/arc-firefox-theme/chrome/browser/tabbrowser/tab-active-middle.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg deleted file mode 100644 index 27a36c4..0000000 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio-small.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg deleted file mode 100644 index e62a69f..0000000 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-audio.svg +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-end.png b/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-end.png index fb353b1..2e515a3 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-end.png and b/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-end.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-middle.png b/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-middle.png index 51e066c..addb64b 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-middle.png and b/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-middle.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-start.png b/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-start.png index cf0dc85..243bf00 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-start.png and b/arc-firefox-theme/chrome/browser/tabbrowser/tab-background-start.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg index 72c2544..ba68a06 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg @@ -1,14 +1,23 @@ - + + -
diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg index 2b8845e..383b5d4 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg @@ -1,14 +1,23 @@ - + + -
diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-separator.png b/arc-firefox-theme/chrome/browser/tabbrowser/tab-separator.png new file mode 100644 index 0000000..0b3c4e4 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/tabbrowser/tab-separator.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-end.png b/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-end.png index 2aa5711..0999785 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-end.png and b/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-end.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-start.png b/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-start.png index 4e4e41f..e5a7b5e 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-start.png and b/arc-firefox-theme/chrome/browser/tabbrowser/tab-stroke-start.png differ diff --git a/arc-firefox-theme/chrome/browser/theme-switcher-icon.png b/arc-firefox-theme/chrome/browser/theme-switcher-icon.png index 891e7af..f1e9a02 100644 Binary files a/arc-firefox-theme/chrome/browser/theme-switcher-icon.png and b/arc-firefox-theme/chrome/browser/theme-switcher-icon.png differ diff --git a/arc-firefox-theme/chrome/browser/tracking-protection-16.svg b/arc-firefox-theme/chrome/browser/tracking-protection-16.svg deleted file mode 100755 index ebe6b5f..0000000 --- a/arc-firefox-theme/chrome/browser/tracking-protection-16.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg b/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg deleted file mode 100755 index b0c68d2..0000000 --- a/arc-firefox-theme/chrome/browser/tracking-protection-disabled-16.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/update-badge-failed.svg b/arc-firefox-theme/chrome/browser/update-badge-failed.svg deleted file mode 100644 index e31e6ec..0000000 --- a/arc-firefox-theme/chrome/browser/update-badge-failed.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/arc-firefox-theme/chrome/browser/update-badge.svg b/arc-firefox-theme/chrome/browser/update-badge.svg index 3b692e5..6a4c2a0 100644 --- a/arc-firefox-theme/chrome/browser/update-badge.svg +++ b/arc-firefox-theme/chrome/browser/update-badge.svg @@ -1,6 +1,3 @@ - - + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/urlbar-arrow.png b/arc-firefox-theme/chrome/browser/urlbar-arrow.png index ed83d8a..fcab253 100644 Binary files a/arc-firefox-theme/chrome/browser/urlbar-arrow.png and b/arc-firefox-theme/chrome/browser/urlbar-arrow.png differ diff --git a/arc-firefox-theme/chrome/browser/urlbar-arrow@2x.png b/arc-firefox-theme/chrome/browser/urlbar-arrow@2x.png deleted file mode 100644 index 91d9f8d..0000000 Binary files a/arc-firefox-theme/chrome/browser/urlbar-arrow@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/warning.svg b/arc-firefox-theme/chrome/browser/warning.svg deleted file mode 100644 index 7befd73..0000000 --- a/arc-firefox-theme/chrome/browser/warning.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/browser/warning16.png b/arc-firefox-theme/chrome/browser/warning16.png new file mode 100644 index 0000000..46200ce Binary files /dev/null and b/arc-firefox-theme/chrome/browser/warning16.png differ diff --git a/arc-firefox-theme/chrome/browser/warning16@2x.png b/arc-firefox-theme/chrome/browser/warning16@2x.png new file mode 100644 index 0000000..d1426d3 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/warning16@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareDevice-16@2x.png b/arc-firefox-theme/chrome/browser/webRTC-shareDevice-16@2x.png deleted file mode 100644 index 72d53e6..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareDevice-16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareDevice-64@2x.png b/arc-firefox-theme/chrome/browser/webRTC-shareDevice-64@2x.png deleted file mode 100644 index 82e591f..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareDevice-64@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16.png b/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16.png index fea67f7..ac67cdb 100644 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16.png and b/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16.png differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16@2x.png b/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16@2x.png deleted file mode 100644 index 590d032..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64.png b/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64.png index f2ca85c..6bb5a88 100644 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64.png and b/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64.png differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64@2x.png b/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64@2x.png deleted file mode 100644 index 46cc433..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareMicrophone-64@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareScreen-16@2x.png b/arc-firefox-theme/chrome/browser/webRTC-shareScreen-16@2x.png deleted file mode 100644 index 6eae122..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareScreen-16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-shareScreen-64@2x.png b/arc-firefox-theme/chrome/browser/webRTC-shareScreen-64@2x.png deleted file mode 100644 index 8d57427..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-shareScreen-64@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-sharingDevice-16@2x.png b/arc-firefox-theme/chrome/browser/webRTC-sharingDevice-16@2x.png deleted file mode 100644 index cf1dd9a..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-sharingDevice-16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-sharingMicrophone-16@2x.png b/arc-firefox-theme/chrome/browser/webRTC-sharingMicrophone-16@2x.png deleted file mode 100644 index b45d08c..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-sharingMicrophone-16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/webRTC-sharingScreen-16@2x.png b/arc-firefox-theme/chrome/browser/webRTC-sharingScreen-16@2x.png deleted file mode 100644 index a0aac6c..0000000 Binary files a/arc-firefox-theme/chrome/browser/webRTC-sharingScreen-16@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/welcome-back.svg b/arc-firefox-theme/chrome/browser/welcome-back.svg index 2fbea04..38610cb 100644 --- a/arc-firefox-theme/chrome/browser/welcome-back.svg +++ b/arc-firefox-theme/chrome/browser/welcome-back.svg @@ -1,13 +1,17 @@ - - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/global/aboutReader.css b/arc-firefox-theme/chrome/global/aboutReader.css index 8121e5f..2d6d3c5 100644 --- a/arc-firefox-theme/chrome/global/aboutReader.css +++ b/arc-firefox-theme/chrome/global/aboutReader.css @@ -4,6 +4,8 @@ body { padding: 64px 0; + max-width: 660px; + margin: 0 auto; } @media (max-width: 785px) { @@ -19,106 +21,537 @@ body.loaded { transition: color 0.4s, background-color 0.4s; } -body.light { +.light, +.light-button { color: #333333; background-color: #ffffff; } -body.dark { +.dark, +.dark-button { color: #eeeeee; background-color: #333333; } -body.dark *::-moz-selection { - background-color: #FFFFFF; - color: #0095DD; -} -body.dark a::-moz-selection { - color: #DD4800; -} - -body.sepia { - color: #5b4636; - background-color: #f4ecd8; +.sepia, +.sepia-button { + color: #333333; + background-color: #f0ece7; } -body.sans-serif, -body.sans-serif .remove-button { +.sans-serif, +.sans-serif-button, +.sans-serif .remove-button { font-family: Helvetica, Arial, sans-serif; } -body.serif, -body.serif .remove-button { +.serif, +.serif-button, +.serif .remove-button { font-family: Georgia, "Times New Roman", serif; } -#container { - max-width: 30em; - margin: 0 auto; +.font-size1 { + font-size: 10px; } -#container.font-size1 { +.font-size2 { font-size: 12px; } -#container.font-size2 { +.font-size3 { font-size: 14px; } -#container.font-size3 { +.font-size4 { font-size: 16px; } -#container.font-size4 { +.font-size5 { font-size: 18px; } -#container.font-size5 { +.font-size6 { font-size: 20px; } -#container.font-size6 { +.font-size7 { font-size: 22px; } -#container.font-size7 { +.font-size8 { font-size: 24px; } -#container.font-size8 { +.font-size9 { font-size: 26px; } -#container.font-size9 { - font-size: 28px; + +/* Loading/error message */ + +.message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9em; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9em; + line-height: 1.48em; + padding-bottom: 4px; + font-family: Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.light > .container > .header > .domain, +.sepia > .container > .header > .domain { + border-bottom-color: #333333; +} + +.dark > .container > .header > .domain { + border-bottom-color: #eeeeee; +} + +.header > h1 { + font-size: 1.33em; + line-height: 1.25em; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9em; + line-height: 1.48em; + margin: 0 0 30px 0; + padding: 0; + font-style: italic; +} + +/* Content */ + +#moz-reader-content { + display: none; + font-size: 1em; + line-height: 1.6em; +} + +.content h1, +.content h2, +.content h3 { + font-weight: bold; +} + +#moz-reader-content h1 { + font-size: 1.33em; + line-height: 1.25em; +} + +#moz-reader-content h2 { + font-size: 1.1em; + line-height: 1.51em; +} + +#moz-reader-content h3 { + font-size: 1em; + line-height: 1.66em; +} + +.content a { + text-decoration: underline; + font-weight: normal; +} + +.content a, +.content a:visited, +.content a:hover, +.content a:active { + color: #0095dd; +} + +.content * { + max-width: 100%; + height: auto; +} + +.content p, +.content code, +.content pre, +.content blockquote, +.content ul, +.content ol, +.content li, +.content figure, +.content .wp-caption { + margin: 0 0 30px 0; +} + +.content p > img:only-child, +.content p > a:only-child > img:only-child, +.content .wp-caption img, +.content figure img { + display: block; +} + +.content img[moz-reader-center] { + margin-left: auto; + margin-right: auto; +} + +#moz-reader-content .caption, +#moz-reader-content .wp-caption-text, +#moz-reader-content figcaption { + font-size: 0.9em; + line-height: 1.48em; + font-style: italic; } -/* Override some controls and content styles based on color scheme */ +.content code, +.content pre { + white-space: pre-wrap; +} -body.light > .container > .header > .domain { - border-bottom-color: #333333 !important; +.content blockquote { + padding: 0; + -moz-padding-start: 16px; } -body.sepia > .container > .header > .domain { - border-bottom-color: #5b4636 !important; +.light > .container > .content blockquote, +.sepia > .container > .content blockquote { + -moz-border-start: 2px solid #333333; } -body.dark > .container > .header > .domain { - border-bottom-color: #eeeeee !important; +.dark > .container > .content blockquote { + -moz-border-start: 2px solid #eeeeee; +} +.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +.dark a::-moz-selection { + color: #DD4800; } -body.sepia > .container > .footer { - background-color: #dedad4 !important; +.content ul, +.content ol { + padding: 0; } -body.light blockquote { - -moz-border-start: 2px solid #333333 !important; +.content ul { + -moz-padding-start: 30px; + list-style: disc; } -body.sepia blockquote { - -moz-border-start: 2px solid #5b4636 !important; +.content ol { + -moz-padding-start: 30px; + list-style: decimal; } -body.dark blockquote { - -moz-border-start: 2px solid #eeeeee !important; +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: Helvetica, Arial, sans-serif; + position: fixed; + height: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; + list-style: none; + background-color: #fbfbfb; + -moz-user-select: none; + border-right: 1px solid #b5b5b5; +} + +.button { + display: block; + background-size: 24px 24px; + background-repeat: no-repeat; + color: #333; + background-color: #fbfbfb; + height: 40px; + padding: 0; +} + +.toolbar .button { + width: 40px; + background-position: center; + margin-right: -1px; + border-top: 0; + border-left: 0; + border-right: 1px solid #b5b5b5; + border-bottom: 1px solid #c1c1c1; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0; + padding: 0; +} + +.dropdown li { + margin: 0; + padding: 0; +} + +/*======= Font style popup =======*/ + +.dropdown-popup { + min-width: 300px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #fbfbfb; + visibility: hidden; + border-radius: 4px; + border: 1px 1px 0 1px solid #b5b5b5; + box-shadow: 0 1px 12px #666; +} + +.dropdown-popup > hr { + display: none; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 24px; + height: 24px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; +} + +#font-type-buttons, +#font-size-buttons, +#color-scheme-buttons { + display: flex; + flex-direction: row; +} + +#font-type-buttons > button:first-child { + border-top-left-radius: 3px; +} +#font-type-buttons > button:last-child { + border-top-right-radius: 3px; +} +#color-scheme-buttons > button:first-child { + border-bottom-left-radius: 3px; +} +#color-scheme-buttons > button:last-child { + border-bottom-right-radius: 3px; +} + +#font-type-buttons > button, +#font-size-buttons > button, +#color-scheme-buttons > button { + text-align: center; + border: 0; +} + +#font-type-buttons > button, +#font-size-buttons > button { + width: 50%; + background-color: transparent; + border-left: 1px solid #B5B5B5; + border-bottom: 1px solid #B5B5B5; +} + +#color-scheme-buttons > button { + width: 33.33%; + font-size: 14px; +} + +#color-scheme-buttons > .dark-button { + margin-top: -1px; + height: 61px; +} + +#font-type-buttons > button:first-child, +#font-size-buttons > button:first-child { + border-left: 0; +} + +#font-type-buttons > button { + display: inline-block; + font-size: 62px; + height: 100px; +} + +#font-size-buttons > button, +#color-scheme-buttons > button { + height: 60px; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected, +#color-scheme-buttons > button:active:hover, +#color-scheme-buttons > button.selected { + box-shadow: inset 0 -3px 0 0 #fc6420; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected { + border-bottom: 1px solid #FC6420; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +#font-type-buttons > button > .description { + color: #666; + font-size: 12px; + margin-top: -5px; +} + +/* Font sizes are different per-platform, so we need custom CSS to line them up. */ +#font-type-buttons > .sans-serif-button > .name { + margin-top: 5px; +} + +#font-type-buttons > .sans-serif-button > .description { + margin-top: -8px; +} + +#font-type-buttons > .serif-button > .name { + font-size: 70px; +} + +.button:hover, +#font-size-buttons > button:hover, +#font-type-buttons > button:hover { + background-color: #ebebeb; +} + +.dropdown.open, +.button:active, +#font-size-buttons > button:active, +#font-size-buttons > button.selected { + background-color: #dadada; +} + +/* Only used on Android */ +#font-size-sample { + display: none; +} + +.minus-button, +.plus-button { + background-color: transparent; + border: 0; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +.footer { + height: 64px; + background-color: #ebebeb; + position: absolute; + left: 0; + width: 100%; + text-align: center; + padding: 12px 0; + box-sizing: border-box; + box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset; +} + +.sepia .footer { + background-color: #dedad4; +} + +.remove-button { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); + margin: 0 auto; + border: 1px solid #c1c1c1; + background-position: 10px 7px; + padding-left: 42px; + padding-right: 10px; + border-radius: 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + font-size: 18px; +} + + +/*======= Toolbar icons =======*/ + +/* Android-only controls */ +.share-button { + display: none; +} + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); + height: 68px; + background-position: center 8px; +} + +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #d94141; + border-bottom: 1px solid #d94141; + border-right: 1px solid #d94141; +} + +.close-button:hover:active { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #AE2325; + border-bottom: 1px solid #AE2325; + border-right: 1px solid #AE2325; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.toggle-button.on { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); +} + +.toggle-button { + background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); +} + +.list-button { + background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); +} +.list-button.on { + background-color: #d9d9d9; +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} + +@media print { + .toolbar { + display: none; + } + .footer { + display: none; + } } diff --git a/arc-firefox-theme/chrome/global/aboutReaderContent.css b/arc-firefox-theme/chrome/global/aboutReaderContent.css deleted file mode 100644 index 8412751..0000000 --- a/arc-firefox-theme/chrome/global/aboutReaderContent.css +++ /dev/null @@ -1,113 +0,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/. */ - -#moz-reader-content { - display: none; - font-size: 1em; - line-height: 1.6em; -} - -h1, -h2, -h3 { - font-weight: bold; -} - -h1 { - font-size: 1.6em; - line-height: 1.25em; -} - -h2 { - font-size: 1.2em; - line-height: 1.51em; -} - -h3 { - font-size: 1em; - line-height: 1.66em; -} - -a { - text-decoration: underline; - font-weight: normal; -} - -a, -a:visited, -a:hover, -a:active { - color: #0095dd; -} - -* { - max-width: 100%; - height: auto; -} - -p, -code, -pre, -blockquote, -ul, -ol, -li, -figure, -.wp-caption { - margin: 0 0 30px 0; -} - -p > img:only-child, -p > a:only-child > img:only-child, -.wp-caption img, -figure img { - display: block; -} - -img[moz-reader-center] { - margin-left: auto; - margin-right: auto; -} - -.caption, -.wp-caption-text, -figcaption { - font-size: 0.9em; - line-height: 1.48em; - font-style: italic; -} - -code, -pre { - white-space: pre-wrap; -} - -blockquote { - padding: 0; - -moz-padding-start: 16px; -} - -ul, -ol { - padding: 0; -} - -ul { - -moz-padding-start: 30px; - list-style: disc; -} - -ol { - -moz-padding-start: 30px; - list-style: decimal; -} - -/* Hide elements with common "hidden" class names */ -.visually-hidden, -.visuallyhidden, -.hidden, -.invisible, -.sr-only { - display: none; -} diff --git a/arc-firefox-theme/chrome/global/aboutReaderControls.css b/arc-firefox-theme/chrome/global/aboutReaderControls.css deleted file mode 100644 index 838f644..0000000 --- a/arc-firefox-theme/chrome/global/aboutReaderControls.css +++ /dev/null @@ -1,371 +0,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/. */ - -.light-button { - color: #333333; - background-color: #ffffff; -} - -.dark-button { - color: #eeeeee; - background-color: #333333; -} - -.sepia-button { - color: #5b4636; - background-color: #f4ecd8; -} - -.sans-serif-button { - font-family: Helvetica, Arial, sans-serif; -} - -.serif-button { - font-family: Georgia, "Times New Roman", serif; -} - -/* Loading/error message */ - -#reader-message { - margin-top: 40px; - display: none; - text-align: center; - width: 100%; - font-size: 0.9em; -} - -/* Header */ - -.header { - text-align: start; - display: none; -} - -.domain { - font-size: 0.9em; - line-height: 1.48em; - padding-bottom: 4px; - font-family: Helvetica, Arial, sans-serif; - text-decoration: none; - border-bottom: 1px solid; - color: #0095dd; -} - -.header > h1 { - font-size: 1.6em; - line-height: 1.25em; - width: 100%; - margin: 30px 0; - padding: 0; -} - -.header > .credits { - font-size: 0.9em; - line-height: 1.48em; - margin: 0 0 30px 0; - padding: 0; - font-style: italic; -} - -/*======= Controls toolbar =======*/ - -.toolbar { - font-family: Helvetica, Arial, sans-serif; - position: fixed; - height: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - list-style: none; - background-color: #fbfbfb; - -moz-user-select: none; - border-right: 1px solid #b5b5b5; -} - -.button { - display: block; - background-size: 24px 24px; - background-repeat: no-repeat; - color: #333; - background-color: #fbfbfb; - height: 40px; - padding: 0; -} - -.toolbar .button { - width: 40px; - background-position: center; - margin-right: -1px; - border-top: 0; - border-left: 0; - border-right: 1px solid #b5b5b5; - border-bottom: 1px solid #c1c1c1; -} - -.button[hidden] { - display: none; -} - -.dropdown { - text-align: center; - list-style: none; - margin: 0; - padding: 0; -} - -.dropdown li { - margin: 0; - padding: 0; -} - -/*======= Font style popup =======*/ - -.dropdown-popup { - min-width: 300px; - text-align: start; - position: absolute; - left: 48px; /* offset to account for toolbar width */ - z-index: 1000; - background-color: #fbfbfb; - visibility: hidden; - border-radius: 4px; - border: 1px solid #b5b5b5; - border-bottom-width: 0; - box-shadow: 0 1px 12px #666; -} - -.dropdown-popup > hr { - display: none; -} - -.open > .dropdown-popup { - visibility: visible; -} - -.dropdown-arrow { - position: absolute; - top: 30px; /* offset arrow from top of popup */ - left: -16px; - width: 24px; - height: 24px; - background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); - display: block; -} - -#font-type-buttons, -#font-size-buttons, -#color-scheme-buttons { - display: flex; - flex-direction: row; -} - -#font-type-buttons > button:first-child { - border-top-left-radius: 3px; -} -#font-type-buttons > button:last-child { - border-top-right-radius: 3px; -} -#color-scheme-buttons > button:first-child { - border-bottom-left-radius: 3px; -} -#color-scheme-buttons > button:last-child { - border-bottom-right-radius: 3px; -} - -#font-type-buttons > button, -#font-size-buttons > button, -#color-scheme-buttons > button { - text-align: center; - border: 0; -} - -#font-type-buttons > button, -#font-size-buttons > button { - width: 50%; - background-color: transparent; - border-left: 1px solid #B5B5B5; - border-bottom: 1px solid #B5B5B5; -} - -#color-scheme-buttons > button { - width: 33.33%; - font-size: 14px; -} - -#color-scheme-buttons > .dark-button { - margin-top: -1px; - height: 61px; -} - -#font-type-buttons > button:first-child, -#font-size-buttons > button:first-child { - border-left: 0; -} - -#font-type-buttons > button { - display: inline-block; - font-size: 62px; - height: 100px; -} - -#font-size-buttons > button, -#color-scheme-buttons > button { - height: 60px; -} - -#font-type-buttons > button:active:hover, -#font-type-buttons > button.selected, -#color-scheme-buttons > button:active:hover, -#color-scheme-buttons > button.selected { - box-shadow: inset 0 -3px 0 0 #fc6420; -} - -#font-type-buttons > button:active:hover, -#font-type-buttons > button.selected { - border-bottom: 1px solid #FC6420; -} - -/* Make the serif button content the same size as the sans-serif button content. */ -#font-type-buttons > button > .description { - color: #666; - font-size: 12px; - margin-top: -5px; -} - -/* Font sizes are different per-platform, so we need custom CSS to line them up. */ -#font-type-buttons > .sans-serif-button > .name { - margin-top: 5px; -} - -#font-type-buttons > .sans-serif-button > .description { - margin-top: -8px; -} - -#font-type-buttons > .serif-button > .name { - font-size: 70px; -} - -.button:hover, -#font-size-buttons > button:hover, -#font-type-buttons > button:hover { - background-color: #ebebeb; -} - -.dropdown.open, -.button:active, -#font-size-buttons > button:active, -#font-size-buttons > button.selected { - background-color: #dadada; -} - -/* Only used on Android */ -#font-size-sample { - display: none; -} - -.minus-button, -.plus-button { - background-color: transparent; - border: 0; - background-size: 18px 18px; - background-repeat: no-repeat; - background-position: center; -} - -.footer { - height: 64px; - background-color: #ebebeb; - position: absolute; - left: 0; - width: 100%; - text-align: center; - padding: 12px 0; - box-sizing: border-box; - box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset; -} - -.remove-button { - background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); - margin: 0 auto; - border: 1px solid #c1c1c1; - background-position: 10px 7px; - padding-left: 42px; - padding-right: 10px; - border-radius: 2px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - font-size: 18px; -} - - -/*======= Toolbar icons =======*/ - -/* Android-only controls */ -.share-button { - display: none; -} - -.close-button { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); - height: 68px; - background-position: center 8px; -} - -.close-button:hover { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); - background-color: #d94141; - border-bottom: 1px solid #d94141; - border-right: 1px solid #d94141; -} - -.close-button:hover:active { - background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); - background-color: #AE2325; - border-bottom: 1px solid #AE2325; - border-right: 1px solid #AE2325; -} - -.style-button { - background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); -} - -.toggle-button.on { - background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); -} - -.toggle-button { - background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); -} - -.list-button { - background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); -} -.list-button.on { - background-color: #d9d9d9; -} - -.minus-button { - background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); -} - -.plus-button { - background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); -} - -#pocket-button { - background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark"); -} - -#pocket-button:hover:active { - background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added"); -} - -@media print { - .toolbar { - display: none !important; - } - .footer { - display: none !important; - } -} diff --git a/arc-firefox-theme/chrome/global/aboutSupport.css b/arc-firefox-theme/chrome/global/aboutSupport.css index 61f5305..71ef7a7 100644 --- a/arc-firefox-theme/chrome/global/aboutSupport.css +++ b/arc-firefox-theme/chrome/global/aboutSupport.css @@ -3,12 +3,15 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ html { - --aboutSupport-table-background: #ebebeb; - background-color: var(--in-content-page-background); + background-color: -moz-Field; + color: -moz-FieldText; + font: message-box; } body { - margin: 40px 48px; + width: 90%; + margin-left: 5%; + margin-right: 5%; } .page-subtitle { @@ -23,24 +26,19 @@ body { font-weight: bold; } -button { - -moz-margin-start: 0; - -moz-margin-end: 8px; -} - table { - background-color: var(--aboutSupport-table-background); - color: var(--in-content-text-color); + background-color: -moz-Dialog; + color: -moz-DialogText; font: message-box; text-align: start; width: 100%; - border: 1px solid var(--in-content-border-color); + border: 1px solid ThreeDShadow; border-spacing: 0px; } th, td { - border: 1px solid var(--in-content-border-color); - padding: 4px; + border: 1px dotted ThreeDShadow; + padding: 3px; } thead th { @@ -49,8 +47,8 @@ thead th { th { text-align: start; - background-color: var(--in-content-table-header-background); - color: var(--in-content-selected-text); + background-color: Highlight; + color: HighlightText; } th.column { @@ -60,7 +58,7 @@ th.column { td { text-align: start; - border-color: var(--in-content-table-border-dark-color); + border-top: 1px dotted ThreeDShadow; } .prefs-table { @@ -81,9 +79,9 @@ td { } #action-box { - background-color: var(--aboutSupport-table-background); - border: 1px solid var(--in-content-border-color); - color: var(--in-content-text-color); + background-color: -moz-Dialog; + border: 1px solid ThreeDShadow; + color: -moz-DialogText; float: right; margin-top: 2em; margin-bottom: 20px; diff --git a/arc-firefox-theme/chrome/global/arrow/arrow-lft-hov.gif b/arc-firefox-theme/chrome/global/arrow/arrow-lft-hov.gif new file mode 100644 index 0000000..f209383 Binary files /dev/null and b/arc-firefox-theme/chrome/global/arrow/arrow-lft-hov.gif differ diff --git a/arc-firefox-theme/chrome/global/arrow/arrow-rit-hov.gif b/arc-firefox-theme/chrome/global/arrow/arrow-rit-hov.gif new file mode 100644 index 0000000..3abf3ad Binary files /dev/null and b/arc-firefox-theme/chrome/global/arrow/arrow-rit-hov.gif differ diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg index 29e9c3d..1939867 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg @@ -2,7 +2,12 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg index 40ffa25..dae4639 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg @@ -2,7 +2,12 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg index 0bd6073..a2d3a95 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg @@ -2,7 +2,12 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg index 8048693..4e559ed 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg @@ -2,7 +2,12 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/global/dirListing/folder.png b/arc-firefox-theme/chrome/global/dirListing/folder.png index c266b01..102de51 100644 Binary files a/arc-firefox-theme/chrome/global/dirListing/folder.png and b/arc-firefox-theme/chrome/global/dirListing/folder.png differ diff --git a/arc-firefox-theme/chrome/global/dirListing/local.png b/arc-firefox-theme/chrome/global/dirListing/local.png index c5da02b..99191f3 100644 Binary files a/arc-firefox-theme/chrome/global/dirListing/local.png and b/arc-firefox-theme/chrome/global/dirListing/local.png differ diff --git a/arc-firefox-theme/chrome/global/dirListing/up.png b/arc-firefox-theme/chrome/global/dirListing/up.png index 6c11509..851502d 100644 Binary files a/arc-firefox-theme/chrome/global/dirListing/up.png and b/arc-firefox-theme/chrome/global/dirListing/up.png differ diff --git a/arc-firefox-theme/chrome/global/global.css b/arc-firefox-theme/chrome/global/global.css index 5ddc664..71981c8 100644 --- a/arc-firefox-theme/chrome/global/global.css +++ b/arc-firefox-theme/chrome/global/global.css @@ -264,15 +264,16 @@ label[disabled="true"] { .text-link { color: -moz-nativehyperlinktext; + border: 1px solid transparent; cursor: pointer; } .text-link:hover { text-decoration: underline; } - -.text-link:-moz-focusring { - outline: 1px dotted; + +.text-link:focus { + border: 1px dotted -moz-DialogText; } notification > button { @@ -280,10 +281,6 @@ notification > button { margin-bottom: 0; } -popupnotificationcontent { - margin-top: .5em; -} - /* :::::: autoscroll popup ::::: */ .autoscroller { diff --git a/arc-firefox-theme/chrome/global/icons/Error.png b/arc-firefox-theme/chrome/global/icons/Error.png index bd4064f..59ad20d 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Error.png and b/arc-firefox-theme/chrome/global/icons/Error.png differ diff --git a/arc-firefox-theme/chrome/global/icons/Landscape.png b/arc-firefox-theme/chrome/global/icons/Landscape.png index 925506c..cc43abd 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Landscape.png and b/arc-firefox-theme/chrome/global/icons/Landscape.png differ diff --git a/arc-firefox-theme/chrome/global/icons/Portrait.png b/arc-firefox-theme/chrome/global/icons/Portrait.png index fb7e18d..ce36e84 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Portrait.png and b/arc-firefox-theme/chrome/global/icons/Portrait.png differ diff --git a/arc-firefox-theme/chrome/global/icons/Print-preview.png b/arc-firefox-theme/chrome/global/icons/Print-preview.png index 51c7601..6f47367 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Print-preview.png and b/arc-firefox-theme/chrome/global/icons/Print-preview.png differ diff --git a/arc-firefox-theme/chrome/global/icons/Question.png b/arc-firefox-theme/chrome/global/icons/Question.png index ed8d371..c100040 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Question.png and b/arc-firefox-theme/chrome/global/icons/Question.png differ diff --git a/arc-firefox-theme/chrome/global/icons/Search-close.png b/arc-firefox-theme/chrome/global/icons/Search-close.png index 7faca92..39d800e 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Search-close.png and b/arc-firefox-theme/chrome/global/icons/Search-close.png differ diff --git a/arc-firefox-theme/chrome/global/icons/Search-glass.png b/arc-firefox-theme/chrome/global/icons/Search-glass.png index 16a75cf..9eb0e25 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Search-glass.png and b/arc-firefox-theme/chrome/global/icons/Search-glass.png differ diff --git a/arc-firefox-theme/chrome/global/icons/Warning.png b/arc-firefox-theme/chrome/global/icons/Warning.png index ee5622f..c0ec9b5 100644 Binary files a/arc-firefox-theme/chrome/global/icons/Warning.png and b/arc-firefox-theme/chrome/global/icons/Warning.png differ diff --git a/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg b/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg index 5da904d..50c77a5 100644 --- a/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg +++ b/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg @@ -2,21 +2,32 @@ - - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/global/icons/close-XPVista7.png b/arc-firefox-theme/chrome/global/icons/close-XPVista7.png deleted file mode 100644 index ea6ada4..0000000 Binary files a/arc-firefox-theme/chrome/global/icons/close-XPVista7.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/icons/close-XPVista7@2x.png b/arc-firefox-theme/chrome/global/icons/close-XPVista7@2x.png deleted file mode 100644 index c25a64a..0000000 Binary files a/arc-firefox-theme/chrome/global/icons/close-XPVista7@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7.png b/arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7.png deleted file mode 100644 index 68596a3..0000000 Binary files a/arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7@2x.png b/arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7@2x.png deleted file mode 100644 index eec52e6..0000000 Binary files a/arc-firefox-theme/chrome/global/icons/close-inverted-XPVista7@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/icons/close-inverted.png b/arc-firefox-theme/chrome/global/icons/close-inverted.png deleted file mode 100644 index 0e81580..0000000 Binary files a/arc-firefox-theme/chrome/global/icons/close-inverted.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/icons/close-inverted@2x.png b/arc-firefox-theme/chrome/global/icons/close-inverted@2x.png deleted file mode 100644 index 79d6e87..0000000 Binary files a/arc-firefox-theme/chrome/global/icons/close-inverted@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/icons/close-lunaBlue.png b/arc-firefox-theme/chrome/global/icons/close-lunaBlue.png new file mode 100644 index 0000000..b657c47 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/close-lunaBlue.png differ diff --git a/arc-firefox-theme/chrome/global/icons/close-lunaOlive.png b/arc-firefox-theme/chrome/global/icons/close-lunaOlive.png new file mode 100644 index 0000000..b071b14 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/close-lunaOlive.png differ diff --git a/arc-firefox-theme/chrome/global/icons/close-lunaSilver.png b/arc-firefox-theme/chrome/global/icons/close-lunaSilver.png new file mode 100644 index 0000000..36cbda9 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/close-lunaSilver.png differ diff --git a/arc-firefox-theme/chrome/global/icons/close.png b/arc-firefox-theme/chrome/global/icons/close.png index 1a79a87..ae989fd 100644 Binary files a/arc-firefox-theme/chrome/global/icons/close.png and b/arc-firefox-theme/chrome/global/icons/close.png differ diff --git a/arc-firefox-theme/chrome/global/icons/close.svg b/arc-firefox-theme/chrome/global/icons/close.svg index 042ecbf..375a412 100644 --- a/arc-firefox-theme/chrome/global/icons/close.svg +++ b/arc-firefox-theme/chrome/global/icons/close.svg @@ -1,76 +1,104 @@ - - + + + - + + + + + + + diff --git a/arc-firefox-theme/chrome/global/icons/close@2x.png b/arc-firefox-theme/chrome/global/icons/close@2x.png deleted file mode 100644 index 3cc9ea2..0000000 Binary files a/arc-firefox-theme/chrome/global/icons/close@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/icons/error-16.png b/arc-firefox-theme/chrome/global/icons/error-16.png index 54b5740..936d2ab 100644 Binary files a/arc-firefox-theme/chrome/global/icons/error-16.png and b/arc-firefox-theme/chrome/global/icons/error-16.png differ diff --git a/arc-firefox-theme/chrome/global/icons/error-24.png b/arc-firefox-theme/chrome/global/icons/error-24.png new file mode 100644 index 0000000..84cafdd Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/error-24.png differ diff --git a/arc-firefox-theme/chrome/global/icons/error-48.png b/arc-firefox-theme/chrome/global/icons/error-48.png new file mode 100644 index 0000000..c38e6ca Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/error-48.png differ diff --git a/arc-firefox-theme/chrome/global/icons/error-64.png b/arc-firefox-theme/chrome/global/icons/error-64.png index a5b78a4..75a00c4 100644 Binary files a/arc-firefox-theme/chrome/global/icons/error-64.png and b/arc-firefox-theme/chrome/global/icons/error-64.png differ diff --git a/arc-firefox-theme/chrome/global/icons/find.png b/arc-firefox-theme/chrome/global/icons/find.png new file mode 100644 index 0000000..cceed40 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/find.png differ diff --git a/arc-firefox-theme/chrome/global/icons/folder-item.png b/arc-firefox-theme/chrome/global/icons/folder-item.png index 905ef0f..26cda98 100644 Binary files a/arc-firefox-theme/chrome/global/icons/folder-item.png and b/arc-firefox-theme/chrome/global/icons/folder-item.png differ diff --git a/arc-firefox-theme/chrome/global/icons/information-16.png b/arc-firefox-theme/chrome/global/icons/information-16.png index 4393795..aa8ce6e 100644 Binary files a/arc-firefox-theme/chrome/global/icons/information-16.png and b/arc-firefox-theme/chrome/global/icons/information-16.png differ diff --git a/arc-firefox-theme/chrome/global/icons/information-24.png b/arc-firefox-theme/chrome/global/icons/information-24.png index e23f9c3..7fa782d 100644 Binary files a/arc-firefox-theme/chrome/global/icons/information-24.png and b/arc-firefox-theme/chrome/global/icons/information-24.png differ diff --git a/arc-firefox-theme/chrome/global/icons/information-32.png b/arc-firefox-theme/chrome/global/icons/information-32.png index a2a64a4..5120db6 100644 Binary files a/arc-firefox-theme/chrome/global/icons/information-32.png and b/arc-firefox-theme/chrome/global/icons/information-32.png differ diff --git a/arc-firefox-theme/chrome/global/icons/information-48.png b/arc-firefox-theme/chrome/global/icons/information-48.png new file mode 100644 index 0000000..59893b2 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/information-48.png differ diff --git a/arc-firefox-theme/chrome/global/icons/information-64.png b/arc-firefox-theme/chrome/global/icons/information-64.png new file mode 100644 index 0000000..d799cca Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/information-64.png differ diff --git a/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg b/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg index 1c4c6bc..6f794b7 100644 --- a/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg +++ b/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg @@ -2,7 +2,12 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg b/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg index 073d021..3d79e18 100644 --- a/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg +++ b/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg @@ -2,7 +2,12 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/global/icons/question-16.png b/arc-firefox-theme/chrome/global/icons/question-16.png index 7e9aa7f..0c8eafd 100644 Binary files a/arc-firefox-theme/chrome/global/icons/question-16.png and b/arc-firefox-theme/chrome/global/icons/question-16.png differ diff --git a/arc-firefox-theme/chrome/global/icons/question-24.png b/arc-firefox-theme/chrome/global/icons/question-24.png new file mode 100644 index 0000000..d4a55b6 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/question-24.png differ diff --git a/arc-firefox-theme/chrome/global/icons/question-48.png b/arc-firefox-theme/chrome/global/icons/question-48.png new file mode 100644 index 0000000..b818636 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/question-48.png differ diff --git a/arc-firefox-theme/chrome/global/icons/question-64.png b/arc-firefox-theme/chrome/global/icons/question-64.png index f07efc0..a1a51b8 100644 Binary files a/arc-firefox-theme/chrome/global/icons/question-64.png and b/arc-firefox-theme/chrome/global/icons/question-64.png differ diff --git a/arc-firefox-theme/chrome/global/icons/warning-16.png b/arc-firefox-theme/chrome/global/icons/warning-16.png index 513c954..a215743 100644 Binary files a/arc-firefox-theme/chrome/global/icons/warning-16.png and b/arc-firefox-theme/chrome/global/icons/warning-16.png differ diff --git a/arc-firefox-theme/chrome/global/icons/warning-24.png b/arc-firefox-theme/chrome/global/icons/warning-24.png new file mode 100644 index 0000000..42f20a7 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/warning-24.png differ diff --git a/arc-firefox-theme/chrome/global/icons/warning-64.png b/arc-firefox-theme/chrome/global/icons/warning-64.png index a93e891..832f348 100644 Binary files a/arc-firefox-theme/chrome/global/icons/warning-64.png and b/arc-firefox-theme/chrome/global/icons/warning-64.png differ diff --git a/arc-firefox-theme/chrome/global/icons/warning-large.png b/arc-firefox-theme/chrome/global/icons/warning-large.png index 2b445f0..0ec8e79 100644 Binary files a/arc-firefox-theme/chrome/global/icons/warning-large.png and b/arc-firefox-theme/chrome/global/icons/warning-large.png differ diff --git a/arc-firefox-theme/chrome/global/icons/warning.svg b/arc-firefox-theme/chrome/global/icons/warning.svg index bde2da1..0082970 100644 --- a/arc-firefox-theme/chrome/global/icons/warning.svg +++ b/arc-firefox-theme/chrome/global/icons/warning.svg @@ -1,13 +1,12 @@ - - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/global/icons/windowControls.png b/arc-firefox-theme/chrome/global/icons/windowControls.png index 9925b84..d90efb0 100644 Binary files a/arc-firefox-theme/chrome/global/icons/windowControls.png and b/arc-firefox-theme/chrome/global/icons/windowControls.png differ diff --git a/arc-firefox-theme/chrome/global/icons/wrap.png b/arc-firefox-theme/chrome/global/icons/wrap.png new file mode 100644 index 0000000..32492d5 Binary files /dev/null and b/arc-firefox-theme/chrome/global/icons/wrap.png differ diff --git a/arc-firefox-theme/chrome/global/in-content/check-partial.svg b/arc-firefox-theme/chrome/global/in-content/check-partial.svg index e436abf..b46a731 100644 --- a/arc-firefox-theme/chrome/global/in-content/check-partial.svg +++ b/arc-firefox-theme/chrome/global/in-content/check-partial.svg @@ -1,8 +1,11 @@ - - + - + - + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/global/in-content/check.svg b/arc-firefox-theme/chrome/global/in-content/check.svg index 1f9f99c..9fb2223 100644 --- a/arc-firefox-theme/chrome/global/in-content/check.svg +++ b/arc-firefox-theme/chrome/global/in-content/check.svg @@ -1,8 +1,11 @@ - - + - + - + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/global/in-content/common.css b/arc-firefox-theme/chrome/global/in-content/common.css index dc3d018..1e1e00c 100644 --- a/arc-firefox-theme/chrome/global/in-content/common.css +++ b/arc-firefox-theme/chrome/global/in-content/common.css @@ -5,50 +5,13 @@ @namespace html "http://www.w3.org/1999/xhtml"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -*|*:root { - --in-content-page-color: #424e5a; - --in-content-page-background: #fbfbfb; - --in-content-text-color: #333; - --in-content-selected-text: #fff; - --in-content-header-border-color: #c8c8c8; - --in-content-box-background: #fff; - --in-content-box-background-odd: #f3f6fa; - --in-content-box-background-hover: #ebebeb; - --in-content-box-background-active: #dadada; - --in-content-box-border-color: #c1c1c1; - --in-content-item-hover: rgba(0,149,221,0.25); - --in-content-item-selected: #0095dd; - --in-content-border-highlight: #ff9500; - --in-content-border-focus: #0095dd; - --in-content-border-color: #c1c1c1; - --in-content-category-text: #c1c1c1; - --in-content-category-border-focus: 1px dotted #fff; - --in-content-category-text-selected: #f2f2f2; - --in-content-category-background: #424f5a; - --in-content-category-background-hover: #5e6972; - --in-content-category-background-active: #343f48; - --in-content-tab-color: #424f5a; - --in-content-link-color: #0095dd; - --in-content-link-color-hover: #178ce5; - --in-content-link-color-active: #ff9500; - --in-content-link-color-visited: #551a8b; - --in-content-primary-button-background: #0095dd; - --in-content-primary-button-background-hover: #008acb; - --in-content-primary-button-background-active: #006b9d; - --in-content-table-border-dark-color: #d1d1d1; - --in-content-table-header-background: #0095dd; - --in-content-help-button-background: #ffcb00; - --in-content-help-button-background-hover: #f4c200; - --in-content-help-button-background-active: #eaba00; -} - html|body, xul|page, xul|window { font: message-box; -moz-appearance: none; - background-color: var(--in-content-page-background); - color: var(--in-content-page-color); + background-color: #fbfbfb; + color: #424e5a; } html|body { @@ -61,14 +24,14 @@ html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; - color: var(--in-content-text-color); + color: #333; margin: 0; margin-bottom: .5em; } html|hr { border-style: solid none none none; - border-color: var(--in-content-border-color); + border-color: #c1c1c1; } xul|caption { @@ -84,6 +47,10 @@ xul|caption > xul|label { margin: 0 !important; } +xul|description { + -moz-margin-start: 0; +} + *|*.main-content { padding-top: 40px; -moz-padding-end: 44px; /* compensate the 4px margin of child elements */ @@ -107,8 +74,7 @@ xul|groupbox { font-size: 1.25rem; } -xul|groupbox xul|label, -xul|groupbox xul|description { +xul|groupbox xul|label { /* !important needed to override toolkit !important rule */ -moz-margin-start: 0 !important; -moz-margin-end: 0 !important; @@ -128,9 +94,9 @@ xul|tabpanels { xul|tabs { margin-bottom: 15px; - border-top: 1px solid var(--in-content-box-border-color); - border-bottom: 1px solid var(--in-content-box-border-color); - background-color: var(--in-content-page-background); + border-top: 1px solid #c1c1c1; + border-bottom: 1px solid #c1c1c1; + background-color: #fbfbfb; } xul|*.tabs-left, @@ -143,20 +109,20 @@ xul|tab { margin-top: 0; padding: 4px 20px; min-height: 44px; - color: var(--in-content-tab-color); - background-color: var(--in-content-page-background); + color: #424f5a; + background-color: #fbfbfb; border-width: 0; transition: background-color 50ms ease 0s; } xul|tab:hover { - background-color: var(--in-content-box-background-hover); + background-color: #ebebeb; } xul|tab[selected] { - background-color: var(--in-content-box-background-hover); + background-color: #ebebeb; padding-bottom: 0; /* compensate the 4px border */ - border-bottom: 4px solid var(--in-content-border-highlight); + border-bottom: 4px solid #ff9500; } xul|*.tab-text { @@ -179,28 +145,29 @@ xul|colorpicker[type="button"], xul|menulist { -moz-appearance: none; height: 30px; - color: var(--in-content-text-color); - border: 1px solid var(--in-content-box-border-color); + color: #333; + line-height: 20px; + border: 1px solid #c1c1c1; -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; -moz-border-left-colors: none !important; border-radius: 2px; - background-color: var(--in-content-page-background); + background-color: #fbfbfb; } html|button:enabled:hover, xul|button:not([disabled="true"]):hover, xul|colorpicker[type="button"]:not([disabled="true"]):hover, xul|menulist:not([disabled="true"]):hover { - background-color: var(--in-content-box-background-hover); + background-color: #ebebeb; } html|button:enabled:hover:active, xul|button:not([disabled="true"]):hover:active, xul|colorpicker[type="button"]:not([disabled="true"]):hover:active, xul|menulist[open="true"]:not([disabled="true"]) { - background-color: var(--in-content-box-background-active); + background-color: #dadada; } html|button:disabled, @@ -212,19 +179,19 @@ xul|menulist[disabled="true"] { } *|button.primary { - background-color: var(--in-content-primary-button-background); + background-color: #0095dd; border-color: transparent; - color: var(--in-content-selected-text); + color: #fff; } html|button.primary:enabled:hover, xul|button.primary:not([disabled="true"]):hover { - background-color: var(--in-content-primary-button-background-hover); + background-color: #008acb; } html|button.primary:enabled:hover:active, xul|button.primary:not([disabled="true"]):hover:active { - background-color: var(--in-content-primary-button-background-active); + background-color: #006b9d; } xul|colorpicker[type="button"] { @@ -258,19 +225,19 @@ xul|*.help-button { min-width: 30px; border-radius: 2px; border-width: 0; - background-color: var(--in-content-help-button-background); + background-color: #ffcb00; background-image: none; box-shadow: none; list-style-image: url("chrome://global/skin/in-content/help-glyph.svg"); } xul|*.help-button:not([disabled="true"]):hover { - background-color: var(--in-content-help-button-background-hover); + background-color: #f4c200; background-image: none; } xul|*.help-button:not([disabled="true"]):hover:active { - background-color: var(--in-content-help-button-background-active); + background-color: #eaba00; background-image: none; } @@ -347,9 +314,9 @@ xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker xul|menulist > xul|menupopup, xul|button[type="menu"] > xul|menupopup { -moz-appearance: none; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid #c1c1c1; border-radius: 2px; - background-color: var(--in-content-box-background); + background-color: #fff; } xul|menulist > xul|menupopup xul|menu, @@ -358,37 +325,27 @@ xul|button[type="menu"] > xul|menupopup xul|menu, xul|button[type="menu"] > xul|menupopup xul|menuitem { -moz-appearance: none; font-size: 1em; - color: var(--in-content-text-color); + color: #333; padding-top: 0.2em; padding-bottom: 0.2em; -moz-padding-start: 10px; -moz-padding-end: 30px; } -xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], -xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"], -xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], -xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { - color: var(--in-content-text-color); - background-color: var(--in-content-item-hover); +xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"], +xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] { + color: #333; + background-color: rgba(0,149,221,0.25); } -xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], -xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"], -xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], -xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { - color: var(--in-content-selected-text); - background-color: var(--in-content-item-selected); -} - -xul|menulist > xul|menupopup > xul|menu[disabled="true"], -xul|menulist > xul|menupopup > xul|menuitem[disabled="true"], -xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"], -xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] { - color: #999; - /* override the [_moz-menuactive="true"] background color from - global/menu.css */ - background-color: transparent; +xul|menulist > xul|menupopup > xul|menu[selected="true"], +xul|menulist > xul|menupopup > xul|menuitem[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menu[selected="true"], +xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] { + color: #fff; + background-color: #0095DD; } xul|menulist > xul|menupopup xul|menuseparator, @@ -396,7 +353,7 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { -moz-appearance: none; margin: 0; padding: 0; - border-top: 1px solid var(--in-content-box-border-color); + border-top: 1px solid #c1c1c1; border-bottom: none; } @@ -405,22 +362,22 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { *|textbox { -moz-appearance: none; height: 30px; - color: var(--in-content-text-color); + color: #333; line-height: 20px; padding-right: 10px; padding-left: 10px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid #c1c1c1; -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; -moz-border-left-colors: none !important; border-radius: 2px; - background-color: var(--in-content-box-background); + background-color: #fff; } html|textbox:focus, xul|textbox[focused] { - border-color: var(--in-content-border-focus); + border-color: #0095dd; } html|textbox:disabled, @@ -433,25 +390,22 @@ xul|textbox[disabled="true"] { html|a, .text-link, .inline-link { - color: var(--in-content-link-color); + line-height: 22px; + color: #0095dd; text-decoration: none; } html|a:hover, .text-link:hover, .inline-link:hover { - color: var(--in-content-link-color-hover); + color: #178ce5; text-decoration: underline; } -html|a:visited { - color: var(--in-content-link-color-visited); -} - html|a:hover:active, .text-link:hover:active, .inline-link:hover:active { - color: var(--in-content-link-color-active); + color: #ff9500; text-decoration: none; } @@ -484,7 +438,7 @@ html|input[type="checkbox"] + html|label:before { width: 23px; height: 23px; border-radius: 2px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid #c1c1c1; -moz-margin-end: 10px; background-color: #f1f1f1; /* !important needed to override toolkit checked !important rule */ @@ -496,7 +450,7 @@ html|input[type="checkbox"] + html|label:before { xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { - border-color: var(--in-content-border-focus); + border-color: #0095dd; } xul|*.checkbox-check[checked] { @@ -529,7 +483,7 @@ xul|*.radio-check { -moz-appearance: none; width: 23px; height: 23px; - border: 1px solid var(--in-content-box-border-color); + border: 1px solid #c1c1c1; border-radius: 50%; -moz-margin-end: 10px; background-color: #f1f1f1; @@ -538,7 +492,7 @@ xul|*.radio-check { } xul|radio:not([disabled="true"]):hover > xul|*.radio-check { - border-color: var(--in-content-border-focus); + border-color: #0095dd; } xul|*.radio-check[selected] { @@ -559,7 +513,7 @@ xul|*.radio-label-box { xul|*#categories { -moz-appearance: none; - background-color: var(--in-content-category-background); + background-color: #424f5a; padding-top: 39px; margin: 0; border-width: 0; @@ -567,7 +521,7 @@ xul|*#categories { xul|*.category { -moz-appearance: none; - color: var(--in-content-category-text); + color: #c1c1c1; -moz-border-end-width: 0; -moz-padding-start: 15px; -moz-padding-end: 21px; @@ -576,19 +530,19 @@ xul|*.category { } xul|*.category:hover { - background-color: var(--in-content-category-background-hover); + background-color: #5e6972; } xul|*.category[selected] { - background-color: var(--in-content-category-background-active); - color: var(--in-content-category-text-selected); + background-color: #343f48; + color: #f2f2f2; -moz-padding-start: 11px; /* compensate the 4px border */ - -moz-border-start: solid 4px var(--in-content-border-highlight); + -moz-border-start: solid 4px #ff9500; } xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { - border-top: var(--in-content-category-border-focus); - border-bottom: var(--in-content-category-border-focus); + border-top: 1px #ffffff dotted; + border-bottom: 1px #ffffff dotted; } *|*.category-name { @@ -608,7 +562,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur /* header */ *|*.header { - border-bottom: 1px solid var(--in-content-header-border-color); + border-bottom: 1px solid #c8c8c8; -moz-margin-end: 4px; /* add the 4px end-margin of other elements */ margin-bottom: 15px; padding-bottom: 15px; @@ -672,9 +626,9 @@ xul|richlistbox, xul|listbox { -moz-appearance: none; -moz-margin-start: 0; - background-color: var(--in-content-box-background); - border: 1px solid var(--in-content-box-border-color); - color: var(--in-content-text-color); + background-color: #fff; + border: 1px solid #c1c1c1; + color: #333; } xul|treechildren::-moz-tree-row, @@ -688,13 +642,13 @@ xul|listbox xul|listitem { xul|treechildren::-moz-tree-row(hover), xul|listbox xul|listitem:hover { - background-color: var(--in-content-item-hover); + background-color: rgba(0,149,221,0.25); } xul|treechildren::-moz-tree-row(selected), xul|listbox xul|listitem[selected="true"] { - background-color: var(--in-content-item-selected); - color: var(--in-content-selected-text); + background-color: #0095dd; + color: #fff; } /* Trees */ @@ -702,21 +656,19 @@ xul|listbox xul|listitem[selected="true"] { xul|tree { -moz-appearance: none; font-size: 1em; - border: 1px solid var(--in-content-box-border-color); - background-color: var(--in-content-box-background); - margin: 0; + border: 1px solid #c1c1c1; } xul|tree:-moz-focusring, xul|richlistbox:-moz-focusring { - border: 1px dotted var(--in-content-border-focus); + border: 1px dotted #0095dd; } xul|listheader, xul|treecols { -moz-appearance: none; border: none; - border-bottom: 1px solid var(--in-content-border-color); + border-bottom: 1px solid #c1c1c1; padding: 0; } @@ -724,15 +676,15 @@ xul|treecol:not([hideheader="true"]), xul|treecolpicker { -moz-appearance: none; border: none; - background-color: var(--in-content-box-background-hover); + background-color: #ebebeb; color: #808080; padding: 5px 10px; } xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { - background-color: var(--in-content-box-background-active); - color: var(--in-content-text-color); + background-color: #dadada; + color: #333; } xul|treecol:not([hideheader="true"]):not(:first-child), @@ -759,14 +711,14 @@ xul|treechildren::-moz-tree-row { /* Color needs to be set on tree cell in order to be applied */ xul|treechildren::-moz-tree-cell-text { - color: var(--in-content-text-color); + color: #333; } xul|treechildren::-moz-tree-cell-text(selected) { - color: var(--in-content-selected-text); + color: #fff; } -xul|tab[visuallyselected] { +xul|tab[selected] { /* Override styles for tab[selected] from toolkit/themes/linux/global/tabbox.css */ margin-bottom: 0; @@ -840,40 +792,13 @@ xul|*.radio-label-box { -moz-appearance: none; } -/* Override OS-theme-based color to make it visible - on dark color themes. */ -xul|radio:not([disabled="true"]):hover, -xul|checkbox:not([disabled="true"]):hover { - color: var(--in-content-text-color); -} - xul|*.numberbox-input-box { -moz-appearance: none; border-width: 0; } +html|a:-moz-focusring, xul|*.text-link:-moz-focusring, xul|*.inline-link:-moz-focusring { border: 1px dotted -moz-DialogText; } - -xul|spinbuttons { - -moz-appearance: none; -} - -xul|treechildren::-moz-tree-row(multicol, odd) { - background-color: var(--in-content-box-background-odd); -} - -/* These rules are duplicated from common.inc.css - * because above -moz-tree-row(multicol, odd) rule - * overrides also hover/selected states. - */ -xul|treechildren::-moz-tree-row(hover) { - background-color: var(--in-content-item-hover); -} - -xul|treechildren::-moz-tree-row(selected) { - background-color: var(--in-content-item-selected); -} - diff --git a/arc-firefox-theme/chrome/global/in-content/dropdown.svg b/arc-firefox-theme/chrome/global/in-content/dropdown.svg index 458eb0b..a757585 100644 --- a/arc-firefox-theme/chrome/global/in-content/dropdown.svg +++ b/arc-firefox-theme/chrome/global/in-content/dropdown.svg @@ -1,8 +1,6 @@ - - + - - + + diff --git a/arc-firefox-theme/chrome/global/in-content/help-glyph.svg b/arc-firefox-theme/chrome/global/in-content/help-glyph.svg index 012bef4..6f9ffb3 100644 --- a/arc-firefox-theme/chrome/global/in-content/help-glyph.svg +++ b/arc-firefox-theme/chrome/global/in-content/help-glyph.svg @@ -1,7 +1,8 @@ - - - + + diff --git a/arc-firefox-theme/chrome/global/in-content/info-pages.css b/arc-firefox-theme/chrome/global/in-content/info-pages.css index fcecbd8..09838d3 100644 --- a/arc-firefox-theme/chrome/global/in-content/info-pages.css +++ b/arc-firefox-theme/chrome/global/in-content/info-pages.css @@ -1,10 +1,8 @@ - @import url("chrome://global/skin/in-content/common.css"); /* Body and container */ body { display: flex; - flex-direction: column; - box-sizing: border-box; + box-sizing: padding-box; min-height: 100vh; padding-top: 0; padding-bottom: 0; @@ -19,13 +17,6 @@ body { max-width: 52em; } -.container.restore-chosen { - display: flex; - flex-direction: column; - flex-grow: 1; - margin: 10vh 0; -} - /* Typography */ .title { background-image: url("chrome://browser/skin/aboutNetError_info.svg"); @@ -91,16 +82,8 @@ ul { } /* Trees */ -.tree-container { - margin-top: 1.2em; - flex-grow: 1; - min-height: 12em; -} - -.tree-container > tree { - height: 100%; -} - tree { + min-height: 12em; + margin-top: 1.2em; width: 100%; -} +} \ No newline at end of file diff --git a/arc-firefox-theme/chrome/global/in-content/radio.svg b/arc-firefox-theme/chrome/global/in-content/radio.svg index 97826bc..ca926b7 100644 --- a/arc-firefox-theme/chrome/global/in-content/radio.svg +++ b/arc-firefox-theme/chrome/global/in-content/radio.svg @@ -1,8 +1,6 @@ - - + - + diff --git a/arc-firefox-theme/chrome/global/inContentUI.css b/arc-firefox-theme/chrome/global/inContentUI.css new file mode 100644 index 0000000..afcef92 --- /dev/null +++ b/arc-firefox-theme/chrome/global/inContentUI.css @@ -0,0 +1,41 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* + * The default namespace for this file is XUL. Be sure to prefix rules that + * are applicable to both XUL and HTML with '*|'. + */ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Page background */ +*|*:root { + -moz-appearance: none; + padding: 18px; + background-color: Window; + background-image: /* Texture */ + url("chrome://global/skin/inContentUI/background-texture.png"); + color: WindowText; +} + +/* Use the new in-content colors for #contentAreaDownloadsView. After landing + of bug 989469 the colors can be moved to *|*:root */ +*|*#contentAreaDownloadsView { + background: #f1f1f1; + color: #424e5a; +} + +html|html { + font: message-box; +} + +/* Content */ +*|*.main-content { + /* Needed to allow the radius to clip the inner content, see bug 595656 */ + overflow: hidden; + background-color: -moz-Field; + color: -moz-FieldText; + border: 1px solid ThreeDShadow; + border-radius: 5px; +} diff --git a/arc-firefox-theme/chrome/global/inContentUI/background-texture.png b/arc-firefox-theme/chrome/global/inContentUI/background-texture.png new file mode 100644 index 0000000..0d3cacd Binary files /dev/null and b/arc-firefox-theme/chrome/global/inContentUI/background-texture.png differ diff --git a/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css b/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css index 760cdcd..3060bf8 100644 --- a/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css +++ b/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css @@ -4,7 +4,6 @@ body { background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); - background-color: rgb(33,33,33); /* Average color of that ^ image. */ } video { diff --git a/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg b/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg index f7ca6b6..f118afb 100644 --- a/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg +++ b/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg @@ -1,30 +1,79 @@ - + + - - - - + + + + - + - - + + - - + + - - + + - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/global/menu.css b/arc-firefox-theme/chrome/global/menu.css index c2c779b..a49b781 100644 --- a/arc-firefox-theme/chrome/global/menu.css +++ b/arc-firefox-theme/chrome/global/menu.css @@ -12,7 +12,6 @@ menu, menuitem, -menucaption, .splitmenu-menuitem { -moz-appearance: menuitem; -moz-box-align: center; @@ -69,7 +68,6 @@ menuitem.spell-suggestion { /* ::::: menu/menuitems in menulist popups ::::: */ menulist > menupopup > menuitem, -menulist > menupopup > menucaption, menulist > menupopup > menu { padding: 1px 5px; max-width: none; @@ -80,7 +78,6 @@ menulist > menupopup > menu { .menu-text, .menu-iconic-left, -.menu-iconic-right, .menu-iconic-text { margin-top: 0px !important; margin-bottom: 0px !important; @@ -95,12 +92,6 @@ menulist > menupopup > menu { font-weight: inherit; } -menucaption > .menu-text, -menucaption > .menu-iconic-text { - -moz-margin-start: 0 !important; - font-weight: bold; -} - .menu-description { font-style: italic; color: GrayText; @@ -119,8 +110,7 @@ menucaption > .menu-iconic-text { -moz-box-pack: end; } -.menu-iconic-left, -.menu-iconic-right { +.menu-iconic-left { width: 16px; /* We can only hardcode this, to make the default GTK icon<->label spacing */ -moz-padding-end: 3px !important; @@ -159,11 +149,7 @@ menucaption > .menu-iconic-text { menulist > menupopup > menuitem > .menu-iconic-left, -menulist > menupopup > menucaption > .menu-iconic-left, -menulist > menupopup > menu > .menu-iconic-left, -menulist > menupopup > menuitem > .menu-iconic-right, -menulist > menupopup > menucaption > .menu-iconic-right, -menulist > menupopup > menu > .menu-iconic-right { +menulist > menupopup > menu > .menu-iconic-left { display: none; } diff --git a/arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg b/arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg deleted file mode 100644 index ba8a7c9..0000000 --- a/arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg b/arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg deleted file mode 100644 index f388f81..0000000 --- a/arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg b/arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg deleted file mode 100644 index b8c8ec3..0000000 --- a/arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/arc-firefox-theme/chrome/global/notification.css b/arc-firefox-theme/chrome/global/notification.css index 079f408..a7cec86 100644 --- a/arc-firefox-theme/chrome/global/notification.css +++ b/arc-firefox-theme/chrome/global/notification.css @@ -5,16 +5,14 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); notification { - color: -moz-gtk-info-bar-text; + color: InfoText; background-color: InfoBackground; - -moz-appearance: -moz-gtk-info-bar; text-shadow: none; } notification[type="info"] { color: -moz-DialogText; background-color: -moz-Dialog; - -moz-appearance: none; } notification[type="critical"] { @@ -65,32 +63,18 @@ notification[type="critical"] { /* Popup notification */ -.popup-notification-body { - max-width: 25em; +.popup-notification-description { + max-width: 24em; } -.popup-notification-origin:not([value]), -.popup-notification-learnmore-link:not([href]) { - display: none; -} - -.popup-notification-origin { - margin-bottom: .3em !important; +.popup-notification-learnmore-link { + margin-top: 1em !important; } -.popup-notification-learnmore-link { - margin-top: .5em !important; +.popup-notification-learnmore-link:not([href]) { + display: none; } .popup-notification-button-container { margin-top: 17px; } - -.popup-notification-closebutton { - -moz-margin-end: -10px; - margin-top: -6px; -} - -.popup-notification-menubutton > .button-menubutton-button[disabled] { - opacity: 0.5; -} diff --git a/arc-firefox-theme/chrome/global/popup.css b/arc-firefox-theme/chrome/global/popup.css index 63c8d86..1c5bc50 100644 --- a/arc-firefox-theme/chrome/global/popup.css +++ b/arc-firefox-theme/chrome/global/popup.css @@ -4,14 +4,6 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -/* ::::: Variables ::::: */ -.panel-arrowcontent { - --panel-arrowcontent-padding: 10px; - --panel-arrowcontent-background: -moz-Dialog; - --panel-arrowcontent-color: -moz-DialogText; - --panel-arrowcontent-border: 1px solid ThreeDShadow; -} - /* ::::: menupopup ::::: */ menupopup, @@ -40,10 +32,10 @@ panel[type="arrow"][side="right"] { } .panel-arrowcontent { - padding: var(--panel-arrowcontent-padding); - color: var(--panel-arrowcontent-color); - background: var(--panel-arrowcontent-background); - border: var(--panel-arrowcontent-border); + padding: 10px; + color: -moz-DialogText; + background: -moz-Dialog; + border: 1px solid ThreeDShadow; } .panel-arrow[side="top"], diff --git a/arc-firefox-theme/chrome/global/printpreview/arrow-left-end.png b/arc-firefox-theme/chrome/global/printpreview/arrow-left-end.png index e4e60a0..642327a 100644 Binary files a/arc-firefox-theme/chrome/global/printpreview/arrow-left-end.png and b/arc-firefox-theme/chrome/global/printpreview/arrow-left-end.png differ diff --git a/arc-firefox-theme/chrome/global/printpreview/arrow-left.png b/arc-firefox-theme/chrome/global/printpreview/arrow-left.png index 02fc98d..7ed1d7d 100644 Binary files a/arc-firefox-theme/chrome/global/printpreview/arrow-left.png and b/arc-firefox-theme/chrome/global/printpreview/arrow-left.png differ diff --git a/arc-firefox-theme/chrome/global/printpreview/arrow-right-end.png b/arc-firefox-theme/chrome/global/printpreview/arrow-right-end.png index 5efbe3a..d5d7a50 100644 Binary files a/arc-firefox-theme/chrome/global/printpreview/arrow-right-end.png and b/arc-firefox-theme/chrome/global/printpreview/arrow-right-end.png differ diff --git a/arc-firefox-theme/chrome/global/printpreview/arrow-right.png b/arc-firefox-theme/chrome/global/printpreview/arrow-right.png index e9d68e8..f779f6c 100644 Binary files a/arc-firefox-theme/chrome/global/printpreview/arrow-right.png and b/arc-firefox-theme/chrome/global/printpreview/arrow-right.png differ diff --git a/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg index 2071381..66551ef 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg @@ -1,7 +1,6 @@ - - - + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg index e57a475..b0674b2 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg @@ -2,24 +2,30 @@ - + - - + + - + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg index 0ed3983..6010fbe 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg @@ -1,7 +1,6 @@ - - - + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg index e85a397..9da7e03 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg @@ -1,7 +1,39 @@ - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg index f3a98dd..249912a 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg @@ -1,7 +1,39 @@ - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg index b43a8b8..1f21efd 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg @@ -1,12 +1,46 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg index 8a5a212..a25429a 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg @@ -1,8 +1,23 @@ - - - - + + + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg index 837392f..9094d8a 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg @@ -1,8 +1,42 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/global/reader/pocket.svg b/arc-firefox-theme/chrome/global/reader/pocket.svg deleted file mode 100644 index d93fd6a..0000000 --- a/arc-firefox-theme/chrome/global/reader/pocket.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/global/tabbox.css b/arc-firefox-theme/chrome/global/tabbox.css index f575996..822968c 100644 --- a/arc-firefox-theme/chrome/global/tabbox.css +++ b/arc-firefox-theme/chrome/global/tabbox.css @@ -48,7 +48,7 @@ tab { color: -moz-DialogText; } -tab[visuallyselected="true"] { +tab[selected="true"] { z-index: 1; margin-top: 0; margin-bottom: -2px; @@ -83,7 +83,7 @@ tab + tab { border-bottom-left-radius: 2px; } -.tab-bottom[visuallyselected="true"] { +.tab-bottom[selected="true"] { margin-bottom: 0; margin-top: -2px; padding-top: 6px; diff --git a/arc-firefox-theme/chrome/global/toolbarbutton.css b/arc-firefox-theme/chrome/global/toolbarbutton.css index a62e173..4a11f72 100644 --- a/arc-firefox-theme/chrome/global/toolbarbutton.css +++ b/arc-firefox-theme/chrome/global/toolbarbutton.css @@ -106,25 +106,37 @@ toolbarbutton[type="menu-button"][disabled="true"]:hover:active { } /* ::::: toolbarbutton badged ::::: */ -.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { - -moz-margin-end: 0; -} .toolbarbutton-badge { background-color: #d90000; +} + +.toolbarbutton-badge::after { + /* The |content| property is set in the content stylesheet. */ font-size: 10px; - padding: 0 2px 1px; + font-weight: bold; + padding: 1px 2px 2px; color: #fff; + background-color: inherit; border-radius: 2px; box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset, 0 -1px 0 hsla(0, 0%, 0%, .1) inset, 0 1px 0 hsla(206, 50%, 10%, .2); - margin: -6px 0 0 !important; - -moz-margin-end: -8px !important; - min-width: 14px; + position: absolute; + top: -4px; + right: -2px; + min-width: 10px; line-height: 10px; text-align: center; - -moz-stack-sizing: ignore; +} + +.toolbarbutton-badge:-moz-locale-dir(rtl)::after { + left: -2px; + right: auto; +} + +.toolbarbutton-badge-container { + position: relative; } /* .......... dropmarker .......... */ diff --git a/arc-firefox-theme/chrome/global/tree/sort-asc.png b/arc-firefox-theme/chrome/global/tree/sort-asc.png index 4e335c5..64d077a 100644 Binary files a/arc-firefox-theme/chrome/global/tree/sort-asc.png and b/arc-firefox-theme/chrome/global/tree/sort-asc.png differ diff --git a/arc-firefox-theme/chrome/global/tree/sort-dsc.png b/arc-firefox-theme/chrome/global/tree/sort-dsc.png index d5bb668..9c4a825 100644 Binary files a/arc-firefox-theme/chrome/global/tree/sort-dsc.png and b/arc-firefox-theme/chrome/global/tree/sort-dsc.png differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-clsd-hover-rtl.png b/arc-firefox-theme/chrome/global/tree/twisty-clsd-hover-rtl.png deleted file mode 100644 index 1b65197..0000000 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-clsd-hover-rtl.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-clsd-hover.png b/arc-firefox-theme/chrome/global/tree/twisty-clsd-hover.png deleted file mode 100644 index 763c1da..0000000 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-clsd-hover.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-clsd-rtl.png b/arc-firefox-theme/chrome/global/tree/twisty-clsd-rtl.png deleted file mode 100644 index 02f4e32..0000000 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-clsd-rtl.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-clsd.png b/arc-firefox-theme/chrome/global/tree/twisty-clsd.png index f67f60c..7fe7fb5 100644 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-clsd.png and b/arc-firefox-theme/chrome/global/tree/twisty-clsd.png differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-open-hover-rtl.png b/arc-firefox-theme/chrome/global/tree/twisty-open-hover-rtl.png deleted file mode 100644 index a0157cc..0000000 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-open-hover-rtl.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-open-hover.png b/arc-firefox-theme/chrome/global/tree/twisty-open-hover.png deleted file mode 100644 index 31c9478..0000000 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-open-hover.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-open-rtl.png b/arc-firefox-theme/chrome/global/tree/twisty-open-rtl.png deleted file mode 100644 index 4e606d2..0000000 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-open-rtl.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/tree/twisty-open.png b/arc-firefox-theme/chrome/global/tree/twisty-open.png index b8b7583..df66d77 100644 Binary files a/arc-firefox-theme/chrome/global/tree/twisty-open.png and b/arc-firefox-theme/chrome/global/tree/twisty-open.png differ diff --git a/arc-firefox-theme/chrome/mozapps/aboutServiceWorkers.css b/arc-firefox-theme/chrome/mozapps/aboutServiceWorkers.css deleted file mode 100644 index 1158622..0000000 --- a/arc-firefox-theme/chrome/mozapps/aboutServiceWorkers.css +++ /dev/null @@ -1,44 +0,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/. */ - -body { - min-width: 330px; - max-width: 100%; - min-height: 330px; - max-height: 100%; -} - -.warningBackground { - display: none; - background: -moz-Dialog; - width:100%; - height:100%; - z-index:10; - top:0; - left:0; - position:fixed; -} - -.warningMessage { - color: -moz-FieldText; - position: relative; - min-width: 330px; - max-width: 50em; - margin: 4em auto; - border: 1px solid ThreeDShadow; - border-radius: 10px; - padding: 3em; - -moz-padding-start: 30px; - background: -moz-Field; - margin-left: auto; - text-align: center; -} - -.active { - display: block; -} - -.inactive { - display: none; -} diff --git a/arc-firefox-theme/chrome/mozapps/downloads/downloadButtons.png b/arc-firefox-theme/chrome/mozapps/downloads/downloadButtons.png index a5d0944..d36385c 100644 Binary files a/arc-firefox-theme/chrome/mozapps/downloads/downloadButtons.png and b/arc-firefox-theme/chrome/mozapps/downloads/downloadButtons.png differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/category-dictionaries.png b/arc-firefox-theme/chrome/mozapps/extensions/category-dictionaries.png new file mode 100644 index 0000000..a1e0d53 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/extensions/category-dictionaries.png differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/category-experiments.png b/arc-firefox-theme/chrome/mozapps/extensions/category-experiments.png new file mode 100644 index 0000000..a9d0054 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/extensions/category-experiments.png differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png b/arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png new file mode 100644 index 0000000..2ae95a5 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/category-languages.png b/arc-firefox-theme/chrome/mozapps/extensions/category-languages.png new file mode 100644 index 0000000..c721159 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/extensions/category-languages.png differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/category-themes.png b/arc-firefox-theme/chrome/mozapps/extensions/category-themes.png new file mode 100644 index 0000000..cde1c78 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/extensions/category-themes.png differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css index e3e5a63..5c642fb 100644 --- a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css +++ b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css @@ -2,21 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/in-content/common.css"); - -.main-content { - padding-top: 0; - -moz-padding-end: 0; -} - -#nav-header { - min-height: 39px; - background-color: #424f5a; -} - -.view-pane > .list > scrollbox { - -moz-padding-end: 48px; -} +@import url("chrome://global/skin/inContentUI.css"); /*** global warnings ***/ @@ -28,10 +14,13 @@ .global-warning { -moz-box-align: center; padding: 0 8px; - color: #916D15; font-weight: bold; } +.global-warning-text { + color: -moz-FieldText; +} + #addons-page[warning] .global-warning-container { background-color: rgba(255, 255, 0, 0.1); background-image: url("chrome://mozapps/skin/extensions/stripes-warning.png"); @@ -40,23 +29,16 @@ #detail-view .global-warning { padding: 4px 12px; - border-bottom: 1px solid #c1c1c1; + border-bottom: 1px solid ThreeDShadow; + min-height: 41px; } @media (max-width: 600px) { .global-warning-text { display: none; } - - .global-warning .warning-icon { - background-color: #fff; - box-shadow: 0 0 2px 5px #fff; - border-radius: 10px; - } } -/*** global informations ***/ - /* Plugins aren't yet disabled by safemode (bug 342333), so don't show that warning when viewing plugins. */ #addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container, @@ -68,20 +50,32 @@ /*** notification icons ***/ -.warning-icon, -.error-icon, +.warning-icon { + list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=menu"); + width: 16px; + height: 16px; + margin: 3px 0; +} + +.error-icon { + list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu"); + width: 16px; + height: 16px; + margin: 3px 0; +} + .pending-icon, .info-icon { + list-style-image: url("moz-icon://stock/gtk-dialog-info?size=menu"); width: 16px; + height: 16px; margin: 3px 0; } - /*** view alert boxes ***/ .alert-container { -moz-box-align: center; - -moz-margin-end: 48px; } .alert-spacer-before { @@ -95,10 +89,12 @@ .alert { -moz-box-align: center; padding: 10px; - color: #333; - border: 1px solid #c1c1c1; - border-radius: 2px; - background-color: #ebebeb; + font-size: 12px; + border: 1px solid ThreeDShadow; + border-radius: 8px; + color: WindowText; + background-color: Window; + background-clip: padding-box; } .alert .alert-title { @@ -117,28 +113,65 @@ padding-right: 20px; } - /*** category selector ***/ #categories { - padding-top: 0; + -moz-appearance: none; + border: none; + -moz-margin-end: -1px; + background-color: transparent; + position: relative; + margin-top: 41px; } -.category[disabled] { +.category { + -moz-appearance: none; + border-width: 1px; + -moz-border-end-width: 0; + border-style: solid; + border-color: transparent; + padding: 10px 4px; + -moz-box-align: center; overflow: hidden; - height: 0; min-height: 0; + color: WindowText; +} + +.category:-moz-locale-dir(ltr) { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.category:-moz-locale-dir(rtl) { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.category[disabled] { + border-top: 0; + border-bottom: 0; + height: 0; opacity: 0; - transition-property: min-height, opacity; + transition-property: height, opacity; transition-duration: 1s, 0.8s; } .category:not([disabled]) { - min-height: 40px; - transition-property: min-height, opacity; + height: 52px; + transition-property: height, opacity; transition-duration: 1s, 0.8s; } +.category[selected] { + background-color: -moz-Field; + color: -moz-FieldText; + border-color: ThreeDShadow; +} + +.category-name { + font-size: 150%; +} + /* Maximize the size of the viewport when the window is small */ @media (max-width: 800px) { .category-name { @@ -147,18 +180,23 @@ } .category-badge { - background-color: #55D4FF; + background-color: Highlight; padding: 2px 8px; margin: 6px 0; - -moz-margin-start: 6px; - border-radius: 100%; - color: #FFF; + border-radius: 10000px; + color: HighlightText; font-weight: bold; text-align: center; } .category-badge[value="0"] { - display: none; + visibility: hidden; +} + +.category-icon { + width: 32px; + height: 32px; + -moz-margin-start: 6px; } #category-search > .category-icon { @@ -202,109 +240,90 @@ /*** header ***/ #header { - margin-top: 20px; - margin-bottom: 20px; - -moz-margin-end: 48px; + margin-bottom: 18px; } -@media (max-width: 600px) { - #header-search { - width: 12em; - } +.nav-button { + min-width: 0; } -.view-header { - margin: 0; - -moz-margin-end: 48px; - border-bottom: 1px solid #c1c1c1; +#back-btn:-moz-locale-dir(ltr) { + list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar"); } -#header-utils-btn { - height: 30px; - line-height: 20px; - border-color: #c1c1c1; - background-color: #fbfbfb; - padding-right: 10px; - padding-left: 10px; +#forward-btn:-moz-locale-dir(ltr) { + list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar"); } -#header-utils-btn:not([disabled="true"]):active:hover, -#header-utils-btn[open="true"] { - background-color: #dadada; +#back-btn:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar"); } -.header-button { - -moz-appearance: none; - border: 1px solid; - border-radius: 2px; +#forward-btn:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar"); } -.header-button[disabled="true"] > .toolbarbutton-icon { - opacity: 0.4; +#back-btn[disabled="true"]:-moz-locale-dir(ltr) { + list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar&state=disabled"); } -.header-button:not([disabled="true"]):hover, -#header-utils-btn:not([disabled="true"]):hover { - background-color: #ebebeb; - cursor: pointer; +#forward-btn[disabled="true"]:-moz-locale-dir(ltr) { + list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=toolbar&state=disabled"); } -.header-button > .toolbarbutton-text { - display: none; +#back-btn[disabled="true"]:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=toolbar&state=disabled"); } -.nav-button { - list-style-image: url(chrome://mozapps/skin/extensions/navigation.png); - margin-top: 15px; - margin-bottom: 15px; - border-color: transparent; +#forward-btn[disabled="true"]:-moz-locale-dir(rtl) { + list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=toolbar&state=disabled"); } -.nav-button:not([disabled="true"]):hover { - border-color: #ebebeb; +#header-utils-btn { + min-width: 4.5em; } -#back-btn:-moz-locale-dir(ltr), -#forward-btn:-moz-locale-dir(rtl) { - -moz-image-region: rect(0, 18px, 18px, 0); +#header-utils-btn .toolbarbutton-icon { + list-style-image: url("moz-icon://stock/gtk-preferences?size=toolbar"); } -#back-btn:-moz-locale-dir(rtl), -#forward-btn:-moz-locale-dir(ltr) { - -moz-image-region: rect(0, 36px, 18px, 18px); +#header-utils-btn:-moz-focusring > .button-box { + border: none; } +#header-search { + margin: 0; +} -/*** sorters ***/ - -.sort-controls { - -moz-appearance: none; +@media (max-width: 600px) { + #header-search { + width: 12em; + } } -.sorter { - height: 35px; - border: none; - border-radius: 0; - background-color: transparent; - color: #536680; +.view-header { + padding: 4px; margin: 0; - min-width: 12px !important; - -moz-box-direction: reverse; + min-height: 41px; + background-color: ThreeDHighlight; + border-bottom: 1px solid ThreeDShadow; } -.sorter .button-box { - padding-top: 0; - padding-bottom: 0; + +/*** sorters ***/ + +.sort-controls { + -moz-appearance: none; } -.sorter[checkState="1"], -.sorter[checkState="2"] { - background-color: #ebebeb; - box-shadow: 0 -4px 0 0 #ff9500 inset; +.sorter[checkState="1"] .button-icon { + display: -moz-box; + list-style-image: url("moz-icon://stock/gtk-sort-descending?size=16"); } -.sorter .button-icon { - -moz-margin-start: 6px; +.sorter[checkState="2"] .button-icon { + display: -moz-box; + list-style-image: url("moz-icon://stock/gtk-sort-ascending?size=16"); } @@ -347,27 +366,18 @@ .list { -moz-appearance: none; margin: 0; - border-width: 0 !important; + border: none; background-color: transparent; } -.list > scrollbox > .scrollbox-innerbox { - border: 1px dotted transparent; -} - -.list:-moz-focusring > scrollbox > .scrollbox-innerbox { - border-color: #0095dd; -} - .addon { - color: #444; - border-bottom: 1px solid #c1c1c1; + border-bottom: 1px solid ThreeDLightShadow; padding: 5px; - background-origin: border-box; } -.addon:not(:only-child):last-child { - border-bottom-width: 0; +.addon[selected] .text-link, +.addon[selected] .button-link { + color: inherit; } .details { @@ -390,10 +400,6 @@ max-height: 48px; } -.content-inner-container { - -moz-margin-end: 5px; -} - .addon[active="false"] .icon { filter: grayscale(1); } @@ -420,6 +426,7 @@ .name-container { font-size: 150%; + margin-bottom: 0; font-weight: bold; -moz-box-align: end; -moz-box-flex: 1; @@ -429,6 +436,10 @@ font-weight: bold; } +.addon-view[active="false"]:not([selected]) { + color: GrayText; +} + .description-container { -moz-margin-start: 6px; -moz-box-align: center; @@ -442,7 +453,6 @@ .pending, .error { -moz-margin-start: 48px; - font-weight: bold; -moz-box-align: center; } @@ -455,6 +465,7 @@ -moz-box-align: stretch; } +.advancedinfo-container, .update-info-container { -moz-box-align: center; } @@ -482,54 +493,21 @@ -moz-box-pack: end; } -.addon-view .warning { - color: #916d15; +.addon-view:not([selected]) .warning { + color: #90792E; } -.addon-view .error { - color: #d74345; +.addon-view:not([selected]) .error { + color: #7C322B; } -.addon-view .pending { - color: #1b7123; +.addon-view:not([selected]) .pending { + color: #4F7939; } -.addon-view[pending="disable"] .pending, -.addon-view[pending="uninstall"] .pending { - color: #62666e; -} - -.addon .relnotes-container { - -moz-box-align: start; - -moz-margin-start: 6px; - height: 0; - overflow: hidden; - opacity: 0; - transition-property: height, opacity; - transition-duration: 0.5s, 0.5s; -} - -.addon[show-relnotes] .relnotes-container { - opacity: 1; - transition-property: height, opacity; - transition-duration: 0.5s, 0.5s; -} - -.addon .relnotes-header { - font-weight: bold; - margin: 10px 0; -} - -.addon .relnotes-toggle { - -moz-appearance: none; - border: none; - background: transparent; - font-weight: bold; - cursor: pointer; -} - -.addon .relnotes-toggle > .button-box > .button-icon { - -moz-padding-start: 4px; +.addon[active="false"] { + background-image: linear-gradient(rgba(135, 135, 135, 0.2), + rgba(135, 135, 135, 0.1)); } .addon-view[notification="warning"] { @@ -563,38 +541,41 @@ background-repeat: repeat-x; } -.addon[selected] { - background-color: #fafafa; - color: #333; - -moz-padding-start: 1px; /* compensate the 4px border */ - -moz-border-start: solid 4px #ff9500; +.addon .relnotes-container { + -moz-box-align: start; + height: 0; + overflow: hidden; + opacity: 0; + transition-property: height, opacity; + transition-duration: 0.5s, 0.5s; } -.addon[active="false"] > .content-container > .content-inner-container { - color: #999; +.addon[show-relnotes] .relnotes-container { + opacity: 1; + transition-property: height, opacity; + transition-duration: 0.5s, 0.5s; } -.addon[active="false"][selected] > .content-container > .content-inner-container { - color: #777; +.addon .relnotes-header { + font-weight: bold; + margin: 10px 0; } - -/*** item - uninstalled ***/ - -.addon[status="uninstalled"] { +.addon .relnotes-toggle { + -moz-appearance: none; border: none; + background: transparent; + font-weight: bold; + cursor: pointer; + list-style-image: url("moz-icon://stock/gtk-go-down?size=16"); } -.addon[status="uninstalled"] > .container { - -moz-box-align: center; - padding: 4px 20px; - background-color: #FDFFA8; - border-radius: 8px; - font-size: 120%; +.addon .relnotes-toggle > .button-box > .button-icon { + display: -moz-box; } -.addon[status="uninstalled"][selected] { - background-color: transparent; +.addon[show-relnotes] .relnotes-toggle { + list-style-image: url("moz-icon://stock/gtk-go-up?size=16"); } @@ -602,16 +583,13 @@ #search-filter { padding: 5px 20px; - -moz-margin-end: 48px; font-size: 120%; - border-bottom: 1px solid #c1c1c1; overflow-x: hidden; + border-bottom: 1px solid ThreeDShadow; } #search-filter-label { font-weight: bold; - color: grey; - -moz-margin-end: 10px; } #search-allresults-link { @@ -619,11 +597,10 @@ margin-bottom: 2em; } - /*** detail view ***/ -#detail-view { - -moz-margin-end: 48px; +#detail-view[active="false"] .fade { + opacity: 0.6; } #detail-view .loading { @@ -631,16 +608,16 @@ } #detail-view[loading-extended] .loading { + -moz-box-align: center; + -moz-box-pack: center; opacity: 1; transition-property: opacity; transition-duration: 1s; } .detail-view-container { - -moz-padding-end: 2em; - padding-bottom: 2em; + padding: 0 2em 2em 2em; font-size: 110%; - color: #333; } #detail-notifications { @@ -657,7 +634,6 @@ #detail-icon-container { width: 64px; -moz-margin-end: 10px; - margin-top: 6px; } #detail-icon { @@ -673,28 +649,23 @@ font-size: 200%; } -#detail-screenshot-box { - -moz-margin-end: 2em; -} - #detail-screenshot { + -moz-margin-end: 2em; max-width: 300px; max-height: 300px; - background-color: white; - box-shadow: 0 1px 2px #666; } #detail-screenshot[loading] { - background-image: url("chrome://global/skin/icons/loading_16.png"), - linear-gradient(rgba(255, 255, 255, 0.5), transparent); + background-image: url("chrome://global/skin/icons/loading_16.png"); background-position: 50% 50%; background-repeat: no-repeat; - border-radius: 2px; + border: 1px threedshadow solid; + border-radius: 5px; + box-sizing: border-box; } #detail-screenshot[loading="error"] { - background-image: url("chrome://global/skin/media/error.png"), - linear-gradient(rgba(255, 255, 255, 0.5), transparent); + background-image: url("chrome://global/skin/media/error.png"); } #detail-desc-container { @@ -715,44 +686,20 @@ } #detail-contributions { - border-radius: 2px; - border: 1px solid #D2DBE8; + border-radius: 5px; + border: 1px solid ThreeDShadow; margin-bottom: 2em; padding: 1em; - background-color: #F3F7FB; + background: ThreeDHighlight; } #detail-contrib-description { font-style: italic; margin-bottom: 1em; - color: #373D48; } #detail-contrib-suggested { - color: grey; - font-weight: bold; -} - -#detail-contrib-btn { - color: #FFF; - text-shadow: none; - border: 1px solid #0095dd; - list-style-image: url("chrome://mozapps/skin/extensions/heart.png"); - background-color: #0095dd; -} - -#detail-contrib-btn .button-icon { - -moz-margin-end: 5px; -} - -#detail-contrib-btn:not(:active):hover { - border-color: #008acb; - background-color: #008acb; -} - -#detail-contrib-btn:active:hover { - background-color: #006b9d; - border-color: #006b9d; + color: GrayText; } #detail-grid { @@ -773,18 +720,20 @@ setting[first-row="true"] { .detail-row, .detail-row-complex, setting { - border-top: 1px solid #c1c1c1; + border-top: 1px solid ThreeDShadow; -moz-box-align: center; - min-height: 35px; - font-size: 1.25rem; - line-height: 20px; - text-shadow: 0 1px 1px #fefffe; + min-height: 32px; } #detail-controls { margin-bottom: 1em; } +#detail-view[active="false"]:not([pending]):not([notification]) { + background-image: linear-gradient(rgba(135, 135, 135, 0.1), + rgba(135, 135, 135, 0)); +} + setting[first-row="true"] { margin-top: 2em; } @@ -794,7 +743,7 @@ setting { } .preferences-alignment { - min-height: 30px; + min-height: 32px; -moz-box-align: center; } @@ -810,11 +759,20 @@ setting { display: none; } +menulist { /* Fixes some styling inconsistencies */ + font-size: 100%; + margin: 1px 5px 2px 5px; +} + +colorpicker[type="button"] { /* Fixes some styling inconsistencies */ + height: 29px; + margin: 1px 5px 2px 5px; +} + setting[type="radio"] > radiogroup { -moz-box-orient: horizontal; } - /*** creator ***/ .creator > label { @@ -832,81 +790,60 @@ setting[type="radio"] > radiogroup { .meta-rating { -moz-margin-end: 0; - padding-top: 2px; + vertical-align: text-top; +} + +.meta-rating[showrating="average"] > .star { + list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png"); + padding: 0 1px; +} + +.meta-rating[showrating="user"] > .star { + list-style-image: url("chrome://mozapps/skin/extensions/rating-unrated.png"); + padding: 2px 3px; +} + +.meta-rating > .star[on="true"], +.meta-rating[showrating="user"] > .star[hover] { + list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png"); + padding: 0 1px; } /*** download progress ***/ .download-progress { - border: 1px solid #c1c1c1; - border-radius: 2px; - background-color: #fbfbfb; width: 200px; - height: 30px; - margin: 2px 4px; -} - -.download-progress[mode="undetermined"] { - border-color: #0095dd; } .download-progress .start-cap, -.download-progress[complete] .end-cap, -.download-progress[mode="undetermined"] .end-cap, -.download-progress .progress .progress-bar { - -moz-appearance: none; - background-color: #0095dd; -} - -.download-progress .progress .progress-bar { - min-height: 28px; +.download-progress .end-cap { + display: none; } .download-progress .progress { - -moz-appearance: none; - background-color: transparent; padding: 0; margin: 0; border: none; } -.download-progress .start-cap, -.download-progress .end-cap { - width: 4px; -} - -.download-progress .start-cap:-moz-locale-dir(ltr), -.download-progress .end-cap:-moz-locale-dir(rtl) { - border-radius: 1px 0 0 1px; -} - -.download-progress .end-cap:-moz-locale-dir(ltr), -.download-progress .start-cap:-moz-locale-dir(rtl) { - border-radius: 0 1px 1px 0; -} - .download-progress .cancel { -moz-appearance: none; - padding: 3px; - min-width: 0; - width: 20px; - height: 20px; + background-color: ButtonFace; + padding-bottom: 1px; + -moz-padding-start: 2px; + border-width: 1px; + border-style: solid; + border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; + border-radius: 10000px; + min-width: 16px; + width: 16px; + height: 16px; margin: 3px; } -.download-progress .cancel .button-box { - /* override in-content/common.css !important rule */ - padding: 0 !important; - border: none; -} - -.download-progress .cancel .button-text { - display: none; -} - -.download-progress .cancel .button-icon { - margin: 0; +.download-progress .cancel:hover { + background-color: -moz-ButtonHoverFace; } .download-progress .cancel { @@ -917,11 +854,6 @@ setting[type="radio"] > radiogroup { -moz-box-align: center; } -.download-progress .status { - color: #333; - text-shadow: #fff 0 0 2px; -} - /*** install status ***/ @@ -936,13 +868,8 @@ setting[type="radio"] > radiogroup { -moz-box-align: center; } -#updates-container .button-link { - font-weight: bold; -} - #updates-installed, #updates-downloaded { - color: #00BB00; font-weight: bold; } @@ -961,37 +888,46 @@ setting[type="radio"] > radiogroup { display: block !important; } -button.button-link { +.addon-control.enable { + list-style-image: url("moz-icon://stock/gtk-yes?size=button"); +} + +.addon-control.disable { + list-style-image: url("moz-icon://stock/gtk-no?size=button"); +} + +.addon-control.remove { + list-style-image: url("moz-icon://stock/gtk-remove?size=button"); +} + +.addon-control.preferences { + list-style-image: url("moz-icon://stock/gtk-preferences?size=button"); +} + +.addon-control.install, +.addon-control.update { + list-style-image: url("moz-icon://stock/gtk-save?size=button"); +} + +.button-link { -moz-appearance: none; background: transparent; border: none; - box-shadow: none; - color: #0095dd; + text-decoration: underline; + color: -moz-nativehyperlinktext; cursor: pointer; min-width: 0; - height: 20px; margin: 0 6px; } -button.button-link:not(:-moz-focusring) > .button-box { - border-width: 0; - margin: 1px; +.button-link:active { + color: -moz-activehyperlinktext; } -button.button-link:hover { - background-color: transparent; - color: #178ce5; - text-decoration: underline; -} - -/* Needed to override normal button style from inContent.css */ -button.button-link:not([disabled="true"]):active:hover { - background-color: transparent; - color: #ff9500; - text-decoration: none; +.header-button .toolbarbutton-text { + display: none; } - /*** telemetry experiments ***/ #detail-experiment-container { @@ -1018,87 +954,3 @@ button.button-link:not([disabled="true"]):active:hover { #detail-view[active="true"] #detail-experiment-bullet { fill: rgb(106, 201, 20); } - -/*** info UI for add-ons that have been disabled for being unsigned ***/ - -#show-disabled-unsigned-extensions:not(:hover) { - background-color: #fcf8ed; -} - -#disabled-unsigned-addons-info { - margin-bottom: 2em; - -moz-margin-end: 48px; -} - -#disabled-unsigned-addons-heading { - font-size: 1.4em; - font-weight: bold; - margin-bottom: .5em; -} - -#signing-dev-info { - font-style: italic; -} - -#detail-findUpdates-btn[hidden] { - display: -moz-box; - visibility: hidden; -} - -#header-utils-btn .toolbarbutton-icon { - list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-native"); -} - -.warning-icon { - list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=menu"); - height: 16px; -} - -.error-icon { - list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu"); - height: 16px; -} - -.pending-icon, -.info-icon { - list-style-image: url("moz-icon://stock/gtk-dialog-info?size=menu"); - height: 16px; -} - -.sorter[checkState="1"] .button-icon { - display: -moz-box; - list-style-image: url("moz-icon://stock/gtk-sort-descending?size=16"); -} - -.sorter[checkState="2"] .button-icon { - display: -moz-box; - list-style-image: url("moz-icon://stock/gtk-sort-ascending?size=16"); -} - -.addon .relnotes-toggle { - list-style-image: url("moz-icon://stock/gtk-go-down?size=16"); -} - -.addon .relnotes-toggle > .button-box > .button-icon { - display: -moz-box; -} - -.addon[show-relnotes] .relnotes-toggle { - list-style-image: url("moz-icon://stock/gtk-go-up?size=16"); -} - -.meta-rating[showrating="average"] > .star { - list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png"); - padding: 0 1px; -} - -.meta-rating[showrating="user"] > .star { - list-style-image: url("chrome://mozapps/skin/extensions/rating-unrated.png"); - padding: 2px 3px; -} - -.meta-rating > .star[on="true"], -.meta-rating[showrating="user"] > .star[hover] { - list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png"); - padding: 0 1px; -} diff --git a/arc-firefox-theme/chrome/mozapps/extensions/navigation.png b/arc-firefox-theme/chrome/mozapps/extensions/navigation.png index 67ff3d9..8ff6391 100644 Binary files a/arc-firefox-theme/chrome/mozapps/extensions/navigation.png and b/arc-firefox-theme/chrome/mozapps/extensions/navigation.png differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/newaddon.css b/arc-firefox-theme/chrome/mozapps/extensions/newaddon.css index 5801a24..2e5e252 100644 --- a/arc-firefox-theme/chrome/mozapps/extensions/newaddon.css +++ b/arc-firefox-theme/chrome/mozapps/extensions/newaddon.css @@ -2,10 +2,10 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/in-content/common.css"); +@import url("chrome://global/skin/inContentUI.css"); #addon-page { - font-size: 1.1em; + padding: 0; } #addon-scrollbox { @@ -24,7 +24,7 @@ #addon-container { overflow: visible; - max-width: 800px; + max-width: 600px; margin: 20px; padding: 30px 90px; } @@ -35,7 +35,6 @@ } #icon { - margin-top: 8px; -moz-margin-end: 10px; max-width: 64px; max-height: 64px; @@ -79,7 +78,6 @@ list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.png"); width: 16px; height: 15px; - margin-top: 5px; -moz-margin-end: 5px; } @@ -92,7 +90,7 @@ #restartPanel { margin-top: 25px; -moz-box-pack: end; - -moz-box-align: center; + -moz-box-align: end; } #continuePanel { diff --git a/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg b/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg index 6792871..fd91100 100644 --- a/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg +++ b/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg @@ -1,8 +1,11 @@ - - + - + diff --git a/arc-firefox-theme/chrome/mozapps/formautofill/requestAutocomplete.css b/arc-firefox-theme/chrome/mozapps/formautofill/requestAutocomplete.css index 7ddd77c..9bc9007 100644 --- a/arc-firefox-theme/chrome/mozapps/formautofill/requestAutocomplete.css +++ b/arc-firefox-theme/chrome/mozapps/formautofill/requestAutocomplete.css @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/in-content/common.css"); +@import url(chrome://global/skin/inContentUI.css); :root { height: 100%; diff --git a/arc-firefox-theme/chrome/mozapps/passwordmgr/key.png b/arc-firefox-theme/chrome/mozapps/passwordmgr/key.png index b5e8afe..9472be0 100644 Binary files a/arc-firefox-theme/chrome/mozapps/passwordmgr/key.png and b/arc-firefox-theme/chrome/mozapps/passwordmgr/key.png differ diff --git a/arc-firefox-theme/chrome/mozapps/places/defaultFavicon@2x.png b/arc-firefox-theme/chrome/mozapps/places/defaultFavicon@2x.png deleted file mode 100644 index 052bfd3..0000000 Binary files a/arc-firefox-theme/chrome/mozapps/places/defaultFavicon@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/mozapps/plugins/notifyPluginCrashed.png b/arc-firefox-theme/chrome/mozapps/plugins/notifyPluginCrashed.png new file mode 100644 index 0000000..34cabf8 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/plugins/notifyPluginCrashed.png differ diff --git a/arc-firefox-theme/chrome/mozapps/plugins/notifyPluginGeneric.png b/arc-firefox-theme/chrome/mozapps/plugins/notifyPluginGeneric.png new file mode 100644 index 0000000..34cabf8 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/plugins/notifyPluginGeneric.png differ diff --git a/arc-firefox-theme/chrome/mozapps/update/downloadButtons.png b/arc-firefox-theme/chrome/mozapps/update/downloadButtons.png index a5d0944..d36385c 100644 Binary files a/arc-firefox-theme/chrome/mozapps/update/downloadButtons.png and b/arc-firefox-theme/chrome/mozapps/update/downloadButtons.png differ diff --git a/arc-firefox-theme/chrome/mozapps/xpinstall/xpinstallItemGeneric.png b/arc-firefox-theme/chrome/mozapps/xpinstall/xpinstallItemGeneric.png new file mode 100644 index 0000000..2ae95a5 Binary files /dev/null and b/arc-firefox-theme/chrome/mozapps/xpinstall/xpinstallItemGeneric.png differ diff --git a/arc-firefox-theme/install.rdf b/arc-firefox-theme/install.rdf index 9067f75..d0e0d24 100644 --- a/arc-firefox-theme/install.rdf +++ b/arc-firefox-theme/install.rdf @@ -5,7 +5,7 @@ {52c2877e-44e1-11e5-8874-a62d1d5d46B0} - 41.20150921 + 38.20150921 4 Arc Theme Arc Theme for Firefox @@ -16,8 +16,8 @@ {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - 41.0 - 44.0 + 38.0 + 38.* -- cgit v1.2.3