overlay.css (6802B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @import url("chrome://global/skin/in-content/common.css"); 6 7 :host { 8 display: contents; 9 10 --hover-highlight-background-color: var(--color-white-alpha-20); 11 12 /* These z-indexes are used to correctly layer elements in the screenshots overlay */ 13 --screenshots-lowest-layer: 1; 14 --screenshots-low-layer: 2; 15 --screenshots-high-layer: 3; 16 --screenshots-highest-layer: 4; 17 } 18 19 [hidden] { 20 display: none !important; 21 } 22 23 #screenshots-component { 24 position: absolute; 25 inset: 0; 26 font: message-box; 27 user-select: none; 28 touch-action: none; 29 pointer-events: auto; 30 cursor: crosshair; 31 32 &[dragging] { 33 cursor: grabbing; 34 } 35 36 &[resizing] { 37 position: fixed; 38 width: 100% !important; 39 height: 100% !important; 40 } 41 } 42 43 #selection-container { 44 overflow: clip; 45 position: absolute; 46 inset: 0; 47 pointer-events: none; 48 } 49 50 #preview-container { 51 overflow: clip; 52 display: flex; 53 flex-direction: column; 54 align-items: center; 55 justify-content: center; 56 position: sticky; 57 top: 0; 58 inset-inline: 0; 59 width: 100vw; 60 height: 100vh; 61 background-color: var(--background-color-overlay); 62 } 63 64 #buttons-container { 65 position: absolute; 66 margin: 10px 0; 67 cursor: auto; 68 z-index: var(--screenshots-highest-layer); 69 } 70 71 #selection-size, 72 #buttons-container { 73 padding: 4px; 74 background-color: var(--background-color-canvas); 75 color: var(--text-color); 76 border-radius: var(--border-radius-small); 77 } 78 79 #selection-size { 80 border: var(--border-width) solid var(--border-color); 81 box-shadow: var(--box-shadow-popup); 82 } 83 84 .buttons-wrapper, 85 #selection-size-container { 86 display: flex; 87 align-items: center; 88 justify-content: center; 89 } 90 91 .screenshots-button { 92 display: inline-flex; 93 align-items: center; 94 justify-content: center; 95 gap: var(--space-xsmall); 96 cursor: pointer; 97 text-align: center; 98 user-select: none; 99 white-space: nowrap; 100 z-index: var(--screenshots-highest-layer); 101 min-width: 32px; 102 margin-inline: 4px; 103 } 104 105 #selection-size-container { 106 width: 100%; 107 height: 100%; 108 pointer-events: none; 109 z-index: var(--screenshots-lowest-layer); 110 } 111 112 #screenshots-cancel-button { 113 margin-top: 20px; 114 border-color: #fff; 115 color: #fff; 116 117 @media (forced-colors) { 118 background-color: var(--button-background-color); 119 color: var(--button-text-color); 120 border-color: var(--button-border-color); 121 } 122 } 123 124 #screenshots-cancel-button:hover { 125 background-color: white; 126 color: #000; 127 128 @media (forced-colors) { 129 background-color: var(--button-background-color-hover); 130 color: var(--button-text-color-hover); 131 border-color: var(--button-border-color-hover); 132 } 133 } 134 135 .screenshots-button > img { 136 -moz-context-properties: fill; 137 fill: currentColor; 138 width: 16px; 139 height: 16px; 140 pointer-events: none; 141 } 142 143 .screenshots-button > label { 144 pointer-events: none; 145 } 146 147 #cancel > img { 148 content: url("chrome://global/skin/icons/close.svg"); 149 } 150 151 #copy > img { 152 content: url("chrome://global/skin/icons/edit-copy.svg"); 153 } 154 155 #download > img { 156 content: url("chrome://browser/skin/downloads/downloads.svg"); 157 } 158 159 #face-container { 160 position: relative; 161 162 /* 163 * The overlay always darkens the underlying page, regardless of light/dark settings. 164 * So we hard-code these colors to be visible against a dark background. 165 */ 166 .face-line-color { 167 fill: #fff; 168 } 169 .face-pupil-color { 170 fill: #000; 171 } 172 } 173 174 .preview-instructions { 175 display: flex; 176 align-items: center; 177 justify-content: center; 178 animation: pulse 125ms cubic-bezier(0.07, 0.95, 0, 1); 179 color: #fff; 180 font-size: 24px; 181 line-height: 32px; 182 text-align: center; 183 padding: 20px; 184 width: 400px; 185 186 @media (forced-colors) { 187 color: CanvasText; 188 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 189 background-color: Canvas; 190 } 191 } 192 193 #hover-highlight { 194 animation: fade-in 125ms forwards cubic-bezier(0.07, 0.95, 0, 1); 195 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 196 background: var(--hover-highlight-background-color); 197 border: 2px dashed rgba(255, 255, 255, 0.4); 198 border-radius: 1px; 199 box-sizing: border-box; 200 pointer-events: none; 201 position: absolute; 202 z-index: var(--screenshots-high-layer); 203 } 204 205 #top-background { 206 top: 0; 207 left: 0; 208 width: 100%; 209 } 210 211 #left-background { 212 left: 0; 213 } 214 215 #bottom-background { 216 left: 0; 217 width: 100%; 218 } 219 220 .bghighlight { 221 background-color: var(--background-color-overlay); 222 position: absolute; 223 overflow: clip; 224 pointer-events: none; 225 /* FIXME(bug 1859421): This shouldn't be needed */ 226 z-index: -1; 227 } 228 229 .highlight { 230 border: 2px dashed rgba(255, 255, 255, 0.8); 231 box-sizing: border-box; 232 cursor: move; 233 position: absolute; 234 pointer-events: auto; 235 z-index: var(--screenshots-lowest-layer); 236 outline-offset: 8px; 237 } 238 239 .mover-target { 240 display: flex; 241 align-items: center; 242 justify-content: center; 243 position: absolute; 244 z-index: var(--screenshots-high-layer); 245 pointer-events: auto; 246 outline-offset: -15px; 247 } 248 249 .mover-target.direction-topLeft { 250 cursor: nwse-resize; 251 height: 60px; 252 left: -30px; 253 top: -30px; 254 width: 60px; 255 } 256 257 .mover-target.direction-top { 258 cursor: ns-resize; 259 height: 60px; 260 inset-inline-start: 0; 261 top: -30px; 262 width: 100%; 263 z-index: var(--screenshots-low-layer); 264 } 265 266 .mover-target.direction-topRight { 267 cursor: nesw-resize; 268 height: 60px; 269 right: -30px; 270 top: -30px; 271 width: 60px; 272 } 273 274 .mover-target.direction-left { 275 cursor: ew-resize; 276 height: 100%; 277 left: -30px; 278 top: 0; 279 width: 60px; 280 z-index: var(--screenshots-low-layer); 281 } 282 283 .mover-target.direction-right { 284 cursor: ew-resize; 285 height: 100%; 286 right: -30px; 287 top: 0; 288 width: 60px; 289 z-index: var(--screenshots-low-layer); 290 } 291 292 .mover-target.direction-bottomLeft { 293 bottom: -30px; 294 cursor: nesw-resize; 295 height: 60px; 296 left: -30px; 297 width: 60px; 298 } 299 300 .mover-target.direction-bottom { 301 bottom: -30px; 302 cursor: ns-resize; 303 height: 60px; 304 inset-inline-start: 0; 305 width: 100%; 306 z-index: var(--screenshots-low-layer); 307 } 308 309 .mover-target.direction-bottomRight { 310 bottom: -30px; 311 cursor: nwse-resize; 312 height: 60px; 313 right: -30px; 314 width: 60px; 315 } 316 317 .mover-target:hover .mover { 318 transform: scale(1.05); 319 } 320 321 .mover { 322 background-color: white; 323 border-radius: var(--border-radius-circle); 324 box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); 325 transition: transform 125ms cubic-bezier(0.07, 0.95, 0, 1); 326 position: relative; 327 height: 16px; 328 width: 16px; 329 pointer-events: none; 330 331 @media (forced-colors) { 332 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 333 background-color: ButtonText; 334 } 335 } 336 337 .small-selection .mover { 338 height: 10px; 339 width: 10px; 340 }