Dão Gottwald
759f86dd9e
`[hidden]` is implemented as a low-priority presentation attribute (see the
comment in layout/style/res/html.css), so any author rule setting `display`
silently overrides it. A lot of chrome/in-content CSS therefore guards
display-setting rules with `:not([hidden])` so the element still hides when the
`hidden` attribute is set.
Add a `:where([hidden]) { display: none !important }` rule to the two base
stylesheets -- global-shared.css (chrome) and in-content/common-shared.css
(in-content pages) -- so callers can set a `display` type unconditionally, and
drop the redundant `:not([hidden])` guards. `:where()` keeps the selector at
zero specificity, so the rare element that must stay shown can override it with
a plain `!important`: findbar[hidden] (slide transition), treecol[hidden] in
xul.css (column collapse), setting-control[hidden]:has(> moz-message-bar), and
the devtools toolbox webconsole/deck panels (kept laid out via visibility).
Guards are kept where the base rule can't reach: shadow-DOM widgets, the
newtab/activity-stream bundle, browser/fxr/*, and mixed-coverage sheets injected
into content documents or shadow roots (urlbar view sheets via the smartbar,
feature-callout sheets). Structural `:not([hidden])` uses (sibling/descendant
combinators) are untouched.
Also fix the moreFromMozilla QR-code box, which showed itself by setting
hidden="false". Since bug 1979014 made `hidden` a regular boolean attribute,
that value is actually hidden, so it now removes the attribute instead (and the
matching :not([hidden="true"]) CSS guards become a plain selector).
Differential Revision: https://phabricator.services.mozilla.com/D309290
345 lines
7.3 KiB
CSS
345 lines
7.3 KiB
CSS
/* 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/. */
|
|
|
|
/* Permissions */
|
|
|
|
.highlighting-group {
|
|
--section-highlight-background-color: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
|
|
}
|
|
|
|
.permission-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
margin-inline-end: var(--space-xsmall);
|
|
|
|
+ label {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.permission-icon,
|
|
.privacy-detailedoption .checkbox-label-box,
|
|
.extra-information-label > image,
|
|
.arrowhead,
|
|
.reload-tabs-button,
|
|
.content-blocking-warning-image {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.geo-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/geo.svg);
|
|
}
|
|
|
|
.xr-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/xr.svg);
|
|
}
|
|
|
|
.camera-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
|
|
}
|
|
|
|
.loopback-network-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/local-host.svg);
|
|
}
|
|
|
|
.local-network-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/local-network.svg);
|
|
}
|
|
|
|
.microphone-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
|
|
}
|
|
|
|
.speaker-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/speaker.svg);
|
|
}
|
|
|
|
.desktop-notification-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
|
|
}
|
|
|
|
.autoplay-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg);
|
|
}
|
|
|
|
.midi-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/midi.svg);
|
|
}
|
|
|
|
.serial-icon {
|
|
list-style-image: url(chrome://browser/skin/notification-icons/serial.svg);
|
|
}
|
|
|
|
/* Content Blocking */
|
|
|
|
/* Override styling that sets descriptions as grey */
|
|
#trackingGroup description.indent,
|
|
#trackingGroup .indent > description {
|
|
color: inherit;
|
|
}
|
|
|
|
[data-subcategory="trackingprotection"] {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#trackingProtectionShield {
|
|
list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: 0.5;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-inline-end: 10px;
|
|
}
|
|
|
|
.privacy-detailedoption,
|
|
#fpiIncompatibilityWarning,
|
|
#rfpIncompatibilityWarning {
|
|
margin: 3px 0;
|
|
}
|
|
|
|
#fpiIncompatibilityWarning,
|
|
#rfpIncompatibilityWarning {
|
|
background-color: var(--section-highlight-background-color);
|
|
}
|
|
|
|
#fpiIncompatibilityWarning,
|
|
#rfpIncompatibilityWarning,
|
|
#contentBlockingCategories {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.privacy-detailedoption {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.privacy-detailedoption.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.privacy-detailedoption.disabled .radio-check {
|
|
opacity: 1;
|
|
}
|
|
|
|
.privacy-detailedoption > .indent {
|
|
margin-inline-end: 22px;
|
|
}
|
|
|
|
.arrowhead {
|
|
border-radius: var(--border-radius-xsmall);
|
|
min-height: 20px;
|
|
min-width: 20px;
|
|
max-height: 20px;
|
|
max-width: 20px;
|
|
list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
|
|
background-color: transparent;
|
|
padding: 3px;
|
|
}
|
|
|
|
.arrowhead:not([disabled]):hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.arrowhead.up {
|
|
list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
|
|
}
|
|
|
|
.privacy-detailedoption.expanded:not(.selected) .reload-tabs {
|
|
display: none;
|
|
}
|
|
|
|
.content-blocking-warning.reload-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.content-blocking-reload-desc-container {
|
|
/* 345px is enough for (almost) twice the size of the default English
|
|
* string at default font sizes. If this and the button do not fit
|
|
* on one line, the button will get wrapped to the next line and this
|
|
* item will stretch to fill all available space. */
|
|
flex: 1 1 345px;
|
|
display: flex;
|
|
align-self: center;
|
|
}
|
|
|
|
.content-blocking-reload-description {
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
.reload-tabs-button {
|
|
max-height: 30px;
|
|
min-height: 30px;
|
|
padding: 0 20px;
|
|
list-style-image: url("chrome://global/skin/icons/reload.svg");
|
|
align-self: center;
|
|
}
|
|
|
|
.reload-tabs-button .button-icon {
|
|
margin: 0 6px;
|
|
color: inherit;
|
|
}
|
|
|
|
.reload-tabs-button .button-text {
|
|
color: inherit;
|
|
}
|
|
|
|
.privacy-detailedoption.selected .content-blocking-warning {
|
|
background-color: var(--section-highlight-background-color);
|
|
}
|
|
|
|
.privacy-detailedoption.selected .arrowhead {
|
|
display: none;
|
|
}
|
|
|
|
.privacy-detailedoption.selected {
|
|
border-color: var(--border-color-selected);
|
|
}
|
|
|
|
@media (forced-colors) {
|
|
.privacy-detailedoption.selected {
|
|
outline: 2px solid var(--border-color-selected);
|
|
}
|
|
}
|
|
|
|
@media not (forced-colors) {
|
|
.privacy-detailedoption {
|
|
background-color: rgba(215, 215, 219, 0.1);
|
|
}
|
|
|
|
.privacy-detailedoption.selected {
|
|
background-color: var(--section-highlight-background-color);
|
|
}
|
|
}
|
|
|
|
.content-blocking-warning-title,
|
|
.privacy-detailedoption .radio-label-box {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.privacy-detailedoption:not(.expanded, .selected) .privacy-extra-information {
|
|
visibility: collapse;
|
|
}
|
|
|
|
.extra-information-label {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
/* Apply display: block to the containers of all the category information, as
|
|
* without this the flex-wrapped blocks inside don't stretch vertically to
|
|
* enclose their content. */
|
|
.privacy-detailedoption > .indent {
|
|
display: block;
|
|
}
|
|
|
|
.privacy-detailedoption.expanded .privacy-extra-information,
|
|
.privacy-detailedoption.selected .privacy-extra-information {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: stretch;
|
|
}
|
|
|
|
.privacy-extra-information > .indent {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.privacy-extra-information > .custom-option {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.content-blocking-warning {
|
|
/* Match .indent's horizontal padding, minus the border added via .info-box-container: */
|
|
padding-inline: calc(22px - 1px);
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.content-blocking-warning:not([hidden]) + .content-blocking-warning {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.content-blocking-extra-blocking-desc {
|
|
margin-inline-start: 0.5em;
|
|
position: relative;
|
|
top: 0.65em;
|
|
}
|
|
|
|
.content-blocking-label,
|
|
.doh-label {
|
|
display: list-item;
|
|
}
|
|
|
|
#dohExceptionsButton {
|
|
align-self: end;
|
|
}
|
|
|
|
.content-blocking-warning-image {
|
|
list-style-image: url("chrome://global/skin/icons/warning.svg");
|
|
width: 16px;
|
|
margin-inline-end: 6px;
|
|
}
|
|
|
|
.content-blocking-exceptions {
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 18px;
|
|
}
|
|
|
|
#blockCookiesMenu {
|
|
width: 450px;
|
|
}
|
|
|
|
#blockCookiesMenu,
|
|
#trackingProtectionMenu,
|
|
#fingerprintingProtectionMenu {
|
|
margin: 0;
|
|
}
|
|
|
|
.privacy-detailedoption-description {
|
|
font-size: 90%;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.warning-description {
|
|
background: url(chrome://global/skin/icons/warning.svg) no-repeat 0 5px;
|
|
opacity: 0.6;
|
|
-moz-context-properties: fill, stroke;
|
|
fill: #d7b600;
|
|
stroke: white;
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
.reject-trackers-warning-icon:-moz-locale-dir(rtl) {
|
|
background-position-x: right 0;
|
|
}
|
|
|
|
#contentBlockingChangeCookieSettings {
|
|
padding: 0.25em 0.75em;
|
|
margin: 4px 8px;
|
|
}
|
|
|
|
#deleteOnCloseNote {
|
|
margin-top: 8px;
|
|
margin-inline-end: 32px;
|
|
}
|
|
|
|
/* Logins and Passwords */
|
|
|
|
#openWindowsPasskeySettings {
|
|
margin-block-start: 2em;
|
|
}
|
|
|
|
#statusPrimaryPassword .primary-pw-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-small);
|
|
}
|
|
|
|
#statusPrimaryPassword .primary-pw-status-icon {
|
|
width: var(--size-item-small);
|
|
height: var(--size-item-small);
|
|
-moz-context-properties: fill;
|
|
fill: var(--icon-color-success);
|
|
}
|