Are we Design Tokens yet?

browser/components/privatebrowsing/content/private-browsing-mask-intro.css

Propagation: 100%

Back to Home

/* 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/. */

/* 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: 16%;
  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: intro-kit var(--intro-kit-duration, 1.6s) both;
}

.circle.playing .mask {
  opacity: 0;
  animation: intro-mask-fade-in var(--intro-fade-duration, 0.6s) ease var(--intro-kit-duration, 1.6s) both;
}

@keyframes intro-kit {
  0%,
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-6%);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(150%);
  }
}

@keyframes intro-mask-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Back to Home