diff options
Diffstat (limited to 'browser/components/screenshots/overlay')
| -rw-r--r-- | browser/components/screenshots/overlay/overlay.css | 435 |
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; +} |