@100mslive/roomkit-react 0.5.4-alpha.0 → 0.5.4

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 (42) hide show
  1. package/dist/Diagnostics/index.d.ts +1 -2
  2. package/dist/Prebuilt/components/PIP/PIPManager.d.ts +11 -0
  3. package/dist/index.cjs.css +1 -1
  4. package/dist/index.cjs.css.map +1 -1
  5. package/dist/index.cjs.js +35187 -38581
  6. package/dist/index.cjs.js.map +4 -4
  7. package/dist/index.css +1 -1
  8. package/dist/index.css.map +1 -1
  9. package/dist/index.js +37176 -68
  10. package/dist/index.js.map +4 -4
  11. package/dist/meta.cjs.json +1365 -1556
  12. package/dist/meta.esbuild.json +1129 -1949
  13. package/package.json +7 -7
  14. package/dist/Diagnostics-IVT65BTD.css +0 -2771
  15. package/dist/Diagnostics-IVT65BTD.css.map +0 -7
  16. package/dist/Diagnostics-XZRJZN6F.js +0 -1638
  17. package/dist/Diagnostics-XZRJZN6F.js.map +0 -7
  18. package/dist/EmojiPickerContent-7HLGDLO5.js +0 -16
  19. package/dist/EmojiPickerContent-7HLGDLO5.js.map +0 -7
  20. package/dist/HLSView-KDT33XIC.js +0 -1642
  21. package/dist/HLSView-KDT33XIC.js.map +0 -7
  22. package/dist/HLSView-PIED5LDA.css +0 -2771
  23. package/dist/HLSView-PIED5LDA.css.map +0 -7
  24. package/dist/Prebuilt/components/Chat/EmojiPickerContent.d.ts +0 -12
  25. package/dist/Prebuilt/components/Footer/emojiData.d.ts +0 -2
  26. package/dist/Prebuilt/components/LazyLoad.d.ts +0 -60
  27. package/dist/StatsForNerds-HJRRP6CJ.css +0 -2771
  28. package/dist/StatsForNerds-HJRRP6CJ.css.map +0 -7
  29. package/dist/StatsForNerds-NEKFDD6A.js +0 -277
  30. package/dist/StatsForNerds-NEKFDD6A.js.map +0 -7
  31. package/dist/VBPicker-FAHHMUQI.js +0 -313
  32. package/dist/VBPicker-FAHHMUQI.js.map +0 -7
  33. package/dist/VBPicker-PYLU7FGM.css +0 -2771
  34. package/dist/VBPicker-PYLU7FGM.css.map +0 -7
  35. package/dist/WhiteboardLayout-MYWNACKM.js +0 -85
  36. package/dist/WhiteboardLayout-MYWNACKM.js.map +0 -7
  37. package/dist/WhiteboardLayout-OOFKQWLV.css +0 -2771
  38. package/dist/WhiteboardLayout-OOFKQWLV.css.map +0 -7
  39. package/dist/chunk-NBFKVN6C.js +0 -33410
  40. package/dist/chunk-NBFKVN6C.js.map +0 -7
  41. package/dist/chunk-WS5Q67XX.js +0 -125
  42. package/dist/chunk-WS5Q67XX.js.map +0 -7
