@ibodr/draw 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +5758 -0
  2. package/dist/index.mjs +37055 -0
  3. package/dist/index.mjs.map +1 -0
  4. package/draw.css +3858 -0
  5. package/package.json +65 -0
package/draw.css ADDED
@@ -0,0 +1,3858 @@
1
+ /* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */
2
+ /* This file is created by the copy-css-files.mjs script in packages/draw. */
3
+ /* It combines @ibodr/editor's editor.css and tldraw's ui.css */
4
+
5
+ /* @ibodr/editor */
6
+
7
+ .dr-container {
8
+ width: 100%;
9
+ height: 100%;
10
+ font-size: 12px;
11
+ /* Spacing */
12
+ --dr-space-1: 2px;
13
+ --dr-space-2: 4px;
14
+ --dr-space-3: 8px;
15
+ --dr-space-4: 12px;
16
+ --dr-space-5: 16px;
17
+ --dr-space-6: 20px;
18
+ --dr-space-7: 28px;
19
+ --dr-space-8: 32px;
20
+ --dr-space-9: 64px;
21
+ --dr-space-10: 72px;
22
+ /* Radius */
23
+ --dr-radius-0: 2px;
24
+ --dr-radius-1: 4px;
25
+ --dr-radius-2: 6px;
26
+ --dr-radius-3: 9px;
27
+ --dr-radius-4: 11px;
28
+
29
+ /*
30
+ * Canvas z-index
31
+ *
32
+ * .dr-canvas has `contain: strict` which creates its own stacking context.
33
+ * background, grid, shapes, overlays, and blocker are all children of .dr-canvas,
34
+ * so their z-indices are relative to the canvas, not the container.
35
+ *
36
+ * watermark and canvas-in-front are siblings of .dr-canvas (outside it),
37
+ * so they compete with the UI layer (.tlui-layout at z-index 300).
38
+ * canvas-in-front must be below the UI layer (300) to sit between
39
+ * the canvas and the UI.
40
+ */
41
+ --dr-layer-canvas-hidden: -999999;
42
+ --dr-layer-canvas-background: 100;
43
+ --dr-layer-canvas-grid: 150;
44
+ --dr-layer-watermark: 200;
45
+ --dr-layer-canvas-in-front: 250;
46
+ --dr-layer-canvas-shapes: 300;
47
+ --dr-layer-canvas-overlays: 500;
48
+ --dr-layer-canvas-blocker: 10000;
49
+
50
+ /* Canvas overlays z-index */
51
+ --dr-layer-overlays-collaborator-scribble: 10;
52
+ --dr-layer-overlays-collaborator-brush: 20;
53
+ --dr-layer-overlays-collaborator-shape-indicator: 30;
54
+ --dr-layer-overlays-user-scribble: 40;
55
+ --dr-layer-overlays-user-brush: 50;
56
+ --dr-layer-overlays-user-snapline: 90;
57
+ --dr-layer-overlays-selection-fg: 100;
58
+ /* User handles need to be above selection edges / corners, matters for sticky note clone handles */
59
+ --dr-layer-overlays-user-handles: 105;
60
+ --dr-layer-overlays-user-indicator-hint: 110;
61
+ --dr-layer-overlays-collaborator-cursor-hint: 120;
62
+ --dr-layer-overlays-collaborator-cursor: 130;
63
+
64
+ /* Text editor z-index */
65
+ --dr-layer-text-container: 1;
66
+ --dr-layer-text-content: 3;
67
+ --dr-layer-text-editor: 4;
68
+
69
+ /* Error fallback z-index */
70
+ --dr-layer-error-overlay: 1;
71
+ --dr-layer-error-canvas: 2;
72
+ --dr-layer-error-canvas-after: 3;
73
+ --dr-layer-error-content: 4;
74
+
75
+ /* Misc */
76
+ --dr-zoom: 1;
77
+ --dr-tab-size: 2;
78
+
79
+ /* Cursor SVGs */
80
+ --dr-cursor-none: none;
81
+ --dr-cursor-default:
82
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>")
83
+ 12 8,
84
+ default;
85
+ --dr-cursor-pointer:
86
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' stroke-linejoin='round'/><path d='m21.5664 21.7344v-3.459'/><path d='m19.5508 21.7461-.016-3.473'/><path d='m17.5547 18.3047.021 3.426'/></g></g></svg>")
87
+ 14 10,
88
+ pointer;
89
+ --dr-cursor-cross:
90
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>")
91
+ 16 16,
92
+ crosshair;
93
+ --dr-cursor-move:
94
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>")
95
+ 16 16,
96
+ move;
97
+ --dr-cursor-grab:
98
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' stroke-linejoin='round'/><path d='m20.5664 21.7344v-3.459'/><path d='m18.5508 21.7461-.016-3.473'/><path d='m16.5547 18.3047.021 3.426'/></g></g></svg>")
99
+ 16 16,
100
+ grab;
101
+ --dr-cursor-grabbing:
102
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042' fill='white'/><g stroke='black' stroke-width='.75'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042z' stroke-linejoin='round'/><path d='m20.5664 19.7344v-3.459' stroke-linecap='round'/><path d='m18.5508 19.7461-.016-3.473' stroke-linecap='round'/><path d='m16.5547 16.3047.021 3.426' stroke-linecap='round'/></g></g></svg>")
103
+ 16 16,
104
+ grabbing;
105
+ --dr-cursor-text:
106
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path fill='white' d='M7.94 0a5.25 5.25 0 0 0-3.47 1.17A5.27 5.27 0 0 0 1 0H0v3h1c1.41 0 1.85.7 2 1v3.94H2v3h1v3c-.13.3-.57 1-2 1H0v3h1a5.27 5.27 0 0 0 3.47-1.17c.98.8 2.21 1.21 3.47 1.17h1v-3h-1c-1.41 0-1.85-.7-2-1v-3H7v-3H6V4c.13-.3.57-1 2-1h1V0H7.94z'/><path fill='black' d='M7.94 2V1a4 4 0 0 0-3.47 1.64A4 4 0 0 0 1 1v1c1.3-.17 2.56.6 3 1.84v5.1H3v1h1v4.16c-.45 1.24-1.7 2-3 1.84v1a4.05 4.05 0 0 0 3.47-1.63 4.05 4.05 0 0 0 3.47 1.63v-1A2.82 2.82 0 0 1 5 14.1V9.93h1v-1H5V3.85A2.81 2.81 0 0 1 7.94 2z'/></g></svg>")
107
+ 4 10,
108
+ text;
109
+ --dr-cursor-zoom-in:
110
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 14h-2v-2h-2v2h-2v1.98h2v2.02h2v-2.02h2z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
111
+ 16 16,
112
+ zoom-in;
113
+ --dr-cursor-zoom-out:
114
+ url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 16h-5.98v-1.98h5.98z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
115
+ 16 16,
116
+ zoom-out;
117
+
118
+ /* These cursor values get programmatically overridden */
119
+ /* They're just here to help your editor autocomplete */
120
+ --dr-cursor: var(--dr-cursor-default);
121
+ --dr-cursor-resize-edge: ew-resize;
122
+ --dr-cursor-resize-corner: nesw-resize;
123
+ --dr-cursor-ew-resize: ew-resize;
124
+ --dr-cursor-ns-resize: ns-resize;
125
+ --dr-cursor-nesw-resize: nesw-resize;
126
+ --dr-cursor-nwse-resize: nwse-resize;
127
+ --dr-cursor-rotate: pointer;
128
+ --dr-cursor-nwse-rotate: pointer;
129
+ --dr-cursor-nesw-rotate: pointer;
130
+ --dr-cursor-senw-rotate: pointer;
131
+ --dr-cursor-swne-rotate: pointer;
132
+ --dr-scale: calc(1 / var(--dr-zoom));
133
+ /* fonts */
134
+ --dr-font-draw: 'draw_draw', sans-serif;
135
+ --dr-font-sans: 'draw_sans', sans-serif;
136
+ --dr-font-serif: 'draw_serif', serif;
137
+ --dr-font-mono: 'draw_mono', monospace;
138
+ /* text outline */
139
+ --dr-text-outline-a: calc(min(0.5, 1 / var(--dr-zoom)) * 2px);
140
+ --dr-text-outline-b: calc(min(0.5, 1 / var(--dr-zoom)) * -2px);
141
+ --dr-text-outline-reference:
142
+ 0 var(--dr-text-outline-b) 0 var(--dr-color-background),
143
+ 0 var(--dr-text-outline-a) 0 var(--dr-color-background),
144
+ var(--dr-text-outline-b) var(--dr-text-outline-b) 0 var(--dr-color-background),
145
+ var(--dr-text-outline-a) var(--dr-text-outline-b) 0 var(--dr-color-background),
146
+ var(--dr-text-outline-a) var(--dr-text-outline-a) 0 var(--dr-color-background),
147
+ var(--dr-text-outline-b) var(--dr-text-outline-a) 0 var(--dr-color-background);
148
+ --dr-text-outline: var(--dr-text-outline-reference);
149
+ /* own properties */
150
+ position: relative;
151
+ inset: 0px;
152
+ height: 100%;
153
+ width: 100%;
154
+ overflow: clip;
155
+ color: var(--dr-color-text);
156
+ }
157
+
158
+ .dr-theme__light {
159
+ /* Canvas */
160
+ --dr-color-selection-fill: hsl(210, 100%, 56%, 24%);
161
+ --dr-color-selection-stroke: hsl(214, 84%, 56%);
162
+ --dr-color-background: hsl(210, 20%, 98%);
163
+ /* if you ever update --dr-color-background, update the hardcoded values in theme-init.js and globals.css
164
+ they're there to make sure the background color matches the user's preference before the actual app loads*/
165
+ --dr-color-grid: hsl(0, 0%, 43%);
166
+ /* UI */
167
+ --dr-color-low: hsl(204, 16%, 94%);
168
+ --dr-color-low-border: hsl(204, 16%, 92%);
169
+ --dr-color-muted-none: hsl(0, 0%, 0%, 0%);
170
+ --dr-color-muted-0: hsl(0, 0%, 0%, 2%);
171
+ --dr-color-muted-1: hsl(0, 0%, 0%, 10%);
172
+ --dr-color-muted-2: hsl(0, 0%, 0%, 4.3%);
173
+ --dr-color-hint: hsl(0, 0%, 0%, 5.5%);
174
+ --dr-color-overlay: hsl(0, 0%, 0%, 20%);
175
+ --dr-color-divider: hsl(0, 0%, 91%);
176
+ --dr-color-panel: hsl(0, 0%, 99%);
177
+ --dr-color-panel-contrast: hsl(0, 0%, 100%);
178
+ --dr-color-panel-overlay: hsl(0, 0%, 100%, 82%);
179
+ --dr-color-panel-transparent: hsla(0, 0%, 99%, 0%);
180
+ --dr-color-selected: hsl(214, 84%, 56%);
181
+ --dr-color-selected-contrast: hsl(0, 0%, 100%);
182
+ --dr-color-focus: hsl(219, 65%, 50%);
183
+ --dr-color-tooltip: hsla(200, 14%, 4%, 1);
184
+ /* Text */
185
+ --dr-color-text: hsl(0, 0%, 0%);
186
+ --dr-color-text-0: hsl(0, 0%, 11%);
187
+ --dr-color-text-1: hsl(0, 0%, 18%);
188
+ --dr-color-text-3: hsl(204, 4%, 45%);
189
+ --dr-color-text-shadow: hsl(0, 0%, 100%);
190
+ --dr-color-text-highlight: hsl(52, 100%, 50%);
191
+ --dr-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
192
+ /* Named */
193
+ --dr-color-primary: hsl(214, 84%, 56%);
194
+ --dr-color-success: hsl(123, 46%, 34%);
195
+ --dr-color-info: hsl(201, 98%, 41%);
196
+ --dr-color-warning: hsl(27, 98%, 47%);
197
+ --dr-color-danger: hsl(0, 90%, 43%);
198
+
199
+ /* Shadows */
200
+ --dr-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
201
+ --dr-shadow-2:
202
+ 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
203
+ 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--dr-color-panel-contrast);
204
+ --dr-shadow-3:
205
+ 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
206
+ inset 0px 0px 0px 1px var(--dr-color-panel-contrast);
207
+ --dr-shadow-4:
208
+ 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
209
+ 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--dr-color-panel-contrast);
210
+ }
211
+
212
+ .dr-theme__dark {
213
+ /* Canvas */
214
+ --dr-color-selection-fill: hsl(209, 100%, 57%, 20%);
215
+ --dr-color-selection-stroke: hsl(214, 84%, 56%);
216
+ --dr-color-background: hsl(240, 5%, 6.5%);
217
+ /* if you ever update --dr-color-background, update the hardcoded values in theme-init.js and globals.css
218
+ they're there to make sure the background color matches the user's preference before the actual app loads*/
219
+ --dr-color-grid: hsl(0, 0%, 40%);
220
+ /* UI */
221
+ --dr-color-low: hsl(260, 4.5%, 10.5%);
222
+ --dr-color-low-border: hsl(207, 10%, 10%);
223
+ --dr-color-muted-none: hsl(0, 0%, 100%, 0%);
224
+ --dr-color-muted-0: hsl(0, 0%, 100%, 2%);
225
+ --dr-color-muted-1: hsl(0, 0%, 100%, 10%);
226
+ --dr-color-muted-2: hsl(0, 0%, 100%, 5%);
227
+ --dr-color-hint: hsl(0, 0%, 100%, 7%);
228
+ --dr-color-overlay: hsl(0, 0%, 0%, 50%);
229
+ --dr-color-divider: hsl(240, 9%, 22%);
230
+ --dr-color-panel: hsl(235, 6.8%, 13.5%);
231
+ --dr-color-panel-contrast: hsl(245, 12%, 23%);
232
+ --dr-color-panel-overlay: hsl(210, 10%, 24%, 82%);
233
+ --dr-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
234
+ --dr-color-selected: hsl(217, 89%, 61%);
235
+ --dr-color-selected-contrast: hsl(0, 0%, 100%);
236
+ --dr-color-focus: hsl(217, 76%, 80%);
237
+ --dr-color-tooltip: hsla(0, 0%, 100%, 1);
238
+ /* Text */
239
+ --dr-color-text: hsl(210, 17%, 98%);
240
+ --dr-color-text-0: hsl(0, 9%, 94%);
241
+ --dr-color-text-1: hsl(0, 0%, 85%);
242
+ --dr-color-text-3: hsl(204, 4%, 75%);
243
+ --dr-color-text-shadow: hsl(210, 13%, 18%);
244
+ --dr-color-text-highlight: hsl(52, 100%, 41%);
245
+ --dr-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
246
+ /* Named */
247
+ --dr-color-primary: hsl(214, 84%, 56%);
248
+ --dr-color-success: hsl(123, 38%, 57%);
249
+ --dr-color-info: hsl(199, 92%, 56%);
250
+ --dr-color-warning: hsl(36, 100%, 57%);
251
+ --dr-color-danger: hsl(0, 82%, 66%);
252
+
253
+ /* Shadows */
254
+ --dr-shadow-1:
255
+ 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
256
+ inset 0px 0px 0px 1px var(--dr-color-panel-contrast);
257
+ --dr-shadow-2:
258
+ 0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
259
+ inset 0px 0px 0px 1px var(--dr-color-panel-contrast);
260
+ --dr-shadow-3:
261
+ 0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
262
+ inset 0px 0px 0px 1px var(--dr-color-panel-contrast);
263
+ }
264
+
265
+ .dr-counter-scaled {
266
+ transform: scale(var(--dr-scale));
267
+ transform-origin: top left;
268
+ width: calc(100% * var(--dr-zoom));
269
+ height: calc(100% * var(--dr-zoom));
270
+ }
271
+
272
+ .dr-container,
273
+ .dr-container * {
274
+ -webkit-touch-callout: none;
275
+ -webkit-tap-highlight-color: transparent;
276
+ scrollbar-highlight-color: transparent;
277
+ -webkit-user-select: none;
278
+ user-select: none;
279
+ box-sizing: border-box;
280
+ outline: none;
281
+ }
282
+
283
+ .dr-container a {
284
+ -webkit-touch-callout: initial;
285
+ }
286
+
287
+ .dr-container__focused {
288
+ outline: 1px solid var(--dr-color-low);
289
+ }
290
+
291
+ input,
292
+ *[contenteditable],
293
+ *[contenteditable] * {
294
+ user-select: text;
295
+ }
296
+
297
+ /* --------------------- Canvas --------------------- */
298
+
299
+ .dr-canvas {
300
+ position: absolute;
301
+ inset: 0px;
302
+ height: 100%;
303
+ width: 100%;
304
+ color: var(--dr-color-text);
305
+ cursor: var(--dr-cursor);
306
+ overflow: clip;
307
+ content-visibility: auto;
308
+ touch-action: none;
309
+ contain: strict;
310
+ }
311
+
312
+ .dr-canvas__in-front {
313
+ position: absolute;
314
+ inset: 0;
315
+ pointer-events: none;
316
+ z-index: var(--dr-layer-canvas-in-front);
317
+ }
318
+
319
+ .dr-shapes {
320
+ position: relative;
321
+ z-index: var(--dr-layer-canvas-shapes);
322
+ }
323
+
324
+ .dr-svg-context {
325
+ position: absolute;
326
+ top: 0px;
327
+ left: 0px;
328
+ width: 100%;
329
+ height: 100%;
330
+ pointer-events: none;
331
+ }
332
+
333
+ /* ------------------- Background ------------------- */
334
+
335
+ .dr-background__wrapper {
336
+ z-index: var(--dr-layer-canvas-background);
337
+ position: absolute;
338
+ inset: 0px;
339
+ height: 100%;
340
+ width: 100%;
341
+ }
342
+
343
+ .dr-background {
344
+ background-color: var(--dr-color-background);
345
+ width: 100%;
346
+ height: 100%;
347
+ }
348
+
349
+ /* --------------------- Grid Layer --------------------- */
350
+
351
+ .dr-grid {
352
+ position: absolute;
353
+ inset: 0px;
354
+ width: 100%;
355
+ height: 100%;
356
+ touch-action: none;
357
+ pointer-events: none;
358
+ z-index: var(--dr-layer-canvas-grid);
359
+ contain: strict;
360
+ }
361
+
362
+ .dr-grid-dot {
363
+ fill: var(--dr-color-grid);
364
+ }
365
+
366
+ /* --------------------- Layers --------------------- */
367
+
368
+ .dr-html-layer {
369
+ position: absolute;
370
+ top: 0px;
371
+ left: 0px;
372
+ width: 1px;
373
+ height: 1px;
374
+ contain: layout style size;
375
+ }
376
+
377
+ /* --------------- Overlay Stack --------------- */
378
+
379
+ /* -------------- Selection foreground -------------- */
380
+
381
+ .dr-selection__bg {
382
+ position: absolute;
383
+ top: 0px;
384
+ left: 0px;
385
+ transform-origin: top left;
386
+ background-color: transparent;
387
+ pointer-events: all;
388
+ }
389
+
390
+ .dr-transparent {
391
+ fill: transparent;
392
+ stroke: transparent;
393
+ }
394
+
395
+ .dr-hidden {
396
+ opacity: 0;
397
+ pointer-events: none;
398
+ }
399
+
400
+ /* -------------- Nametag / cursor chat ------------- */
401
+
402
+ .dr-nametag {
403
+ position: absolute;
404
+ top: 16px;
405
+ left: 13px;
406
+ width: fit-content;
407
+ height: fit-content;
408
+ max-width: 120px;
409
+ padding: 3px 6px;
410
+ white-space: nowrap;
411
+ position: absolute;
412
+ overflow: hidden;
413
+ text-overflow: ellipsis;
414
+ font-size: 12px;
415
+ border-radius: var(--dr-radius-2);
416
+ color: var(--dr-color-selected-contrast);
417
+ }
418
+
419
+ .dr-nametag-title {
420
+ position: absolute;
421
+ top: -2px;
422
+ left: 13px;
423
+ width: fit-content;
424
+ height: fit-content;
425
+ padding: 0px 6px;
426
+ max-width: 120px;
427
+ white-space: nowrap;
428
+ position: absolute;
429
+ overflow: hidden;
430
+ text-overflow: ellipsis;
431
+ font-size: 12px;
432
+ text-shadow: var(--dr-text-outline);
433
+ color: var(--dr-color-selected-contrast);
434
+ }
435
+
436
+ .dr-nametag-chat {
437
+ position: absolute;
438
+ top: 16px;
439
+ left: 13px;
440
+ width: fit-content;
441
+ height: fit-content;
442
+ color: var(--dr-color-selected-contrast);
443
+ white-space: nowrap;
444
+ position: absolute;
445
+ padding: 3px 6px;
446
+ font-size: 12px;
447
+ opacity: 1;
448
+ border-radius: var(--dr-radius-2);
449
+ }
450
+
451
+ .dr-cursor-chat {
452
+ position: absolute;
453
+ color: var(--dr-color-selected-contrast);
454
+ white-space: nowrap;
455
+ padding: 3px 6px;
456
+ font-size: 12px;
457
+ pointer-events: none;
458
+ z-index: var(--dr-layer-cursor);
459
+ margin-top: 16px;
460
+ margin-left: 13px;
461
+ opacity: 1;
462
+ border: none;
463
+ user-select: text;
464
+ border-radius: var(--dr-radius-2);
465
+ }
466
+
467
+ .dr-cursor-chat .dr-cursor-chat__bubble {
468
+ padding-right: 12px;
469
+ }
470
+
471
+ .dr-cursor-chat::selection {
472
+ background: var(--dr-color-selected);
473
+ color: var(--dr-color-selected-contrast);
474
+ text-shadow: none;
475
+ }
476
+
477
+ .dr-cursor-chat::placeholder {
478
+ color: var(--dr-color-selected-contrast);
479
+ opacity: 0.7;
480
+ }
481
+
482
+ /* ---------------------- Text ---------------------- */
483
+
484
+ .dr-text-shape-label {
485
+ position: relative;
486
+ font-weight: normal;
487
+ min-width: 1px;
488
+ padding: 0px;
489
+ margin: 0px;
490
+ border: none;
491
+ width: fit-content;
492
+ height: fit-content;
493
+ font-variant: normal;
494
+ font-style: normal;
495
+ pointer-events: all;
496
+ white-space: pre-wrap;
497
+ overflow-wrap: break-word;
498
+ }
499
+
500
+ .dr-plain-text-wrapper[data-isediting='true'] .dr-text-content {
501
+ opacity: 0;
502
+ }
503
+
504
+ .dr-rich-text-wrapper[data-isediting='true'] .dr-text-content {
505
+ display: none;
506
+ }
507
+
508
+ .dr-text {
509
+ /* remove overflow from textarea on windows */
510
+ margin: 0px;
511
+ padding: 0px;
512
+
513
+ appearance: auto;
514
+ background: none;
515
+ border-image: none;
516
+ border: 0px;
517
+ caret-color: var(--dr-color-text);
518
+ color: inherit;
519
+ column-count: initial !important;
520
+ display: inline-block;
521
+ font-family: inherit;
522
+ font-feature-settings: normal;
523
+ font-kerning: auto;
524
+ font-optical-sizing: auto;
525
+ font-size: inherit;
526
+ font-stretch: 100%;
527
+ font-style: inherit;
528
+ font-variant: inherit;
529
+ font-variation-settings: normal;
530
+ font-weight: inherit;
531
+ letter-spacing: inherit;
532
+ line-height: inherit;
533
+ outline: none;
534
+ overflow-wrap: break-word;
535
+ text-align: inherit;
536
+ text-indent: 0px;
537
+ text-rendering: auto;
538
+ text-shadow: inherit;
539
+ text-transform: none;
540
+ white-space: pre-wrap;
541
+ line-break: normal;
542
+ word-spacing: 0px;
543
+ word-wrap: break-word;
544
+ writing-mode: horizontal-tb !important;
545
+ }
546
+
547
+ .dr-text-measure {
548
+ z-index: var(--dr-layer-canvas-hidden);
549
+ opacity: 0;
550
+ visibility: hidden;
551
+
552
+ /* pointer-events: all; */
553
+ /* opacity: 1; */
554
+ /* z-index: 99999; */
555
+
556
+ position: absolute;
557
+ top: 0px;
558
+ left: 0px;
559
+ width: max-content;
560
+ box-sizing: border-box;
561
+ pointer-events: none;
562
+ white-space: pre-wrap;
563
+ word-wrap: break-word;
564
+ overflow-wrap: break-word;
565
+ resize: none;
566
+ border: none;
567
+ user-select: none;
568
+ contain: layout style paint;
569
+ /* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
570
+ unicode-bidi: plaintext;
571
+ -webkit-user-select: none;
572
+ }
573
+
574
+ .dr-text-input,
575
+ .dr-text-content {
576
+ position: absolute;
577
+ inset: 0px;
578
+ height: 100%;
579
+ width: 100%;
580
+ min-width: 1px;
581
+ min-height: 1px;
582
+ outline: none;
583
+ }
584
+
585
+ .dr-text-content__wrapper {
586
+ position: relative;
587
+ width: fit-content;
588
+ height: fit-content;
589
+ display: flex;
590
+ align-items: center;
591
+ justify-content: center;
592
+ pointer-events: none;
593
+ min-height: auto;
594
+ }
595
+
596
+ .dr-text-content {
597
+ overflow: visible;
598
+ pointer-events: none;
599
+ }
600
+
601
+ .dr-text-input {
602
+ resize: none;
603
+ user-select: all;
604
+ -webkit-user-select: text;
605
+ cursor: var(--dr-cursor-text);
606
+ }
607
+
608
+ .dr-text-input:not(.dr-rich-text) {
609
+ /*
610
+ * Note: this `overflow: hidden` is key for scrollbars to not show up
611
+ * plaintext/<textarea> editors.
612
+ */
613
+ overflow: hidden;
614
+ }
615
+
616
+ .dr-text-input::selection {
617
+ background: var(--dr-color-selected);
618
+ color: var(--dr-color-selected-contrast);
619
+ text-shadow: none;
620
+ }
621
+
622
+ /* Text label */
623
+
624
+ .dr-text-label {
625
+ display: flex;
626
+ justify-content: center;
627
+ align-items: center;
628
+ color: var(--dr-color-text);
629
+ line-height: inherit;
630
+ position: absolute;
631
+ inset: 0px;
632
+ height: 100%;
633
+ width: 100%;
634
+ }
635
+
636
+ .dr-text-label[data-hastext='false'][data-isediting='false'] > .dr-text-label__inner {
637
+ width: 40px;
638
+ height: 40px;
639
+ }
640
+
641
+ .dr-text-label[data-hastext='true'][data-isediting='false'] .dr-text-content {
642
+ pointer-events: all;
643
+ }
644
+
645
+ .dr-text-label__inner > .dr-text-input.dr-rich-text {
646
+ display: none;
647
+ position: static;
648
+ }
649
+
650
+ .dr-text-wrapper[data-isediting='false'] .dr-text-input {
651
+ opacity: 0;
652
+ cursor: var(--dr-cursor-default);
653
+ }
654
+
655
+ .dr-rich-text[data-is-ready-for-editing='true'],
656
+ .dr-text-wrapper[data-is-ready-for-editing='true'] .dr-text-input {
657
+ cursor: var(--dr-cursor-text);
658
+ }
659
+
660
+ .dr-text-label[data-textwrap='true'] > .dr-text-label__inner {
661
+ max-width: 100%;
662
+ }
663
+
664
+ .dr-text-label[data-isediting='true'] {
665
+ background-color: transparent;
666
+ min-height: auto;
667
+ }
668
+
669
+ .dr-text-wrapper .dr-text-content {
670
+ pointer-events: all;
671
+ z-index: var(--dr-layer-text-content);
672
+ }
673
+
674
+ .dr-text-label__inner > .dr-text-content {
675
+ position: relative;
676
+ top: 0px;
677
+ left: 0px;
678
+ padding: inherit;
679
+ height: fit-content;
680
+ width: fit-content;
681
+ border-radius: var(--dr-radius-1);
682
+ max-width: 100%;
683
+ }
684
+
685
+ .dr-text-label__inner > .dr-text-input {
686
+ position: absolute;
687
+ inset: 0px;
688
+ height: 100%;
689
+ width: 100%;
690
+ padding: inherit;
691
+ }
692
+
693
+ .dr-text-wrapper[data-isselected='true'] .dr-text-input {
694
+ z-index: var(--dr-layer-text-editor);
695
+ pointer-events: all;
696
+ }
697
+
698
+ /* This part of the rule helps preserve the occlusion rules for the shapes so we
699
+ * don't click on shapes that are behind other shapes.
700
+ * One extra nuance is we don't use this behavior for:
701
+ * - arrows which have weird geometry and just gets in the way.
702
+ * - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield
703
+ * - shapes that are not filled
704
+ */
705
+ .dr-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true'])
706
+ .dr-shape:not(
707
+ [data-shape-type='arrow'],
708
+ [data-shape-type='draw'],
709
+ [data-shape-type='line'],
710
+ [data-shape-type='highlight'],
711
+ [data-shape-is-filled='false']
712
+ ) {
713
+ pointer-events: all;
714
+ }
715
+
716
+ .dr-rich-text .ProseMirror {
717
+ word-wrap: break-word;
718
+ overflow-wrap: break-word;
719
+ white-space: pre-wrap;
720
+
721
+ /**
722
+ * Note: ProseMirror disables this in https://github.com/ProseMirror/prosemirror-view/commit/6b3b2205e2f3029cb8e8e86c55a190a22491df31
723
+ * However, that was from 8 years ago and the browser caret issue
724
+ * it mentions seems to be fixed. So, we're re-enabling it.
725
+ * We'll tell ProseMirror maybe to get rid of this on their end.
726
+ *
727
+ */
728
+ -webkit-font-variant-ligatures: inherit;
729
+ font-variant-ligatures: inherit;
730
+ font-feature-settings: inherit;
731
+
732
+ /**
733
+ * N.B. This following CSS Rule comes standard with the tiptap editor.
734
+ * Combined with the above rule that it supersedes, it allows for
735
+ * the auto-linking to work in text. Say, when typing example.com
736
+ * this helps it automatically turn that bit of text into a link.
737
+ *
738
+ * However, specifically, the break-spaces features seems to cause
739
+ * rendering differences when going in-and-out of edit mode. For example,
740
+ * the statically rendered text 'the rain in spain falls mainly on the plain'
741
+ * in a note shape will render differently when going in-and-out of edit mode.
742
+ *
743
+ * So, this is commented out to help make both the autolinking work (which now
744
+ * relies on the white-space: pre-wrap to work and to make the static/edit-mode
745
+ * rendering consistent.
746
+ * In the future, we might consider just making the static rendering just use
747
+ * white-space: break-spaces to make it consistent with the edit mode if need be.
748
+ *
749
+ * Also, the amount of ink I've spilt in my career writing comments explaining
750
+ * white-space in contenteditable is incredible.
751
+ *
752
+ /* white-space: break-spaces; */
753
+ }
754
+
755
+ .dr-rich-text {
756
+ tab-size: var(--dr-tab-size, 2);
757
+ }
758
+
759
+ .dr-rich-text p {
760
+ margin: 0;
761
+ /* Depending on the extensions, <p> tags can be empty, without a <br />. */
762
+ min-height: 1lh;
763
+ }
764
+
765
+ .dr-rich-text ul,
766
+ .dr-rich-text ol {
767
+ text-align: left;
768
+ margin: 0;
769
+ padding-left: 3.25ch;
770
+ /* Some resets, like Tailwind, nix the list styling. */
771
+ list-style: revert;
772
+ }
773
+
774
+ .dr-rich-text ol:has(> li:nth-child(10)) {
775
+ padding-left: 4.25ch;
776
+ }
777
+
778
+ .dr-rich-text ol:has(> li:nth-child(100)) {
779
+ padding-left: 5.25ch;
780
+ }
781
+
782
+ .dr-rich-text h1,
783
+ .dr-rich-text h2,
784
+ .dr-rich-text h3,
785
+ .dr-rich-text h4,
786
+ .dr-rich-text h5,
787
+ .dr-rich-text h6 {
788
+ margin-top: 5px;
789
+ margin-bottom: 10px;
790
+ }
791
+
792
+ .dr-rich-text a {
793
+ color: var(--dr-color-primary);
794
+ text-decoration: underline;
795
+ }
796
+
797
+ .dr-rich-text[data-is-select-tool-active='false'] a {
798
+ cursor: inherit;
799
+ }
800
+
801
+ .dr-rich-text code {
802
+ font-family: var(--dr-font-mono);
803
+ }
804
+
805
+ .dr-rich-text mark {
806
+ background-color: #fddd00;
807
+ color: currentColor;
808
+ border-radius: 2px;
809
+ }
810
+
811
+ .dr-theme__light .dr-rich-text mark {
812
+ text-shadow: none;
813
+ }
814
+
815
+ .dr-theme__dark .dr-rich-text mark {
816
+ background-color: var(--dr-color-text-highlight);
817
+ color: currentColor;
818
+ }
819
+
820
+ @supports (color: color(display-p3 1 1 1)) {
821
+ @media (color-gamut: p3) {
822
+ .dr-container:not(.dr-theme__force-sRGB) .dr-rich-text mark {
823
+ background-color: var(--dr-color-text-highlight-p3);
824
+ }
825
+ }
826
+ }
827
+
828
+ .dr-text-wrapper[data-isediting='true'] .dr-rich-text {
829
+ display: block;
830
+ }
831
+
832
+ .dr-text__outline {
833
+ text-shadow: var(--dr-text-outline);
834
+ }
835
+
836
+ .dr-text__no-outline {
837
+ text-shadow: none;
838
+ }
839
+
840
+ /* --------------------- Loading -------------------- */
841
+
842
+ .dr-loading {
843
+ background-color: var(--dr-color-background);
844
+ color: var(--dr-color-text-1);
845
+ height: 100%;
846
+ width: 100%;
847
+ display: flex;
848
+ flex-direction: column;
849
+ justify-content: center;
850
+ align-items: center;
851
+ gap: var(--dr-space-2);
852
+ font-size: 14px;
853
+ font-weight: 500;
854
+ opacity: 0;
855
+ animation: tl-fade-in 0.2s ease-in-out forwards;
856
+ animation-delay: 0.2s;
857
+ position: absolute;
858
+ inset: 0px;
859
+ z-index: var(--dr-layer-canvas-blocker);
860
+ }
861
+
862
+ @keyframes tl-fade-in {
863
+ 0% {
864
+ opacity: 0;
865
+ }
866
+ 100% {
867
+ opacity: 1;
868
+ }
869
+ }
870
+
871
+ .dr-spinner {
872
+ animation: tl-spin 1s linear infinite;
873
+ }
874
+
875
+ @keyframes tl-spin {
876
+ 0% {
877
+ transform: rotate(0deg);
878
+ }
879
+ 100% {
880
+ transform: rotate(360deg);
881
+ }
882
+ }
883
+
884
+ /* ---------------- Hyperlink Button ---------------- */
885
+
886
+ .dr-hyperlink-button {
887
+ background: none;
888
+ margin: 0px;
889
+ position: absolute;
890
+ top: 0px;
891
+ right: 0px;
892
+ height: 44px;
893
+ width: 44px;
894
+ display: flex;
895
+ align-items: center;
896
+ justify-content: center;
897
+ font-size: 12px;
898
+ font-weight: 400;
899
+ color: var(--dr-color-text-1);
900
+ padding: 13px;
901
+ cursor: var(--dr-cursor-pointer);
902
+ border: none;
903
+ outline: none;
904
+ pointer-events: all;
905
+ z-index: 1;
906
+ }
907
+
908
+ .dr-hyperlink-button::after {
909
+ content: '';
910
+ z-index: -1;
911
+ position: absolute;
912
+ right: 6px;
913
+ bottom: 6px;
914
+ display: block;
915
+ width: calc(100% - 12px);
916
+ height: calc(100% - 12px);
917
+ border-radius: var(--dr-radius-1);
918
+ background-color: var(--dr-color-background);
919
+ pointer-events: none;
920
+ }
921
+
922
+ .dr-hyperlink-button:focus-visible {
923
+ color: var(--dr-color-selected);
924
+ }
925
+
926
+ .dr-hyperlink__icon {
927
+ width: 15px;
928
+ height: 15px;
929
+ background-color: currentColor;
930
+ pointer-events: none;
931
+ }
932
+
933
+ .dr-hyperlink-button__hidden {
934
+ display: none;
935
+ }
936
+
937
+ /* ----------------- Shape indicator ---------------- */
938
+
939
+ .dr-shape-indicator {
940
+ transform-origin: top left;
941
+ fill: none;
942
+ stroke-width: calc(1.5px * var(--dr-scale));
943
+ contain: size layout;
944
+ }
945
+
946
+ .dr-canvas-overlays {
947
+ position: absolute;
948
+ inset: 0;
949
+ pointer-events: none;
950
+ z-index: var(--dr-layer-canvas-overlays);
951
+ }
952
+
953
+ /* ---------------------- Shape --------------------- */
954
+
955
+ .dr-shape {
956
+ position: absolute;
957
+ pointer-events: none;
958
+ overflow: visible;
959
+ transform-origin: top left;
960
+ contain: size layout;
961
+ }
962
+
963
+ /* ---------------- Shape Containers ---------------- */
964
+
965
+ .dr-svg-container {
966
+ position: absolute;
967
+ inset: 0px;
968
+ height: 100%;
969
+ width: 100%;
970
+ pointer-events: none;
971
+ stroke-linecap: round;
972
+ stroke-linejoin: round;
973
+ transform-origin: top left;
974
+ overflow: visible;
975
+ }
976
+
977
+ .dr-html-container {
978
+ position: absolute;
979
+ inset: 0px;
980
+ height: 100%;
981
+ width: 100%;
982
+ pointer-events: none;
983
+ stroke-linecap: round;
984
+ stroke-linejoin: round;
985
+ /* content-visibility: auto; */
986
+ transform-origin: top left;
987
+ color: var(--dr-color-text-1);
988
+ }
989
+
990
+ /* -------------------- Group shape ------------------ */
991
+
992
+ .dr-group {
993
+ stroke: var(--dr-color-text);
994
+ stroke-width: calc(1px * var(--dr-scale));
995
+ opacity: 0.5;
996
+ }
997
+
998
+ /* --------------------- Arrow shape -------------------- */
999
+
1000
+ .dr-shape[data-shape-type='arrow'] .dr-text-label {
1001
+ position: absolute;
1002
+ top: -1px;
1003
+ left: -1px;
1004
+ width: 2px;
1005
+ height: 2px;
1006
+ padding: 0px;
1007
+ display: flex;
1008
+ justify-content: center;
1009
+ align-items: center;
1010
+ text-align: center;
1011
+ color: var(--dr-color-text);
1012
+ }
1013
+
1014
+ .dr-shape[data-shape-type='arrow'] .dr-text-label__inner {
1015
+ border-radius: var(--dr-radius-1);
1016
+ box-sizing: content-box;
1017
+ height: max-content;
1018
+ width: max-content;
1019
+ }
1020
+
1021
+ .dr-shape[data-shape-type='arrow'] .dr-text {
1022
+ height: max-content;
1023
+ }
1024
+
1025
+ /* ------------------- Bookmark shape ------------------- */
1026
+
1027
+ .dr-bookmark__container {
1028
+ width: 100%;
1029
+ height: 100%;
1030
+ position: relative;
1031
+ border: 1px solid var(--dr-color-panel-contrast);
1032
+ background-color: var(--dr-color-panel);
1033
+ border-radius: var(--dr-radius-2);
1034
+ display: flex;
1035
+ flex-direction: column;
1036
+ overflow: hidden;
1037
+ }
1038
+
1039
+ .dr-bookmark__container--safariExport {
1040
+ border: 1px solid var(--dr-color-divider);
1041
+ }
1042
+
1043
+ .dr-bookmark__image_container {
1044
+ flex: 1 1 100%;
1045
+ overflow: hidden;
1046
+ border-top-left-radius: var(--dr-radius-1);
1047
+ border-top-right-radius: var(--dr-radius-1);
1048
+ width: 100%;
1049
+ height: 100%;
1050
+ display: flex;
1051
+ justify-content: flex-end;
1052
+ align-items: flex-start;
1053
+ box-shadow: inset 0px 0px 0px 1px var(--dr-color-divider);
1054
+ }
1055
+
1056
+ .dr-bookmark__image_container > .dr-hyperlink-button::after {
1057
+ background-color: var(--dr-color-panel);
1058
+ }
1059
+
1060
+ .dr-bookmark__placeholder {
1061
+ width: 100%;
1062
+ height: 100%;
1063
+ background-color: var(--dr-color-muted-2);
1064
+ border-bottom: 1px solid var(--dr-color-muted-2);
1065
+ }
1066
+
1067
+ .dr-bookmark__image {
1068
+ width: 100%;
1069
+ height: 100%;
1070
+ object-fit: cover;
1071
+ object-position: center;
1072
+ border-bottom: 1px solid var(--dr-color-muted-2);
1073
+ }
1074
+
1075
+ .dr-bookmark__copy_container {
1076
+ background-color: var(--dr-color-muted-0);
1077
+ padding: var(--dr-space-4);
1078
+ pointer-events: all;
1079
+ display: flex;
1080
+ flex-direction: column;
1081
+ justify-content: space-between;
1082
+ flex: 1;
1083
+ }
1084
+
1085
+ .dr-bookmark__copy_container:has(.dr-bookmark__link:only-child) {
1086
+ justify-content: center;
1087
+ }
1088
+
1089
+ .dr-bookmark__heading,
1090
+ .dr-bookmark__description,
1091
+ .dr-bookmark__link {
1092
+ margin: 0px;
1093
+ width: 100%;
1094
+ font-family: inherit;
1095
+ }
1096
+
1097
+ .dr-bookmark__heading {
1098
+ font-size: 16px;
1099
+ line-height: 1.6;
1100
+ font-weight: bold;
1101
+ padding-bottom: var(--dr-space-2);
1102
+ overflow: hidden;
1103
+ max-height: calc((16px * 1.6) * 2);
1104
+ -webkit-box-orient: vertical;
1105
+ -webkit-line-clamp: 2;
1106
+ line-clamp: 2;
1107
+ text-overflow: ellipsis;
1108
+ display: -webkit-box;
1109
+ }
1110
+
1111
+ .dr-bookmark__description {
1112
+ font-size: 12px;
1113
+ line-height: 1.5;
1114
+ overflow: hidden;
1115
+ max-height: calc((12px * 1.5) * 3);
1116
+ -webkit-box-orient: vertical;
1117
+ -webkit-line-clamp: 3;
1118
+ line-clamp: 3;
1119
+ text-overflow: ellipsis;
1120
+ display: -webkit-box;
1121
+ color: var(--dr-color-text-1);
1122
+ margin: var(--dr-space-2) 0px;
1123
+ }
1124
+
1125
+ .dr-bookmark__heading + .dr-bookmark__link,
1126
+ .dr-bookmark__description + .dr-bookmark__link {
1127
+ margin-top: var(--dr-space-3);
1128
+ }
1129
+ .dr-bookmark__link {
1130
+ font-size: 12px;
1131
+ pointer-events: all;
1132
+ display: flex;
1133
+ color: var(--dr-color-text-1);
1134
+ align-items: center;
1135
+ cursor: var(--dr-cursor-pointer);
1136
+ width: fit-content;
1137
+ max-width: 100%;
1138
+ text-decoration: none;
1139
+ }
1140
+
1141
+ .dr-bookmark__link > span {
1142
+ flex-shrink: 0px;
1143
+ white-space: nowrap;
1144
+ overflow: hidden;
1145
+ text-overflow: ellipsis;
1146
+ }
1147
+
1148
+ .dr-bookmark__link > .dr-hyperlink__icon {
1149
+ margin-right: 8px;
1150
+ flex-shrink: 0;
1151
+ }
1152
+
1153
+ .dr-bookmark__link > .dr-bookmark__favicon {
1154
+ margin-right: 8px;
1155
+ width: 16px;
1156
+ height: 16px;
1157
+ flex-shrink: 0;
1158
+ }
1159
+
1160
+ /* -------------- Image and video shape ------------- */
1161
+
1162
+ .dr-image,
1163
+ .dr-video {
1164
+ object-fit: cover;
1165
+ background-size: cover;
1166
+ width: 100%;
1167
+ height: 100%;
1168
+ }
1169
+
1170
+ .dr-video-container,
1171
+ .dr-image-container,
1172
+ .dr-embed-container {
1173
+ width: 100%;
1174
+ height: 100%;
1175
+ pointer-events: all;
1176
+ /* background-color: var(--dr-color-background); */
1177
+
1178
+ display: flex;
1179
+ justify-content: center;
1180
+ align-items: center;
1181
+ }
1182
+
1183
+ .dr-image-container {
1184
+ position: relative;
1185
+ }
1186
+
1187
+ .dr-image {
1188
+ position: absolute;
1189
+ inset: 0;
1190
+ }
1191
+
1192
+ .dr-video.dr-video-is-fullscreen {
1193
+ object-fit: contain;
1194
+ background-size: contain;
1195
+ }
1196
+
1197
+ /* -------------------- Note shape ------------------- */
1198
+
1199
+ .dr-note__container {
1200
+ position: relative;
1201
+ width: 100%;
1202
+ height: 100%;
1203
+ pointer-events: all;
1204
+ opacity: 1;
1205
+ z-index: var(--dr-layer-text-container);
1206
+ border-radius: 1px;
1207
+ }
1208
+
1209
+ .dr-note__container > .dr-text-label {
1210
+ color: currentColor;
1211
+ }
1212
+
1213
+ .dr-note__attribution {
1214
+ position: absolute;
1215
+ bottom: calc(4px * var(--note-attribution-scale, 1));
1216
+ right: calc(8px * var(--note-attribution-scale, 1));
1217
+ font-family: var(--dr-font-sans);
1218
+ pointer-events: auto;
1219
+ white-space: nowrap;
1220
+ overflow: hidden;
1221
+ text-overflow: ellipsis;
1222
+ max-width: 60%;
1223
+ z-index: 1;
1224
+ }
1225
+
1226
+ /* ------------------- Frame shape ------------------- */
1227
+
1228
+ .dr-frame__body {
1229
+ stroke-width: calc(1px * var(--dr-scale));
1230
+ }
1231
+
1232
+ .dr-frame__creating {
1233
+ stroke: var(--dr-color-selected);
1234
+ fill: none;
1235
+ }
1236
+
1237
+ .dr-frame-heading {
1238
+ --dr-frame-padding-x: 6px;
1239
+ --dr-frame-height: 24px;
1240
+ --dr-frame-minimum-width: 32px;
1241
+ --dr-frame-offset-width: 16px;
1242
+ display: flex;
1243
+ align-items: center;
1244
+ position: absolute;
1245
+ transform-origin: 0% 100%;
1246
+ overflow: hidden;
1247
+ max-width: 100%;
1248
+ min-width: var(--dr-frame-minimum-width);
1249
+ height: auto;
1250
+ font-size: 12px;
1251
+ padding-bottom: 4px;
1252
+ pointer-events: all;
1253
+ }
1254
+
1255
+ .dr-frame-heading-hit-area {
1256
+ pointer-events: all;
1257
+ /* scale from bottom left corner so we can pin it to the top left corner of the frame */
1258
+ transform-origin: 0% 100%;
1259
+ display: flex;
1260
+ height: var(--dr-frame-height);
1261
+ width: 100%;
1262
+ align-items: center;
1263
+ border-radius: var(--dr-radius-1);
1264
+ }
1265
+
1266
+ .dr-frame-label {
1267
+ pointer-events: all;
1268
+ overflow: hidden;
1269
+ text-overflow: ellipsis;
1270
+ padding: 0px var(--dr-frame-padding-x);
1271
+ border-radius: var(--dr-radius-1);
1272
+ position: relative;
1273
+ font-size: inherit;
1274
+ white-space: pre;
1275
+ }
1276
+
1277
+ .dr-frame-label__editing {
1278
+ color: transparent;
1279
+ white-space: pre;
1280
+ width: auto;
1281
+ min-width: var(--dr-frame-minimum-width);
1282
+ height: 100%;
1283
+ overflow: visible;
1284
+ background-color: var(--dr-color-panel);
1285
+ border-color: var(--dr-color-selected);
1286
+ box-shadow: inset 0px 0px 0px 1.5px var(--dr-color-selected);
1287
+ }
1288
+
1289
+ .dr-frame-name-input {
1290
+ position: absolute;
1291
+ border: none;
1292
+ background: none;
1293
+ outline: none;
1294
+ padding: 0px var(--dr-frame-padding-x);
1295
+ inset: 0px;
1296
+ height: 100%;
1297
+ width: 100%;
1298
+ font-size: inherit;
1299
+ font-family: inherit;
1300
+ font-weight: inherit;
1301
+ width: 100%;
1302
+ color: var(--dr-color-text-1);
1303
+ border-radius: var(--dr-radius-1);
1304
+ user-select: all;
1305
+ -webkit-user-select: text;
1306
+ white-space: pre;
1307
+ cursor: var(--dr-cursor-text);
1308
+ }
1309
+
1310
+ /* ------------------- Embed Shape ------------------ */
1311
+
1312
+ .dr-embed {
1313
+ border: none;
1314
+ border-radius: var(--dr-radius-2);
1315
+ }
1316
+
1317
+ /* -------------- Shape error boundary -------------- */
1318
+
1319
+ .dr-shape-error-boundary {
1320
+ width: 100%;
1321
+ height: 100%;
1322
+ background-color: var(--dr-color-muted-1);
1323
+ border-width: calc(1px * var(--dr-scale));
1324
+ border-color: var(--dr-color-muted-1);
1325
+ border-style: solid;
1326
+ border-radius: calc(var(--dr-radius-1) * var(--dr-scale));
1327
+ display: flex;
1328
+ flex-direction: column;
1329
+ align-items: center;
1330
+ justify-content: center;
1331
+ text-align: left;
1332
+ position: relative;
1333
+ pointer-events: all;
1334
+ overflow: hidden;
1335
+ padding: var(--dr-space-2);
1336
+ }
1337
+
1338
+ .dr-shape-error-boundary::before {
1339
+ transform: scale(var(--dr-scale));
1340
+ content: 'Error';
1341
+ font-size: 12px;
1342
+ font-family: inherit;
1343
+ color: var(--dr-color-text-0);
1344
+ }
1345
+
1346
+ /* ----------------- Error boundary ----------------- */
1347
+
1348
+ .dr-error-boundary {
1349
+ width: 100%;
1350
+ height: 100%;
1351
+ display: flex;
1352
+ align-items: center;
1353
+ justify-content: center;
1354
+ padding: var(--dr-space-4);
1355
+ background-color: var(--dr-color-background);
1356
+ color: var(--dr-color-text-1);
1357
+ position: absolute;
1358
+ }
1359
+
1360
+ .dr-error-boundary__overlay {
1361
+ position: absolute;
1362
+ inset: 0px;
1363
+ height: 100%;
1364
+ width: 100%;
1365
+ z-index: var(--dr-layer-error-overlay);
1366
+ background-color: var(--dr-color-overlay);
1367
+ }
1368
+
1369
+ .dr-error-boundary__content * {
1370
+ user-select: all;
1371
+ -webkit-user-select: text;
1372
+ pointer-events: all;
1373
+ }
1374
+
1375
+ .dr-error-boundary__canvas {
1376
+ pointer-events: none;
1377
+ position: absolute;
1378
+ inset: 0px;
1379
+ height: 100%;
1380
+ width: 100%;
1381
+ z-index: var(--dr-layer-error-canvas);
1382
+ }
1383
+
1384
+ /* some browsers seem to have some weird interactions between stacking contexts
1385
+ and pointer-events. this ::after pseudo element covers the canvas and prevents
1386
+ it from receiving any pointer events or affecting the cursor. */
1387
+ .dr-error-boundary__canvas::after {
1388
+ content: ' ';
1389
+ display: block;
1390
+ position: absolute;
1391
+ inset: 0px;
1392
+ height: 100%;
1393
+ width: 100%;
1394
+ z-index: var(--dr-layer-error-canvas-after);
1395
+ pointer-events: all;
1396
+ }
1397
+
1398
+ .dr-error-boundary__content {
1399
+ width: fit-content;
1400
+ height: fit-content;
1401
+ max-width: 100%;
1402
+ width: 400px;
1403
+ max-height: 100%;
1404
+ background-color: var(--dr-color-panel);
1405
+ padding: 16px;
1406
+ border-radius: 16px;
1407
+ box-shadow: var(--dr-shadow-2);
1408
+ font-size: 14px;
1409
+ font-weight: 400;
1410
+ display: flex;
1411
+ flex-direction: column;
1412
+ overflow: auto;
1413
+ z-index: var(--dr-layer-error-content);
1414
+ gap: 12px;
1415
+ }
1416
+
1417
+ .dr-error-boundary__content__expanded {
1418
+ width: 600px;
1419
+ }
1420
+
1421
+ .dr-error-boundary__content h2 {
1422
+ font-size: 16px;
1423
+ margin: 0px;
1424
+ font-weight: 500;
1425
+ }
1426
+
1427
+ .dr-error-boundary__content h4 {
1428
+ border: 1px solid var(--dr-color-low-border);
1429
+ margin: -6px 0 0 0;
1430
+ padding: var(--dr-space-5);
1431
+ border-radius: var(--dr-radius-2);
1432
+ font-weight: normal;
1433
+ }
1434
+
1435
+ .dr-error-boundary__content p {
1436
+ line-height: 1.5;
1437
+ margin: 0px;
1438
+ }
1439
+
1440
+ .dr-error-boundary__content pre {
1441
+ background-color: var(--dr-color-muted-2);
1442
+ margin-top: 0;
1443
+ padding: var(--dr-space-5);
1444
+ border-radius: var(--dr-radius-2);
1445
+ overflow: auto;
1446
+ font-size: 12px;
1447
+ max-height: 320px;
1448
+ }
1449
+
1450
+ .dr-error-boundary__content button {
1451
+ background: none;
1452
+ border: none;
1453
+ font-family: inherit;
1454
+ font-size: 14px;
1455
+ font-weight: 500;
1456
+ padding: var(--dr-space-4);
1457
+ border-radius: var(--dr-radius-3);
1458
+ cursor: var(--dr-cursor-pointer);
1459
+ color: inherit;
1460
+ background-color: transparent;
1461
+ }
1462
+
1463
+ .dr-error-boundary__content a {
1464
+ color: var(--dr-color-selected);
1465
+ font-weight: 500;
1466
+ text-decoration: none;
1467
+ }
1468
+
1469
+ .dr-error-boundary__content__error {
1470
+ position: relative;
1471
+ margin: -6px 0 0 0;
1472
+ }
1473
+
1474
+ .dr-error-boundary__content__error button {
1475
+ position: absolute;
1476
+ top: var(--dr-space-2);
1477
+ right: var(--dr-space-2);
1478
+ font-size: 12px;
1479
+ padding: var(--dr-space-2) var(--dr-space-3);
1480
+ background-color: var(--dr-color-panel);
1481
+ border-radius: var(--dr-radius-1);
1482
+ }
1483
+
1484
+ .dr-error-boundary__content__actions {
1485
+ display: flex;
1486
+ justify-content: space-between;
1487
+ gap: var(--dr-space-4);
1488
+ margin: 0px;
1489
+ margin-left: -4px;
1490
+ }
1491
+ .dr-error-boundary__content__actions__group {
1492
+ display: flex;
1493
+ gap: var(--dr-space-4);
1494
+ }
1495
+ .dr-error-boundary__content .dr-error-boundary__reset {
1496
+ color: var(--dr-color-danger);
1497
+ }
1498
+ .dr-error-boundary__content .dr-error-boundary__refresh {
1499
+ background-color: var(--dr-color-primary);
1500
+ color: var(--dr-color-selected-contrast);
1501
+ }
1502
+ .dr-container__focused:not(.dr-container__no-focus-ring)
1503
+ .tlui-button.dr-error-boundary__refresh:focus-visible {
1504
+ border-radius: 8px;
1505
+ outline-offset: 0;
1506
+ }
1507
+
1508
+ /* ---------------- Hit test blocker ---------------- */
1509
+
1510
+ .dr-hit-test-blocker {
1511
+ position: absolute;
1512
+ z-index: var(--dr-layer-canvas-blocker);
1513
+ inset: 0px;
1514
+ width: 100%;
1515
+ height: 100%;
1516
+ pointer-events: all;
1517
+ }
1518
+
1519
+ .dr-hit-test-blocker__hidden {
1520
+ display: none;
1521
+ }
1522
+
1523
+ /* --------------------- Hovers --------------------- */
1524
+
1525
+ @media (hover: hover) {
1526
+ .dr-handle__create:hover {
1527
+ opacity: 1;
1528
+ }
1529
+
1530
+ .dr-handle__bg:hover {
1531
+ cursor: var(--dr-cursor-grab);
1532
+ fill: var(--dr-color-selection-fill);
1533
+ }
1534
+
1535
+ .dr-bookmark__link:hover {
1536
+ color: var(--dr-color-selected);
1537
+ }
1538
+
1539
+ .dr-hyperlink-button:hover {
1540
+ color: var(--dr-color-selected);
1541
+ }
1542
+
1543
+ .dr-error-boundary__content button:hover {
1544
+ background-color: var(--dr-color-low);
1545
+ }
1546
+ .dr-error-boundary__content a:hover {
1547
+ color: var(--dr-color-text-1);
1548
+ }
1549
+ .dr-error-boundary__content .dr-error-boundary__refresh:hover {
1550
+ background-color: var(--dr-color-primary);
1551
+ opacity: 0.9;
1552
+ }
1553
+
1554
+ /* These three rules help preserve clicking into specific points in text areas *while*
1555
+ * already in edit mode when jumping from shape to shape. */
1556
+ .dr-canvas[data-iseditinganything='true'] .dr-text-wrapper:hover .dr-text-input {
1557
+ z-index: var(--dr-layer-text-editor);
1558
+ pointer-events: all;
1559
+ }
1560
+ }
1561
+
1562
+ /* @ibodr/ui */
1563
+
1564
+ .dr-container {
1565
+ /*
1566
+ * UI z-index layers
1567
+ *
1568
+ * menu-click-capture and panels (.tlui-layout) participate in the
1569
+ * container-level stacking context alongside the canvas layers:
1570
+ * watermark (200) < canvas-in-front (250) < menu-click-capture (250) < panels (300)
1571
+ *
1572
+ * menus, toasts, header-footer, etc. are children of .tlui-layout
1573
+ * (which creates its own stacking context at z-index 300), so their
1574
+ * z-indices are relative to the layout, not the container.
1575
+ *
1576
+ * cursor and following-indicator are rendered inside canvas-in-front
1577
+ * (stacking context at z-index 250), so their z-indices are relative
1578
+ * to that context.
1579
+ */
1580
+ --dr-layer-above: 1;
1581
+ --dr-layer-focused-input: 10;
1582
+ --dr-layer-menu-click-capture: 250;
1583
+ --dr-layer-panels: 300;
1584
+ --dr-layer-menus: 400;
1585
+ --dr-layer-toasts: 650;
1586
+ --dr-layer-cursor: 700;
1587
+ --dr-layer-header-footer: 999;
1588
+ --dr-layer-following-indicator: 1000;
1589
+ }
1590
+
1591
+ /* Button */
1592
+
1593
+ .tlui-button {
1594
+ position: relative;
1595
+ height: 40px;
1596
+ min-width: 40px;
1597
+ padding: 0px 12px;
1598
+ display: flex;
1599
+ align-items: center;
1600
+ justify-content: center;
1601
+ background-color: transparent;
1602
+ border: transparent;
1603
+ color: currentColor;
1604
+ cursor: pointer;
1605
+ pointer-events: all;
1606
+ font-weight: inherit;
1607
+ font-family: inherit;
1608
+ line-height: inherit;
1609
+ text-rendering: optimizeLegibility;
1610
+ font-size: 12px;
1611
+ gap: 0px;
1612
+ color: var(--dr-color-text-1);
1613
+ z-index: 0;
1614
+ }
1615
+
1616
+ .tlui-button:disabled,
1617
+ .tlui-button[data-disabled] {
1618
+ color: var(--dr-color-text-3);
1619
+ text-shadow: none;
1620
+ cursor: default;
1621
+ }
1622
+
1623
+ .tlui-button:disabled .tlui-kbd,
1624
+ .tlui-button[data-disabled] .tlui-kbd {
1625
+ color: var(--dr-color-text-3);
1626
+ }
1627
+
1628
+ .tlui-button > * {
1629
+ position: relative;
1630
+ z-index: var(--dr-layer-above);
1631
+ }
1632
+
1633
+ .tlui-button__label {
1634
+ font-size: 12px;
1635
+ flex-grow: 2;
1636
+ text-align: start;
1637
+ min-width: 0;
1638
+ overflow: hidden;
1639
+ text-overflow: ellipsis;
1640
+ white-space: nowrap;
1641
+ }
1642
+
1643
+ /*
1644
+ * We only want to show the focus ring if:
1645
+ * - the container is focused
1646
+ * - we're not using the mouse to interact (which is the .dr-container__no-focus-ring)
1647
+ */
1648
+ .dr-container__focused:not(.dr-container__no-focus-ring) .tlui-button:focus-visible {
1649
+ border-radius: 10px;
1650
+ outline: 2px solid var(--dr-color-focus);
1651
+ outline-offset: -5px;
1652
+ }
1653
+ .dr-container__focused:not(.dr-container__no-focus-ring) .tlui-button__tool:focus-visible {
1654
+ border-radius: 12px;
1655
+ }
1656
+ .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
1657
+ border-radius: 10px;
1658
+ outline: 2px solid var(--dr-color-focus);
1659
+ outline-offset: -5px;
1660
+ }
1661
+
1662
+ .tlui-button::after {
1663
+ display: block;
1664
+ content: '';
1665
+ position: absolute;
1666
+ inset: 4px;
1667
+ border-radius: var(--dr-radius-2);
1668
+ background: var(--dr-color-muted-2);
1669
+ opacity: 0;
1670
+ }
1671
+
1672
+ .tlui-button__menu[data-highlighted]::after {
1673
+ opacity: 1;
1674
+ }
1675
+
1676
+ .tlui-button[data-isactive='true']::after,
1677
+ .tlui-button[data-isactive='true']:not(:disabled, [data-disabled], :focus-visible):active:after {
1678
+ background: var(--dr-color-hint);
1679
+ opacity: 1;
1680
+ }
1681
+
1682
+ .tlui-button[aria-expanded='true'][data-direction='left'] {
1683
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
1684
+ opacity: 1;
1685
+ }
1686
+
1687
+ @media (hover: hover) {
1688
+ .tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
1689
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
1690
+ opacity: 1;
1691
+ }
1692
+
1693
+ .tlui-button:not(:disabled, [data-disabled]):hover {
1694
+ z-index: 1;
1695
+ }
1696
+
1697
+ .tlui-button:not(:disabled, [data-disabled]):hover::after {
1698
+ opacity: 1;
1699
+ }
1700
+ }
1701
+
1702
+ .tlui-button__icon + .tlui-button__label {
1703
+ margin-inline-start: var(--dr-space-2);
1704
+ }
1705
+
1706
+ /* Low button */
1707
+
1708
+ .tlui-button__low {
1709
+ border-radius: var(--dr-radius-3);
1710
+ background-color: var(--dr-color-low);
1711
+ }
1712
+
1713
+ .tlui-button__low::after {
1714
+ background-color: var(--dr-color-muted-2);
1715
+ opacity: 0;
1716
+ }
1717
+
1718
+ @media (hover: hover) {
1719
+ .tlui-button__low:hover::after {
1720
+ opacity: 1;
1721
+ }
1722
+ }
1723
+
1724
+ /* Primary / danger buttons */
1725
+
1726
+ .tlui-button__primary {
1727
+ color: var(--dr-color-primary);
1728
+ }
1729
+
1730
+ .tlui-button__danger {
1731
+ color: var(--dr-color-danger);
1732
+ text-shadow: none;
1733
+ }
1734
+
1735
+ @media (hover: hover) {
1736
+ .tlui-button__primary:not(:disabled, [data-disabled], :focus-visible):hover {
1737
+ color: var(--dr-color-primary);
1738
+ }
1739
+
1740
+ .tlui-button__danger:not(:disabled, [data-disabled], :focus-visible):hover {
1741
+ color: var(--dr-color-danger);
1742
+ text-shadow: none;
1743
+ }
1744
+ }
1745
+
1746
+ /* Menu button */
1747
+
1748
+ .tlui-button__menu {
1749
+ height: 40px;
1750
+ min-height: 40px;
1751
+ width: 100%;
1752
+ gap: 8px;
1753
+ margin-top: -4px;
1754
+ }
1755
+
1756
+ .tlui-button__menu::after {
1757
+ inset: 4px;
1758
+ border-radius: var(--dr-radius-2);
1759
+ }
1760
+
1761
+ .tlui-button__menu > .tlui-icon + .tlui-button__label {
1762
+ margin-inline-start: 0px;
1763
+ }
1764
+
1765
+ .tlui-button__menu:nth-child(1) {
1766
+ margin-top: 0px;
1767
+ }
1768
+
1769
+ .tlui-button__menu:nth-last-child(1) {
1770
+ margin-bottom: 0px;
1771
+ }
1772
+
1773
+ /* Menu checkbox button */
1774
+
1775
+ .tlui-button__checkbox {
1776
+ padding-left: 8px;
1777
+ }
1778
+
1779
+ .tlui-button__checkbox__indicator {
1780
+ width: 15px;
1781
+ height: 15px;
1782
+ }
1783
+
1784
+ /* Tool lock button */
1785
+
1786
+ .tlui-main-toolbar__lock-button {
1787
+ position: absolute;
1788
+ pointer-events: all;
1789
+ height: 40px;
1790
+ width: 40px;
1791
+ border-radius: var(--dr-radius-2);
1792
+ }
1793
+
1794
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
1795
+ top: 4px;
1796
+ right: 0px;
1797
+ min-width: 0px;
1798
+ }
1799
+
1800
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
1801
+ bottom: 0px;
1802
+ min-height: 0px;
1803
+ }
1804
+
1805
+ .tlui-main-toolbar__lock-button::after {
1806
+ top: 4px;
1807
+ left: 8px;
1808
+ inset: 4px;
1809
+ }
1810
+
1811
+ /* Tool button */
1812
+
1813
+ .tlui-button__tool {
1814
+ position: relative;
1815
+ height: 48px;
1816
+ width: 48px;
1817
+ }
1818
+
1819
+ .tlui-button__tool::after {
1820
+ inset: 4px;
1821
+ border-radius: 8px;
1822
+ }
1823
+
1824
+ .tlui-button__tool[aria-pressed='true'] {
1825
+ color: var(--dr-color-selected-contrast);
1826
+ }
1827
+
1828
+ .tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled], :focus-visible):active {
1829
+ color: var(--dr-color-selected-contrast);
1830
+ }
1831
+
1832
+ .tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled])::after {
1833
+ background: var(--dr-color-selected);
1834
+ opacity: 1;
1835
+ }
1836
+
1837
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
1838
+ height: 48px;
1839
+ width: 43px;
1840
+ }
1841
+
1842
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
1843
+ height: 16px;
1844
+ width: 16px;
1845
+ }
1846
+
1847
+ /* Row layout */
1848
+
1849
+ .tlui-row {
1850
+ display: flex;
1851
+ flex-direction: row;
1852
+ padding: 0 2px;
1853
+ }
1854
+ .tlui-row > * {
1855
+ margin-left: -2px;
1856
+ margin-right: -2px;
1857
+ }
1858
+
1859
+ /* Column layout */
1860
+
1861
+ .tlui-column {
1862
+ display: flex;
1863
+ flex-direction: column;
1864
+ padding: 2px 0;
1865
+ }
1866
+ .tlui-column > * {
1867
+ margin-top: -2px;
1868
+ margin-bottom: -2px;
1869
+ }
1870
+
1871
+ /* Grid layout */
1872
+
1873
+ .tlui-grid {
1874
+ display: grid;
1875
+ grid-template-columns: repeat(4, 1fr);
1876
+ grid-auto-flow: row;
1877
+ overflow: hidden;
1878
+ padding: 2px;
1879
+ }
1880
+ .tlui-grid > * {
1881
+ margin: -2px;
1882
+ }
1883
+
1884
+ /* Zoom button */
1885
+
1886
+ .tlui-zoom-menu__button {
1887
+ width: 60px;
1888
+ min-width: 60px;
1889
+ text-align: center;
1890
+ }
1891
+
1892
+ .tlui-zoom-menu__button[data-state='open']::after {
1893
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
1894
+ opacity: 1;
1895
+ }
1896
+
1897
+ /* --------------------- Layout --------------------- */
1898
+
1899
+ .tlui-layout {
1900
+ position: relative;
1901
+ display: grid;
1902
+ grid-template-columns: 1fr;
1903
+ grid-template-rows: minmax(0px, 1fr) auto;
1904
+ grid-auto-rows: auto;
1905
+ height: 100%;
1906
+ max-height: 100%;
1907
+ overflow: clip;
1908
+ pointer-events: none;
1909
+ user-select: none;
1910
+ contain: strict;
1911
+ z-index: var(--dr-layer-panels);
1912
+ transform: translate3d(0, 0, 0);
1913
+ --dr-sab: env(safe-area-inset-bottom);
1914
+ font-weight: 500;
1915
+ line-height: 1.6;
1916
+ -webkit-font-smoothing: antialiased;
1917
+ -moz-osx-font-smoothing: grayscale;
1918
+ font-smooth: antialiased;
1919
+ text-rendering: optimizeLegibility;
1920
+ }
1921
+
1922
+ .tlui-layout__top {
1923
+ grid-column: 1;
1924
+ grid-row: 1;
1925
+ display: flex;
1926
+ min-width: 0px;
1927
+ justify-content: space-between;
1928
+ }
1929
+
1930
+ .tlui-layout__top__left {
1931
+ display: flex;
1932
+ flex-direction: column;
1933
+ align-items: flex-start;
1934
+ justify-content: flex-start;
1935
+ width: 100%;
1936
+ height: 100%;
1937
+ flex: 0 1 0;
1938
+ }
1939
+
1940
+ .tlui-layout__top__right {
1941
+ display: flex;
1942
+ flex-direction: column;
1943
+ align-items: flex-end;
1944
+ justify-content: flex-start;
1945
+ height: 100%;
1946
+ flex: 0 0 auto;
1947
+ min-width: 0px;
1948
+ }
1949
+
1950
+ .tlui-scrollable,
1951
+ .tlui-scrollable * {
1952
+ pointer-events: all;
1953
+ touch-action: auto;
1954
+ overscroll-behavior: none;
1955
+ }
1956
+
1957
+ /* ----------------- Helper Buttons ---------------- */
1958
+
1959
+ .tlui-helper-buttons {
1960
+ position: relative;
1961
+ display: flex;
1962
+ flex-direction: column;
1963
+ justify-content: flex-start;
1964
+ align-items: flex-start;
1965
+ width: min-content;
1966
+ gap: var(--dr-space-3);
1967
+ margin: var(--dr-space-2) var(--dr-space-3);
1968
+ white-space: nowrap;
1969
+ pointer-events: none;
1970
+ z-index: var(--dr-layer-panels);
1971
+ }
1972
+
1973
+ /* ---------------------- Icon ---------------------- */
1974
+
1975
+ .tlui-icon {
1976
+ flex-shrink: 0;
1977
+ width: 18px;
1978
+ height: 18px;
1979
+ background-color: currentColor;
1980
+ }
1981
+
1982
+ .tlui-icon__placeholder {
1983
+ flex-shrink: 0;
1984
+ width: 18px;
1985
+ height: 18px;
1986
+ background-color: transparent;
1987
+ }
1988
+
1989
+ .tlui-icon__small {
1990
+ width: 15px;
1991
+ height: 15px;
1992
+ }
1993
+
1994
+ /* --------------------- Slider --------------------- */
1995
+
1996
+ .tlui-slider__container {
1997
+ width: 100%;
1998
+ padding: 0px var(--dr-space-4);
1999
+ }
2000
+
2001
+ .tlui-slider {
2002
+ position: relative;
2003
+ display: flex;
2004
+ align-items: center;
2005
+ user-select: none;
2006
+ touch-action: none;
2007
+ width: 100%;
2008
+ }
2009
+
2010
+ .tlui-slider__track {
2011
+ position: relative;
2012
+ flex-grow: 1;
2013
+ height: 44px;
2014
+ cursor: pointer;
2015
+ }
2016
+
2017
+ .tlui-slider__track::after {
2018
+ display: block;
2019
+ position: absolute;
2020
+ top: calc(50% - 2px);
2021
+ content: '';
2022
+ height: 3px;
2023
+ width: 100%;
2024
+ background-color: var(--dr-color-muted-1);
2025
+ border-radius: 14px;
2026
+ }
2027
+
2028
+ .tlui-slider__range {
2029
+ position: absolute;
2030
+ top: calc(50% - 2px);
2031
+ left: 0px;
2032
+ height: 3px;
2033
+ background-color: var(--dr-color-selected);
2034
+ border-radius: 14px;
2035
+ }
2036
+
2037
+ .tlui-slider__thumb {
2038
+ all: unset;
2039
+ cursor: grab;
2040
+ display: block;
2041
+ width: 18px;
2042
+ height: 18px;
2043
+ position: relative;
2044
+ top: -1px;
2045
+ background-color: var(--dr-color-panel);
2046
+ border-radius: 999px;
2047
+ box-shadow: inset 0px 0px 0px 2px var(--dr-color-text-1);
2048
+ }
2049
+
2050
+ .tlui-slider__thumb:active {
2051
+ cursor: grabbing;
2052
+ box-shadow:
2053
+ inset 0px 0px 0px 2px var(--dr-color-text-1),
2054
+ var(--dr-shadow-1);
2055
+ }
2056
+
2057
+ /* ---------------------- Input --------------------- */
2058
+
2059
+ .tlui-input {
2060
+ background: none;
2061
+ margin: 0px;
2062
+ position: relative;
2063
+ z-index: var(--dr-layer-above);
2064
+ height: 40px;
2065
+ max-height: 40px;
2066
+ display: flex;
2067
+ align-items: center;
2068
+ justify-content: center;
2069
+ font-family: inherit;
2070
+ font-size: 12px;
2071
+ font-weight: inherit;
2072
+ color: var(--dr-color-text-1);
2073
+ padding: var(--dr-space-4);
2074
+ padding-left: 0px;
2075
+ border: none;
2076
+ outline: none;
2077
+ text-overflow: ellipsis;
2078
+ width: 100%;
2079
+ user-select: all;
2080
+ text-rendering: optimizeLegibility;
2081
+ -webkit-user-select: auto !important;
2082
+ }
2083
+
2084
+ .tlui-input::placeholder {
2085
+ color: var(--dr-color-text-3);
2086
+ }
2087
+
2088
+ .tlui-input__wrapper {
2089
+ width: 100%;
2090
+ height: 44px;
2091
+ display: flex;
2092
+ align-items: center;
2093
+ gap: var(--dr-space-4);
2094
+ color: var(--dr-color-text);
2095
+ }
2096
+
2097
+ .tlui-input__wrapper > .tlui-icon {
2098
+ flex-shrink: 0;
2099
+ }
2100
+
2101
+ /* If mobile use 16px as font size */
2102
+ /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
2103
+ /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
2104
+ @supports (-webkit-touch-callout: none) {
2105
+ /* CSS specific to iOS devices */
2106
+ .tlui-input {
2107
+ font-size: 16px;
2108
+ }
2109
+ }
2110
+
2111
+ /* --------------------- Select --------------------- */
2112
+
2113
+ /* Trigger extends .tlui-button with space-between layout */
2114
+ .tlui-select__trigger {
2115
+ justify-content: space-between;
2116
+ gap: var(--dr-space-3);
2117
+ }
2118
+
2119
+ .tlui-select__trigger[data-state='open']::after {
2120
+ opacity: 1;
2121
+ }
2122
+
2123
+ .tlui-select__value {
2124
+ display: flex;
2125
+ align-items: center;
2126
+ gap: var(--dr-space-2);
2127
+ }
2128
+
2129
+ .tlui-select__chevron {
2130
+ flex-shrink: 0;
2131
+ color: var(--dr-color-text-2);
2132
+ }
2133
+
2134
+ /* Content extends .tlui-menu with Radix-aware sizing */
2135
+ .tlui-select__content {
2136
+ min-width: var(--radix-select-trigger-width);
2137
+ max-height: var(--radix-select-content-available-height);
2138
+ }
2139
+
2140
+ .tlui-select__viewport {
2141
+ padding: 4px 0;
2142
+ }
2143
+
2144
+ /* Item extends .tlui-button__checkbox with left-aligned text */
2145
+ .tlui-select__item {
2146
+ justify-content: flex-start;
2147
+ }
2148
+
2149
+ .tlui-select__item-indicator {
2150
+ visibility: hidden;
2151
+ }
2152
+
2153
+ .tlui-select__item[data-state='checked'] .tlui-select__item-indicator {
2154
+ visibility: visible;
2155
+ }
2156
+
2157
+ /* ----------------------- Kbd ---------------------- */
2158
+
2159
+ .tlui-kbd {
2160
+ font-family: inherit;
2161
+ font-size: 11px;
2162
+ line-height: 11px;
2163
+ display: grid;
2164
+ justify-items: center;
2165
+ grid-auto-flow: column;
2166
+ grid-template-columns: auto;
2167
+ grid-auto-columns: minmax(1em, auto);
2168
+ align-self: bottom;
2169
+ color: currentColor;
2170
+ margin-inline-start: var(--dr-space-4);
2171
+ }
2172
+
2173
+ .tlui-kbd > span {
2174
+ width: 100%;
2175
+ text-align: center;
2176
+ display: inline;
2177
+ margin: 0px;
2178
+ padding: 2px;
2179
+ border-radius: 2px;
2180
+ }
2181
+
2182
+ .tlui-kbd > span:last-child {
2183
+ padding-inline-end: 0;
2184
+ }
2185
+
2186
+ .tlui-kbd:not(:last-child) {
2187
+ margin-inline-end: var(--dr-space-2);
2188
+ }
2189
+
2190
+ /* Focus Mode Button */
2191
+
2192
+ .tlui-focus-button {
2193
+ z-index: var(--dr-layer-panels);
2194
+ pointer-events: all;
2195
+ }
2196
+
2197
+ /* ---------------------- Menu ---------------------- */
2198
+
2199
+ .tlui-menu:empty {
2200
+ display: none;
2201
+ }
2202
+
2203
+ .tlui-menu {
2204
+ z-index: var(--dr-layer-menus);
2205
+ height: fit-content;
2206
+ width: fit-content;
2207
+ border-radius: var(--dr-radius-3);
2208
+ pointer-events: all;
2209
+ touch-action: auto;
2210
+ overflow-y: auto;
2211
+ overscroll-behavior: none;
2212
+ background-color: var(--dr-color-panel);
2213
+ box-shadow: var(--dr-shadow-3);
2214
+ }
2215
+
2216
+ @media (max-height: 600px) {
2217
+ .tlui-menu {
2218
+ max-height: 70vh;
2219
+ }
2220
+ }
2221
+
2222
+ .tlui-menu::-webkit-scrollbar {
2223
+ display: none;
2224
+ }
2225
+
2226
+ /* Menu groups */
2227
+
2228
+ .tlui-menu__group {
2229
+ width: 100%;
2230
+ }
2231
+
2232
+ .tlui-menu__group:empty {
2233
+ display: none;
2234
+ }
2235
+
2236
+ .tlui-menu__group {
2237
+ border-bottom: 1px solid var(--dr-color-divider);
2238
+ }
2239
+ .tlui-menu__group:nth-last-of-type(1) {
2240
+ border-bottom: none;
2241
+ }
2242
+
2243
+ /* Submenu triggers */
2244
+
2245
+ .tlui-menu__submenu__trigger {
2246
+ --gradient-angle: 90deg;
2247
+ }
2248
+
2249
+ .tlui-menu__submenu__trigger[data-direction='left'] {
2250
+ --gradient-angle: 270deg;
2251
+ }
2252
+
2253
+ .tlui-menu__submenu__trigger[data-state='open']::after {
2254
+ opacity: 1;
2255
+ background: linear-gradient(
2256
+ var(--gradient-angle),
2257
+ rgba(144, 144, 144, 0) 0%,
2258
+ var(--dr-color-muted-2) 100%
2259
+ );
2260
+ }
2261
+
2262
+ @media (hover: hover) {
2263
+ .tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
2264
+ opacity: 1;
2265
+ background: linear-gradient(
2266
+ var(--gradient-angle),
2267
+ rgba(144, 144, 144, 0) 0%,
2268
+ var(--dr-color-muted-2) 100%
2269
+ );
2270
+ }
2271
+ }
2272
+
2273
+ /* Menu Sizes */
2274
+
2275
+ .tlui-menu[data-size='large'] > .tlui-menu__group {
2276
+ min-width: initial;
2277
+ }
2278
+
2279
+ .tlui-menu[data-size='medium'] > .tlui-menu__group {
2280
+ min-width: 144px;
2281
+ }
2282
+
2283
+ .tlui-menu[data-size='small'] > .tlui-menu__group {
2284
+ min-width: 96px;
2285
+ }
2286
+
2287
+ .tlui-menu[data-size='tiny'] > .tlui-menu__group {
2288
+ min-width: 0px;
2289
+ }
2290
+
2291
+ .tlui-menu-click-capture {
2292
+ position: fixed;
2293
+ inset: 0;
2294
+ z-index: var(--dr-layer-menu-click-capture);
2295
+ }
2296
+
2297
+ /* --------------------- Popover -------------------- */
2298
+
2299
+ .tlui-popover {
2300
+ position: relative;
2301
+ display: flex;
2302
+ align-content: stretch;
2303
+ }
2304
+
2305
+ .tlui-popover__content {
2306
+ position: relative;
2307
+ max-height: calc(var(--radix-popover-content-available-height) - 8px);
2308
+ margin: 0px;
2309
+ border: none;
2310
+ border-radius: var(--dr-radius-3);
2311
+ background-color: var(--dr-color-panel);
2312
+ box-shadow: var(--dr-shadow-3);
2313
+ z-index: var(--dr-layer-menus);
2314
+ overflow: hidden;
2315
+ overflow-y: auto;
2316
+ touch-action: auto;
2317
+ overscroll-behavior: none;
2318
+ scrollbar-width: none;
2319
+ -ms-overflow-style: none;
2320
+ }
2321
+
2322
+ /* -------------------- Menu Zone ------------------- */
2323
+
2324
+ .tlui-menu-zone {
2325
+ position: relative;
2326
+ z-index: var(--dr-layer-panels);
2327
+ width: fit-content;
2328
+ border-right: 2px solid var(--dr-color-background);
2329
+ border-bottom: 2px solid var(--dr-color-background);
2330
+ border-bottom-right-radius: var(--dr-radius-4);
2331
+ background-color: var(--dr-color-low);
2332
+ }
2333
+
2334
+ .tlui-menu-zone *[data-state='open']::after {
2335
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
2336
+ opacity: 1;
2337
+ }
2338
+
2339
+ @media (hover: hover) {
2340
+ .tlui-menu-zone *[data-state='open']:not(:hover)::after {
2341
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
2342
+ opacity: 1;
2343
+ }
2344
+ }
2345
+
2346
+ /* ------------------- Page Select ------------------ */
2347
+
2348
+ .tlui-page-menu__wrapper {
2349
+ display: flex;
2350
+ flex-direction: column;
2351
+ width: 220px;
2352
+ }
2353
+
2354
+ .tlui-page-menu__trigger {
2355
+ width: auto;
2356
+ }
2357
+
2358
+ .tlui-page-menu__trigger[data-state='open']::after {
2359
+ background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
2360
+ opacity: 1;
2361
+ }
2362
+
2363
+ .tlui-page-menu__list {
2364
+ flex: 0 0 auto;
2365
+ overflow-x: hidden;
2366
+ overflow-y: auto;
2367
+ scrollbar-width: none;
2368
+ -ms-overflow-style: none;
2369
+ }
2370
+
2371
+ .tlui-page-menu__list::-webkit-scrollbar {
2372
+ display: none;
2373
+ }
2374
+
2375
+ .tlui-page-menu__list__content {
2376
+ position: relative;
2377
+ }
2378
+
2379
+ .tlui-page-menu__resize-handle {
2380
+ flex: 0 0 auto;
2381
+ position: relative;
2382
+ height: 7px;
2383
+ margin-bottom: -3px;
2384
+ cursor: ns-resize;
2385
+ touch-action: none;
2386
+ z-index: 999;
2387
+ }
2388
+
2389
+ .tlui-page-menu__resize-handle::before {
2390
+ content: '';
2391
+ position: absolute;
2392
+ top: 3px;
2393
+ left: 0;
2394
+ right: 0;
2395
+ height: 1px;
2396
+ background: var(--dr-color-divider);
2397
+ transition: background-color 100ms;
2398
+ }
2399
+
2400
+ .tlui-page-menu__resize-handle[data-resizing='true']::before {
2401
+ background: var(--dr-color-selected);
2402
+ transition: none;
2403
+ }
2404
+
2405
+ .tlui-page-menu__create-button {
2406
+ flex: 0 0 auto;
2407
+ margin: 0;
2408
+ }
2409
+
2410
+ .tlui-page-menu__item__button {
2411
+ flex: 1 1 auto;
2412
+ min-width: 0px;
2413
+ }
2414
+
2415
+ .tlui-page-menu__item__button::after,
2416
+ .tlui-page-menu__item__drag-handle::after {
2417
+ content: none;
2418
+ }
2419
+
2420
+ .tlui-page-menu__item__button > .tlui-button__label {
2421
+ padding-inline-end: calc(40px - 12px);
2422
+ }
2423
+
2424
+ .tlui-page-menu__item {
2425
+ position: absolute;
2426
+ top: 0px;
2427
+ inset-inline-start: 0px;
2428
+ width: 100%;
2429
+ height: 40px;
2430
+ display: flex;
2431
+ flex-direction: row;
2432
+ align-items: center;
2433
+ overflow: hidden;
2434
+ transition: transform 0.08s ease-out;
2435
+ }
2436
+
2437
+ .tlui-page-menu__item::before {
2438
+ content: '';
2439
+ position: absolute;
2440
+ inset: 4px;
2441
+ border-radius: var(--dr-radius-2);
2442
+ background: var(--dr-color-muted-2);
2443
+ opacity: 0;
2444
+ pointer-events: none;
2445
+ }
2446
+
2447
+ .tlui-page-menu__item > * {
2448
+ position: relative;
2449
+ z-index: var(--dr-layer-above);
2450
+ }
2451
+
2452
+ .tlui-page-menu__item[data-iscurrent='true']:not([data-editing='true'])::before {
2453
+ background: var(--dr-color-hint);
2454
+ opacity: 1;
2455
+ }
2456
+
2457
+ .tlui-page-menu__item__title {
2458
+ flex: 1;
2459
+ height: 40px;
2460
+ position: relative;
2461
+ }
2462
+
2463
+ .tlui-page-menu__item__title::before {
2464
+ content: '';
2465
+ position: absolute;
2466
+ inset: 4px;
2467
+ border-radius: var(--dr-radius-2);
2468
+ border: 1px solid var(--dr-color-primary);
2469
+ pointer-events: none;
2470
+ }
2471
+
2472
+ .tlui-page-menu__item__title > .tlui-input__wrapper {
2473
+ height: 100%;
2474
+ }
2475
+
2476
+ .tlui-page-menu__item[data-dragging='true'],
2477
+ .tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__button,
2478
+ .tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__drag-handle {
2479
+ cursor: grabbing;
2480
+ transition: none;
2481
+ }
2482
+
2483
+ .tlui-page-menu__item[data-dragging='true'] {
2484
+ background: var(--dr-color-panel);
2485
+ opacity: 1;
2486
+ }
2487
+
2488
+ .tlui-page-menu__item__drag-handle {
2489
+ flex: 0 0 32px;
2490
+ min-width: 32px;
2491
+ padding: 0px;
2492
+ color: var(--dr-color-text-3);
2493
+ cursor: grab;
2494
+ touch-action: none;
2495
+ }
2496
+
2497
+ .tlui-page-menu__item__drag-handle > .tlui-icon {
2498
+ position: relative;
2499
+ inset-inline-start: 1px;
2500
+ }
2501
+
2502
+ .tlui-page-menu__item__drag-handle + .tlui-page-menu__item__button {
2503
+ padding-inline-start: 0px;
2504
+ }
2505
+
2506
+ .tlui-page-menu__item__input {
2507
+ margin-inline-start: 12px;
2508
+ }
2509
+
2510
+ .tlui-page-menu__item__submenu {
2511
+ position: absolute;
2512
+ inset-inline-end: 0px;
2513
+ top: 0px;
2514
+ height: 100%;
2515
+ z-index: 10;
2516
+ }
2517
+
2518
+ .tlui-page-menu__item__submenu > .tlui-button {
2519
+ opacity: 0;
2520
+ color: var(--dr-color-text-3);
2521
+ }
2522
+
2523
+ .tlui-page-menu__item__submenu > .tlui-button::after {
2524
+ content: none;
2525
+ }
2526
+
2527
+ .tlui-page-menu__item:has(.tlui-button:focus-visible)
2528
+ > .tlui-page-menu__item__submenu
2529
+ > .tlui-button,
2530
+ .tlui-page-menu__item__submenu > .tlui-button[data-state='open'],
2531
+ .tlui-page-menu__item__submenu > .tlui-button:focus-visible {
2532
+ opacity: 1;
2533
+ }
2534
+
2535
+ /* Hide the kebab while any row is being dragged: :hover sticks during pointer */
2536
+ /* capture, which would otherwise leave the kebab visible mid-drag. */
2537
+ .tlui-page-menu__list__content[data-dragging='true']
2538
+ .tlui-page-menu__item
2539
+ > .tlui-page-menu__item__submenu
2540
+ > .tlui-button {
2541
+ opacity: 0;
2542
+ }
2543
+
2544
+ .dr-container[data-coarse='true'] .tlui-page-menu__item__submenu > .tlui-button {
2545
+ opacity: 1;
2546
+ }
2547
+
2548
+ .dr-container[data-coarse='true'] .tlui-page-menu__item__button > .tlui-button__label {
2549
+ padding-inline-end: calc(40px - 12px);
2550
+ }
2551
+
2552
+ @media (hover: hover) {
2553
+ .tlui-page-menu__resize-handle:hover::before {
2554
+ background: var(--dr-color-selected);
2555
+ height: 2px;
2556
+ transition: background-color 150ms 80ms;
2557
+ }
2558
+
2559
+ .tlui-page-menu__item:not([data-editing='true']):hover::before {
2560
+ opacity: 1;
2561
+ }
2562
+
2563
+ .tlui-page-menu__item:hover > .tlui-page-menu__item__submenu > .tlui-button {
2564
+ opacity: 1;
2565
+ }
2566
+
2567
+ .tlui-page-menu__item__button > .tlui-button__label {
2568
+ padding-inline-end: 0px;
2569
+ }
2570
+
2571
+ .tlui-page-menu__item:hover > .tlui-page-menu__item__button > .tlui-button__label {
2572
+ padding-inline-end: calc(40px - 12px);
2573
+ }
2574
+
2575
+ .tlui-page-menu__item__submenu > .tlui-button:hover {
2576
+ color: var(--dr-color-text);
2577
+ }
2578
+ }
2579
+ /* -------------- Skip to main content -------------- */
2580
+
2581
+ .dr-skip-to-main-content {
2582
+ position: fixed;
2583
+ top: 48px;
2584
+ left: -9999px;
2585
+ padding: 8px 16px;
2586
+ z-index: var(--dr-layer-toasts);
2587
+ }
2588
+
2589
+ .dr-skip-to-main-content:focus {
2590
+ left: 8px;
2591
+ }
2592
+
2593
+ /*
2594
+ * focusing skip-to-main-content hide top ui buttons to make sure we avoid
2595
+ * z-index clashes on hover (see issue #8328)
2596
+ */
2597
+ .dr-skip-to-main-content:focus + .tlui-layout__top .tlui-helper-buttons {
2598
+ display: none;
2599
+ }
2600
+
2601
+ /* ---------------- Offline indicator --------------- */
2602
+
2603
+ .tlui-offline-indicator {
2604
+ display: flex;
2605
+ color: var(--dr-color-background);
2606
+ background-color: var(--dr-color-text);
2607
+ border: none;
2608
+ width: 32px;
2609
+ height: 32px;
2610
+ align-items: center;
2611
+ justify-content: center;
2612
+ border-radius: 99px;
2613
+ cursor: default;
2614
+ opacity: 0;
2615
+ animation: tl-fade-in;
2616
+ animation-duration: 0.12s;
2617
+ animation-delay: 2s;
2618
+ animation-fill-mode: forwards;
2619
+ }
2620
+
2621
+ /* ------------------- Style panel ------------------ */
2622
+
2623
+ .tlui-style-panel__wrapper {
2624
+ box-shadow: var(--dr-shadow-2);
2625
+ border-radius: var(--dr-radius-3);
2626
+ pointer-events: all;
2627
+ background-color: var(--dr-color-panel);
2628
+ height: fit-content;
2629
+ max-height: 100%;
2630
+ margin: 8px;
2631
+ margin-top: 4px;
2632
+ touch-action: auto;
2633
+ overscroll-behavior: none;
2634
+ overflow-y: auto;
2635
+ overflow-x: hidden;
2636
+ color: var(--dr-color-text);
2637
+ }
2638
+ /* if the style panel is the only child (ie no share menu), increase the margin */
2639
+ .tlui-style-panel__wrapper:only-child {
2640
+ margin-top: 8px;
2641
+ }
2642
+
2643
+ .tlui-style-panel {
2644
+ position: relative;
2645
+ z-index: var(--dr-layer-panels);
2646
+ pointer-events: all;
2647
+ width: 148px;
2648
+ max-width: 148px;
2649
+ }
2650
+
2651
+ .tlui-style-panel[data-enhanced-a11y-mode='true'] .tlui-button[data-isactive='true'] {
2652
+ border-radius: 10px;
2653
+ outline: 2px solid var(--dr-color-text);
2654
+ outline-offset: -5px;
2655
+ }
2656
+
2657
+ .tlui-style-panel::-webkit-scrollbar {
2658
+ display: none;
2659
+ }
2660
+
2661
+ .tlui-style-panel .tlui-button.select {
2662
+ width: 100%;
2663
+ }
2664
+
2665
+ .tlui-style-panel__section {
2666
+ display: flex;
2667
+ position: relative;
2668
+ flex-direction: column;
2669
+ }
2670
+
2671
+ /*
2672
+ add a border to the bottom of all but the last section. we have to handle empty sections too, which
2673
+ are hidden and shouldn't be counted
2674
+ */
2675
+ .tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
2676
+ border-bottom: 1px solid var(--dr-color-divider);
2677
+ }
2678
+ /*
2679
+ if a section ends with a slider and we're adding a border, we need some extra space for visual
2680
+ balance. we need to handle empty sections as above. is this the most complex css selector in all of
2681
+ tldraw? probably.
2682
+ */
2683
+ .tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
2684
+ :nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
2685
+ ) {
2686
+ margin-bottom: 7px;
2687
+ }
2688
+
2689
+ .tlui-style-panel__section:empty {
2690
+ display: none;
2691
+ }
2692
+
2693
+ /*
2694
+ * This is used in a couple places, like Align and Vertical Align.
2695
+ * It's because we have a toolbar with a Toggle Group but then an adjacent button
2696
+ * next to it that opens a popup.
2697
+ */
2698
+ .tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
2699
+ flex-wrap: wrap;
2700
+ }
2701
+
2702
+ .tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
2703
+ margin-left: -2px;
2704
+ }
2705
+
2706
+ .tlui-style-panel__section__common:not(:only-child) {
2707
+ margin-bottom: 7px;
2708
+ border-bottom: 1px solid var(--dr-color-divider);
2709
+ }
2710
+
2711
+ .tlui-toolbar-toggle-group-item,
2712
+ .tlui-style-panel__dropdown-picker > .tlui-button__icon {
2713
+ width: 40px;
2714
+ padding: 0;
2715
+ }
2716
+
2717
+ .tlui-style-panel__dropdown-picker:only-child {
2718
+ flex: 1;
2719
+ }
2720
+
2721
+ .tlui-style-panel__double-select-picker {
2722
+ display: flex;
2723
+ grid-template-columns: 1fr auto;
2724
+ align-items: center;
2725
+ padding-left: var(--dr-space-4);
2726
+ color: var(--dr-color-text-1);
2727
+ font-size: 12px;
2728
+ }
2729
+
2730
+ .tlui-style-panel__double-select-picker-label {
2731
+ text-overflow: ellipsis;
2732
+ overflow: hidden;
2733
+ white-space: nowrap;
2734
+ flex-grow: 2;
2735
+ max-width: 100%;
2736
+ }
2737
+
2738
+ .tlui-style-panel .tlui-button[data-state='open']::after {
2739
+ opacity: 1;
2740
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
2741
+ }
2742
+
2743
+ @media (hover: hover) {
2744
+ .tlui-style-panel .tlui-button[aria-expanded='true'] {
2745
+ background: none;
2746
+ }
2747
+ .tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
2748
+ opacity: 1;
2749
+ background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
2750
+ }
2751
+ }
2752
+
2753
+ /* Accessibility subheadings */
2754
+
2755
+ .tlui-style-panel__section .tlui-style-panel__subheading,
2756
+ .tlui-style-panel__section__common .tlui-style-panel__subheading,
2757
+ .tlui-style-panel__subheading + .tlui-slider__container {
2758
+ margin: 0;
2759
+ padding: var(--dr-space-2) var(--dr-space-3) 0px var(--dr-space-4);
2760
+ font-size: 12px;
2761
+ font-weight: inherit;
2762
+ line-height: inherit;
2763
+ }
2764
+
2765
+ .tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
2766
+ padding-top: var(--dr-space-3);
2767
+ }
2768
+
2769
+ .tlui-style-panel__subheading + .tlui-slider__container {
2770
+ padding-top: 0px;
2771
+ }
2772
+
2773
+ /* --------------------- Bottom --------------------- */
2774
+
2775
+ .tlui-layout__bottom {
2776
+ grid-row: 2;
2777
+ width: 100%;
2778
+ }
2779
+
2780
+ .tlui-layout__bottom__main {
2781
+ width: 100%;
2782
+ display: flex;
2783
+ align-items: flex-end;
2784
+ justify-content: center;
2785
+ }
2786
+
2787
+ /* ------------------- Navigation ------------------- */
2788
+
2789
+ .tlui-navigation-panel {
2790
+ display: flex;
2791
+ width: min-content;
2792
+ flex-direction: column;
2793
+ z-index: var(--dr-layer-panels);
2794
+ pointer-events: all;
2795
+ position: absolute;
2796
+ left: 0px;
2797
+ }
2798
+
2799
+ .dr-container[dir='rtl'] .tlui-navigation-panel {
2800
+ left: auto;
2801
+ right: 0px;
2802
+ }
2803
+
2804
+ .tlui-navigation-panel::before {
2805
+ content: '';
2806
+ display: block;
2807
+ position: absolute;
2808
+ z-index: -1;
2809
+ inset: -2px -2px 0px 0px;
2810
+ border-radius: 0;
2811
+ border-top: 2px solid var(--dr-color-background);
2812
+ border-right: 2px solid var(--dr-color-background);
2813
+ border-top-right-radius: var(--dr-radius-4);
2814
+ background-color: var(--dr-color-low);
2815
+ }
2816
+
2817
+ .dr-container[dir='rtl'] .tlui-navigation-panel::before {
2818
+ inset: -2px 0px 0px -2px;
2819
+ border-right: 0;
2820
+ border-left: 2px solid var(--dr-color-background);
2821
+ border-top-right-radius: 0;
2822
+ border-top-left-radius: var(--dr-radius-4);
2823
+ }
2824
+
2825
+ .tlui-navigation-panel[data-a11y='true']::before {
2826
+ display: none;
2827
+ }
2828
+
2829
+ /* Minimap */
2830
+
2831
+ .tlui-minimap {
2832
+ width: 100%;
2833
+ height: 96px;
2834
+ min-height: 96px;
2835
+ overflow: hidden;
2836
+ padding: var(--dr-space-3);
2837
+ padding-top: 0px;
2838
+ }
2839
+
2840
+ .tlui-minimap__canvas {
2841
+ position: relative;
2842
+ width: 100%;
2843
+ height: 100%;
2844
+ }
2845
+
2846
+ /* --------------------- Toolbar -------------------- */
2847
+
2848
+ /* Wide container */
2849
+ .tlui-main-toolbar {
2850
+ grid-column: 1 / span 3;
2851
+ grid-row: 1;
2852
+ display: flex;
2853
+ align-items: center;
2854
+ justify-content: center;
2855
+ flex-grow: 2;
2856
+ }
2857
+
2858
+ .tlui-main-toolbar--horizontal {
2859
+ padding-bottom: calc(var(--dr-space-3) + var(--dr-sab));
2860
+ max-width: 100%;
2861
+ }
2862
+
2863
+ .tlui-main-toolbar--vertical {
2864
+ position: absolute;
2865
+ left: 0;
2866
+ top: 90px; /* height of page menu + 'back to content' button */
2867
+ bottom: 140px; /* height of expanded mini-map */
2868
+ padding-left: calc(var(--dr-space-3) + var(--dr-sab));
2869
+ }
2870
+
2871
+ [data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
2872
+ bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
2873
+ }
2874
+
2875
+ /* Centered Content */
2876
+ .tlui-main-toolbar__inner {
2877
+ position: relative;
2878
+ width: fit-content;
2879
+ display: flex;
2880
+ gap: var(--dr-space-3);
2881
+ align-items: flex-start;
2882
+ }
2883
+
2884
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
2885
+ flex-direction: column;
2886
+ }
2887
+
2888
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
2889
+ width: fit-content;
2890
+ }
2891
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__left {
2892
+ display: flex;
2893
+ height: fit-content;
2894
+ }
2895
+
2896
+ /* Row of controls + lock button */
2897
+ .tlui-main-toolbar__extras {
2898
+ position: relative;
2899
+ z-index: var(--dr-layer-above);
2900
+ pointer-events: none;
2901
+ align-self: stretch;
2902
+ }
2903
+
2904
+ .tlui-main-toolbar__extras:empty {
2905
+ display: none;
2906
+ }
2907
+
2908
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
2909
+ height: 48px;
2910
+ top: 6px;
2911
+ }
2912
+
2913
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
2914
+ width: 48px;
2915
+ order: 1;
2916
+ }
2917
+
2918
+ .tlui-main-toolbar__extras__controls {
2919
+ position: relative;
2920
+ z-index: var(--dr-layer-above);
2921
+ background-color: var(--dr-color-low);
2922
+ border: 2px solid var(--dr-color-background);
2923
+ pointer-events: all;
2924
+ }
2925
+
2926
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
2927
+ border-top-left-radius: var(--dr-radius-4);
2928
+ border-top-right-radius: var(--dr-radius-4);
2929
+ margin-left: 8px;
2930
+ margin-right: 0px;
2931
+ width: fit-content;
2932
+ }
2933
+
2934
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
2935
+ border-top-right-radius: var(--dr-radius-4);
2936
+ border-bottom-right-radius: var(--dr-radius-4);
2937
+ margin-top: 8px;
2938
+ margin-left: -2px;
2939
+ margin-bottom: 0px;
2940
+ width: fit-content;
2941
+ }
2942
+
2943
+ .tlui-main-toolbar__tools {
2944
+ border-radius: var(--dr-radius-4);
2945
+ z-index: var(--dr-layer-panels);
2946
+ pointer-events: all;
2947
+ position: relative;
2948
+ background: var(--dr-color-panel);
2949
+ box-shadow: var(--dr-shadow-2);
2950
+ contain: layout style paint;
2951
+ }
2952
+
2953
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
2954
+ align-self: flex-end;
2955
+ }
2956
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
2957
+ align-self: flex-start;
2958
+ }
2959
+
2960
+ .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2961
+ width: 40px;
2962
+ margin-left: 2px;
2963
+ }
2964
+ .tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
2965
+ height: 40px;
2966
+ margin-top: 2px;
2967
+ }
2968
+
2969
+ .tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
2970
+ width: 32px;
2971
+ padding: 0px;
2972
+ }
2973
+
2974
+ .tlui-main-toolbar--horizontal *[data-state='open']::after {
2975
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
2976
+ opacity: 1;
2977
+ }
2978
+ .tlui-main-toolbar--vertical *[data-state='open']::after {
2979
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
2980
+ opacity: 1;
2981
+ }
2982
+
2983
+ .tlui-main-toolbar__overflow-content {
2984
+ touch-action: none;
2985
+ }
2986
+
2987
+ .tlui-main-toolbar__tools [data-toolbar-visible='false'],
2988
+ .tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
2989
+ display: none;
2990
+ }
2991
+
2992
+ .tlui-main-toolbar__group:empty {
2993
+ display: none;
2994
+ }
2995
+ .tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
2996
+ border-right: 1px solid var(--dr-color-divider);
2997
+ margin-right: 2px;
2998
+ }
2999
+ .tlui-column.tlui-main-toolbar__group:not(
3000
+ :nth-last-child(-n + 1 of [data-toolbar-visible='true'])
3001
+ ) {
3002
+ border-bottom: 1px solid var(--dr-color-divider);
3003
+ margin-bottom: 2px;
3004
+ }
3005
+ .tlui-grid.tlui-main-toolbar__group {
3006
+ grid-column: 1 / span 4;
3007
+ }
3008
+ .tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
3009
+ border-bottom: 1px solid var(--dr-color-divider);
3010
+ margin-bottom: 2px;
3011
+ }
3012
+
3013
+ @media (hover: hover) {
3014
+ .tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
3015
+ background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
3016
+ opacity: 1;
3017
+ }
3018
+ .tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
3019
+ background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--dr-color-muted-2) 100%);
3020
+ opacity: 1;
3021
+ }
3022
+ }
3023
+
3024
+ /* ------------------- Tooltip -------------------- */
3025
+
3026
+ .tlui-tooltip {
3027
+ font-size: 12px;
3028
+ padding: 2px 8px;
3029
+ border-radius: 4px;
3030
+ background-color: var(--dr-color-tooltip);
3031
+ box-shadow: none;
3032
+ color: var(--dr-color-text-shadow);
3033
+ max-width: 400px;
3034
+ width: fit-content;
3035
+ text-align: center;
3036
+ will-change: transform, opacity;
3037
+ z-index: 2;
3038
+ }
3039
+
3040
+ .tlui-tooltip__arrow {
3041
+ fill: var(--dr-color-tooltip);
3042
+ will-change: opacity;
3043
+ }
3044
+
3045
+ [data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
3046
+ z-index: var(--dr-layer-toasts) !important;
3047
+ pointer-events: none;
3048
+ }
3049
+
3050
+ /* ------------------- Debug panel ------------------ */
3051
+
3052
+ .tlui-debug-panel {
3053
+ background-color: var(--dr-color-low);
3054
+ width: 100%;
3055
+ display: grid;
3056
+ align-items: center;
3057
+ grid-template-columns: 1fr auto auto auto;
3058
+ justify-content: space-between;
3059
+ padding-inline-start: var(--dr-space-4);
3060
+ border-top: 1px solid var(--dr-color-background);
3061
+ font-size: 12px;
3062
+ color: var(--dr-color-text-1);
3063
+ z-index: var(--dr-layer-panels);
3064
+ pointer-events: all;
3065
+ }
3066
+
3067
+ .tlui-debug-panel__current-state {
3068
+ overflow: hidden;
3069
+ white-space: nowrap;
3070
+ text-overflow: ellipsis;
3071
+ }
3072
+
3073
+ .tlui-debug-panel__fps {
3074
+ margin-right: 8px;
3075
+ }
3076
+
3077
+ .tlui-debug-panel__fps__slow {
3078
+ font-weight: bold;
3079
+ color: var(--dr-color-danger);
3080
+ }
3081
+
3082
+ .tlui-a11y-audit {
3083
+ border-collapse: collapse;
3084
+ }
3085
+
3086
+ .tlui-a11y-audit th,
3087
+ .tlui-a11y-audit td {
3088
+ padding: 8px;
3089
+ border: 1px solid var(--dr-color-low-border);
3090
+ }
3091
+
3092
+ /* --------------------- Toasts --------------------- */
3093
+
3094
+ .tlui-toast__viewport {
3095
+ position: absolute;
3096
+ inset: 0px;
3097
+ margin: 0px;
3098
+ display: flex;
3099
+ align-items: flex-end;
3100
+ justify-content: flex-end;
3101
+ flex-direction: column;
3102
+ gap: var(--dr-space-3);
3103
+ pointer-events: none;
3104
+ padding: 0px var(--dr-space-3) 64px 0px;
3105
+ z-index: var(--dr-layer-toasts);
3106
+ }
3107
+
3108
+ .dr-container[dir='rtl'] .tlui-toast__viewport {
3109
+ padding: 0px 0px 64px var(--dr-space-3);
3110
+ }
3111
+
3112
+ .tlui-toast__viewport > * {
3113
+ pointer-events: all;
3114
+ }
3115
+
3116
+ .tlui-toast__icon {
3117
+ padding-top: 11px;
3118
+ padding-inline-start: var(--dr-space-4);
3119
+ color: var(--dr-color-text-1);
3120
+ }
3121
+
3122
+ .tlui-toast__container {
3123
+ min-width: 200px;
3124
+ display: flex;
3125
+ flex-direction: row;
3126
+ background-color: var(--dr-color-panel);
3127
+ box-shadow: var(--dr-shadow-2);
3128
+ border-radius: var(--dr-radius-3);
3129
+ font-size: 12px;
3130
+ }
3131
+
3132
+ .tlui-toast__container[data-severity='success'] .tlui-icon {
3133
+ color: var(--dr-color-success);
3134
+ }
3135
+
3136
+ .tlui-toast__container[data-severity='info'] .tlui-icon {
3137
+ color: var(--dr-color-info);
3138
+ }
3139
+
3140
+ .tlui-toast__container[data-severity='warning'] .tlui-icon {
3141
+ color: var(--dr-color-warning);
3142
+ }
3143
+
3144
+ .tlui-toast__container[data-severity='error'] .tlui-icon {
3145
+ color: var(--dr-color-danger);
3146
+ }
3147
+
3148
+ .tlui-toast__main {
3149
+ flex-grow: 2;
3150
+ max-width: 280px;
3151
+ }
3152
+
3153
+ .tlui-toast__content {
3154
+ padding: var(--dr-space-4);
3155
+ display: flex;
3156
+ line-height: 1.4;
3157
+ flex-direction: column;
3158
+ gap: var(--dr-space-3);
3159
+ }
3160
+
3161
+ .tlui-toast__main[data-actions='true'] .tlui-toast__content {
3162
+ padding-bottom: var(--dr-space-2);
3163
+ }
3164
+
3165
+ .tlui-toast__title {
3166
+ font-weight: bold;
3167
+ color: var(--dr-color-text-1);
3168
+ /* this makes the default toast look better */
3169
+ line-height: 16px;
3170
+ }
3171
+
3172
+ .tlui-toast__description {
3173
+ color: var(--dr-color-text-1);
3174
+ padding: var(--dr-space-3);
3175
+ margin: 0px;
3176
+ padding: 0px;
3177
+ }
3178
+
3179
+ .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
3180
+ padding-left: 0px;
3181
+ }
3182
+
3183
+ .tlui-toast__actions {
3184
+ display: flex;
3185
+ flex-direction: row;
3186
+ justify-content: flex-start;
3187
+ margin-left: 0;
3188
+ }
3189
+
3190
+ .tlui-toast__close {
3191
+ align-self: flex-end;
3192
+ flex-shrink: 0;
3193
+ }
3194
+
3195
+ @media (prefers-reduced-motion: no-preference) {
3196
+ .tlui-toast__container[data-state='open'] {
3197
+ animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
3198
+ }
3199
+
3200
+ .tlui-toast__container[data-state='closed'] {
3201
+ animation: tlui-fade-out 100ms ease-in;
3202
+ }
3203
+
3204
+ .tlui-toast__container[data-swipe='move'] {
3205
+ transform: translateX(var(--radix-toast-swipe-move-x));
3206
+ }
3207
+
3208
+ .tlui-toast__container[data-swipe='cancel'] {
3209
+ transform: translateX(0);
3210
+ transition: transform 200ms ease-out;
3211
+ }
3212
+
3213
+ .tlui-toast__container[data-swipe='end'] {
3214
+ animation: tlui-slide-out 100ms ease-out;
3215
+ }
3216
+
3217
+ .dr-container[dir='rtl'] .tlui-toast__container[data-state='open'] {
3218
+ animation: tlui-slide-in-rtl 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
3219
+ }
3220
+
3221
+ .dr-container[dir='rtl'] .tlui-toast__container[data-state='closed'] {
3222
+ animation: tlui-fade-out 100ms ease-in;
3223
+ }
3224
+
3225
+ .dr-container[dir='rtl'] .tlui-toast__container[data-swipe='end'] {
3226
+ animation: tlui-slide-out-rtl 100ms ease-out;
3227
+ }
3228
+ }
3229
+
3230
+ /* ---------------- Dialog ---------------- */
3231
+
3232
+ .tlui-dialog__overlay {
3233
+ position: absolute;
3234
+ top: 0px;
3235
+ left: 0px;
3236
+ width: 100%;
3237
+ height: 100%;
3238
+ z-index: var(--dr-layer-canvas-overlays);
3239
+ background-color: var(--dr-color-overlay);
3240
+ pointer-events: all;
3241
+ animation: tl-fade-in 0.12s ease-out;
3242
+ display: grid;
3243
+ place-items: center;
3244
+ overflow-y: auto;
3245
+ padding: 0px var(--dr-space-3);
3246
+ }
3247
+
3248
+ .tlui-dialog__content {
3249
+ display: flex;
3250
+ flex-direction: column;
3251
+ position: relative;
3252
+ cursor: default;
3253
+ background-color: var(--dr-color-panel);
3254
+ box-shadow: var(--dr-shadow-3);
3255
+ border-radius: var(--dr-radius-3);
3256
+ font-size: 12px;
3257
+ overflow: hidden;
3258
+ min-width: 300px;
3259
+ max-width: 100%;
3260
+ max-height: 80%;
3261
+ }
3262
+
3263
+ .tlui-dialog__header {
3264
+ position: relative;
3265
+ display: flex;
3266
+ align-items: center;
3267
+ flex: 0;
3268
+ z-index: var(--dr-layer-header-footer);
3269
+ padding-inline-start: var(--dr-space-4);
3270
+ color: var(--dr-color-text);
3271
+ height: 40px;
3272
+ }
3273
+
3274
+ .tlui-dialog__header__title {
3275
+ flex: 1;
3276
+ font-weight: inherit;
3277
+ font-size: 12px;
3278
+ margin: 0px;
3279
+ color: var(--dr-color-text-1);
3280
+ }
3281
+
3282
+ .tlui-dialog__header__close {
3283
+ justify-self: flex-end;
3284
+ }
3285
+
3286
+ .tlui-dialog__body {
3287
+ padding: var(--dr-space-4) var(--dr-space-4);
3288
+ flex: 0 1;
3289
+ overflow-y: auto;
3290
+ overflow-x: hidden;
3291
+ color: var(--dr-color-text-1);
3292
+ user-select: all;
3293
+ -webkit-user-select: text;
3294
+ }
3295
+ .tlui-dialog__body a {
3296
+ color: var(--dr-color-selected);
3297
+ }
3298
+
3299
+ .tlui-dialog__body ul,
3300
+ .tlui-dialog__body ol {
3301
+ padding-left: 16px;
3302
+ display: flex;
3303
+ flex-direction: column;
3304
+ gap: var(--dr-space-2);
3305
+ }
3306
+
3307
+ .tlui-dialog__footer {
3308
+ position: relative;
3309
+ min-height: 12px;
3310
+ z-index: var(--dr-layer-header-footer);
3311
+ }
3312
+
3313
+ .tlui-dialog__footer__actions {
3314
+ display: flex;
3315
+ align-items: center;
3316
+ justify-content: flex-end;
3317
+ }
3318
+
3319
+ .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) {
3320
+ margin-right: -4px;
3321
+ }
3322
+
3323
+ /* --------------------- Dialogs -------------------- */
3324
+
3325
+ /* Edit Link Dialog */
3326
+
3327
+ .tlui-edit-link-dialog {
3328
+ display: flex;
3329
+ flex-direction: column;
3330
+ gap: var(--dr-space-4);
3331
+ color: var(--dr-color-text);
3332
+ }
3333
+
3334
+ .tlui-edit-link-dialog__input {
3335
+ background-color: var(--dr-color-muted-2);
3336
+ flex-grow: 2;
3337
+ border-radius: var(--dr-radius-2);
3338
+ padding: 0px var(--dr-space-4);
3339
+ }
3340
+
3341
+ /* Embed Dialog */
3342
+
3343
+ .tlui-embed__spacer {
3344
+ flex-grow: 2;
3345
+ min-height: 0px;
3346
+ margin-left: calc(-1 * var(--dr-space-4));
3347
+ margin-top: calc(-1 * var(--dr-space-4));
3348
+ pointer-events: none;
3349
+ }
3350
+
3351
+ .tlui-embed-dialog__list {
3352
+ display: flex;
3353
+ flex-direction: column;
3354
+ padding: 0px var(--dr-space-3) var(--dr-space-4) var(--dr-space-3);
3355
+ }
3356
+
3357
+ .tlui-embed-dialog__item__image {
3358
+ width: 24px;
3359
+ height: 24px;
3360
+ display: flex;
3361
+ align-items: center;
3362
+ justify-content: center;
3363
+ background-size: contain;
3364
+ background-repeat: no-repeat;
3365
+ background-position: center center;
3366
+ background-color: var(--dr-color-selected-contrast);
3367
+ border-radius: var(--dr-radius-1);
3368
+ }
3369
+
3370
+ .tlui-embed-dialog__enter {
3371
+ display: flex;
3372
+ flex-direction: column;
3373
+ gap: var(--dr-space-4);
3374
+ color: var(--dr-color-text-1);
3375
+ }
3376
+
3377
+ .tlui-embed-dialog__input {
3378
+ background-color: var(--dr-color-muted-2);
3379
+ flex-grow: 2;
3380
+ border-radius: var(--dr-radius-2);
3381
+ padding: 0px var(--dr-space-4);
3382
+ }
3383
+
3384
+ .tlui-embed-dialog__warning {
3385
+ color: var(--dr-color-danger);
3386
+ text-shadow: none;
3387
+ }
3388
+
3389
+ .tlui-embed-dialog__instruction__link {
3390
+ display: flex;
3391
+ gap: var(--dr-space-1);
3392
+ margin-top: var(--dr-space-4);
3393
+ }
3394
+
3395
+ .tlui-embed-dialog__enter a {
3396
+ color: var(--dr-color-text-1);
3397
+ }
3398
+
3399
+ /* --------------- Keyboard shortcuts --------------- */
3400
+
3401
+ .tlui-shortcuts-dialog__header {
3402
+ border-bottom: 1px solid var(--dr-color-divider);
3403
+ }
3404
+
3405
+ .tlui-shortcuts-dialog__body {
3406
+ position: relative;
3407
+ columns: 3;
3408
+ column-gap: var(--dr-space-9);
3409
+ pointer-events: all;
3410
+ touch-action: auto;
3411
+
3412
+ /* Terrible fix to allow firefox users to scroll the dialog */
3413
+ overflow-x: auto;
3414
+
3415
+ scrollbar-width: none;
3416
+ }
3417
+
3418
+ .tlui-shortcuts-dialog__body::-webkit-scrollbar {
3419
+ display: none;
3420
+ }
3421
+
3422
+ .tlui-shortcuts-dialog__body__tablet {
3423
+ columns: 2;
3424
+ }
3425
+
3426
+ .tlui-shortcuts-dialog__body__mobile {
3427
+ columns: 1;
3428
+ }
3429
+
3430
+ .tlui-shortcuts-dialog__group {
3431
+ break-inside: avoid-column;
3432
+ padding-bottom: var(--dr-space-6);
3433
+ }
3434
+
3435
+ .tlui-shortcuts-dialog__group__title {
3436
+ font-size: inherit;
3437
+ font-weight: inherit;
3438
+ margin: 0px;
3439
+ color: var(--dr-color-text-3);
3440
+ height: 32px;
3441
+ display: flex;
3442
+ align-items: center;
3443
+ }
3444
+
3445
+ .tlui-shortcuts-dialog__group__content {
3446
+ display: flex;
3447
+ flex-direction: column;
3448
+ color: var(--dr-color-text-1);
3449
+ }
3450
+
3451
+ .tlui-shortcuts-dialog__key-pair {
3452
+ display: flex;
3453
+ gap: var(--dr-space-4);
3454
+ align-items: center;
3455
+ justify-content: space-between;
3456
+ height: 32px;
3457
+ }
3458
+
3459
+ .tlui-shortcuts-dialog__key-pair__key {
3460
+ flex: 1;
3461
+ font-size: 12px;
3462
+ }
3463
+
3464
+ /* ------------------ Language menu ----------------- */
3465
+
3466
+ .tlui-language-menu {
3467
+ max-height: 500px;
3468
+ }
3469
+
3470
+ .tlui-language-menu::after {
3471
+ content: '';
3472
+ display: block;
3473
+ position: absolute;
3474
+ bottom: 0px;
3475
+ left: 0px;
3476
+ right: 0px;
3477
+ height: 24px;
3478
+ background: linear-gradient(
3479
+ to bottom,
3480
+ var(--dr-color-panel-transparent) 0%,
3481
+ var(--dr-color-panel) 90%,
3482
+ var(--dr-color-panel) 100%
3483
+ );
3484
+ border-bottom-left-radius: var(--dr-radius-3);
3485
+ border-bottom-right-radius: var(--dr-radius-3);
3486
+ pointer-events: none;
3487
+ }
3488
+
3489
+ /* ------------------ Actions menu ------------------ */
3490
+
3491
+ .tlui-actions-menu {
3492
+ max-height: calc(100vh - 150px);
3493
+ }
3494
+
3495
+ /* -------------------- Help menu ------------------- */
3496
+
3497
+ .tlui-help-menu {
3498
+ pointer-events: all;
3499
+ position: absolute;
3500
+ bottom: var(--dr-space-2);
3501
+ right: var(--dr-space-2);
3502
+ z-index: var(--dr-layer-panels);
3503
+ border: 2px solid var(--dr-color-background);
3504
+ border-radius: 100%;
3505
+ }
3506
+
3507
+ /* ------------------- Da share zone ------------------ */
3508
+
3509
+ .tlui-share-zone {
3510
+ padding: 0px 0px 0px 0px;
3511
+ display: flex;
3512
+ flex-direction: row;
3513
+ justify-content: flex-end;
3514
+ z-index: var(--dr-layer-panels);
3515
+ align-items: center;
3516
+ padding-top: 2px;
3517
+ padding-right: 4px;
3518
+ }
3519
+
3520
+ /* ------------------- People Menu ------------------- */
3521
+
3522
+ .tlui-people-menu__avatars-button {
3523
+ display: flex;
3524
+ align-items: center;
3525
+ justify-content: flex-end;
3526
+ background: none;
3527
+ border: none;
3528
+ cursor: pointer;
3529
+ pointer-events: all;
3530
+ border-radius: var(--dr-radius-1);
3531
+ padding-right: 1px;
3532
+ height: 100%;
3533
+ }
3534
+
3535
+ .tlui-people-menu__avatars {
3536
+ display: flex;
3537
+ flex-direction: row;
3538
+ }
3539
+
3540
+ .tlui-people-menu__avatar {
3541
+ height: 24px;
3542
+ width: 24px;
3543
+ border: 2px solid var(--dr-color-background);
3544
+ background-color: var(--dr-color-low);
3545
+ border-radius: 100%;
3546
+ display: flex;
3547
+ align-items: center;
3548
+ justify-content: center;
3549
+ position: relative;
3550
+ font-size: 10px;
3551
+ font-weight: bold;
3552
+ text-align: center;
3553
+ color: var(--dr-color-selected-contrast);
3554
+ z-index: 2;
3555
+ }
3556
+
3557
+ .tlui-people-menu__avatar:nth-of-type(n + 2) {
3558
+ margin-inline-start: -12px;
3559
+ }
3560
+
3561
+ .tlui-people-menu__avatars-button[data-state='open'] {
3562
+ opacity: 1;
3563
+ }
3564
+
3565
+ @media (hover: hover) {
3566
+ .tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
3567
+ border-color: var(--dr-color-low);
3568
+ }
3569
+ }
3570
+
3571
+ .tlui-people-menu__more {
3572
+ min-width: 0px;
3573
+ font-size: 11px;
3574
+ font-weight: 600;
3575
+ color: var(--dr-color-text-1);
3576
+ font-family: inherit;
3577
+ padding: 0px 4px;
3578
+ }
3579
+ .tlui-people-menu__more::after {
3580
+ border-radius: var(--dr-radius-2);
3581
+ inset: 0px;
3582
+ }
3583
+
3584
+ .tlui-people-menu__wrapper {
3585
+ position: relative;
3586
+ display: flex;
3587
+ flex-direction: column;
3588
+ width: 220px;
3589
+ height: fit-content;
3590
+ max-height: 50vh;
3591
+ }
3592
+
3593
+ .tlui-people-menu__section {
3594
+ position: relative;
3595
+ touch-action: auto;
3596
+ flex-direction: column;
3597
+ max-height: 100%;
3598
+ overflow-x: hidden;
3599
+ overflow-y: auto;
3600
+ touch-action: auto;
3601
+ }
3602
+
3603
+ .tlui-people-menu__section:first-child,
3604
+ .tlui-people-menu__section:last-child {
3605
+ flex-shrink: 0;
3606
+ }
3607
+
3608
+ .tlui-people-menu__section:not(:last-child) {
3609
+ border-bottom: 1px solid var(--dr-color-divider);
3610
+ }
3611
+
3612
+ .tlui-people-menu__user {
3613
+ display: flex;
3614
+ justify-content: flex-start;
3615
+ align-items: center;
3616
+ }
3617
+
3618
+ .tlui-people-menu__user__color {
3619
+ flex-shrink: 0;
3620
+ }
3621
+
3622
+ .tlui-people-menu__user__name {
3623
+ text-align: start;
3624
+ overflow: hidden;
3625
+ text-overflow: ellipsis;
3626
+ white-space: nowrap;
3627
+ font-size: 12px;
3628
+ color: var(--dr-color-text-1);
3629
+ max-width: 100%;
3630
+ flex-grow: 1;
3631
+ flex-shrink: 100;
3632
+ }
3633
+
3634
+ .tlui-people-menu__user__label {
3635
+ text-align: start;
3636
+ overflow: hidden;
3637
+ text-overflow: ellipsis;
3638
+ white-space: nowrap;
3639
+ font-size: 12px;
3640
+ color: var(--dr-color-text-3);
3641
+ flex-grow: 100;
3642
+ flex-shrink: 0;
3643
+ margin-inline-start: 4px;
3644
+ }
3645
+
3646
+ .tlui-people-menu__user__input {
3647
+ flex-grow: 2;
3648
+ height: 100%;
3649
+ padding: 0px;
3650
+ margin: 0px;
3651
+ }
3652
+
3653
+ .tlui-people-menu__user > .tlui-input__wrapper {
3654
+ width: auto;
3655
+ display: flex;
3656
+ align-items: auto;
3657
+ flex-grow: 2;
3658
+ gap: 8px;
3659
+ height: 100%;
3660
+ padding: 0px;
3661
+ }
3662
+
3663
+ .tlui-people-menu__item {
3664
+ position: relative;
3665
+ }
3666
+
3667
+ .tlui-people-menu__item:last-of-type .tlui-button__menu {
3668
+ margin-bottom: 0;
3669
+ }
3670
+
3671
+ .tlui-people-menu__item__button {
3672
+ padding: 0 11px;
3673
+ overflow: hidden;
3674
+ }
3675
+
3676
+ .tlui-people-menu__item > .tlui-button__menu {
3677
+ width: auto;
3678
+ display: flex;
3679
+ align-items: auto;
3680
+ justify-content: flex-start;
3681
+ flex-grow: 2;
3682
+ gap: 11px;
3683
+ }
3684
+
3685
+ .tlui-people-menu__name {
3686
+ text-align: start;
3687
+ white-space: nowrap;
3688
+ overflow: hidden;
3689
+ text-overflow: ellipsis;
3690
+ }
3691
+
3692
+ .tlui-people-menu__item__follow {
3693
+ position: absolute;
3694
+ top: 0px;
3695
+ inset-inline-end: 0px;
3696
+ max-width: 40px;
3697
+ flex-shrink: 0;
3698
+ }
3699
+
3700
+ .tlui-people-menu__item[data-follow='true'],
3701
+ .tlui-people-menu__item:has(.tlui-button:focus-visible) {
3702
+ padding-inline-end: 36px;
3703
+ }
3704
+
3705
+ .tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,
3706
+ .tlui-people-menu__item:has(.tlui-button:focus-visible) .tlui-people-menu__item__follow {
3707
+ opacity: 1;
3708
+ }
3709
+
3710
+ @media (hover: hover) {
3711
+ .tlui-people-menu__item__follow {
3712
+ opacity: 0;
3713
+ }
3714
+
3715
+ .tlui-people-menu__item:hover {
3716
+ padding-right: 36px;
3717
+ }
3718
+ .tlui-people-menu__item:hover .tlui-people-menu__item__follow {
3719
+ opacity: 1;
3720
+ }
3721
+ }
3722
+
3723
+ /* --------------- Following indicator -------------- */
3724
+
3725
+ .tlui-following-indicator {
3726
+ display: block;
3727
+ position: absolute;
3728
+ inset: 0px;
3729
+ border-width: 2px;
3730
+ border-style: solid;
3731
+ z-index: var(--dr-layer-following-indicator);
3732
+ pointer-events: none;
3733
+ }
3734
+
3735
+ /* --------------- Contextual toolbar --------------- */
3736
+
3737
+ .tlui-contextual-toolbar {
3738
+ position: absolute;
3739
+ }
3740
+
3741
+ /**
3742
+ * N.B. We hide the toolbar while mousing down, so no need to turn these off.
3743
+ */
3744
+ .tlui-contextual-toolbar,
3745
+ .tlui-contextual-toolbar * {
3746
+ pointer-events: all;
3747
+ }
3748
+
3749
+ .tlui-contextual-toolbar [data-isactive='true']::after {
3750
+ background-color: var(--dr-color-muted-2);
3751
+ opacity: 1;
3752
+ }
3753
+
3754
+ .tlui-contextual-toolbar {
3755
+ opacity: 0;
3756
+ transition: opacity 0.08s ease-in-out;
3757
+ }
3758
+
3759
+ .tlui-contextual-toolbar,
3760
+ .tlui-contextual-toolbar * {
3761
+ pointer-events: none;
3762
+ }
3763
+
3764
+ .tlui-contextual-toolbar[data-visible='true'] {
3765
+ opacity: 1;
3766
+ z-index: var(--dr-layer-menus);
3767
+ }
3768
+
3769
+ .tlui-contextual-toolbar[data-interactive='true'],
3770
+ .tlui-contextual-toolbar[data-interactive='true'] * {
3771
+ pointer-events: all;
3772
+ }
3773
+
3774
+ .tlui-rich-text__toolbar-link-input {
3775
+ margin-left: 12px;
3776
+ /*
3777
+ * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.
3778
+ * This is so the toolbar size stays stable going in and out of the link editor.
3779
+ */
3780
+ width: 148px;
3781
+ }
3782
+
3783
+ .tlui-media__toolbar-alt-text-input {
3784
+ margin-left: 12px;
3785
+ /*
3786
+ * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.
3787
+ * This is so the toolbar size stays stable going in and out of the alt text editor.
3788
+ */
3789
+ min-width: 200px;
3790
+ }
3791
+
3792
+ .tlui-contextual-toolbar .tlui-input__wrapper {
3793
+ height: 40px;
3794
+ }
3795
+
3796
+ .tlui-image__toolbar .tlui-slider__container {
3797
+ width: 125px;
3798
+ }
3799
+
3800
+ .tlui-image__toolbar .tlui-slider {
3801
+ height: 100%;
3802
+ }
3803
+
3804
+ .tlui-image__toolbar .tlui-slider__track {
3805
+ height: 32px;
3806
+ }
3807
+
3808
+ .tlui-image__toolbar .tlui-slider__thumb {
3809
+ width: 14px;
3810
+ height: 14px;
3811
+ }
3812
+
3813
+ /* ------------------- Animations ------------------- */
3814
+ @keyframes tlui-fade-out {
3815
+ 0% {
3816
+ opacity: 1;
3817
+ }
3818
+ 100% {
3819
+ opacity: 0;
3820
+ }
3821
+ }
3822
+
3823
+ @keyframes tlui-slide-in {
3824
+ from {
3825
+ transform: translateX(calc(100% + var(--dr-space-3)));
3826
+ }
3827
+ to {
3828
+ transform: translateX(0px);
3829
+ }
3830
+ }
3831
+
3832
+ @keyframes tlui-slide-out {
3833
+ from {
3834
+ transform: translateX(var(--radix-toast-swipe-end-x));
3835
+ }
3836
+ to {
3837
+ transform: translateX(calc(100% + var(--dr-space-3)));
3838
+ }
3839
+ }
3840
+
3841
+ @keyframes tlui-slide-in-rtl {
3842
+ from {
3843
+ transform: translateX(calc(-100% - var(--dr-space-3)));
3844
+ }
3845
+ to {
3846
+ transform: translateX(0px);
3847
+ }
3848
+ }
3849
+
3850
+ @keyframes tlui-slide-out-rtl {
3851
+ from {
3852
+ transform: translateX(var(--radix-toast-swipe-end-x));
3853
+ }
3854
+ to {
3855
+ transform: translateX(calc(-100% - var(--dr-space-3)));
3856
+ }
3857
+ }
3858
+