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 file,
/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens */
.privacy {
@include widget-base-style;
padding: var(--space-large);
&.medium-widget {
grid-row: span 2;
}
&.large-widget {
grid-row: span 4;
}
}
// Free-float the context menu in the top-right corner (mirrors FocusTimer).
.privacy-title-wrapper {
inset-block-start: var(--space-small);
inset-inline-end: var(--space-small);
inset-inline-start: auto;
margin-block-end: 0;
position: absolute;
width: auto;
}
.privacy-context-menu-wrapper {
opacity: 0;
pointer-events: none;
}
.privacy:hover,
.privacy:focus-within {
.privacy-context-menu-wrapper {
opacity: 1;
pointer-events: auto;
}
}
.privacy-body {
flex: 1;
display: flex;
flex-direction: column;
font-size: var(--font-size-small);
// Default (incl. medium no-tip): bottom-left, matching large.
align-items: flex-start;
justify-content: flex-end;
// Medium styles
.medium-widget & {
font-size: var(--font-size-xsmall);
}
.has-tip-msg.medium-widget & {
justify-content: flex-end;
flex-direction: row;
align-items: stretch;
gap: var(--space-large);
.privacy-tip, .privacy-count {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
}
// Large styles
.large-widget & {
align-items: flex-start;
justify-content: flex-end;
gap: var(--space-large);
}
// Empty state: center the image + message in the card.
.is-empty & {
align-items: center;
justify-content: center;
}
}
.privacy-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
// Stretch to the body width so the message's max-width is 75% of the card.
align-self: stretch;
gap: var(--space-medium);
.large-widget & {
gap: var(--space-large);
}
.privacy-empty-message {
margin: 0;
max-width: 75%;
}
}
.privacy-image-icon {
.medium-widget & {
max-height: var(--icon-size-xlarge)
}
.large-widget & {
max-height: calc( var(--icon-size-large) * 2 );
}
}
.privacy-count {
display: flex;
flex-direction: column;
.privacy-count-number-wrapper {
align-items: center;
display: flex;
gap: var(--space-small);
}
.privacy-count-number {
font-size: calc(var(--font-size-root) * 2.75); // ~42px
.large-widget & {
font-size: calc(var(--font-size-root) * 4.5); // ~67px
}
}
}
// Divider between the count and tip sections. As a flex item between two
// equal (flex: 1) sections it stays optically centered, unlike a border on one
// container. align-self: stretch fills the cross axis: full height in the
// medium row, full width in the large column.
.privacy-divider {
align-self: stretch;
margin: 0;
border: 0;
background-color: var(--border-color);
.medium-widget & {
inline-size: var(--border-width);
}
.large-widget & {
block-size: var(--border-width);
}
}
.privacy-tip {
.large-widget & {
align-items: center;
display: flex;
gap: var(--space-small);
}
.privacy-tip-message {
margin: 0;
}
}