@@ -1,2771 +0,0 @@
1
- @import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap";
2
-
3
- /* ../../../../../../../tmp/tmp-3074-5dWF56Qv4iH1/19ef3b693661/index.css */
4
- .tl-container {
5
- font-size: 12px;
6
- --space-1: 2px;
7
- --space-2: 4px;
8
- --space-3: 8px;
9
- --space-4: 12px;
10
- --space-5: 16px;
11
- --space-6: 20px;
12
- --space-7: 28px;
13
- --space-8: 32px;
14
- --space-9: 64px;
15
- --space-10: 72px;
16
- --radius-0: 2px;
17
- --radius-1: 4px;
18
- --radius-2: 6px;
19
- --radius-3: 9px;
20
- --radius-4: 13px;
21
- --layer-background: 100;
22
- --layer-grid: 150;
23
- --layer-canvas: 200;
24
- --layer-shapes: 300;
25
- --layer-overlays: 400;
26
- --layer-following-indicator: 1000;
27
- --tl-zoom: 1;
28
- --tl-dpr-multiple: 100;
29
- --tl-dpr-multiple-px: calc(var(--tl-dpr-multiple) * 1px);
30
- --tl-cursor-none: none;
31
- --tl-cursor-default: 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>") 12 8, default;
32
- --tl-cursor-pointer: 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>") 14 10, pointer;
33
- --tl-cursor-cross: 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>") 16 16, crosshair;
34
- --tl-cursor-move: 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>") 16 16, move;
35
- --tl-cursor-grab: 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>") 16 16, grab;
36
- --tl-cursor-grabbing: 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>") 16 16, grabbing;
37
- --tl-cursor-text: 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>") 4 10, text;
38
- --tl-cursor-zoom-in: 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>") 16 16, zoom-in;
39
- --tl-cursor-zoom-out: 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>") 16 16, zoom-out;
40
- --tl-cursor: var(--tl-cursor-default);
41
- --tl-cursor-resize-edge: ew-resize;
42
- --tl-cursor-resize-corner: nesw-resize;
43
- --tl-cursor-ew-resize: ew-resize;
44
- --tl-cursor-ns-resize: ns-resize;
45
- --tl-cursor-nesw-resize: nesw-resize;
46
- --tl-cursor-nwse-resize: nwse-resize;
47
- --tl-cursor-rotate: pointer;
48
- --tl-cursor-nwse-rotate: pointer;
49
- --tl-cursor-nesw-rotate: pointer;
50
- --tl-cursor-senw-rotate: pointer;
51
- --tl-cursor-swne-rotate: pointer;
52
- --tl-scale: calc(1 / var(--tl-zoom));
53
- --tl-font-draw: "tldraw_draw", sans-serif;
54
- --tl-font-sans: "tldraw_sans", sans-serif;
55
- --tl-font-serif: "tldraw_serif", serif;
56
- --tl-font-mono: "tldraw_mono", monospace;
57
- --a: calc(min(.5, 1 / var(--tl-zoom))*2px) ;
58
- --b: calc(min(.5, 1 / var(--tl-zoom))*-2px) ;
59
- --tl-text-outline:
60
- 0 var(--b) 0 var(--color-background),
61
- 0 var(--a) 0 var(--color-background),
62
- var(--b) var(--b) 0 var(--color-background),
63
- var(--a) var(--b) 0 var(--color-background),
64
- var(--a) var(--a) 0 var(--color-background),
65
- var(--b) var(--a) 0 var(--color-background);
66
- position: relative;
67
- top: 0;
68
- left: 0;
69
- width: 100%;
70
- height: 100%;
71
- overflow: clip;
72
- }
73
- .tl-theme__light {
74
- --color-accent: #e64a4a;
75
- --color-background: rgb(249, 250, 251);
76
- --color-brush-fill: rgba(144, 144, 144, .102);
77
- --color-brush-stroke: rgba(144, 144, 144, .251);
78
- --color-grid: rgb(109, 109, 109);
79
- --color-low: hsl(204, 16%, 94%);
80
- --color-low-border: hsl(204, 16%, 92%);
81
- --color-culled: rgb(235, 238, 240);
82
- --color-muted-none: rgba(0, 0, 0, 0);
83
- --color-muted-0: rgba(0, 0, 0, .02);
84
- --color-muted-1: rgba(0, 0, 0, .1);
85
- --color-muted-2: rgba(0, 0, 0, .042);
86
- --color-hint: rgba(0, 0, 0, .055);
87
- --color-overlay: rgba(0, 0, 0, .2);
88
- --color-divider: #e8e8e8;
89
- --color-panel-contrast: #ffffff;
90
- --color-panel-overlay: rgba(255, 255, 255, .82);
91
- --color-panel: #fdfdfd;
92
- --color-focus: #004094;
93
- --color-selected: #2f80ed;
94
- --color-selected-contrast: #ffffff;
95
- --color-selection-fill: #1e90ff06;
96
- --color-selection-stroke: #2f80ed;
97
- --color-text-0: #1d1d1d;
98
- --color-text-1: #2d2d2d;
99
- --color-text-3: #a4a5a7;
100
- --color-text-shadow: #ffffff;
101
- --color-primary: #2f80ed;
102
- --color-warn: #d10b0b;
103
- --color-text: #000000;
104
- --color-laser: #ff0000;
105
- --shadow-1: 0px 1px 2px rgba(0, 0, 0, .25), 0px 1px 3px rgba(0, 0, 0, .09);
106
- --shadow-2:
107
- 0px 0px 2px rgba(0, 0, 0, .16),
108
- 0px 2px 3px rgba(0, 0, 0, .24),
109
- 0px 2px 6px rgba(0, 0, 0, .1),
110
- inset 0px 0px 0px 1px var(--color-panel-contrast);
111
- --shadow-3:
112
- 0px 1px 2px rgba(0, 0, 0, .28),
113
- 0px 2px 6px rgba(0, 0, 0, .14),
114
- inset 0px 0px 0px 1px var(--color-panel-contrast);
115
- --shadow-4:
116
- 0px 0px 3px rgba(0, 0, 0, .19),
117
- 0px 5px 4px rgba(0, 0, 0, .16),
118
- 0px 2px 16px rgba(0, 0, 0, .06),
119
- inset 0px 0px 0px 1px var(--color-panel-contrast);
120
- }
121
- .tl-theme__dark {
122
- --color-accent: #e64a4a;
123
- --color-background: #212529;
124
- --color-brush-fill: rgba(180, 180, 180, .05);
125
- --color-brush-stroke: rgba(180, 180, 180, .25);
126
- --color-grid: #909090;
127
- --color-low: #2c3136;
128
- --color-low-border: #30363b;
129
- --color-culled: rgb(47, 52, 57);
130
- --color-muted-none: rgba(255, 255, 255, 0);
131
- --color-muted-0: rgba(255, 255, 255, .02);
132
- --color-muted-1: rgba(255, 255, 255, .1);
133
- --color-muted-2: rgba(255, 255, 255, .05);
134
- --color-hint: rgba(255, 255, 255, .1);
135
- --color-overlay: rgba(0, 0, 0, .35);
136
- --color-divider: #49555f;
137
- --color-panel-contrast: #49555f;
138
- --color-panel: #363d44;
139
- --color-panel-overlay: rgba(54, 61, 68, .82);
140
- --color-focus: #a5c3f3;
141
- --color-selected: #4285f4;
142
- --color-selected-contrast: #ffffff;
143
- --color-selection-fill: rgba(38, 150, 255, .05);
144
- --color-selection-stroke: #2f80ed;
145
- --color-text-0: #f0eded;
146
- --color-text-1: #d9d9d9;
147
- --color-text-3: #6d747b;
148
- --color-text-shadow: #292f35;
149
- --color-primary: #2f80ed;
150
- --color-warn: #ef6464;
151
- --color-text: #f8f9fa;
152
- --color-laser: #ff0000;
153
- --shadow-1:
154
- 0px 1px 2px #00000029,
155
- 0px 1px 3px #00000038,
156
- inset 0px 0px 0px 1px var(--color-panel-contrast);
157
- --shadow-2:
158
- 0px 1px 3px #00000077,
159
- 0px 2px 6px #00000055,
160
- inset 0px 0px 0px 1px var(--color-panel-contrast);
161
- --shadow-3:
162
- 0px 1px 3px #00000077,
163
- 0px 2px 12px rgba(0, 0, 0, .22),
164
- inset 0px 0px 0px 1px var(--color-panel-contrast);
165
- }
166
- .tl-counter-scaled {
167
- transform: scale(var(--tl-scale));
168
- transform-origin: top left;
169
- width: calc(100% * var(--tl-zoom));
170
- height: calc(100% * var(--tl-zoom));
171
- }
172
- .tl-container,
173
- .tl-container * {
174
- -webkit-touch-callout: none;
175
- -webkit-tap-highlight-color: transparent;
176
- scrollbar-highlight-color: transparent;
177
- -webkit-user-select: none;
178
- -moz-user-select: none;
179
- user-select: none;
180
- box-sizing: border-box;
181
- outline: none;
182
- }
183
- .tl-container a {
184
- -webkit-touch-callout: initial;
185
- }
186
- .tl-container:focus-within {
187
- outline: 1px solid var(--color-low);
188
- }
189
- input,
190
- *[contenteditable],
191
- *[contenteditable] * {
192
- -webkit-user-select: text;
193
- }
194
- .tl-canvas {
195
- position: absolute;
196
- top: 0;
197
- left: 0;
198
- width: 100%;
199
- height: 100%;
200
- color: var(--color-text);
201
- z-index: var(--layer-canvas);
202
- cursor: var(--tl-cursor);
203
- overflow: clip;
204
- content-visibility: auto;
205
- touch-action: none;
206
- contain: strict;
207
- }
208
- .tl-fixed-layer {
209
- position: absolute;
210
- top: 0;
211
- left: 0;
212
- width: 100%;
213
- height: 100%;
214
- contain: strict;
215
- pointer-events: none;
216
- }
217
- .tl-shapes {
218
- position: relative;
219
- z-index: var(--layer-shapes);
220
- }
221
- .tl-overlays {
222
- position: relative;
223
- z-index: var(--layer-overlays);
224
- }
225
- .tl-overlays__item {
226
- position: absolute;
227
- top: 0;
228
- left: 0;
229
- height: var(--tl-dpr-multiple-px);
230
- width: var(--tl-dpr-multiple-px);
231
- overflow: visible;
232
- pointer-events: none;
233
- transform-origin: top left;
234
- }
235
- .tl-svg-context {
236
- position: absolute;
237
- top: 0;
238
- left: 0;
239
- height: var(--tl-dpr-multiple-px);
240
- width: var(--tl-dpr-multiple-px);
241
- pointer-events: none;
242
- }
243
- .tl-positioned {
244
- position: absolute;
245
- top: 0;
246
- left: 0;
247
- transform-origin: top left;
248
- }
249
- .tl-background {
250
- position: absolute;
251
- background-color: var(--color-background);
252
- inset: 0;
253
- z-index: var(--layer-background);
254
- }
255
- .tl-grid {
256
- position: absolute;
257
- top: 0;
258
- left: 0;
259
- width: 100%;
260
- height: 100%;
261
- touch-action: none;
262
- pointer-events: none;
263
- z-index: var(--layer-grid);
264
- contain: strict;
265
- }
266
- .tl-grid-dot {
267
- fill: var(--color-grid);
268
- }
269
- .tl-html-layer {
270
- position: absolute;
271
- top: 0;
272
- left: 0;
273
- width: 1px;
274
- height: 1px;
275
- contain: layout style size;
276
- }
277
- .tl-brush {
278
- stroke-width: calc(var(--tl-scale) * 1px);
279
- contain: size layout;
280
- }
281
- .tl-brush__default {
282
- stroke: var(--color-brush-stroke);
283
- fill: var(--color-brush-fill);
284
- }
285
- .tl-screenshot-brush {
286
- stroke: var(--color-text-0);
287
- fill: none;
288
- }
289
- .tl-scribble {
290
- stroke-linejoin: round;
291
- stroke-linecap: round;
292
- pointer-events: none;
293
- contain: size layout;
294
- }
295
- .tl-shape {
296
- position: absolute;
297
- pointer-events: none;
298
- overflow: visible;
299
- transform-origin: top left;
300
- contain: size layout;
301
- }
302
- .tl-shape__culled {
303
- position: relative;
304
- background-color: var(--color-culled);
305
- }
306
- .tl-svg-container {
307
- position: absolute;
308
- top: 0;
309
- left: 0;
310
- width: 100%;
311
- height: 100%;
312
- pointer-events: none;
313
- stroke-linecap: round;
314
- stroke-linejoin: round;
315
- transform-origin: top left;
316
- overflow: visible;
317
- }
318
- .tl-html-container {
319
- position: absolute;
320
- top: 0;
321
- left: 0;
322
- width: 100%;
323
- height: 100%;
324
- pointer-events: none;
325
- stroke-linecap: round;
326
- stroke-linejoin: round;
327
- transform-origin: top left;
328
- color: inherit;
329
- }
330
- .tl-collaborator__scribble {
331
- z-index: 10;
332
- }
333
- .tl-collaborator__brush {
334
- z-index: 20;
335
- }
336
- .tl-collaborator__shape-indicator {
337
- z-index: 30;
338
- }
339
- .tl-user-scribble {
340
- z-index: 40;
341
- }
342
- .tl-user-brush {
343
- z-index: 50;
344
- }
345
- .tl-user-indicator__selected {
346
- z-index: 60;
347
- }
348
- .tl-user-indicator__hovered {
349
- z-index: 70;
350
- }
351
- .tl-user-handles {
352
- z-index: 80;
353
- }
354
- .tl-user-snapline {
355
- z-index: 90;
356
- }
357
- .tl-selection__fg {
358
- pointer-events: none;
359
- z-index: 100;
360
- }
361
- .tl-user-indicator__hint {
362
- z-index: 110;
363
- stroke-width: calc(2.5px * var(--tl-scale));
364
- }
365
- .tl-collaborator__cursor-hint {
366
- z-index: 120;
367
- }
368
- .tl-collaborator__cursor {
369
- z-index: 130;
370
- }
371
- .tl-cursor {
372
- overflow: visible;
373
- }
374
- .tl-shape-indicator {
375
- transform-origin: top left;
376
- fill: none;
377
- stroke-width: calc(1.5px * var(--tl-scale));
378
- contain: size;
379
- }
380
- .tl-selection__bg {
381
- position: absolute;
382
- top: 0;
383
- left: 0;
384
- transform-origin: top left;
385
- background-color: transparent;
386
- pointer-events: all;
387
- }
388
- .tl-selection__fg__outline {
389
- fill: none;
390
- pointer-events: none;
391
- stroke: var(--color-selection-stroke);
392
- stroke-width: calc(1.5px * var(--tl-scale));
393
- }
394
- .tl-corner-handle {
395
- pointer-events: none;
396
- stroke: var(--color-selection-stroke);
397
- fill: var(--color-background);
398
- stroke-width: calc(1.5px * var(--tl-scale));
399
- }
400
- .tl-text-handle {
401
- pointer-events: none;
402
- fill: var(--color-selection-stroke);
403
- }
404
- .tl-corner-crop-handle,
405
- .tl-corner-crop-edge-handle {
406
- pointer-events: none;
407
- fill: none;
408
- stroke: var(--color-selection-stroke);
409
- }
410
- .tl-rotate-handle {
411
- stroke: var(--color-selection-stroke);
412
- fill: var(--color-background);
413
- stroke-width: calc(1.5px * var(--tl-scale));
414
- pointer-events: all;
415
- }
416
- .tl-mobile-rotate__bg {
417
- pointer-events: all;
418
- cursor: var(--tl-cursor-grab);
419
- }
420
- .tl-mobile-rotate__fg {
421
- pointer-events: none;
422
- stroke: var(--color-selection-stroke);
423
- fill: var(--color-background);
424
- stroke-width: calc(1.5px * var(--tl-scale));
425
- }
426
- .tl-transparent {
427
- fill: transparent;
428
- stroke: transparent;
429
- }
430
- .tl-handle {
431
- pointer-events: all;
432
- }
433
- .tl-handle__bg {
434
- fill: transparent;
435
- stroke: transparent;
436
- pointer-events: all;
437
- cursor: var(--tl-cursor-grabbing);
438
- }
439
- .tl-handle__fg {
440
- fill: var(--color-background);
441
- stroke: var(--color-selection-stroke);
442
- stroke-width: calc(1.5px * var(--tl-scale));
443
- pointer-events: none;
444
- }
445
- .tl-handle__create {
446
- opacity: 0;
447
- }
448
- .tl-handle__create:hover {
449
- opacity: 1;
450
- }
451
- .tl-handle__bg:active {
452
- fill: none;
453
- }
454
- .tl-handle__bg:hover {
455
- cursor: var(--tl-cursor-grab);
456
- fill: var(--color-selection-fill);
457
- }
458
- @media (pointer: coarse) {
459
- .tl-handle__bg:active {
460
- fill: var(--color-selection-fill);
461
- }
462
- .tl-handle__create {
463
- opacity: 1;
464
- }
465
- }
466
- .tl-image,
467
- .tl-video {
468
- -o-object-fit: cover;
469
- object-fit: cover;
470
- background-size: cover;
471
- width: 100%;
472
- height: 100%;
473
- }
474
- .tl-image-container,
475
- .tl-video-container,
476
- .tl-embed-container {
477
- width: 100%;
478
- height: 100%;
479
- pointer-events: all;
480
- display: flex;
481
- justify-content: center;
482
- align-items: center;
483
- }
484
- .tl-image__tg {
485
- --scale: min(2, var(--tl-scale)) ;
486
- position: absolute;
487
- top: calc(var(--scale) * 8px);
488
- right: calc(var(--scale) * 8px);
489
- font-size: 10px;
490
- transform-origin: top right;
491
- background-color: var(--color-background);
492
- padding: 2px 4px;
493
- border-radius: var(--radius-1);
494
- }
495
- .tl-collaborator-cursor {
496
- position: absolute;
497
- }
498
- .tl-nametag {
499
- top: 16px;
500
- left: 13px;
501
- width: -moz-fit-content;
502
- width: fit-content;
503
- height: -moz-fit-content;
504
- height: fit-content;
505
- max-width: 120px;
506
- padding: 3px 6px;
507
- white-space: nowrap;
508
- position: absolute;
509
- overflow: hidden;
510
- text-overflow: ellipsis;
511
- font-size: 12px;
512
- font-family: var(--font-body);
513
- border-radius: var(--radius-2);
514
- color: var(--color-selected-contrast);
515
- }
516
- .tl-nametag-title {
517
- top: -2px;
518
- left: 13px;
519
- width: -moz-fit-content;
520
- width: fit-content;
521
- height: -moz-fit-content;
522
- height: fit-content;
523
- padding: 0 6px;
524
- max-width: 120px;
525
- white-space: nowrap;
526
- position: absolute;
527
- overflow: hidden;
528
- text-overflow: ellipsis;
529
- font-size: 12px;
530
- font-family: var(--font-body);
531
- text-shadow: var(--tl-text-outline);
532
- color: var(--color-selected-contrast);
533
- }
534
- .tl-nametag-chat {
535
- top: 16px;
536
- left: 13px;
537
- width: -moz-fit-content;
538
- width: fit-content;
539
- height: -moz-fit-content;
540
- height: fit-content;
541
- color: var(--color-selected-contrast);
542
- white-space: nowrap;
543
- position: absolute;
544
- padding: 3px 6px;
545
- font-size: 12px;
546
- font-family: var(--font-body);
547
- opacity: 1;
548
- border-radius: var(--radius-2);
549
- }
550
- .tl-cursor-chat {
551
- position: absolute;
552
- color: var(--color-selected-contrast);
553
- white-space: nowrap;
554
- padding: 3px 6px;
555
- font-size: 12px;
556
- font-family: var(--font-body);
557
- pointer-events: none;
558
- z-index: var(--layer-cursor);
559
- margin-top: 16px;
560
- margin-left: 13px;
561
- opacity: 1;
562
- border: none;
563
- -webkit-user-select: text;
564
- -moz-user-select: text;
565
- user-select: text;
566
- border-radius: var(--radius-2);
567
- }
568
- .tl-cursor-chat .tl-cursor-chat__bubble {
569
- padding-right: 12px;
570
- }
571
- .tl-cursor-chat::-moz-selection {
572
- background: var(--color-selected);
573
- color: var(--color-selected-contrast);
574
- text-shadow: none;
575
- }
576
- .tl-cursor-chat::selection {
577
- background: var(--color-selected);
578
- color: var(--color-selected-contrast);
579
- text-shadow: none;
580
- }
581
- .tl-cursor-chat-fade {
582
- opacity: .0001;
583
- transition: opacity 5s ease-in-out;
584
- }
585
- .tl-cursor-chat::-moz-placeholder {
586
- color: var(--color-selected-contrast);
587
- opacity: .7;
588
- }
589
- .tl-cursor-chat::placeholder {
590
- color: var(--color-selected-contrast);
591
- opacity: .7;
592
- }
593
- @keyframes spinner {
594
- to {
595
- transform: rotate(360deg);
596
- }
597
- }
598
- .tl-spinner:after {
599
- content: "";
600
- box-sizing: border-box;
601
- position: absolute;
602
- top: 50%;
603
- left: 50%;
604
- width: 20px;
605
- height: 20px;
606
- margin-top: -10px;
607
- margin-left: -10px;
608
- border-radius: 50%;
609
- border: 2px solid #ccc;
610
- border-top-color: #000;
611
- animation: spinner .6s linear infinite;
612
- pointer-events: none;
613
- }
614
- .tl-iconshape__icon {
615
- pointer-events: all;
616
- width: 100%;
617
- height: 100%;
618
- }
619
- .tl-icon-preview {
620
- width: 14px;
621
- height: 14px;
622
- }
623
- .tl-text-shape__wrapper {
624
- position: relative;
625
- font-weight: 400;
626
- min-width: 1px;
627
- padding: 0;
628
- margin: 0;
629
- border: none;
630
- height: 100%;
631
- font-variant: normal;
632
- font-style: normal;
633
- pointer-events: all;
634
- white-space: pre-wrap;
635
- overflow-wrap: break-word;
636
- text-shadow: var(--tl-text-outline);
637
- }
638
- .tl-text-shape__wrapper[data-align=start] {
639
- text-align: left;
640
- }
641
- .tl-text-shape__wrapper[data-align=middle] {
642
- text-align: center;
643
- }
644
- .tl-text-shape__wrapper[data-align=end] {
645
- text-align: right;
646
- }
647
- .tl-text-shape__wrapper[data-font=draw] {
648
- font-family: var(--tl-font-draw);
649
- }
650
- .tl-text-shape__wrapper[data-font=sans] {
651
- font-family: var(--tl-font-sans);
652
- }
653
- .tl-text-shape__wrapper[data-font=serif] {
654
- font-family: var(--tl-font-serif);
655
- }
656
- .tl-text-shape__wrapper[data-font=mono] {
657
- font-family: var(--tl-font-mono);
658
- }
659
- .tl-text-shape__wrapper[data-isediting=true] .tl-text-content {
660
- opacity: 0;
661
- }
662
- .tl-text {
663
- margin: 0;
664
- padding: 0;
665
- border: 0px;
666
- color: inherit;
667
- caret-color: var(--color-text);
668
- background: none;
669
- -o-border-image: none;
670
- border-image: none;
671
- font-size: inherit;
672
- font-family: inherit;
673
- font-weight: inherit;
674
- line-height: inherit;
675
- font-variant: inherit;
676
- font-style: inherit;
677
- text-align: inherit;
678
- letter-spacing: inherit;
679
- text-shadow: inherit;
680
- outline: none;
681
- white-space: pre-wrap;
682
- word-wrap: break-word;
683
- overflow-wrap: break-word;
684
- pointer-events: all;
685
- text-rendering: auto;
686
- text-transform: none;
687
- text-indent: 0px;
688
- display: inline-block;
689
- -webkit-appearance: auto;
690
- -moz-appearance: auto;
691
- appearance: auto;
692
- -moz-column-count: initial !important;
693
- column-count: initial !important;
694
- writing-mode: horizontal-tb !important;
695
- word-spacing: 0px;
696
- }
697
- .tl-text-measure {
698
- position: absolute;
699
- z-index: 999999;
700
- top: -9999px;
701
- right: -9999px;
702
- opacity: 0;
703
- width: -moz-max-content;
704
- width: max-content;
705
- box-sizing: border-box;
706
- pointer-events: none;
707
- line-break: normal;
708
- white-space: pre-wrap;
709
- word-wrap: break-word;
710
- overflow-wrap: break-word;
711
- resize: none;
712
- border: none;
713
- -moz-user-select: none;
714
- user-select: none;
715
- contain: style paint;
716
- -webkit-user-select: none;
717
- }
718
- .tl-text-edit-container {
719
- position: relative;
720
- width: 100%;
721
- height: 100%;
722
- }
723
- .tl-text-input,
724
- .tl-text-content {
725
- position: absolute;
726
- top: 0;
727
- left: 0;
728
- width: 100%;
729
- height: 100%;
730
- min-width: 1px;
731
- min-height: 1px;
732
- overflow: visible;
733
- outline: none;
734
- }
735
- .tl-text-content {
736
- pointer-events: none;
737
- }
738
- .tl-text-input {
739
- resize: none;
740
- -moz-user-select: all;
741
- user-select: all;
742
- -webkit-user-select: text;
743
- overflow: hidden;
744
- cursor: var(--tl-cursor-text);
745
- }
746
- .tl-text-input::-moz-selection {
747
- background: var(--color-selected);
748
- color: var(--color-selected-contrast);
749
- text-shadow: none;
750
- }
751
- .tl-text-input::selection {
752
- background: var(--color-selected);
753
- color: var(--color-selected-contrast);
754
- text-shadow: none;
755
- }
756
- .tl-snap-line,
757
- .tl-snap-point {
758
- stroke: var(--color-accent);
759
- stroke-width: calc(1px * var(--tl-scale));
760
- fill: none;
761
- }
762
- .tl-group {
763
- stroke: var(--color-text);
764
- stroke-width: calc(1px * var(--tl-scale));
765
- opacity: .5;
766
- }
767
- .tl-bookmark__container {
768
- width: 100%;
769
- height: 100%;
770
- position: relative;
771
- border: 1px solid var(--color-panel-contrast);
772
- background-color: var(--color-panel);
773
- border-radius: var(--radius-2);
774
- display: flex;
775
- flex-direction: column;
776
- overflow: hidden;
777
- }
778
- .tl-bookmark__image_container {
779
- flex: 1;
780
- overflow: hidden;
781
- border-top-left-radius: var(--radius-1);
782
- border-top-right-radius: var(--radius-1);
783
- width: 100%;
784
- height: 100%;
785
- display: flex;
786
- justify-content: flex-end;
787
- align-items: flex-start;
788
- }
789
- .tl-bookmark__image_container > .tl-hyperlink-button:after {
790
- background-color: var(--color-panel);
791
- }
792
- .tl-bookmark__placeholder {
793
- width: 100%;
794
- height: 100%;
795
- background-color: var(--color-muted-2);
796
- border-bottom: 1px solid var(--color-muted-2);
797
- }
798
- .tl-bookmark__image {
799
- width: 100%;
800
- height: 100%;
801
- -o-object-fit: cover;
802
- object-fit: cover;
803
- -o-object-position: center;
804
- object-position: center;
805
- }
806
- .tl-bookmark__copy_container {
807
- background-color: var(--color-muted);
808
- padding: var(--space-4);
809
- pointer-events: all;
810
- }
811
- .tl-bookmark__heading,
812
- .tl-bookmark__description,
813
- .tl-bookmark__link {
814
- margin: 0;
815
- width: 100%;
816
- font-family: inherit;
817
- }
818
- .tl-bookmark__heading {
819
- font-size: 16px;
820
- font-weight: 700;
821
- padding-bottom: var(--space-2);
822
- margin: 8px 0;
823
- }
824
- .tl-bookmark__description {
825
- font-size: 12px;
826
- padding-bottom: var(--space-4);
827
- }
828
- .tl-bookmark__link {
829
- font-size: 14px;
830
- pointer-events: all;
831
- z-index: 999;
832
- overflow: hidden;
833
- display: block;
834
- color: var(--color-text);
835
- text-overflow: ellipsis;
836
- text-decoration: none;
837
- color: var(--color-text-1);
838
- cursor: var(--tl-cursor-pointer);
839
- }
840
- .tl-bookmark__link:hover {
841
- color: var(--color-selected);
842
- }
843
- .tl-hyperlink-button {
844
- background: none;
845
- margin: 0;
846
- position: absolute;
847
- top: 0;
848
- right: 0;
849
- height: 44px;
850
- width: 44px;
851
- display: flex;
852
- align-items: center;
853
- justify-content: center;
854
- z-index: 200;
855
- font-size: 12px;
856
- font-weight: 400;
857
- color: var(--color-text-1);
858
- padding: 13px;
859
- cursor: var(--tl-cursor-pointer);
860
- border: none;
861
- outline: none;
862
- pointer-events: all;
863
- }
864
- .tl-hyperlink-button:after {
865
- content: "";
866
- z-index: -1;
867
- position: absolute;
868
- right: 6px;
869
- bottom: 6px;
870
- display: block;
871
- width: calc(100% - 12px);
872
- height: calc(100% - 12px);
873
- border-radius: var(--radius-1);
874
- background-color: var(--color-background);
875
- pointer-events: none;
876
- }
877
- .tl-hyperlink-button:hover {
878
- color: var(--color-selected);
879
- }
880
- .tl-hyperlink-button:focus-visible {
881
- color: var(--color-selected);
882
- }
883
- .tl-hyperlink-button__icon {
884
- width: 18px;
885
- height: 18px;
886
- background-color: currentColor;
887
- pointer-events: none;
888
- }
889
- .tl-hyperlink-button__hidden {
890
- display: none;
891
- }
892
- .tl-text-label {
893
- display: flex;
894
- justify-content: center;
895
- align-items: center;
896
- color: var(--color-text);
897
- text-shadow: var(--tl-text-outline);
898
- line-height: inherit;
899
- position: absolute;
900
- inset: 0;
901
- z-index: 10;
902
- }
903
- .tl-text-label[data-isediting=true] .tl-text-content {
904
- opacity: 0;
905
- }
906
- .tl-text-label[data-hastext=false][data-isediting=false] > .tl-text-label__inner {
907
- width: 40px;
908
- height: 40px;
909
- }
910
- .tl-text-label[data-hastext=true][data-isediting=false] .tl-text-content {
911
- pointer-events: all;
912
- }
913
- .tl-text-label__inner {
914
- position: relative;
915
- width: -moz-fit-content;
916
- width: fit-content;
917
- height: -moz-fit-content;
918
- height: fit-content;
919
- display: flex;
920
- align-items: center;
921
- justify-content: center;
922
- pointer-events: all;
923
- min-height: auto;
924
- }
925
- .tl-text-label__inner > .tl-text {
926
- position: relative;
927
- top: 0;
928
- left: 0;
929
- padding: 16px;
930
- height: -moz-fit-content;
931
- height: fit-content;
932
- width: -moz-fit-content;
933
- width: fit-content;
934
- border-radius: var(--radius-1);
935
- max-width: 100%;
936
- z-index: 3;
937
- }
938
- .tl-text-label__inner > .tl-text-input {
939
- position: absolute;
940
- top: 0;
941
- left: 0;
942
- width: 100%;
943
- height: 100%;
944
- padding: 16px;
945
- z-index: 4;
946
- }
947
- .tl-text-label[data-textwrap=true] > .tl-text-label__inner {
948
- max-width: 100%;
949
- }
950
- .tl-text-label[data-isediting=true] {
951
- background-color: transparent;
952
- min-height: auto;
953
- }
954
- .tl-text-label[data-isediting=true] p {
955
- opacity: 0;
956
- }
957
- .tl-text-label[data-align=start],
958
- .tl-text-label[data-align=start-legacy] {
959
- text-align: left;
960
- }
961
- .tl-text-label[data-align=middle],
962
- .tl-text-label[data-align=middle-legacy] {
963
- text-align: center;
964
- }
965
- .tl-text-label[data-align=end],
966
- .tl-text-label[data-align=end-legacy] {
967
- text-align: right;
968
- }
969
- .tl-arrow-hint {
970
- stroke: var(--color-text-1);
971
- fill: none;
972
- stroke-linecap: round;
973
- overflow: visible;
974
- }
975
- .tl-arrow-label[data-font=draw],
976
- .tl-text-label[data-font=draw] {
977
- font-family: var(--tl-font-draw);
978
- }
979
- .tl-arrow-label[data-font=sans],
980
- .tl-text-label[data-font=sans] {
981
- font-family: var(--tl-font-sans);
982
- }
983
- .tl-arrow-label[data-font=serif],
984
- .tl-text-label[data-font=serif] {
985
- font-family: var(--tl-font-serif);
986
- }
987
- .tl-arrow-label[data-font=mono],
988
- .tl-text-label[data-font=mono] {
989
- font-family: var(--tl-font-mono);
990
- }
991
- .tl-arrow-label {
992
- position: absolute;
993
- top: -1px;
994
- left: -1px;
995
- width: 2px;
996
- height: 2px;
997
- padding: 0;
998
- display: flex;
999
- justify-content: center;
1000
- align-items: center;
1001
- color: var(--color-text);
1002
- text-shadow: var(--tl-text-outline);
1003
- }
1004
- .tl-arrow-label[data-isediting=true] p {
1005
- opacity: 0;
1006
- }
1007
- .tl-arrow-label[data-isediting=true] > .tl-arrow-label__inner {
1008
- background-color: var(--color-background);
1009
- }
1010
- .tl-arrow-label__inner {
1011
- border-radius: var(--radius-1);
1012
- box-sizing: content-box;
1013
- position: relative;
1014
- height: -moz-max-content;
1015
- height: max-content;
1016
- width: -moz-max-content;
1017
- width: max-content;
1018
- pointer-events: all;
1019
- display: flex;
1020
- justify-content: center;
1021
- align-items: center;
1022
- }
1023
- .tl-arrow-label p,
1024
- .tl-arrow-label textarea {
1025
- margin: 0;
1026
- padding: 0;
1027
- border: 0px;
1028
- color: inherit;
1029
- caret-color: var(--color-text);
1030
- background: none;
1031
- -o-border-image: none;
1032
- border-image: none;
1033
- font-size: inherit;
1034
- font-family: inherit;
1035
- font-weight: inherit;
1036
- line-height: inherit;
1037
- font-variant: inherit;
1038
- font-style: inherit;
1039
- text-align: inherit;
1040
- letter-spacing: inherit;
1041
- text-shadow: inherit;
1042
- outline: none;
1043
- white-space: pre-wrap;
1044
- word-wrap: break-word;
1045
- overflow-wrap: break-word;
1046
- pointer-events: all;
1047
- text-rendering: auto;
1048
- text-transform: none;
1049
- text-indent: 0px;
1050
- display: inline-block;
1051
- -webkit-appearance: auto;
1052
- -moz-appearance: auto;
1053
- appearance: auto;
1054
- -moz-column-count: initial !important;
1055
- column-count: initial !important;
1056
- writing-mode: horizontal-tb !important;
1057
- word-spacing: 0px;
1058
- }
1059
- .tl-arrow-label p {
1060
- position: relative;
1061
- height: -moz-max-content;
1062
- height: max-content;
1063
- z-index: 2;
1064
- padding: 4px;
1065
- overflow: visible;
1066
- }
1067
- .tl-arrow-label textarea {
1068
- z-index: 3;
1069
- margin: 0;
1070
- padding: 4px;
1071
- height: 100%;
1072
- width: 100%;
1073
- position: absolute;
1074
- resize: none;
1075
- border: 0px;
1076
- -moz-user-select: all;
1077
- user-select: all;
1078
- -webkit-user-select: text;
1079
- caret-color: var(--color-text);
1080
- -o-border-image: none;
1081
- border-image: none;
1082
- min-width: 4px;
1083
- }
1084
- .tl-note__container {
1085
- position: relative;
1086
- width: 100%;
1087
- height: 100%;
1088
- border-radius: var(--radius-2);
1089
- box-shadow: var(--shadow-1);
1090
- overflow: hidden;
1091
- border-color: currentColor;
1092
- border-style: solid;
1093
- border-width: 1px;
1094
- }
1095
- .tl-note__container .tl-text-label {
1096
- text-shadow: none;
1097
- }
1098
- .tl-note__scrim {
1099
- position: absolute;
1100
- z-index: 1;
1101
- top: 0;
1102
- left: 0;
1103
- width: 100%;
1104
- height: 100%;
1105
- background-color: var(--color-background);
1106
- opacity: .28;
1107
- }
1108
- .tl-loading {
1109
- background-color: var(--color-background);
1110
- color: var(--color-text-1);
1111
- height: 100%;
1112
- width: 100%;
1113
- display: flex;
1114
- flex-direction: column;
1115
- justify-content: center;
1116
- align-items: center;
1117
- gap: var(--space-2);
1118
- font-size: 14px;
1119
- font-weight: 500;
1120
- opacity: 0;
1121
- animation: fade-in .2s ease-in-out forwards;
1122
- animation-delay: .2s;
1123
- }
1124
- @keyframes fade-in {
1125
- 0% {
1126
- opacity: 0;
1127
- }
1128
- to {
1129
- opacity: 1;
1130
- }
1131
- }
1132
- .tl-frame__body {
1133
- stroke-width: calc(1px * var(--tl-scale));
1134
- }
1135
- .tl-frame__creating {
1136
- stroke: var(--color-selected);
1137
- fill: none;
1138
- }
1139
- .tl-frame__hitarea {
1140
- border-style: solid;
1141
- border-width: calc(8px * var(--tl-scale));
1142
- border-color: transparent;
1143
- background: none;
1144
- pointer-events: stroke;
1145
- box-sizing: border-box;
1146
- top: calc(-8px * var(--tl-scale));
1147
- left: calc(-8px * var(--tl-scale));
1148
- width: calc(100% + calc(16px * var(--tl-scale)));
1149
- height: calc(100% + calc(16px * var(--tl-scale)));
1150
- z-index: 1;
1151
- position: absolute;
1152
- }
1153
- .tl-frame-heading {
1154
- display: flex;
1155
- align-items: center;
1156
- position: absolute;
1157
- transform-origin: 0% 100%;
1158
- overflow: hidden;
1159
- max-width: 100%;
1160
- min-width: 32px;
1161
- height: auto;
1162
- font-size: 12px;
1163
- padding-bottom: 4px;
1164
- pointer-events: all;
1165
- }
1166
- .tl-frame-heading-hit-area {
1167
- pointer-events: all;
1168
- transform-origin: 0% 100%;
1169
- display: flex;
1170
- height: 100%;
1171
- width: 100%;
1172
- align-items: center;
1173
- border-radius: var(--radius-1);
1174
- background-color: var(--color-background);
1175
- }
1176
- .tl-frame-label {
1177
- pointer-events: all;
1178
- overflow: hidden;
1179
- text-overflow: ellipsis;
1180
- padding: var(--space-3) var(--space-3);
1181
- position: relative;
1182
- font-size: inherit;
1183
- white-space: pre;
1184
- border: 1px solid transparent;
1185
- }
1186
- .tl-frame-label__editing {
1187
- color: transparent;
1188
- white-space: pre;
1189
- width: auto;
1190
- overflow: visible;
1191
- background-color: var(--color-panel);
1192
- border-radius: var(--radius-1);
1193
- border-color: var(--color-selected);
1194
- }
1195
- .tl-frame-name-input {
1196
- position: absolute;
1197
- border: none;
1198
- background: none;
1199
- outline: none;
1200
- padding: var(--space-3) var(--space-3);
1201
- inset: 0;
1202
- font-size: inherit;
1203
- font-family: inherit;
1204
- font-weight: inherit;
1205
- width: 100%;
1206
- color: var(--color-text-1);
1207
- border-radius: var(--radius-1);
1208
- -moz-user-select: all;
1209
- user-select: all;
1210
- -webkit-user-select: text;
1211
- white-space: pre;
1212
- cursor: var(--tl-cursor-text);
1213
- }
1214
- @media (max-width: 600px) {
1215
- .tl-frame-heading {
1216
- font-size: 16px;
1217
- }
1218
- }
1219
- .tl-embed {
1220
- border: none;
1221
- border-radius: var(--radius-2);
1222
- }
1223
- .tl-image__button {
1224
- padding: 4px 8px;
1225
- color: var(--color-text);
1226
- background-color: var(--color-panel);
1227
- border-radius: var(--radius-2);
1228
- box-shadow: var(--shadow-1);
1229
- pointer-events: all;
1230
- cursor: var(--tl-cursor-pointer);
1231
- outline: none;
1232
- display: flex;
1233
- }
1234
- .tl-image__button:disabled {
1235
- opacity: .5;
1236
- pointer-events: none;
1237
- }
1238
- .tl-image__toolbox {
1239
- position: absolute;
1240
- top: 0;
1241
- left: 0;
1242
- display: flex;
1243
- justify-content: flex-end;
1244
- align-items: flex-end;
1245
- padding: 10px;
1246
- }
1247
- .tl-image__toolbox__hidden {
1248
- display: none;
1249
- }
1250
- .tl-shape-error-boundary {
1251
- width: 100%;
1252
- height: 100%;
1253
- background-color: var(--color-muted-1);
1254
- border-width: calc(1px * var(--tl-scale));
1255
- border-color: var(--color-muted-1);
1256
- border-style: solid;
1257
- border-radius: calc(var(--radius-1) * var(--tl-scale));
1258
- display: flex;
1259
- flex-direction: column;
1260
- align-items: center;
1261
- justify-content: center;
1262
- text-align: left;
1263
- position: relative;
1264
- pointer-events: all;
1265
- overflow: hidden;
1266
- padding: var(--space-2);
1267
- }
1268
- .tl-shape-error-boundary:before {
1269
- transform: scale(var(--tl-scale));
1270
- content: "Error";
1271
- font-size: 12px;
1272
- font-family: inherit;
1273
- color: var(--color-text-0);
1274
- }
1275
- .tl-error-boundary {
1276
- width: 100%;
1277
- height: 100%;
1278
- display: flex;
1279
- align-items: center;
1280
- justify-content: center;
1281
- padding: var(--space-4);
1282
- background-color: var(--color-background);
1283
- color: var(--color-text-1);
1284
- position: absolute;
1285
- z-index: 600;
1286
- }
1287
- .tl-error-boundary__overlay {
1288
- position: absolute;
1289
- inset: 0;
1290
- z-index: 500;
1291
- background-color: var(--color-overlay);
1292
- }
1293
- .tl-error-boundary__content * {
1294
- -moz-user-select: all;
1295
- user-select: all;
1296
- -webkit-user-select: text;
1297
- pointer-events: all;
1298
- }
1299
- .tl-error-boundary__canvas {
1300
- pointer-events: none;
1301
- position: absolute;
1302
- inset: 0;
1303
- z-index: -1;
1304
- }
1305
- .tl-error-boundary__canvas:after {
1306
- content: " ";
1307
- display: block;
1308
- position: absolute;
1309
- inset: 0;
1310
- z-index: 600;
1311
- pointer-events: all;
1312
- }
1313
- .tl-error-boundary__content {
1314
- width: -moz-fit-content;
1315
- width: fit-content;
1316
- height: -moz-fit-content;
1317
- height: fit-content;
1318
- max-width: 100%;
1319
- width: 400px;
1320
- max-height: 100%;
1321
- background-color: var(--color-panel);
1322
- padding: 16px;
1323
- border-radius: 16px;
1324
- box-shadow: var(--shadow-2);
1325
- font-size: 14px;
1326
- font-weight: 400;
1327
- display: flex;
1328
- flex-direction: column;
1329
- overflow: auto;
1330
- z-index: 600;
1331
- gap: 12px;
1332
- }
1333
- .tl-error-boundary__content__expanded {
1334
- width: 600px;
1335
- }
1336
- .tl-error-boundary__content h2 {
1337
- font-size: 16px;
1338
- margin: 0;
1339
- font-weight: 500;
1340
- }
1341
- .tl-error-boundary__content p {
1342
- line-height: 1.5;
1343
- margin: 0;
1344
- }
1345
- .tl-error-boundary__content pre {
1346
- background-color: var(--color-muted-2);
1347
- padding: var(--space-5);
1348
- border-radius: var(--radius-2);
1349
- overflow: auto;
1350
- font-size: 12px;
1351
- max-height: 320px;
1352
- }
1353
- .tl-error-boundary__content button {
1354
- background: none;
1355
- border: none;
1356
- font-family: inherit;
1357
- font-size: 14px;
1358
- font-weight: 500;
1359
- padding: var(--space-4);
1360
- border-radius: var(--radius-3);
1361
- cursor: var(--tl-cursor-pointer);
1362
- color: inherit;
1363
- background-color: transparent;
1364
- }
1365
- .tl-error-boundary__content button:hover {
1366
- background-color: var(--color-low);
1367
- }
1368
- .tl-error-boundary__content a {
1369
- color: var(--color-text-1);
1370
- font-weight: 500;
1371
- text-decoration: none;
1372
- }
1373
- .tl-error-boundary__content a:hover {
1374
- color: var(--color-text-1);
1375
- }
1376
- .tl-error-boundary__content__error {
1377
- position: relative;
1378
- }
1379
- .tl-error-boundary__content__error button {
1380
- position: absolute;
1381
- top: var(--space-2);
1382
- right: var(--space-2);
1383
- font-size: 12px;
1384
- padding: var(--space-2) var(--space-3);
1385
- background-color: var(--color-panel);
1386
- border-radius: var(--radius-1);
1387
- }
1388
- .tl-error-boundary__content__actions {
1389
- display: flex;
1390
- justify-content: space-between;
1391
- gap: var(--space-4);
1392
- margin: 0 0 0 -4px;
1393
- }
1394
- .tl-error-boundary__content__actions__group {
1395
- display: flex;
1396
- gap: var(--space-4);
1397
- }
1398
- .tl-error-boundary__content .tl-error-boundary__reset {
1399
- color: var(--color-warn);
1400
- }
1401
- .tl-error-boundary__content .tl-error-boundary__refresh {
1402
- background-color: var(--color-primary);
1403
- color: var(--color-selected-contrast);
1404
- }
1405
- .tl-error-boundary__content .tl-error-boundary__refresh:hover {
1406
- background-color: var(--color-primary);
1407
- opacity: .9;
1408
- }
1409
- @media screen and (pointer: coarse) {
1410
- .tl-canvas__mobile .tl-handle__hint {
1411
- opacity: 1;
1412
- }
1413
- }
1414
- .tl-hidden {
1415
- opacity: 0;
1416
- pointer-events: none;
1417
- }
1418
- .debug__ui-logger {
1419
- position: absolute;
1420
- top: 62px;
1421
- left: 16px;
1422
- color: #555;
1423
- font-size: 12px;
1424
- font-family: monospace;
1425
- }
1426
- .tl-container {
1427
- --layer-panels: 300;
1428
- --layer-menus: 400;
1429
- --layer-overlays: 500;
1430
- --layer-toasts: 650;
1431
- --layer-cursor: 700;
1432
- }
1433
- .tlui-button {
1434
- position: relative;
1435
- height: 40px;
1436
- min-width: 40px;
1437
- padding: 0 12px;
1438
- display: flex;
1439
- align-items: center;
1440
- justify-content: center;
1441
- background-color: transparent;
1442
- border: transparent;
1443
- color: currentColor;
1444
- cursor: pointer;
1445
- pointer-events: all;
1446
- font-weight: inherit;
1447
- font-family: inherit;
1448
- text-rendering: optimizeLegibility;
1449
- font-size: 12px;
1450
- gap: 0px;
1451
- color: var(--color-text-1);
1452
- text-shadow: 1px 1px var(--color-text-shadow);
1453
- }
1454
- .tlui-button:disabled {
1455
- color: var(--color-text-3);
1456
- text-shadow: none;
1457
- }
1458
- .tlui-button:disabled .tlui-kbd {
1459
- color: var(--color-text-3);
1460
- }
1461
- .tlui-button > * {
1462
- position: relative;
1463
- z-index: 1;
1464
- }
1465
- .tlui-button__label {
1466
- flex-grow: 2;
1467
- text-align: left;
1468
- }
1469
- .tlui-button:focus-visible:not(:hover) {
1470
- outline: 1px solid var(--color-selected);
1471
- outline-offset: -4px;
1472
- border-radius: var(--radius-3);
1473
- }
1474
- .tlui-button:after {
1475
- display: block;
1476
- content: "";
1477
- position: absolute;
1478
- inset: 4px;
1479
- background-color: transparent;
1480
- border-radius: var(--radius-2);
1481
- }
1482
- .tlui-button[aria-expanded=true]:after {
1483
- background-color: var(--color-muted-0);
1484
- opacity: 1;
1485
- }
1486
- @media (hover: hover) {
1487
- .tlui-button:after {
1488
- background-color: var(--color-muted-2);
1489
- opacity: 0;
1490
- }
1491
- .tlui-button:not(:disabled):hover:after {
1492
- opacity: 1;
1493
- }
1494
- }
1495
- .tlui-button__low {
1496
- border-radius: var(--radius-3);
1497
- background-color: var(--color-low);
1498
- }
1499
- @media (hover: hover) {
1500
- .tlui-button__low:after {
1501
- background-color: var(--color-muted-2);
1502
- }
1503
- }
1504
- .tlui-button__primary {
1505
- color: var(--color-primary);
1506
- }
1507
- .tlui-button__danger {
1508
- color: var(--color-warn);
1509
- text-shadow: none;
1510
- }
1511
- @media (hover: hover) {
1512
- .tlui-button__primary:not(:disabled, :focus-visible):hover {
1513
- color: var(--color-primary);
1514
- }
1515
- .tlui-button__danger:not(:disabled, :focus-visible):hover {
1516
- color: var(--color-warn);
1517
- text-shadow: none;
1518
- }
1519
- }
1520
- .tlui-button__panel {
1521
- position: relative;
1522
- }
1523
- .tlui-button__icon {
1524
- height: 40px;
1525
- width: 40px;
1526
- min-height: 40px;
1527
- min-width: 40px;
1528
- padding: 0;
1529
- }
1530
- .tlui-button__icon[data-state=hinted]:after {
1531
- background: var(--color-hint);
1532
- opacity: 1;
1533
- }
1534
- .tlui-button__icon[data-state=hinted]:not(:disabled, :focus-visible):active:after {
1535
- background: var(--color-hint);
1536
- opacity: 1;
1537
- }
1538
- @media (hover: hover) {
1539
- .tlui-button__icon:after {
1540
- inset: 4px;
1541
- border-radius: var(--radius-2);
1542
- }
1543
- .tlui-button__icon[data-state=hinted]:not(:disabled, :focus-visible):hover:after {
1544
- background: var(--color-hint);
1545
- }
1546
- }
1547
- .tlui-button__menu {
1548
- height: 40px;
1549
- min-height: 40px;
1550
- min-width: 128px;
1551
- width: 100%;
1552
- gap: 8px;
1553
- margin: -4px 0;
1554
- }
1555
- .tlui-button__menu:nth-child(1) {
1556
- margin-top: 0;
1557
- }
1558
- .tlui-button__menu:nth-last-child(1) {
1559
- margin-bottom: 0;
1560
- }
1561
- @media (hover: hover) {
1562
- .tlui-button__menu:after {
1563
- inset: 4px;
1564
- border-radius: var(--radius-2);
1565
- }
1566
- }
1567
- .tlui-button__checkbox {
1568
- padding-left: 8px;
1569
- }
1570
- .tlui-button__checkbox__indicator {
1571
- width: 15px;
1572
- height: 15px;
1573
- }
1574
- .tlui-toolbar__lock-button {
1575
- position: absolute;
1576
- top: 4px;
1577
- right: 0;
1578
- pointer-events: all;
1579
- height: 40px;
1580
- width: 40px;
1581
- min-width: 0px;
1582
- border-radius: var(--radius-2);
1583
- }
1584
- .tlui-toolbar__lock-button:after {
1585
- inset: 4px;
1586
- }
1587
- .tlui-button__tool {
1588
- position: relative;
1589
- height: 48px;
1590
- width: 48px;
1591
- margin-left: -2px;
1592
- margin-right: -2px;
1593
- }
1594
- .tlui-button__tool:nth-of-type(1) {
1595
- margin-left: 0;
1596
- }
1597
- .tlui-button__tool:nth-last-of-type(1) {
1598
- margin-right: 0;
1599
- }
1600
- @media (hover: hover) {
1601
- .tlui-button__tool:after {
1602
- inset: 4px;
1603
- border-radius: 8px;
1604
- }
1605
- .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):hover {
1606
- color: var(--color-selected-contrast);
1607
- }
1608
- }
1609
- .tlui-button__tool[data-state=selected] {
1610
- color: var(--color-selected-contrast);
1611
- }
1612
- .tlui-button__tool[data-state=selected]:not(:disabled, :focus-visible):active {
1613
- color: var(--color-selected-contrast);
1614
- }
1615
- .tlui-button__tool[data-state=selected]:not(:disabled):after {
1616
- background: var(--color-selected);
1617
- opacity: 1;
1618
- }
1619
- .tlui-button__help {
1620
- height: 32px;
1621
- width: 32px;
1622
- padding: 0;
1623
- min-width: 32px;
1624
- border-radius: 100%;
1625
- background-color: var(--color-low);
1626
- border: 1px solid var(--color-low-border);
1627
- }
1628
- @media (hover: hover) {
1629
- .tlui-button__help:after {
1630
- background-color: var(--color-muted-2);
1631
- border-radius: 100%;
1632
- inset: 4px;
1633
- }
1634
- }
1635
- .tlui-buttons__horizontal {
1636
- display: flex;
1637
- flex-direction: row;
1638
- }
1639
- .tlui-buttons__horizontal > * {
1640
- margin-left: -2px;
1641
- margin-right: -2px;
1642
- }
1643
- .tlui-buttons__horizontal > *:nth-child(1) {
1644
- margin-left: 0;
1645
- }
1646
- .tlui-buttons__horizontal > *:nth-last-child(1) {
1647
- margin-right: 0;
1648
- }
1649
- .tlui-buttons__grid {
1650
- display: grid;
1651
- grid-template-columns: repeat(4, auto);
1652
- grid-auto-flow: row;
1653
- overflow: hidden;
1654
- }
1655
- .tlui-buttons__grid > .tlui-button {
1656
- margin: -2px;
1657
- }
1658
- .tlui-buttons__grid > .tlui-button:nth-of-type(4n) {
1659
- margin-right: 0;
1660
- }
1661
- .tlui-buttons__grid > .tlui-button:nth-of-type(4n-3) {
1662
- margin-left: 0;
1663
- }
1664
- .tlui-buttons__grid > .tlui-button:nth-of-type(-n+4) {
1665
- margin-top: 0;
1666
- }
1667
- .tlui-buttons__grid > .tlui-button:nth-last-of-type(-n+4) {
1668
- margin-bottom: 0;
1669
- }
1670
- .tlui-zoom-menu__button__pct {
1671
- width: 60px;
1672
- min-width: 60px;
1673
- text-align: center;
1674
- }
1675
- @media (max-width: 640px) {
1676
- .tlui-button__tool {
1677
- height: 48px;
1678
- width: 44px;
1679
- }
1680
- .tlui-button__tool > .tlui-icon {
1681
- height: 16px;
1682
- width: 16px;
1683
- }
1684
- .tlui-kbd {
1685
- visibility: hidden;
1686
- }
1687
- .tlui-menu__group .tlui-button__icon-left {
1688
- display: none;
1689
- }
1690
- }
1691
- .tlui-layout {
1692
- position: relative;
1693
- display: grid;
1694
- grid-template-columns: 1fr;
1695
- grid-template-rows: minmax(0px, 1fr) auto;
1696
- grid-auto-rows: auto;
1697
- height: 100%;
1698
- max-height: 100%;
1699
- overflow: clip;
1700
- pointer-events: none;
1701
- -webkit-user-select: none;
1702
- -moz-user-select: none;
1703
- user-select: none;
1704
- contain: strict;
1705
- z-index: var(--layer-panels);
1706
- -webkit-transform: translate3d(0, 0, 0);
1707
- --sab: env(safe-area-inset-bottom);
1708
- }
1709
- .tlui-layout__top {
1710
- grid-column: 1;
1711
- grid-row: 1;
1712
- display: flex;
1713
- min-width: 0px;
1714
- justify-content: space-between;
1715
- }
1716
- .tlui-layout__top__left {
1717
- display: flex;
1718
- flex-direction: column;
1719
- align-items: flex-start;
1720
- justify-content: flex-start;
1721
- width: 100%;
1722
- height: 100%;
1723
- flex: 0 1 0;
1724
- }
1725
- .tlui-layout__top__right {
1726
- display: flex;
1727
- flex-direction: column;
1728
- align-items: flex-end;
1729
- justify-content: flex-start;
1730
- height: 100%;
1731
- flex: 0 0 auto;
1732
- min-width: 0px;
1733
- }
1734
- .scrollable,
1735
- .scrollable * {
1736
- pointer-events: all;
1737
- touch-action: auto;
1738
- overscroll-behavior: none;
1739
- }
1740
- .tlui-helper-buttons {
1741
- position: relative;
1742
- display: flex;
1743
- flex-direction: column;
1744
- justify-content: flex-start;
1745
- align-items: flex-start;
1746
- width: -moz-min-content;
1747
- width: min-content;
1748
- gap: var(--space-3);
1749
- margin: var(--space-2) var(--space-3);
1750
- white-space: nowrap;
1751
- pointer-events: none;
1752
- z-index: var(--layer-panels);
1753
- }
1754
- .tlui-icon {
1755
- flex-shrink: 0;
1756
- width: 18px;
1757
- height: 18px;
1758
- background-color: currentColor;
1759
- }
1760
- .tlui-icon__small {
1761
- width: 15px;
1762
- height: 15px;
1763
- }
1764
- .tlui-slider {
1765
- position: relative;
1766
- display: flex;
1767
- align-items: center;
1768
- -webkit-user-select: none;
1769
- -moz-user-select: none;
1770
- user-select: none;
1771
- touch-action: none;
1772
- }
1773
- .tlui-slider__container {
1774
- width: 100%;
1775
- padding: 0px var(--space-4);
1776
- }
1777
- .tlui-slider__track {
1778
- position: relative;
1779
- flex-grow: 1;
1780
- height: 44px;
1781
- cursor: pointer;
1782
- }
1783
- .tlui-slider__track:after {
1784
- display: block;
1785
- position: absolute;
1786
- top: calc(50% - 2px);
1787
- content: "";
1788
- height: 3px;
1789
- width: 100%;
1790
- background-color: var(--color-muted-1);
1791
- border-radius: 14px;
1792
- }
1793
- .tlui-slider__range {
1794
- position: absolute;
1795
- top: calc(50% - 2px);
1796
- left: 0;
1797
- height: 3px;
1798
- background-color: var(--color-selected);
1799
- border-radius: 14px;
1800
- }
1801
- .tlui-slider__thumb {
1802
- all: unset;
1803
- cursor: grab;
1804
- display: block;
1805
- width: 18px;
1806
- height: 18px;
1807
- position: relative;
1808
- top: -1px;
1809
- background-color: var(--color-panel);
1810
- border-radius: 999px;
1811
- box-shadow: inset 0 0 0 2px var(--color-text-1);
1812
- }
1813
- .tlui-slider__thumb:active {
1814
- cursor: grabbing;
1815
- box-shadow: inset 0 0 0 2px var(--color-text-1), var(--shadow-1);
1816
- }
1817
- .tlui-slider__thumb:focus-visible {
1818
- box-shadow: inset 0 0 0 2px var(--color-focus);
1819
- }
1820
- .tlui-kbd {
1821
- font-family: inherit;
1822
- font-size: 11px;
1823
- line-height: 11px;
1824
- display: grid;
1825
- justify-items: center;
1826
- grid-auto-flow: column;
1827
- grid-template-columns: auto;
1828
- grid-auto-columns: minmax(1em, auto);
1829
- gap: 1px;
1830
- align-self: bottom;
1831
- color: var(--color-text-1);
1832
- margin-left: var(--space-4);
1833
- }
1834
- .tlui-kbd > span {
1835
- width: 100%;
1836
- text-align: center;
1837
- display: inline;
1838
- margin: 0;
1839
- padding: 2px;
1840
- border-radius: 2px;
1841
- }
1842
- .tlui-kbd:not(:last-child) {
1843
- margin-right: var(--space-2);
1844
- }
1845
- .tlui-focus-button {
1846
- z-index: var(--layer-panels);
1847
- pointer-events: all;
1848
- }
1849
- .tlui-popover {
1850
- position: relative;
1851
- display: flex;
1852
- align-content: stretch;
1853
- }
1854
- .tlui-popover__content {
1855
- position: relative;
1856
- max-height: 75vh;
1857
- margin: 0;
1858
- border: none;
1859
- border-radius: var(--radius-3);
1860
- background-color: var(--color-panel);
1861
- box-shadow: var(--shadow-3);
1862
- z-index: var(--layer-menus);
1863
- overflow: hidden;
1864
- overflow-y: auto;
1865
- touch-action: auto;
1866
- overscroll-behavior: none;
1867
- scrollbar-width: none;
1868
- -ms-overflow-style: none;
1869
- }
1870
- .tlui-debug-panel {
1871
- background-color: var(--color-low);
1872
- width: 100%;
1873
- display: grid;
1874
- align-items: center;
1875
- grid-template-columns: 1fr auto auto;
1876
- justify-content: space-between;
1877
- padding-left: var(--space-4);
1878
- border-top: 1px solid var(--color-background);
1879
- font-size: 12px;
1880
- color: var(--color-text-1);
1881
- z-index: var(--layer-panels);
1882
- pointer-events: all;
1883
- }
1884
- .tlui-debug-panel__current-state {
1885
- white-space: nowrap;
1886
- }
1887
- .tlui-menu-zone {
1888
- position: relative;
1889
- z-index: var(--layer-panels);
1890
- width: -moz-fit-content;
1891
- width: fit-content;
1892
- border-right: 4px solid var(--color-background);
1893
- border-bottom: 4px solid var(--color-background);
1894
- border-bottom-right-radius: var(--radius-4);
1895
- background-color: var(--color-low);
1896
- }
1897
- .tlui-menu-zone *[data-state=open]:after {
1898
- background:
1899
- linear-gradient(
1900
- 180deg,
1901
- rgba(144, 144, 144, 0) 0%,
1902
- var(--color-muted-2) 100%);
1903
- }
1904
- .tlui-style-panel__wrapper {
1905
- box-shadow: var(--shadow-2);
1906
- border-radius: var(--radius-3);
1907
- pointer-events: all;
1908
- background-color: var(--color-panel);
1909
- height: -moz-fit-content;
1910
- height: fit-content;
1911
- max-height: 100%;
1912
- margin: 4px 8px;
1913
- touch-action: auto;
1914
- overscroll-behavior: none;
1915
- overflow-y: auto;
1916
- overflow-x: hidden;
1917
- color: var(--color-text);
1918
- }
1919
- .tlui-style-panel {
1920
- position: relative;
1921
- z-index: var(--layer-panels);
1922
- pointer-events: all;
1923
- width: 148px;
1924
- max-width: 148px;
1925
- }
1926
- .tlui-style-panel::-webkit-scrollbar {
1927
- display: none;
1928
- }
1929
- .tlui-style-panel .tlui-button.select {
1930
- width: 100%;
1931
- }
1932
- .tlui-style-panel__section {
1933
- display: flex;
1934
- position: relative;
1935
- flex-direction: column;
1936
- }
1937
- .tlui-style-panel__section:nth-of-type(n+2):not(:last-child) {
1938
- border-bottom: 1px solid var(--color-divider);
1939
- }
1940
- .tlui-style-panel__section:empty {
1941
- display: none;
1942
- }
1943
- .tlui-style-panel__section__common:not(:only-child) {
1944
- margin-bottom: 7px;
1945
- border-bottom: 1px solid var(--color-divider);
1946
- }
1947
- .tlui-style-panel__row {
1948
- display: flex;
1949
- }
1950
- .tlui-style-panel__row__extra-button {
1951
- margin-left: -2px;
1952
- }
1953
- .tlui-style-panel__double-select-picker__wrapper {
1954
- width: 100%;
1955
- max-width: 100%;
1956
- }
1957
- .tlui-style-panel__double-select-picker {
1958
- display: flex;
1959
- grid-template-columns: 1fr auto;
1960
- align-items: center;
1961
- padding-left: var(--space-4);
1962
- color: var(--color-text-1);
1963
- font-size: 12px;
1964
- }
1965
- .tlui-style-panel__double-select-picker-label {
1966
- text-overflow: ellipsis;
1967
- overflow: hidden;
1968
- white-space: nowrap;
1969
- flex-grow: 2;
1970
- max-width: 100%;
1971
- }
1972
- .tlui-style-panel__section *[data-state=open]:after {
1973
- background: var(--color-muted-0);
1974
- }
1975
- .tlui-input {
1976
- background: none;
1977
- margin: 0;
1978
- position: relative;
1979
- z-index: 1;
1980
- height: 40px;
1981
- max-height: 40px;
1982
- display: flex;
1983
- align-items: center;
1984
- justify-content: center;
1985
- font-family: inherit;
1986
- font-size: 12px;
1987
- font-weight: inherit;
1988
- color: var(--color-text-1);
1989
- padding: var(--space-4);
1990
- padding-left: 0;
1991
- border: none;
1992
- outline: none;
1993
- text-overflow: ellipsis;
1994
- width: 100%;
1995
- -webkit-user-select: all;
1996
- -moz-user-select: all;
1997
- user-select: all;
1998
- text-rendering: optimizeLegibility;
1999
- -webkit-user-select: auto !important;
2000
- }
2001
- .tlui-input__wrapper {
2002
- width: 100%;
2003
- height: 44px;
2004
- display: flex;
2005
- align-items: center;
2006
- gap: var(--space-4);
2007
- color: var(--color-text);
2008
- }
2009
- .tlui-input__wrapper > .tlui-icon {
2010
- flex-shrink: 0;
2011
- }
2012
- @media (max-width: 600px) {
2013
- @supports (-webkit-touch-callout: none) {
2014
- .tlui-input {
2015
- font-size: 16px;
2016
- }
2017
- }
2018
- }
2019
- .tlui-prompt__overlay {
2020
- background: var(--color-overlay);
2021
- position: fixed;
2022
- inset: 0;
2023
- display: grid;
2024
- place-items: center;
2025
- overflow-y: auto;
2026
- z-index: var(--layer-overlays);
2027
- }
2028
- .tlui-prompt__content {
2029
- cursor: default;
2030
- background-color: var(--color-panel);
2031
- box-shadow: var(--shadow-3);
2032
- border-radius: var(--radius-4);
2033
- padding: var(--space-5);
2034
- font-size: 12px;
2035
- overflow-y: auto;
2036
- min-width: 300px;
2037
- max-width: 80vw;
2038
- max-height: 80vh;
2039
- }
2040
- .tlui-prompt__actions {
2041
- border: none;
2042
- padding: 0;
2043
- margin: 0;
2044
- display: flex;
2045
- justify-content: flex-end;
2046
- margin-right: calc(-1 * var(--space-3));
2047
- margin-bottom: calc(-1 * var(--space-3));
2048
- }
2049
- .tlui-prompt__title {
2050
- margin: 0;
2051
- font-size: 12px;
2052
- }
2053
- .tlui-prompt__error {
2054
- color: #d10b0b;
2055
- display: flex;
2056
- gap: var(--space-2);
2057
- align-items: center;
2058
- }
2059
- .tlui-dialog__overlay {
2060
- position: absolute;
2061
- top: 0;
2062
- left: 0;
2063
- width: 100%;
2064
- height: 100%;
2065
- z-index: var(--layer-overlays);
2066
- background-color: var(--color-overlay);
2067
- pointer-events: all;
2068
- animation: fadeIn .12s ease-out;
2069
- display: grid;
2070
- place-items: center;
2071
- overflow-y: auto;
2072
- }
2073
- .tlui-dialog__content {
2074
- display: flex;
2075
- flex-direction: column;
2076
- position: relative;
2077
- cursor: default;
2078
- background-color: var(--color-panel);
2079
- box-shadow: var(--shadow-3);
2080
- border-radius: var(--radius-3);
2081
- font-size: 12px;
2082
- overflow: hidden;
2083
- min-width: 300px;
2084
- max-width: 80vw;
2085
- max-height: 80vh;
2086
- }
2087
- .tlui-dialog__header {
2088
- position: relative;
2089
- display: flex;
2090
- align-items: center;
2091
- flex: 0;
2092
- z-index: 999;
2093
- padding-left: var(--space-4);
2094
- color: var(--color-text);
2095
- height: 44px;
2096
- }
2097
- .tlui-dialog__header__title {
2098
- flex: 1;
2099
- font-weight: inherit;
2100
- font-size: 12px;
2101
- margin: 0;
2102
- color: var(--color-text-1);
2103
- }
2104
- .tlui-dialog__header__close {
2105
- justify-self: flex-end;
2106
- }
2107
- .tlui-dialog__body {
2108
- padding: var(--space-4) var(--space-4);
2109
- flex: 0 1;
2110
- overflow-y: auto;
2111
- overflow-x: hidden;
2112
- color: var(--color-text-1);
2113
- -moz-user-select: all;
2114
- user-select: all;
2115
- -webkit-user-select: text;
2116
- }
2117
- .tlui-dialog__footer {
2118
- position: relative;
2119
- z-index: 999;
2120
- }
2121
- .tlui-dialog__footer__actions {
2122
- display: flex;
2123
- align-items: center;
2124
- justify-content: flex-end;
2125
- }
2126
- .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n+2) {
2127
- margin-right: -4px;
2128
- }
2129
- .tlui-toolbar {
2130
- grid-column: 1 / span 3;
2131
- grid-row: 1;
2132
- display: flex;
2133
- align-items: center;
2134
- justify-content: center;
2135
- flex-grow: 2;
2136
- padding-bottom: calc(var(--space-3) + var(--sab));
2137
- }
2138
- .tlui-toolbar__inner {
2139
- position: relative;
2140
- width: -moz-fit-content;
2141
- width: fit-content;
2142
- display: flex;
2143
- gap: var(--space-3);
2144
- align-items: flex-end;
2145
- }
2146
- .tlui-toolbar__left {
2147
- width: -moz-fit-content;
2148
- width: fit-content;
2149
- }
2150
- .tlui-toolbar__extras {
2151
- position: relative;
2152
- z-index: 1;
2153
- width: 100%;
2154
- pointer-events: none;
2155
- top: 4px;
2156
- height: 48px;
2157
- }
2158
- .tlui-toolbar__extras__controls {
2159
- display: flex;
2160
- position: relative;
2161
- flex-direction: row;
2162
- z-index: 1;
2163
- background-color: var(--color-low);
2164
- border-top-left-radius: var(--radius-4);
2165
- border-top-right-radius: var(--radius-4);
2166
- border: 4px solid var(--color-background);
2167
- margin-left: 8px;
2168
- margin-right: 0;
2169
- pointer-events: all;
2170
- width: -moz-fit-content;
2171
- width: fit-content;
2172
- }
2173
- .tlui-toolbar__tools {
2174
- display: flex;
2175
- flex-direction: row;
2176
- background-color: var(--color-low);
2177
- border-radius: 11px;
2178
- z-index: var(--layer-panels);
2179
- pointer-events: all;
2180
- position: relative;
2181
- align-items: center;
2182
- background: var(--color-panel);
2183
- box-shadow: var(--shadow-2);
2184
- }
2185
- .tlui-toolbar__overflow {
2186
- width: 40px;
2187
- }
2188
- @media (max-width: 640px) {
2189
- .tlui-toolbar__overflow {
2190
- width: 32px;
2191
- padding: 0;
2192
- }
2193
- .tlui-toolbar *[data-state=open]:after {
2194
- background:
2195
- linear-gradient(
2196
- 0deg,
2197
- rgba(144, 144, 144, 0) 0%,
2198
- var(--color-muted-2) 100%);
2199
- }
2200
- }
2201
- .tlui-help-menu {
2202
- pointer-events: all;
2203
- position: absolute;
2204
- bottom: var(--space-2);
2205
- right: var(--space-2);
2206
- z-index: var(--layer-panels);
2207
- border: 4px solid var(--color-background);
2208
- border-radius: 100%;
2209
- }
2210
- .tlui-context-menu__move-to-page__name {
2211
- max-width: min(300px, 35vw);
2212
- overflow: hidden;
2213
- text-overflow: ellipsis;
2214
- }
2215
- .tlui-context-menu__move-to-page__name[data-disabled] {
2216
- color: var(--color-text-3);
2217
- pointer-events: none;
2218
- }
2219
- .tlui-menu {
2220
- z-index: var(--layer-menus);
2221
- height: -moz-fit-content;
2222
- height: fit-content;
2223
- width: -moz-fit-content;
2224
- width: fit-content;
2225
- max-height: 80vh;
2226
- border-radius: var(--radius-3);
2227
- pointer-events: all;
2228
- touch-action: auto;
2229
- overflow-y: auto;
2230
- overscroll-behavior: none;
2231
- background-color: var(--color-panel);
2232
- box-shadow: var(--shadow-3);
2233
- }
2234
- .tlui-menu::-webkit-scrollbar {
2235
- display: none;
2236
- }
2237
- .tlui-menu__arrow {
2238
- position: relative;
2239
- top: -1px;
2240
- fill: var(--color-panel);
2241
- stroke: var(--color-panel-contrast);
2242
- stroke-width: 1px;
2243
- }
2244
- .tlui-menu__group[data-size=large] {
2245
- min-width: initial;
2246
- }
2247
- .tlui-menu__group[data-size=medium] {
2248
- min-width: 144px;
2249
- }
2250
- .tlui-menu__group[data-size=small] {
2251
- min-width: 96px;
2252
- }
2253
- .tlui-menu__group[data-size=tiny] {
2254
- min-width: 0px;
2255
- }
2256
- .tlui-menu__group + .tlui-menu__group {
2257
- border-top: 1px solid var(--color-divider);
2258
- }
2259
- .tlui-menu__submenu__trigger[data-state=open]:not(:hover):after {
2260
- border-radius: var(--radius-1);
2261
- background:
2262
- linear-gradient(
2263
- 90deg,
2264
- rgba(144, 144, 144, 0) 0%,
2265
- var(--color-muted-2) 100%);
2266
- }
2267
- .tlui-menu__submenu__trigger[data-direction=left][data-state=open]:not(:hover):after {
2268
- border-radius: var(--radius-1);
2269
- background:
2270
- linear-gradient(
2271
- 270deg,
2272
- rgba(144, 144, 144, 0) 0%,
2273
- var(--color-muted-2) 100%);
2274
- }
2275
- .tlui-actions-menu {
2276
- max-height: calc(100vh - 150px);
2277
- }
2278
- .tlui-toast__viewport {
2279
- position: absolute;
2280
- inset: 0;
2281
- margin: 0;
2282
- display: flex;
2283
- align-items: flex-end;
2284
- justify-content: flex-end;
2285
- flex-direction: column;
2286
- gap: var(--space-3);
2287
- pointer-events: none;
2288
- padding: 0px var(--space-3) 64px 0px;
2289
- z-index: var(--layer-toasts);
2290
- }
2291
- .tlui-toast__viewport > * {
2292
- pointer-events: all;
2293
- }
2294
- .tlui-toast__icon {
2295
- padding-top: var(--space-4);
2296
- padding-left: var(--space-4);
2297
- color: var(--color-text-1);
2298
- }
2299
- .tlui-toast__container {
2300
- min-width: 200px;
2301
- display: flex;
2302
- flex-direction: row;
2303
- background-color: var(--color-panel);
2304
- box-shadow: var(--shadow-2);
2305
- border-radius: var(--radius-3);
2306
- font-size: 12px;
2307
- }
2308
- .tlui-toast__main {
2309
- flex-grow: 2;
2310
- max-width: 280px;
2311
- }
2312
- .tlui-toast__content {
2313
- padding: var(--space-4);
2314
- display: flex;
2315
- flex-direction: column;
2316
- gap: var(--space-3);
2317
- }
2318
- .tlui-toast__title {
2319
- font-weight: 700;
2320
- color: var(--color-text-1);
2321
- }
2322
- .tlui-toast__description {
2323
- color: var(--color-text-1);
2324
- padding: var(--space-3);
2325
- margin: 0;
2326
- padding: 0;
2327
- }
2328
- .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
2329
- padding-left: 0;
2330
- }
2331
- .tlui-toast__actions {
2332
- display: flex;
2333
- flex-direction: row;
2334
- justify-content: flex-start;
2335
- margin-left: 0;
2336
- }
2337
- .tlui-toast__close {
2338
- align-self: flex-end;
2339
- flex-shrink: 0;
2340
- }
2341
- @media (prefers-reduced-motion: no-preference) {
2342
- .tlui-toast__container[data-state=open] {
2343
- animation: slide-in .2s cubic-bezier(.785, .135, .15, .86);
2344
- }
2345
- .tlui-toast__container[data-state=closed] {
2346
- animation: hide .1s ease-in;
2347
- }
2348
- .tlui-toast__container[data-swipe=move] {
2349
- transform: translate(var(--radix-toast-swipe-move-x));
2350
- }
2351
- .tlui-toast__container[data-swipe=cancel] {
2352
- transform: translate(0);
2353
- transition: transform .2s ease-out;
2354
- }
2355
- .tlui-toast__container[data-swipe=end] {
2356
- animation: swipe-out .1s ease-out;
2357
- }
2358
- }
2359
- .tlui-layout__bottom {
2360
- grid-row: 2;
2361
- }
2362
- .tlui-layout__bottom__main {
2363
- width: 100%;
2364
- position: relative;
2365
- display: flex;
2366
- align-items: flex-end;
2367
- justify-content: center;
2368
- }
2369
- .tlui-navigation-zone {
2370
- display: flex;
2371
- width: -moz-min-content;
2372
- width: min-content;
2373
- flex-direction: column;
2374
- z-index: var(--layer-panels);
2375
- pointer-events: all;
2376
- position: absolute;
2377
- left: 0;
2378
- bottom: 0;
2379
- }
2380
- .tlui-navigation-zone:before {
2381
- content: "";
2382
- display: block;
2383
- position: absolute;
2384
- z-index: -1;
2385
- inset: -4px -4px 0 0;
2386
- border-radius: 0;
2387
- border-top: 4px solid var(--color-background);
2388
- border-right: 4px solid var(--color-background);
2389
- border-top-right-radius: var(--radius-4);
2390
- background-color: var(--color-low);
2391
- }
2392
- .tlui-navigation-zone__toggle .tlui-icon {
2393
- opacity: .24;
2394
- }
2395
- .tlui-navigation-zone__toggle:active .tlui-icon {
2396
- opacity: 1;
2397
- }
2398
- @media (hover: hover) {
2399
- .tlui-navigation-zone__toggle:hover .tlui-icon {
2400
- opacity: 1;
2401
- }
2402
- }
2403
- .tlui-minimap {
2404
- width: 100%;
2405
- height: 96px;
2406
- min-height: 96px;
2407
- overflow: hidden;
2408
- padding: var(--space-3);
2409
- padding-top: 0;
2410
- }
2411
- .tlui-minimap__canvas {
2412
- position: relative;
2413
- width: 100%;
2414
- height: 100%;
2415
- }
2416
- @keyframes hide {
2417
- 0% {
2418
- opacity: 1;
2419
- }
2420
- to {
2421
- opacity: 0;
2422
- }
2423
- }
2424
- @keyframes slide-in {
2425
- 0% {
2426
- transform: translate(calc(100% + var(--space-3)));
2427
- }
2428
- to {
2429
- transform: translate(0);
2430
- }
2431
- }
2432
- @keyframes swipe-out {
2433
- 0% {
2434
- transform: translate(var(--radix-toast-swipe-end-x));
2435
- }
2436
- to {
2437
- transform: translate(calc(100% + var(--space-3)));
2438
- }
2439
- }
2440
- .tlui-page-menu__wrapper {
2441
- position: relative;
2442
- display: flex;
2443
- flex-direction: column;
2444
- width: 220px;
2445
- height: -moz-fit-content;
2446
- height: fit-content;
2447
- max-height: 50vh;
2448
- }
2449
- .tlui-page-menu__trigger {
2450
- width: 128px;
2451
- }
2452
- .tlui-page-menu__trigger > span {
2453
- flex-grow: 2;
2454
- margin-right: var(--space-4);
2455
- }
2456
- .tlui-page-menu__header {
2457
- display: flex;
2458
- flex-direction: row;
2459
- align-items: center;
2460
- width: 100%;
2461
- padding-left: var(--space-4);
2462
- border-bottom: 1px solid var(--color-divider);
2463
- }
2464
- .tlui-page-menu__header > .tlui-button:nth-of-type(1) {
2465
- margin-right: -4px;
2466
- }
2467
- .tlui-page-menu__header__title {
2468
- color: var(--color-text);
2469
- font-size: 12px;
2470
- flex-grow: 2;
2471
- }
2472
- .tlui-page-menu__name {
2473
- flex-grow: 2;
2474
- text-align: left;
2475
- overflow: hidden;
2476
- text-overflow: ellipsis;
2477
- white-space: nowrap;
2478
- }
2479
- .tlui-page-menu__list {
2480
- position: relative;
2481
- flex-direction: column;
2482
- max-height: 100%;
2483
- overflow-x: hidden;
2484
- overflow-y: auto;
2485
- touch-action: auto;
2486
- }
2487
- .tlui-page-menu__item {
2488
- display: flex;
2489
- flex-direction: row;
2490
- align-items: center;
2491
- justify-content: space-between;
2492
- gap: 0px;
2493
- }
2494
- .tlui-page-menu__item:nth-of-type(n+2) {
2495
- margin-top: -4px;
2496
- }
2497
- .tlui-page-menu__item__button:not(:only-child) {
2498
- flex-grow: 2;
2499
- margin-right: -2px;
2500
- }
2501
- .tlui-page-menu__item__button > span {
2502
- display: block;
2503
- flex-grow: 2;
2504
- text-align: left;
2505
- overflow: hidden;
2506
- text-overflow: ellipsis;
2507
- white-space: nowrap;
2508
- }
2509
- .tlui-page-menu__item__button__checkbox {
2510
- padding-left: 35px;
2511
- }
2512
- .tlui-page-menu__item__button__check {
2513
- position: absolute;
2514
- left: 0;
2515
- width: 24px;
2516
- padding-left: 10px;
2517
- display: inline-flex;
2518
- align-items: center;
2519
- justify-content: center;
2520
- color: var(--color-text);
2521
- }
2522
- .tlui-page_menu__item__sortable {
2523
- position: absolute;
2524
- top: 0;
2525
- left: 0;
2526
- width: 100%;
2527
- height: -moz-fit-content;
2528
- height: fit-content;
2529
- display: flex;
2530
- flex-direction: row;
2531
- align-items: center;
2532
- overflow: hidden;
2533
- z-index: 1;
2534
- }
2535
- .tlui-page_menu__item__sortable__title {
2536
- flex: 1;
2537
- }
2538
- .tlui-page_menu__item__sortable__title > .tlui-input__wrapper {
2539
- height: 100%;
2540
- }
2541
- .tlui-page_menu__item__sortable:focus-within {
2542
- z-index: 10;
2543
- }
2544
- .tlui-page_menu__item__sortable__handle {
2545
- touch-action: none;
2546
- width: 32px;
2547
- min-width: 0px;
2548
- height: 40px;
2549
- cursor: grab;
2550
- color: var(--color-text-3);
2551
- flex-shrink: 0;
2552
- margin-right: -9px;
2553
- }
2554
- .tlui-page_menu__item__sortable__handle:active {
2555
- cursor: grabbing;
2556
- }
2557
- .tlui-page-menu__item__input {
2558
- margin-left: 12px;
2559
- height: 100%;
2560
- }
2561
- .tlui-page_menu__item__submenu {
2562
- pointer-events: all;
2563
- flex: 0;
2564
- cursor: pointer;
2565
- display: none;
2566
- margin: 0 0 0 -2px;
2567
- }
2568
- .tlui-page_menu__item__submenu[data-isediting=true] {
2569
- display: block;
2570
- }
2571
- @media (hover: hover) {
2572
- .tlui-page_menu__item__submenu {
2573
- opacity: 0;
2574
- display: block;
2575
- }
2576
- .tlui-page_menu__item__submenu:hover,
2577
- .tlui-page-menu__item:focus-within > .tlui-page_menu__item__submenu,
2578
- .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu {
2579
- opacity: 1;
2580
- }
2581
- }
2582
- .tlui-edit-link-dialog {
2583
- display: flex;
2584
- flex-direction: column;
2585
- gap: var(--space-4);
2586
- color: var(--color-text);
2587
- }
2588
- .tlui-edit-link-dialog__input {
2589
- background-color: var(--color-muted-2);
2590
- flex-grow: 2;
2591
- border-radius: var(--radius-2);
2592
- padding: 0px var(--space-4);
2593
- }
2594
- .tlui-embed__spacer {
2595
- flex-grow: 2;
2596
- min-height: 0px;
2597
- margin-left: calc(-1 * var(--space-4));
2598
- margin-top: calc(-1 * var(--space-4));
2599
- pointer-events: none;
2600
- }
2601
- .tlui-embed-dialog__list {
2602
- display: flex;
2603
- flex-direction: column;
2604
- padding-bottom: var(--space-5);
2605
- }
2606
- .tlui-embed-dialog__item {
2607
- position: relative;
2608
- border: none;
2609
- background: none;
2610
- font-family: inherit;
2611
- display: flex;
2612
- text-align: left;
2613
- gap: var(--space-3);
2614
- margin: 0 -8px;
2615
- cursor: pointer;
2616
- padding: 0 4px;
2617
- align-items: center;
2618
- color: var(--color-text);
2619
- font-size: var(--font-size-1);
2620
- height: 44px;
2621
- }
2622
- @media (hover: hover) {
2623
- .tlui-embed-dialog__item:not(:disabled, :focus-visible):hover:after {
2624
- display: block;
2625
- content: "";
2626
- position: absolute;
2627
- inset: 4px;
2628
- background-color: var(--color-muted-2);
2629
- border-radius: var(--radius-1);
2630
- }
2631
- }
2632
- .tlui-embed-dialog__item__image {
2633
- width: 24px;
2634
- height: 24px;
2635
- display: flex;
2636
- align-items: center;
2637
- justify-content: center;
2638
- background-size: contain;
2639
- background-repeat: no-repeat;
2640
- background-position: center center;
2641
- }
2642
- .tlui-embed-dialog__enter {
2643
- display: flex;
2644
- flex-direction: column;
2645
- gap: var(--space-4);
2646
- color: var(--color-text-1);
2647
- }
2648
- .tlui-embed-dialog__input {
2649
- background-color: var(--color-muted-2);
2650
- flex-grow: 2;
2651
- border-radius: var(--radius-2);
2652
- padding: 0px var(--space-4);
2653
- }
2654
- .tlui-embed-dialog__warning {
2655
- color: var(--color-warn);
2656
- text-shadow: none;
2657
- }
2658
- .tlui-embed-dialog__instruction__link {
2659
- display: flex;
2660
- gap: var(--space-1);
2661
- margin-top: var(--space-4);
2662
- }
2663
- .tlui-embed-dialog__enter a {
2664
- color: var(--color-text-1);
2665
- }
2666
- .tlui-following-indicator {
2667
- display: block;
2668
- position: absolute;
2669
- inset: 0;
2670
- border-width: 2px;
2671
- border-style: solid;
2672
- z-index: var(--layer-following-indicator);
2673
- pointer-events: none;
2674
- }
2675
- .tlui-offline-indicator {
2676
- display: flex;
2677
- flex-direction: row;
2678
- gap: var(--space-3);
2679
- color: var(--color-text);
2680
- background-color: var(--color-low);
2681
- border: 3px solid var(--color-background);
2682
- padding: 0px var(--space-5);
2683
- height: 42px;
2684
- align-items: center;
2685
- justify-content: center;
2686
- border-radius: 99px;
2687
- opacity: 0;
2688
- animation: fade-in;
2689
- animation-duration: .12s;
2690
- animation-delay: 2s;
2691
- animation-fill-mode: forwards;
2692
- }
2693
- .tlui-shortcuts-dialog__header {
2694
- border-bottom: 1px solid var(--color-divider);
2695
- }
2696
- .tlui-shortcuts-dialog__body {
2697
- position: relative;
2698
- -moz-columns: 1;
2699
- columns: 1;
2700
- -moz-column-gap: var(--space-9);
2701
- column-gap: var(--space-9);
2702
- pointer-events: all;
2703
- touch-action: auto;
2704
- }
2705
- @media (min-width: 475px) {
2706
- .tlui-shortcuts-dialog__body {
2707
- -moz-columns: 2;
2708
- columns: 2;
2709
- -moz-column-gap: var(--space-9);
2710
- column-gap: var(--space-9);
2711
- }
2712
- }
2713
- @media (min-width: 960px) {
2714
- .tlui-shortcuts-dialog__body {
2715
- -moz-columns: 3;
2716
- columns: 3;
2717
- -moz-column-gap: var(--space-9);
2718
- column-gap: var(--space-9);
2719
- }
2720
- }
2721
- .tlui-shortcuts-dialog__group {
2722
- -moz-column-break-inside: avoid;
2723
- break-inside: avoid-column;
2724
- padding-bottom: var(--space-6);
2725
- }
2726
- .tlui-shortcuts-dialog__group__title {
2727
- font-size: inherit;
2728
- font-weight: inherit;
2729
- margin: 0;
2730
- color: var(--color-text-3);
2731
- height: 32px;
2732
- display: flex;
2733
- align-items: center;
2734
- }
2735
- .tlui-shortcuts-dialog__group__content {
2736
- display: flex;
2737
- flex-direction: column;
2738
- color: var(--color-text-1);
2739
- }
2740
- .tlui-shortcuts-dialog__key-pair {
2741
- display: flex;
2742
- gap: var(--space-4);
2743
- align-items: center;
2744
- justify-content: space-between;
2745
- height: 32px;
2746
- }
2747
- .tlui-shortcuts-dialog__key-pair__key {
2748
- flex: 1;
2749
- font-size: 12px;
2750
- }
2751
- .tlui-navigation-zone,
2752
- .tlui-navigation-panel {
2753
- display: none;
2754
- }
2755
- .transparent-canvas {
2756
- --color-background: rgba(0, 0, 0, 0);
2757
- }
2758
- .tl-container {
2759
- --layer-background: 4;
2760
- --layer-grid: 5;
2761
- --layer-canvas: 6;
2762
- --layer-shapes: 7;
2763
- --layer-overlays: 8;
2764
- --layer-following-indicator: 12;
2765
- --layer-panels: 7;
2766
- --layer-menus: 8;
2767
- --layer-overlays: 9;
2768
- --layer-toasts: 10;
2769
- --layer-cursor: 11;
2770
- }
2771
- /*# sourceMappingURL=VBPicker-PYLU7FGM.css.map */