diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/extensions/webcompat/about-compat/aboutCompat.css | |
parent | Initial commit. (diff) | |
download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/extensions/webcompat/about-compat/aboutCompat.css')
-rw-r--r-- | browser/extensions/webcompat/about-compat/aboutCompat.css | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/browser/extensions/webcompat/about-compat/aboutCompat.css b/browser/extensions/webcompat/about-compat/aboutCompat.css new file mode 100644 index 0000000000..b51db7f9f5 --- /dev/null +++ b/browser/extensions/webcompat/about-compat/aboutCompat.css @@ -0,0 +1,187 @@ +/* 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/. */ + +@media (any-pointer: fine) { + :root { + font-family: sans-serif; + margin: 40px auto; + min-width: 30em; + max-width: 60em; + } + + table { + width: 100%; + padding-bottom: 2em; + border-spacing: 0; + } + + td { + border-bottom: 1px solid var(--in-content-border-color); + } + + td:last-child > button { + float: inline-end; + } +} + +/* Mobile UI where common.css is not loaded */ + +@media (any-pointer: coarse), (any-pointer: none) { + * { + margin: 0; + padding: 0; + } + + :root { + --background-color: #fff; + --text-color: #0c0c0d; + --border-color: #e1e1e2; + --button-background-color: #f5f5f5; + --selected-tab-text-color: #0061e0; + } + + @media (prefers-color-scheme: dark) { + :root { + --background-color: #292833; + --text-color: #f9f9fa; + --border-color: rgba(255, 255, 255, 0.15); + --button-background-color: rgba(0, 0, 0, 0.15); + --selected-tab-text-color: #00ddff; + } + } + + body { + background-color: var(--background-color); + color: var(--text-color); + font: message-box; + font-size: 14px; + -moz-text-size-adjust: none; + display: grid; + grid-template-areas: "a b c" "d d d"; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: fit-content(100%) 1fr; + } + + .tab[data-l10n-id="label-overrides"] { + grid-area: a; + } + + .tab[data-l10n-id="label-interventions"] { + grid-area: b; + } + + .tab[data-l10n-id="label-smartblock"] { + grid-area: c; + } + + table { + grid-area: d; + } + + table, + tr, + p { + display: block; + } + + table { + border-top: 2px solid var(--border-color); + margin-top: -2px; + width: 100%; + z-index: 1; + display: none; + } + + tr { + border-bottom: 1px solid var(--border-color); + padding: 0; + } + + a { + color: inherit; + font-size: 94%; + } + + .tab { + cursor: pointer; + z-index: 2; + display: inline-block; + text-align: left; + border-block: 2px solid transparent; + font-size: 1em; + font-weight: bold; + padding: 1em; + } + + .tab.active { + color: var(--selected-tab-text-color); + border-bottom-color: currentColor; + margin-bottom: 0; + padding-bottom: calc(1em + 2px); + } + + .tab.active + table { + display: block; + } + + td { + grid-area: b; + padding-left: 1em; + } + + td:first-child { + grid-area: a; + padding-top: 1em; + } + + td:last-child { + grid-area: c; + padding-bottom: 1em; + } + + tr { + display: grid; + grid-template-areas: "a c" "b c"; + grid-template-columns: 1fr 6.5em; + } + + td[colspan="4"] { + padding: 1em; + font-style: italic; + text-align: center; + } + + td:not([colspan]):nth-child(1) { + font-weight: bold; + padding-bottom: 0.25em; + } + + td:nth-child(2) { + padding-bottom: 1em; + } + + td:nth-child(3) { + display: flex; + padding: 0; + } + + button { + cursor: pointer; + width: 100%; + height: 100%; + background: var(--button-background-color); + color: inherit; + inset-inline-end: 0; + margin: 0; + padding: 0; + border: 0; + border-inline-start: 1px solid var(--border-color); + font-weight: 600; + appearance: none; + } + + button::-moz-focus-inner { + border: 0; + } +} |