diff options
Diffstat (limited to 'browser/themes/shared/customizableui')
| -rw-r--r-- | browser/themes/shared/customizableui/customizeMode.css | 638 | ||||
| -rw-r--r-- | browser/themes/shared/customizableui/density-compact.svg | 21 | ||||
| -rw-r--r-- | browser/themes/shared/customizableui/density-normal.svg | 18 | ||||
| -rw-r--r-- | browser/themes/shared/customizableui/density-touch.svg | 14 | ||||
| -rw-r--r-- | browser/themes/shared/customizableui/empty-overflow-panel.png | bin | 0 -> 13890 bytes | |||
| -rw-r--r-- | browser/themes/shared/customizableui/empty-overflow-panel@2x.png | bin | 0 -> 34090 bytes | |||
| -rw-r--r-- | browser/themes/shared/customizableui/panelUI-shared.css | 2016 | ||||
| -rw-r--r-- | browser/themes/shared/customizableui/whimsy.png | bin | 0 -> 5990 bytes |
8 files changed, 2707 insertions, 0 deletions
diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css new file mode 100644 index 0000000000..1f20a76d53 --- /dev/null +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -0,0 +1,638 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Customization mode */ + +:root { + --drag-drop-transition-duration: .3s; +} + +@media (prefers-reduced-motion: reduce) { + :root { + --drag-drop-transition-duration: 0s; + } +} + +:root[customizing] .customization-target:not(#widget-overflow-fixed-list) { + min-width: 100px; +} + +#customization-container { + background-color: var(--toolbar-non-lwt-bgcolor); + color: var(--toolbar-color); +} + +#customization-container:-moz-lwtheme { + /* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not + * semi-transparent */ + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); +} + +:root[lwtheme-image] #customization-container { + background-image: none; + color: var(--toolbar-non-lwt-textcolor); + text-shadow: none; +} + +:root[lwtheme-image] #customization-palette .toolbarbutton-1 { + fill: currentColor; +} + +#customization-palette { + padding: 5px 20px 20px; +} + +#customization-header { + font-weight: 600; + font-size: 1.2em; + margin: 20px 20px 15px; +} + +#customization-panel-container { + --customization-panel-padding: 20px; + padding: 0 var(--customization-panel-padding) 25px; +} + +#customization-footer { + border-top: 1px solid rgba(0,0,0,.15); + padding: 10px; +} + +@media (-moz-platform: macos), + (-moz-platform: windows) { + @media not (prefers-contrast) { + .customizationmode-button { + border: 1px solid #b1b1b1; + border-radius: 2px; + background-color: #fcfcfd; + appearance: none; + } + + .customizationmode-checkbox, + .customizationmode-button { + margin: 6px 10px; + padding: 2px 5px; + } + + .customizationmode-checkbox:not(:-moz-lwtheme, [disabled]), + .customizationmode-button { + color: rgb(71, 71, 71); + } + + .customizationmode-checkbox[disabled]:-moz-lwtheme { + color: inherit; + opacity: var(--toolbarbutton-disabled-opacity); + } + + #customization-reset-button, + #customization-undo-reset-button, + #customization-done-button { + min-width: 10em; + } + + #customization-done-button { + color: #fff !important; + font-weight: 700; + border-color: #0060df; + background-color: #0a84ff; + } + + .customizationmode-button > .box-inherit { + border-width: 0; + padding: 3px 0; + } + + /* We use a smaller padding to ensure images don't have padding. + * We can't detect whether a button has an image. This button doesn't + * so it needs more padding, so we unfortunately hardcode the extra + * padding in here: + */ + #customization-toolbar-visibility-button { + padding-inline-start: 8px; + } + + .customizationmode-button[type=menu] > .box-inherit > .box-inherit > .button-text { + padding-inline-end: 10px; + } + + .customizationmode-button > .button-icon { + margin-inline-start: 0; + } + + .customizationmode-button:not([type=menu]) > .button-text { + margin-inline-end: 0; + } + + .customizationmode-button > .box-inherit > .button-menu-dropmarker { + margin-inline-end: 0; + padding-inline-end: 0; + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); + } + + .customizationmode-button:is(:active,:hover):not([disabled]), + .customizationmode-button[open], + .customizationmode-button[checked] { + background-color: #e1e1e5; + } + + #customization-done-button:is(:active,:hover):not([disabled]) { + background-color: #0060df; + } + + .customizationmode-button[disabled="true"] { + opacity: var(--toolbarbutton-disabled-opacity); + } + } +} + +#customization-lwtheme-link { + display: flex; + align-items: center; +} + +#widget-overflow-fixed-list > toolbarpaletteitem:not([notransition])[place="panel"], +toolbarpaletteitem:not([notransition])[place="toolbar"] { + transition: border-width var(--drag-drop-transition-duration) ease-in-out; +} + +#widget-overflow-fixed-list > toolbarpaletteitem { + flex: none; +} + +toolbarpaletteitem[mousedown] { + cursor: -moz-grabbing; +} + +toolbarpaletteitem:not([notransition])[place="palette"], +toolbarpaletteitem:not([notransition])[place="panel"] { + transition: transform var(--drag-drop-transition-duration) ease-in-out; +} + +#customization-palette { + transition: opacity .3s ease-in-out; + opacity: 0; +} + +#customization-palette[showing="true"] { + opacity: 1; +} + +#customization-palette #firefox-view-button[attention] { + background-position: center bottom 8%; +} + +toolbarpaletteitem toolbarbutton[disabled] { + color: inherit !important; +} + +#PersonalToolbar toolbarpaletteitem toolbarbutton[checked="true"], +toolbar toolbarpaletteitem toolbarbutton[checked="true"] + > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + background-color: revert !important; +} + +toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarpaletteitem > #search-container, +toolbarpaletteitem > toolbaritem.toolbaritem-combined-buttons { + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; +} + +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { + transform: scale(1.3); +} + +toolbarpaletteitem[mousedown] > #search-container, +toolbarpaletteitem[mousedown] > toolbaritem.toolbaritem-combined-buttons { + transform: scale(1.1); +} + +toolbarpaletteitem[mousedown] > #search-container > #searchbar, +toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background +{ + outline: 1px solid color-mix(in srgb, currentColor 60%, transparent); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13); +} + +/* Override the toolkit styling for items being dragged over. */ +toolbarpaletteitem[place="toolbar"] { + border-inline-width: 0; + margin-inline: 0; +} +#widget-overflow-fixed-list > toolbarpaletteitem[place="panel"] { + border-block: 0 solid transparent; +} + +#customization-palette:not([hidden]) { + margin-bottom: 20px; +} + + +toolbarpaletteitem[place="palette"]:-moz-focusring, +toolbarpaletteitem[place="panel"]:-moz-focusring, +toolbarpaletteitem[place="toolbar"]:-moz-focusring { + outline-width: 0; +} + +toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring, +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + /* Delay adding the focusring back until after the transform transition completes. */ + transition: outline-width .01s linear var(--drag-drop-transition-duration); + outline: var(--default-focusring); +} + +toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { + outline-offset: calc(-1 * var(--default-focusring-width) - 4px); +} + +toolbarpaletteitem[place=palette]::after { + content: attr(title); + display: block; + text-align: center; +} + +toolbarpaletteitem[place=palette] > toolbarspring { + width: 7em; + min-width: 7em; + outline: 1px solid; + outline-offset: -8px; + opacity: .6; + min-height: 37px; + max-height: 37px; +} + +toolbarpaletteitem[place=toolbar] > toolbarspring { + outline: 1px solid; + outline-offset: -2px; + opacity: .6; + margin-block: 5px; +} + +toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox { + visibility: hidden; /* Hide searchbar placeholder text in customize mode */ +} + +#wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon { + opacity: 1; /* To ensure these buttons always look enabled in customize mode */ +} + +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button, +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator { + display: none; +} + +/* Squeeze together the multi-button toolbarpaletteitems: */ +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button { + align-items: flex-end; +} +#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button, +#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button, +#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker { + align-items: flex-start; +} +#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button { + flex: none; +} + +#customization-uidensity-touch-spacer { + border-top: 1px solid var(--panel-separator-color); + margin: 6px calc(-1 * var(--arrowpanel-padding)) 9px; +} + +#customization-uidensity-autotouchmode-checkbox { + margin-bottom: var(--arrowpanel-padding); +} + +#customization-uidensity-menu { + font: menu; + margin-inline: 0; + + /* Make the panel padding uniform across all platforms due to the + styling of the section headers and footer. */ + --arrowpanel-padding: 8px; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon { + width: 32px; + height: 32px; + margin: 5px; +} + +.customization-uidensity-menuitem { + appearance: none; + color: inherit; + border: 1px solid transparent; + border-radius: 4px; + padding-block: 0; + padding-inline: 0 5px; + margin: 2px 0; +} + +#customization-uidensity-menuitem-normal { + list-style-image: url("chrome://browser/skin/customizableui/density-normal.svg"); +} + +#customization-uidensity-menuitem-compact { + list-style-image: url("chrome://browser/skin/customizableui/density-compact.svg"); +} + +#customization-uidensity-menuitem-touch { + list-style-image: url("chrome://browser/skin/customizableui/density-touch.svg"); +} + +.customization-uidensity-menuitem:is(:hover, :focus-visible) { + background-color: var(--button-hover-bgcolor); +} + +.customization-uidensity-menuitem:is(:hover:active, [active="true"]) { + background-color: var(--button-active-bgcolor); +} + +.customization-uidensity-menuitem > .menu-iconic-text { + text-align: start; +} + +.customization-uidensity-menuitem > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-uidensity-button > .box-inherit > .box-inherit > .button-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#customization-panelWrapper > .panel-arrowcontent { + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); + background-clip: padding-box; + max-width: 29em; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that + * as best as we can here: */ + box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3); + appearance: none; + border-radius: var(--arrowpanel-border-radius); + } +} + +@media not (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowcontent { + border: 1px solid var(--arrowpanel-border-color); + margin: 0; + box-shadow: 0 0 4px hsla(0,0%,0%,.2); + } +} + +#customization-panelWrapper > .panel-arrowbox { + display: block; + position: relative; + height: 10px; + margin-bottom: -1px; +} + +/* Special-case the overflow and the hamburger button so they show up disabled + in customize mode. */ +:is(#nav-bar-overflow-button, #PanelUI-menu-button)[disabled] { + fill-opacity: var(--toolbarbutton-disabled-opacity); +} + +/* The overflow button should look both disabled and open. */ +#nav-bar[customizing] > #nav-bar-overflow-button > .toolbarbutton-icon { + background-color: var(--toolbarbutton-active-background); +} + +#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"); + -moz-context-properties: fill, stroke; + fill: var(--arrowpanel-background); + stroke: var(--arrowpanel-border-color); + /* JS code sets --panel-arrow-offset to the distance between the middle of the + * overflow button and the end of the window. We subtract the padding of our + * container (#customization-panel-container) and half our own width: + */ + margin-inline-end: calc(var(--panel-arrow-offset) - var(--customization-panel-padding) - 10px); + vertical-align: top; +} + +@media (-moz-platform: macos) { + #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] { + /* The OS X image is 2px narrower than the windows/linux one. + * Add padding to compensate: */ + padding: 0 1px; + /* specify width for hidpi image to fit correctly */ + width: 20px; + } +} + +#customization-panelDescription { + font-size: 1.1em; + padding: 2px 12px 10px; + margin: 0; +} + +#customization-panelHeader { + font-size: 1.3em; + font-weight: 600; + padding: 2px 12px; + margin: 0; +} + +#customization-panelHolder > #widget-overflow-fixed-list { + padding-top: 10px; +} + +/** + * We create a ::before pseudoelement that contains a background image to show the + * drop dragon. This element fades in and out depending on whether the containing + * panel list is empty and unhovered, or not. + */ +#customization-panelHolder > #widget-overflow-fixed-list:not(:empty) { + padding-bottom: 50px; /* Make sure there's always space to drop stuff. */ + border-top: 1px solid var(--panel-separator-color); +} + +#customization-panelHolder > #widget-overflow-fixed-list::before { + display: block; + content: ""; + background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel.png"); + background-position: center bottom 10px; + background-size: 218px 134px; + background-repeat: no-repeat; + opacity: 0; + transition: opacity 300ms ease-out; + padding-bottom: 154px; /* 154 = 134 for the image, 10px space on either side. */ + margin-bottom: -154px; /* don't affect positioning of the actual contents */ + pointer-events: none; +} + +@media (min-resolution: 1.1dppx) { + #customization-panelHolder > #widget-overflow-fixed-list::before { + background-image: url("chrome://browser/skin/customizableui/empty-overflow-panel@2x.png"); + } +} + +#customization-panelHolder > #widget-overflow-fixed-list:empty::before { + opacity: 1; +} +#customization-panelHolder > #widget-overflow-fixed-list[draggingover]:empty::before { + opacity: 0; +} + +#downloads-button-autohide-panel { + --arrowpanel-padding: 5px 12px; +} + +#downloads-button-autohide-checkbox { + margin: 0; + padding: 0; +} + +#whimsy-button { + /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */ + list-style-image: url("chrome://browser/skin/customizableui/whimsy.png"); +} + +#whimsy-button > .button-box > .button-icon { + width: 16px; + height: 16px; +} + +#customization-palette[whimsypong] { + /* Keep the palette in the render tree but invisible + so -moz-element() will work. */ + padding: 0; + min-height: 0; + max-height: 0; +} + +#customization-palette[whimsypong] > toolbarpaletteitem > toolbarspring { + margin: 0 -7px; +} + +@media (-moz-platform: linux) { + #customization-palette[whimsypong] > toolbarpaletteitem[id^="wrapper-customizableui-special-spring"] { + font-size: 12px; + } +} + +#wp-lives, +#wp-ball { + /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */ + background-image: url("chrome://browser/skin/customizableui/whimsy.png"); + background-size: contain; + width: 20px; +} + +#customization-pong-arena { + width: 300px; + height: 300px; + border-inline: 1px solid currentColor; + margin: 16px auto 0; + box-sizing: content-box; +} + +#customization-palette[whimsypong] > toolbarpaletteitem[kcode], +#customization-pong-arena[kcode] { + animation-name: kcode; + animation-timing-function: steps(5); + animation-duration: 1s; + animation-iteration-count: infinite; +} + +#wp-ball { + margin-inline-start: -10px; + margin-top: -10px; + height: 20px; +} + +#wp-player1, +#wp-player2 { + width: 84px; + height: calc(39px + 3em); +} + +#wp-player1, +#wp-player2, +#wp-ball, +#wp-score { + display: block; + position: fixed; +} + +#wp-score { + transform: translateX(-4ch); +} + +#wp-score:-moz-locale-dir(rtl) { + transform: translateX(4ch); +} + +#wp-lives { + transform: translate(-4ch, 1ch); +} + +#wp-lives:-moz-locale-dir(rtl) { + transform: translate(4ch, 1ch); +} + +#wp-lives[lives="5"] { + height: 100px; +} + +#wp-lives[lives="4"] { + height: 80px; +} + +#wp-lives[lives="3"] { + height: 60px; +} + +#wp-lives[lives="2"] { + height: 40px; +} + +#wp-lives[lives="1"] { + height: 20px; +} + +#customization-pong-arena[lives="0"] > #wp-ball { + animation: game-over 4s forwards ease; +} + +@keyframes game-over { + 0% { + transform: scale(1) translateY(0) rotateZ(0); + opacity: 1; + } + 15% { + transform: scale(2) translateY(-10px) rotateZ(-90deg); + } + 35% { + opacity: 1; + } + 65% { + opacity: 0; + } + 100% { + transform: scale(2) translateY(300px) rotateZ(-2.5turn); + opacity: 0; + } +} + +@keyframes kcode { + 0% { border-color: rgb(195,17,206); color: rgb(195,17,206); } + 20% { border-color: rgb(252,82,27); color: rgb(252,82,27); } + 40% { border-color: rgb(251,179,0); color: rgb(251,179,0); } + 60% { border-color: rgb(105,211,0); color: rgb(105,211,0); } + 80% { border-color: rgb(20,155,249); color: rgb(20,155,249); } + 100% { border-color: rgb(195,17,206); color: rgb(195,17,206); } +} diff --git a/browser/themes/shared/customizableui/density-compact.svg b/browser/themes/shared/customizableui/density-compact.svg new file mode 100644 index 0000000000..8d6bf1e7cd --- /dev/null +++ b/browser/themes/shared/customizableui/density-compact.svg @@ -0,0 +1,21 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> + <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/> + <path d="M3 1h26c1.1 0 2 .479 2 1.071V14H1V2.071C1 1.479 1.9 1 3 1z" fill="#f9f9fa"/> + <path d="M1 13.5h30" fill="none" stroke="#adadb3"/> + <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/> + <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round"> + <path d="M3.5 7.5h6"/> + <path stroke-linejoin="round" d="M6.5 4.5l-3 3 3 3"/> + </g> + <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round"> + <path d="M18.5 7.5h-6"/> + <path stroke-linejoin="round" d="M15.5 4.5l3 3-3 3"/> + </g> + <g opacity=".8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"> + <path d="M28.5 4.5v2h-2"/> + <path d="M27.623 9.614a3.03 3.03 0 1 1 .636-3.324"/> + </g> +</svg> diff --git a/browser/themes/shared/customizableui/density-normal.svg b/browser/themes/shared/customizableui/density-normal.svg new file mode 100644 index 0000000000..8298a571be --- /dev/null +++ b/browser/themes/shared/customizableui/density-normal.svg @@ -0,0 +1,18 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> + <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/> + <path d="M3 1h26c1.1 0 2 .627 2 1.4V18H1V2.4C1 1.627 1.9 1 3 1z" fill="#f9f9fa"/> + <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round"> + <path d="M25.5 9.5h-6"/> + <path stroke-linejoin="round" d="M22.5 6.5l3 3-3 3"/> + </g> + <path d="M2 17.5h29" fill="none" stroke="#adadb3"/> + <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/> + <circle cx="9.5" cy="9.5" r="6" fill="#fff" stroke="#adadb3"/> + <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round"> + <path d="M6.5 9.5h6"/> + <path stroke-linejoin="round" d="M9.5 6.5l-3 3 3 3"/> + </g> +</svg> diff --git a/browser/themes/shared/customizableui/density-touch.svg b/browser/themes/shared/customizableui/density-touch.svg new file mode 100644 index 0000000000..62963a5b0e --- /dev/null +++ b/browser/themes/shared/customizableui/density-touch.svg @@ -0,0 +1,14 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> + <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="#fff"/> + <path d="M2.942 1.073l26-.145a1.88 1.88 0 0 1 2.01 1.718l.108 19.27-30 .168L.951 2.813a1.88 1.88 0 0 1 1.991-1.74z" fill="#f9f9fa"/> + <path d="M1 21.5h30" fill="none" stroke="#adadb3"/> + <rect x="1" y="1" width="30" height="30" rx="2" ry="2" fill="none" stroke="#adadb3" stroke-width="2"/> + <circle cx="15.5" cy="11.5" r="8" fill="#fff" stroke="#adadb3"/> + <g opacity=".8" fill="none" stroke="#0c0c0d" stroke-linecap="round"> + <path d="M12.5 11.5h6"/> + <path stroke-linejoin="round" d="M15.5 8.5l-3 3 3 3"/> + </g> +</svg> diff --git a/browser/themes/shared/customizableui/empty-overflow-panel.png b/browser/themes/shared/customizableui/empty-overflow-panel.png Binary files differnew file mode 100644 index 0000000000..6bad10f5c2 --- /dev/null +++ b/browser/themes/shared/customizableui/empty-overflow-panel.png diff --git a/browser/themes/shared/customizableui/empty-overflow-panel@2x.png b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png Binary files differnew file mode 100644 index 0000000000..f2c7e5a418 --- /dev/null +++ b/browser/themes/shared/customizableui/empty-overflow-panel@2x.png diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css new file mode 100644 index 0000000000..9b9bc7074b --- /dev/null +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -0,0 +1,2016 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + --panel-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-color: var(--button-color); + --panel-banner-item-background-color: var(--button-bgcolor); + --panel-banner-item-hover-bgcolor: var(--button-hover-bgcolor); + --panel-banner-item-active-bgcolor: var(--button-active-bgcolor); + --panel-banner-item-update-supported-bgcolor: #2AC3A2; + --panel-banner-item-info-icon-bgcolor: #0090ED; + + --menu-panel-width: 22.35em; + --menu-panel-width-wide: 29em; + + --arrowpanel-menuitem-margin-block: 0; + --arrowpanel-menuitem-margin-inline: 8px; + --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline); + --arrowpanel-menuitem-padding-block: 8px; + --arrowpanel-menuitem-padding-inline: 8px; + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); + --arrowpanel-menuitem-border-radius: 4px; + --arrowpanel-header-info-icon-padding: 4px; + --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding))); + --panel-separator-margin-vertical: 4px; + --panel-separator-margin-horizontal: 8px; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); + --panel-subview-body-padding-block: 8px; + --panel-subview-body-padding-inline: 0; + --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline); + + --panel-and-palette-icon-size: 16px; +} + +:root:not(:-moz-lwtheme) { + --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%); +} + +:root[uidensity=compact] { + --arrowpanel-menuitem-margin-inline: 4px; + --arrowpanel-menuitem-padding-block: 0px; + --panel-separator-margin-horizontal: 4px; + --panel-subview-body-padding-block: 4px; +} + +/* The vars in this rule are not on the :root above so that they would + * work in conjunction with when touchmode attribute is set on the panels. */ +panel, +menupopup { + /* The value for the header back icon padding is selected in a way that the + * height of the header and its separator will be equal to the panel inner + * top padding plus standard menuitem, so that the header's separator will + * be located excatly where a normal toolbarseparator would be located after + * the first menuitem, in a menu without a header. */ + --arrowpanel-header-back-icon-padding: 6px; + --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding))); + /* The min-height is calculated with the separator's horizontal margin rather + * than the vertical, to let the back icon have even spacing all around + * while being aligned with the separator. */ + --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + + (var(--panel-separator-margin-horizontal) * 2)); +} + +:root[uidensity=compact] :is(panel, menupopup):not([touchmode]) { + --arrowpanel-header-back-icon-padding: 4px; +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; + height: 10px; + width: 10px; + background-size: contain; + border: none; +} + +#PanelUI-menu-button[badge-status="extension-new-tab"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: none; +} + +#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + box-shadow: none; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -5px 0 0 !important; + margin-inline-end: -3px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + background-size: 12px; +} + +#PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--warning-icon-bgcolor); +} + +.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon { + background-image: url(chrome://browser/skin/update-badge.svg); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: var(--panel-banner-item-update-supported-bgcolor); +} + +.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon { + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + -moz-context-properties: stroke, fill; + stroke: var(--arrowpanel-background); + fill: var(--warning-icon-bgcolor); +} + +#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 13px; + background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent; + box-shadow: none; + border-radius: 0; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} + +#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; +} + +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: grayscale(100%); +} + +.cui-widget-panel, +#widget-overflow, +#unified-extensions-panel { + font: menu; +} + +panelview { + flex-direction: column; + background: var(--arrowpanel-background); + padding: 0; +} + +/* Prevent a scrollbar from appearing while the animation for transitioning from + one view to another runs, which would otherwise happen if the new view has + more height than the old one because that would mean that during the + animation the height of the multiview will be too short for the new view. */ +panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body { + overflow-y: hidden; +} + +.panel-subview-body { + overflow-y: auto; + overflow-x: hidden; + flex: 1; + padding: var(--panel-subview-body-padding); +} + +.panel-subview-body:not(:last-child) { + padding-bottom: 0; +} + +toolbarseparator + .panel-subview-body { + padding-top: 0; +} + +.panel-view-body-unscrollable { + overflow: hidden; + flex: 1; +} + +.panel-info-button { + appearance: none; + color: inherit; + padding: 0; + border-radius: var(--toolbarbutton-border-radius); + flex-shrink: 0; +} + +.panel-info-button[disabled=true] { + visibility: hidden; +} + +.panel-info-button:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +.panel-info-button:not(:hover)[checked], +.panel-info-button:hover:active { + background-color: var(--panel-item-active-bgcolor); +} + +.panel-info-button:focus-visible { + outline: var(--focus-outline); +} + +.panel-info-button > image { + list-style-image: url(chrome://global/skin/icons/info.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + padding: var(--arrowpanel-header-info-icon-padding); +} + +#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls, +#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls, +:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons { + margin: var(--arrowpanel-menuitem-margin); +} + +/* Bookmark-related menupopup tweaks to make them feel like standard panels */ + +toolbarbutton menupopup[placespopup] { + appearance: none; + border: none; + font: menu; + background-color: transparent; + --panel-background: var(--arrowpanel-background); + --panel-color: var(--arrowpanel-color); + --panel-border-color: var(--arrowpanel-border-color); + --panel-border-radius: var(--arrowpanel-border-radius); + --panel-padding: var(--panel-subview-body-padding); +} + +toolbarbutton menupopup[placespopup] menupopup[placespopup] { + /* Align non top-level menupopup's first menuitem with the menuitem that opened it. + * The 1px is for the menupopup's border. */ + margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px)); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem)[disabled] { + color: var(--panel-disabled-color); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive] { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem):not([disabled])[_moz-menuactive]:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem) :is( + .menu-text, + .menu-iconic-text, + .menu-iconic-icon, + .menu-iconic-left, + .menu-iconic-accel, + .menu-accel-container, + .menu-accel, + .menu-right +) { + /* Reset every spacing and appearance set by the platforms' menu.css + * and set the ones we need in the following rules. */ + margin: 0 !important; + padding: 0 !important; + appearance: none !important; +} + +toolbarbutton menupopup[placespopup] > :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left { + margin-inline-end: 8px !important; +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) { + margin-inline-start: 16px !important; + color: var(--panel-shortcut-color); +} + +toolbarbutton menupopup[placespopup][emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel { + margin: 0 !important; +} + +toolbarbutton menupopup[placespopup] > menu > .menu-right { + list-style-image: url(chrome://global/skin/icons/arrow-right.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + width: unset; + height: unset; +} + +toolbarbutton menupopup[placespopup] > menu > .menu-right:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-left.svg); +} + +/* menuseparators in bookmark-related menupopups are styled differently + * to allow for user interaction with them (e.g. drag, right click ...) */ +toolbarbutton menupopup[placespopup] menuseparator { + position: relative; + appearance: none; + border: none; + min-height: 0; + margin: 0 var(--panel-separator-margin-horizontal); + padding-inline: 0; + padding-top: var(--panel-separator-margin-vertical); + padding-bottom: calc(var(--panel-separator-margin-vertical) + 1px); +} + +toolbarbutton menupopup[placespopup] menuseparator::before { + content: ''; + position: absolute; + width: 100%; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; +} + +#BMB_bookmarksPopup { + max-width: 30em; +} + +#confirmation-hint { + --arrowpanel-background: #0060df; + --arrowpanel-border-color: #0060df; + --arrowpanel-color: #fff; + --arrowpanel-padding: 6px 10px; + font-weight: 400; + font-size: 1.1rem; +} + +#confirmation-hint::part(content) { + align-items: center; +} + +#confirmation-hint-checkmark-animation-container { + position: relative; + overflow: hidden; + width: 14px; + height: 14px; +} + +/* Don't show the checkmark if there is a description */ +#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container { + display: none; +} + +#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image { + display: block; + position: absolute; + background-image: url(chrome://browser/skin/success-animation.svg); + background-repeat: no-repeat; + /* frames are 16px wide by 14px high */ + min-width: 304px; + max-width: 304px; + min-height: 14px; + max-height: 14px; + animation-name: confirmation-hint-checkmark-animation; + animation-fill-mode: forwards; + animation-timing-function: steps(18); + -moz-context-properties: fill; + fill: currentColor; +} + +#confirmation-hint[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image { + background-image: url("chrome://global/skin/icons/delete.svg"); + background-size: contain; + -moz-context-properties: fill; + fill: #FFF; + animation: none; +} + +#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image:-moz-locale-dir(rtl) { + animation-name: confirmation-hint-checkmark-animation-rtl; + transform: translateX(288px); +} + +@media (prefers-reduced-motion: no-preference) { + #confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image { + animation-duration: 300ms; + animation-delay: 60ms; + } +} + +@keyframes confirmation-hint-checkmark-animation { + from { + transform: translateX(0); + } + to { + transform: translateX(-288px); + } +} + +@keyframes confirmation-hint-checkmark-animation-rtl { + from { + transform: translateX(288px); + } + to { + transform: translateX(0); + } +} + +#confirmation-hint-message { + margin-inline: 7px 0; +} + +#confirmation-hint.with-description #confirmation-hint-message { + font-size: 1.2em; + font-weight: 600; +} + +@media (prefers-reduced-motion: no-preference) { + #confirmation-hint-message-container { + transform: scale(.8); + opacity: 0; + transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18), + opacity 60ms linear; + } + + #confirmation-hint-checkmark-animation-container[animate] + #confirmation-hint-message-container { + transform: scale(1); + opacity: 1; + } +} + +panelview[id^=PanelUI-webext-] { + overflow: hidden; +} + +.cui-widget-panel { + --arrowpanel-padding: var(--panel-subview-body-padding); +} + +#appMenu-popup panelview, +#PanelUI-fxa { + width: 22.5em; +} + +#customizationui-widget-multiview panelview:not([extension]) { + min-width: var(--menu-panel-width); + max-width: 35em; +} + +#customizationui-widget-multiview #appMenu-libraryView, +#pageActionPanel panelview, +#widget-overflow panelview { + min-width: var(--menu-panel-width-wide); + max-width: var(--menu-panel-width-wide); +} + +/* Add 2 * 16px extra width for touch mode button padding. */ +#appMenu-popup[touchmode] panelview { + min-width: calc(var(--menu-panel-width) + 32px); +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton > .toolbarbutton-icon { + min-width: 0; + min-height: 0; + margin: 0; +} + +.animate-out { + animation-name: widget-animate-out; + animation-fill-mode: forwards; + animation-duration: 500ms; + animation-timing-function: var(--animation-easing-function); +} + +@keyframes widget-animate-out { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0 ; + transform: scale(.5); + } +} + +toolbarpaletteitem[place="panel"] > .toolbarbutton-1 { + flex: 1; +} + +/* Help webextension buttons fit in. */ +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--panel-and-palette-icon-size); + width: var(--panel-and-palette-icon-size); +} + +#customization-palette .toolbarbutton-1 { + appearance: none; + flex-direction: column; + padding: 12px 0 9px; + margin: 0; +} + +/* above we treat the container as the icon for the margins, that is so the +/* badge itself is positioned correctly. Here we make sure that the icon itself +/* has the minimum size we want, but no padding/margin. */ +.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { + width: var(--panel-and-palette-icon-size); + height: var(--panel-and-palette-icon-size); + min-width: var(--panel-and-palette-icon-size); + min-height: var(--panel-and-palette-icon-size); + margin: 0; + padding: 0; +} + +#zoom-in-button > .toolbarbutton-text, +#zoom-out-button > .toolbarbutton-text, +#zoom-reset-button > .toolbarbutton-icon { + display: none; +} + +/* Main menu banner menuitems */ + +#appMenu-popup .panel-banner-item, +#appMenu-popup .addon-banner-item { + align-items: flex-start; + color: var(--panel-banner-item-color); + background-color: var(--panel-banner-item-background-color); + margin-bottom: 4px; + font-weight: 600; +} + +:root[uidensity="compact"] .panel-banner-item, +:root[uidensity="compact"] .addon-banner-item { + /* Without some padding the button gets too crowded even for compact mode + when the text wraps to a newline. */ + padding-block: 4px; +} + +#appMenu-popup .panel-banner-item:not([disabled]):hover, +#appMenu-popup .addon-banner-item:not([disabled]):hover { + background-color: var(--panel-banner-item-hover-bgcolor); +} + +#appMenu-popup .panel-banner-item:not([disabled]):hover:active, +#appMenu-popup .addon-banner-item:not([disabled]):hover:active { + background-color: var(--panel-banner-item-active-bgcolor); +} + +#appMenu-popup .panel-banner-item > .toolbarbutton-text, +#appMenu-popup .addon-banner-item > .toolbarbutton-text { + display: inline-block; + padding: 0; +} + +.panel-banner-item > .toolbarbutton-icon { + width: 16px; + height: 16px; + /* Move the icon to appear after the text label. */ + order: 2; +} + +.addon-banner-item > .toolbarbutton-icon { + display: none; +} + +/* Addon banners use that one for the addon's icon and need a content element + added to put their generic notification in. */ +.addon-banner-item::after { + content: ""; + display: flex; + background: url(chrome://global/skin/icons/warning.svg) no-repeat center; + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); + margin-inline-start: 10px; +} + +/* FxAccount indicator bits. */ + +@keyframes syncRotate { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} + +@media (prefers-reduced-motion: no-preference) { +#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon, +#PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon, +.syncNowBtn[syncstatus="active"] { + animation: syncRotate 0.8s linear infinite; + -moz-context-properties: fill; + fill: var(--toolbarbutton-icon-fill-attention); + visibility: visible; +} +} + +.syncNowBtn { + -moz-context-properties: fill; + fill: currentColor; + height: 16px; + width: 16px; + list-style-image: url("chrome://browser/skin/sync.svg"); +} + +#fxa-menu-account-fxa-avatar { + pointer-events: none; + list-style-image: var(--avatar-image-url); + -moz-context-properties: fill; + fill: currentColor; +} + +/* Handle different UI states. */ + +:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button { + display: none; +} + +/* Error states */ + +#appMenu-fxa-status2 { + display: flex; +} + +#appMenu-fxa-text, +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 { + flex: 1; + align-self: center; +} + +#appMenu-fxa-status2[fxastatus] { + margin: 0; + padding: 0; +} + +#appMenu-fxa-status2:not([fxastatus]) { + padding-block: 0 2px; +} + +#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description, +#appMenu-fxa-text { + font-weight: 600; +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 { + padding: 6px 12px; + background-color: var(--button-bgcolor); + font-size: 0.8em; + font-weight: 600; +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:hover { + background-color: var(--button-hover-bgcolor); +} + +#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2:active { + background-color: var(--button-active-bgcolor); +} + +:root[fxadisabled=true] #appMenu-fxa-status2, +:root[fxadisabled=true] #appMenu-fxa-separator { + display: none; +} + +#fxa-manage-account-button > vbox > label, +#PanelUI-fxa-menu-syncnow-button > hbox > label, +#PanelUI-remotetabs-syncnow > hbox > label, +#appMenu-fxa-label2 > vbox > label { + margin: 0; +} + +.syncNowBtn { + visibility: collapse; + order: 2; +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + font-size: 11px; +} + +#appMenu-fxa-status2[fxastatus="login-failed"] #appMenu-fxa-label2::after { + content: url("chrome://global/skin/icons/warning.svg"); + -moz-context-properties: fill; + fill: var(--warning-icon-bgcolor); +} + +#appMenu-fxa-status2[fxastatus="unverified"] #appMenu-fxa-label2::after { + content: url("chrome://global/skin/icons/info-filled.svg"); + -moz-context-properties: fill; + fill: var(--panel-banner-item-info-icon-bgcolor); +} + +/* Firefox Account Toolbar Panel */ + +#fxa-avatar-image { + width: 16px; + height: 16px; +} + +:root { + --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg); +} + +:root[fxastatus="not_configured"] { + --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg); +} + +:root:not([fxatoolbarmenu]) #fxa-toolbar-menu-button { + display: none; +} + +@supports not -moz-bool-pref("identity.fxaccounts.toolbar.defaultVisible") { + /* Hide the FxA toolbar button when its in the nav-bar, until in use */ + :root[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button, + :root[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button { + display: none; + } +} + +#fxa-avatar-image, +#PanelUI-fxa-menu-account-settings-button { + list-style-image: var(--avatar-image-url); +} + +/* Non-signedin statuses icons are not totally round. */ +:root[fxastatus="signedin"] #fxa-avatar-image { + border-radius: 50%; +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + /* Use 'lighter' font for this to de-emphasize it compared to the title. */ + font-weight: lighter; +} + +@media (-moz-platform: linux) { + .PanelUI-fxa-service-description-label, + .PanelUI-remotetabs-instruction-label { + /* Use 300 on Linux because 100 is too light (lacks contrast with + * the background) for some fonts in combination with anti-aliasing. */ + font-weight: 300; + } +} + +#fxa-menu-header-title { + color: var(--arrowpanel-color); +} + +#fxa-menu-header-description { + color: var(--text-color-deemphasized); + font-weight: 600; +} + +#PanelUI-appMenu-fxa-label-last-synced { + font-size: 10px; + font-style: italic; + color: var(--text-color-deemphasized); +} + +#PanelUI-fxa-menu-send-button { + list-style-image: url(chrome://browser/skin/fxa/send.svg); +} + +#PanelUI-fxa-menu-monitor-button { + list-style-image: url(chrome://browser/skin/fxa/monitor.svg); +} + +:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button { + color: var(--panel-disabled-color); +} + +/* From the FxA menu -> synced tabs, we don't need to clutter the view with + redundant buttons because these are accessible from the main menu */ +panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow { + display: none; +} + +#PanelUI-sendTabToDevice > .panel-subview-body:not([state]) > #PanelUI-sendTabToDevice-syncingDevices { + display: none; +} + +#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +.fxaSendLogo, +.fxaMonitorLogo { + margin-top: 15px; + height: 80px; + width: 80px; +} + +.fxaSendToDeviceLogo { + margin-top: 15px; + height: 119px; + width: 164px; + list-style-image: url(chrome://browser/skin/fxa/send-to-device.svg); +} + +.fxaSendLogo { + list-style-image: url(chrome://browser/content/logos/send.svg); +} + +.fxaMonitorLogo { + list-style-image: url(chrome://browser/content/logos/monitor.svg); +} + +#PanelUI-remotetabs { + --panel-ui-sync-illustration-height: 141px; +} + +.sendToDevice-device[clientType=phone] { + list-style-image: url("chrome://browser/skin/device-phone.svg"); +} + +.sendToDevice-device[clientType=tablet] { + list-style-image: url("chrome://browser/skin/device-tablet.svg"); +} + +.sendToDevice-device[clientType=desktop] { + list-style-image: url("chrome://browser/skin/device-desktop.svg"); +} + +.sendToDevice-device[clientType=tv] { + list-style-image: url("chrome://browser/skin/device-tv.svg"); +} + +.sendToDevice-device[clientType=vr] { + list-style-image: url("chrome://browser/skin/device-vr.svg"); +} + +.sendToDevice-device.signintosync { + list-style-image: url("chrome://browser/skin/sync.svg"); +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + margin: 0; + text-align: center; + text-shadow: none; + max-width: 15em; +} + +.PanelUI-fxa-service-description-label, +.PanelUI-remotetabs-instruction-label { + margin-top: 10px; +} + +.PanelUI-fxa-signin-button, +.PanelUI-remotetabs-button { + appearance: none; + background-color: #0060df; + /* !important for the color as an OSX specific rule when a lightweight theme + is used for buttons in the toolbox overrides. See bug 1238531 for details */ + color: white !important; + border-radius: 2px; + /* If you change the margin or padding below, the min-height of the synced tabs + panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, + etc) may need adjusting (see bug 1248506) */ + margin-block: 15px; + padding: 8px; + text-shadow: none; + min-width: 200px; +} + +.PanelUI-fxa-signin-button, +.PanelUI-remotetabs-button { + padding: 1em; +} + +.PanelUI-fxa-signin-button:hover, +.PanelUI-remotetabs-button:hover { + background-color: #003eaa; +} + +.PanelUI-fxa-signin-button:hover:active, +.PanelUI-remotetabs-button:hover:active { + background-color: #002275; +} + +.remotetabs-promo-link { + margin: 0; +} + +.PanelUI-remotetabs-notabsforclient-label { + color: var(--text-color-deemphasized); + /* This margin is to line this label up with the labels in toolbarbuttons. */ + margin-inline-start: 28px; +} + +#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label { + margin-inline-start: 32px; +} + +.fxaSyncIllustration, +.fxaSyncIllustrationIssue { + /* If you change the margin here, the min-height of the synced tabs panel + (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may + need adjusting (see bug 1248506) */ + width: 204px; + height: var(--panel-ui-sync-illustration-height); + -moz-context-properties: fill; + fill: #cdcdcd; +} + +.fxaSyncIllustration { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); +} + +.fxaSyncIllustrationIssue { + list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg); +} + +.PanelUI-fxa-signin-button > .toolbarbutton-text, +.PanelUI-remotetabs-button > .toolbarbutton-text { + /* Overrides toolbar[mode="icons"] from xul.css */ + display: block; +} + +#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ + min-width: 19em; +} + +/* Work around bug 1224412 - these boxes will cause scrollbars to appear when + the panel is anchored to a toolbar button. +*/ +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-syncdisabled, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-unverified, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, +#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { + min-height: calc(var(--panel-ui-sync-illustration-height) + + 15px + /* margin of .fxaSyncIllustration */ + 30px + /* margin of .PanelUI-remotetabs-button */ + 8px + /* padding of .PanelUI-remotetabs-button */ + 1em); +} + +.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { + color: var(--text-color-deemphasized); +} + +/* Collapse the non-active vboxes in the remotetabs deck to use only the + height the active box needs */ +#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, +#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, +#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane { + visibility: collapse; +} + +#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { + display: none; +} + +#PanelUI-fxa-remotetabs-deck:not([syncingtabs]) { + display: none; +} + +#customization-palette .toolbarbutton-text { + display: none; +} + +toolbarbutton menupopup[placespopup] > :is(menu, menuitem), +.subview-subheader, +panelview .toolbarbutton-1, +.subviewbutton, +.widget-overflow-list .toolbarbutton-1 { + appearance: none; + margin: var(--arrowpanel-menuitem-margin); + min-height: 24px; + padding: var(--arrowpanel-menuitem-padding); + border-radius: var(--arrowpanel-menuitem-border-radius); + background-color: transparent; + flex-shrink: 0; +} + +.subview-subheader { + font-size: 11px; + font-weight: inherit; + color: var(--text-color-deemphasized); + padding-block: 4px; + box-sizing: border-box; +} + +.subviewbutton { + /* toolbarbuttons default to centered, but we don't want that for subviews. */ + justify-content: flex-start; +} + +.subviewbutton[disabled="true"] { + color: var(--panel-disabled-color); +} + +.subviewbutton-iconic > .toolbarbutton-text, +.subviewbutton[image] > .toolbarbutton-text, +.subviewbutton[targetURI] > .toolbarbutton-text, +.subviewbutton.bookmark-item > .toolbarbutton-text, +.subviewbutton[checked="true"] > .toolbarbutton-text { + padding-inline-start: 8px; +} + +.subviewbutton-iconic > .toolbarbutton-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; +} + +/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons, + * also in compact density and touch mode. */ +#appMenu-zoom-controls { + padding-block: max(0px, var(--arrowpanel-menuitem-padding-block) - 4px); +} + +#appMenu-zoom-controls > .subviewbutton { + margin-inline-start: 2px; + padding: 4px; +} + +/* hover and active color changes are applied to child elements not the button itself */ +#appMenu-zoom-controls > .subviewbutton:not([disabled]):is(:hover, :hover:active) { + color: unset; + background-color: unset; +} + +#appMenu-zoom-controls > .subviewbutton:focus-visible { + outline: none; +} + +#appMenu-zoom-controls > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon, +#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text { + outline: var(--focus-outline); +} + +#appMenu-zoomReduce-button2 > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { + -moz-context-properties: fill, stroke; + fill: var(--button-color); + /* the stroke color is used to fill the circle in the icon */ + stroke: var(--button-bgcolor); + border-radius: 50%; + padding: 0; +} + +#appMenu-zoomReset-button2 > .toolbarbutton-text, +#appMenu-fullscreen-button2 > .toolbarbutton-icon { + border-radius: 2px; +} + +#appMenu-fullscreen-button2 > .toolbarbutton-icon { + padding: 1px; + background-color: var(--button-bgcolor); +} + +#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text, +#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon { + background-color: var(--panel-item-hover-bgcolor); +} +#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon { + stroke: var(--panel-item-hover-bgcolor); +} + +#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text, +#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon { + background-color: var(--panel-item-active-bgcolor); +} +#appMenu-zoomReduce-button2:not([disabled]):active:hover > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled]):active:hover > .toolbarbutton-icon { + stroke: var(--panel-item-active-bgcolor); +} + +/** + * When the Zoom Reset button is disabled, we don't want the zoom-level + * indicator to be so hard to read, so we override the disabled text + * style on it. + */ +#appMenu-zoomReset-button2[disabled], +#zoom-reset-button[disabled] { + opacity: 1; +} + +/* We don't always display: none this item, and if it has forced width (like above) + * or margin, that impacts the position of the label. Fix: + */ +.subviewbutton > .toolbarbutton-icon { + margin: 0; +} + +.subviewbutton > .toolbarbutton-text { + text-align: start; + display: block; +} + +.panel-subview-footer-button { + /* Set the footer's bottom margin according to menuitems inline margin + to make sure the footer's margin is even from all sides. */ + margin-bottom: var(--arrowpanel-menuitem-margin-inline); +} + +.subviewbutton[shortcut]::after { + content: attr(shortcut); + display: flex; + color: var(--panel-shortcut-color); +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound)::after, +.widget-overflow-list .subviewbutton-nav::after, +.PanelUI-subView .subviewbutton-nav::after { + -moz-context-properties: fill, fill-opacity; + content: url(chrome://global/skin/icons/arrow-right.svg); + fill: currentColor; + fill-opacity: 0.6; + display: flex; +} + +#protections-popup-mainView .subviewbutton-nav:not(.notFound):-moz-locale-dir(rtl)::after, +.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after, +.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after { + content: url(chrome://global/skin/icons/arrow-left.svg); +} + +.PanelUI-subView .subviewbutton-nav-down::after { + content: url(chrome://global/skin/icons/arrow-down.svg); +} + +.subviewbutton[shortcut]::after, +.widget-overflow-list .subviewbutton-nav::after, +.PanelUI-subView .subviewbutton-nav::after { + margin-inline-start: 10px; +} + +.subviewbutton[checked="true"] { + list-style-image: url(chrome://global/skin/icons/check.svg); + -moz-context-properties: fill; + fill: currentColor; + color: inherit; +} + +.subviewbutton[type="open-to-new"]::after { + content: url(chrome://global/skin/icons/open-in-new.svg); + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + display: flex; + height: 12px; + width: 12px; +} + +.subviewbutton[type="open-to-new"]:-moz-locale-dir(rtl)::after { + transform: scaleX(-1); +} + +/* A menu item with some buttons at the end. */ +.toolbaritem-menu-buttons { + /* Use the same margin at the start as at the end (other margin set below). */ + margin-inline-start: 8px; +} + +.toolbaritem-menu-buttons > .subviewbutton { + min-width: auto; + padding-inline: 5px; +} + +.toolbaritem-menu-buttons > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text { + display: none; +} + +.toolbaritem-combined-buttons, +.toolbaritem-menu-buttons { + align-items: center; + flex-direction: row; + border: 0; + border-radius: 0; +} + +.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]), +.toolbaritem-menu-buttons { + margin-inline-end: 8px; +} + +panelmultiview .toolbaritem-combined-buttons > label { + flex: 1; + margin: 0; + padding: 4px 0; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton { + flex: none; + height: auto; + margin-inline-start: 18px; + min-width: auto; + padding: 4px 5px; +} + +#appMenu-zoomReset-button2 > .toolbarbutton-text { + min-width: calc(4ch + 8px); + text-align: center; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text, +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon { + display: none; +} + +.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + padding-inline-start: 0; +} + +panelview .toolbarbutton-1 { + margin-top: 6px; +} + +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +/* hover styles for not-disabled, not-active buttons */ +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):not([disabled]):hover { + color: inherit; + background-color: var(--panel-item-hover-bgcolor); +} + +/* hovered-and-active styles for not-disabled buttons */ +:is( + panelview .toolbarbutton-1, + toolbarbutton.subviewbutton, + .widget-overflow-list .toolbarbutton-1, + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton +):not([disabled]):hover:active { + color: inherit; + background-color: var(--panel-item-active-bgcolor); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.PanelUI-subView toolbarseparator.proton-zap { + border-image: var(--panel-separator-zap-gradient, none) 1; +} + +.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"], +#PanelUI-historyItems > toolbarbutton { + list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +#fxa-menu-account-fxa-avatar, +#appMenu-fxa-label > .toolbarbutton-icon, +#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon, +.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, +#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, +#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, +#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#PanelUI-fxa-remotetabs-tabspane { + min-width: 0; +} + +#PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon { + border-radius: 50%; +} + +toolbarpaletteitem[place="palette"] > #search-container { + min-width: 7em; + width: 7em; + min-height: 37px; + max-height: 37px; +} + +.toolbaritem-combined-buttons:where(:not(.unified-extensions-item)):is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton { + border: 0; + margin: 0; + flex: 1; + padding-block: var(--arrowpanel-menuitem-padding-block); + flex-direction: row; +} + +toolbarpaletteitem[place="panel"], +toolbarpaletteitem[place="panel"] > toolbaritem { + flex: 1; +} + +.toolbaritem-combined-buttons[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker, +.toolbaritem-combined-buttons[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker { + display: none; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton:not(.toolbarbutton-1)[disabled] { + opacity: 0.4; + /* Override toolbarbutton.css which sets the color to GrayText */ + color: inherit; +} + +#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text { + display: block; + /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */ + min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2); +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > separator { + appearance: none; + align-items: stretch; + margin: .5em 0; + width: 1px; + height: auto; + background: var(--panel-separator-color); + transition-property: margin; + transition-duration: 10ms; + transition-timing-function: ease; +} + +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +):hover > separator { + margin: 0; +} + +.widget-overflow-list .toolbarbutton-1 { + align-items: center; + flex-direction: row; +} + +toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after { + opacity: 0.5; +} + +.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text { + text-align: start; + padding-inline-start: .5em; +} + +#PanelUI-panicView > .panel-subview-body, +#PanelUI-panicView { + overflow: visible; +} + +#PanelUI-panicView.cui-widget-panelview { + min-width: 280px; +} + +#PanelUI-panic-timeframe { + padding: 15px; + border-bottom: 1px solid var(--panel-separator-color); +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + background-color: transparent; + margin-inline-end: 10px; +} + +#panic-button-success-icon, +#PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header.png); + max-height: 48px; + width: 48px; +} + +#panic-button-success-header { + align-items: center; + margin-bottom: 5px; +} + +#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.subviewradio { + appearance: none; + align-items: center; + padding: 3px; + margin: 0 0 2px; + background-color: transparent; + border-radius: 4px; + border: 1px solid transparent; +} + +.subviewradio:hover { + background-color: var(--button-hover-bgcolor); +} + +.subviewradio:is([selected], [selected]:hover, :hover:active) { + background-color: var(--button-active-bgcolor); +} + +radiogroup:focus-visible > .subviewradio[focused="true"] { + outline: var(--focus-outline); +} + +radiogroup:focus-visible > .subviewradio[focused="true"] > .radio-label-box { + outline: none; +} + +.subviewradio > .radio-check { + appearance: none; + width: 16px; + height: 16px; + border: 1px solid rgba(110, 110, 110, 0.4); + border-radius: 50%; + margin: 1px 5px; + background-color: rgba(150,150,150,0.2); +} + +.subviewradio > .radio-check[selected] { + background-color: #fff; + border: 4px solid #177ee6; +} + +:root[lwt-popup-brighttext] .subviewradio > .radio-check[selected] { + background-color: transparent; + border: 4px solid #00ddff; +} + +#PanelUI-panic-explanations { + padding: 10px 10px 0; +} + +#PanelUI-panic-actionlist-main-label { + color: var(--text-color-deemphasized); + font-size: 0.9em; +} + +.PanelUI-panic-actionlist { + padding-block: 2px; + padding-inline-start: 20px; + background-size: 16px 16px; + background-repeat: no-repeat; + background-color: transparent; + background-position: left center; +} + +.PanelUI-panic-actionlist:-moz-locale-dir(rtl) { + background-position-x: right; +} + +#PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0); +} + +#PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16); +} + +#PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32); +} + +#PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48); +} + +#PanelUI-panic-warning { + color: #d74345; + text-align: center; + width: 100%; + margin-top: 20px; +} + +#PanelUI-panic-view-button { + appearance: none; + background-color: var(--buttons-destructive-bgcolor); + color: var(--buttons-destructive-color); + margin: 5px 15px 11px; + border: 1px solid transparent; + border-radius: 4px; + font-weight: 600; + padding: 10px; +} + +#PanelUI-panic-view-button:hover { + background-color: var(--buttons-destructive-hover-bgcolor); +} + +#PanelUI-panic-view-button:hover:active { + background-color: var(--buttons-destructive-active-bgcolor); +} + +#PanelUI-panic-view-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#PanelUI-panic-view-button > .toolbarbutton-text { + text-align: center; + text-shadow: none; +} + +#panic-button-success-closebutton { + background-color: var(--button-bgcolor); + color: var(--button-color); + margin: 5px 0 0; + border: 1px solid transparent; + border-radius: 4px; + padding: 10px; + font-weight: 600; + appearance: none; +} + +#panic-button-success-closebutton:hover { + background-color: var(--button-hover-bgcolor); +} + +#panic-button-success-closebutton:hover:active { + background-color: var(--button-active-bgcolor); +} + +@media (min-resolution: 1.1dppx) { + #panic-button-success-icon, + #PanelUI-panic-timeframe-icon { + list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png); + } + + #PanelUI-panic-actionlist-cookies { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0); + } + + #PanelUI-panic-actionlist-history { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 64, 32, 32); + } + + #PanelUI-panic-actionlist-windows { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 96, 32, 64); + } + + #PanelUI-panic-actionlist-newwindow { + background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 128, 32, 96); + } +} + +.panel-header { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + /* Set the header's padding according to menuitems horizontal padding + to make sure they are even from all sides and aligned according to that padding. */ + padding: var(--arrowpanel-menuitem-margin-inline); + /* Calculate the header's height assuming it includes an icon even if it doesn't, + to make sure all headers are the same height (assuming their text is a one liner). */ + min-height: var(--arrowpanel-header-min-height); +} + +.panel-header + toolbarseparator { + margin-top: 0 !important; +} + +.panel-header > h1 { + flex: auto; + font-size: inherit; + font-weight: 600; + margin: 0; +} + +.panel-header.panel-header-with-info-button > h1 { + /* Add the size of the info button to center properly. */ + margin-inline-start: var(--arrowpanel-header-info-icon-full-width); +} + +.panel-header:not(.panel-header-with-info-button) > .subviewbutton-back + h1 { + /* Add the size of the back button to center properly. */ + margin-inline-end: var(--arrowpanel-header-back-icon-full-width); +} + +.panel-header.panel-header-with-info-button > .subviewbutton-back + h1 { + margin-inline-start: 0; + margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) + - var(--arrowpanel-header-info-icon-full-width)); +} + +.panel-header > h1 > span { + display: inline-block; + white-space: pre-wrap; +} + +.panel-header > .subviewbutton-back { + -moz-context-properties: fill; + fill: var(--arrowpanel-color); + list-style-image: url(chrome://global/skin/icons/arrow-left.svg); + padding: var(--arrowpanel-header-back-icon-padding); +} + +.panel-header > .subviewbutton-back:-moz-locale-dir(rtl) { + list-style-image: url(chrome://global/skin/icons/arrow-right.svg); +} + +.subviewbutton-back { + margin: 0; +} + +.subviewbutton-back > .toolbarbutton-text { + display: none; +} + +/* What's New panel */ +#customizationui-widget-multiview #PanelUI-whatsNew { + max-width: var(--menu-panel-width); +} + +#protections-popup #messaging-system-message-container { + height: 260px; + overflow: hidden; + transition: margin-bottom .25s; +} + +#protections-popup #messaging-system-message-container[disabled] { + /* Offset the height when hidden. This makes the panel content + * cover the info message and reveal it as it slides down, rather + * than the info message growing in height. */ + margin-bottom: -260px; + pointer-events: none; +} + +#protections-popup #messaging-system-message-container[disabled] #protections-popup-message { + opacity: 0; +} + +#protections-popup-message { + display: flex; + align-items: flex-end; + height: calc(100% - 20px); + margin: 10px; + transition: opacity .25s; + opacity: 1; + background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg); + background-repeat: no-repeat; + background-position: top right; + -moz-context-properties: fill; +} + +#protections-popup-message:-moz-locale-dir(rtl) { + background-position-x: left; +} + +#protections-popup-message .protections-popup-content { + display: block; + margin: 12px 0; +} + +panelview[mainview] #PanelUI-whatsNew-content { + height: 43em; +} + +/* Hide the What's New header when the panel is a subview */ +panelview:not([mainview]) #PanelUI-whatsNew-title { + display: none; +} + +#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox { + padding-inline-start: 16px; + min-height: 41px; +} + +#PanelUI-whatsNew .whatsNew-message { + cursor: pointer; + margin: 0; + padding: 0; +} + +/* The following 2 rules show a 1 pixel line separator between What's New + * messages while at the same time ensuring that the first message (which has + * a date header) will not show the separator + */ +#PanelUI-whatsNew .whatsNew-message-body::before { + content: ""; + display: block; + height: 1px; + width: 104%; + margin-inline-start: -2%; + background: var(--panel-separator-color); +} + +#PanelUI-whatsNew .has-icon::before { + /* the width of the icon + the grid margin */ + width: calc(104% + 40px); +} + +#PanelUI-whatsNew .whatsNew-message-date + .whatsNew-message-body::before { + display: none; +} + +#PanelUI-whatsNew .whatsNew-message-date { + font-size: .85em; + margin: -12px; + margin-top: 0; + margin-inline-start: 0; + padding: 6px 16px; + background: var(--arrowpanel-dimmed); +} + +#PanelUI-whatsNew .whatsNew-message-body { + padding: 5px 0 10px; + margin: 10px 16px; + text-align: inherit; + text-decoration: none; + color: inherit; + background: none; + border: none; + cursor: pointer; +} + +#protections-popup-message .whatsNew-message-body { + /* -10px to compensate for the margin on the container. We can't get rid of that + because it helps position the background image. */ + margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding); + margin-inline: 6px; +} + +#PanelUI-whatsNew .whatsNew-message-body.has-icon { + display: grid; + grid-template-columns: auto 32px; + grid-template-rows: 0; + grid-gap: 0 8px; +} + +#PanelUI-whatsNew .whatsNew-message-icon { + height: 32px; + width: 32px; + margin: 14px auto; + display: grid; + grid-column-start: 2; +} + +#PanelUI-whatsNew .whatsNew-message-title, +#protections-popup-message .whatsNew-message-title { + display: grid; + font-size: 1.3em; + font-weight: 600; + line-height: 1.4em; + margin: 14px 0 0; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-title-large { + font-size: 2.1em; + margin: 2px 0; + font-weight: 300; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-subtitle { + margin: 2px 0; + font-size: .8em; + color: #949494; + font-weight: normal; + grid-column-start: 1; +} + +#PanelUI-whatsNew .whatsNew-message-content { + display: grid; + margin: 5px 0 10px; + grid-column-start: 1; +} + +#PanelUI-whatsNew .text-link { + background: none; + border: 0; + color: #45a1ff; + cursor: pointer; + font-size: .9em; + grid-column-start: 1; +} + +#protections-popup-message .text-link { + color: inherit; + font-weight: 600; +} + +#PanelUI-whatsNew .text-link:hover { + color: #0a84ff; + text-decoration: underline; +} + +#PanelUI-whatsNew .text-link:hover:active { + color: #0060df; +} + +/* In the next two rules the panel's width is set according to the + * profiler backdrop image when not opened from the overflow panel. */ +#customizationui-widget-panel #PanelUI-profiler { + min-width: 319px; + max-width: 319px; +} + +#customizationui-widget-panel[viewId="PanelUI-profiler"] { + --panel-width: 319px; + } + +:where(#PanelUI-profiler) :is(description, label) { + margin: 0; +} + +#PanelUI-profiler-header[isinfocollapsed="false"] { + background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd); + color: #fff; + /* Set custom hover/focus/active states on the info button, + to make them more visible on the header background */ + --panel-item-hover-bgcolor: #0005; + --panel-item-active-bgcolor: #0007; +} + +#PanelUI-profiler-header[isinfocollapsed="false"]:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd); +} + +#PanelUI-profiler-header[isinfocollapsed="false"] :is(button, toolbarbutton):focus-visible { + outline-color: currentColor; +} + +#PanelUI-profiler-header[isinfocollapsed="false"] toolbarseparator { + border-color: #0003; +} + +#PanelUI-profiler-header[isinfocollapsed="true"] #PanelUI-profiler-info { + opacity: 0; + pointer-events: none; +} + +#PanelUI-profiler-info { + min-height: 180px; + padding: 0 15px 15px; + background: top 10px right no-repeat + url("chrome://browser/skin/profiler-popup-backdrop.png"); + opacity: 1; +} + +/* The header has an attribute "animationready" that is either set to "true" or to + "false". When the DOM is being initialized it is set to "false" so that animations + do not run. */ +#PanelUI-profiler-header[animationready="true"] #PanelUI-profiler-info { + transition: margin-block-end 250ms, opacity 250ms; +} + +/* Override themes for the Pocket panel, because the Pocket + panel currently only supports dark and light themes. */ +@media not (prefers-color-scheme: dark){ + #customizationui-widget-panel[viewId="PanelUI-savetopocket"] { + --arrowpanel-background: #fbfbfb; + } +} + +#PanelUI-profiler-content { + position: relative; + padding: calc(15px - var(--panel-separator-margin-vertical)) 15px 15px; +} + +.PanelUI-profiler-description-title { + font-size: 1.3em; + font-weight: 600; + margin-block: 2px; +} + +.PanelUI-profiler-description { + margin-block: 4px; +} + +#PanelUI-profiler-learn-more { + margin-top: 4px; + color: #fff; + text-decoration: underline; +} + +#PanelUI-profiler-learn-more:hover:active { + color: #fffc; +} + +#PanelUI-profiler-presets { + margin: 8px 0; +} + +#PanelUI-profiler-content-edit-settings { + font-size: .9em; +} + +.PanelUI-profiler-content-label { + font-weight: 600; +} + +#PanelUI-profiler-content-description { + margin-block: 4px; + font-size: .9em; + color: var(--text-color-deemphasized); +} + +#PanelUI-profiler-content-recording:not([hidden]) { + display: flex; + place-items: center; + place-content: center; + gap: 13px; + padding-block: 28px; + font-size: 1.3em; +} + +.PanelUI-profiler-recording-icon { + width: 42px; + list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg); + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.3; +} + +.PanelUI-profiler-button { + appearance: none; + background-color: var(--button-bgcolor); + border-radius: 4px; + color: var(--button-color); + padding: 8px; + margin: 0 5px; +} + +.PanelUI-profiler-button:hover { + background-color: var(--button-hover-bgcolor); +} + +.PanelUI-profiler-button:hover:active { + background-color: var(--button-active-bgcolor); +} + +.PanelUI-profiler-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.PanelUI-profiler-button-primary { + background-color: var(--button-primary-bgcolor); + color: var(--button-primary-color); +} + +.PanelUI-profiler-button-primary:hover { + background-color: var(--button-primary-hover-bgcolor); +} + +.PanelUI-profiler-button-primary:hover:active { + background-color: var(--button-primary-active-bgcolor); +} + +.PanelUI-profiler-shortcut { + padding-block-start: 5px; + opacity: 0.5; + text-align: center; +} + +.PanelUI-profiler-buttons { + margin: 7px 10px 0; +} + +.PanelUI-profiler-info-icon { + margin-inline-end: 10px; + margin-block-start: 25px; + width: 50px; + list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg); + -moz-context-properties: fill; + fill: #fff; +} + +#PanelUI-profiler-presets[disabled="true"]::part(label-box) { + opacity: 0.5; +} + +/* Web-extension pop-ups */ + +.cui-widget-panelview[id^=PanelUI-webext-] { + border-radius: var(--arrowpanel-border-radius); +} + +.webextension-popup-browser, +.webextension-popup-stack { + border-radius: inherit; +} + +.webextension-popup-stack { + position: relative; +} diff --git a/browser/themes/shared/customizableui/whimsy.png b/browser/themes/shared/customizableui/whimsy.png Binary files differnew file mode 100644 index 0000000000..ba53aa98ef --- /dev/null +++ b/browser/themes/shared/customizableui/whimsy.png |
