diff options
Diffstat (limited to 'browser/themes')
19 files changed, 395 insertions, 349 deletions
diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css index fc2698aff1..ae32edae57 100644 --- a/browser/themes/osx/places/organizer.css +++ b/browser/themes/osx/places/organizer.css @@ -184,15 +184,21 @@ #placeContent { appearance: none; border: none; -} -#placeContent > treechildren::-moz-tree-cell, -#placeContent > treechildren::-moz-tree-column { - border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent); -} + > treechildren::-moz-tree-cell, + > treechildren::-moz-tree-column { + border-inline-start: 1px solid color-mix(in srgb, FieldText 30%, transparent); + } -#placeContent > treechildren::-moz-tree-cell(separator) { - border-color: transparent; + > treechildren::-moz-tree-column(first-column), + > treechildren::-moz-tree-cell(first-column) { + /* This matches the treecol separator in tree.css */ + border-inline-start: none; + } + + > treechildren::-moz-tree-cell(separator) { + border-color: transparent; + } } /** diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css index 62c82897b7..d7a4bafb81 100644 --- a/browser/themes/shared/autocomplete.css +++ b/browser/themes/shared/autocomplete.css @@ -178,7 +178,7 @@ opacity: 1; } - &[originaltype="autofill"] > .two-line-wrapper { + &[originaltype="autofill"][ac-image]:not([ac-image=""]) > .two-line-wrapper { display: grid; grid-template-columns: 32px 1fr; diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css index 276799c35f..9e513830a9 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css @@ -515,6 +515,14 @@ menupopup::part(drop-indicator) { /* End private browsing indicator */ +/* Content analysis indicator */ + +:root:not([contentanalysisactive]) #content-analysis-indicator { + display: none; +} + +/* End content analysis indicator */ + /* Override theme colors since the picker uses extra colors that themes cannot set */ #DateTimePickerPanel { @@ -648,7 +656,7 @@ menupopup::part(drop-indicator) { float: inline-end; background-color: transparent; flex-direction: row-reverse; - /* Override proton-doorhanger default styles that increase the size of the button */ + /* Override doorhanger default styles that increase the size of the button */ margin: 0; } diff --git a/browser/themes/shared/controlcenter/dashboard.svg b/browser/themes/shared/controlcenter/dashboard.svg index e2908d9485..ac3d13fd0c 100644 --- a/browser/themes/shared/controlcenter/dashboard.svg +++ b/browser/themes/shared/controlcenter/dashboard.svg @@ -1,4 +1,4 @@ <!-- 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 data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M15 12H4a2 2 0 0 1-2-2V3a1 1 0 0 0-2 0v7a4 4 0 0 0 4 4h11a1 1 0 0 0 0-2z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M4 11a1 1 0 0 0 1-1V8a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1zM7 11a1 1 0 0 0 1-1V4a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1zM10 11a1 1 0 0 0 1-1V6a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zM13 11a1 1 0 0 0 1-1V7a1 1 0 0 0-2 0v3a1 1 0 0 0 1 1z"/></svg> +<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity" d="M15 12H4a2 2 0 0 1-2-2V3a1 1 0 0 0-2 0v7a4 4 0 0 0 4 4h11a1 1 0 0 0 0-2z"/><path fill="context-fill light-dark(black, white)" fill-opacity="context-fill-opacity" d="M4 11a1 1 0 0 0 1-1V8a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1zM7 11a1 1 0 0 0 1-1V4a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1zM10 11a1 1 0 0 0 1-1V6a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zM13 11a1 1 0 0 0 1-1V7a1 1 0 0 0-2 0v3a1 1 0 0 0 1 1z"/></svg> diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css index b8ba6b72e4..6708bc604c 100644 --- a/browser/themes/shared/controlcenter/panel.css +++ b/browser/themes/shared/controlcenter/panel.css @@ -642,6 +642,12 @@ #permission-popup-menulist { padding-inline: 12px 6px; + margin: 0; + + &, + > menupopup { + min-width: 6.5em; + } } .protections-popup-section-header, diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css index a1bb6a62f9..d0bc283256 100644 --- a/browser/themes/shared/customizableui/customizeMode.css +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -95,10 +95,6 @@ toolbarpaletteitem:not([notransition])[place="panel"] { opacity: 1; } -#customization-palette #firefox-view-button[attention] { - background-position: center bottom 8%; -} - toolbarpaletteitem toolbarbutton[disabled] { color: inherit !important; } diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css index 07994d3233..2236613cf1 100644 --- a/browser/themes/shared/customizableui/panelUI-shared.css +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -172,7 +172,6 @@ menupopup { panelview { flex-direction: column; - background: var(--arrowpanel-background); padding: 0; /* Prevent a scrollbar from appearing while the animation for transitioning from @@ -696,6 +695,10 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg margin: 0; } +#PanelUI-fxa-cta-menu .fxa-cta-button { + margin: var(--space-xsmall); +} + .PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { font-size: 11px; } @@ -1150,6 +1153,11 @@ panelview .toolbarbutton-1, stroke: var(--panel-item-hover-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-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text, #appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon { background-color: var(--panel-item-active-bgcolor); @@ -1300,7 +1308,7 @@ panelview .toolbarbutton-1 { } } -.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"], +.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"], #PanelUI-historyItems > toolbarbutton { list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); -moz-context-properties: fill; @@ -1310,7 +1318,7 @@ panelview .toolbarbutton-1 { #fxa-menu-account-fxa-avatar, #appMenu-fxa-label > .toolbarbutton-icon, #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon, -.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, +.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { @@ -1322,6 +1330,15 @@ panelview .toolbarbutton-1 { min-width: 0; } +.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"] { + flex: 1; + min-width: 0; +} + +.remotetabs-close { + width: 18px; + margin-inline-end: 4px; +} #PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon { border-radius: 50%; } @@ -1649,11 +1666,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } } -/* What's New panel */ -#customizationui-widget-multiview #PanelUI-whatsNew { - max-width: var(--menu-panel-width); -} - +/* Protections panel info message */ #protections-popup { #info-message-container { height: 260px; @@ -1695,7 +1708,16 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { margin: 12px 0; } - .whatsNew-message-body { + .protections-popup-message-title { + display: grid; + font-size: 1.3em; + font-weight: 600; + line-height: 1.4em; + margin: 14px 0 0; + grid-column-start: 1; + } + + .protections-popup-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); @@ -1708,129 +1730,6 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } } -panelview { - &[mainview] #PanelUI-whatsNew-content { - height: 43em; - } - - /* Hide the What's New header when the panel is a subview */ - &:not([mainview]) #PanelUI-whatsNew-title { - display: none; - } -} - -#PanelUI-whatsNew { - .panelMenu-toggleWhatsNew-checkbox { - padding-inline-start: 16px; - min-height: 41px; - } - - .whatsNew-message { - cursor: pointer; - margin: 0; - padding: 0; - } - - /* The following 2 rules show a 1 pixel line separator between What's New - * messages while at the same time ensuring that the first message (which has - * a date header) will not show the separator - */ - .whatsNew-message-body::before { - content: ""; - display: block; - height: 1px; - width: 104%; - margin-inline-start: -2%; - background: var(--panel-separator-color); - } - - .has-icon::before { - /* the width of the icon + the grid margin */ - width: calc(104% + 40px); - } - - .whatsNew-message-date + .whatsNew-message-body::before { - display: none; - } - - .whatsNew-message-date { - font-size: .85em; - margin: -12px; - margin-top: 0; - margin-inline-start: 0; - padding: 6px 16px; - background: var(--arrowpanel-dimmed); - } - - .whatsNew-message-body { - padding: 5px 0 10px; - margin: 10px 16px; - text-align: inherit; - text-decoration: none; - color: inherit; - background: none; - border: none; - cursor: pointer; - } - - .whatsNew-message-body.has-icon { - display: grid; - grid-template-columns: auto 32px; - grid-template-rows: 0; - grid-gap: 0 8px; - } - - .whatsNew-message-icon { - height: 32px; - width: 32px; - margin: 14px auto; - display: grid; - grid-column-start: 2; - } - - .whatsNew-message-subtitle { - margin: 2px 0; - font-size: .8em; - color: #949494; - font-weight: normal; - grid-column-start: 1; - } - - .whatsNew-message-content { - display: grid; - margin: 5px 0 10px; - grid-column-start: 1; - } - - .text-link { - background: none; - border: 0; - color: #45a1ff; - cursor: pointer; - font-size: .9em; - grid-column-start: 1; - - &:hover { - color: #0a84ff; - text-decoration: underline; - - &:active { - color: #0060df; - } - } - } -} - -#PanelUI-whatsNew .whatsNew-message-title, -#protections-popup-message .whatsNew-message-title { - display: grid; - font-size: 1.3em; - font-weight: 600; - line-height: 1.4em; - margin: 14px 0 0; - grid-column-start: 1; -} - #customizationui-widget-panel { /* In the next two rules the panel's width is set according to the * profiler backdrop image when not opened from the overflow panel. */ @@ -2180,3 +2079,9 @@ panelview { padding: var(--space-xxlarge) 0 var(--space-medium); gap: var(--space-small); } + +/* ----- Content Analysis indicator panel ----- */ + +#content-analysis-panel-container { + padding: 8px; +} diff --git a/browser/themes/shared/icons/back.svg b/browser/themes/shared/icons/back.svg index b52c06b776..c49e6c1ed2 100644 --- a/browser/themes/shared/icons/back.svg +++ b/browser/themes/shared/icons/back.svg @@ -2,5 +2,5 @@ - 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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> - <path d="M14.375 8 3.048 8l4.308-4.308a.626.626 0 0 0-.885-.885L1 8.281l0 .689 5.472 5.473a.623.623 0 0 0 .884 0 .628.628 0 0 0 0-.885L3.048 9.25l11.327 0a.625.625 0 0 0 0-1.25z"/> + <path d="M6.69 2.25 1.22 7.72a.75.75 0 0 0 0 1.06l5.47 5.47 1.06-1.061L3.56 9H15V7.5H3.56l4.19-4.19-1.06-1.06z"/> </svg> diff --git a/browser/themes/shared/icons/forward.svg b/browser/themes/shared/icons/forward.svg index 2eac6f3ed7..8fef9db8f2 100644 --- a/browser/themes/shared/icons/forward.svg +++ b/browser/themes/shared/icons/forward.svg @@ -2,5 +2,5 @@ - 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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> - <path d="m1.625 8 11.327 0-4.308-4.308a.626.626 0 0 1 .885-.885L15 8.281l0 .689-5.472 5.473a.623.623 0 0 1-.884 0 .628.628 0 0 1 0-.885l4.308-4.308-11.327 0a.625.625 0 0 1 0-1.25z"/> + <path d="M12.44 9H1V7.5h11.44L8.25 3.31l1.06-1.06 5.47 5.47a.75.75 0 0 1 0 1.06l-5.47 5.47-1.06-1.061L12.44 9z"/> </svg> diff --git a/browser/themes/shared/icons/insights.svg b/browser/themes/shared/icons/insights.svg deleted file mode 100644 index 1fadce366c..0000000000 --- a/browser/themes/shared/icons/insights.svg +++ /dev/null @@ -1,6 +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 https://mozilla.org/MPL/2.0/. --> -<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"> -<path d="M2.62599 1.8015L2.44399 2.6505C2.42875 2.72246 2.39295 2.78844 2.34094 2.84045C2.28893 2.89246 2.22294 2.92826 2.15099 2.9435L1.30199 3.1255C0.899988 3.2125 0.899988 3.7865 1.30199 3.8725L2.15099 4.0555C2.22294 4.07074 2.28893 4.10654 2.34094 4.15855C2.39295 4.21056 2.42875 4.27654 2.44399 4.3485L2.62599 5.1975C2.71299 5.5995 3.28699 5.5995 3.37299 5.1975L3.55599 4.3485C3.57123 4.27654 3.60703 4.21056 3.65904 4.15855C3.71105 4.10654 3.77703 4.07074 3.84899 4.0555L4.69699 3.8725C5.09899 3.7855 5.09899 3.2115 4.69699 3.1255L3.84799 2.9435C3.77609 2.92814 3.71016 2.8923 3.65817 2.84031C3.60618 2.78832 3.57035 2.7224 3.55499 2.6505L3.37299 1.8015C3.28599 1.3995 2.71199 1.3995 2.62599 1.8015ZM9.99998 14.4995C9.62057 14.5056 9.25107 14.3782 8.95593 14.1397C8.66078 13.9013 8.45872 13.5667 8.38498 13.1945L8.02798 11.5275C7.97201 11.2687 7.84263 11.0316 7.65534 10.8445C7.46805 10.6574 7.23079 10.5282 6.97198 10.4725L5.30498 10.1155C4.52398 9.9465 3.99998 9.2975 3.99998 8.4995C3.99998 7.7015 4.52398 7.0525 5.30498 6.8845L6.97198 6.5275C7.23077 6.47135 7.46793 6.34193 7.65517 6.15468C7.84242 5.96744 7.97184 5.73028 8.02798 5.4715L8.38598 3.8045C8.55298 3.0235 9.20198 2.4995 9.99998 2.4995C10.798 2.4995 11.447 3.0235 11.615 3.8045L11.972 5.4715C12.086 5.9995 12.5 6.4135 13.028 6.5265L14.695 6.8835C15.476 7.0525 16 7.7015 16 8.4995C16 9.2975 15.476 9.9465 14.695 10.1145L13.028 10.4715C12.769 10.5275 12.5316 10.657 12.3443 10.8445C12.157 11.0319 12.0277 11.2694 11.972 11.5285L11.614 13.1945C11.5406 13.5667 11.3388 13.9014 11.0438 14.1399C10.7488 14.3784 10.3793 14.5057 9.99998 14.4995ZM9.99998 3.7495C9.90199 3.7495 9.66898 3.7795 9.60798 4.0655L9.24998 5.7335C9.14331 6.22777 8.89642 6.68082 8.53886 7.03837C8.18131 7.39593 7.72826 7.64283 7.23398 7.7495L5.56698 8.1065C5.28098 8.1685 5.24998 8.4015 5.24998 8.4995C5.24998 8.5975 5.28098 8.8305 5.56698 8.8925L7.23398 9.2495C7.72826 9.35617 8.18131 9.60307 8.53886 9.96062C8.89642 10.3182 9.14331 10.7712 9.24998 11.2655L9.60798 12.9335C9.66898 13.2195 9.90199 13.2495 9.99998 13.2495C10.098 13.2495 10.331 13.2195 10.392 12.9335L10.75 11.2665C10.8565 10.772 11.1033 10.3188 11.4609 9.96103C11.8184 9.60329 12.2716 9.35624 12.766 9.2495L14.433 8.8925C14.719 8.8305 14.75 8.5975 14.75 8.4995C14.75 8.4015 14.719 8.1685 14.433 8.1065L12.766 7.7495C12.2717 7.64283 11.8187 7.39593 11.4611 7.03837C11.1036 6.68082 10.8567 6.22777 10.75 5.7335L10.392 4.0655C10.331 3.7795 10.098 3.7495 9.99998 3.7495ZM2.44399 12.6505L2.62599 11.8015C2.71199 11.3995 3.28599 11.3995 3.37299 11.8015L3.55499 12.6505C3.57035 12.7224 3.60618 12.7883 3.65817 12.8403C3.71016 12.8923 3.77609 12.9281 3.84799 12.9435L4.69699 13.1255C5.09899 13.2115 5.09899 13.7855 4.69699 13.8725L3.84799 14.0545C3.77609 14.0699 3.71016 14.1057 3.65817 14.1577C3.60618 14.2097 3.57035 14.2756 3.55499 14.3475L3.37299 15.1965C3.28699 15.5985 2.71299 15.5985 2.62599 15.1965L2.44399 14.3475C2.42863 14.2756 2.39279 14.2097 2.3408 14.1577C2.28881 14.1057 2.22289 14.0699 2.15099 14.0545L1.30199 13.8725C0.899988 13.7865 0.899988 13.2125 1.30199 13.1255L2.15099 12.9435C2.22294 12.9283 2.28893 12.8925 2.34094 12.8405C2.39295 12.7884 2.42875 12.7225 2.44399 12.6505Z"/> -</svg> diff --git a/browser/themes/shared/icons/ion.svg b/browser/themes/shared/icons/ion.svg index 870914287b..d324bae72e 100644 --- a/browser/themes/shared/icons/ion.svg +++ b/browser/themes/shared/icons/ion.svg @@ -1,4 +1,4 @@ <!-- 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="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M13.9 9.81a1.23 1.23 0 0 0 0-.17v-.08a5.67 5.67 0 0 0-2.4-3.36 1.17 1.17 0 0 1-.56-.95V3a1 1 0 0 0-1-1H6.06a1 1 0 0 0-1 1v2.25a1.17 1.17 0 0 1-.56 1 5.66 5.66 0 0 0-2.35 3.33v.12a.53.53 0 0 0 0 .11 5.35 5.35 0 0 0-.11 1 5.65 5.65 0 0 0 3.24 5.09 1 1 0 0 0 .44.1h4.57a1 1 0 0 0 .44-.1A5.65 5.65 0 0 0 14 10.83a5.3 5.3 0 0 0-.1-1.02zm-8.27-2a3.18 3.18 0 0 0 1.43-2.6V4h1.88v1.25a3.18 3.18 0 0 0 1.43 2.6 3.68 3.68 0 0 1 1.54 2.24v.22a2.82 2.82 0 0 1-3.68-.59A3.48 3.48 0 0 0 4.56 9a3.76 3.76 0 0 1 1.07-1.15z"></path></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill light-dark(black, white)" d="M13.9 9.81a1.23 1.23 0 0 0 0-.17v-.08a5.67 5.67 0 0 0-2.4-3.36 1.17 1.17 0 0 1-.56-.95V3a1 1 0 0 0-1-1H6.06a1 1 0 0 0-1 1v2.25a1.17 1.17 0 0 1-.56 1 5.66 5.66 0 0 0-2.35 3.33v.12a.53.53 0 0 0 0 .11 5.35 5.35 0 0 0-.11 1 5.65 5.65 0 0 0 3.24 5.09 1 1 0 0 0 .44.1h4.57a1 1 0 0 0 .44-.1A5.65 5.65 0 0 0 14 10.83a5.3 5.3 0 0 0-.1-1.02zm-8.27-2a3.18 3.18 0 0 0 1.43-2.6V4h1.88v1.25a3.18 3.18 0 0 0 1.43 2.6 3.68 3.68 0 0 1 1.54 2.24v.22a2.82 2.82 0 0 1-3.68-.59A3.48 3.48 0 0 0 4.56 9a3.76 3.76 0 0 1 1.07-1.15z"></path></svg>
\ No newline at end of file diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index e55e677fb3..92d59e6f5e 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/browser/themes/shared/jar.inc.mn @@ -178,7 +178,6 @@ skin/classic/browser/history.svg (../shared/icons/history.svg) skin/classic/browser/home.svg (../shared/icons/home.svg) skin/classic/browser/import.svg (../shared/icons/import.svg) - skin/classic/browser/insights.svg (../shared/icons/insights.svg) #ifndef MOZ_WIDGET_GTK skin/classic/browser/import-export.svg (../shared/icons/import-export.svg) #endif diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css index 92466732f6..5c2d783e94 100644 --- a/browser/themes/shared/notification-icons.css +++ b/browser/themes/shared/notification-icons.css @@ -11,13 +11,15 @@ fill-opacity: var(--urlbar-icon-fill-opacity); color: inherit; border-radius: var(--urlbar-icon-border-radius); -} -#notification-popup-box:hover { - background-color: hsla(0,0%,70%,.2); -} -#notification-popup-box:hover:active, -#notification-popup-box[open] { - background-color: hsla(0,0%,70%,.3); + + &:hover { + background-color: hsla(0,0%,70%,.2); + } + + &:hover:active, + &[open] { + background-color: hsla(0,0%,70%,.3); + } } .popup-notification-icon, @@ -26,24 +28,24 @@ fill: currentColor; } -.notification-anchor-icon:focus-visible { - outline: var(--focus-outline); - outline-offset: var(--focus-outline-inset); - border-radius: var(--urlbar-icon-border-radius); -} - -.blocked-permission-icon:focus-visible { - outline: var(--focus-outline); - outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset)); - border-radius: 1px; -} - /* This class can be used alone or in combination with the class defining the type of icon displayed. This rule must be defined before the others in order for its list-style-image to be overridden. */ .notification-anchor-icon { list-style-image: url(chrome://global/skin/icons/info-filled.svg); padding: var(--urlbar-icon-padding); + + &:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); + border-radius: var(--urlbar-icon-border-radius); + } +} + +.blocked-permission-icon:focus-visible { + outline: var(--focus-outline); + outline-offset: calc(var(--urlbar-icon-padding) + var(--focus-outline-inset)); + border-radius: 1px; } /* INDIVIDUAL NOTIFICATIONS */ @@ -58,68 +60,50 @@ .persistent-storage-icon { list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage.svg); -} -.persistent-storage-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/persistent-storage-blocked.svg); + } } .desktop-notification-icon { list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg); -} -.desktop-notification-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification-blocked.svg); + } } .geo-icon { list-style-image: url(chrome://browser/skin/notification-icons/geo.svg); -} -.geo-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/geo-blocked.svg); + } } .open-protocol-handler-icon { list-style-image: url(chrome://global/skin/icons/open-in-new.svg); -} -.open-protocol-handler-icon:-moz-locale-dir(rtl) { - transform: scaleX(-1); + &:-moz-locale-dir(rtl) { + transform: scaleX(-1); + } } .xr-icon { list-style-image: url(chrome://browser/skin/notification-icons/xr.svg); -} -.xr-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/xr-blocked.svg); + } } .autoplay-media-icon { list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg); -} -.autoplay-media-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg); -} - -.storage-access-notification-content { - color: var(--panel-disabled-color); - font-style: italic; - margin-top: 15px; -} - -.storage-access-notification-content .text-link { - color: LinkText; -} - -.storage-access-notification-content .text-link:hover { - text-decoration: underline; -} - -#storage-access-notification .popup-notification-body-container { - padding: 20px; + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media-blocked.svg); + } } .indexedDB-icon { @@ -128,59 +112,59 @@ #password-notification-icon { list-style-image: url(chrome://browser/skin/login.svg); -} -#password-notification-icon[extraAttr="attention"] { - fill: var(--toolbarbutton-icon-fill-attention); - fill-opacity: 1; + &[extraAttr="attention"] { + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; + } } .camera-icon { list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); -} -.camera-icon.in-use { - list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); -} + &.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/camera.svg); + } -.camera-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/camera-blocked.svg); + } } .microphone-icon { list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); -} -.microphone-icon.in-use { - list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); -} + &.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); + } -.microphone-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); -} + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone-blocked.svg); + } -.popup-notification-icon.microphone-icon { - list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); + &.popup-notification-icon { + list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg); + } } + .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); -} -.screen-icon.in-use { - list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); -} + &.in-use { + list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); + } -.screen-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/notification-icons/screen-blocked.svg); + } } .speaker-icon { list-style-image: url(chrome://browser/skin/notification-icons/speaker.svg); } -.midi-icon, -.midi-sysex-icon { +.midi-icon { list-style-image: url(chrome://browser/skin/notification-icons/midi.svg); } @@ -202,16 +186,8 @@ list-style-image: url(chrome://browser/skin/login.svg); } -#permission-popup-menulist { - margin-inline-end: 0; -} - -#webRTC-preview:not([hidden]) { - flex-direction: column; -} - #webRTC-previewVideo { - border-radius: 4px; + border-radius: var(--border-radius-small); border: 1px solid var(--panel-separator-color); min-width: 0; min-height: 10em; @@ -221,17 +197,14 @@ #webRTC-all-windows-shared, #webRTC-previewWarning { font-size: 0.8em; -} -@media not (prefers-contrast) { - #webRTC-all-windows-shared, - #webRTC-previewWarning { + @media not (prefers-contrast) { opacity: 0.6; } } #webRTC-previewWarning { - margin-block-start: 14px; + margin-block-start: var(--space-large); } /** @@ -244,14 +217,6 @@ font-size: 0.75em; } -#webRTC-previewWarningBox:-moz-locale-dir(rtl) { - background-position: calc(100% - .75em) .75em; -} - -#webRTC-previewWarning > .text-link { - margin-inline-start: 0; -} - /* This icon has a block sign in it, so we don't need a blocked version. */ .popup-icon { list-style-image: url("chrome://browser/skin/notification-icons/popup.svg"); @@ -267,11 +232,6 @@ transform: translateY(1px); } -#permission-popup-menulist, -#permission-popup-menulist > menupopup { - min-width: 6.5em; -} - /* EME */ .drm-icon { @@ -294,13 +254,14 @@ .install-icon { list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); -} -.install-icon.blocked-permission-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); + &.blocked-permission-icon { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); + } } /* UPDATE */ + .popup-notification-icon[popupid="update-available"], .popup-notification-icon[popupid="update-manual"], .popup-notification-icon[popupid="update-other-instance"], diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css index 3d806d1394..9db5fc45d9 100644 --- a/browser/themes/shared/preferences/preferences.css +++ b/browser/themes/shared/preferences/preferences.css @@ -474,18 +474,23 @@ richlistitem[selected] .actionsMenu:focus-visible { width: 16px; } -#homeContentsGroup [data-subcategory] { +#homeContentsGroup > [data-subcategory] { margin-top: 14px; } -#homeContentsGroup [data-subcategory] .section-checkbox { +#homeContentsGroup > [data-subcategory] .section-checkbox { font-weight: var(--font-weight-bold); } -#homeContentsGroup [data-subcategory] > vbox menulist { +#homeContentsGroup > [data-subcategory] > vbox menulist { margin-block: 0; } +/* Align fix for prefs that have a text link in the headline */ +#homeContentsGroup > [data-subcategory] > hbox { + align-items: last baseline; +} + #homeContentsGroup .checkbox-label { margin-inline-end: var(--space-small); } @@ -583,6 +588,12 @@ a[is="moz-support-link"]:not(.sidebar-footer-link) { pointer-events: none; } +html|label[disabled] { + /* This matches XUL checkbox.css - but for HTML labels for HTML inputs we + * need to do this ourselves. */ + opacity: 0.4; +} + #showUpdateHistory { margin-inline-start: 0; } diff --git a/browser/themes/shared/sanitizeDialog_v2.css b/browser/themes/shared/sanitizeDialog_v2.css index 40c8aed88b..9f5df748f4 100644 --- a/browser/themes/shared/sanitizeDialog_v2.css +++ b/browser/themes/shared/sanitizeDialog_v2.css @@ -9,6 +9,14 @@ white-space: pre-wrap; } +/* Add padding to the left to create space between + the duration choicemenu (#sanitizeDurationChoice) + and the label +*/ +#sanitizeDurationSuffixLabel { + margin-inline-start: var(--space-small); +} + /* Hide the duration dropdown suffix label if it's empty. Otherwise it takes up a little space, causing the end of the dropdown to not be aligned with the warning box. */ diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css index 204df115be..9a27b891c6 100644 --- a/browser/themes/shared/tabs.css +++ b/browser/themes/shared/tabs.css @@ -54,6 +54,17 @@ color-scheme: unset; background: var(--tabpanel-background-color); + &[pendingpaint] { + background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png); + background-repeat: no-repeat; + background-position: center center; + background-size: 30px; + } + + browser:is([blank], [pendingpaint]) { + opacity: 0; + } + browser[type=content] { color-scheme: env(-moz-content-preferred-color-scheme); } @@ -76,7 +87,17 @@ } } +.closing-tabs-spacer { + pointer-events: none; + + #tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > & { + transition: width .15s ease-out; + } +} + .tabbrowser-tab { + --tab-label-mask-size: 2em; + appearance: none; background-color: transparent; color: inherit; @@ -194,72 +215,80 @@ } } -@media (prefers-reduced-motion: reduce) { - .tab-throbber[busy] { +.tab-throbber { + &:not([busy]) { + display: none; + } + + @media (prefers-reduced-motion: reduce) { background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); background-position: center; background-repeat: no-repeat; -moz-context-properties: fill; fill: currentColor; opacity: 0.4; - } - .tab-throbber[progress] { - opacity: 0.8; + &[progress] { + opacity: 0.8; + } } -} -@media (prefers-reduced-motion: no-preference) { - :root[sessionrestored] .tab-throbber { - &[busy] { - position: relative; - overflow: hidden; - - &::before { - content: ""; - position: absolute; - background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); - background-position: left center; - background-repeat: no-repeat; - width: 480px; - height: 100%; - animation: tab-throbber-animation 1.05s steps(30) infinite; - -moz-context-properties: fill; - - /* XXX: It would be nice to transition between the "connecting" color and the - "loading" color (see the `.tab-throbber[progress]::before` rule below); - however, that currently forces main thread painting. When this is fixed - (after WebRender lands), we can do something like - `transition: fill 0.333s, opacity 0.333s;` */ - - fill: currentColor; - opacity: 0.7; + @media (prefers-reduced-motion: no-preference) { + :root[sessionrestored] & { + &[busy] { + position: relative; + overflow: hidden; + + &::before { + content: ""; + position: absolute; + background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); + background-position: left center; + background-repeat: no-repeat; + width: 480px; + height: 100%; + animation: tab-throbber-animation 1.05s steps(30) infinite; + -moz-context-properties: fill; + + /* XXX: It would be nice to transition between the "connecting" color and the + "loading" color (see the `[progress]::before` rule below); + however, that currently forces main thread painting. When this is fixed + (after WebRender lands), we can do something like + `transition: fill 0.333s, opacity 0.333s;` */ + + fill: currentColor; + opacity: 0.7; + } + + &:-moz-locale-dir(rtl)::before { + animation-name: tab-throbber-animation-rtl; + } } - &:-moz-locale-dir(rtl)::before { - animation-name: tab-throbber-animation-rtl; + &[progress]::before { + fill: var(--tab-loading-fill); + opacity: 1; } - } - &[progress]::before { - fill: var(--tab-loading-fill); - opacity: 1; - } - - #TabsToolbar[brighttext] &[progress]:not([selected])::before { - fill: var(--lwt-tab-loading-fill-inactive, #84c1ff); + #TabsToolbar[brighttext] &[progress]:not([selected])::before { + fill: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } } } +} - @keyframes tab-throbber-animation { - 0% { transform: translateX(0); } - 100% { transform: translateX(-100%); } - } +@keyframes tab-throbber-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } +} - @keyframes tab-throbber-animation-rtl { - 0% { transform: translateX(0); } - 100% { transform: translateX(100%); } - } +@keyframes tab-throbber-animation-rtl { + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } +} + +.tab-icon-pending:is(:not([pendingicon]), [busy], [pinned]) { + display: none; } :root { @@ -279,6 +308,11 @@ -moz-context-properties: fill; fill: currentColor; + /* Apply crisp rendering for favicons at exactly 2dppx resolution */ + @media (resolution: 2dppx) { + image-rendering: -moz-crisp-edges; + } + &:not([src]), &:-moz-broken { content: url("chrome://global/skin/icons/defaultFavicon.svg"); @@ -288,6 +322,22 @@ animation: var(--tab-sharing-icon-animation); animation-delay: -1.5s; } + + &[selected]:not([src], [pinned], [crashed], [pictureinpicture]), + &:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), + &[busy] { + display: none; + } +} + +.tab-sharing-icon-overlay, +.tab-icon-overlay { + display: none; +} + +.tab-sharing-icon-overlay[sharing]:not([selected]), +.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [crashed]) { + display: revert; } .tab-sharing-icon-overlay { @@ -375,8 +425,36 @@ } } +.tab-label-container { + overflow: hidden; + + #tabbrowser-tabs:not([secondarytext-unsupported]) & { + height: 2.7em; + } + + &[pinned] { + width: 0; + } + + &[textoverflow] { + &[labeldirection=ltr]:not([pinned]), + &:not([labeldirection], [pinned]):-moz-locale-dir(ltr) { + direction: ltr; + mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size)); + } + + &[labeldirection=rtl]:not([pinned]), + &:not([labeldirection], [pinned]):-moz-locale-dir(rtl) { + direction: rtl; + mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size)); + } + } +} + .tab-label { margin-inline: 0; + line-height: 1.7; /* override 'normal' in case of fallback math fonts with huge metrics */ + white-space: nowrap; } .tab-close-button { @@ -387,6 +465,11 @@ padding: 6px; border-radius: var(--tab-border-radius); list-style-image: url(chrome://global/skin/icons/close-12.svg); + + &[pinned], + #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > &:not([selected]) { + display: none; + } } /* The following rulesets allow showing more of the tab title */ @@ -401,15 +484,24 @@ } -#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { - height: 2.7em; -} - .tab-secondary-label { font-size: .75em; + margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */ opacity: .8; - #tabbrowser-tabs[secondarytext-unsupported] & { + #tabbrowser-tabs[secondarytext-unsupported] &, + :root[uidensity=compact] &, + &:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), + &:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, + &[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, + &[activemedia-blocked] > .tab-icon-sound-playing-label, + &[muted] > .tab-icon-sound-playing-label, + &[pictureinpicture] > .tab-icon-sound-playing-label, + &[pictureinpicture] > .tab-icon-sound-muted-label, + &:not([pictureinpicture]) > .tab-icon-sound-pip-label, + &:not([muted]) > .tab-icon-sound-muted-label, + &:not([showtooltip]) > .tab-icon-sound-tooltip-label, + &[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) { display: none; } @@ -490,8 +582,7 @@ /* Pinned tabs */ .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), -#firefox-view-button[attention] { +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px); background-position: center bottom 6.5px; background-size: 4px 4px; diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css index 5700814351..21a6d216ed 100644 --- a/browser/themes/shared/toolbarbutton-icons.css +++ b/browser/themes/shared/toolbarbutton-icons.css @@ -114,13 +114,9 @@ position: relative; } -#nav-bar-customization-target :where(#reload-button, #stop-button) > .toolbarbutton-icon { - padding: calc(var(--toolbarbutton-inner-padding) + 1px) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 1px ) !important; /* The animation is 18px but the other icons are 16px, lower it by 1px so it is vertically centered */ -} - #reload-button > .toolbarbutton-animatable-box, #stop-button > .toolbarbutton-animatable-box { - top: calc(50% - 9px); /* Vertically center the 20px tall animatable image, which is 1px higher than other icons */ + top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */ width: 20px; /* Width of each frame within the SVG sprite */ height: 20px; /* Height of each frame within the SVG sprite */ } @@ -466,3 +462,9 @@ toolbarbutton.bookmark-item { #firefox-view-button { list-style-image: url("chrome://browser/skin/firefox-view.svg"); } + +#content-analysis-indicator { + -moz-context-properties: fill, stroke; + stroke: var(--toolbarbutton-icon-fill); + list-style-image: url("chrome://global/skin/icons/content-analysis.svg"); +} diff --git a/browser/themes/shared/translations/panel.css b/browser/themes/shared/translations/panel.css index 988dbadb4b..716ec02def 100644 --- a/browser/themes/shared/translations/panel.css +++ b/browser/themes/shared/translations/panel.css @@ -63,11 +63,19 @@ h1.translations-panel-header-wrapper { /* The default styling is to dim the default, but here override it so that it still uses the primary color. */ -.translations-panel-footer > button[default][disabled="true"] { +.translations-panel-button-group > button[default][disabled="true"] { color: var(--button-primary-color); background-color: var(--button-primary-bgcolor); } +#select-translations-panel-footer { + display: flex; + flex: 1; + flex-wrap: wrap; + justify-content: space-between; + gap: var(--space-small); +} + #full-page-translations-panel-translate-hint-action { appearance: none; background-color: var(--button-bgcolor); @@ -117,37 +125,44 @@ h1.translations-panel-header-wrapper { padding: 12px; } -.select-translations-panel-button { - align-items: center; - justify-content: center; - margin-inline: 0; -} - .select-translations-panel-content { padding: var(--arrowpanel-padding); padding-block: 4px; } .select-translations-panel-copy-button { + list-style-image: url(chrome://global/skin/icons/edit-copy.svg); background-color: transparent; - font: message-box; - font-weight: var(--font-weight-bold); + -moz-context-properties: fill; + fill: currentColor; + margin: 0; - &::before { - content: url(chrome://global/skin/icons/edit-copy.svg); - fill: currentColor; - margin-inline-end: 5px; - -moz-context-properties: fill; + > .button-box { + gap: var(--space-xsmall); + } + + &.copied { + list-style-image: url(chrome://global/skin/icons/check.svg); } } +#select-translations-panel-copy-button { + justify-content: flex-start; +} + +#select-translations-panel-footer-button-group { + flex: 1; + justify-content: flex-end; +} + .select-translations-panel-header { padding: var(--arrowpanel-padding); text-align: initial; } -.select-translations-panel-label { - margin-block: var(--arrowpanel-padding) 6px; +.select-translations-panel-label, +.select-translations-panel-message-bar { + margin-block: 0 6px; } #select-translations-panel-lang-selection { @@ -156,7 +171,7 @@ h1.translations-panel-header-wrapper { .select-translations-panel-text-area { height: 8em; - resize: none; + resize: vertical; &:disabled { color: var(--panel-disabled-color); diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css index c06342fd98..4362c19d5d 100644 --- a/browser/themes/shared/urlbarView.css +++ b/browser/themes/shared/urlbarView.css @@ -52,6 +52,10 @@ --urlbarView-labeled-row-label-top: calc(-1.27em - 2px); --urlbarView-labeled-tip-margin-top-extra: 8px; + --urlbarView-action-button-background-color: light-dark(white, #1C1B22); + --urlbarView-action-button-hover-color: light-dark(#5B5B66, var(--buttons-destructive-color)); + --urlbarView-action-button-selected-color: light-dark(#1C1B22, var(--urlbarView-action-button-background-color)); + &:-moz-locale-dir(rtl) { --urlbarView-action-slide-in-distance: -200px; } @@ -1027,3 +1031,43 @@ background: var(--urlbarView-highlight-background); color: var(--urlbarView-highlight-color); } + +.urlbarView-row:has(.urlbarView-actions-container:not(:empty)) { + flex-direction: column; + align-items: flex-start; +} + +.urlbarView-actions-container { + margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)); + margin-block-end: var(--urlbarView-item-block-padding); +} + +.urlbarView-action-btn { + font-size: smaller; + color: var(--toolbar-field-focus-color); + border-radius: var(--toolbarbutton-border-radius); + border: 1px solid transparent; + padding: .4em .6em; + display: inline-flex; + align-items: center; + background-color: var(--urlbarView-action-button-background-color); + box-shadow: 0 0px 4px rgba(0, 0, 0, 0.23); +} + +.urlbarView-action-btn img { + width: 16px; + height: 16px; + margin-inline-end: .4em; + -moz-context-properties: fill, fill-opacity; +} + +.urlbarView-action-btn:hover { + color: var(--urlbarView-result-button-hover-color); + background-color: var(--urlbarView-action-button-hover-color); +} + +.urlbarView-action-btn[selected] { + color: light-dark(var(--urlbarView-result-button-hover-color), var(--toolbar-field-focus-color)); + background-color: var(--urlbarView-action-button-selected-color); + border-color: light-dark(transparent, white); +} |
