mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-10 20:52:12 +09:00
413 lines
7.4 KiB
CSS
413 lines
7.4 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
.embed {
|
|
position: relative;
|
|
display: inline-grid;
|
|
inline-size: fit-content;
|
|
max-inline-size: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.embedFull {
|
|
background: var(--background-primary);
|
|
border: 0.0625rem solid var(--background-modifier-accent);
|
|
}
|
|
|
|
.gridContainer {
|
|
width: 100%;
|
|
}
|
|
|
|
.grid {
|
|
overflow: hidden;
|
|
padding: 0.75rem 0.75rem 0.875rem 0.75rem;
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
}
|
|
|
|
.grid.hasThumbnail {
|
|
grid-template-columns: auto min-content;
|
|
}
|
|
|
|
.embedContent {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.embedContent > *:first-child {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.embedLink {
|
|
text-decoration: var(--link-decoration);
|
|
cursor: pointer;
|
|
color: var(--text-link);
|
|
}
|
|
|
|
.embedLink code {
|
|
color: var(--text-link);
|
|
}
|
|
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.embedLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.embedProvider {
|
|
font-size: 0.75em;
|
|
line-height: 1.333333;
|
|
grid-column: 1 / 1;
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.embedProvider .embedLink {
|
|
color: inherit;
|
|
}
|
|
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.embedProvider
|
|
.embedLink:hover {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.embedAuthor {
|
|
display: flex;
|
|
align-items: center;
|
|
grid-column: 1 / 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.embedAuthorName {
|
|
font-size: 0.875em;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.embedAuthorNameLink {
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.embedAuthorNameLink:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.embedAuthorIcon {
|
|
flex-shrink: 0;
|
|
margin-right: 0.5rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.embedIconPending {
|
|
opacity: 0;
|
|
}
|
|
|
|
.embedTitle {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
grid-column: 1 / 1;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.embedDescription {
|
|
font-size: 0.875em;
|
|
line-height: 1.285714;
|
|
white-space: pre-line;
|
|
grid-column: 1 / 1;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.embedFields {
|
|
display: grid;
|
|
grid-column: 1 / 1;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 0.5rem;
|
|
min-width: 0;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.embedField {
|
|
min-width: 0;
|
|
}
|
|
|
|
.embedFieldName {
|
|
font-size: 0.875em;
|
|
line-height: 1.285714;
|
|
font-weight: 600;
|
|
margin-bottom: 0.125rem;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.embedFieldValue {
|
|
font-size: 0.875em;
|
|
line-height: 1.285714;
|
|
white-space: pre-line;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.embedAuthorName,
|
|
.embedAuthorNameLink,
|
|
.embedDescription,
|
|
.embedFieldName,
|
|
.embedFieldValue,
|
|
.embedFooterText,
|
|
.embedLink,
|
|
.embedProvider,
|
|
.embedTitle {
|
|
text-align: start;
|
|
unicode-bidi: plaintext;
|
|
}
|
|
|
|
.embedMedia {
|
|
grid-column: 1 / 1;
|
|
border-radius: 0.25rem;
|
|
contain: paint;
|
|
margin-top: 0.25rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hasThumbnail .embedMedia {
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
.embedThumbnail {
|
|
grid-row: 1 / 8;
|
|
grid-column: 2 / 2;
|
|
margin-left: 1rem;
|
|
margin-top: 0.5rem;
|
|
flex-shrink: 0;
|
|
justify-self: end;
|
|
max-width: 5rem;
|
|
height: 5rem;
|
|
border-radius: 0.25rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.embedFooter {
|
|
display: flex;
|
|
align-items: center;
|
|
grid-column: 1 / 1;
|
|
}
|
|
|
|
.hasThumbnail .embedFooter {
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
.embedFooterText {
|
|
font-size: 0.75em;
|
|
line-height: 1.333333;
|
|
font-weight: 600;
|
|
color: var(--text-chat);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.embedFooterIcon {
|
|
flex-shrink: 0;
|
|
margin-right: 0.5rem;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
object-fit: contain;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.embedFooterSeparator {
|
|
width: 0.25rem;
|
|
height: 0.25rem;
|
|
border-radius: 50%;
|
|
background-color: var(--text-chat);
|
|
margin: 0 0.25rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.embedGifvContainer {
|
|
min-width: 0;
|
|
}
|
|
|
|
.container {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.mediaFrame {
|
|
position: relative;
|
|
display: inline-block;
|
|
inline-size: fit-content;
|
|
max-inline-size: min(100%, var(--message-media-max-width, 34.375rem));
|
|
max-width: 100%;
|
|
}
|
|
|
|
.suppressButton {
|
|
order: 2;
|
|
display: flex;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: flex-start;
|
|
margin-top: 0.25rem;
|
|
margin-left: 0.375rem;
|
|
color: var(--text-tertiary);
|
|
transition: color 150ms ease;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mediaSuppressButton {
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
left: 100%;
|
|
margin-left: 0.375rem;
|
|
margin-top: 0;
|
|
z-index: 12;
|
|
}
|
|
|
|
.container > :not(.suppressButton) {
|
|
order: 1;
|
|
}
|
|
|
|
:global(:where(html.window-focused, html.unfocused-fully-interactive):not(.window-focus-activation-guard))
|
|
.suppressButton:hover {
|
|
color: var(--status-danger);
|
|
}
|
|
|
|
.blueskyMediaEngagement {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
align-self: flex-start;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.blueskyMediaEngagement .embedMedia {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.blueskyGalleryMedia {
|
|
width: 100%;
|
|
}
|
|
|
|
.blueskyGalleryMedia .embedMedia {
|
|
width: 100%;
|
|
}
|
|
|
|
.blueskyMediaEngagement .blueskyEngagement {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.blueskyNestedEmbedContainer {
|
|
width: 100%;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.blueskyNestedEmbed {
|
|
--bluesky-nested-scale: 0.9;
|
|
--bluesky-nested-avatar-size: calc(1.5rem * var(--bluesky-nested-scale));
|
|
--bluesky-nested-avatar-gap: calc(0.5rem * var(--bluesky-nested-scale));
|
|
width: 100%;
|
|
border: 0.0625rem solid var(--background-modifier-accent);
|
|
border-radius: 0.375rem;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.blueskyNestedEmbed .grid {
|
|
padding: calc(0.75rem * var(--bluesky-nested-scale)) calc(0.75rem * var(--bluesky-nested-scale))
|
|
calc(0.875rem * var(--bluesky-nested-scale)) calc(0.75rem * var(--bluesky-nested-scale));
|
|
}
|
|
|
|
.blueskyNestedEmbed .embedContent {
|
|
gap: calc(0.5rem * var(--bluesky-nested-scale));
|
|
}
|
|
|
|
.blueskyNestedEmbed .embedContent > *:first-child {
|
|
margin-top: calc(0.25rem * var(--bluesky-nested-scale));
|
|
}
|
|
|
|
.blueskyNestedEmbed .embedProvider {
|
|
font-size: calc(0.75em * var(--bluesky-nested-scale));
|
|
line-height: 1.333333;
|
|
}
|
|
|
|
.blueskyNestedEmbed .embedAuthorName,
|
|
.blueskyNestedEmbed .embedAuthorNameLink {
|
|
font-size: calc(0.875em * var(--bluesky-nested-scale));
|
|
line-height: 1.285714;
|
|
}
|
|
|
|
.blueskyNestedEmbed .embedAuthorIcon {
|
|
width: var(--bluesky-nested-avatar-size);
|
|
height: var(--bluesky-nested-avatar-size);
|
|
margin-right: var(--bluesky-nested-avatar-gap);
|
|
}
|
|
|
|
.blueskyNestedEmbed .embedDescription {
|
|
font-size: calc(0.875em * var(--bluesky-nested-scale));
|
|
line-height: 1.285714;
|
|
}
|
|
|
|
.blueskyNestedEmbed .embedMedia {
|
|
margin-top: calc(0.25rem * var(--bluesky-nested-scale));
|
|
}
|
|
|
|
.blueskyNestedMediaEngagement {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.blueskyNestedMediaEngagement .embedMedia {
|
|
width: 100%;
|
|
}
|
|
|
|
.blueskyEngagement {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1rem;
|
|
border-top: 0.0625rem solid var(--background-modifier-hover);
|
|
padding-top: 0.75rem;
|
|
}
|
|
|
|
.blueskyEngagementItem {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.875em;
|
|
line-height: 1.285714;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.blueskyEngagementItem strong {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|