Source code
Revision control
Copy as Markdown
Other Tools
/* 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
:host {
display: contents;
/* These z-indexes are used to correctly layer elements in the screenshots overlay */
--screenshots-lowest-layer: 1;
--screenshots-low-layer: 2;
--screenshots-high-layer: 3;
--screenshots-highest-layer: 4;
}
[hidden] {
display: none !important;
}
#screenshots-component {
position: absolute;
inset: 0;
font: message-box;
user-select: none;
touch-action: none;
pointer-events: auto;
cursor: crosshair;
&[dragging] {
cursor: grabbing;
}
&[resizing] {
position: fixed;
width: 100% !important;
height: 100% !important;
}
}
#selection-container {
overflow: clip;
position: absolute;
inset: 0;
pointer-events: none;
}
#preview-container {
overflow: clip;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
}
#buttons-container {
position: absolute;
margin: 10px 0;
cursor: auto;
z-index: var(--screenshots-highest-layer);
}
#selection-size,
#buttons-container {
padding: 4px;
background-color: var(--in-content-page-background);
color: var(--in-content-text-color);
border-radius: 4px;
}
.buttons-wrapper,
#selection-size-container {
display: flex;
align-items: center;
justify-content: center;
}
.screenshots-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xsmall);
cursor: pointer;
text-align: center;
user-select: none;
white-space: nowrap;
z-index: var(--screenshots-highest-layer);
min-width: 32px;
margin-inline: 4px;
}
#selection-size-container {
width: 100%;
height: 100%;
pointer-events: none;
z-index: var(--screenshots-lowest-layer);
}
#screenshots-cancel-button {
margin-top: 20px;
border-color: #fff;
color: #fff;
@media (forced-colors) {
background-color: var(--in-content-button-background);
color: var(--in-content-button-text-color);
border-color: var(--in-content-button-border-color);
}
}
#screenshots-cancel-button:hover {
background-color: #fff;
color: #000;
@media (forced-colors) {
background-color: var(--in-content-button-background-hover);
color: var(--in-content-button-text-color-hover);
border-color: var(--in-content-button-border-color-hover);
}
}
.screenshots-button > img {
-moz-context-properties: fill;
fill: currentColor;
width: 16px;
height: 16px;
pointer-events: none;
}
.screenshots-button > label {
pointer-events: none;
}
#cancel > img {
}
#copy > img {
}
#download > img {
}
.face-container {
position: relative;
width: 64px;
height: 64px;
@media (forced-colors) {
display: none;
}
}
.face {
width: 62px;
height: 62px;
display: block;
}
.eye {
background-color: #fff;
width: 10px;
height: 14px;
position: absolute;
border-radius: 100%;
overflow: hidden;
inset-inline-start: 16px;
top: 19px;
}
.eyeball {
position: absolute;
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
inset-inline-start: 2px;
top: 4px;
z-index: var(--screenshots-high-layer);
}
.left {
margin-inline-start: 0;
}
.right {
margin-inline-start: 20px;
}
.preview-instructions {
display: flex;
align-items: center;
justify-content: center;
animation: pulse 125ms cubic-bezier(0.07, 0.95, 0, 1);
color: #fff;
font-size: 24px;
line-height: 32px;
text-align: center;
padding: 20px;
width: 400px;
@media (forced-colors) {
color: CanvasText;
background-color: Canvas;
}
}
#hover-highlight {
animation: fade-in 125ms forwards cubic-bezier(0.07, 0.95, 0, 1);
background: rgba(255, 255, 255, 0.2);
border: 2px dashed rgba(255, 255, 255, 0.4);
border-radius: 1px;
box-sizing: border-box;
pointer-events: none;
position: absolute;
z-index: var(--screenshots-high-layer);
}
#top-background {
top: 0;
left: 0;
width: 100%;
}
#left-background {
left: 0;
}
#bottom-background {
left: 0;
width: 100%;
}
.bghighlight {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
overflow: clip;
pointer-events: none;
z-index: -1;
}
.highlight {
border: 2px dashed rgba(255, 255, 255, 0.8);
box-sizing: border-box;
cursor: move;
position: absolute;
pointer-events: auto;
z-index: var(--screenshots-lowest-layer);
outline-offset: 8px;
}
.mover-target {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: var(--screenshots-high-layer);
pointer-events: auto;
outline-offset: -15px;
}
.mover-target.direction-topLeft {
cursor: nwse-resize;
height: 60px;
left: -30px;
top: -30px;
width: 60px;
}
.mover-target.direction-top {
cursor: ns-resize;
height: 60px;
inset-inline-start: 0;
top: -30px;
width: 100%;
z-index: var(--screenshots-low-layer);
}
.mover-target.direction-topRight {
cursor: nesw-resize;
height: 60px;
right: -30px;
top: -30px;
width: 60px;
}
.mover-target.direction-left {
cursor: ew-resize;
height: 100%;
left: -30px;
top: 0;
width: 60px;
z-index: var(--screenshots-low-layer);
}
.mover-target.direction-right {
cursor: ew-resize;
height: 100%;
right: -30px;
top: 0;
width: 60px;
z-index: var(--screenshots-low-layer);
}
.mover-target.direction-bottomLeft {
bottom: -30px;
cursor: nesw-resize;
height: 60px;
left: -30px;
width: 60px;
}
.mover-target.direction-bottom {
bottom: -30px;
cursor: ns-resize;
height: 60px;
inset-inline-start: 0;
width: 100%;
z-index: var(--screenshots-low-layer);
}
.mover-target.direction-bottomRight {
bottom: -30px;
cursor: nwse-resize;
height: 60px;
right: -30px;
width: 60px;
}
.mover-target:hover .mover {
transform: scale(1.05);
}
.mover {
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
transition: transform 125ms cubic-bezier(0.07, 0.95, 0, 1);
position: relative;
height: 16px;
width: 16px;
pointer-events: none;
@media (forced-colors) {
background-color: ButtonText;
}
}
.small-selection .mover {
height: 10px;
width: 10px;
}