summaryrefslogtreecommitdiffstats
path: root/browser/components/screenshots/overlay/overlay.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /browser/components/screenshots/overlay/overlay.css
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.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/screenshots/overlay/overlay.css')
-rw-r--r--browser/components/screenshots/overlay/overlay.css435
1 files changed, 435 insertions, 0 deletions
diff --git a/browser/components/screenshots/overlay/overlay.css b/browser/components/screenshots/overlay/overlay.css
new file mode 100644
index 0000000000..0c03e18ce7
--- /dev/null
+++ b/browser/components/screenshots/overlay/overlay.css
@@ -0,0 +1,435 @@
+/* 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 {
+ 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 #screenshots-cancel-button {
+ background-color: transparent;
+ width: fit-content;
+ cursor: pointer;
+ outline: none;
+ border-radius: 3px;
+ border: 1px #9b9b9b solid;
+ color: #fff;
+ font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+ font-size: 16px;
+ margin-top: 40px;
+ padding: 10px 25px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+ :-moz-native-anonymous #screenshots-cancel-button {
+ border-color: ButtonBorder;
+ }
+}
+
+:-moz-native-anonymous .screenshots-button {
+ cursor: pointer;
+ appearance: none;
+ pointer-events: auto;
+ background-color: #f9f9fa;
+ color: #38383d;
+ border: 0;
+ border-radius: 3px;
+ font-size: 16px;
+ font-weight: 400;
+ height: 40px;
+ min-width: 40px;
+ outline: none;
+ padding: 0 10px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ transition: background 150ms cubic-bezier(0.07, 0.95, 0, 1), border 150ms cubic-bezier(0.07, 0.95, 0, 1);
+ user-select: none;
+ white-space: nowrap;
+ margin: 0 5px;
+ box-shadow: 0 0 0 1px rgba(12, 12, 13, 0.1), 0 2px 8px rgba(12, 12, 13, 0.1);
+ z-index: 6;
+}
+
+:-moz-native-anonymous .screenshots-button:hover,
+:-moz-native-anonymous #download:hover {
+ background-color: #52525e;
+ color: #fff;
+}
+
+:-moz-native-anonymous .screenshots-button:hover > img {
+ fill: #fff;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+ :-moz-native-anonymous .screenshots-button {
+ background-color: ButtonFace;
+ color: ButtonText;
+ }
+
+ :-moz-native-anonymous .screenshots-button:hover {
+ background-color: ButtonText;
+ color: ButtonFace;
+ }
+}
+
+:-moz-native-anonymous button img {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+:-moz-native-anonymous #buttons {
+ position: absolute;
+ margin: 10px 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+:-moz-native-anonymous #cancel {
+ width: 40px;
+}
+
+:-moz-native-anonymous #cancel > img {
+ color: #38383d;
+ content: url('chrome://browser/content/screenshots/cancel.svg');
+ width: 20px;
+ height: 20px;
+ padding: 10px 0;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+ :-moz-native-anonymous #cancel > img {
+ color: ButtonText;
+ }
+
+ :-moz-native-anonymous #cancel:hover > img {
+ color: ButtonFace;
+ }
+}
+
+:-moz-native-anonymous #copy > img {
+ color: #38383d;
+ content: url('chrome://browser/content/screenshots/copy.svg');
+ width: 16px;
+ height: 16px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+ :-moz-native-anonymous #copy > img {
+ color: ButtonText;
+ }
+
+ :-moz-native-anonymous #copy:hover > img {
+ color: ButtonFace;
+ }
+}
+
+:-moz-native-anonymous #download {
+ background-color: #0a84ff;
+ color: #fff;
+}
+
+:-moz-native-anonymous #download > img {
+ content: url('chrome://browser/content/screenshots/download.svg');
+ width: 16px;
+ height: 16px;
+}
+
+@media (forced-colors: active), (prefers-contrast) {
+ :-moz-native-anonymous #download {
+ background-color: ButtonFace;
+ color: ButtonText;
+ }
+
+ :-moz-native-anonymous #download:hover {
+ background-color: ButtonText;
+ color: ButtonFace;
+ }
+}
+
+:-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;
+}