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
@import "chrome://global/skin/global.css";
:host {
--status-card-connected-background-color: var(--color-violet-90);
--connection-shield-color: var(--panel-background);
--connection-shield-off-background-color: var(--icon-color-critical);
--connection-shield-on-background-color: var(--color-accent-primary);
}
hr {
border-style: solid none none none;
border-color: var(--panel-separator-color);
margin: var(--panel-separator-margin);
}
#ipprotection-content-wrapper {
display: flex;
flex-direction: column;
padding-inline: var(--panel-subview-body-padding-inline);
padding-block: var(--panel-subview-body-padding-block);
}
.vpn-top-content {
margin-inline: var(--space-large);
margin-block-start: var(--space-small);
}
.vpn-status-group {
position: relative;
margin: var(--space-large);
overflow: hidden;
}
.is-enabled {
color: #fff;
background-color: var(--status-card-connected-background-color);
}
#status-card {
--shield-bgcolor: var(--connection-shield-off-background-color);
--box-icon-fill: var(--connection-shield-color);
--box-icon-stroke: var(--shield-bgcolor);
-moz-context-properties: fill, stroke;
/**
* moz-box-group changes the border of items based on its position in the group.
* Undo it to preserve the border radius even though the animation rings are
* loaded first in the group.
*/
--box-border-radius-start: initial;
fill: var(--connection-shield-color);
stroke: var(--shield-bgcolor);
&.is-enabled {
--shield-bgcolor: var(--connection-shield-on-background-color);
}
}
#status-card-animation {
display: block;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
#animation-rings {
display: block;
width: 100%;
height: 100%;
contain: strict;
/**
* A hacky attempt at centering the rings with the globe icon.
* It makes some assumptions about the icon size and padding pixels used in moz-box-item.
* The rings are 200px in height and width, so they have a radius of 100px.
* Additional px gap is merely for alignment and not tied to any element.
*/
background-position-x: calc(-100px + var(--icon-size-xlarge) + var(--space-large) - 15px);
background-position-y: calc(-100px + var(--icon-size-xlarge) + var(--space-large) - 13px);
background-repeat: no-repeat;
&:dir(rtl) {
/* Shift by approximately 100% of the element's width to move the rings to the opposite side. */
background-position-x: calc(100% + var(--icon-size-xlarge) + var(--space-large) + 28px);
}
@media (prefers-reduced-motion: reduce) {
display: none;
}
}
#location-wrapper {
--box-icon-fill: currentColor;
}
.vpn-bottom-content {
display: flex;
flex-direction: column;
padding: var(--space-small) var(--space-large);
}
.vpn-subtitle {
margin: 0;
}
.vpn-button {
align-self: end;
}
#signed-out-vpn-title {
margin-bottom: 0;
}
#signed-out-vpn-content {
display: flex;
flex-direction: column;
padding: var(--space-medium) var(--space-large) var(--space-small);
}
@media (prefers-color-scheme: dark) {
#signed-out-vpn-img {
}
}