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);
}
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);
}
#status-card {
margin: var(--space-large);
background-color: initial;
color: initial;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-medium);
&.is-enabled {
background-color: var(--status-card-connected-background-color);
color: #fff;
}
}
.status-card-section {
margin: var(--space-large);
}
.status-card-section-item {
display: flex;
gap: var(--space-small);
}
.status-card-section-title {
margin: 0;
margin-bottom: var(--space-small);
}
.status-card-icon {
background-repeat: no-repeat;
background-size: cover;
-moz-context-properties: fill;
fill: currentColor;
}
.status-card-divider {
margin-block: var(--space-large);
border-block-start: 1px solid var(--border-color);
}
#connection-wrapper {
display: flex;
align-items: center;
gap: var(--space-large);
}
#connection-icon {
width: 48px;
height: 48px;
background-image: url("chrome://browser/content/ipprotection/assets/ipprotection-connection-off.svg");
&.is-enabled {
background-image: url("chrome://browser/content/ipprotection/assets/ipprotection-connection-on.svg");
}
}
#connection-details-and-toggle {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: space-between;
}
#connection-details {
display: flex;
flex-direction: column;
}
#connection-time {
margin: 0;
}
#location-title-icon {
display: flex;
width: var(--icon-size-small);
height: var(--icon-size-small);
background-image: url("chrome://global/skin/icons/info.svg");
}
#location-flag {
width: var(--icon-size-small);
height: var(--icon-size-small);
}
#upgrade-vpn-content {
display: flex;
flex-direction: column;
padding: var(--space-small) var(--space-large);
}
#upgrade-vpn-title {
margin: 0;
}
#upgrade-vpn-button {
align-self: end;
}
#signed-out-vpn-content {
display: flex;
flex-direction: column;
padding: var(--space-medium) var(--space-large) var(--space-small);
}
#sign-in-vpn {
align-self: end;
}
@media (prefers-color-scheme: dark) {
#signed-out-vpn-img {
}
}