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
/* Shadow styles for <private-browsing-mask-intro>, linked by both the component
* and the Storybook story. The host sets `playing` when the intro should run;
* the default state is just the mask. */
:host {
display: inline-block;
--icon-mask-color: var(--color-violet-50);
}
.circle {
position: relative;
/* clip-path masks the kit to the circle even while it is transformed. */
overflow: hidden;
clip-path: circle(50%);
border-radius: var(--border-radius-circle);
height: var(--size-image-large);
width: var(--size-image-large);
background: var(--icon-mask-color);
}
.kit,
.mask {
position: absolute;
inset: 0;
background-repeat: no-repeat;
}
.kit {
display: none;
width: 100%;
height: 130%;
left: 0;
top: 18%;
background-image: url("chrome://browser/skin/privatebrowsing/kit-pbw.svg");
background-position: center top;
background-size: auto 120%;
}
.mask {
opacity: 1;
-moz-context-properties: fill;
fill: var(--icon-mask-color);
background-image: url("chrome://browser/skin/privatebrowsing/pbm-logo.svg");
background-position: center center;
background-size: contain;
}
.circle.playing .kit {
display: block;
animation: pbw-kit-intro 3s both;
}
.circle.playing .mask {
opacity: 0;
animation: pbw-mask-fade-in 0.5s ease 2.5s both;
}
/* Rest inside the window, a small bounce that flows straight into the dive out. */
@keyframes pbw-kit-intro {
0%,
55% {
transform: translateY(0);
}
70% {
transform: translateY(-8%);
animation-timing-function: ease-in;
}
100% {
transform: translateY(150%);
}
}
@keyframes pbw-mask-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}