diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /browser/components/textrecognition/textrecognition.css | |
parent | Initial commit. (diff) | |
download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/textrecognition/textrecognition.css')
-rw-r--r-- | browser/components/textrecognition/textrecognition.css | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/browser/components/textrecognition/textrecognition.css b/browser/components/textrecognition/textrecognition.css new file mode 100644 index 0000000000..f1f378c8e2 --- /dev/null +++ b/browser/components/textrecognition/textrecognition.css @@ -0,0 +1,143 @@ +/* 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/. */ + +.textRecognitionText { + overflow-y: auto; + max-height: 300px; + flex: 1; + display: none; +} + +.textRecognitionText p:first-child { + margin-top: 0; +} + +.textRecognitionText p:last-child { + margin-bottom: 0; +} + +.textRecognition { + --gap: 16px; + display: flex; + flex-direction: column; + background-color: var(--in-content-page-background); + width: 412px; + gap: var(--gap) 0; + padding-block: var(--gap); +} + +.textRecognition > * { + padding-inline: var(--gap); +} + +.textRecognitionHeader { + font-weight: bold; + display: flex; + flex-direction: row; + align-items: center; +} + +.textRecognitionFooter { + text-align: end; +} + +.textRecognitionThrobber { + display: inline-block; + width: 16px; + height: 16px; + position: relative; + overflow: hidden; + margin-inline-end: 5.5px; +} + +@media (prefers-reduced-motion: no-preference) { + .textRecognitionThrobber::before { + content: ""; + position: absolute; + background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); + background-position: left center; + background-repeat: no-repeat; + width: 480px; + height: 100%; + animation: throbber-animation-ltr 1.05s steps(30) infinite; + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.7; + } + + .textRecognitionThrobber:dir(rtl)::before { + background-position-x: right; + animation: throbber-animation-rtl 1.05s steps(30) infinite; + } +} + +@media (prefers-reduced-motion: reduce) { + .textRecognitionThrobber { + background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; + } +} + +.textRecognitionSuccessIcon { + display: inline-block; + background-color: #2AC3A2; + border: 3px solid #2AC3A2; + fill: var(--in-content-page-background); + -moz-context-properties: fill; + border-radius: 10px; + width: 12px; + height: 12px; + margin-inline-end: 6px; +} + +@media (prefers-reduced-motion: no-preference) { + .textRecognitionSuccessIcon { + animation: success-animation 0.3s cubic-bezier(.3,2,.48,.94); + } +} + +.textRecognitionNoResultIcon { + display: inline-block; + fill: #FFBF00; + -moz-context-properties: fill; + width: 18px; + height: 18px; + margin-inline-end: 8px; +} + +@media (prefers-contrast) { + .textRecognitionSuccessIcon { + background-color: currentColor; + border-color: currentColor; + fill: var(--in-content-page-background); + } + + .textRecognitionNoResultIcon { + fill: currentColor; + } +} + +@keyframes throbber-animation-ltr { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } +} + +@keyframes throbber-animation-rtl { + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } +} + +@keyframes success-animation { + 0% { + transform: scale(0); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} |