From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 browser/components/screenshots/overlay/overlay.css | 481 +++++++++++++++++++++
 1 file changed, 481 insertions(+)
 create mode 100644 browser/components/screenshots/overlay/overlay.css

(limited to 'browser/components/screenshots/overlay/overlay.css')

diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css
new file mode 100644
index 0000000000..7b008fb8aa
--- /dev/null
+++ b/browser/components/screenshots/overlay/overlay.css
@@ -0,0 +1,481 @@
+/* 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/. */
+
+:-moz-native-anonymous #screenshots-component {
+  --in-content-page-background: #fff;
+
+  --in-content-button-text-color: rgb(21, 20, 26);
+  --in-content-button-text-color-hover: var(--in-content-text-color);
+  --in-content-button-text-color-active: var(--in-content-button-text-color);
+  --in-content-button-background: rgba(207,207,216,.33);
+  --in-content-button-background-hover: rgba(207,207,216,.66);
+  --in-content-button-background-active: rgb(207,207,216);
+  --in-content-button-border-color: transparent;
+  --in-content-button-border-color-hover: transparent;
+  --in-content-button-border-color-active: transparent;
+
+  --in-content-primary-button-text-color: rgb(251,251,254);
+  --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
+  --in-content-primary-button-text-color-active: var(--in-content-primary-button-text-color);
+  --in-content-primary-button-background: #0061e0;
+  --in-content-primary-button-background-hover: #0250bb;
+  --in-content-primary-button-background-active: #053e94;
+  --in-content-primary-button-border-color: transparent;
+  --in-content-primary-button-border-color-hover: transparent;
+  --in-content-primary-button-border-color-active: transparent;
+
+  --in-content-focus-outline-color: var(--in-content-primary-button-background);
+}
+
+@media (prefers-color-scheme: dark) {
+  :-moz-native-anonymous #screenshots-component {
+    --in-content-page-background: #42414d;
+
+    --in-content-button-text-color: rgb(251,251,254);
+    --in-content-button-background: rgb(43,42,51);
+    --in-content-button-background-hover: rgb(82,82,94);
+    --in-content-button-background-active: rgb(91,91,102);
+
+    --in-content-primary-button-text-color: rgb(43,42,51);
+    --in-content-primary-button-background: rgb(0,221,255);
+    --in-content-primary-button-background-hover: rgb(128,235,255);
+    --in-content-primary-button-background-active: rgb(170,242,255);
+  }
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #screenshots-component {
+    --in-content-page-background: Canvas;
+
+    --in-content-button-text-color: ButtonText;
+    --in-content-button-text-color-hover: SelectedItemText;
+    --in-content-button-text-color-active: SelectedItem;
+    --in-content-button-background: ButtonFace;
+    --in-content-button-background-hover: SelectedItem;
+    --in-content-button-background-active: SelectedItemText;
+    --in-content-button-border-color: ButtonText;
+    --in-content-button-border-color-hover: SelectedItemText;
+    --in-content-button-border-color-active: SelectedItem;
+
+    --in-content-primary-button-text-color: ButtonFace;
+    --in-content-primary-button-text-color-hover: SelectedItemText;
+    --in-content-primary-button-text-color-active: SelectedItem;
+    --in-content-primary-button-background: ButtonText;
+    --in-content-primary-button-background-hover: SelectedItem;
+    --in-content-primary-button-background-active: SelectedItemText;
+    --in-content-primary-button-border-color: ButtonFace;
+    --in-content-primary-button-border-color-hover: SelectedItemText;
+    --in-content-primary-button-border-color-active: SelectedItem;
+
+    --in-content-focus-outline-color: -moz-DialogText;
+  }
+}
+
+:-moz-native-anonymous #screenshots-component {
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+  user-select: none;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+/**
+ * Overlay content is position: fixed as we need to allow for the possiblily
+ * of the document scrolling or changing size while the overlay is visible
+ */
+:-moz-native-anonymous #screenshots-overlay-container {
+  /*
+  Content CSS applying to the html element can impact the overlay.
+  To avoid that, possible cases have been set to initial.
+  */
+  text-transform: initial;
+  text-indent: initial;
+  letter-spacing: initial;
+  word-spacing: initial;
+  color: initial;
+  direction: initial;
+  writing-mode: initial;
+  z-index: 1;
+  position: absolute;
+  pointer-events: auto;
+  cursor: crosshair;
+}
+
+:-moz-native-anonymous #preview-container {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:-moz-native-anonymous #selection-container {
+  overflow: clip;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:-moz-native-anonymous #screenshots-overlay-container[hidden] {
+  display: none;
+}
+
+:-moz-native-anonymous #screenshots-overlay-container[dragging] {
+  cursor: grabbing;
+}
+
+:-moz-native-anonymous #buttons {
+  position: absolute;
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--in-content-page-background);
+  border-radius: 4px;
+  padding: 4px;
+}
+
+:-moz-native-anonymous .screenshots-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  user-select: none;
+  white-space: nowrap;
+  min-height: 36px;
+  font-size: 15px;
+  min-width: 36px;
+  z-index: 6;
+  margin-inline: 4px;
+  font-family: "Segoe UI", sans-serif;
+
+  /* Below styles are copied from common-shared.css */
+  appearance: none;
+  padding: 7px 15px;
+  text-decoration: none;
+  font-weight: 600;
+  margin: 4px;
+  border: 1px solid var(--in-content-button-border-color);
+  color: var(--in-content-button-text-color);
+  border-radius: 4px;
+  background-color: var(--in-content-button-background);
+}
+
+:-moz-native-anonymous .screenshots-button:focus-visible,
+:-moz-native-anonymous #screenshots-cancel-button:focus-visible {
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: 2px;
+}
+
+:-moz-native-anonymous .screenshots-button:hover {
+  background-color: var(--in-content-button-background-hover);
+  border-color: var(--in-content-button-border-color-hover);
+  color: var(--in-content-button-text-color-hover);
+}
+
+:-moz-native-anonymous .screenshots-button:active {
+  background-color: var(--in-content-button-background-active);
+  border-color: var(--in-content-button-border-color-active);
+  color: var(--in-content-button-text-color-active);
+}
+
+:-moz-native-anonymous .primary {
+  background-color: var(--in-content-primary-button-background);
+  border-color: var(--in-content-primary-button-border-color);
+  color: var(--in-content-primary-button-text-color);
+}
+
+:-moz-native-anonymous .primary:hover {
+  background-color: var(--in-content-primary-button-background-hover);
+  border-color: var(--in-content-primary-button-border-color-hover);
+  color: var(--in-content-primary-button-text-color-hover);
+}
+
+:-moz-native-anonymous .primary:active {
+  background-color: var(--in-content-primary-button-background-active);
+  border-color: var(--in-content-primary-button-border-color-active);
+  color: var(--in-content-primary-button-text-color-active);
+}
+
+:-moz-native-anonymous #screenshots-cancel-button {
+  background-color: transparent;
+  margin-top: 40px;
+  width: fit-content;
+  border-color: #fff;
+  color: #fff;
+}
+
+:-moz-native-anonymous #screenshots-cancel-button:hover {
+  background-color: #fff;
+  color: #000;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous #screenshots-cancel-button {
+    border-color: ButtonBorder;
+    color: CanvasText;
+  }
+}
+
+:-moz-native-anonymous .screenshots-button > img {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+:-moz-native-anonymous #cancel > img {
+  content: url("chrome://global/skin/icons/close.svg");
+}
+
+:-moz-native-anonymous #copy > img {
+  content: url("chrome://global/skin/icons/edit-copy.svg");
+}
+
+:-moz-native-anonymous #download > img {
+  content: url("chrome://browser/skin/downloads/downloads.svg");
+}
+
+:-moz-native-anonymous #download > img,
+:-moz-native-anonymous #copy > img {
+  margin-inline-end: 5px;
+}
+
+:-moz-native-anonymous .fixed-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+  inset-inline-start: 0;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+:-moz-native-anonymous .face-container {
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+:-moz-native-anonymous .face {
+  width: 62px;
+  height: 62px;
+  display: block;
+  background-image: url("chrome://browser/content/screenshots/icon-welcome-face-without-eyes.svg");
+}
+
+:-moz-native-anonymous .eye {
+  background-color: #fff;
+  width: 10px;
+  height: 14px;
+  position: absolute;
+  border-radius: 100%;
+  overflow: hidden;
+  inset-inline-start: 16px;
+  top: 19px;
+}
+
+:-moz-native-anonymous .eyeball {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: #000;
+  border-radius: 50%;
+  inset-inline-start: 2px;
+  top: 4px;
+  z-index: 10;
+}
+
+:-moz-native-anonymous .left {
+  margin-inline-start: 0;
+}
+
+:-moz-native-anonymous .right {
+  margin-inline-start: 20px;
+}
+
+:-moz-native-anonymous .preview-instructions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: pulse 125mm cubic-bezier(0.07, 0.95, 0, 1);
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  font-size: 24px;
+  line-height: 32px;
+  text-align: center;
+  padding-top: 20px;
+  width: 400px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+  :-moz-native-anonymous .preview-instructions {
+    color: CanvasText;
+  }
+}
+
+:-moz-native-anonymous #hover-highlight {
+  animation: fade-in 125ms forwards cubic-bezier(0.07, 0.95, 0, 1);
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 1px;
+  pointer-events: none;
+  position: absolute;
+  z-index: 11;
+}
+
+:-moz-native-anonymous #hover-highlight::before {
+  border: 2px dashed rgba(255, 255, 255, 0.4);
+  bottom: 0;
+  content: "";
+  inset-inline-start: 0;
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+}
+
+:-moz-native-anonymous .bghighlight {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  overflow: clip;
+}
+
+:-moz-native-anonymous .highlight {
+  border-radius: 1px;
+  border: 2px dashed rgba(255, 255, 255, 0.8);
+  box-sizing: border-box;
+  cursor: move;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+:-moz-native-anonymous .mover-target {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 5;
+  pointer-events: auto;
+}
+
+:-moz-native-anonymous .mover-target.direction-topLeft {
+  cursor: nwse-resize;
+  height: 60px;
+  left: -30px;
+  top: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-top {
+  cursor: ns-resize;
+  height: 60px;
+  inset-inline-start: 0;
+  top: -30px;
+  width: 100%;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-topRight {
+  cursor: nesw-resize;
+  height: 60px;
+  right: -30px;
+  top: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-left {
+  cursor: ew-resize;
+  height: 100%;
+  left: -30px;
+  top: 0;
+  width: 60px;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-right {
+  cursor: ew-resize;
+  height: 100%;
+  right: -30px;
+  top: 0;
+  width: 60px;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottomLeft {
+  bottom: -30px;
+  cursor: nesw-resize;
+  height: 60px;
+  left: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottom {
+  bottom: -30px;
+  cursor: ns-resize;
+  height: 60px;
+  inset-inline-start: 0;
+  width: 100%;
+  z-index: 4;
+}
+
+:-moz-native-anonymous .mover-target.direction-bottomRight {
+  bottom: -30px;
+  cursor: nwse-resize;
+  height: 60px;
+  right: -30px;
+  width: 60px;
+}
+
+:-moz-native-anonymous .mover-target:hover .mover {
+  transform: scale(1.05);
+}
+
+:-moz-native-anonymous .mover {
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  height: 16px;
+  opacity: 1;
+  position: relative;
+  transition: transform 125ms cubic-bezier(0.07, 0.95, 0, 1);
+  width: 16px;
+}
+
+:-moz-native-anonymous .small-selection .mover {
+  height: 10px;
+  width: 10px;
+}
+
+:-moz-native-anonymous .direction-topLeft .mover,
+:-moz-native-anonymous .direction-left .mover,
+:-moz-native-anonymous .direction-bottomLeft .mover {
+  left: -1px;
+}
+
+:-moz-native-anonymous .direction-topLeft .mover,
+:-moz-native-anonymous .direction-top .mover,
+:-moz-native-anonymous .direction-topRight .mover {
+  top: -1px;
+}
+
+:-moz-native-anonymous .direction-topRight .mover,
+:-moz-native-anonymous .direction-right .mover,
+:-moz-native-anonymous .direction-bottomRight .mover {
+  right: -1px;
+}
+
+:-moz-native-anonymous .direction-bottomRight .mover,
+:-moz-native-anonymous .direction-bottom .mover,
+:-moz-native-anonymous .direction-bottomLeft .mover {
+  bottom: -1px;
+}
-- 
cgit v1.2.3