diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /browser/components/shopping/content/letter-grade.css | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | browser/components/shopping/content/letter-grade.css | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/browser/components/shopping/content/letter-grade.css b/browser/components/shopping/content/letter-grade.css new file mode 100644 index 0000000000..75be411151 --- /dev/null +++ b/browser/components/shopping/content/letter-grade.css @@ -0,0 +1,132 @@ +/* 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/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +:host { + --background-term-a: #B3FFE3; + --background-term-b: #80EBFF; + --background-term-c: #FFEA80; + --background-term-d: #FFB587; + --background-term-f: #FF848B; + --in-content-box-border-color: rgba(0, 0, 0, 0.15); + --inner-border: 1px solid var(--in-content-box-border-color); + --letter-grade-width: 1.5rem; + --letter-grade-term-inline-padding: 0.25rem; +} + +#letter-grade-wrapper { + border-radius: 4px; + color: #000; + display: flex; + font-weight: 600; + line-height: 150%; + margin: 0; + overflow-wrap: anywhere; +} + +#letter-grade-term { + align-items: center; + align-self: stretch; + box-sizing: border-box; + display: flex; + flex-shrink: 0; + font-size: 1em; + justify-content: center; + margin: 0; + padding: 0.0625rem var(--letter-grade-term-inline-padding); + text-align: center; + width: var(--letter-grade-width); +} + +:host([showdescription]) #letter-grade-term { + /* For border "shadow" inside the container */ + border-block: var(--inner-border); + border-inline-start: var(--inner-border); + border-start-start-radius: 4px; + border-end-start-radius: 4px; + /* Add 1px padding so that the letter does not shift when changing + * between the show description and no description variants. */ + padding-inline-end: calc(var(--letter-grade-term-inline-padding) + 1px); +} + +:host(:not([showdescription])) #letter-grade-term { + border: var(--inner-border); + border-radius: 4px; +} + +#letter-grade-description { + /* For border "shadow" inside the container */ + border-block: var(--inner-border); + border-inline-end: var(--inner-border); + border-start-end-radius: 4px; + border-end-end-radius: 4px; + + align-items: center; + align-self: stretch; + box-sizing: border-box; + display: flex; + font-size: 0.87rem; + font-weight: var(--font-weight-default); + margin: 0; + padding: 0.125rem 0.5rem; +} + +/* Letter grade colors */ + +:host([letter="A"]) #letter-grade-term { + background-color: var(--background-term-a); +} + +:host([letter="A"]) #letter-grade-description { + background-color: rgba(231, 255, 246, 1); +} + +:host([letter="B"]) #letter-grade-term { + background-color: var(--background-term-b); +} + +:host([letter="B"]) #letter-grade-description { + background-color: rgba(222, 250, 255, 1); +} + +:host([letter="C"]) #letter-grade-term { + background-color: var(--background-term-c); +} + +:host([letter="C"]) #letter-grade-description { + background-color: rgba(255, 249, 218, 1); +} + +:host([letter="D"]) #letter-grade-term { + background-color: var(--background-term-d); +} + +:host([letter="D"]) #letter-grade-description { + background-color: rgba(252, 230, 213, 1); +} + +:host([letter="F"]) #letter-grade-term { + background-color: var(--background-term-f); +} + +:host([letter="F"]) #letter-grade-description { + background-color: rgba(255, 228, 230, 1); +} + +@media (prefers-contrast) { + :host { + --in-content-box-border-color: unset; + } + + #letter-grade-term { + background-color: var(--in-content-page-color) !important; + color: var(--in-content-page-background) !important; + } + + #letter-grade-description { + background-color: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } +} |