From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- browser/components/extensions/extension.css | 577 ++++++++++++++++++++++++++++ 1 file changed, 577 insertions(+) create mode 100644 browser/components/extensions/extension.css (limited to 'browser/components/extensions/extension.css') diff --git a/browser/components/extensions/extension.css b/browser/components/extensions/extension.css new file mode 100644 index 0000000000..f05e2f12a1 --- /dev/null +++ b/browser/components/extensions/extension.css @@ -0,0 +1,577 @@ +/* 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 */ -- cgit v1.2.3