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` `;