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
/* stylelint-disable max-nesting-depth */
#backgroud-image {
position: absolute;
inset: 0;
z-index: -2;
background: light-dark(
url("chrome://browser/content/contentsharing/background-light.svg"),
url("chrome://browser/content/contentsharing/background-dark.svg")
)
center / cover no-repeat;
background-position: bottom 0 left 0;
background-size: initial;
}
#plain-backgroud {
position: absolute;
z-index: -2;
left: 50%;
width: 50%;
height: 100%;
background-color: var(--background-color-canvas);
}
.container {
--modal-size: var(--dimension-400);
display: flex;
width: calc(2 * var(--modal-size));
height: var(--modal-size);
padding: var(--space-large);
.preview {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
moz-card {
--card-padding: var(--space-xlarge);
width: 100%;
/* To center the card, the right margin needs to include the .container padding */
margin: calc(2 * var(--space-xxlarge));
margin-inline-end: calc(2 * var(--space-xxlarge) + var(--space-large));
}
.share-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--card-border-color);
margin-bottom: var(--space-large);
padding: 0 var(--space-small) var(--space-large);
.share-title {
font-size: var(--font-size-heading-medium);
font-weight: var(--font-weight-heading);
}
.share-count {
display: inline-flex;
gap: var(--space-xsmall);
align-items: center;
color: var(--text-color-deemphasized);
.share-icon {
-moz-context-properties: fill, stroke;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
fill: var(--text-color-deemphasized);
width: var(--icon-size-xsmall);
height: var(--icon-size-xsmall);
}
}
}
.link-preview-list {
display: flex;
flex-direction: column;
gap: var(--space-large);
.link {
display: inline-flex;
gap: var(--space-medium);
.link-icon {
/* Needed if the icon is bookmark folder */
-moz-context-properties: fill, stroke;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
fill: var(--text-color-deemphasized);
width: var(--icon-size-small);
height: var(--icon-size-small);
}
.link-title {
overflow: hidden;
text-overflow: ellipsis;
max-width: 40ch;
text-wrap: nowrap;
}
}
}
}
.description {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 50%;
#close-button {
align-self: flex-end;
}
.description-content {
display: flex;
flex-direction: column;
gap: var(--space-xxlarge);
/* To center the content, the left padding needs to include the .container padding */
padding: calc(2 * var(--space-xxlarge));
padding-inline-start: calc(2 * var(--space-xxlarge) + var(--space-large));
moz-button-group {
justify-content: flex-start;
}
}
/* Match the #close-button height so the .description-content is centered */
.empty {
height: var(--button-min-height);
}
}
}