import { embedNoteContentStyles } from '@blocksuite/affine-block-embed';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit';
export const styles = css`
.affine-embed-linked-doc-block {
box-sizing: border-box;
display: flex;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none;
position: relative;
}
.affine-embed-linked-doc-block.in-canvas {
border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
background: ${unsafeCSSVarV2('layer/background/linkedDocOnEdgeless')};
}
.affine-embed-linked-doc-content {
flex-grow: 1;
height: 100%;
display: flex;
flex-direction: column;
align-self: stretch;
gap: 4px;
padding: 12px;
max-width: 100%;
}
.affine-embed-linked-doc-content-title {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
align-self: stretch;
}
.affine-embed-linked-doc-content-title-icon {
display: flex;
width: 16px;
height: 16px;
justify-content: center;
align-items: center;
color: ${unsafeCSSVarV2('icon/primary')};
}
.affine-embed-linked-doc-content-title-icon img,
.affine-embed-linked-doc-content-title-icon object,
.affine-embed-linked-doc-content-title-icon svg {
width: 16px;
height: 16px;
fill: var(--affine-background-primary-color);
}
.affine-embed-linked-doc-content-title-text {
flex-grow: 1;
position: relative;
height: 22px;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
color: var(--affine-text-primary-color);
font-family: var(--affine-font-family);
font-size: var(--affine-font-sm);
font-style: normal;
font-weight: 600;
line-height: 22px;
}
.affine-embed-linked-doc-content-note.render {
display: none;
overflow: hidden;
pointer-events: none;
flex: 1;
}
${embedNoteContentStyles}
.affine-embed-linked-doc-content-note.alias,
.affine-embed-linked-doc-content-note.default {
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
position: relative;
white-space: normal;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
color: var(--affine-placeholder-color);
font-family: var(--affine-font-family);
font-size: var(--affine-font-xs);
font-style: normal;
font-weight: 400;
line-height: 20px;
p {
padding: 0 2px;
}
}
.affine-embed-linked-doc-content-note.alias {
color: var(--affine-text-primary-color);
}
.affine-embed-linked-doc-card-content-reload,
.affine-embed-linked-doc-content-date {
display: flex;
height: 20px;
align-items: flex-end;
justify-content: flex-start;
gap: 8px;
width: max-content;
max-width: 100%;
line-height: 20px;
}
.affine-embed-linked-doc-card-content-reload-button {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
cursor: pointer;
color: ${unsafeCSSVarV2('button/primary')};
}
.affine-embed-linked-doc-card-content-reload-button svg {
width: 12px;
height: 12px;
}
.affine-embed-linked-doc-card-content-reload-button > span {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--affine-font-family);
font-size: var(--affine-font-xs);
font-style: normal;
font-weight: 500;
line-height: 20px;
}
.affine-embed-linked-doc-content-date > span {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
color: var(--affine-text-secondary-color);
font-family: var(--affine-font-family);
font-size: var(--affine-font-xs);
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.affine-embed-linked-doc-banner {
margin: 12px 12px 0px 0px;
width: 204px;
max-width: 100%;
height: 102px;
pointer-events: none;
}
.affine-embed-linked-doc-banner img,
.affine-embed-linked-doc-banner object,
.affine-embed-linked-doc-banner svg {
width: 204px;
max-width: 100%;
height: 102px;
object-fit: cover;
border-radius: 4px;
}
.affine-embed-linked-doc-block.loading {
.affine-embed-linked-doc-content-date {
display: none;
}
}
.affine-embed-linked-doc-block:not(.loading):not(.note-empty) {
.affine-embed-linked-doc-content-note.render {
display: block;
}
.affine-embed-linked-doc-content-note.default {
display: none;
}
}
.affine-embed-linked-doc-block:not(.loading):not(.banner-empty) {
.affine-embed-linked-doc-banner.default {
display: none;
}
}
.affine-embed-linked-doc-block:not(.loading):not(.deleted):not(.error):not(
.empty
).banner-empty {
.affine-embed-linked-doc-content {
width: 100%;
height: 100%;
}
.affine-embed-linked-doc-banner.default {
display: none;
}
}
.affine-embed-linked-doc-block:not(.loading).error,
.affine-embed-linked-doc-block:not(.loading).deleted {
background: var(--affine-background-secondary-color);
.affine-embed-linked-doc-content-note.render {
display: none;
}
.affine-embed-linked-doc-content-note.default {
display: block;
}
.affine-embed-linked-doc-content-date {
display: none;
}
.affine-embed-linked-doc-banner.default {
display: block;
}
}
.affine-embed-linked-doc-block.horizontalThin {
.affine-embed-linked-doc-banner {
height: 66px;
}
.affine-embed-linked-doc-banner img,
.affine-embed-linked-doc-banner object,
.affine-embed-linked-doc-banner svg {
height: 66px;
}
.affine-embed-linked-doc-content {
gap: 12px;
}
}
.affine-embed-linked-doc-block.list {
.affine-embed-linked-doc-content {
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.affine-embed-linked-doc-content-title {
width: calc(100% - 204px);
}
.affine-embed-linked-doc-content-note {
display: none !important;
}
.affine-embed-linked-doc-content-date {
width: 204px;
justify-content: flex-end;
}
.affine-embed-linked-doc-banner {
display: none !important;
}
}
.affine-embed-linked-doc-block.vertical {
flex-direction: column-reverse;
.affine-embed-linked-doc-content {
width: 100%;
}
.affine-embed-linked-doc-banner {
width: 340px;
height: 170px;
margin-left: 12px;
}
.affine-embed-linked-doc-banner img,
.affine-embed-linked-doc-banner object,
.affine-embed-linked-doc-banner svg {
width: 340px;
height: 170px;
}
}
.affine-embed-linked-doc-block.vertical:not(.loading):not(.deleted):not(
.error
):not(.empty).banner-empty {
.affine-embed-linked-doc-content {
width: 100%;
height: 100%;
}
.affine-embed-linked-doc-banner.default {
display: none;
}
.affine-embed-linked-doc-content-note {
-webkit-line-clamp: 16;
}
.affine-embed-linked-doc-content-date {
flex-grow: unset;
align-items: center;
}
}
.affine-embed-linked-doc-block.cube {
.affine-embed-linked-doc-content {
width: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}
.affine-embed-linked-doc-content-title {
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.affine-embed-linked-doc-content-title-text {
-webkit-line-clamp: 2;
}
.affine-embed-linked-doc-content-note {
display: none !important;
}
.affine-embed-linked-doc-banner {
display: none !important;
}
}
`;
export const LinkedDocDeletedIcon = html` `;
export const LightLinkedPageEmptySmallBanner = html` `;
export const DarkLinkedPageEmptySmallBanner = html` `;
export const LightLinkedPageEmptyLargeBanner = html``;
export const DarkLinkedPageEmptyLargeBanner = html` `;
export const LightLinkedPageDeletedSmallBanner = html` `;
export const DarkLinkedPageDeletedSmallBanner = html` `;
export const LightLinkedPageDeletedLargeBanner = html` `;
export const DarkLinkedPageDeletedLargeBanner = html` `;
export const LightLinkedEdgelessEmptySmallBanner = html` `;
export const DarkLinkedEdgelessEmptySmallBanner = html` `;
export const LightLinkedEdgelessEmptyLargeBanner = html` `;
export const DarkLinkedEdgelessEmptyLargeBanner = html` `;
export const LightLinkedEdgelessDeletedSmallBanner = html` `;
export const DarkLinkedEdgelessDeletedSmallBanner = html` `;
export const LightLinkedEdgelessDeletedLargeBanner = html` `;
export const DarkLinkedEdgelessDeletedLargeBanner = html` `;