From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- browser/components/extensions/extension.css | 549 ++++++++++++++++++++++++++++ 1 file changed, 549 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..6e3cbf9bd7 --- /dev/null +++ b/browser/components/extensions/extension.css @@ -0,0 +1,549 @@ +/* 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 */ + +/* 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; +} -- cgit v1.2.3