@charset "UTF-8"; /* src/ddc-library/settings-styles.scss */ .ddc_ink_primary-2-button-set .setting-item-info { display: none; } .ddc_ink_primary-2-button-set .setting-item-control > * { flex-grow: 1; font-size: var(--font-ui-medium); height: unset; line-height: 2em; width: 50%; } .ddc_ink_modal-actions .setting-item-info { display: none; } /* src/components/dom-components/support-button-set.scss */ .ddc_ink_support-btn-set .setting-item { border-top: none !important; } .ddc_ink_support-btn-set .setting-item .setting-item-info { flex-grow: 2; text-align: right; } .ddc_ink_support-btn-set .setting-item .setting-item-control { flex-grow: 0; } .ddc_ink_support-btn-set .ddc_ink_tertiary-button { color: var(--text-subtle); background: none; box-shadow: none; padding-inline: var(--size-4-1); } .ddc_ink_support-btn-set .ddc_ink_tertiary-button:hover { color: var(--text-normal); } .ddc_ink_support-btn-set .ddc_ink_secondary-button { color: var(--text-normal); } .ddc_ink_support-btn-set .ddc_ink_secondary-button svg path { fill: var(--text-normal); } .ddc_ink_support-btn-set .ddc_ink_primary-button { color: var(--text-on-accent); background-color: var(--interactive-accent); } .ddc_ink_support-btn-set .ddc_ink_primary-button svg path { fill: var(--text-on-accent); } .ddc_ink_support-btn-set .ddc_ink_primary-button:hover { background-color: var(--interactive-accent-hover); } /* src/tabs/settings-tab/settings-tab.scss */ .ddc_ink_section { margin-bottom: 2em; } .ddc_ink_section details { overflow: hidden; border-style: solid; border-color: rgba(var(--callout-color), var(--callout-border-opacity)); border-width: var(--callout-border-width); border-radius: var(--callout-radius); background-color: rgba(var(--callout-color), 0.05); padding: 1em; margin-block: 1em; margin-inline: -1em; --callout-color: 255,255,255; } .ddc_ink_section details.warning { --callout-color: var(--callout-warning); } .ddc_ink_section details summary { font-weight: 600; } .ddc_ink_controls-section { padding-block-start: 0.2em; padding-block-end: 0.2em; padding-inline: 1em; margin-inline: -1em; border: none; border-radius: 10px; background-color: var(--color-base-20); } .ddc_ink_input-medium .setting-item-control input { width: 100%; } .ddc_ink_button-set { flex-wrap: wrap; row-gap: 0.5em; } .ddc_ink_button-set .setting-item-info { width: 100%; } .ddc_ink_button-set .setting-item-control { gap: 2px; flex-wrap: wrap; padding-bottom: 0.9em; } .ddc_ink_button-set .setting-item-control button { flex-grow: 1; flex-shrink: 1; } .ddc_ink_button-set .setting-item-control .ddc_ink_middle { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .ddc_ink_button-set .setting-item-control .ddc_ink_left-most { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ddc_ink_button-set .setting-item-control .ddc_ink_right-most { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ddc_ink_button-set .setting-item-control .mod-cta:disabled { box-shadow: inset 1px 1px 3px 0.5px rgba(0, 0, 0, 0.6); pointer-events: none; } /* src/components/dom-components/notice-components.scss */ .notice:has(.ddc_ink_notice) { border-radius: var(--radius-m) !important; background-color: var(--background-primary-alt) !important; border: solid 1px var(--background-modifier-border) !important; box-shadow: 0 2px 8px var(--background-modifier-box-shadow) !important; pointer-events: none; } .ddc_ink_notice { text-align: left !important; } .ddc_ink_notice p.ddc_ink_notice-label { color: var(--text-faint); font-size: var(--font-small); margin: 0; padding: 0; } .ddc_ink_notice h1 { margin-block-start: 0.1em; color: var(--text-accent); } .ddc_ink_notice p { font-size: var(--font-text-size); color: var(--text-normal); } .ddc_ink_notice blockquote { font-size: var(--font-text-size); padding: 0.5em 0.8em; margin-inline: 0; color: var(--text-accent); background-color: var(--background-primary); border-radius: var(--button-radius); display: block; outline: solid 1px var(--background-modifier-border); box-shadow: inset 0px 0px 8px var(--background-modifier-box-shadow), 0px 0px 8px var(--background-modifier-box-shadow) !important; } .ddc_ink_notice ul, .ddc_ink_notice ol { padding-inline-start: 1em; list-style-position: outside; } .ddc_ink_notice ul li, .ddc_ink_notice ol li { margin-block-end: 1ch; color: var(--text-normal); } .ddc_ink_notice ul li::marker, .ddc_ink_notice ol li::marker { color: var(--text-accent); } .ddc_ink_notice a { pointer-events: all; } .ddc_ink_notice .ddc_ink_notice-cta-bar { display: flex; flex-direction: row-reverse; justify-content: space-between; } .ddc_ink_notice .ddc_ink_notice-cta-bar Button { pointer-events: all; } .ddc_ink_notice .ddc_ink_notice-cta-bar Button.ddc_ink_tertiary-btn { color: var(--text-faint); background: none; box-shadow: none; margin-inline: 0; padding-inline: 0; padding-top: calc(var(--size-4-1) * 2); padding-bottom: 0 !important; display: inline-flex; align-items: flex-end; line-height: var(--font-ui-small) !important; } .ddc_ink_notice .ddc_ink_notice-cta-bar Button.ddc_ink_tertiary-btn:hover { color: var(--text-normal); text-decoration: underline; } .ddc_ink_notice .ddc_ink_notice-cta-bar Button.ddc_ink_primary-btn { color: var(--text-on-accent); background-color: var(--interactive-accent); } .ddc_ink_notice .ddc_ink_notice-cta-bar Button.ddc_ink_primary-btn:hover { background-color: var(--interactive-accent-hover); } /* src/components/dom-components/toggle-accordion-setting.scss */ .ddc_ink_toggle-accordion { padding: 0; } .ddc_ink_toggle-accordion .ddc_ink_toggle-accordion-header .ddc_ink_setting { padding: 0.75em 0; border-top: 1px solid var(--background-modifier-border); } .ddc_ink_toggle-accordion .ddc_ink_toggle-accordion-content { display: none; } .ddc_ink_toggle-accordion.ddc_ink_expanded { margin-inline: -1em; margin-bottom: 2em; border: none; border-radius: 10px; overflow: hidden; background-color: var(--color-base-20); } .ddc_ink_toggle-accordion.ddc_ink_expanded .ddc_ink_toggle-accordion-header { padding-block: 0em; padding-inline: 1em; margin-inline: 0; background-color: var(--background-secondary-alt); } .ddc_ink_toggle-accordion.ddc_ink_expanded .ddc_ink_toggle-accordion-header .ddc_ink_setting { border-top: none; } .ddc_ink_toggle-accordion.ddc_ink_expanded .ddc_ink_toggle-accordion-content { display: block; background-color: var(--background-primary-alt); padding-block-start: 0.8em; padding-block-end: 0; padding-inline: 1em; } /* src/tldraw/writing/writing-embed.scss */ .ddc_ink_resize-container.ddc_ink_smooth-transition { transition-property: height; transition-duration: 0.5s; transition-timing-function: ease-out; } .markdown-source-view.mod-cm6 .cm-content > .cm-preview-code-block.cm-embed-block.markdown-rendered.ddc_ink_embed-block, .markdown-source-view.mod-cm6 .cm-content > .cm-preview-code-block.cm-embed-block.markdown-rendered.ddc_ink_embed-block:hover { contain: unset !important; overflow: visible !important; box-shadow: none; } .markdown-source-view.mod-cm6 .cm-content > .cm-preview-code-block.cm-embed-block.markdown-rendered.ddc_ink_embed-block .edit-block-button, .markdown-source-view.mod-cm6 .cm-content > .cm-preview-code-block.cm-embed-block.markdown-rendered.ddc_ink_embed-block:hover .edit-block-button { display: none; } /* src/tldraw/writing/tldraw-writing-editor.scss */ .ddc_ink_drawing-editor, .ddc_ink_writing-editor { } .ddc_ink_drawing-editor .tl-container, .ddc_ink_writing-editor .tl-container { width: 100%; height: 100%; font-size: 12px; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 28px; --space-8: 32px; --space-9: 64px; --space-10: 72px; --radius-0: 2px; --radius-1: 4px; --radius-2: 6px; --radius-3: 9px; --radius-4: 11px; --layer-background: 100; --layer-grid: 150; --layer-canvas: 200; --layer-shapes: 300; --layer-overlays: 400; --layer-following-indicator: 1000; --tl-zoom: 1; --tl-cursor-none: none; --tl-cursor-default: url("data:image/svg+xml,") 12 8, default; --tl-cursor-pointer: url("data:image/svg+xml,") 14 10, pointer; --tl-cursor-cross: url("data:image/svg+xml,") 16 16, crosshair; --tl-cursor-move: url("data:image/svg+xml,") 16 16, move; --tl-cursor-grab: url("data:image/svg+xml,") 16 16, grab; --tl-cursor-grabbing: url("data:image/svg+xml,") 16 16, grabbing; --tl-cursor-text: url("data:image/svg+xml,") 4 10, text; --tl-cursor-zoom-in: url("data:image/svg+xml,") 16 16, zoom-in; --tl-cursor-zoom-out: url("data:image/svg+xml,") 16 16, zoom-out; --tl-cursor: var(--tl-cursor-default); --tl-cursor-resize-edge: ew-resize; --tl-cursor-resize-corner: nesw-resize; --tl-cursor-ew-resize: ew-resize; --tl-cursor-ns-resize: ns-resize; --tl-cursor-nesw-resize: nesw-resize; --tl-cursor-nwse-resize: nwse-resize; --tl-cursor-rotate: pointer; --tl-cursor-nwse-rotate: pointer; --tl-cursor-nesw-rotate: pointer; --tl-cursor-senw-rotate: pointer; --tl-cursor-swne-rotate: pointer; --tl-scale: calc(1 / var(--tl-zoom)); --tl-font-draw: "tldraw_draw", sans-serif; --tl-font-sans: "tldraw_sans", sans-serif; --tl-font-serif: "tldraw_serif", serif; --tl-font-mono: "tldraw_mono", monospace; --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px); --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px); --tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background); position: relative; inset: 0px; height: 100%; width: 100%; overflow: clip; } .ddc_ink_drawing-editor .tl-theme__light, .ddc_ink_writing-editor .tl-theme__light { --color-accent: hsl(0, 76%, 60%); --color-background: hsl(210, 20%, 98%); --color-brush-fill: hsl(0, 0%, 56%, 10.2%); --color-brush-stroke: hsl(0, 0%, 56%, 25.1%); --color-grid: hsl(0, 0%, 43%); --color-low: hsl(204, 16%, 94%); --color-low-border: hsl(204, 16%, 92%); --color-culled: hsl(204, 14%, 93%); --color-muted-none: hsl(0, 0%, 0%, 0%); --color-muted-0: hsl(0, 0%, 0%, 2%); --color-muted-1: hsl(0, 0%, 0%, 10%); --color-muted-2: hsl(0, 0%, 0%, 4.3%); --color-hint: hsl(0, 0%, 0%, 5.5%); --color-overlay: hsl(0, 0%, 0%, 20%); --color-divider: hsl(0, 0%, 91%); --color-panel-contrast: hsl(0, 0%, 100%); --color-panel-overlay: hsl(0, 0%, 100%, 82%); --color-panel: hsl(0, 0%, 99%); --color-focus: hsl(214, 100%, 29%); --color-selected: hsl(214, 84%, 56%); --color-selected-contrast: hsl(0, 0%, 100%); --color-selection-fill: hsl(210, 100%, 56%, 24%); --color-selection-stroke: hsl(214, 84%, 56%); --color-text-0: hsl(0, 0%, 11%); --color-text-1: hsl(0, 0%, 18%); --color-text-3: hsl(220, 2%, 65%); --color-text-shadow: hsl(0, 0%, 100%); --color-primary: hsl(214, 84%, 56%); --color-warn: hsl(0, 90%, 43%); --color-text: hsl(0, 0%, 0%); --color-laser: hsl(0, 100%, 50%); --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%); --shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%), 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%), 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast); } .ddc_ink_drawing-editor .tl-theme__dark, .ddc_ink_writing-editor .tl-theme__dark { --color-accent: hsl(0, 76%, 60%); --color-background: hsl(240, 5%, 8%); --color-brush-fill: hsl(0, 0%, 71%, 5.1%); --color-brush-stroke: hsl(0, 0%, 71%, 25.1%); --color-grid: hsl(0, 0%, 56%); --color-low: hsl(260, 5%, 12.5%); --color-low-border: hsl(207, 10%, 10%); --color-culled: hsl(210, 11%, 19%); --color-muted-none: hsl(0, 0%, 100%, 0%); --color-muted-0: hsl(0, 0%, 100%, 2%); --color-muted-1: hsl(0, 0%, 100%, 10%); --color-muted-2: hsl(0, 0%, 100%, 5%); --color-hint: hsl(0, 0%, 100%, 7%); --color-overlay: hsl(0, 0%, 0%, 50%); --color-divider: hsl(240, 9%, 25%); --color-panel-contrast: hsl(240, 13%, 22%); --color-panel: hsl(220, 8%, 15%); --color-panel-overlay: hsl(210, 11%, 24%, 82%); --color-focus: hsl(217, 76%, 80%); --color-selected: hsl(217, 89%, 61%); --color-selected-contrast: hsl(0, 0%, 100%); --color-selection-fill: hsl(209, 100%, 57%, 20%); --color-selection-stroke: hsl(214, 84%, 56%); --color-text-0: hsl(0, 9%, 94%); --color-text-1: hsl(0, 0%, 85%); --color-text-3: hsl(210, 6%, 45%); --color-text-shadow: hsl(210, 13%, 18%); --color-primary: hsl(214, 84%, 56%); --color-warn: hsl(0, 81%, 66%); --color-text: hsl(210, 17%, 98%); --color-laser: hsl(0, 100%, 50%); --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%), inset 0px 0px 0px 1px var(--color-panel-contrast); } .ddc_ink_drawing-editor .tl-counter-scaled, .ddc_ink_writing-editor .tl-counter-scaled { transform: scale(var(--tl-scale)); transform-origin: top left; width: calc(100% * var(--tl-zoom)); height: calc(100% * var(--tl-zoom)); } .ddc_ink_drawing-editor .tl-container, .ddc_ink_drawing-editor .tl-container *, .ddc_ink_writing-editor .tl-container, .ddc_ink_writing-editor .tl-container * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; scrollbar-highlight-color: transparent; -webkit-user-select: none; user-select: none; box-sizing: border-box; outline: none; } .ddc_ink_drawing-editor .tl-container a, .ddc_ink_writing-editor .tl-container a { -webkit-touch-callout: initial; } .ddc_ink_drawing-editor .tl-container:focus-within, .ddc_ink_writing-editor .tl-container:focus-within { outline: 1px solid var(--color-low); } .ddc_ink_drawing-editor input, .ddc_ink_drawing-editor *[contenteditable], .ddc_ink_drawing-editor *[contenteditable] *, .ddc_ink_writing-editor input, .ddc_ink_writing-editor *[contenteditable], .ddc_ink_writing-editor *[contenteditable] * { -webkit-user-select: text; } .ddc_ink_drawing-editor .tl-canvas, .ddc_ink_writing-editor .tl-canvas { position: absolute; inset: 0px; height: 100%; width: 100%; color: var(--color-text); z-index: var(--layer-canvas); cursor: var(--tl-cursor); overflow: clip; content-visibility: auto; touch-action: none; contain: strict; } .ddc_ink_drawing-editor .tl-shapes, .ddc_ink_writing-editor .tl-shapes { position: relative; z-index: var(--layer-shapes); } .ddc_ink_drawing-editor .tl-overlays, .ddc_ink_writing-editor .tl-overlays { position: absolute; inset: 0px; height: 100%; width: 100%; contain: strict; pointer-events: none; z-index: var(--layer-overlays); } .ddc_ink_drawing-editor .tl-overlays__item, .ddc_ink_writing-editor .tl-overlays__item { position: absolute; top: 0px; left: 0px; overflow: visible; pointer-events: none; transform-origin: top left; } .ddc_ink_drawing-editor .tl-svg-context, .ddc_ink_writing-editor .tl-svg-context { position: absolute; top: 0px; left: 0px; pointer-events: none; } .ddc_ink_drawing-editor .tl-background, .ddc_ink_writing-editor .tl-background { position: absolute; background-color: var(--color-background); inset: 0px; height: 100%; width: 100%; z-index: var(--layer-background); } .ddc_ink_drawing-editor .tl-grid, .ddc_ink_writing-editor .tl-grid { position: absolute; inset: 0px; width: 100%; height: 100%; touch-action: none; pointer-events: none; z-index: var(--layer-grid); contain: strict; } .ddc_ink_drawing-editor .tl-grid-dot, .ddc_ink_writing-editor .tl-grid-dot { fill: var(--color-grid); } .ddc_ink_drawing-editor .tl-html-layer, .ddc_ink_writing-editor .tl-html-layer { position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; contain: layout style size; } .ddc_ink_drawing-editor .tl-brush, .ddc_ink_writing-editor .tl-brush { stroke-width: calc(var(--tl-scale) * 1px); contain: size layout; } .ddc_ink_drawing-editor .tl-brush__default, .ddc_ink_writing-editor .tl-brush__default { stroke: var(--color-brush-stroke); fill: var(--color-brush-fill); } .ddc_ink_drawing-editor .tl-scribble, .ddc_ink_writing-editor .tl-scribble { stroke-linejoin: round; stroke-linecap: round; pointer-events: none; contain: size layout; } .ddc_ink_drawing-editor .tl-shape, .ddc_ink_writing-editor .tl-shape { position: absolute; pointer-events: none; overflow: visible; transform-origin: top left; contain: size layout; } .ddc_ink_drawing-editor .tl-shape__culled, .ddc_ink_writing-editor .tl-shape__culled { position: relative; background-color: var(--color-culled); } .ddc_ink_drawing-editor .tl-svg-container, .ddc_ink_writing-editor .tl-svg-container { position: absolute; inset: 0px; height: 100%; width: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: top left; overflow: visible; } .ddc_ink_drawing-editor .tl-html-container, .ddc_ink_writing-editor .tl-html-container { position: absolute; inset: 0px; height: 100%; width: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: top left; color: inherit; } .ddc_ink_drawing-editor .tl-collaborator__scribble, .ddc_ink_writing-editor .tl-collaborator__scribble { z-index: 10; } .ddc_ink_drawing-editor .tl-collaborator__brush, .ddc_ink_writing-editor .tl-collaborator__brush { z-index: 20; } .ddc_ink_drawing-editor .tl-collaborator__shape-indicator, .ddc_ink_writing-editor .tl-collaborator__shape-indicator { z-index: 30; } .ddc_ink_drawing-editor .tl-user-scribble, .ddc_ink_writing-editor .tl-user-scribble { z-index: 40; } .ddc_ink_drawing-editor .tl-user-brush, .ddc_ink_writing-editor .tl-user-brush { z-index: 50; } .ddc_ink_drawing-editor .tl-user-indicator__selected, .ddc_ink_writing-editor .tl-user-indicator__selected { z-index: 60; } .ddc_ink_drawing-editor .tl-user-indicator__hovered, .ddc_ink_writing-editor .tl-user-indicator__hovered { z-index: 70; } .ddc_ink_drawing-editor .tl-user-handles, .ddc_ink_writing-editor .tl-user-handles { z-index: 80; } .ddc_ink_drawing-editor .tl-user-snapline, .ddc_ink_writing-editor .tl-user-snapline { z-index: 90; } .ddc_ink_drawing-editor .tl-selection__fg, .ddc_ink_writing-editor .tl-selection__fg { pointer-events: none; z-index: 100; } .ddc_ink_drawing-editor .tl-user-indicator__hint, .ddc_ink_writing-editor .tl-user-indicator__hint { z-index: 110; stroke-width: calc(2.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-collaborator__cursor-hint, .ddc_ink_writing-editor .tl-collaborator__cursor-hint { z-index: 120; } .ddc_ink_drawing-editor .tl-collaborator__cursor, .ddc_ink_writing-editor .tl-collaborator__cursor { z-index: 130; } .ddc_ink_drawing-editor .tl-cursor, .ddc_ink_writing-editor .tl-cursor { overflow: visible; } .ddc_ink_drawing-editor .tl-shape-indicator, .ddc_ink_writing-editor .tl-shape-indicator { transform-origin: top left; fill: none; stroke-width: calc(1.5px * var(--tl-scale)); contain: size; } .ddc_ink_drawing-editor .tl-selection__bg, .ddc_ink_writing-editor .tl-selection__bg { position: absolute; top: 0px; left: 0px; transform-origin: top left; background-color: transparent; pointer-events: all; } .ddc_ink_drawing-editor .tl-selection__fg__outline, .ddc_ink_writing-editor .tl-selection__fg__outline { fill: none; pointer-events: none; stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-corner-handle, .ddc_ink_writing-editor .tl-corner-handle { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-text-handle, .ddc_ink_writing-editor .tl-text-handle { pointer-events: none; fill: var(--color-selection-stroke); } .ddc_ink_drawing-editor .tl-corner-crop-handle, .ddc_ink_writing-editor .tl-corner-crop-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .ddc_ink_drawing-editor .tl-corner-crop-edge-handle, .ddc_ink_writing-editor .tl-corner-crop-edge-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .ddc_ink_drawing-editor .tl-mobile-rotate__bg, .ddc_ink_writing-editor .tl-mobile-rotate__bg { pointer-events: all; cursor: var(--tl-cursor-grab); } .ddc_ink_drawing-editor .tl-mobile-rotate__fg, .ddc_ink_writing-editor .tl-mobile-rotate__fg { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-transparent, .ddc_ink_writing-editor .tl-transparent { fill: transparent; stroke: transparent; } .ddc_ink_drawing-editor .tl-handle, .ddc_ink_writing-editor .tl-handle { pointer-events: all; } .ddc_ink_drawing-editor .tl-handle__bg, .ddc_ink_writing-editor .tl-handle__bg { fill: transparent; stroke: transparent; pointer-events: all; } .ddc_ink_drawing-editor .tl-handle__fg, .ddc_ink_writing-editor .tl-handle__fg { fill: var(--color-selected-contrast); stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); pointer-events: none; } .ddc_ink_drawing-editor .tl-handle__create, .ddc_ink_writing-editor .tl-handle__create { opacity: 0; } .ddc_ink_drawing-editor .tl-handle__create:hover, .ddc_ink_writing-editor .tl-handle__create:hover { opacity: 1; } .ddc_ink_drawing-editor .tl-handle__bg:active, .ddc_ink_writing-editor .tl-handle__bg:active { fill: none; } .ddc_ink_drawing-editor .tl-handle__bg:hover, .ddc_ink_writing-editor .tl-handle__bg:hover { cursor: var(--tl-cursor-grab); fill: var(--color-selection-fill); } @media (pointer: coarse) { .ddc_ink_drawing-editor .tl-handle__bg:active, .ddc_ink_writing-editor .tl-handle__bg:active { fill: var(--color-selection-fill); } .ddc_ink_drawing-editor .tl-handle__create, .ddc_ink_writing-editor .tl-handle__create { opacity: 1; } } .ddc_ink_drawing-editor .tl-image, .ddc_ink_drawing-editor .tl-video, .ddc_ink_writing-editor .tl-image, .ddc_ink_writing-editor .tl-video { object-fit: cover; background-size: cover; width: 100%; height: 100%; } .ddc_ink_drawing-editor .tl-image-container, .ddc_ink_drawing-editor .tl-embed-container, .ddc_ink_writing-editor .tl-image-container, .ddc_ink_writing-editor .tl-embed-container { width: 100%; height: 100%; pointer-events: all; display: flex; justify-content: center; align-items: center; } .ddc_ink_drawing-editor .tl-image__tg, .ddc_ink_writing-editor .tl-image__tg { --scale: calc(min(2, var(--tl-scale))); position: absolute; top: calc(var(--scale) * 8px); right: calc(var(--scale) * 8px); font-size: 10px; transform-origin: top right; background-color: var(--color-background); padding: 2px 4px; border-radius: var(--radius-1); } .ddc_ink_drawing-editor .tl-collaborator-cursor, .ddc_ink_writing-editor .tl-collaborator-cursor { position: absolute; } .ddc_ink_drawing-editor .tl-nametag, .ddc_ink_writing-editor .tl-nametag { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; max-width: 120px; padding: 3px 6px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); border-radius: var(--radius-2); color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tl-nametag-title, .ddc_ink_writing-editor .tl-nametag-title { position: absolute; top: -2px; left: 13px; width: fit-content; height: fit-content; padding: 0px 6px; max-width: 120px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); text-shadow: var(--tl-text-outline); color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tl-nametag-chat, .ddc_ink_writing-editor .tl-nametag-chat { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; color: var(--color-selected-contrast); white-space: nowrap; position: absolute; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); opacity: 1; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tl-cursor-chat, .ddc_ink_writing-editor .tl-cursor-chat { position: absolute; color: var(--color-selected-contrast); white-space: nowrap; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); pointer-events: none; z-index: var(--layer-cursor); margin-top: 16px; margin-left: 13px; opacity: 1; border: none; user-select: text; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tl-cursor-chat .tl-cursor-chat__bubble, .ddc_ink_writing-editor .tl-cursor-chat .tl-cursor-chat__bubble { padding-right: 12px; } .ddc_ink_drawing-editor .tl-cursor-chat::selection, .ddc_ink_writing-editor .tl-cursor-chat::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .ddc_ink_drawing-editor .tl-cursor-chat-fade, .ddc_ink_writing-editor .tl-cursor-chat-fade { opacity: 0.0001; transition: opacity 5s ease-in-out; } .ddc_ink_drawing-editor .tl-cursor-chat::placeholder, .ddc_ink_writing-editor .tl-cursor-chat::placeholder { color: var(--color-selected-contrast); opacity: 0.7; } @keyframes spinner { to { transform: rotate(360deg); } } .ddc_ink_drawing-editor .tl-text-shape__wrapper, .ddc_ink_writing-editor .tl-text-shape__wrapper { position: relative; font-weight: normal; min-width: 1px; padding: 0px; margin: 0px; border: none; height: 100%; font-variant: normal; font-style: normal; pointer-events: all; white-space: pre-wrap; overflow-wrap: break-word; text-shadow: var(--tl-text-outline); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-align=start], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-align=start] { text-align: left; } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-align=middle], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-align=middle] { text-align: center; } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-align=end], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-align=end] { text-align: right; } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=draw], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=draw] { font-family: var(--tl-font-draw); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=sans], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=sans] { font-family: var(--tl-font-sans); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=serif], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=serif] { font-family: var(--tl-font-serif); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=mono], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=mono] { font-family: var(--tl-font-mono); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-isediting=true] .tl-text-content, .ddc_ink_writing-editor .tl-text-shape__wrapper[data-isediting=true] .tl-text-content { opacity: 0; } .ddc_ink_drawing-editor .tl-text, .ddc_ink_writing-editor .tl-text { margin: 0px; padding: 0px; border: 0px; color: inherit; caret-color: var(--color-text); background: none; border-image: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; font-variant: inherit; font-style: inherit; text-align: inherit; letter-spacing: inherit; text-shadow: inherit; outline: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; pointer-events: all; text-rendering: auto; text-transform: none; text-indent: 0px; display: inline-block; appearance: auto; column-count: initial !important; writing-mode: horizontal-tb !important; word-spacing: 0px; } .ddc_ink_drawing-editor .tl-text-measure, .ddc_ink_writing-editor .tl-text-measure { position: absolute; z-index: -999999; top: 0px; left: 0px; opacity: 0; width: max-content; box-sizing: border-box; pointer-events: none; line-break: normal; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; resize: none; border: none; user-select: none; contain: style paint; -webkit-user-select: none; } .ddc_ink_drawing-editor .tl-text-input, .ddc_ink_drawing-editor .tl-text-content, .ddc_ink_writing-editor .tl-text-input, .ddc_ink_writing-editor .tl-text-content { position: absolute; inset: 0px; height: 100%; width: 100%; min-width: 1px; min-height: 1px; overflow: visible; outline: none; } .ddc_ink_drawing-editor .tl-text-content, .ddc_ink_writing-editor .tl-text-content { pointer-events: none; } .ddc_ink_drawing-editor .tl-text-input, .ddc_ink_writing-editor .tl-text-input { resize: none; user-select: all; -webkit-user-select: text; overflow: hidden; cursor: var(--tl-cursor-text); } .ddc_ink_drawing-editor .tl-text-input::selection, .ddc_ink_writing-editor .tl-text-input::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .ddc_ink_drawing-editor .tl-snap-indicator, .ddc_ink_writing-editor .tl-snap-indicator { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } .ddc_ink_drawing-editor .tl-snap-point, .ddc_ink_writing-editor .tl-snap-point { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } .ddc_ink_drawing-editor .tl-group, .ddc_ink_writing-editor .tl-group { stroke: var(--color-text); stroke-width: calc(1px * var(--tl-scale)); opacity: 0.5; } .ddc_ink_drawing-editor .tl-bookmark__container, .ddc_ink_writing-editor .tl-bookmark__container { width: 100%; height: 100%; position: relative; border: 1px solid var(--color-panel-contrast); background-color: var(--color-panel); border-radius: var(--radius-2); display: flex; flex-direction: column; overflow: hidden; } .ddc_ink_drawing-editor .tl-bookmark__image_container, .ddc_ink_writing-editor .tl-bookmark__image_container { flex: 1; overflow: hidden; border-top-left-radius: var(--radius-1); border-top-right-radius: var(--radius-1); width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: flex-start; } .ddc_ink_drawing-editor .tl-bookmark__image_container > .tl-hyperlink-button::after, .ddc_ink_writing-editor .tl-bookmark__image_container > .tl-hyperlink-button::after { background-color: var(--color-panel); } .ddc_ink_drawing-editor .tl-bookmark__placeholder, .ddc_ink_writing-editor .tl-bookmark__placeholder { width: 100%; height: 100%; background-color: var(--color-muted-2); border-bottom: 1px solid var(--color-muted-2); } .ddc_ink_drawing-editor .tl-bookmark__image, .ddc_ink_writing-editor .tl-bookmark__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .ddc_ink_drawing-editor .tl-bookmark__copy_container, .ddc_ink_writing-editor .tl-bookmark__copy_container { background-color: var(--color-muted); padding: var(--space-4); pointer-events: all; } .ddc_ink_drawing-editor .tl-bookmark__heading, .ddc_ink_drawing-editor .tl-bookmark__description, .ddc_ink_drawing-editor .tl-bookmark__link, .ddc_ink_writing-editor .tl-bookmark__heading, .ddc_ink_writing-editor .tl-bookmark__description, .ddc_ink_writing-editor .tl-bookmark__link { margin: 0px; width: 100%; font-family: inherit; } .ddc_ink_drawing-editor .tl-bookmark__heading, .ddc_ink_writing-editor .tl-bookmark__heading { font-size: 16px; font-weight: bold; padding-bottom: var(--space-2); margin: 8px 0px; } .ddc_ink_drawing-editor .tl-bookmark__description, .ddc_ink_writing-editor .tl-bookmark__description { font-size: 12px; padding-bottom: var(--space-4); } .ddc_ink_drawing-editor .tl-bookmark__link, .ddc_ink_writing-editor .tl-bookmark__link { font-size: 14px; pointer-events: all; z-index: 999; overflow: hidden; display: block; color: var(--color-text); text-overflow: ellipsis; text-decoration: none; color: var(--color-text-1); cursor: var(--tl-cursor-pointer); } .ddc_ink_drawing-editor .tl-bookmark__link:hover, .ddc_ink_writing-editor .tl-bookmark__link:hover { color: var(--color-selected); } .ddc_ink_drawing-editor .tl-hyperlink-button, .ddc_ink_writing-editor .tl-hyperlink-button { background: none; margin: 0px; position: absolute; top: 0px; right: 0px; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; z-index: 200; font-size: 12px; font-weight: 400; color: var(--color-text-1); padding: 13px; cursor: var(--tl-cursor-pointer); border: none; outline: none; pointer-events: all; } .ddc_ink_drawing-editor .tl-hyperlink-button::after, .ddc_ink_writing-editor .tl-hyperlink-button::after { content: ""; z-index: -1; position: absolute; right: 6px; bottom: 6px; display: block; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: var(--radius-1); background-color: var(--color-background); pointer-events: none; } .ddc_ink_drawing-editor .tl-hyperlink-button:hover, .ddc_ink_writing-editor .tl-hyperlink-button:hover { color: var(--color-selected); } .ddc_ink_drawing-editor .tl-hyperlink-button:focus-visible, .ddc_ink_writing-editor .tl-hyperlink-button:focus-visible { color: var(--color-selected); } .ddc_ink_drawing-editor .tl-hyperlink-button__icon, .ddc_ink_writing-editor .tl-hyperlink-button__icon { width: 18px; height: 18px; background-color: currentColor; pointer-events: none; } .ddc_ink_drawing-editor .tl-hyperlink-button__hidden, .ddc_ink_writing-editor .tl-hyperlink-button__hidden { display: none; } .ddc_ink_drawing-editor .tl-text-label, .ddc_ink_writing-editor .tl-text-label { display: flex; justify-content: center; align-items: center; color: var(--color-text); text-shadow: var(--tl-text-outline); line-height: inherit; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: 10; } .ddc_ink_drawing-editor .tl-text-label[data-isediting=true] .tl-text-content, .ddc_ink_writing-editor .tl-text-label[data-isediting=true] .tl-text-content { opacity: 0; } .ddc_ink_drawing-editor .tl-text-label[data-hastext=false][data-isediting=false] > .tl-text-label__inner, .ddc_ink_writing-editor .tl-text-label[data-hastext=false][data-isediting=false] > .tl-text-label__inner { width: 40px; height: 40px; } .ddc_ink_drawing-editor .tl-text-label[data-hastext=true][data-isediting=false] .tl-text-content, .ddc_ink_writing-editor .tl-text-label[data-hastext=true][data-isediting=false] .tl-text-content { pointer-events: all; } .ddc_ink_drawing-editor .tl-text-label__inner, .ddc_ink_writing-editor .tl-text-label__inner { position: relative; width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; pointer-events: none; min-height: auto; } .ddc_ink_drawing-editor .tl-text-label__inner > .tl-text-content, .ddc_ink_writing-editor .tl-text-label__inner > .tl-text-content { position: relative; top: 0px; left: 0px; padding: 16px; height: fit-content; width: fit-content; border-radius: var(--radius-1); max-width: 100%; z-index: 3; } .ddc_ink_drawing-editor .tl-text-label__inner > .tl-text-input, .ddc_ink_writing-editor .tl-text-label__inner > .tl-text-input { position: absolute; inset: 0px; height: 100%; width: 100%; padding: 16px; z-index: 4; } .ddc_ink_drawing-editor .tl-text-label[data-textwrap=true] > .tl-text-label__inner, .ddc_ink_writing-editor .tl-text-label[data-textwrap=true] > .tl-text-label__inner { max-width: 100%; } .ddc_ink_drawing-editor .tl-text-label[data-isediting=true], .ddc_ink_writing-editor .tl-text-label[data-isediting=true] { background-color: transparent; min-height: auto; } .ddc_ink_drawing-editor .tl-text-label[data-isediting=true] p, .ddc_ink_writing-editor .tl-text-label[data-isediting=true] p { opacity: 0; } .ddc_ink_drawing-editor .tl-text-label[data-align=start], .ddc_ink_drawing-editor .tl-text-label[data-align=start-legacy], .ddc_ink_writing-editor .tl-text-label[data-align=start], .ddc_ink_writing-editor .tl-text-label[data-align=start-legacy] { text-align: left; } .ddc_ink_drawing-editor .tl-text-label[data-align=middle], .ddc_ink_drawing-editor .tl-text-label[data-align=middle-legacy], .ddc_ink_writing-editor .tl-text-label[data-align=middle], .ddc_ink_writing-editor .tl-text-label[data-align=middle-legacy] { text-align: center; } .ddc_ink_drawing-editor .tl-text-label[data-align=end], .ddc_ink_drawing-editor .tl-text-label[data-align=end-legacy], .ddc_ink_writing-editor .tl-text-label[data-align=end], .ddc_ink_writing-editor .tl-text-label[data-align=end-legacy] { text-align: right; } .ddc_ink_drawing-editor .tl-arrow-hint, .ddc_ink_writing-editor .tl-arrow-hint { stroke: var(--color-text-1); fill: none; stroke-linecap: round; overflow: visible; } .ddc_ink_drawing-editor .tl-arrow-label[data-font=draw], .ddc_ink_drawing-editor .tl-text-label[data-font=draw], .ddc_ink_writing-editor .tl-arrow-label[data-font=draw], .ddc_ink_writing-editor .tl-text-label[data-font=draw] { font-family: var(--tl-font-draw); } .ddc_ink_drawing-editor .tl-arrow-label[data-font=sans], .ddc_ink_drawing-editor .tl-text-label[data-font=sans], .ddc_ink_writing-editor .tl-arrow-label[data-font=sans], .ddc_ink_writing-editor .tl-text-label[data-font=sans] { font-family: var(--tl-font-sans); } .ddc_ink_drawing-editor .tl-arrow-label[data-font=serif], .ddc_ink_drawing-editor .tl-text-label[data-font=serif], .ddc_ink_writing-editor .tl-arrow-label[data-font=serif], .ddc_ink_writing-editor .tl-text-label[data-font=serif] { font-family: var(--tl-font-serif); } .ddc_ink_drawing-editor .tl-arrow-label[data-font=mono], .ddc_ink_drawing-editor .tl-text-label[data-font=mono], .ddc_ink_writing-editor .tl-arrow-label[data-font=mono], .ddc_ink_writing-editor .tl-text-label[data-font=mono] { font-family: var(--tl-font-mono); } .ddc_ink_drawing-editor .tl-arrow-label, .ddc_ink_writing-editor .tl-arrow-label { position: absolute; top: -1px; left: -1px; width: 2px; height: 2px; padding: 0px; display: flex; justify-content: center; align-items: center; color: var(--color-text); text-shadow: var(--tl-text-outline); } .ddc_ink_drawing-editor .tl-arrow-label[data-isediting=true] p, .ddc_ink_writing-editor .tl-arrow-label[data-isediting=true] p { opacity: 0; } .ddc_ink_drawing-editor .tl-arrow-label[data-isediting=true] > .tl-arrow-label__inner, .ddc_ink_writing-editor .tl-arrow-label[data-isediting=true] > .tl-arrow-label__inner { background-color: var(--color-background); } .ddc_ink_drawing-editor .tl-arrow-label__inner, .ddc_ink_writing-editor .tl-arrow-label__inner { border-radius: var(--radius-1); box-sizing: content-box; position: relative; height: max-content; width: max-content; pointer-events: all; display: flex; justify-content: center; align-items: center; } .ddc_ink_drawing-editor .tl-arrow-label p, .ddc_ink_drawing-editor .tl-arrow-label textarea, .ddc_ink_writing-editor .tl-arrow-label p, .ddc_ink_writing-editor .tl-arrow-label textarea { margin: 0px; padding: 0px; border: 0px; color: inherit; caret-color: var(--color-text); background: none; border-image: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; font-variant: inherit; font-style: inherit; text-align: inherit; letter-spacing: inherit; text-shadow: inherit; outline: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; pointer-events: all; text-rendering: auto; text-transform: none; text-indent: 0px; display: inline-block; appearance: auto; column-count: initial !important; writing-mode: horizontal-tb !important; word-spacing: 0px; } .ddc_ink_drawing-editor .tl-arrow-label p, .ddc_ink_writing-editor .tl-arrow-label p { position: relative; height: max-content; z-index: 2; padding: 4px; overflow: visible; } .ddc_ink_drawing-editor .tl-arrow-label textarea, .ddc_ink_writing-editor .tl-arrow-label textarea { z-index: 3; margin: 0px; padding: 4px; height: 100%; width: 100%; position: absolute; resize: none; border: 0px; user-select: all; -webkit-user-select: text; caret-color: var(--color-text); border-image: none; min-width: 4px; } .ddc_ink_drawing-editor .tl-note__container, .ddc_ink_writing-editor .tl-note__container { position: relative; width: 100%; height: 100%; border-radius: var(--radius-2); box-shadow: var(--shadow-1); overflow: hidden; border-color: currentColor; border-style: solid; border-width: 1px; } .ddc_ink_drawing-editor .tl-note__container .tl-text-label, .ddc_ink_writing-editor .tl-note__container .tl-text-label { text-shadow: none; } .ddc_ink_drawing-editor .tl-note__scrim, .ddc_ink_writing-editor .tl-note__scrim { position: absolute; z-index: 1; inset: 0px; height: 100%; width: 100%; background-color: var(--color-background); opacity: 0.28; } .ddc_ink_drawing-editor .tl-loading, .ddc_ink_writing-editor .tl-loading { background-color: var(--color-background); color: var(--color-text-1); height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; opacity: 0; animation: fade-in 0.2s ease-in-out forwards; animation-delay: 0.2s; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .ddc_ink_drawing-editor .tl-frame__body, .ddc_ink_writing-editor .tl-frame__body { stroke-width: calc(1px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-frame__creating, .ddc_ink_writing-editor .tl-frame__creating { stroke: var(--color-selected); fill: none; } .ddc_ink_drawing-editor .tl-frame-heading, .ddc_ink_writing-editor .tl-frame-heading { display: flex; align-items: center; position: absolute; transform-origin: 0% 100%; overflow: hidden; max-width: 100%; min-width: 32px; height: auto; font-size: 12px; padding-bottom: 4px; pointer-events: all; } .ddc_ink_drawing-editor .tl-frame-heading-hit-area, .ddc_ink_writing-editor .tl-frame-heading-hit-area { pointer-events: all; transform-origin: 0% 100%; display: flex; height: 100%; width: 100%; align-items: center; border-radius: var(--radius-1); background-color: var(--color-background); } .ddc_ink_drawing-editor .tl-frame-label, .ddc_ink_writing-editor .tl-frame-label { pointer-events: all; overflow: hidden; text-overflow: ellipsis; padding: var(--space-3) var(--space-3); position: relative; font-size: inherit; white-space: pre; border: 1px solid transparent; } .ddc_ink_drawing-editor .tl-frame-label__editing, .ddc_ink_writing-editor .tl-frame-label__editing { color: transparent; white-space: pre; width: auto; overflow: visible; background-color: var(--color-panel); border-radius: var(--radius-1); border-color: var(--color-selected); } .ddc_ink_drawing-editor .tl-frame-name-input, .ddc_ink_writing-editor .tl-frame-name-input { position: absolute; border: none; background: none; outline: none; padding: var(--space-3) var(--space-3); inset: 0px; height: 100%; width: 100%; font-size: inherit; font-family: inherit; font-weight: inherit; width: 100%; color: var(--color-text-1); border-radius: var(--radius-1); user-select: all; -webkit-user-select: text; white-space: pre; cursor: var(--tl-cursor-text); } @media (max-width: 600px) { .ddc_ink_drawing-editor .tl-frame-heading, .ddc_ink_writing-editor .tl-frame-heading { font-size: 16px; } } .ddc_ink_drawing-editor .tl-embed, .ddc_ink_writing-editor .tl-embed { border: none; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tl-shape-error-boundary, .ddc_ink_writing-editor .tl-shape-error-boundary { width: 100%; height: 100%; background-color: var(--color-muted-1); border-width: calc(1px * var(--tl-scale)); border-color: var(--color-muted-1); border-style: solid; border-radius: calc(var(--radius-1) * var(--tl-scale)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: left; position: relative; pointer-events: all; overflow: hidden; padding: var(--space-2); } .ddc_ink_drawing-editor .tl-shape-error-boundary::before, .ddc_ink_writing-editor .tl-shape-error-boundary::before { transform: scale(var(--tl-scale)); content: "Error"; font-size: 12px; font-family: inherit; color: var(--color-text-0); } .ddc_ink_drawing-editor .tl-error-boundary, .ddc_ink_writing-editor .tl-error-boundary { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background-color: var(--color-background); color: var(--color-text-1); position: absolute; z-index: 600; } .ddc_ink_drawing-editor .tl-error-boundary__overlay, .ddc_ink_writing-editor .tl-error-boundary__overlay { position: absolute; inset: 0px; height: 100%; width: 100%; z-index: 500; background-color: var(--color-overlay); } .ddc_ink_drawing-editor .tl-error-boundary__content *, .ddc_ink_writing-editor .tl-error-boundary__content * { user-select: all; -webkit-user-select: text; pointer-events: all; } .ddc_ink_drawing-editor .tl-error-boundary__canvas, .ddc_ink_writing-editor .tl-error-boundary__canvas { pointer-events: none; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: -1; } .ddc_ink_drawing-editor .tl-error-boundary__canvas::after, .ddc_ink_writing-editor .tl-error-boundary__canvas::after { content: " "; display: block; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: 600; pointer-events: all; } .ddc_ink_drawing-editor .tl-error-boundary__content, .ddc_ink_writing-editor .tl-error-boundary__content { width: fit-content; height: fit-content; max-width: 100%; width: 400px; max-height: 100%; background-color: var(--color-panel); padding: 16px; border-radius: 16px; box-shadow: var(--shadow-2); font-size: 14px; font-weight: 400; display: flex; flex-direction: column; overflow: auto; z-index: 600; gap: 12px; } .ddc_ink_drawing-editor .tl-error-boundary__content__expanded, .ddc_ink_writing-editor .tl-error-boundary__content__expanded { width: 600px; } .ddc_ink_drawing-editor .tl-error-boundary__content h2, .ddc_ink_writing-editor .tl-error-boundary__content h2 { font-size: 16px; margin: 0px; font-weight: 500; } .ddc_ink_drawing-editor .tl-error-boundary__content h4, .ddc_ink_writing-editor .tl-error-boundary__content h4 { border: 1px solid var(--color-low-border); margin: -6px 0 0 0; padding: var(--space-5); border-radius: var(--radius-2); font-weight: normal; } .ddc_ink_drawing-editor .tl-error-boundary__content p, .ddc_ink_writing-editor .tl-error-boundary__content p { line-height: 1.5; margin: 0px; } .ddc_ink_drawing-editor .tl-error-boundary__content pre, .ddc_ink_writing-editor .tl-error-boundary__content pre { background-color: var(--color-muted-2); margin-top: 0; padding: var(--space-5); border-radius: var(--radius-2); overflow: auto; font-size: 12px; max-height: 320px; } .ddc_ink_drawing-editor .tl-error-boundary__content button, .ddc_ink_writing-editor .tl-error-boundary__content button { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; padding: var(--space-4); border-radius: var(--radius-3); cursor: var(--tl-cursor-pointer); color: inherit; background-color: transparent; } .ddc_ink_drawing-editor .tl-error-boundary__content button:hover, .ddc_ink_writing-editor .tl-error-boundary__content button:hover { background-color: var(--color-low); } .ddc_ink_drawing-editor .tl-error-boundary__content a, .ddc_ink_writing-editor .tl-error-boundary__content a { color: var(--color-text-1); font-weight: 500; text-decoration: none; } .ddc_ink_drawing-editor .tl-error-boundary__content a:hover, .ddc_ink_writing-editor .tl-error-boundary__content a:hover { color: var(--color-text-1); } .ddc_ink_drawing-editor .tl-error-boundary__content__error, .ddc_ink_writing-editor .tl-error-boundary__content__error { position: relative; margin: -6px 0 0 0; } .ddc_ink_drawing-editor .tl-error-boundary__content__error button, .ddc_ink_writing-editor .tl-error-boundary__content__error button { position: absolute; top: var(--space-2); right: var(--space-2); font-size: 12px; padding: var(--space-2) var(--space-3); background-color: var(--color-panel); border-radius: var(--radius-1); } .ddc_ink_drawing-editor .tl-error-boundary__content__actions, .ddc_ink_writing-editor .tl-error-boundary__content__actions { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0px; margin-left: -4px; } .ddc_ink_drawing-editor .tl-error-boundary__content__actions__group, .ddc_ink_writing-editor .tl-error-boundary__content__actions__group { display: flex; gap: var(--space-4); } .ddc_ink_drawing-editor .tl-error-boundary__content .tl-error-boundary__reset, .ddc_ink_writing-editor .tl-error-boundary__content .tl-error-boundary__reset { color: var(--color-warn); } .ddc_ink_drawing-editor .tl-error-boundary__content .tl-error-boundary__refresh, .ddc_ink_writing-editor .tl-error-boundary__content .tl-error-boundary__refresh { background-color: var(--color-primary); color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tl-error-boundary__content .tl-error-boundary__refresh:hover, .ddc_ink_writing-editor .tl-error-boundary__content .tl-error-boundary__refresh:hover { background-color: var(--color-primary); opacity: 0.9; } .ddc_ink_drawing-editor .tl-hidden, .ddc_ink_writing-editor .tl-hidden { opacity: 0; pointer-events: none; } .ddc_ink_drawing-editor .debug__ui-logger, .ddc_ink_writing-editor .debug__ui-logger { position: absolute; top: 62px; left: 16px; color: #555; font-size: 12px; font-family: monospace; } .ddc_ink_drawing-editor .tl-container, .ddc_ink_writing-editor .tl-container { --layer-panels: 300; --layer-menus: 400; --layer-overlays: 500; --layer-toasts: 650; --layer-cursor: 700; } .ddc_ink_drawing-editor .tlui-button, .ddc_ink_writing-editor .tlui-button { position: relative; height: 40px; min-width: 40px; padding: 0px 12px; display: flex; align-items: center; justify-content: center; background-color: transparent; border: transparent; color: currentColor; cursor: pointer; pointer-events: all; font-weight: inherit; font-family: inherit; text-rendering: optimizeLegibility; font-size: 12px; gap: 0px; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-button:disabled, .ddc_ink_writing-editor .tlui-button:disabled { color: var(--color-text-3); text-shadow: none; cursor: default; } .ddc_ink_drawing-editor .tlui-button:disabled .tlui-kbd, .ddc_ink_writing-editor .tlui-button:disabled .tlui-kbd { color: var(--color-text-3); } .ddc_ink_drawing-editor .tlui-button > *, .ddc_ink_writing-editor .tlui-button > * { position: relative; z-index: 1; } .ddc_ink_drawing-editor .tlui-button__label, .ddc_ink_writing-editor .tlui-button__label { flex-grow: 2; text-align: left; } .ddc_ink_drawing-editor .tlui-button:focus-visible:not(:hover), .ddc_ink_writing-editor .tlui-button:focus-visible:not(:hover) { outline: 1px solid var(--color-selected); outline-offset: -4px; border-radius: var(--radius-3); } .ddc_ink_drawing-editor .tlui-button::after, .ddc_ink_writing-editor .tlui-button::after { display: block; content: ""; position: absolute; inset: 4px; background-color: transparent; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tlui-button[aria-expanded=true]::after, .ddc_ink_writing-editor .tlui-button[aria-expanded=true]::after { background-color: var(--color-muted-0); opacity: 1; } .ddc_ink_drawing-editor .tlui-button__icon + .tlui-button__label, .ddc_ink_writing-editor .tlui-button__icon + .tlui-button__label { margin-left: var(--space-2); } .ddc_ink_drawing-editor .tlui-button[data-state=hinted]::after, .ddc_ink_writing-editor .tlui-button[data-state=hinted]::after { background-color: var(--color-hint); opacity: 1; } .ddc_ink_drawing-editor .tlui-button[data-state=hinted]:not(:disabled, :focus-visible):active:after, .ddc_ink_writing-editor .tlui-button[data-state=hinted]:not(:disabled, :focus-visible):active:after { background: var(--color-hint); opacity: 1; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button::after, .ddc_ink_writing-editor .tlui-button::after { background-color: var(--color-muted-2); opacity: 0; } .ddc_ink_drawing-editor .tlui-button:not(:disabled):hover::after, .ddc_ink_writing-editor .tlui-button:not(:disabled):hover::after { opacity: 1; } } .ddc_ink_drawing-editor .tlui-button__low, .ddc_ink_writing-editor .tlui-button__low { border-radius: var(--radius-3); background-color: var(--color-low); } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__low::after, .ddc_ink_writing-editor .tlui-button__low::after { background-color: var(--color-muted-2); } } .ddc_ink_drawing-editor .tlui-button__primary, .ddc_ink_writing-editor .tlui-button__primary { color: var(--color-primary); } .ddc_ink_drawing-editor .tlui-button__danger, .ddc_ink_writing-editor .tlui-button__danger { color: var(--color-warn); text-shadow: none; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__primary:not(:disabled, :focus-visible):hover, .ddc_ink_writing-editor .tlui-button__primary:not(:disabled, :focus-visible):hover { color: var(--color-primary); } .ddc_ink_drawing-editor .tlui-button__danger:not(:disabled, :focus-visible):hover, .ddc_ink_writing-editor .tlui-button__danger:not(:disabled, :focus-visible):hover { color: var(--color-warn); text-shadow: none; } } .ddc_ink_drawing-editor .tlui-button__panel, .ddc_ink_writing-editor .tlui-button__panel { position: relative; } .ddc_ink_drawing-editor .tlui-button__menu, .ddc_ink_writing-editor .tlui-button__menu { height: 40px; min-height: 40px; width: 100%; gap: 8px; margin: -4px 0px; } .ddc_ink_drawing-editor .tlui-button__menu:nth-child(1), .ddc_ink_writing-editor .tlui-button__menu:nth-child(1) { margin-top: 0px; } .ddc_ink_drawing-editor .tlui-button__menu:nth-last-child(1), .ddc_ink_writing-editor .tlui-button__menu:nth-last-child(1) { margin-bottom: 0px; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__menu::after, .ddc_ink_writing-editor .tlui-button__menu::after { inset: 4px; border-radius: var(--radius-2); } } .ddc_ink_drawing-editor .tlui-button__checkbox, .ddc_ink_writing-editor .tlui-button__checkbox { padding-left: 8px; } .ddc_ink_drawing-editor .tlui-button__checkbox__indicator, .ddc_ink_writing-editor .tlui-button__checkbox__indicator { width: 15px; height: 15px; } .ddc_ink_drawing-editor .tlui-toolbar__lock-button, .ddc_ink_writing-editor .tlui-toolbar__lock-button { position: absolute; top: 4px; right: 0px; pointer-events: all; height: 40px; width: 40px; min-width: 0px; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tlui-toolbar__lock-button::after, .ddc_ink_writing-editor .tlui-toolbar__lock-button::after { top: 4px; left: 8px; inset: 4px; } .ddc_ink_drawing-editor .tlui-button__tool, .ddc_ink_writing-editor .tlui-button__tool { position: relative; height: 48px; width: 48px; margin-left: -2px; margin-right: -2px; } .ddc_ink_drawing-editor .tlui-button__tool:nth-of-type(1), .ddc_ink_writing-editor .tlui-button__tool:nth-of-type(1) { margin-left: 0px; } .ddc_ink_drawing-editor .tlui-button__tool:nth-last-of-type(1), .ddc_ink_writing-editor .tlui-button__tool:nth-last-of-type(1) { margin-right: 0px; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__tool::after, .ddc_ink_writing-editor .tlui-button__tool::after { inset: 4px; border-radius: 8px; } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):hover, .ddc_ink_writing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):hover { color: var(--color-selected-contrast); } } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected], .ddc_ink_writing-editor .tlui-button__tool[data-state=selected] { color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):active, .ddc_ink_writing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):active { color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected]:not(:disabled)::after, .ddc_ink_writing-editor .tlui-button__tool[data-state=selected]:not(:disabled)::after { background: var(--color-selected); opacity: 1; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-button__tool, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-button__tool { height: 48px; width: 44px; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-button__tool > .tlui-icon, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-button__tool > .tlui-icon { height: 16px; width: 16px; } .ddc_ink_drawing-editor .tlui-button__help, .ddc_ink_writing-editor .tlui-button__help { height: 32px; width: 32px; padding: 0px; min-width: 32px; border-radius: 100%; background-color: var(--color-low); border: 1px solid var(--color-low-border); } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__help::after, .ddc_ink_writing-editor .tlui-button__help::after { background-color: var(--color-muted-2); border-radius: 100%; inset: 4px; } } .ddc_ink_drawing-editor .tlui-buttons__horizontal, .ddc_ink_writing-editor .tlui-buttons__horizontal { display: flex; flex-direction: row; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *, .ddc_ink_writing-editor .tlui-buttons__horizontal > * { margin-left: -2px; margin-right: -2px; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *:nth-child(1), .ddc_ink_writing-editor .tlui-buttons__horizontal > *:nth-child(1) { margin-left: 0px; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *:nth-last-child(1), .ddc_ink_writing-editor .tlui-buttons__horizontal > *:nth-last-child(1) { margin-right: 0px; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *:only-child, .ddc_ink_writing-editor .tlui-buttons__horizontal > *:only-child { width: 56px; } .ddc_ink_drawing-editor .tlui-buttons__grid, .ddc_ink_writing-editor .tlui-buttons__grid { display: grid; grid-template-columns: repeat(4, auto); grid-auto-flow: row; overflow: hidden; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button, .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button { margin: -2px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n) { margin-right: 0px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) { margin-left: 0px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) { margin-top: 0px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) { margin-bottom: 0px; } .ddc_ink_drawing-editor .tlui-zoom-menu__button__pct, .ddc_ink_writing-editor .tlui-zoom-menu__button__pct { width: 60px; min-width: 60px; text-align: center; } .ddc_ink_drawing-editor .tlui-layout, .ddc_ink_writing-editor .tlui-layout { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0px, 1fr) auto; grid-auto-rows: auto; height: 100%; max-height: 100%; overflow: clip; pointer-events: none; user-select: none; contain: strict; z-index: var(--layer-panels); -webkit-transform: translate3d(0, 0, 0); --sab: env(safe-area-inset-bottom); } .ddc_ink_drawing-editor .tlui-layout__top, .ddc_ink_writing-editor .tlui-layout__top { grid-column: 1; grid-row: 1; display: flex; min-width: 0px; justify-content: space-between; } .ddc_ink_drawing-editor .tlui-layout__top__left, .ddc_ink_writing-editor .tlui-layout__top__left { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; flex: 0 1 0; } .ddc_ink_drawing-editor .tlui-layout__top__right, .ddc_ink_writing-editor .tlui-layout__top__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; height: 100%; flex: 0 0 auto; min-width: 0px; } .ddc_ink_drawing-editor .scrollable, .ddc_ink_drawing-editor .scrollable *, .ddc_ink_writing-editor .scrollable, .ddc_ink_writing-editor .scrollable * { pointer-events: all; touch-action: auto; overscroll-behavior: none; } .ddc_ink_drawing-editor .tlui-helper-buttons, .ddc_ink_writing-editor .tlui-helper-buttons { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: min-content; gap: var(--space-3); margin: var(--space-2) var(--space-3); white-space: nowrap; pointer-events: none; z-index: var(--layer-panels); } .ddc_ink_drawing-editor .tlui-icon, .ddc_ink_writing-editor .tlui-icon { flex-shrink: 0; width: 18px; height: 18px; background-color: currentColor; } .ddc_ink_drawing-editor .tlui-icon__small, .ddc_ink_writing-editor .tlui-icon__small { width: 15px; height: 15px; } .ddc_ink_drawing-editor .tlui-slider, .ddc_ink_writing-editor .tlui-slider { position: relative; display: flex; align-items: center; user-select: none; touch-action: none; } .ddc_ink_drawing-editor .tlui-slider__container, .ddc_ink_writing-editor .tlui-slider__container { width: 100%; padding: 0px var(--space-4); } .ddc_ink_drawing-editor .tlui-slider__track, .ddc_ink_writing-editor .tlui-slider__track { position: relative; flex-grow: 1; height: 44px; cursor: pointer; } .ddc_ink_drawing-editor .tlui-slider__track::after, .ddc_ink_writing-editor .tlui-slider__track::after { display: block; position: absolute; top: calc(50% - 2px); content: ""; height: 3px; width: 100%; background-color: var(--color-muted-1); border-radius: 14px; } .ddc_ink_drawing-editor .tlui-slider__range, .ddc_ink_writing-editor .tlui-slider__range { position: absolute; top: calc(50% - 2px); left: 0px; height: 3px; background-color: var(--color-selected); border-radius: 14px; } .ddc_ink_drawing-editor .tlui-slider__thumb, .ddc_ink_writing-editor .tlui-slider__thumb { all: unset; cursor: grab; display: block; width: 18px; height: 18px; position: relative; top: -1px; background-color: var(--color-panel); border-radius: 999px; box-shadow: inset 0px 0px 0px 2px var(--color-text-1); } .ddc_ink_drawing-editor .tlui-slider__thumb:active, .ddc_ink_writing-editor .tlui-slider__thumb:active { cursor: grabbing; box-shadow: inset 0px 0px 0px 2px var(--color-text-1), var(--shadow-1); } .ddc_ink_drawing-editor .tlui-slider__thumb:focus-visible, .ddc_ink_writing-editor .tlui-slider__thumb:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); } .ddc_ink_drawing-editor .tlui-kbd, .ddc_ink_writing-editor .tlui-kbd { font-family: inherit; font-size: 11px; line-height: 11px; display: grid; justify-items: center; grid-auto-flow: column; grid-template-columns: auto; grid-auto-columns: minmax(1em, auto); align-self: bottom; color: var(--color-text-1); margin-left: var(--space-4); } .ddc_ink_drawing-editor .tlui-kbd > span, .ddc_ink_writing-editor .tlui-kbd > span { width: 100%; text-align: center; display: inline; margin: 0px; padding: 2px; border-radius: 2px; } .ddc_ink_drawing-editor .tlui-kbd > span:last-child, .ddc_ink_writing-editor .tlui-kbd > span:last-child { padding-right: 0; } .ddc_ink_drawing-editor .tlui-kbd:not(:last-child), .ddc_ink_writing-editor .tlui-kbd:not(:last-child) { margin-right: var(--space-2); } .ddc_ink_drawing-editor .tlui-focus-button, .ddc_ink_writing-editor .tlui-focus-button { z-index: var(--layer-panels); pointer-events: all; } .ddc_ink_drawing-editor .tlui-popover, .ddc_ink_writing-editor .tlui-popover { position: relative; display: flex; align-content: stretch; } .ddc_ink_drawing-editor .tlui-popover__content, .ddc_ink_writing-editor .tlui-popover__content { position: relative; max-height: 75vh; margin: 0px; border: none; border-radius: var(--radius-3); background-color: var(--color-panel); box-shadow: var(--shadow-3); z-index: var(--layer-menus); overflow: hidden; overflow-y: auto; touch-action: auto; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; } .ddc_ink_drawing-editor .tlui-debug-panel, .ddc_ink_writing-editor .tlui-debug-panel { background-color: var(--color-low); width: 100%; display: grid; align-items: center; grid-template-columns: 1fr auto auto auto; justify-content: space-between; padding-left: var(--space-4); border-top: 1px solid var(--color-background); font-size: 12px; color: var(--color-text-1); z-index: var(--layer-panels); pointer-events: all; } .ddc_ink_drawing-editor .tlui-debug-panel__current-state, .ddc_ink_writing-editor .tlui-debug-panel__current-state { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ddc_ink_drawing-editor .tlui-debug-panel__fps, .ddc_ink_writing-editor .tlui-debug-panel__fps { margin-right: 8px; } .ddc_ink_drawing-editor .tlui-debug-panel__fps__slow, .ddc_ink_writing-editor .tlui-debug-panel__fps__slow { font-weight: bold; color: var(--color-warn); } .ddc_ink_drawing-editor .tlui-menu-zone, .ddc_ink_writing-editor .tlui-menu-zone { position: relative; z-index: var(--layer-panels); width: fit-content; border-right: 2px solid var(--color-background); border-bottom: 2px solid var(--color-background); border-bottom-right-radius: var(--radius-4); background-color: var(--color-low); } .ddc_ink_drawing-editor .tlui-menu-zone *[data-state=open]::after, .ddc_ink_writing-editor .tlui-menu-zone *[data-state=open]::after { background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-style-panel__wrapper, .ddc_ink_writing-editor .tlui-style-panel__wrapper { box-shadow: var(--shadow-2); border-radius: var(--radius-3); pointer-events: all; background-color: var(--color-panel); height: fit-content; max-height: 100%; margin: 8px; touch-action: auto; overscroll-behavior: none; overflow-y: auto; overflow-x: hidden; color: var(--color-text); } .ddc_ink_drawing-editor .tlui-style-panel, .ddc_ink_writing-editor .tlui-style-panel { position: relative; z-index: var(--layer-panels); pointer-events: all; width: 148px; max-width: 148px; } .ddc_ink_drawing-editor .tlui-style-panel::-webkit-scrollbar, .ddc_ink_writing-editor .tlui-style-panel::-webkit-scrollbar { display: none; } .ddc_ink_drawing-editor .tlui-style-panel .tlui-button.select, .ddc_ink_writing-editor .tlui-style-panel .tlui-button.select { width: 100%; } .ddc_ink_drawing-editor .tlui-style-panel__section, .ddc_ink_writing-editor .tlui-style-panel__section { display: flex; position: relative; flex-direction: column; } .ddc_ink_drawing-editor .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child), .ddc_ink_writing-editor .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) { border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-style-panel__section:empty, .ddc_ink_writing-editor .tlui-style-panel__section:empty { display: none; } .ddc_ink_drawing-editor .tlui-style-panel__section__common:not(:only-child), .ddc_ink_writing-editor .tlui-style-panel__section__common:not(:only-child) { margin-bottom: 7px; border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-style-panel__row, .ddc_ink_writing-editor .tlui-style-panel__row { display: flex; } .ddc_ink_drawing-editor .tlui-style-panel__row__extra-button, .ddc_ink_writing-editor .tlui-style-panel__row__extra-button { margin-left: -2px; } .ddc_ink_drawing-editor .tlui-style-panel__double-select-picker, .ddc_ink_writing-editor .tlui-style-panel__double-select-picker { display: flex; grid-template-columns: 1fr auto; align-items: center; padding-left: var(--space-4); color: var(--color-text-1); font-size: 12px; } .ddc_ink_drawing-editor .tlui-style-panel__double-select-picker-label, .ddc_ink_writing-editor .tlui-style-panel__double-select-picker-label { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex-grow: 2; max-width: 100%; } .ddc_ink_drawing-editor .tlui-style-panel__section *[data-state=open]::after, .ddc_ink_writing-editor .tlui-style-panel__section *[data-state=open]::after { background: var(--color-muted-0); } .ddc_ink_drawing-editor .tlui-input, .ddc_ink_writing-editor .tlui-input { background: none; margin: 0px; position: relative; z-index: 1; height: 40px; max-height: 40px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; font-weight: inherit; color: var(--color-text-1); padding: var(--space-4); padding-left: 0px; border: none; outline: none; text-overflow: ellipsis; width: 100%; user-select: all; text-rendering: optimizeLegibility; -webkit-user-select: auto !important; } .ddc_ink_drawing-editor .tlui-input__wrapper, .ddc_ink_writing-editor .tlui-input__wrapper { width: 100%; height: 44px; display: flex; align-items: center; gap: var(--space-4); color: var(--color-text); } .ddc_ink_drawing-editor .tlui-input__wrapper > .tlui-icon, .ddc_ink_writing-editor .tlui-input__wrapper > .tlui-icon { flex-shrink: 0; } @media (max-width: 600px) { @supports (-webkit-touch-callout: none) { .ddc_ink_drawing-editor, .ddc_ink_writing-editor { } .ddc_ink_drawing-editor .tlui-input, .ddc_ink_writing-editor .tlui-input { font-size: 16px; } } } .ddc_ink_drawing-editor .tlui-dialog__overlay, .ddc_ink_writing-editor .tlui-dialog__overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: var(--layer-overlays); background-color: var(--color-overlay); pointer-events: all; animation: fadeIn 0.12s ease-out; display: grid; place-items: center; overflow-y: auto; } .ddc_ink_drawing-editor .tlui-dialog__content, .ddc_ink_writing-editor .tlui-dialog__content { display: flex; flex-direction: column; position: relative; cursor: default; background-color: var(--color-panel); box-shadow: var(--shadow-3); border-radius: var(--radius-3); font-size: 12px; overflow: hidden; min-width: 300px; max-width: 80%; max-height: 80%; } .ddc_ink_drawing-editor .tlui-dialog__header, .ddc_ink_writing-editor .tlui-dialog__header { position: relative; display: flex; align-items: center; flex: 0; z-index: 999; padding-left: var(--space-4); color: var(--color-text); height: 44px; } .ddc_ink_drawing-editor .tlui-dialog__header__title, .ddc_ink_writing-editor .tlui-dialog__header__title { flex: 1; font-weight: inherit; font-size: 12px; margin: 0px; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-dialog__header__close, .ddc_ink_writing-editor .tlui-dialog__header__close { justify-self: flex-end; } .ddc_ink_drawing-editor .tlui-dialog__body, .ddc_ink_writing-editor .tlui-dialog__body { padding: var(--space-4) var(--space-4); flex: 0 1; overflow-y: auto; overflow-x: hidden; color: var(--color-text-1); user-select: all; -webkit-user-select: text; } .ddc_ink_drawing-editor .tlui-dialog__footer, .ddc_ink_writing-editor .tlui-dialog__footer { position: relative; z-index: 999; } .ddc_ink_drawing-editor .tlui-dialog__footer__actions, .ddc_ink_writing-editor .tlui-dialog__footer__actions { display: flex; align-items: center; justify-content: flex-end; } .ddc_ink_drawing-editor .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n+2), .ddc_ink_writing-editor .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n+2) { margin-right: -4px; } .ddc_ink_drawing-editor .tlui-toolbar, .ddc_ink_writing-editor .tlui-toolbar { grid-column: 1/span 3; grid-row: 1; display: flex; align-items: center; justify-content: center; flex-grow: 2; padding-bottom: calc(var(--space-3) + var(--sab)); } .ddc_ink_drawing-editor .tlui-toolbar__inner, .ddc_ink_writing-editor .tlui-toolbar__inner { position: relative; width: fit-content; display: flex; gap: var(--space-3); align-items: flex-end; } .ddc_ink_drawing-editor .tlui-toolbar__left, .ddc_ink_writing-editor .tlui-toolbar__left { width: fit-content; } .ddc_ink_drawing-editor .tlui-toolbar__extras, .ddc_ink_writing-editor .tlui-toolbar__extras { position: relative; z-index: 1; width: 100%; pointer-events: none; top: 6px; height: 48px; } .ddc_ink_drawing-editor .tlui-toolbar__extras:empty, .ddc_ink_writing-editor .tlui-toolbar__extras:empty { display: none; } .ddc_ink_drawing-editor .tlui-toolbar__extras__controls, .ddc_ink_writing-editor .tlui-toolbar__extras__controls { display: flex; position: relative; flex-direction: row; z-index: 1; background-color: var(--color-low); border-top-left-radius: var(--radius-4); border-top-right-radius: var(--radius-4); border: 2px solid var(--color-background); margin-left: 8px; margin-right: 0px; pointer-events: all; width: fit-content; } .ddc_ink_drawing-editor .tlui-toolbar__tools, .ddc_ink_writing-editor .tlui-toolbar__tools { display: flex; flex-direction: row; background-color: var(--color-low); border-radius: var(--radius-4); z-index: var(--layer-panels); pointer-events: all; position: relative; align-items: center; background: var(--color-panel); box-shadow: var(--shadow-2); } .ddc_ink_drawing-editor .tlui-toolbar__overflow, .ddc_ink_writing-editor .tlui-toolbar__overflow { width: 40px; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-toolbar__overflow, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-toolbar__overflow { width: 32px; padding: 0px; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-toolbar *[data-state=open]::after, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-toolbar *[data-state=open]::after { background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-help-menu, .ddc_ink_writing-editor .tlui-help-menu { pointer-events: all; position: absolute; bottom: var(--space-2); right: var(--space-2); z-index: var(--layer-panels); border: 2px solid var(--color-background); border-radius: 100%; } .ddc_ink_drawing-editor .tlui-context-menu__move-to-page__name, .ddc_ink_writing-editor .tlui-context-menu__move-to-page__name { max-width: min(300px, 35vw); overflow: hidden; text-overflow: ellipsis; } .ddc_ink_drawing-editor .tlui-context-menu__move-to-page__name[data-disabled], .ddc_ink_writing-editor .tlui-context-menu__move-to-page__name[data-disabled] { color: var(--color-text-3); pointer-events: none; } .ddc_ink_drawing-editor .tlui-menu:empty, .ddc_ink_writing-editor .tlui-menu:empty { display: none; } .ddc_ink_drawing-editor .tlui-menu, .ddc_ink_writing-editor .tlui-menu { z-index: var(--layer-menus); height: fit-content; width: fit-content; max-height: 80vh; border-radius: var(--radius-3); pointer-events: all; touch-action: auto; overflow-y: auto; overscroll-behavior: none; background-color: var(--color-panel); box-shadow: var(--shadow-3); } .ddc_ink_drawing-editor .tlui-menu::-webkit-scrollbar, .ddc_ink_writing-editor .tlui-menu::-webkit-scrollbar { display: none; } .ddc_ink_drawing-editor .tlui-menu__arrow, .ddc_ink_writing-editor .tlui-menu__arrow { position: relative; top: -1px; fill: var(--color-panel); stroke: var(--color-panel-contrast); stroke-width: 1px; } .ddc_ink_drawing-editor .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu__group { width: 100%; } .ddc_ink_drawing-editor .tlui-menu__group:empty, .ddc_ink_writing-editor .tlui-menu__group:empty { display: none; } .ddc_ink_drawing-editor .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu__group { border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-menu__group:nth-last-of-type(1), .ddc_ink_writing-editor .tlui-menu__group:nth-last-of-type(1) { border-bottom: none; } .ddc_ink_drawing-editor .tlui-menu__submenu__trigger[data-state=open]:not(:hover)::after, .ddc_ink_writing-editor .tlui-menu__submenu__trigger[data-state=open]:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-menu__submenu__trigger[data-direction=left][data-state=open]:not(:hover)::after, .ddc_ink_writing-editor .tlui-menu__submenu__trigger[data-direction=left][data-state=open]:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-menu[data-size=large] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=large] > .tlui-menu__group { min-width: initial; } .ddc_ink_drawing-editor .tlui-menu[data-size=medium] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=medium] > .tlui-menu__group { min-width: 144px; } .ddc_ink_drawing-editor .tlui-menu[data-size=small] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=small] > .tlui-menu__group { min-width: 96px; } .ddc_ink_drawing-editor .tlui-menu[data-size=tiny] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=tiny] > .tlui-menu__group { min-width: 0px; } .ddc_ink_drawing-editor .tlui-actions-menu, .ddc_ink_writing-editor .tlui-actions-menu { max-height: calc(100vh - 150px); } .ddc_ink_drawing-editor .tlui-toast__viewport, .ddc_ink_writing-editor .tlui-toast__viewport { position: absolute; inset: 0px; margin: 0px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; gap: var(--space-3); pointer-events: none; padding: 0px var(--space-3) 64px 0px; z-index: var(--layer-toasts); } .ddc_ink_drawing-editor .tlui-toast__viewport > *, .ddc_ink_writing-editor .tlui-toast__viewport > * { pointer-events: all; } .ddc_ink_drawing-editor .tlui-toast__icon, .ddc_ink_writing-editor .tlui-toast__icon { padding-top: var(--space-4); padding-left: var(--space-4); color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-toast__container, .ddc_ink_writing-editor .tlui-toast__container { min-width: 200px; display: flex; flex-direction: row; background-color: var(--color-panel); box-shadow: var(--shadow-2); border-radius: var(--radius-3); font-size: 12px; } .ddc_ink_drawing-editor .tlui-toast__main, .ddc_ink_writing-editor .tlui-toast__main { flex-grow: 2; max-width: 280px; } .ddc_ink_drawing-editor .tlui-toast__content, .ddc_ink_writing-editor .tlui-toast__content { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .ddc_ink_drawing-editor .tlui-toast__title, .ddc_ink_writing-editor .tlui-toast__title { font-weight: bold; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-toast__description, .ddc_ink_writing-editor .tlui-toast__description { color: var(--color-text-1); padding: var(--space-3); margin: 0px; padding: 0px; } .ddc_ink_drawing-editor .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions, .ddc_ink_writing-editor .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions { padding-left: 0px; } .ddc_ink_drawing-editor .tlui-toast__actions, .ddc_ink_writing-editor .tlui-toast__actions { display: flex; flex-direction: row; justify-content: flex-start; margin-left: 0; } .ddc_ink_drawing-editor .tlui-toast__close, .ddc_ink_writing-editor .tlui-toast__close { align-self: flex-end; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .ddc_ink_drawing-editor .tlui-toast__container[data-state=open], .ddc_ink_writing-editor .tlui-toast__container[data-state=open] { animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .ddc_ink_drawing-editor .tlui-toast__container[data-state=closed], .ddc_ink_writing-editor .tlui-toast__container[data-state=closed] { animation: hide 100ms ease-in; } .ddc_ink_drawing-editor .tlui-toast__container[data-swipe=move], .ddc_ink_writing-editor .tlui-toast__container[data-swipe=move] { transform: translateX(var(--radix-toast-swipe-move-x)); } .ddc_ink_drawing-editor .tlui-toast__container[data-swipe=cancel], .ddc_ink_writing-editor .tlui-toast__container[data-swipe=cancel] { transform: translateX(0); transition: transform 200ms ease-out; } .ddc_ink_drawing-editor .tlui-toast__container[data-swipe=end], .ddc_ink_writing-editor .tlui-toast__container[data-swipe=end] { animation: swipe-out 100ms ease-out; } } .ddc_ink_drawing-editor .tlui-layout__bottom, .ddc_ink_writing-editor .tlui-layout__bottom { grid-row: 2; } .ddc_ink_drawing-editor .tlui-layout__bottom__main, .ddc_ink_writing-editor .tlui-layout__bottom__main { width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; } .ddc_ink_drawing-editor .tlui-navigation-panel, .ddc_ink_writing-editor .tlui-navigation-panel { display: flex; width: min-content; flex-direction: column; z-index: var(--layer-panels); pointer-events: all; position: absolute; left: 0px; bottom: 0px; } .ddc_ink_drawing-editor .tlui-navigation-panel::before, .ddc_ink_writing-editor .tlui-navigation-panel::before { content: ""; display: block; position: absolute; z-index: -1; inset: -2px -2px 0px 0px; border-radius: 0; border-top: 2px solid var(--color-background); border-right: 2px solid var(--color-background); border-top-right-radius: var(--radius-4); background-color: var(--color-low); } .ddc_ink_drawing-editor .tlui-navigation-panel__toggle .tlui-icon, .ddc_ink_writing-editor .tlui-navigation-panel__toggle .tlui-icon { opacity: 0.24; } .ddc_ink_drawing-editor .tlui-navigation-panel__toggle:active .tlui-icon, .ddc_ink_writing-editor .tlui-navigation-panel__toggle:active .tlui-icon { opacity: 1; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-navigation-panel__toggle:hover .tlui-icon, .ddc_ink_writing-editor .tlui-navigation-panel__toggle:hover .tlui-icon { opacity: 1; } } .ddc_ink_drawing-editor .tlui-minimap, .ddc_ink_writing-editor .tlui-minimap { width: 100%; height: 96px; min-height: 96px; overflow: hidden; padding: var(--space-3); padding-top: 0px; } .ddc_ink_drawing-editor .tlui-minimap__canvas, .ddc_ink_writing-editor .tlui-minimap__canvas { position: relative; width: 100%; height: 100%; } @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slide-in { from { transform: translateX(calc(100% + var(--space-3))); } to { transform: translateX(0px); } } @keyframes swipe-out { from { transform: translateX(var(--radix-toast-swipe-end-x)); } to { transform: translateX(calc(100% + var(--space-3))); } } .ddc_ink_drawing-editor .tlui-page-menu__wrapper, .ddc_ink_writing-editor .tlui-page-menu__wrapper { position: relative; display: flex; flex-direction: column; width: 220px; height: fit-content; max-height: 50vh; } .ddc_ink_drawing-editor .tlui-page-menu__trigger, .ddc_ink_writing-editor .tlui-page-menu__trigger { width: 128px; } .ddc_ink_drawing-editor .tlui-page-menu__header, .ddc_ink_writing-editor .tlui-page-menu__header { display: flex; flex-direction: row; align-items: center; width: 100%; height: 40px; padding-left: var(--space-4); border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-page-menu__header > .tlui-button:nth-of-type(1), .ddc_ink_writing-editor .tlui-page-menu__header > .tlui-button:nth-of-type(1) { margin-right: -4px; } .ddc_ink_drawing-editor .tlui-page-menu__header__title, .ddc_ink_writing-editor .tlui-page-menu__header__title { color: var(--color-text); font-size: 12px; flex-grow: 2; } .ddc_ink_drawing-editor .tlui-page-menu__name, .ddc_ink_writing-editor .tlui-page-menu__name { flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddc_ink_drawing-editor .tlui-page-menu__list, .ddc_ink_writing-editor .tlui-page-menu__list { position: relative; touch-action: auto; flex-direction: column; max-height: 100%; overflow-x: hidden; overflow-y: auto; touch-action: auto; } .ddc_ink_drawing-editor .tlui-page-menu__item, .ddc_ink_writing-editor .tlui-page-menu__item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0px; } .ddc_ink_drawing-editor .tlui-page-menu__item:nth-of-type(n + 2), .ddc_ink_writing-editor .tlui-page-menu__item:nth-of-type(n + 2) { margin-top: -4px; } .ddc_ink_drawing-editor .tlui-page-menu__item__button, .ddc_ink_writing-editor .tlui-page-menu__item__button { width: 100%; } .ddc_ink_drawing-editor .tlui-page-menu__item__button:not(:only-child), .ddc_ink_writing-editor .tlui-page-menu__item__button:not(:only-child) { flex-grow: 2; margin-right: -2px; } .ddc_ink_drawing-editor .tlui-page-menu__item__button > span, .ddc_ink_writing-editor .tlui-page-menu__item__button > span { display: block; flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddc_ink_drawing-editor .tlui-page-menu__item__button__checkbox, .ddc_ink_writing-editor .tlui-page-menu__item__button__checkbox { padding-left: 35px; } .ddc_ink_drawing-editor .tlui-page-menu__item__button__check, .ddc_ink_writing-editor .tlui-page-menu__item__button__check { position: absolute; left: 0px; width: 24px; padding-left: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable, .ddc_ink_writing-editor .tlui-page_menu__item__sortable { position: absolute; top: 0px; left: 0px; width: 100%; height: fit-content; display: flex; flex-direction: row; align-items: center; overflow: hidden; z-index: 1; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__title, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__title { flex: 1; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__title > .tlui-input__wrapper, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__title > .tlui-input__wrapper { height: 100%; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable:focus-within, .ddc_ink_writing-editor .tlui-page_menu__item__sortable:focus-within { z-index: 10; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__handle, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__handle { touch-action: none; width: 32px; min-width: 0px; height: 40px; cursor: grab; color: var(--color-text-3); flex-shrink: 0; margin-right: -9px; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__handle:active, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__handle:active { cursor: grabbing; } .ddc_ink_drawing-editor .tlui-page-menu__item__input, .ddc_ink_writing-editor .tlui-page-menu__item__input { margin-left: 12px; height: 100%; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu, .ddc_ink_writing-editor .tlui-page_menu__item__submenu { pointer-events: all; flex: 0; cursor: pointer; margin: 0px; display: none; margin-left: -2px; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu[data-isediting=true], .ddc_ink_writing-editor .tlui-page_menu__item__submenu[data-isediting=true] { display: block; opacity: 1; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu > .tlui-button { opacity: 0; } @media (any-pointer: coarse) { .ddc_ink_drawing-editor .tlui-page_menu__item__submenu > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu > .tlui-button { opacity: 1; } } .ddc_ink_drawing-editor .tlui-page-menu__item__button .tlui-button__icon, .ddc_ink_writing-editor .tlui-page-menu__item__button .tlui-button__icon { margin-right: 4px; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-page_menu__item__submenu, .ddc_ink_writing-editor .tlui-page_menu__item__submenu { display: block; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu[data-isediting=true] > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu[data-isediting=true] > .tlui-button { opacity: 0; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu > .tlui-button[data-state=open], .ddc_ink_drawing-editor .tlui-page_menu__item__submenu:hover > .tlui-button, .ddc_ink_drawing-editor .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu > .tlui-button[data-state=open], .ddc_ink_writing-editor .tlui-page_menu__item__submenu:hover > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button { opacity: 1; } } .ddc_ink_drawing-editor .tlui-edit-link-dialog, .ddc_ink_writing-editor .tlui-edit-link-dialog { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text); } .ddc_ink_drawing-editor .tlui-edit-link-dialog__input, .ddc_ink_writing-editor .tlui-edit-link-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } .ddc_ink_drawing-editor .tlui-embed__spacer, .ddc_ink_writing-editor .tlui-embed__spacer { flex-grow: 2; min-height: 0px; margin-left: calc(-1 * var(--space-4)); margin-top: calc(-1 * var(--space-4)); pointer-events: none; } .ddc_ink_drawing-editor .tlui-embed-dialog__list, .ddc_ink_writing-editor .tlui-embed-dialog__list { display: flex; flex-direction: column; padding-bottom: var(--space-5); } .ddc_ink_drawing-editor .tlui-embed-dialog__item__image, .ddc_ink_writing-editor .tlui-embed-dialog__item__image { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-size: contain; background-repeat: no-repeat; background-position: center center; } .ddc_ink_drawing-editor .tlui-embed-dialog__enter, .ddc_ink_writing-editor .tlui-embed-dialog__enter { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-embed-dialog__input, .ddc_ink_writing-editor .tlui-embed-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } .ddc_ink_drawing-editor .tlui-embed-dialog__warning, .ddc_ink_writing-editor .tlui-embed-dialog__warning { color: var(--color-warn); text-shadow: none; } .ddc_ink_drawing-editor .tlui-embed-dialog__instruction__link, .ddc_ink_writing-editor .tlui-embed-dialog__instruction__link { display: flex; gap: var(--space-1); margin-top: var(--space-4); } .ddc_ink_drawing-editor .tlui-embed-dialog__enter a, .ddc_ink_writing-editor .tlui-embed-dialog__enter a { color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-following-indicator, .ddc_ink_writing-editor .tlui-following-indicator { display: block; position: absolute; inset: 0px; border-width: 2px; border-style: solid; z-index: var(--layer-following-indicator); pointer-events: none; } .ddc_ink_drawing-editor .tlui-offline-indicator, .ddc_ink_writing-editor .tlui-offline-indicator { display: flex; flex-direction: row; gap: var(--space-3); color: var(--color-text); background-color: var(--color-low); border: 3px solid var(--color-background); padding: 0px var(--space-5); height: 42px; align-items: center; justify-content: center; border-radius: 99px; opacity: 0; animation: fade-in; animation-duration: 0.12s; animation-delay: 2s; animation-fill-mode: forwards; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__header, .ddc_ink_writing-editor .tlui-shortcuts-dialog__header { border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__body, .ddc_ink_writing-editor .tlui-shortcuts-dialog__body { position: relative; columns: 3; column-gap: var(--space-9); pointer-events: all; touch-action: auto; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__body__tablet, .ddc_ink_writing-editor .tlui-shortcuts-dialog__body__tablet { columns: 2; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__body__mobile, .ddc_ink_writing-editor .tlui-shortcuts-dialog__body__mobile { columns: 1; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__group, .ddc_ink_writing-editor .tlui-shortcuts-dialog__group { break-inside: avoid-column; padding-bottom: var(--space-6); } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__group__title, .ddc_ink_writing-editor .tlui-shortcuts-dialog__group__title { font-size: inherit; font-weight: inherit; margin: 0px; color: var(--color-text-3); height: 32px; display: flex; align-items: center; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__group__content, .ddc_ink_writing-editor .tlui-shortcuts-dialog__group__content { display: flex; flex-direction: column; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__key-pair, .ddc_ink_writing-editor .tlui-shortcuts-dialog__key-pair { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; height: 32px; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__key-pair__key, .ddc_ink_writing-editor .tlui-shortcuts-dialog__key-pair__key { flex: 1; font-size: 12px; } .ddc_ink_writing-editor { transition: height 0.5s ease; } .ddc_ink_writing-editor .tl-container { outline: none !important; } .ddc_ink_writing-editor .tl-container .tl-canvas { background: none; overflow: hidden; } .ddc_ink_writing-editor .tl-container .tl-canvas .tl-background { background: none; } .ddc_ink_writing-editor { outline: solid 8px var(--color-base-10); border-radius: 20px; background-color: var(--color-base-05); } .ddc_ink_writing-editor line { stroke: var(--color-base-50); stroke-width: 2px; } /* src/tldraw/writing-menu/writing-menu.scss */ .ink_menu-bar { pointer-events: none; } .ink_menu-bar button { animation: menu-button_scale-up 0.3s 0.1s ease-out; animation-fill-mode: both; pointer-events: auto; background-color: var(--interactive-normal); color: var(--color-base-60); fill: var(--color-base-60); } .ink_menu-bar button:hover { background-color: var(--interactive-hover); color: var(--color-base-100); fill: var(--color-base-100); } .ink_menu-bar button:disabled { animation: menu-button_scale-up 0.3s ease-out; opacity: 1; cursor: default; color: var(--text-on-accent); fill: var(--text-on-accent); background-color: var(--interactive-accent); } .ink_menu-bar button:disabled:hover { box-shadow: var(--input-shadow); } .ink_menu-bar_full { flex-grow: 1; display: flex; flex-direction: row; justify-content: space-between; } .ink_menu-bar_floating { flex-grow: 1; display: flex; flex-direction: row; justify-content: space-between; } @keyframes menu-button_scale-up { from { transform: scale(0); } to { transform: scale(1); } } .ink_quick-menu { display: flex; flex-direction: row; gap: 8px; } .ink_quick-menu button { width: 2.5em; height: 2.5em; border-radius: 0.8em; padding: 0 !important; } .ink_quick-menu button svg { width: 1.5em !important; height: 1.5em !important; } .ink_quick-menu button:disabled { visibility: hidden; } .ink_tool-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: row; justify-content: center; gap: 8px; } .ink_tool-menu button { width: 2.5em; height: 2.5em; border-radius: 2.5em; padding: 0 !important; } .ink_tool-menu button svg { width: 1.5em !important; height: 1.5em !important; } .ink_other-menu { display: flex; flex-direction: row; } /* src/tldraw/primary-menu-bar/primary-menu-bar.scss */ .ink_primary-menu-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; padding: 8px; display: flex; flex-direction: row; justify-content: space-between; pointer-events: none; } .cm-embed-block .ink_primary-menu-bar { padding: 8px var(--file-margins); transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0.5, 0, 1); } .cm-embed-block .ink_primary-menu-bar.ddc_ink_active { transform: translate(0, -100%); } /* src/tldraw/extended-writing-menu/extended-writing-menu.scss */ .ink_extended-writing-menu { display: flex; gap: 4px; pointer-events: none; } .ink_extended-writing-menu button { width: auto; pointer-events: auto; background-color: var(--interactive-normal); color: var(--color-base-60); fill: var(--color-base-60); } .ink_extended-writing-menu button:hover { background-color: var(--interactive-hover); color: var(--color-base-100); fill: var(--color-base-100); } .ink_extended-writing-menu button:disabled { cursor: default; color: var(--text-on-accent); fill: var(--text-on-accent); background-color: var(--interactive-accent); } .ink_extended-writing-menu button:disabled:hover { box-shadow: var(--input-shadow); } .ink_extended-writing-menu button { width: 2.5em; height: 2.5em; border-radius: 0.8em; padding: 0 !important; } .ink_extended-writing-menu button.ddc_ink_btn-slim { width: 1.9em; height: 2.5em; } .ink_extended-writing-menu button svg { width: 1.5em !important; height: 1.5em !important; } /* src/tldraw/overflow-menu/overflow-menu.scss */ .ddc_ink_overflow-button-and-menu { position: relative; } .ddc_ink_overflow-button-and-menu .ddc_ink_dropdown { position: absolute; top: 100%; right: 0; width: 10em; background-color: var(--interactive-normal); color: var(--color-base-60); fill: var(--color-base-60); box-shadow: var(--input-shadow); border-radius: 10px; display: none; } .ddc_ink_overflow-button-and-menu .ddc_ink_dropdown.ddc_ink_visible { display: block; } .ddc_ink_overflow-button-and-menu .ddc_ink_dropdown li { padding: 0.5em; } /* src/tldraw/secondary-menu-bar/secondary-menu-bar.scss */ .ink_secondary-menu-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 8px; display: flex; flex-direction: row; justify-content: center; pointer-events: none; } .cm-embed-block .ink_secondary-menu-bar { padding: 8px var(--file-margins); transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0, 0.5, 0, 1); } .cm-embed-block .ink_secondary-menu-bar.ddc_ink_active { transform: translate(0, 50%); } /* src/tldraw/modify-menu/modify-menu.scss */ .ink_modify-menu { display: flex; flex-direction: row; gap: 8px; } .ink_modify-menu button { width: 2.5em; height: 2.5em; border-radius: 0.8em; padding: 0 !important; } .ink_modify-menu button svg { width: 1.5em !important; height: 1.5em !important; } .ink_modify-menu button:disabled { visibility: hidden; } /* src/tldraw/writing/writing-embed-preview/writing-embed-preview.scss */ .ddc_ink_writing-embed-preview { pointer-events: none; overflow: visible; } .ddc_ink_writing-embed-preview.ddc_ink_visible-background { border: solid 1px var(--color-base-20); border-radius: 20px; background-color: var(--color-base-05); } .ddc_ink_writing-embed-preview line { stroke: var(--color-base-50); stroke-width: 2px; } .ddc_ink_writing-embed-preview:not(.ddc_ink_visible-lines) line { display: none; } .theme-dark .ddc_ink_writing-embed-preview path { fill: rgb(242, 242, 242); } .theme-light .ddc_ink_writing-embed-preview path { fill: rgb(29, 29, 29); } /* src/tldraw/drawing/tldraw-drawing-editor.scss */ .ddc_ink_drawing-editor, .ddc_ink_writing-editor { } .ddc_ink_drawing-editor .tl-container, .ddc_ink_writing-editor .tl-container { width: 100%; height: 100%; font-size: 12px; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 28px; --space-8: 32px; --space-9: 64px; --space-10: 72px; --radius-0: 2px; --radius-1: 4px; --radius-2: 6px; --radius-3: 9px; --radius-4: 11px; --layer-background: 100; --layer-grid: 150; --layer-canvas: 200; --layer-shapes: 300; --layer-overlays: 400; --layer-following-indicator: 1000; --tl-zoom: 1; --tl-cursor-none: none; --tl-cursor-default: url("data:image/svg+xml,") 12 8, default; --tl-cursor-pointer: url("data:image/svg+xml,") 14 10, pointer; --tl-cursor-cross: url("data:image/svg+xml,") 16 16, crosshair; --tl-cursor-move: url("data:image/svg+xml,") 16 16, move; --tl-cursor-grab: url("data:image/svg+xml,") 16 16, grab; --tl-cursor-grabbing: url("data:image/svg+xml,") 16 16, grabbing; --tl-cursor-text: url("data:image/svg+xml,") 4 10, text; --tl-cursor-zoom-in: url("data:image/svg+xml,") 16 16, zoom-in; --tl-cursor-zoom-out: url("data:image/svg+xml,") 16 16, zoom-out; --tl-cursor: var(--tl-cursor-default); --tl-cursor-resize-edge: ew-resize; --tl-cursor-resize-corner: nesw-resize; --tl-cursor-ew-resize: ew-resize; --tl-cursor-ns-resize: ns-resize; --tl-cursor-nesw-resize: nesw-resize; --tl-cursor-nwse-resize: nwse-resize; --tl-cursor-rotate: pointer; --tl-cursor-nwse-rotate: pointer; --tl-cursor-nesw-rotate: pointer; --tl-cursor-senw-rotate: pointer; --tl-cursor-swne-rotate: pointer; --tl-scale: calc(1 / var(--tl-zoom)); --tl-font-draw: "tldraw_draw", sans-serif; --tl-font-sans: "tldraw_sans", sans-serif; --tl-font-serif: "tldraw_serif", serif; --tl-font-mono: "tldraw_mono", monospace; --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px); --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px); --tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background); position: relative; inset: 0px; height: 100%; width: 100%; overflow: clip; } .ddc_ink_drawing-editor .tl-theme__light, .ddc_ink_writing-editor .tl-theme__light { --color-accent: hsl(0, 76%, 60%); --color-background: hsl(210, 20%, 98%); --color-brush-fill: hsl(0, 0%, 56%, 10.2%); --color-brush-stroke: hsl(0, 0%, 56%, 25.1%); --color-grid: hsl(0, 0%, 43%); --color-low: hsl(204, 16%, 94%); --color-low-border: hsl(204, 16%, 92%); --color-culled: hsl(204, 14%, 93%); --color-muted-none: hsl(0, 0%, 0%, 0%); --color-muted-0: hsl(0, 0%, 0%, 2%); --color-muted-1: hsl(0, 0%, 0%, 10%); --color-muted-2: hsl(0, 0%, 0%, 4.3%); --color-hint: hsl(0, 0%, 0%, 5.5%); --color-overlay: hsl(0, 0%, 0%, 20%); --color-divider: hsl(0, 0%, 91%); --color-panel-contrast: hsl(0, 0%, 100%); --color-panel-overlay: hsl(0, 0%, 100%, 82%); --color-panel: hsl(0, 0%, 99%); --color-focus: hsl(214, 100%, 29%); --color-selected: hsl(214, 84%, 56%); --color-selected-contrast: hsl(0, 0%, 100%); --color-selection-fill: hsl(210, 100%, 56%, 24%); --color-selection-stroke: hsl(214, 84%, 56%); --color-text-0: hsl(0, 0%, 11%); --color-text-1: hsl(0, 0%, 18%); --color-text-3: hsl(220, 2%, 65%); --color-text-shadow: hsl(0, 0%, 100%); --color-primary: hsl(214, 84%, 56%); --color-warn: hsl(0, 90%, 43%); --color-text: hsl(0, 0%, 0%); --color-laser: hsl(0, 100%, 50%); --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%); --shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%), 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%), 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast); } .ddc_ink_drawing-editor .tl-theme__dark, .ddc_ink_writing-editor .tl-theme__dark { --color-accent: hsl(0, 76%, 60%); --color-background: hsl(240, 5%, 8%); --color-brush-fill: hsl(0, 0%, 71%, 5.1%); --color-brush-stroke: hsl(0, 0%, 71%, 25.1%); --color-grid: hsl(0, 0%, 56%); --color-low: hsl(260, 5%, 12.5%); --color-low-border: hsl(207, 10%, 10%); --color-culled: hsl(210, 11%, 19%); --color-muted-none: hsl(0, 0%, 100%, 0%); --color-muted-0: hsl(0, 0%, 100%, 2%); --color-muted-1: hsl(0, 0%, 100%, 10%); --color-muted-2: hsl(0, 0%, 100%, 5%); --color-hint: hsl(0, 0%, 100%, 7%); --color-overlay: hsl(0, 0%, 0%, 50%); --color-divider: hsl(240, 9%, 25%); --color-panel-contrast: hsl(240, 13%, 22%); --color-panel: hsl(220, 8%, 15%); --color-panel-overlay: hsl(210, 11%, 24%, 82%); --color-focus: hsl(217, 76%, 80%); --color-selected: hsl(217, 89%, 61%); --color-selected-contrast: hsl(0, 0%, 100%); --color-selection-fill: hsl(209, 100%, 57%, 20%); --color-selection-stroke: hsl(214, 84%, 56%); --color-text-0: hsl(0, 9%, 94%); --color-text-1: hsl(0, 0%, 85%); --color-text-3: hsl(210, 6%, 45%); --color-text-shadow: hsl(210, 13%, 18%); --color-primary: hsl(214, 84%, 56%); --color-warn: hsl(0, 81%, 66%); --color-text: hsl(210, 17%, 98%); --color-laser: hsl(0, 100%, 50%); --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%), inset 0px 0px 0px 1px var(--color-panel-contrast); } .ddc_ink_drawing-editor .tl-counter-scaled, .ddc_ink_writing-editor .tl-counter-scaled { transform: scale(var(--tl-scale)); transform-origin: top left; width: calc(100% * var(--tl-zoom)); height: calc(100% * var(--tl-zoom)); } .ddc_ink_drawing-editor .tl-container, .ddc_ink_drawing-editor .tl-container *, .ddc_ink_writing-editor .tl-container, .ddc_ink_writing-editor .tl-container * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; scrollbar-highlight-color: transparent; -webkit-user-select: none; user-select: none; box-sizing: border-box; outline: none; } .ddc_ink_drawing-editor .tl-container a, .ddc_ink_writing-editor .tl-container a { -webkit-touch-callout: initial; } .ddc_ink_drawing-editor .tl-container:focus-within, .ddc_ink_writing-editor .tl-container:focus-within { outline: 1px solid var(--color-low); } .ddc_ink_drawing-editor input, .ddc_ink_drawing-editor *[contenteditable], .ddc_ink_drawing-editor *[contenteditable] *, .ddc_ink_writing-editor input, .ddc_ink_writing-editor *[contenteditable], .ddc_ink_writing-editor *[contenteditable] * { -webkit-user-select: text; } .ddc_ink_drawing-editor .tl-canvas, .ddc_ink_writing-editor .tl-canvas { position: absolute; inset: 0px; height: 100%; width: 100%; color: var(--color-text); z-index: var(--layer-canvas); cursor: var(--tl-cursor); overflow: clip; content-visibility: auto; touch-action: none; contain: strict; } .ddc_ink_drawing-editor .tl-shapes, .ddc_ink_writing-editor .tl-shapes { position: relative; z-index: var(--layer-shapes); } .ddc_ink_drawing-editor .tl-overlays, .ddc_ink_writing-editor .tl-overlays { position: absolute; inset: 0px; height: 100%; width: 100%; contain: strict; pointer-events: none; z-index: var(--layer-overlays); } .ddc_ink_drawing-editor .tl-overlays__item, .ddc_ink_writing-editor .tl-overlays__item { position: absolute; top: 0px; left: 0px; overflow: visible; pointer-events: none; transform-origin: top left; } .ddc_ink_drawing-editor .tl-svg-context, .ddc_ink_writing-editor .tl-svg-context { position: absolute; top: 0px; left: 0px; pointer-events: none; } .ddc_ink_drawing-editor .tl-background, .ddc_ink_writing-editor .tl-background { position: absolute; background-color: var(--color-background); inset: 0px; height: 100%; width: 100%; z-index: var(--layer-background); } .ddc_ink_drawing-editor .tl-grid, .ddc_ink_writing-editor .tl-grid { position: absolute; inset: 0px; width: 100%; height: 100%; touch-action: none; pointer-events: none; z-index: var(--layer-grid); contain: strict; } .ddc_ink_drawing-editor .tl-grid-dot, .ddc_ink_writing-editor .tl-grid-dot { fill: var(--color-grid); } .ddc_ink_drawing-editor .tl-html-layer, .ddc_ink_writing-editor .tl-html-layer { position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; contain: layout style size; } .ddc_ink_drawing-editor .tl-brush, .ddc_ink_writing-editor .tl-brush { stroke-width: calc(var(--tl-scale) * 1px); contain: size layout; } .ddc_ink_drawing-editor .tl-brush__default, .ddc_ink_writing-editor .tl-brush__default { stroke: var(--color-brush-stroke); fill: var(--color-brush-fill); } .ddc_ink_drawing-editor .tl-scribble, .ddc_ink_writing-editor .tl-scribble { stroke-linejoin: round; stroke-linecap: round; pointer-events: none; contain: size layout; } .ddc_ink_drawing-editor .tl-shape, .ddc_ink_writing-editor .tl-shape { position: absolute; pointer-events: none; overflow: visible; transform-origin: top left; contain: size layout; } .ddc_ink_drawing-editor .tl-shape__culled, .ddc_ink_writing-editor .tl-shape__culled { position: relative; background-color: var(--color-culled); } .ddc_ink_drawing-editor .tl-svg-container, .ddc_ink_writing-editor .tl-svg-container { position: absolute; inset: 0px; height: 100%; width: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: top left; overflow: visible; } .ddc_ink_drawing-editor .tl-html-container, .ddc_ink_writing-editor .tl-html-container { position: absolute; inset: 0px; height: 100%; width: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: top left; color: inherit; } .ddc_ink_drawing-editor .tl-collaborator__scribble, .ddc_ink_writing-editor .tl-collaborator__scribble { z-index: 10; } .ddc_ink_drawing-editor .tl-collaborator__brush, .ddc_ink_writing-editor .tl-collaborator__brush { z-index: 20; } .ddc_ink_drawing-editor .tl-collaborator__shape-indicator, .ddc_ink_writing-editor .tl-collaborator__shape-indicator { z-index: 30; } .ddc_ink_drawing-editor .tl-user-scribble, .ddc_ink_writing-editor .tl-user-scribble { z-index: 40; } .ddc_ink_drawing-editor .tl-user-brush, .ddc_ink_writing-editor .tl-user-brush { z-index: 50; } .ddc_ink_drawing-editor .tl-user-indicator__selected, .ddc_ink_writing-editor .tl-user-indicator__selected { z-index: 60; } .ddc_ink_drawing-editor .tl-user-indicator__hovered, .ddc_ink_writing-editor .tl-user-indicator__hovered { z-index: 70; } .ddc_ink_drawing-editor .tl-user-handles, .ddc_ink_writing-editor .tl-user-handles { z-index: 80; } .ddc_ink_drawing-editor .tl-user-snapline, .ddc_ink_writing-editor .tl-user-snapline { z-index: 90; } .ddc_ink_drawing-editor .tl-selection__fg, .ddc_ink_writing-editor .tl-selection__fg { pointer-events: none; z-index: 100; } .ddc_ink_drawing-editor .tl-user-indicator__hint, .ddc_ink_writing-editor .tl-user-indicator__hint { z-index: 110; stroke-width: calc(2.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-collaborator__cursor-hint, .ddc_ink_writing-editor .tl-collaborator__cursor-hint { z-index: 120; } .ddc_ink_drawing-editor .tl-collaborator__cursor, .ddc_ink_writing-editor .tl-collaborator__cursor { z-index: 130; } .ddc_ink_drawing-editor .tl-cursor, .ddc_ink_writing-editor .tl-cursor { overflow: visible; } .ddc_ink_drawing-editor .tl-shape-indicator, .ddc_ink_writing-editor .tl-shape-indicator { transform-origin: top left; fill: none; stroke-width: calc(1.5px * var(--tl-scale)); contain: size; } .ddc_ink_drawing-editor .tl-selection__bg, .ddc_ink_writing-editor .tl-selection__bg { position: absolute; top: 0px; left: 0px; transform-origin: top left; background-color: transparent; pointer-events: all; } .ddc_ink_drawing-editor .tl-selection__fg__outline, .ddc_ink_writing-editor .tl-selection__fg__outline { fill: none; pointer-events: none; stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-corner-handle, .ddc_ink_writing-editor .tl-corner-handle { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-text-handle, .ddc_ink_writing-editor .tl-text-handle { pointer-events: none; fill: var(--color-selection-stroke); } .ddc_ink_drawing-editor .tl-corner-crop-handle, .ddc_ink_writing-editor .tl-corner-crop-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .ddc_ink_drawing-editor .tl-corner-crop-edge-handle, .ddc_ink_writing-editor .tl-corner-crop-edge-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .ddc_ink_drawing-editor .tl-mobile-rotate__bg, .ddc_ink_writing-editor .tl-mobile-rotate__bg { pointer-events: all; cursor: var(--tl-cursor-grab); } .ddc_ink_drawing-editor .tl-mobile-rotate__fg, .ddc_ink_writing-editor .tl-mobile-rotate__fg { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-transparent, .ddc_ink_writing-editor .tl-transparent { fill: transparent; stroke: transparent; } .ddc_ink_drawing-editor .tl-handle, .ddc_ink_writing-editor .tl-handle { pointer-events: all; } .ddc_ink_drawing-editor .tl-handle__bg, .ddc_ink_writing-editor .tl-handle__bg { fill: transparent; stroke: transparent; pointer-events: all; } .ddc_ink_drawing-editor .tl-handle__fg, .ddc_ink_writing-editor .tl-handle__fg { fill: var(--color-selected-contrast); stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); pointer-events: none; } .ddc_ink_drawing-editor .tl-handle__create, .ddc_ink_writing-editor .tl-handle__create { opacity: 0; } .ddc_ink_drawing-editor .tl-handle__create:hover, .ddc_ink_writing-editor .tl-handle__create:hover { opacity: 1; } .ddc_ink_drawing-editor .tl-handle__bg:active, .ddc_ink_writing-editor .tl-handle__bg:active { fill: none; } .ddc_ink_drawing-editor .tl-handle__bg:hover, .ddc_ink_writing-editor .tl-handle__bg:hover { cursor: var(--tl-cursor-grab); fill: var(--color-selection-fill); } @media (pointer: coarse) { .ddc_ink_drawing-editor .tl-handle__bg:active, .ddc_ink_writing-editor .tl-handle__bg:active { fill: var(--color-selection-fill); } .ddc_ink_drawing-editor .tl-handle__create, .ddc_ink_writing-editor .tl-handle__create { opacity: 1; } } .ddc_ink_drawing-editor .tl-image, .ddc_ink_drawing-editor .tl-video, .ddc_ink_writing-editor .tl-image, .ddc_ink_writing-editor .tl-video { object-fit: cover; background-size: cover; width: 100%; height: 100%; } .ddc_ink_drawing-editor .tl-image-container, .ddc_ink_drawing-editor .tl-embed-container, .ddc_ink_writing-editor .tl-image-container, .ddc_ink_writing-editor .tl-embed-container { width: 100%; height: 100%; pointer-events: all; display: flex; justify-content: center; align-items: center; } .ddc_ink_drawing-editor .tl-image__tg, .ddc_ink_writing-editor .tl-image__tg { --scale: calc(min(2, var(--tl-scale))); position: absolute; top: calc(var(--scale) * 8px); right: calc(var(--scale) * 8px); font-size: 10px; transform-origin: top right; background-color: var(--color-background); padding: 2px 4px; border-radius: var(--radius-1); } .ddc_ink_drawing-editor .tl-collaborator-cursor, .ddc_ink_writing-editor .tl-collaborator-cursor { position: absolute; } .ddc_ink_drawing-editor .tl-nametag, .ddc_ink_writing-editor .tl-nametag { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; max-width: 120px; padding: 3px 6px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); border-radius: var(--radius-2); color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tl-nametag-title, .ddc_ink_writing-editor .tl-nametag-title { position: absolute; top: -2px; left: 13px; width: fit-content; height: fit-content; padding: 0px 6px; max-width: 120px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); text-shadow: var(--tl-text-outline); color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tl-nametag-chat, .ddc_ink_writing-editor .tl-nametag-chat { position: absolute; top: 16px; left: 13px; width: fit-content; height: fit-content; color: var(--color-selected-contrast); white-space: nowrap; position: absolute; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); opacity: 1; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tl-cursor-chat, .ddc_ink_writing-editor .tl-cursor-chat { position: absolute; color: var(--color-selected-contrast); white-space: nowrap; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); pointer-events: none; z-index: var(--layer-cursor); margin-top: 16px; margin-left: 13px; opacity: 1; border: none; user-select: text; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tl-cursor-chat .tl-cursor-chat__bubble, .ddc_ink_writing-editor .tl-cursor-chat .tl-cursor-chat__bubble { padding-right: 12px; } .ddc_ink_drawing-editor .tl-cursor-chat::selection, .ddc_ink_writing-editor .tl-cursor-chat::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .ddc_ink_drawing-editor .tl-cursor-chat-fade, .ddc_ink_writing-editor .tl-cursor-chat-fade { opacity: 0.0001; transition: opacity 5s ease-in-out; } .ddc_ink_drawing-editor .tl-cursor-chat::placeholder, .ddc_ink_writing-editor .tl-cursor-chat::placeholder { color: var(--color-selected-contrast); opacity: 0.7; } @keyframes spinner { to { transform: rotate(360deg); } } .ddc_ink_drawing-editor .tl-text-shape__wrapper, .ddc_ink_writing-editor .tl-text-shape__wrapper { position: relative; font-weight: normal; min-width: 1px; padding: 0px; margin: 0px; border: none; height: 100%; font-variant: normal; font-style: normal; pointer-events: all; white-space: pre-wrap; overflow-wrap: break-word; text-shadow: var(--tl-text-outline); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-align=start], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-align=start] { text-align: left; } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-align=middle], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-align=middle] { text-align: center; } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-align=end], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-align=end] { text-align: right; } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=draw], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=draw] { font-family: var(--tl-font-draw); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=sans], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=sans] { font-family: var(--tl-font-sans); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=serif], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=serif] { font-family: var(--tl-font-serif); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-font=mono], .ddc_ink_writing-editor .tl-text-shape__wrapper[data-font=mono] { font-family: var(--tl-font-mono); } .ddc_ink_drawing-editor .tl-text-shape__wrapper[data-isediting=true] .tl-text-content, .ddc_ink_writing-editor .tl-text-shape__wrapper[data-isediting=true] .tl-text-content { opacity: 0; } .ddc_ink_drawing-editor .tl-text, .ddc_ink_writing-editor .tl-text { margin: 0px; padding: 0px; border: 0px; color: inherit; caret-color: var(--color-text); background: none; border-image: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; font-variant: inherit; font-style: inherit; text-align: inherit; letter-spacing: inherit; text-shadow: inherit; outline: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; pointer-events: all; text-rendering: auto; text-transform: none; text-indent: 0px; display: inline-block; appearance: auto; column-count: initial !important; writing-mode: horizontal-tb !important; word-spacing: 0px; } .ddc_ink_drawing-editor .tl-text-measure, .ddc_ink_writing-editor .tl-text-measure { position: absolute; z-index: -999999; top: 0px; left: 0px; opacity: 0; width: max-content; box-sizing: border-box; pointer-events: none; line-break: normal; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; resize: none; border: none; user-select: none; contain: style paint; -webkit-user-select: none; } .ddc_ink_drawing-editor .tl-text-input, .ddc_ink_drawing-editor .tl-text-content, .ddc_ink_writing-editor .tl-text-input, .ddc_ink_writing-editor .tl-text-content { position: absolute; inset: 0px; height: 100%; width: 100%; min-width: 1px; min-height: 1px; overflow: visible; outline: none; } .ddc_ink_drawing-editor .tl-text-content, .ddc_ink_writing-editor .tl-text-content { pointer-events: none; } .ddc_ink_drawing-editor .tl-text-input, .ddc_ink_writing-editor .tl-text-input { resize: none; user-select: all; -webkit-user-select: text; overflow: hidden; cursor: var(--tl-cursor-text); } .ddc_ink_drawing-editor .tl-text-input::selection, .ddc_ink_writing-editor .tl-text-input::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .ddc_ink_drawing-editor .tl-snap-indicator, .ddc_ink_writing-editor .tl-snap-indicator { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } .ddc_ink_drawing-editor .tl-snap-point, .ddc_ink_writing-editor .tl-snap-point { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } .ddc_ink_drawing-editor .tl-group, .ddc_ink_writing-editor .tl-group { stroke: var(--color-text); stroke-width: calc(1px * var(--tl-scale)); opacity: 0.5; } .ddc_ink_drawing-editor .tl-bookmark__container, .ddc_ink_writing-editor .tl-bookmark__container { width: 100%; height: 100%; position: relative; border: 1px solid var(--color-panel-contrast); background-color: var(--color-panel); border-radius: var(--radius-2); display: flex; flex-direction: column; overflow: hidden; } .ddc_ink_drawing-editor .tl-bookmark__image_container, .ddc_ink_writing-editor .tl-bookmark__image_container { flex: 1; overflow: hidden; border-top-left-radius: var(--radius-1); border-top-right-radius: var(--radius-1); width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: flex-start; } .ddc_ink_drawing-editor .tl-bookmark__image_container > .tl-hyperlink-button::after, .ddc_ink_writing-editor .tl-bookmark__image_container > .tl-hyperlink-button::after { background-color: var(--color-panel); } .ddc_ink_drawing-editor .tl-bookmark__placeholder, .ddc_ink_writing-editor .tl-bookmark__placeholder { width: 100%; height: 100%; background-color: var(--color-muted-2); border-bottom: 1px solid var(--color-muted-2); } .ddc_ink_drawing-editor .tl-bookmark__image, .ddc_ink_writing-editor .tl-bookmark__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .ddc_ink_drawing-editor .tl-bookmark__copy_container, .ddc_ink_writing-editor .tl-bookmark__copy_container { background-color: var(--color-muted); padding: var(--space-4); pointer-events: all; } .ddc_ink_drawing-editor .tl-bookmark__heading, .ddc_ink_drawing-editor .tl-bookmark__description, .ddc_ink_drawing-editor .tl-bookmark__link, .ddc_ink_writing-editor .tl-bookmark__heading, .ddc_ink_writing-editor .tl-bookmark__description, .ddc_ink_writing-editor .tl-bookmark__link { margin: 0px; width: 100%; font-family: inherit; } .ddc_ink_drawing-editor .tl-bookmark__heading, .ddc_ink_writing-editor .tl-bookmark__heading { font-size: 16px; font-weight: bold; padding-bottom: var(--space-2); margin: 8px 0px; } .ddc_ink_drawing-editor .tl-bookmark__description, .ddc_ink_writing-editor .tl-bookmark__description { font-size: 12px; padding-bottom: var(--space-4); } .ddc_ink_drawing-editor .tl-bookmark__link, .ddc_ink_writing-editor .tl-bookmark__link { font-size: 14px; pointer-events: all; z-index: 999; overflow: hidden; display: block; color: var(--color-text); text-overflow: ellipsis; text-decoration: none; color: var(--color-text-1); cursor: var(--tl-cursor-pointer); } .ddc_ink_drawing-editor .tl-bookmark__link:hover, .ddc_ink_writing-editor .tl-bookmark__link:hover { color: var(--color-selected); } .ddc_ink_drawing-editor .tl-hyperlink-button, .ddc_ink_writing-editor .tl-hyperlink-button { background: none; margin: 0px; position: absolute; top: 0px; right: 0px; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; z-index: 200; font-size: 12px; font-weight: 400; color: var(--color-text-1); padding: 13px; cursor: var(--tl-cursor-pointer); border: none; outline: none; pointer-events: all; } .ddc_ink_drawing-editor .tl-hyperlink-button::after, .ddc_ink_writing-editor .tl-hyperlink-button::after { content: ""; z-index: -1; position: absolute; right: 6px; bottom: 6px; display: block; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: var(--radius-1); background-color: var(--color-background); pointer-events: none; } .ddc_ink_drawing-editor .tl-hyperlink-button:hover, .ddc_ink_writing-editor .tl-hyperlink-button:hover { color: var(--color-selected); } .ddc_ink_drawing-editor .tl-hyperlink-button:focus-visible, .ddc_ink_writing-editor .tl-hyperlink-button:focus-visible { color: var(--color-selected); } .ddc_ink_drawing-editor .tl-hyperlink-button__icon, .ddc_ink_writing-editor .tl-hyperlink-button__icon { width: 18px; height: 18px; background-color: currentColor; pointer-events: none; } .ddc_ink_drawing-editor .tl-hyperlink-button__hidden, .ddc_ink_writing-editor .tl-hyperlink-button__hidden { display: none; } .ddc_ink_drawing-editor .tl-text-label, .ddc_ink_writing-editor .tl-text-label { display: flex; justify-content: center; align-items: center; color: var(--color-text); text-shadow: var(--tl-text-outline); line-height: inherit; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: 10; } .ddc_ink_drawing-editor .tl-text-label[data-isediting=true] .tl-text-content, .ddc_ink_writing-editor .tl-text-label[data-isediting=true] .tl-text-content { opacity: 0; } .ddc_ink_drawing-editor .tl-text-label[data-hastext=false][data-isediting=false] > .tl-text-label__inner, .ddc_ink_writing-editor .tl-text-label[data-hastext=false][data-isediting=false] > .tl-text-label__inner { width: 40px; height: 40px; } .ddc_ink_drawing-editor .tl-text-label[data-hastext=true][data-isediting=false] .tl-text-content, .ddc_ink_writing-editor .tl-text-label[data-hastext=true][data-isediting=false] .tl-text-content { pointer-events: all; } .ddc_ink_drawing-editor .tl-text-label__inner, .ddc_ink_writing-editor .tl-text-label__inner { position: relative; width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; pointer-events: none; min-height: auto; } .ddc_ink_drawing-editor .tl-text-label__inner > .tl-text-content, .ddc_ink_writing-editor .tl-text-label__inner > .tl-text-content { position: relative; top: 0px; left: 0px; padding: 16px; height: fit-content; width: fit-content; border-radius: var(--radius-1); max-width: 100%; z-index: 3; } .ddc_ink_drawing-editor .tl-text-label__inner > .tl-text-input, .ddc_ink_writing-editor .tl-text-label__inner > .tl-text-input { position: absolute; inset: 0px; height: 100%; width: 100%; padding: 16px; z-index: 4; } .ddc_ink_drawing-editor .tl-text-label[data-textwrap=true] > .tl-text-label__inner, .ddc_ink_writing-editor .tl-text-label[data-textwrap=true] > .tl-text-label__inner { max-width: 100%; } .ddc_ink_drawing-editor .tl-text-label[data-isediting=true], .ddc_ink_writing-editor .tl-text-label[data-isediting=true] { background-color: transparent; min-height: auto; } .ddc_ink_drawing-editor .tl-text-label[data-isediting=true] p, .ddc_ink_writing-editor .tl-text-label[data-isediting=true] p { opacity: 0; } .ddc_ink_drawing-editor .tl-text-label[data-align=start], .ddc_ink_drawing-editor .tl-text-label[data-align=start-legacy], .ddc_ink_writing-editor .tl-text-label[data-align=start], .ddc_ink_writing-editor .tl-text-label[data-align=start-legacy] { text-align: left; } .ddc_ink_drawing-editor .tl-text-label[data-align=middle], .ddc_ink_drawing-editor .tl-text-label[data-align=middle-legacy], .ddc_ink_writing-editor .tl-text-label[data-align=middle], .ddc_ink_writing-editor .tl-text-label[data-align=middle-legacy] { text-align: center; } .ddc_ink_drawing-editor .tl-text-label[data-align=end], .ddc_ink_drawing-editor .tl-text-label[data-align=end-legacy], .ddc_ink_writing-editor .tl-text-label[data-align=end], .ddc_ink_writing-editor .tl-text-label[data-align=end-legacy] { text-align: right; } .ddc_ink_drawing-editor .tl-arrow-hint, .ddc_ink_writing-editor .tl-arrow-hint { stroke: var(--color-text-1); fill: none; stroke-linecap: round; overflow: visible; } .ddc_ink_drawing-editor .tl-arrow-label[data-font=draw], .ddc_ink_drawing-editor .tl-text-label[data-font=draw], .ddc_ink_writing-editor .tl-arrow-label[data-font=draw], .ddc_ink_writing-editor .tl-text-label[data-font=draw] { font-family: var(--tl-font-draw); } .ddc_ink_drawing-editor .tl-arrow-label[data-font=sans], .ddc_ink_drawing-editor .tl-text-label[data-font=sans], .ddc_ink_writing-editor .tl-arrow-label[data-font=sans], .ddc_ink_writing-editor .tl-text-label[data-font=sans] { font-family: var(--tl-font-sans); } .ddc_ink_drawing-editor .tl-arrow-label[data-font=serif], .ddc_ink_drawing-editor .tl-text-label[data-font=serif], .ddc_ink_writing-editor .tl-arrow-label[data-font=serif], .ddc_ink_writing-editor .tl-text-label[data-font=serif] { font-family: var(--tl-font-serif); } .ddc_ink_drawing-editor .tl-arrow-label[data-font=mono], .ddc_ink_drawing-editor .tl-text-label[data-font=mono], .ddc_ink_writing-editor .tl-arrow-label[data-font=mono], .ddc_ink_writing-editor .tl-text-label[data-font=mono] { font-family: var(--tl-font-mono); } .ddc_ink_drawing-editor .tl-arrow-label, .ddc_ink_writing-editor .tl-arrow-label { position: absolute; top: -1px; left: -1px; width: 2px; height: 2px; padding: 0px; display: flex; justify-content: center; align-items: center; color: var(--color-text); text-shadow: var(--tl-text-outline); } .ddc_ink_drawing-editor .tl-arrow-label[data-isediting=true] p, .ddc_ink_writing-editor .tl-arrow-label[data-isediting=true] p { opacity: 0; } .ddc_ink_drawing-editor .tl-arrow-label[data-isediting=true] > .tl-arrow-label__inner, .ddc_ink_writing-editor .tl-arrow-label[data-isediting=true] > .tl-arrow-label__inner { background-color: var(--color-background); } .ddc_ink_drawing-editor .tl-arrow-label__inner, .ddc_ink_writing-editor .tl-arrow-label__inner { border-radius: var(--radius-1); box-sizing: content-box; position: relative; height: max-content; width: max-content; pointer-events: all; display: flex; justify-content: center; align-items: center; } .ddc_ink_drawing-editor .tl-arrow-label p, .ddc_ink_drawing-editor .tl-arrow-label textarea, .ddc_ink_writing-editor .tl-arrow-label p, .ddc_ink_writing-editor .tl-arrow-label textarea { margin: 0px; padding: 0px; border: 0px; color: inherit; caret-color: var(--color-text); background: none; border-image: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; font-variant: inherit; font-style: inherit; text-align: inherit; letter-spacing: inherit; text-shadow: inherit; outline: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; pointer-events: all; text-rendering: auto; text-transform: none; text-indent: 0px; display: inline-block; appearance: auto; column-count: initial !important; writing-mode: horizontal-tb !important; word-spacing: 0px; } .ddc_ink_drawing-editor .tl-arrow-label p, .ddc_ink_writing-editor .tl-arrow-label p { position: relative; height: max-content; z-index: 2; padding: 4px; overflow: visible; } .ddc_ink_drawing-editor .tl-arrow-label textarea, .ddc_ink_writing-editor .tl-arrow-label textarea { z-index: 3; margin: 0px; padding: 4px; height: 100%; width: 100%; position: absolute; resize: none; border: 0px; user-select: all; -webkit-user-select: text; caret-color: var(--color-text); border-image: none; min-width: 4px; } .ddc_ink_drawing-editor .tl-note__container, .ddc_ink_writing-editor .tl-note__container { position: relative; width: 100%; height: 100%; border-radius: var(--radius-2); box-shadow: var(--shadow-1); overflow: hidden; border-color: currentColor; border-style: solid; border-width: 1px; } .ddc_ink_drawing-editor .tl-note__container .tl-text-label, .ddc_ink_writing-editor .tl-note__container .tl-text-label { text-shadow: none; } .ddc_ink_drawing-editor .tl-note__scrim, .ddc_ink_writing-editor .tl-note__scrim { position: absolute; z-index: 1; inset: 0px; height: 100%; width: 100%; background-color: var(--color-background); opacity: 0.28; } .ddc_ink_drawing-editor .tl-loading, .ddc_ink_writing-editor .tl-loading { background-color: var(--color-background); color: var(--color-text-1); height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; opacity: 0; animation: fade-in 0.2s ease-in-out forwards; animation-delay: 0.2s; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .ddc_ink_drawing-editor .tl-frame__body, .ddc_ink_writing-editor .tl-frame__body { stroke-width: calc(1px * var(--tl-scale)); } .ddc_ink_drawing-editor .tl-frame__creating, .ddc_ink_writing-editor .tl-frame__creating { stroke: var(--color-selected); fill: none; } .ddc_ink_drawing-editor .tl-frame-heading, .ddc_ink_writing-editor .tl-frame-heading { display: flex; align-items: center; position: absolute; transform-origin: 0% 100%; overflow: hidden; max-width: 100%; min-width: 32px; height: auto; font-size: 12px; padding-bottom: 4px; pointer-events: all; } .ddc_ink_drawing-editor .tl-frame-heading-hit-area, .ddc_ink_writing-editor .tl-frame-heading-hit-area { pointer-events: all; transform-origin: 0% 100%; display: flex; height: 100%; width: 100%; align-items: center; border-radius: var(--radius-1); background-color: var(--color-background); } .ddc_ink_drawing-editor .tl-frame-label, .ddc_ink_writing-editor .tl-frame-label { pointer-events: all; overflow: hidden; text-overflow: ellipsis; padding: var(--space-3) var(--space-3); position: relative; font-size: inherit; white-space: pre; border: 1px solid transparent; } .ddc_ink_drawing-editor .tl-frame-label__editing, .ddc_ink_writing-editor .tl-frame-label__editing { color: transparent; white-space: pre; width: auto; overflow: visible; background-color: var(--color-panel); border-radius: var(--radius-1); border-color: var(--color-selected); } .ddc_ink_drawing-editor .tl-frame-name-input, .ddc_ink_writing-editor .tl-frame-name-input { position: absolute; border: none; background: none; outline: none; padding: var(--space-3) var(--space-3); inset: 0px; height: 100%; width: 100%; font-size: inherit; font-family: inherit; font-weight: inherit; width: 100%; color: var(--color-text-1); border-radius: var(--radius-1); user-select: all; -webkit-user-select: text; white-space: pre; cursor: var(--tl-cursor-text); } @media (max-width: 600px) { .ddc_ink_drawing-editor .tl-frame-heading, .ddc_ink_writing-editor .tl-frame-heading { font-size: 16px; } } .ddc_ink_drawing-editor .tl-embed, .ddc_ink_writing-editor .tl-embed { border: none; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tl-shape-error-boundary, .ddc_ink_writing-editor .tl-shape-error-boundary { width: 100%; height: 100%; background-color: var(--color-muted-1); border-width: calc(1px * var(--tl-scale)); border-color: var(--color-muted-1); border-style: solid; border-radius: calc(var(--radius-1) * var(--tl-scale)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: left; position: relative; pointer-events: all; overflow: hidden; padding: var(--space-2); } .ddc_ink_drawing-editor .tl-shape-error-boundary::before, .ddc_ink_writing-editor .tl-shape-error-boundary::before { transform: scale(var(--tl-scale)); content: "Error"; font-size: 12px; font-family: inherit; color: var(--color-text-0); } .ddc_ink_drawing-editor .tl-error-boundary, .ddc_ink_writing-editor .tl-error-boundary { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background-color: var(--color-background); color: var(--color-text-1); position: absolute; z-index: 600; } .ddc_ink_drawing-editor .tl-error-boundary__overlay, .ddc_ink_writing-editor .tl-error-boundary__overlay { position: absolute; inset: 0px; height: 100%; width: 100%; z-index: 500; background-color: var(--color-overlay); } .ddc_ink_drawing-editor .tl-error-boundary__content *, .ddc_ink_writing-editor .tl-error-boundary__content * { user-select: all; -webkit-user-select: text; pointer-events: all; } .ddc_ink_drawing-editor .tl-error-boundary__canvas, .ddc_ink_writing-editor .tl-error-boundary__canvas { pointer-events: none; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: -1; } .ddc_ink_drawing-editor .tl-error-boundary__canvas::after, .ddc_ink_writing-editor .tl-error-boundary__canvas::after { content: " "; display: block; position: absolute; inset: 0px; height: 100%; width: 100%; z-index: 600; pointer-events: all; } .ddc_ink_drawing-editor .tl-error-boundary__content, .ddc_ink_writing-editor .tl-error-boundary__content { width: fit-content; height: fit-content; max-width: 100%; width: 400px; max-height: 100%; background-color: var(--color-panel); padding: 16px; border-radius: 16px; box-shadow: var(--shadow-2); font-size: 14px; font-weight: 400; display: flex; flex-direction: column; overflow: auto; z-index: 600; gap: 12px; } .ddc_ink_drawing-editor .tl-error-boundary__content__expanded, .ddc_ink_writing-editor .tl-error-boundary__content__expanded { width: 600px; } .ddc_ink_drawing-editor .tl-error-boundary__content h2, .ddc_ink_writing-editor .tl-error-boundary__content h2 { font-size: 16px; margin: 0px; font-weight: 500; } .ddc_ink_drawing-editor .tl-error-boundary__content h4, .ddc_ink_writing-editor .tl-error-boundary__content h4 { border: 1px solid var(--color-low-border); margin: -6px 0 0 0; padding: var(--space-5); border-radius: var(--radius-2); font-weight: normal; } .ddc_ink_drawing-editor .tl-error-boundary__content p, .ddc_ink_writing-editor .tl-error-boundary__content p { line-height: 1.5; margin: 0px; } .ddc_ink_drawing-editor .tl-error-boundary__content pre, .ddc_ink_writing-editor .tl-error-boundary__content pre { background-color: var(--color-muted-2); margin-top: 0; padding: var(--space-5); border-radius: var(--radius-2); overflow: auto; font-size: 12px; max-height: 320px; } .ddc_ink_drawing-editor .tl-error-boundary__content button, .ddc_ink_writing-editor .tl-error-boundary__content button { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; padding: var(--space-4); border-radius: var(--radius-3); cursor: var(--tl-cursor-pointer); color: inherit; background-color: transparent; } .ddc_ink_drawing-editor .tl-error-boundary__content button:hover, .ddc_ink_writing-editor .tl-error-boundary__content button:hover { background-color: var(--color-low); } .ddc_ink_drawing-editor .tl-error-boundary__content a, .ddc_ink_writing-editor .tl-error-boundary__content a { color: var(--color-text-1); font-weight: 500; text-decoration: none; } .ddc_ink_drawing-editor .tl-error-boundary__content a:hover, .ddc_ink_writing-editor .tl-error-boundary__content a:hover { color: var(--color-text-1); } .ddc_ink_drawing-editor .tl-error-boundary__content__error, .ddc_ink_writing-editor .tl-error-boundary__content__error { position: relative; margin: -6px 0 0 0; } .ddc_ink_drawing-editor .tl-error-boundary__content__error button, .ddc_ink_writing-editor .tl-error-boundary__content__error button { position: absolute; top: var(--space-2); right: var(--space-2); font-size: 12px; padding: var(--space-2) var(--space-3); background-color: var(--color-panel); border-radius: var(--radius-1); } .ddc_ink_drawing-editor .tl-error-boundary__content__actions, .ddc_ink_writing-editor .tl-error-boundary__content__actions { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0px; margin-left: -4px; } .ddc_ink_drawing-editor .tl-error-boundary__content__actions__group, .ddc_ink_writing-editor .tl-error-boundary__content__actions__group { display: flex; gap: var(--space-4); } .ddc_ink_drawing-editor .tl-error-boundary__content .tl-error-boundary__reset, .ddc_ink_writing-editor .tl-error-boundary__content .tl-error-boundary__reset { color: var(--color-warn); } .ddc_ink_drawing-editor .tl-error-boundary__content .tl-error-boundary__refresh, .ddc_ink_writing-editor .tl-error-boundary__content .tl-error-boundary__refresh { background-color: var(--color-primary); color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tl-error-boundary__content .tl-error-boundary__refresh:hover, .ddc_ink_writing-editor .tl-error-boundary__content .tl-error-boundary__refresh:hover { background-color: var(--color-primary); opacity: 0.9; } .ddc_ink_drawing-editor .tl-hidden, .ddc_ink_writing-editor .tl-hidden { opacity: 0; pointer-events: none; } .ddc_ink_drawing-editor .debug__ui-logger, .ddc_ink_writing-editor .debug__ui-logger { position: absolute; top: 62px; left: 16px; color: #555; font-size: 12px; font-family: monospace; } .ddc_ink_drawing-editor .tl-container, .ddc_ink_writing-editor .tl-container { --layer-panels: 300; --layer-menus: 400; --layer-overlays: 500; --layer-toasts: 650; --layer-cursor: 700; } .ddc_ink_drawing-editor .tlui-button, .ddc_ink_writing-editor .tlui-button { position: relative; height: 40px; min-width: 40px; padding: 0px 12px; display: flex; align-items: center; justify-content: center; background-color: transparent; border: transparent; color: currentColor; cursor: pointer; pointer-events: all; font-weight: inherit; font-family: inherit; text-rendering: optimizeLegibility; font-size: 12px; gap: 0px; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-button:disabled, .ddc_ink_writing-editor .tlui-button:disabled { color: var(--color-text-3); text-shadow: none; cursor: default; } .ddc_ink_drawing-editor .tlui-button:disabled .tlui-kbd, .ddc_ink_writing-editor .tlui-button:disabled .tlui-kbd { color: var(--color-text-3); } .ddc_ink_drawing-editor .tlui-button > *, .ddc_ink_writing-editor .tlui-button > * { position: relative; z-index: 1; } .ddc_ink_drawing-editor .tlui-button__label, .ddc_ink_writing-editor .tlui-button__label { flex-grow: 2; text-align: left; } .ddc_ink_drawing-editor .tlui-button:focus-visible:not(:hover), .ddc_ink_writing-editor .tlui-button:focus-visible:not(:hover) { outline: 1px solid var(--color-selected); outline-offset: -4px; border-radius: var(--radius-3); } .ddc_ink_drawing-editor .tlui-button::after, .ddc_ink_writing-editor .tlui-button::after { display: block; content: ""; position: absolute; inset: 4px; background-color: transparent; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tlui-button[aria-expanded=true]::after, .ddc_ink_writing-editor .tlui-button[aria-expanded=true]::after { background-color: var(--color-muted-0); opacity: 1; } .ddc_ink_drawing-editor .tlui-button__icon + .tlui-button__label, .ddc_ink_writing-editor .tlui-button__icon + .tlui-button__label { margin-left: var(--space-2); } .ddc_ink_drawing-editor .tlui-button[data-state=hinted]::after, .ddc_ink_writing-editor .tlui-button[data-state=hinted]::after { background-color: var(--color-hint); opacity: 1; } .ddc_ink_drawing-editor .tlui-button[data-state=hinted]:not(:disabled, :focus-visible):active:after, .ddc_ink_writing-editor .tlui-button[data-state=hinted]:not(:disabled, :focus-visible):active:after { background: var(--color-hint); opacity: 1; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button::after, .ddc_ink_writing-editor .tlui-button::after { background-color: var(--color-muted-2); opacity: 0; } .ddc_ink_drawing-editor .tlui-button:not(:disabled):hover::after, .ddc_ink_writing-editor .tlui-button:not(:disabled):hover::after { opacity: 1; } } .ddc_ink_drawing-editor .tlui-button__low, .ddc_ink_writing-editor .tlui-button__low { border-radius: var(--radius-3); background-color: var(--color-low); } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__low::after, .ddc_ink_writing-editor .tlui-button__low::after { background-color: var(--color-muted-2); } } .ddc_ink_drawing-editor .tlui-button__primary, .ddc_ink_writing-editor .tlui-button__primary { color: var(--color-primary); } .ddc_ink_drawing-editor .tlui-button__danger, .ddc_ink_writing-editor .tlui-button__danger { color: var(--color-warn); text-shadow: none; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__primary:not(:disabled, :focus-visible):hover, .ddc_ink_writing-editor .tlui-button__primary:not(:disabled, :focus-visible):hover { color: var(--color-primary); } .ddc_ink_drawing-editor .tlui-button__danger:not(:disabled, :focus-visible):hover, .ddc_ink_writing-editor .tlui-button__danger:not(:disabled, :focus-visible):hover { color: var(--color-warn); text-shadow: none; } } .ddc_ink_drawing-editor .tlui-button__panel, .ddc_ink_writing-editor .tlui-button__panel { position: relative; } .ddc_ink_drawing-editor .tlui-button__menu, .ddc_ink_writing-editor .tlui-button__menu { height: 40px; min-height: 40px; width: 100%; gap: 8px; margin: -4px 0px; } .ddc_ink_drawing-editor .tlui-button__menu:nth-child(1), .ddc_ink_writing-editor .tlui-button__menu:nth-child(1) { margin-top: 0px; } .ddc_ink_drawing-editor .tlui-button__menu:nth-last-child(1), .ddc_ink_writing-editor .tlui-button__menu:nth-last-child(1) { margin-bottom: 0px; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__menu::after, .ddc_ink_writing-editor .tlui-button__menu::after { inset: 4px; border-radius: var(--radius-2); } } .ddc_ink_drawing-editor .tlui-button__checkbox, .ddc_ink_writing-editor .tlui-button__checkbox { padding-left: 8px; } .ddc_ink_drawing-editor .tlui-button__checkbox__indicator, .ddc_ink_writing-editor .tlui-button__checkbox__indicator { width: 15px; height: 15px; } .ddc_ink_drawing-editor .tlui-toolbar__lock-button, .ddc_ink_writing-editor .tlui-toolbar__lock-button { position: absolute; top: 4px; right: 0px; pointer-events: all; height: 40px; width: 40px; min-width: 0px; border-radius: var(--radius-2); } .ddc_ink_drawing-editor .tlui-toolbar__lock-button::after, .ddc_ink_writing-editor .tlui-toolbar__lock-button::after { top: 4px; left: 8px; inset: 4px; } .ddc_ink_drawing-editor .tlui-button__tool, .ddc_ink_writing-editor .tlui-button__tool { position: relative; height: 48px; width: 48px; margin-left: -2px; margin-right: -2px; } .ddc_ink_drawing-editor .tlui-button__tool:nth-of-type(1), .ddc_ink_writing-editor .tlui-button__tool:nth-of-type(1) { margin-left: 0px; } .ddc_ink_drawing-editor .tlui-button__tool:nth-last-of-type(1), .ddc_ink_writing-editor .tlui-button__tool:nth-last-of-type(1) { margin-right: 0px; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__tool::after, .ddc_ink_writing-editor .tlui-button__tool::after { inset: 4px; border-radius: 8px; } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):hover, .ddc_ink_writing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):hover { color: var(--color-selected-contrast); } } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected], .ddc_ink_writing-editor .tlui-button__tool[data-state=selected] { color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):active, .ddc_ink_writing-editor .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):active { color: var(--color-selected-contrast); } .ddc_ink_drawing-editor .tlui-button__tool[data-state=selected]:not(:disabled)::after, .ddc_ink_writing-editor .tlui-button__tool[data-state=selected]:not(:disabled)::after { background: var(--color-selected); opacity: 1; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-button__tool, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-button__tool { height: 48px; width: 44px; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-button__tool > .tlui-icon, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-button__tool > .tlui-icon { height: 16px; width: 16px; } .ddc_ink_drawing-editor .tlui-button__help, .ddc_ink_writing-editor .tlui-button__help { height: 32px; width: 32px; padding: 0px; min-width: 32px; border-radius: 100%; background-color: var(--color-low); border: 1px solid var(--color-low-border); } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-button__help::after, .ddc_ink_writing-editor .tlui-button__help::after { background-color: var(--color-muted-2); border-radius: 100%; inset: 4px; } } .ddc_ink_drawing-editor .tlui-buttons__horizontal, .ddc_ink_writing-editor .tlui-buttons__horizontal { display: flex; flex-direction: row; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *, .ddc_ink_writing-editor .tlui-buttons__horizontal > * { margin-left: -2px; margin-right: -2px; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *:nth-child(1), .ddc_ink_writing-editor .tlui-buttons__horizontal > *:nth-child(1) { margin-left: 0px; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *:nth-last-child(1), .ddc_ink_writing-editor .tlui-buttons__horizontal > *:nth-last-child(1) { margin-right: 0px; } .ddc_ink_drawing-editor .tlui-buttons__horizontal > *:only-child, .ddc_ink_writing-editor .tlui-buttons__horizontal > *:only-child { width: 56px; } .ddc_ink_drawing-editor .tlui-buttons__grid, .ddc_ink_writing-editor .tlui-buttons__grid { display: grid; grid-template-columns: repeat(4, auto); grid-auto-flow: row; overflow: hidden; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button, .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button { margin: -2px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n) { margin-right: 0px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) { margin-left: 0px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) { margin-top: 0px; } .ddc_ink_drawing-editor .tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4), .ddc_ink_writing-editor .tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) { margin-bottom: 0px; } .ddc_ink_drawing-editor .tlui-zoom-menu__button__pct, .ddc_ink_writing-editor .tlui-zoom-menu__button__pct { width: 60px; min-width: 60px; text-align: center; } .ddc_ink_drawing-editor .tlui-layout, .ddc_ink_writing-editor .tlui-layout { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0px, 1fr) auto; grid-auto-rows: auto; height: 100%; max-height: 100%; overflow: clip; pointer-events: none; user-select: none; contain: strict; z-index: var(--layer-panels); -webkit-transform: translate3d(0, 0, 0); --sab: env(safe-area-inset-bottom); } .ddc_ink_drawing-editor .tlui-layout__top, .ddc_ink_writing-editor .tlui-layout__top { grid-column: 1; grid-row: 1; display: flex; min-width: 0px; justify-content: space-between; } .ddc_ink_drawing-editor .tlui-layout__top__left, .ddc_ink_writing-editor .tlui-layout__top__left { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; flex: 0 1 0; } .ddc_ink_drawing-editor .tlui-layout__top__right, .ddc_ink_writing-editor .tlui-layout__top__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; height: 100%; flex: 0 0 auto; min-width: 0px; } .ddc_ink_drawing-editor .scrollable, .ddc_ink_drawing-editor .scrollable *, .ddc_ink_writing-editor .scrollable, .ddc_ink_writing-editor .scrollable * { pointer-events: all; touch-action: auto; overscroll-behavior: none; } .ddc_ink_drawing-editor .tlui-helper-buttons, .ddc_ink_writing-editor .tlui-helper-buttons { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: min-content; gap: var(--space-3); margin: var(--space-2) var(--space-3); white-space: nowrap; pointer-events: none; z-index: var(--layer-panels); } .ddc_ink_drawing-editor .tlui-icon, .ddc_ink_writing-editor .tlui-icon { flex-shrink: 0; width: 18px; height: 18px; background-color: currentColor; } .ddc_ink_drawing-editor .tlui-icon__small, .ddc_ink_writing-editor .tlui-icon__small { width: 15px; height: 15px; } .ddc_ink_drawing-editor .tlui-slider, .ddc_ink_writing-editor .tlui-slider { position: relative; display: flex; align-items: center; user-select: none; touch-action: none; } .ddc_ink_drawing-editor .tlui-slider__container, .ddc_ink_writing-editor .tlui-slider__container { width: 100%; padding: 0px var(--space-4); } .ddc_ink_drawing-editor .tlui-slider__track, .ddc_ink_writing-editor .tlui-slider__track { position: relative; flex-grow: 1; height: 44px; cursor: pointer; } .ddc_ink_drawing-editor .tlui-slider__track::after, .ddc_ink_writing-editor .tlui-slider__track::after { display: block; position: absolute; top: calc(50% - 2px); content: ""; height: 3px; width: 100%; background-color: var(--color-muted-1); border-radius: 14px; } .ddc_ink_drawing-editor .tlui-slider__range, .ddc_ink_writing-editor .tlui-slider__range { position: absolute; top: calc(50% - 2px); left: 0px; height: 3px; background-color: var(--color-selected); border-radius: 14px; } .ddc_ink_drawing-editor .tlui-slider__thumb, .ddc_ink_writing-editor .tlui-slider__thumb { all: unset; cursor: grab; display: block; width: 18px; height: 18px; position: relative; top: -1px; background-color: var(--color-panel); border-radius: 999px; box-shadow: inset 0px 0px 0px 2px var(--color-text-1); } .ddc_ink_drawing-editor .tlui-slider__thumb:active, .ddc_ink_writing-editor .tlui-slider__thumb:active { cursor: grabbing; box-shadow: inset 0px 0px 0px 2px var(--color-text-1), var(--shadow-1); } .ddc_ink_drawing-editor .tlui-slider__thumb:focus-visible, .ddc_ink_writing-editor .tlui-slider__thumb:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); } .ddc_ink_drawing-editor .tlui-kbd, .ddc_ink_writing-editor .tlui-kbd { font-family: inherit; font-size: 11px; line-height: 11px; display: grid; justify-items: center; grid-auto-flow: column; grid-template-columns: auto; grid-auto-columns: minmax(1em, auto); align-self: bottom; color: var(--color-text-1); margin-left: var(--space-4); } .ddc_ink_drawing-editor .tlui-kbd > span, .ddc_ink_writing-editor .tlui-kbd > span { width: 100%; text-align: center; display: inline; margin: 0px; padding: 2px; border-radius: 2px; } .ddc_ink_drawing-editor .tlui-kbd > span:last-child, .ddc_ink_writing-editor .tlui-kbd > span:last-child { padding-right: 0; } .ddc_ink_drawing-editor .tlui-kbd:not(:last-child), .ddc_ink_writing-editor .tlui-kbd:not(:last-child) { margin-right: var(--space-2); } .ddc_ink_drawing-editor .tlui-focus-button, .ddc_ink_writing-editor .tlui-focus-button { z-index: var(--layer-panels); pointer-events: all; } .ddc_ink_drawing-editor .tlui-popover, .ddc_ink_writing-editor .tlui-popover { position: relative; display: flex; align-content: stretch; } .ddc_ink_drawing-editor .tlui-popover__content, .ddc_ink_writing-editor .tlui-popover__content { position: relative; max-height: 75vh; margin: 0px; border: none; border-radius: var(--radius-3); background-color: var(--color-panel); box-shadow: var(--shadow-3); z-index: var(--layer-menus); overflow: hidden; overflow-y: auto; touch-action: auto; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; } .ddc_ink_drawing-editor .tlui-debug-panel, .ddc_ink_writing-editor .tlui-debug-panel { background-color: var(--color-low); width: 100%; display: grid; align-items: center; grid-template-columns: 1fr auto auto auto; justify-content: space-between; padding-left: var(--space-4); border-top: 1px solid var(--color-background); font-size: 12px; color: var(--color-text-1); z-index: var(--layer-panels); pointer-events: all; } .ddc_ink_drawing-editor .tlui-debug-panel__current-state, .ddc_ink_writing-editor .tlui-debug-panel__current-state { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ddc_ink_drawing-editor .tlui-debug-panel__fps, .ddc_ink_writing-editor .tlui-debug-panel__fps { margin-right: 8px; } .ddc_ink_drawing-editor .tlui-debug-panel__fps__slow, .ddc_ink_writing-editor .tlui-debug-panel__fps__slow { font-weight: bold; color: var(--color-warn); } .ddc_ink_drawing-editor .tlui-menu-zone, .ddc_ink_writing-editor .tlui-menu-zone { position: relative; z-index: var(--layer-panels); width: fit-content; border-right: 2px solid var(--color-background); border-bottom: 2px solid var(--color-background); border-bottom-right-radius: var(--radius-4); background-color: var(--color-low); } .ddc_ink_drawing-editor .tlui-menu-zone *[data-state=open]::after, .ddc_ink_writing-editor .tlui-menu-zone *[data-state=open]::after { background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-style-panel__wrapper, .ddc_ink_writing-editor .tlui-style-panel__wrapper { box-shadow: var(--shadow-2); border-radius: var(--radius-3); pointer-events: all; background-color: var(--color-panel); height: fit-content; max-height: 100%; margin: 8px; touch-action: auto; overscroll-behavior: none; overflow-y: auto; overflow-x: hidden; color: var(--color-text); } .ddc_ink_drawing-editor .tlui-style-panel, .ddc_ink_writing-editor .tlui-style-panel { position: relative; z-index: var(--layer-panels); pointer-events: all; width: 148px; max-width: 148px; } .ddc_ink_drawing-editor .tlui-style-panel::-webkit-scrollbar, .ddc_ink_writing-editor .tlui-style-panel::-webkit-scrollbar { display: none; } .ddc_ink_drawing-editor .tlui-style-panel .tlui-button.select, .ddc_ink_writing-editor .tlui-style-panel .tlui-button.select { width: 100%; } .ddc_ink_drawing-editor .tlui-style-panel__section, .ddc_ink_writing-editor .tlui-style-panel__section { display: flex; position: relative; flex-direction: column; } .ddc_ink_drawing-editor .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child), .ddc_ink_writing-editor .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) { border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-style-panel__section:empty, .ddc_ink_writing-editor .tlui-style-panel__section:empty { display: none; } .ddc_ink_drawing-editor .tlui-style-panel__section__common:not(:only-child), .ddc_ink_writing-editor .tlui-style-panel__section__common:not(:only-child) { margin-bottom: 7px; border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-style-panel__row, .ddc_ink_writing-editor .tlui-style-panel__row { display: flex; } .ddc_ink_drawing-editor .tlui-style-panel__row__extra-button, .ddc_ink_writing-editor .tlui-style-panel__row__extra-button { margin-left: -2px; } .ddc_ink_drawing-editor .tlui-style-panel__double-select-picker, .ddc_ink_writing-editor .tlui-style-panel__double-select-picker { display: flex; grid-template-columns: 1fr auto; align-items: center; padding-left: var(--space-4); color: var(--color-text-1); font-size: 12px; } .ddc_ink_drawing-editor .tlui-style-panel__double-select-picker-label, .ddc_ink_writing-editor .tlui-style-panel__double-select-picker-label { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex-grow: 2; max-width: 100%; } .ddc_ink_drawing-editor .tlui-style-panel__section *[data-state=open]::after, .ddc_ink_writing-editor .tlui-style-panel__section *[data-state=open]::after { background: var(--color-muted-0); } .ddc_ink_drawing-editor .tlui-input, .ddc_ink_writing-editor .tlui-input { background: none; margin: 0px; position: relative; z-index: 1; height: 40px; max-height: 40px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; font-weight: inherit; color: var(--color-text-1); padding: var(--space-4); padding-left: 0px; border: none; outline: none; text-overflow: ellipsis; width: 100%; user-select: all; text-rendering: optimizeLegibility; -webkit-user-select: auto !important; } .ddc_ink_drawing-editor .tlui-input__wrapper, .ddc_ink_writing-editor .tlui-input__wrapper { width: 100%; height: 44px; display: flex; align-items: center; gap: var(--space-4); color: var(--color-text); } .ddc_ink_drawing-editor .tlui-input__wrapper > .tlui-icon, .ddc_ink_writing-editor .tlui-input__wrapper > .tlui-icon { flex-shrink: 0; } @media (max-width: 600px) { @supports (-webkit-touch-callout: none) { .ddc_ink_drawing-editor, .ddc_ink_writing-editor { } .ddc_ink_drawing-editor .tlui-input, .ddc_ink_writing-editor .tlui-input { font-size: 16px; } } } .ddc_ink_drawing-editor .tlui-dialog__overlay, .ddc_ink_writing-editor .tlui-dialog__overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: var(--layer-overlays); background-color: var(--color-overlay); pointer-events: all; animation: fadeIn 0.12s ease-out; display: grid; place-items: center; overflow-y: auto; } .ddc_ink_drawing-editor .tlui-dialog__content, .ddc_ink_writing-editor .tlui-dialog__content { display: flex; flex-direction: column; position: relative; cursor: default; background-color: var(--color-panel); box-shadow: var(--shadow-3); border-radius: var(--radius-3); font-size: 12px; overflow: hidden; min-width: 300px; max-width: 80%; max-height: 80%; } .ddc_ink_drawing-editor .tlui-dialog__header, .ddc_ink_writing-editor .tlui-dialog__header { position: relative; display: flex; align-items: center; flex: 0; z-index: 999; padding-left: var(--space-4); color: var(--color-text); height: 44px; } .ddc_ink_drawing-editor .tlui-dialog__header__title, .ddc_ink_writing-editor .tlui-dialog__header__title { flex: 1; font-weight: inherit; font-size: 12px; margin: 0px; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-dialog__header__close, .ddc_ink_writing-editor .tlui-dialog__header__close { justify-self: flex-end; } .ddc_ink_drawing-editor .tlui-dialog__body, .ddc_ink_writing-editor .tlui-dialog__body { padding: var(--space-4) var(--space-4); flex: 0 1; overflow-y: auto; overflow-x: hidden; color: var(--color-text-1); user-select: all; -webkit-user-select: text; } .ddc_ink_drawing-editor .tlui-dialog__footer, .ddc_ink_writing-editor .tlui-dialog__footer { position: relative; z-index: 999; } .ddc_ink_drawing-editor .tlui-dialog__footer__actions, .ddc_ink_writing-editor .tlui-dialog__footer__actions { display: flex; align-items: center; justify-content: flex-end; } .ddc_ink_drawing-editor .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n+2), .ddc_ink_writing-editor .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n+2) { margin-right: -4px; } .ddc_ink_drawing-editor .tlui-toolbar, .ddc_ink_writing-editor .tlui-toolbar { grid-column: 1/span 3; grid-row: 1; display: flex; align-items: center; justify-content: center; flex-grow: 2; padding-bottom: calc(var(--space-3) + var(--sab)); } .ddc_ink_drawing-editor .tlui-toolbar__inner, .ddc_ink_writing-editor .tlui-toolbar__inner { position: relative; width: fit-content; display: flex; gap: var(--space-3); align-items: flex-end; } .ddc_ink_drawing-editor .tlui-toolbar__left, .ddc_ink_writing-editor .tlui-toolbar__left { width: fit-content; } .ddc_ink_drawing-editor .tlui-toolbar__extras, .ddc_ink_writing-editor .tlui-toolbar__extras { position: relative; z-index: 1; width: 100%; pointer-events: none; top: 6px; height: 48px; } .ddc_ink_drawing-editor .tlui-toolbar__extras:empty, .ddc_ink_writing-editor .tlui-toolbar__extras:empty { display: none; } .ddc_ink_drawing-editor .tlui-toolbar__extras__controls, .ddc_ink_writing-editor .tlui-toolbar__extras__controls { display: flex; position: relative; flex-direction: row; z-index: 1; background-color: var(--color-low); border-top-left-radius: var(--radius-4); border-top-right-radius: var(--radius-4); border: 2px solid var(--color-background); margin-left: 8px; margin-right: 0px; pointer-events: all; width: fit-content; } .ddc_ink_drawing-editor .tlui-toolbar__tools, .ddc_ink_writing-editor .tlui-toolbar__tools { display: flex; flex-direction: row; background-color: var(--color-low); border-radius: var(--radius-4); z-index: var(--layer-panels); pointer-events: all; position: relative; align-items: center; background: var(--color-panel); box-shadow: var(--shadow-2); } .ddc_ink_drawing-editor .tlui-toolbar__overflow, .ddc_ink_writing-editor .tlui-toolbar__overflow { width: 40px; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-toolbar__overflow, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-toolbar__overflow { width: 32px; padding: 0px; } .ddc_ink_drawing-editor .tlui-layout__mobile .tlui-toolbar *[data-state=open]::after, .ddc_ink_writing-editor .tlui-layout__mobile .tlui-toolbar *[data-state=open]::after { background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-help-menu, .ddc_ink_writing-editor .tlui-help-menu { pointer-events: all; position: absolute; bottom: var(--space-2); right: var(--space-2); z-index: var(--layer-panels); border: 2px solid var(--color-background); border-radius: 100%; } .ddc_ink_drawing-editor .tlui-context-menu__move-to-page__name, .ddc_ink_writing-editor .tlui-context-menu__move-to-page__name { max-width: min(300px, 35vw); overflow: hidden; text-overflow: ellipsis; } .ddc_ink_drawing-editor .tlui-context-menu__move-to-page__name[data-disabled], .ddc_ink_writing-editor .tlui-context-menu__move-to-page__name[data-disabled] { color: var(--color-text-3); pointer-events: none; } .ddc_ink_drawing-editor .tlui-menu:empty, .ddc_ink_writing-editor .tlui-menu:empty { display: none; } .ddc_ink_drawing-editor .tlui-menu, .ddc_ink_writing-editor .tlui-menu { z-index: var(--layer-menus); height: fit-content; width: fit-content; max-height: 80vh; border-radius: var(--radius-3); pointer-events: all; touch-action: auto; overflow-y: auto; overscroll-behavior: none; background-color: var(--color-panel); box-shadow: var(--shadow-3); } .ddc_ink_drawing-editor .tlui-menu::-webkit-scrollbar, .ddc_ink_writing-editor .tlui-menu::-webkit-scrollbar { display: none; } .ddc_ink_drawing-editor .tlui-menu__arrow, .ddc_ink_writing-editor .tlui-menu__arrow { position: relative; top: -1px; fill: var(--color-panel); stroke: var(--color-panel-contrast); stroke-width: 1px; } .ddc_ink_drawing-editor .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu__group { width: 100%; } .ddc_ink_drawing-editor .tlui-menu__group:empty, .ddc_ink_writing-editor .tlui-menu__group:empty { display: none; } .ddc_ink_drawing-editor .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu__group { border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-menu__group:nth-last-of-type(1), .ddc_ink_writing-editor .tlui-menu__group:nth-last-of-type(1) { border-bottom: none; } .ddc_ink_drawing-editor .tlui-menu__submenu__trigger[data-state=open]:not(:hover)::after, .ddc_ink_writing-editor .tlui-menu__submenu__trigger[data-state=open]:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-menu__submenu__trigger[data-direction=left][data-state=open]:not(:hover)::after, .ddc_ink_writing-editor .tlui-menu__submenu__trigger[data-direction=left][data-state=open]:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .ddc_ink_drawing-editor .tlui-menu[data-size=large] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=large] > .tlui-menu__group { min-width: initial; } .ddc_ink_drawing-editor .tlui-menu[data-size=medium] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=medium] > .tlui-menu__group { min-width: 144px; } .ddc_ink_drawing-editor .tlui-menu[data-size=small] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=small] > .tlui-menu__group { min-width: 96px; } .ddc_ink_drawing-editor .tlui-menu[data-size=tiny] > .tlui-menu__group, .ddc_ink_writing-editor .tlui-menu[data-size=tiny] > .tlui-menu__group { min-width: 0px; } .ddc_ink_drawing-editor .tlui-actions-menu, .ddc_ink_writing-editor .tlui-actions-menu { max-height: calc(100vh - 150px); } .ddc_ink_drawing-editor .tlui-toast__viewport, .ddc_ink_writing-editor .tlui-toast__viewport { position: absolute; inset: 0px; margin: 0px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; gap: var(--space-3); pointer-events: none; padding: 0px var(--space-3) 64px 0px; z-index: var(--layer-toasts); } .ddc_ink_drawing-editor .tlui-toast__viewport > *, .ddc_ink_writing-editor .tlui-toast__viewport > * { pointer-events: all; } .ddc_ink_drawing-editor .tlui-toast__icon, .ddc_ink_writing-editor .tlui-toast__icon { padding-top: var(--space-4); padding-left: var(--space-4); color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-toast__container, .ddc_ink_writing-editor .tlui-toast__container { min-width: 200px; display: flex; flex-direction: row; background-color: var(--color-panel); box-shadow: var(--shadow-2); border-radius: var(--radius-3); font-size: 12px; } .ddc_ink_drawing-editor .tlui-toast__main, .ddc_ink_writing-editor .tlui-toast__main { flex-grow: 2; max-width: 280px; } .ddc_ink_drawing-editor .tlui-toast__content, .ddc_ink_writing-editor .tlui-toast__content { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .ddc_ink_drawing-editor .tlui-toast__title, .ddc_ink_writing-editor .tlui-toast__title { font-weight: bold; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-toast__description, .ddc_ink_writing-editor .tlui-toast__description { color: var(--color-text-1); padding: var(--space-3); margin: 0px; padding: 0px; } .ddc_ink_drawing-editor .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions, .ddc_ink_writing-editor .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions { padding-left: 0px; } .ddc_ink_drawing-editor .tlui-toast__actions, .ddc_ink_writing-editor .tlui-toast__actions { display: flex; flex-direction: row; justify-content: flex-start; margin-left: 0; } .ddc_ink_drawing-editor .tlui-toast__close, .ddc_ink_writing-editor .tlui-toast__close { align-self: flex-end; flex-shrink: 0; } @media (prefers-reduced-motion: no-preference) { .ddc_ink_drawing-editor .tlui-toast__container[data-state=open], .ddc_ink_writing-editor .tlui-toast__container[data-state=open] { animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .ddc_ink_drawing-editor .tlui-toast__container[data-state=closed], .ddc_ink_writing-editor .tlui-toast__container[data-state=closed] { animation: hide 100ms ease-in; } .ddc_ink_drawing-editor .tlui-toast__container[data-swipe=move], .ddc_ink_writing-editor .tlui-toast__container[data-swipe=move] { transform: translateX(var(--radix-toast-swipe-move-x)); } .ddc_ink_drawing-editor .tlui-toast__container[data-swipe=cancel], .ddc_ink_writing-editor .tlui-toast__container[data-swipe=cancel] { transform: translateX(0); transition: transform 200ms ease-out; } .ddc_ink_drawing-editor .tlui-toast__container[data-swipe=end], .ddc_ink_writing-editor .tlui-toast__container[data-swipe=end] { animation: swipe-out 100ms ease-out; } } .ddc_ink_drawing-editor .tlui-layout__bottom, .ddc_ink_writing-editor .tlui-layout__bottom { grid-row: 2; } .ddc_ink_drawing-editor .tlui-layout__bottom__main, .ddc_ink_writing-editor .tlui-layout__bottom__main { width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; } .ddc_ink_drawing-editor .tlui-navigation-panel, .ddc_ink_writing-editor .tlui-navigation-panel { display: flex; width: min-content; flex-direction: column; z-index: var(--layer-panels); pointer-events: all; position: absolute; left: 0px; bottom: 0px; } .ddc_ink_drawing-editor .tlui-navigation-panel::before, .ddc_ink_writing-editor .tlui-navigation-panel::before { content: ""; display: block; position: absolute; z-index: -1; inset: -2px -2px 0px 0px; border-radius: 0; border-top: 2px solid var(--color-background); border-right: 2px solid var(--color-background); border-top-right-radius: var(--radius-4); background-color: var(--color-low); } .ddc_ink_drawing-editor .tlui-navigation-panel__toggle .tlui-icon, .ddc_ink_writing-editor .tlui-navigation-panel__toggle .tlui-icon { opacity: 0.24; } .ddc_ink_drawing-editor .tlui-navigation-panel__toggle:active .tlui-icon, .ddc_ink_writing-editor .tlui-navigation-panel__toggle:active .tlui-icon { opacity: 1; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-navigation-panel__toggle:hover .tlui-icon, .ddc_ink_writing-editor .tlui-navigation-panel__toggle:hover .tlui-icon { opacity: 1; } } .ddc_ink_drawing-editor .tlui-minimap, .ddc_ink_writing-editor .tlui-minimap { width: 100%; height: 96px; min-height: 96px; overflow: hidden; padding: var(--space-3); padding-top: 0px; } .ddc_ink_drawing-editor .tlui-minimap__canvas, .ddc_ink_writing-editor .tlui-minimap__canvas { position: relative; width: 100%; height: 100%; } @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slide-in { from { transform: translateX(calc(100% + var(--space-3))); } to { transform: translateX(0px); } } @keyframes swipe-out { from { transform: translateX(var(--radix-toast-swipe-end-x)); } to { transform: translateX(calc(100% + var(--space-3))); } } .ddc_ink_drawing-editor .tlui-page-menu__wrapper, .ddc_ink_writing-editor .tlui-page-menu__wrapper { position: relative; display: flex; flex-direction: column; width: 220px; height: fit-content; max-height: 50vh; } .ddc_ink_drawing-editor .tlui-page-menu__trigger, .ddc_ink_writing-editor .tlui-page-menu__trigger { width: 128px; } .ddc_ink_drawing-editor .tlui-page-menu__header, .ddc_ink_writing-editor .tlui-page-menu__header { display: flex; flex-direction: row; align-items: center; width: 100%; height: 40px; padding-left: var(--space-4); border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-page-menu__header > .tlui-button:nth-of-type(1), .ddc_ink_writing-editor .tlui-page-menu__header > .tlui-button:nth-of-type(1) { margin-right: -4px; } .ddc_ink_drawing-editor .tlui-page-menu__header__title, .ddc_ink_writing-editor .tlui-page-menu__header__title { color: var(--color-text); font-size: 12px; flex-grow: 2; } .ddc_ink_drawing-editor .tlui-page-menu__name, .ddc_ink_writing-editor .tlui-page-menu__name { flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddc_ink_drawing-editor .tlui-page-menu__list, .ddc_ink_writing-editor .tlui-page-menu__list { position: relative; touch-action: auto; flex-direction: column; max-height: 100%; overflow-x: hidden; overflow-y: auto; touch-action: auto; } .ddc_ink_drawing-editor .tlui-page-menu__item, .ddc_ink_writing-editor .tlui-page-menu__item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0px; } .ddc_ink_drawing-editor .tlui-page-menu__item:nth-of-type(n + 2), .ddc_ink_writing-editor .tlui-page-menu__item:nth-of-type(n + 2) { margin-top: -4px; } .ddc_ink_drawing-editor .tlui-page-menu__item__button, .ddc_ink_writing-editor .tlui-page-menu__item__button { width: 100%; } .ddc_ink_drawing-editor .tlui-page-menu__item__button:not(:only-child), .ddc_ink_writing-editor .tlui-page-menu__item__button:not(:only-child) { flex-grow: 2; margin-right: -2px; } .ddc_ink_drawing-editor .tlui-page-menu__item__button > span, .ddc_ink_writing-editor .tlui-page-menu__item__button > span { display: block; flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddc_ink_drawing-editor .tlui-page-menu__item__button__checkbox, .ddc_ink_writing-editor .tlui-page-menu__item__button__checkbox { padding-left: 35px; } .ddc_ink_drawing-editor .tlui-page-menu__item__button__check, .ddc_ink_writing-editor .tlui-page-menu__item__button__check { position: absolute; left: 0px; width: 24px; padding-left: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable, .ddc_ink_writing-editor .tlui-page_menu__item__sortable { position: absolute; top: 0px; left: 0px; width: 100%; height: fit-content; display: flex; flex-direction: row; align-items: center; overflow: hidden; z-index: 1; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__title, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__title { flex: 1; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__title > .tlui-input__wrapper, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__title > .tlui-input__wrapper { height: 100%; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable:focus-within, .ddc_ink_writing-editor .tlui-page_menu__item__sortable:focus-within { z-index: 10; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__handle, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__handle { touch-action: none; width: 32px; min-width: 0px; height: 40px; cursor: grab; color: var(--color-text-3); flex-shrink: 0; margin-right: -9px; } .ddc_ink_drawing-editor .tlui-page_menu__item__sortable__handle:active, .ddc_ink_writing-editor .tlui-page_menu__item__sortable__handle:active { cursor: grabbing; } .ddc_ink_drawing-editor .tlui-page-menu__item__input, .ddc_ink_writing-editor .tlui-page-menu__item__input { margin-left: 12px; height: 100%; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu, .ddc_ink_writing-editor .tlui-page_menu__item__submenu { pointer-events: all; flex: 0; cursor: pointer; margin: 0px; display: none; margin-left: -2px; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu[data-isediting=true], .ddc_ink_writing-editor .tlui-page_menu__item__submenu[data-isediting=true] { display: block; opacity: 1; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu > .tlui-button { opacity: 0; } @media (any-pointer: coarse) { .ddc_ink_drawing-editor .tlui-page_menu__item__submenu > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu > .tlui-button { opacity: 1; } } .ddc_ink_drawing-editor .tlui-page-menu__item__button .tlui-button__icon, .ddc_ink_writing-editor .tlui-page-menu__item__button .tlui-button__icon { margin-right: 4px; } @media (hover: hover) { .ddc_ink_drawing-editor .tlui-page_menu__item__submenu, .ddc_ink_writing-editor .tlui-page_menu__item__submenu { display: block; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu[data-isediting=true] > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu[data-isediting=true] > .tlui-button { opacity: 0; } .ddc_ink_drawing-editor .tlui-page_menu__item__submenu > .tlui-button[data-state=open], .ddc_ink_drawing-editor .tlui-page_menu__item__submenu:hover > .tlui-button, .ddc_ink_drawing-editor .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__submenu > .tlui-button[data-state=open], .ddc_ink_writing-editor .tlui-page_menu__item__submenu:hover > .tlui-button, .ddc_ink_writing-editor .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button { opacity: 1; } } .ddc_ink_drawing-editor .tlui-edit-link-dialog, .ddc_ink_writing-editor .tlui-edit-link-dialog { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text); } .ddc_ink_drawing-editor .tlui-edit-link-dialog__input, .ddc_ink_writing-editor .tlui-edit-link-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } .ddc_ink_drawing-editor .tlui-embed__spacer, .ddc_ink_writing-editor .tlui-embed__spacer { flex-grow: 2; min-height: 0px; margin-left: calc(-1 * var(--space-4)); margin-top: calc(-1 * var(--space-4)); pointer-events: none; } .ddc_ink_drawing-editor .tlui-embed-dialog__list, .ddc_ink_writing-editor .tlui-embed-dialog__list { display: flex; flex-direction: column; padding-bottom: var(--space-5); } .ddc_ink_drawing-editor .tlui-embed-dialog__item__image, .ddc_ink_writing-editor .tlui-embed-dialog__item__image { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-size: contain; background-repeat: no-repeat; background-position: center center; } .ddc_ink_drawing-editor .tlui-embed-dialog__enter, .ddc_ink_writing-editor .tlui-embed-dialog__enter { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-embed-dialog__input, .ddc_ink_writing-editor .tlui-embed-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } .ddc_ink_drawing-editor .tlui-embed-dialog__warning, .ddc_ink_writing-editor .tlui-embed-dialog__warning { color: var(--color-warn); text-shadow: none; } .ddc_ink_drawing-editor .tlui-embed-dialog__instruction__link, .ddc_ink_writing-editor .tlui-embed-dialog__instruction__link { display: flex; gap: var(--space-1); margin-top: var(--space-4); } .ddc_ink_drawing-editor .tlui-embed-dialog__enter a, .ddc_ink_writing-editor .tlui-embed-dialog__enter a { color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-following-indicator, .ddc_ink_writing-editor .tlui-following-indicator { display: block; position: absolute; inset: 0px; border-width: 2px; border-style: solid; z-index: var(--layer-following-indicator); pointer-events: none; } .ddc_ink_drawing-editor .tlui-offline-indicator, .ddc_ink_writing-editor .tlui-offline-indicator { display: flex; flex-direction: row; gap: var(--space-3); color: var(--color-text); background-color: var(--color-low); border: 3px solid var(--color-background); padding: 0px var(--space-5); height: 42px; align-items: center; justify-content: center; border-radius: 99px; opacity: 0; animation: fade-in; animation-duration: 0.12s; animation-delay: 2s; animation-fill-mode: forwards; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__header, .ddc_ink_writing-editor .tlui-shortcuts-dialog__header { border-bottom: 1px solid var(--color-divider); } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__body, .ddc_ink_writing-editor .tlui-shortcuts-dialog__body { position: relative; columns: 3; column-gap: var(--space-9); pointer-events: all; touch-action: auto; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__body__tablet, .ddc_ink_writing-editor .tlui-shortcuts-dialog__body__tablet { columns: 2; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__body__mobile, .ddc_ink_writing-editor .tlui-shortcuts-dialog__body__mobile { columns: 1; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__group, .ddc_ink_writing-editor .tlui-shortcuts-dialog__group { break-inside: avoid-column; padding-bottom: var(--space-6); } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__group__title, .ddc_ink_writing-editor .tlui-shortcuts-dialog__group__title { font-size: inherit; font-weight: inherit; margin: 0px; color: var(--color-text-3); height: 32px; display: flex; align-items: center; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__group__content, .ddc_ink_writing-editor .tlui-shortcuts-dialog__group__content { display: flex; flex-direction: column; color: var(--color-text-1); } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__key-pair, .ddc_ink_writing-editor .tlui-shortcuts-dialog__key-pair { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; height: 32px; } .ddc_ink_drawing-editor .tlui-shortcuts-dialog__key-pair__key, .ddc_ink_writing-editor .tlui-shortcuts-dialog__key-pair__key { flex: 1; font-size: 12px; } .ddc_ink_drawing-editor { transition: height 0.5s ease; } .ddc_ink_drawing-editor .tl-container { outline: none !important; } .ddc_ink_drawing-editor .tl-container .tl-canvas { background: none; overflow: hidden; } .ddc_ink_drawing-editor .tl-container .tl-canvas .tl-background { background: none; } .ddc_ink_drawing-editor { outline: solid 8px var(--color-base-10); border-radius: 20px; background-color: var(--color-base-05); } /* src/tldraw/drawing-menu/drawing-menu.scss */ /* src/tldraw/extended-drawing-menu/extended-drawing-menu.scss */ .ink_extended-writing-menu { display: flex; gap: 4px; pointer-events: none; } .ink_extended-writing-menu button { width: auto; pointer-events: auto; background-color: var(--interactive-normal); color: var(--color-base-60); } .ink_extended-writing-menu button:hover { background-color: var(--interactive-hover); color: var(--color-base-100); } .ink_extended-writing-menu button:disabled { cursor: default; color: var(--text-on-accent); background-color: var(--interactive-accent); } .ink_extended-writing-menu button:disabled:hover { box-shadow: var(--input-shadow); } .ink_extended-writing-menu button { width: 2.5em; height: 2.5em; border-radius: 0.8em; padding: 0 !important; } .ink_extended-writing-menu button.ddc_ink_btn-slim { width: 1.9em; height: 2.5em; border-radius: 0.8em; } .ink_extended-writing-menu button svg { width: 1.5em !important; height: 1.5em !important; } /* src/tldraw/drawing/drawing-embed.scss */ .markdown-source-view.mod-cm6 .cm-content > .cm-preview-code-block.cm-embed-block.markdown-rendered[contenteditable=false]:has(.ddc_ink_drawing-embed), .markdown-source-view.mod-cm6 .cm-content > .cm-preview-code-block.cm-embed-block.markdown-rendered[contenteditable=false]:has(.ddc_ink_drawing-embed):hover { contain: unset !important; overflow: visible; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) { margin: 0 calc(-1 * var(--file-margins)) !important; z-index: 10; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed):hover { box-shadow: none; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .edit-block-button { display: none; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .ddc_ink_drawing-editor .tl-container { overflow: visible; clip: unset; contain: none !important; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .ddc_ink_drawing-editor .tl-container .tlui-layout { overflow: visible; clip: unset; contain: none !important; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .ddc_ink_drawing-editor .tl-container .tlui-layout .tlui-button.tlui-menu__trigger { display: none; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .ddc_ink_drawing-editor .tl-container .tlui-layout .tlui-navigation-zone { display: none; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .ddc_ink_drawing-editor .tl-container .tlui-layout .tlui-help-menu { display: none; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .ddc_ink_drawing-editor .tl-container .tlui-layout .tlui-layout__top { grid-row: 1; position: absolute; top: 0; right: 0; translate: 0 -100%; } .cm-preview-code-block.cm-embed-block.markdown-rendered:has(.ddc_ink_drawing-embed) .ddc_ink_drawing-editor .tl-container .tlui-layout .tlui-layout__bottom { grid-row: 1; position: absolute; top: 0; left: 0; translate: 0 -100%; } .ddc_ink_drawing-embed { box-sizing: content-box; transition-property: padding; transition-duration: 0.5s; transition-timing-function: ease-out; } .theme-dark .ddc_ink_drawing-embed-preview path { fill: rgb(242, 242, 242); } .theme-dark .ddc_ink_drawing-embed-preview .ddc_ink_drawing-placeholder path { stroke: rgb(242, 242, 242) !important; } .theme-dark .ddc_ink_drawing-embed-preview .ddc_ink_drawing-placeholder rect, .theme-dark .ddc_ink_drawing-embed-preview .ddc_ink_drawing-placeholder circle { stroke: rgb(242, 242, 242) !important; } .theme-dark .ddc_ink_drawing-embed-preview rect, .theme-dark .ddc_ink_drawing-embed-preview circle { stroke: rgb(242, 242, 242); } .theme-light .ddc_ink_drawing-embed-preview path { fill: rgb(29, 29, 29); } .theme-light .ddc_ink_drawing-embed-preview .ddc_ink_drawing-placeholder path { stroke: rgb(29, 29, 29) !important; } .theme-light .ddc_ink_drawing-embed-preview .ddc_ink_drawing-placeholder rect, .theme-light .ddc_ink_drawing-embed-preview .ddc_ink_drawing-placeholder circle { stroke: rgb(29, 29, 29) !important; } /* src/tldraw/drawing/drawing-embed-preview/drawing-embed-preview.scss */ .ddc_ink_drawing-embed-preview { pointer-events: none; display: flex; justify-content: center; align-items: center; } .ddc_ink_drawing-embed-preview img { pointer-events: auto; cursor: pointer; } .ddc_ink_drawing-embed-preview.ddc_ink_visible-background { background-color: var(--color-base-05); border-radius: 20px; } .ddc_ink_drawing-embed-preview.ddc_ink_visible-frame { border: 2px solid var(--color-base-30); border-radius: 20px; } /* src/components/jsx-components/resize-handle/resize-handle.scss */ .ddc_ink_resize-handle { position: absolute; z-index: 1000; right: 0; bottom: 0; translate: 25% 50%; pointer-events: auto; background-color: var(--interactive-normal); color: var(--color-base-60); fill: var(--color-base-60); width: 2.5em; height: 2.5em; border-radius: 2.5em; padding: 0 !important; } .ddc_ink_resize-handle:hover { cursor: nwse-resize; background-color: var(--interactive-hover); color: var(--color-base-100); fill: var(--color-base-100); } .ddc_ink_resize-handle svg { width: 1.5em !important; height: 1.5em !important; } .ddc_ink_resize-handle { animation: menu-button_scale-up 0.3s 0.1s ease-out; animation-delay: 0.2s; animation-fill-mode: both; }