import { EMBED_CARD_HEIGHT, EMBED_CARD_MIN_WIDTH, EMBED_CARD_WIDTH, } from '@blocksuite/affine-shared/consts'; import { css, html } from 'lit'; import { embedNoteContentStyles } from '../common/embed-note-content-styles.js'; export const styles = css` .affine-embed-linked-doc-block { box-sizing: border-box; display: flex; width: ${EMBED_CARD_WIDTH.horizontal}px; border-radius: 8px; border: 1px solid var(--affine-background-tertiary-color); opacity: var(--add, 1); background: var(--affine-background-primary-color); user-select: none; position: relative; } .affine-embed-linked-doc-block.horizontal { width: ${EMBED_CARD_WIDTH.horizontal}px; height: ${EMBED_CARD_HEIGHT.horizontal}px; } .affine-embed-linked-doc-content { flex-grow: 1; height: 100%; display: flex; flex-direction: column; align-self: stretch; gap: 4px; padding: 12px; border-radius: var(--1, 0px); opacity: var(--add, 1); } .affine-embed-linked-doc-content-title { display: flex; flex-direction: row; gap: 8px; align-items: center; align-self: stretch; padding: var(--1, 0px); border-radius: var(--1, 0px); opacity: var(--add, 1); } .affine-embed-linked-doc-content-title-icon { display: flex; width: 16px; height: 16px; justify-content: center; align-items: center; } .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; } .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; } .affine-embed-linked-doc-card-content-reload-button svg { width: 12px; height: 12px; fill: var(--affine-background-primary-color); } .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; color: var(--affine-brand-color); 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; opacity: var(--add, 1); 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 4px var(--1, 0px) var(--1, 0px); } .affine-embed-linked-doc-block:not(.in-canvas) { width: 100%; min-width: calc(min(${EMBED_CARD_MIN_WIDTH}px, 100%)); } .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 { height: ${EMBED_CARD_HEIGHT.horizontalThin}px; .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 { height: ${EMBED_CARD_HEIGHT.list}px; .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 { width: ${EMBED_CARD_WIDTH.vertical}px; height: ${EMBED_CARD_HEIGHT.vertical}px; 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; max-height: 320px; } .affine-embed-linked-doc-content-date { flex-grow: unset; align-items: center; } } .affine-embed-linked-doc-block.cube { width: ${EMBED_CARD_WIDTH.cube}px; height: ${EMBED_CARD_HEIGHT.cube}px; .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` `;