mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-01 00:38:50 +02:00
4c5b18ecb6
This patch changes the behavior for extensions with an embedded options_ui page (open_in_tab not false), that have specified the "dark" value in the "color-scheme" meta tag or CSS property, AND with the user having indicated the preference for dark theme support. There are no changes when any of these conditions have not been met. The "color-scheme" CSS property is the standard way for extensions (web pages in general) to opt in to automatic dark theme support, e.g. by changing the foreground color to white. Prior this patch, the background was unconditionally white, which resulted in unreadable text when the dark theme is enabled. This patch changes the default background color to "Canvas", which is a special keyword that is dark theme-aware (almost black - `rgb(28, 27, 34)` by default). When `browser_style:true` is used (which is the default in MV2), extension.css is activated, which unconditionally specifies a black foreground color. To avoid a poor contrast with the new theme-dependent background color, the color is now white when the dark theme is enabled. This patch includes comprehensive test coverage, but the only tests whose behavior changed by this patch are: - options_ui_dark (background changed) - options_ui_browser_style_true_dark (color, background changed) Differential Revision: https://phabricator.services.mozilla.com/D207540
577 lines
14 KiB
CSS
577 lines
14 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/. */
|
|
|
|
/* stylelint-disable property-no-vendor-prefix */
|
|
|
|
/**
|
|
* This CSS file is loaded as an author sheet in some moz-extension:-documents.
|
|
* To make sure that extensions can easily override any CSS property declared
|
|
* here, we wrap all CSS rules in @layer (which results in lower precedence
|
|
* than any style without @layer). Unfortunately, the layer here has a higher
|
|
* precedence than any other layer. Not a problem in practice due to the minimal
|
|
* use of @layer: https://bugzilla.mozilla.org/show_bug.cgi?id=1873024#c4
|
|
* If desired, extension devs can easily opt out of this stylesheet with
|
|
* browser_style: false or by switching to MV3.
|
|
*/
|
|
@layer {
|
|
|
|
/* Global */
|
|
html,
|
|
body {
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
color: light-dark(#222426, CanvasText);
|
|
cursor: default;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font: caption;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
}
|
|
|
|
body * {
|
|
box-sizing: border-box;
|
|
text-align: start;
|
|
}
|
|
|
|
.browser-style {
|
|
appearance: none;
|
|
margin-bottom: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Buttons */
|
|
button.browser-style,
|
|
select.browser-style {
|
|
background-color: #fbfbfb;
|
|
border: 1px solid #b1b1b1;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
font: caption;
|
|
height: 24px;
|
|
outline: 0 !important;
|
|
padding: 0 8px 0;
|
|
transition-duration: 250ms;
|
|
transition-property: box-shadow, border;
|
|
}
|
|
|
|
select.browser-style {
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
|
|
background-position: calc(100% - 4px) center;
|
|
background-repeat: no-repeat;
|
|
padding-inline-end: 24px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
label.browser-style-label {
|
|
font: caption;
|
|
}
|
|
|
|
button.browser-style::-moz-focus-inner {
|
|
border: 0;
|
|
outline: 0;
|
|
}
|
|
|
|
/* Dropdowns */
|
|
select.browser-style {
|
|
background-color: #fbfbfb;
|
|
border: 1px solid #b1b1b1;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
font: caption;
|
|
height: 24px;
|
|
outline: 0 !important;
|
|
padding: 0 8px 0;
|
|
transition-duration: 250ms;
|
|
transition-property: box-shadow, border;
|
|
}
|
|
|
|
select.browser-style {
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
|
|
background-position: calc(100% - 4px) center;
|
|
background-repeat: no-repeat;
|
|
padding-inline-end: 24px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
select.browser-style:-moz-focusring {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 #000;
|
|
}
|
|
|
|
select.browser-style:-moz-focusring * {
|
|
color: #000;
|
|
text-shadow: none;
|
|
}
|
|
|
|
button.browser-style.hover,
|
|
select.browser-style.hover {
|
|
background-color: #ebebeb;
|
|
border: 1px solid #b1b1b1;
|
|
}
|
|
|
|
button.browser-style.pressed,
|
|
select.browser-style.pressed {
|
|
background-color: #d4d4d4;
|
|
border: 1px solid #858585;
|
|
}
|
|
|
|
button.browser-style:disabled,
|
|
select.browser-style:disabled {
|
|
color: #999;
|
|
opacity: .5;
|
|
}
|
|
|
|
button.browser-style.focused,
|
|
select.browser-style.focused {
|
|
border-color: #fff;
|
|
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
|
}
|
|
|
|
button.browser-style.default {
|
|
background-color: #0996f8;
|
|
border-color: #0670cc;
|
|
color: #fff;
|
|
}
|
|
|
|
button.browser-style.default.hover {
|
|
background-color: #0670cc;
|
|
border-color: #005bab;
|
|
}
|
|
|
|
button.browser-style.default.pressed {
|
|
background-color: #005bab;
|
|
border-color: #004480;
|
|
}
|
|
|
|
button.browser-style.default.focused {
|
|
border-color: #fff;
|
|
}
|
|
|
|
.browser-style > label {
|
|
user-select: none;
|
|
}
|
|
|
|
.browser-style.disabled > label {
|
|
color: #999;
|
|
opacity: .5;
|
|
}
|
|
|
|
/* Radio Buttons */
|
|
.browser-style > input[type="radio"] {
|
|
appearance: none;
|
|
background-color: #fff;
|
|
background-position: center;
|
|
border: 1px solid #b1b1b1;
|
|
border-radius: 50%;
|
|
content: "";
|
|
display: inline-block;
|
|
height: 16px;
|
|
margin-right: 6px;
|
|
vertical-align: text-top;
|
|
width: 16px;
|
|
}
|
|
|
|
.browser-style > input[type="radio"]:hover,
|
|
.browser-style.hover > input[type="radio"]:not(:active) {
|
|
background-color: #fbfbfb;
|
|
border-color: #b1b1b1;
|
|
}
|
|
|
|
.browser-style > input[type="radio"]:hover:active,
|
|
.browser-style.pressed > input[type="radio"]:not(:active) {
|
|
background-color: #ebebeb;
|
|
border-color: #858585;
|
|
}
|
|
|
|
.browser-style > input[type="radio"]:checked {
|
|
background-color: #0996f8;
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNCIgZmlsbD0iI2ZmZiIgLz4KPC9zdmc+Cg==);
|
|
border-color: #0670cc;
|
|
}
|
|
|
|
.browser-style > input[type="radio"]:checked:hover,
|
|
.browser-style.hover > input[type="radio"]:checked:not(:active) {
|
|
background-color: #0670cc;
|
|
border-color: #005bab;
|
|
}
|
|
|
|
.browser-style > input[type="radio"]:checked:hover:active,
|
|
.browser-style.pressed > input[type="radio"]:checked:not(:active) {
|
|
background-color: #005bab;
|
|
border-color: #004480;
|
|
}
|
|
|
|
.browser-style.focused > input[type="radio"] {
|
|
border-color: #0996f8;
|
|
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
|
}
|
|
|
|
.browser-style.focused > input[type="radio"]:checked {
|
|
border-color: #fff;
|
|
}
|
|
|
|
/* Checkboxes */
|
|
.browser-style > input[type="checkbox"] {
|
|
appearance: none;
|
|
background-color: #fff;
|
|
background-position: center;
|
|
border: 1px solid #b1b1b1;
|
|
content: "";
|
|
display: inline-block;
|
|
height: 16px;
|
|
margin-right: 6px;
|
|
vertical-align: text-top;
|
|
width: 16px;
|
|
}
|
|
|
|
.browser-style > input[type="checkbox"]:hover,
|
|
.browser-style.hover > input[type="checkbox"]:not(:active) {
|
|
background-color: #fbfbfb;
|
|
border-color: #b1b1b1;
|
|
}
|
|
|
|
.browser-style > input[type="checkbox"]:hover:active,
|
|
.browser-style.pressed > input[type="checkbox"]:not(:active) {
|
|
background-color: #ebebeb;
|
|
border-color: #858585;
|
|
}
|
|
|
|
.browser-style > input[type="checkbox"]:checked {
|
|
background-color: #0996f8;
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNy43LDEyLjkgQzcuNCwxMy4zIDYuOCwxMy40IDYuNCwxMyBMMy4yLDkuOCBDMi44LDkuNCAyLjgsOC42IDMuMiw4LjIgQzMuNiw3LjggNC40LDcuOCA0LjgsOC4yIEw2LjksMTAuMyBMMTEuMSw0LjQgQzExLjUsMy45IDEyLjIsMy44IDEyLjcsNC4xIEMxMy4yLDQuNSAxMy4zLDUuMiAxMyw1LjcgTDcuNywxMi45IEw3LjcsMTIuOSBaIiBmaWxsPSIjZmZmIiAvPgo8L3N2Zz4K);
|
|
border-color: #0670cc;
|
|
}
|
|
|
|
.browser-style > input[type="checkbox"]:checked:hover,
|
|
.browser-style.hover > input[type="checkbox"]:checked:not(:active) {
|
|
background-color: #0670cc;
|
|
border-color: #005bab;
|
|
}
|
|
|
|
.browser-style > input[type="checkbox"]:checked:hover:active,
|
|
.browser-style.pressed > input[type="checkbox"]:checked:not(:active) {
|
|
background-color: #005bab;
|
|
border-color: #004480;
|
|
}
|
|
|
|
.browser-style.focused > input[type="checkbox"] {
|
|
border-color: #0996f8;
|
|
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
|
}
|
|
|
|
.browser-style.focused > input[type="checkbox"]:checked {
|
|
border-color: #fff;
|
|
}
|
|
|
|
/* Expander Button */
|
|
button.browser-style.expander {
|
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
height: 24px;
|
|
padding: 0;
|
|
width: 24px;
|
|
}
|
|
|
|
/* Interactive States */
|
|
button.browser-style:enabled:hover:not(.pressed, .focused),
|
|
select.browser-style:enabled:hover:not(.pressed, .focused) {
|
|
background-color: #ebebeb;
|
|
border: 1px solid #b1b1b1;
|
|
}
|
|
|
|
button.browser-style:enabled:hover:active:not(.hover, .focused),
|
|
select.browser-style:enabled:hover:active:not(.hover, .focused) {
|
|
background-color: #d4d4d4;
|
|
border: 1px solid #858585;
|
|
}
|
|
|
|
button.browser-style.default:enabled:hover:not(.pressed, .focused) {
|
|
background-color: #0670cc;
|
|
border-color: #005bab;
|
|
}
|
|
|
|
button.browser-style.default:enabled:hover:active:not(.hover, .focused) {
|
|
background-color: #005bab;
|
|
border-color: #004480;
|
|
}
|
|
|
|
button.browser-style:focus:enabled {
|
|
border-color: #fff !important;
|
|
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
|
}
|
|
|
|
/* Fields */
|
|
.browser-style > input[type="text"],
|
|
textarea.browser-style {
|
|
background-color: #fff;
|
|
border: 1px solid #b1b1b1;
|
|
box-shadow: 0 0 0 0 rgba(97, 181, 255, 0);
|
|
font: caption;
|
|
padding: 0 6px 0;
|
|
transition-duration: 250ms;
|
|
transition-property: box-shadow;
|
|
}
|
|
|
|
.browser-style > input[type="text"] {
|
|
height: 24px;
|
|
}
|
|
|
|
.browser-style > input[type="text"].hover,
|
|
textarea.browser-style.hover {
|
|
border: 1px solid #858585;
|
|
}
|
|
|
|
.browser-style > input[type="text"]:disabled,
|
|
textarea.browser-style:disabled {
|
|
color: #999;
|
|
opacity: .5;
|
|
}
|
|
|
|
.browser-style > input[type="text"].focused,
|
|
textarea.browser-style.focused {
|
|
border-color: #0996f8;
|
|
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
|
}
|
|
|
|
/* Interactive States */
|
|
.browser-style > input[type="text"]:enabled:hover,
|
|
textarea.browser-style:enabled:hover {
|
|
border: 1px solid #858585;
|
|
}
|
|
|
|
.browser-style > input[type="text"]:focus,
|
|
.browser-style > input[type="text"]:focus:hover,
|
|
textarea.browser-style:focus,
|
|
textarea.browser-style:focus:hover {
|
|
border-color: #0996f8;
|
|
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
|
|
}
|
|
|
|
.browser-style > input[type="text"]:invalid:not(:focus),
|
|
textarea.browser-style:invalid:not(:focus) {
|
|
border-color: var(--red-60);
|
|
box-shadow: 0 0 0 1px var(--red-60),
|
|
0 0 0 4px rgba(251, 0, 34, 0.3);
|
|
}
|
|
|
|
.panel-section {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.panel-section-separator {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
min-height: 1px;
|
|
}
|
|
|
|
/* Panel Section - Header */
|
|
.panel-section-header {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
|
padding: 16px;
|
|
}
|
|
|
|
.panel-section-header > .icon-section-header {
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
height: 32px;
|
|
margin-right: 16px;
|
|
position: relative;
|
|
width: 32px;
|
|
}
|
|
|
|
.panel-section-header > .text-section-header {
|
|
align-self: center;
|
|
font-size: 1.385em;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
/* Panel Section - List */
|
|
.panel-section-list {
|
|
flex-direction: column;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.panel-list-item {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 24px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.panel-list-item:not(.disabled):hover {
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
border-block: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.panel-list-item:not(.disabled):hover:active {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.panel-list-item.disabled {
|
|
color: #999;
|
|
}
|
|
|
|
.panel-list-item > .icon {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.panel-list-item > .text {
|
|
flex-grow: 10;
|
|
}
|
|
|
|
.panel-list-item > .text-shortcut {
|
|
color: #808080;
|
|
font-family: "Lucida Grande", caption;
|
|
font-size: .847em;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.panel-section-list .panel-section-separator {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* Panel Section - Form Elements */
|
|
.panel-section-formElements {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
}
|
|
|
|
.panel-formElements-item {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.panel-formElements-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.panel-formElements-item label {
|
|
flex-shrink: 0;
|
|
margin-right: 6px;
|
|
text-align: right;
|
|
}
|
|
|
|
.panel-formElements-item input[type="text"],
|
|
.panel-formElements-item select.browser-style {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Panel Section - Footer */
|
|
.panel-section-footer {
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
|
color: #1a1a1a;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 41px;
|
|
margin-top: -1px;
|
|
padding: 0;
|
|
}
|
|
|
|
.panel-section-footer-button {
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
margin: 0 -1px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.panel-section-footer-button > .text-shortcut {
|
|
color: #808080;
|
|
font-family: "Lucida Grande", caption;
|
|
font-size: .847em;
|
|
}
|
|
|
|
.panel-section-footer-button:hover {
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.panel-section-footer-button:hover:active {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.panel-section-footer-button.default {
|
|
background-color: #0996f8;
|
|
box-shadow: 0 1px 0 #0670cc inset;
|
|
color: #fff;
|
|
}
|
|
|
|
.panel-section-footer-button.default:hover {
|
|
background-color: #0670cc;
|
|
box-shadow: 0 1px 0 #005bab inset;
|
|
}
|
|
|
|
.panel-section-footer-button.default:hover:active {
|
|
background-color: #005bab;
|
|
box-shadow: 0 1px 0 #004480 inset;
|
|
}
|
|
|
|
.panel-section-footer-separator {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
width: 1px;
|
|
z-index: 99;
|
|
}
|
|
|
|
/* Panel Section - Tabs */
|
|
.panel-section-tabs {
|
|
color: #1a1a1a;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 41px;
|
|
margin-bottom: -1px;
|
|
padding: 0;
|
|
}
|
|
|
|
.panel-section-tabs-button {
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
margin: 0 -1px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.panel-section-tabs-button:hover {
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.panel-section-tabs-button:hover:active {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.panel-section-tabs-button.selected {
|
|
box-shadow: 0 -1px 0 #0670cc inset, 0 -4px 0 #0996f8 inset;
|
|
color: #0996f8;
|
|
}
|
|
|
|
.panel-section-tabs-button.selected:hover {
|
|
color: #0670cc;
|
|
}
|
|
|
|
.panel-section-tabs-separator {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
width: 1px;
|
|
z-index: 99;
|
|
}
|
|
|
|
@media (-moz-platform: macos) {
|
|
button.browser-style,
|
|
select.browser-style,
|
|
.browser-style > input[type="checkbox"] {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.panel-section-footer {
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
} /* end of @layer */
|