forked from mirrors/gecko-dev
3449e77879
Merge (browser_style) extension-mac.css with extension.css and use
-moz-platform media query for conditional CSS.
Replace extension-{mac,linux,win}-panel.css with one CSS file, without
platform-specific conditions since their content were already identical.
Simplified JS code referencing these CSS files: Instead of lazy getters
("extensionStylesheets") exported and imported across modules, use plain
string constants for simplicity. The extension.css file is not expected
to be used in new code since it is a deprecated feature, and the string
is sufficiently unique to be easily findable through code search.
Differential Revision: https://phabricator.services.mozilla.com/D198312
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: #222426;
|
|
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 */
|