@netless/fastboard-ui 1.0.0-canary.9 → 1.0.1-beta.0

package/dist/index.css

@@ -1,888 +0,0 @@
-/* sass:./style.scss */
-.tippy-box[data-animation=fade][data-state=hidden] {
-  opacity: 0;
-}
-[data-tippy-root] {
-  max-width: calc(100vw - 10px);
-}
-.tippy-box {
-  position: relative;
-  background-color: #333;
-  color: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  line-height: 1.4;
-  white-space: normal;
-  outline: 0;
-  transition-property:
-    transform,
-    visibility,
-    opacity;
-}
-.tippy-box[data-placement^=top] > .tippy-arrow {
-  bottom: 0;
-}
-.tippy-box[data-placement^=top] > .tippy-arrow:before {
-  bottom: -7px;
-  left: 0;
-  border-width: 8px 8px 0;
-  border-top-color: initial;
-  transform-origin: center top;
-}
-.tippy-box[data-placement^=bottom] > .tippy-arrow {
-  top: 0;
-}
-.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
-  top: -7px;
-  left: 0;
-  border-width: 0 8px 8px;
-  border-bottom-color: initial;
-  transform-origin: center bottom;
-}
-.tippy-box[data-placement^=left] > .tippy-arrow {
-  right: 0;
-}
-.tippy-box[data-placement^=left] > .tippy-arrow:before {
-  border-width: 8px 0 8px 8px;
-  border-left-color: initial;
-  right: -7px;
-  transform-origin: center left;
-}
-.tippy-box[data-placement^=right] > .tippy-arrow {
-  left: 0;
-}
-.tippy-box[data-placement^=right] > .tippy-arrow:before {
-  left: -7px;
-  border-width: 8px 8px 8px 0;
-  border-right-color: initial;
-  transform-origin: center right;
-}
-.tippy-box[data-inertia][data-state=visible] {
-  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
-}
-.tippy-arrow {
-  width: 16px;
-  height: 16px;
-  color: #333;
-}
-.tippy-arrow:before {
-  content: "";
-  position: absolute;
-  border-color: transparent;
-  border-style: solid;
-}
-.tippy-content {
-  position: relative;
-  padding: 5px 9px;
-  z-index: 1;
-}
-.tippy-box[data-theme~=light] {
-  color: #26323d;
-  box-shadow:
-    0 0 20px 4px #9aa1b126,
-    0 4px 80px -8px #24282f40,
-    0 4px 4px -2px #5b5e6926;
-  background-color: #fff;
-}
-.tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow:before {
-  border-top-color: #fff;
-}
-.tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow:before {
-  border-bottom-color: #fff;
-}
-.tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow:before {
-  border-left-color: #fff;
-}
-.tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow:before {
-  border-right-color: #fff;
-}
-.tippy-box[data-theme~=light] > .tippy-backdrop {
-  background-color: #fff;
-}
-.tippy-box[data-theme~=light] > .tippy-svg-arrow {
-  fill: #fff;
-}
-.fastboard-icon.light .fastboard-icon-stroke-color {
-  stroke: var(--fastboard-color, #5d6066);
-}
-.fastboard-icon.light .fastboard-icon-fill-color {
-  fill: var(--fastboard-color, #5d6066);
-}
-.fastboard-icon.light.is-active .fastboard-icon-stroke-color {
-  stroke: var(--fastboard-active-color, #3381ff);
-}
-.fastboard-icon.light.is-active .fastboard-icon-fill-color {
-  fill: var(--fastboard-active-color, #3381ff);
-}
-.fastboard-icon.dark .fastboard-icon-stroke-color {
-  stroke: var(--fastboard-color, #7b7e84);
-}
-.fastboard-icon.dark .fastboard-icon-fill-color {
-  fill: var(--fastboard-color, #7b7e84);
-}
-.fastboard-icon.dark.is-active .fastboard-icon-stroke-color {
-  stroke: var(--fastboard-active-color, #2867cc);
-}
-.fastboard-icon.dark.is-active .fastboard-icon-fill-color {
-  fill: var(--fastboard-active-color, #2867cc);
-}
-.fastboard-redo-undo {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: system-ui;
-  pointer-events: auto;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-}
-.fastboard-redo-undo * {
-  box-sizing: inherit;
-}
-.fastboard-redo-undo.light {
-  color: var(--fastboard-color, #5d6066);
-  background-color: var(--fastboard-bg-color, rgba(255, 255, 255, .9));
-  border-color: var(--fastboard-border-color, #e5e8f0);
-}
-.fastboard-redo-undo.dark {
-  color: var(--fastboard-color, #7b7e84);
-  background-color: var(--fastboard-bg-color, rgba(20, 24, 30, .9));
-  border-color: var(--fastboard-border-color, #383b42);
-}
-.fastboard-redo-undo-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  background-color: #0000;
-  border-radius: 4px;
-  font-size: 0;
-  line-height: 1;
-  flex-shrink: 0;
-}
-.fastboard-redo-undo-btn svg,
-.fastboard-redo-undo-btn img {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-.fastboard-redo-undo-btn:disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}
-.fastboard-redo-undo-btn.light:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #ebf2ff);
-}
-.fastboard-redo-undo-btn.light:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #ebf2ff);
-}
-.fastboard-redo-undo-btn.dark:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #383b42);
-}
-.fastboard-redo-undo-btn.dark:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #383b42);
-}
-.fastboard-zoom-control {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: system-ui;
-  pointer-events: auto;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-}
-.fastboard-zoom-control * {
-  box-sizing: inherit;
-}
-.fastboard-zoom-control.light {
-  color: var(--fastboard-color, #5d6066);
-  background-color: var(--fastboard-bg-color, rgba(255, 255, 255, .9));
-  border-color: var(--fastboard-border-color, #e5e8f0);
-}
-.fastboard-zoom-control.dark {
-  color: var(--fastboard-color, #7b7e84);
-  background-color: var(--fastboard-bg-color, rgba(20, 24, 30, .9));
-  border-color: var(--fastboard-border-color, #383b42);
-}
-.fastboard-zoom-control-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  background-color: #0000;
-  border-radius: 4px;
-  font-size: 0;
-  line-height: 1;
-  flex-shrink: 0;
-}
-.fastboard-zoom-control-btn svg,
-.fastboard-zoom-control-btn img {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-.fastboard-zoom-control-btn:disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}
-.fastboard-zoom-control-btn.light:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #ebf2ff);
-}
-.fastboard-zoom-control-btn.light:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #ebf2ff);
-}
-.fastboard-zoom-control-btn.dark:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #383b42);
-}
-.fastboard-zoom-control-btn.dark:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #383b42);
-}
-.fastboard-zoom-control-text {
-  font-variant-numeric: tabular-nums;
-}
-.fastboard-page-control {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: system-ui;
-  pointer-events: auto;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-}
-.fastboard-page-control * {
-  box-sizing: inherit;
-}
-.fastboard-page-control.light {
-  color: var(--fastboard-color, #5d6066);
-  background-color: var(--fastboard-bg-color, rgba(255, 255, 255, .9));
-  border-color: var(--fastboard-border-color, #e5e8f0);
-}
-.fastboard-page-control.dark {
-  color: var(--fastboard-color, #7b7e84);
-  background-color: var(--fastboard-bg-color, rgba(20, 24, 30, .9));
-  border-color: var(--fastboard-border-color, #383b42);
-}
-.fastboard-page-control-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  background-color: #0000;
-  border-radius: 4px;
-  font-size: 0;
-  line-height: 1;
-  flex-shrink: 0;
-}
-.fastboard-page-control-btn svg,
-.fastboard-page-control-btn img {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-.fastboard-page-control-btn:disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}
-.fastboard-page-control-btn.light:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #ebf2ff);
-}
-.fastboard-page-control-btn.light:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #ebf2ff);
-}
-.fastboard-page-control-btn.dark:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #383b42);
-}
-.fastboard-page-control-btn.dark:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #383b42);
-}
-.fastboard-page-control-text {
-  font-variant-numeric: tabular-nums;
-}
-.fastboard-player-control {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: system-ui;
-  pointer-events: auto;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  width: 100%;
-}
-.fastboard-player-control * {
-  box-sizing: inherit;
-}
-.fastboard-player-control.light {
-  color: var(--fastboard-color, #5d6066);
-  background-color: var(--fastboard-bg-color, rgba(255, 255, 255, .9));
-  border-color: var(--fastboard-border-color, #e5e8f0);
-}
-.fastboard-player-control.dark {
-  color: var(--fastboard-color, #7b7e84);
-  background-color: var(--fastboard-bg-color, rgba(20, 24, 30, .9));
-  border-color: var(--fastboard-border-color, #383b42);
-}
-.fastboard-player-control-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  background-color: #0000;
-  border-radius: 4px;
-  font-size: 0;
-  line-height: 1;
-  flex-shrink: 0;
-  display: inline;
-}
-.fastboard-player-control-btn svg,
-.fastboard-player-control-btn img {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-.fastboard-player-control-btn:disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}
-.fastboard-player-control-btn.light:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #ebf2ff);
-}
-.fastboard-player-control-btn.light:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #ebf2ff);
-}
-.fastboard-player-control-btn.dark:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #383b42);
-}
-.fastboard-player-control-btn.dark:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #383b42);
-}
-.fastboard-player-control-btn.loading svg,
-.fastboard-player-control-btn.loading img {
-  animation: fastboard-player-control-rotate .5s linear infinite;
-}
-@keyframes fastboard-player-control-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.fastboard-player-control-btn.speed {
-  width: auto;
-  padding: 4px;
-  text-align: right;
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-}
-.fastboard-player-control-btn.is-active.light {
-  color: var(--fastboard-active-color, #3381ff);
-}
-.fastboard-player-control-btn.is-active.dark {
-  color: var(--fastboard-active-color, #2867cc);
-}
-.fastboard-player-control-speed-text,
-.fastboard-player-control-progress {
-  font-size: 14px;
-  font-variant-numeric: tabular-nums;
-  line-height: 16px;
-}
-.fastboard-player-control-progress {
-  display: inline-flex;
-  align-items: center;
-}
-.fastboard-player-control-panel.speed {
-  display: flex;
-  flex-direction: column;
-}
-.fastboard-toolbar {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  position: relative;
-  left: 0;
-  transition: left .5s cubic-bezier(.34, 1.56, .64, 1);
-  pointer-events: none;
-}
-.fastboard-toolbar.collapsed {
-  left: -100%;
-}
-.fastboard-toolbar-handler {
-  position: absolute;
-  left: 100%;
-  width: 17px;
-  font-size: 0;
-  border-radius: 3px;
-  cursor: pointer;
-  pointer-events: auto;
-}
-.fastboard-toolbar-handler:focus-visible {
-  outline: 2px solid -webkit-focus-ring-color;
-}
-.fastboard-toolbar-handler input[type=checkbox] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  appearance: none;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  opacity: 0;
-  z-index: -1;
-}
-.fastboard-toolbar-handler svg {
-  opacity: 0;
-  transition: opacity .5s 1s;
-  pointer-events: none;
-}
-.fastboard-toolbar-handler.light .fastboard-toolbar-handler-bg-color {
-  fill: var(--fastboard-bg-color, rgba(255, 255, 255, .9));
-}
-.fastboard-toolbar-handler.light .fastboard-toolbar-handler-border-color {
-  stroke: var(--fastboard-border-color, #e5e8f0);
-}
-.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-stroke-color {
-  stroke: var(--fastboard-color, #5d6066);
-}
-.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-fill-color {
-  fill: var(--fastboard-color, #5d6066);
-}
-.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-bg-color {
-  fill: var(--fastboard-bg-color, rgba(20, 24, 30, .9));
-}
-.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-border-color {
-  stroke: var(--fastboard-border-color, #383b42);
-}
-.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-stroke-color {
-  stroke: var(--fastboard-color, #7b7e84);
-}
-.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-fill-color {
-  fill: var(--fastboard-color, #7b7e84);
-}
-.fastboard-toolbar:hover .fastboard-toolbar-handler svg,
-.fastboard-toolbar.collapsed .fastboard-toolbar-handler svg {
-  opacity: 1;
-  transition: opacity .2s;
-}
-.fastboard-toolbar-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 4px;
-  width: 32px;
-  height: 32px;
-  background-color: #0000;
-  border-radius: 8px;
-  font-size: 0;
-  line-height: 1;
-  flex-shrink: 0;
-}
-.fastboard-toolbar-btn svg,
-.fastboard-toolbar-btn img {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-.fastboard-toolbar-btn:disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}
-.fastboard-toolbar-btn.light:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #ebf2ff);
-}
-.fastboard-toolbar-btn.light:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #ebf2ff);
-}
-.fastboard-toolbar-btn.dark:not(:disabled):hover {
-  background-color: var(--fastboard-hover-bg-color, #383b42);
-}
-.fastboard-toolbar-btn.dark:not(:disabled).is-active {
-  background-color: var(--fastboard-active-bg-color, #383b42);
-}
-.fastboard-slider {
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.fastboard-slider * {
-  box-sizing: inherit;
-}
-.fastboard-slider-track {
-  appearance: none;
-  background: rgba(0, 0, 0, 0);
-  border: 0;
-  border-radius: 26px;
-  flex: 1;
-  display: block;
-  height: 19px;
-  margin: 0;
-  width: 0;
-  min-width: 0;
-  padding: 0;
-  transition: box-shadow .3s ease;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-.fastboard-slider-track::-webkit-slider-runnable-track {
-  border: 0;
-  border-radius: 2.5px;
-  height: 5px;
-  transition: box-shadow .3s ease;
-  user-select: none;
-  background-color: #80808040;
-  -webkit-user-select: none;
-  background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
-}
-.fastboard-slider-track::-webkit-slider-thumb {
-  background: #fff;
-  border: 0;
-  border-radius: 100%;
-  box-shadow: 0 1px 1px #23292f26, 0 0 0 1px #23292f33;
-  width: 13px;
-  height: 13px;
-  position: relative;
-  transition: all .2s ease;
-  cursor: grab;
-  appearance: none;
-  margin-top: -4px;
-}
-.fastboard-slider-track::-moz-range-track {
-  border: 0;
-  border-radius: 2.5px;
-  height: 5px;
-  transition: box-shadow .3s ease;
-  user-select: none;
-  background-color: #80808040;
-  -webkit-user-select: none;
-}
-.fastboard-slider-track::-moz-range-thumb {
-  appearance: none;
-  background: #fff;
-  border: 0;
-  border-radius: 100%;
-  box-shadow: 0 1px 1px #23292f26, 0 0 0 1px #23292f33;
-  width: 13px;
-  height: 13px;
-  position: relative;
-  transition: all .2s ease;
-  cursor: grab;
-}
-.fastboard-slider-track::-moz-range-progress {
-  background: currentColor;
-  border-radius: 2.5px;
-  height: 5px;
-}
-.fastboard-slider-track::-ms-track {
-  border: 0;
-  border-radius: 2.5px;
-  height: 5px;
-  transition: box-shadow .3s ease;
-  user-select: none;
-  background-color: #80808040;
-  -webkit-user-select: none;
-  color: #0000;
-}
-.fastboard-slider-track::-ms-thumb {
-  appearance: none;
-  background: #fff;
-  border: 0;
-  border-radius: 100%;
-  box-shadow: 0 1px 1px #23292f26, 0 0 0 1px #23292f33;
-  width: 13px;
-  height: 13px;
-  position: relative;
-  transition: all .2s ease;
-  cursor: grab;
-  margin-top: 0;
-}
-.fastboard-slider-track::-ms-tooltip {
-  display: none;
-}
-.fastboard-slider-track::-moz-focus-outer {
-  border: 0;
-}
-.fastboard-slider-track.grabbing::-webkit-slider-thumb {
-  cursor: grabbing;
-}
-.fastboard-slider-track.light {
-  color: var(--fastboard-active-color, #3381ff);
-}
-.fastboard-slider-track.dark {
-  color: var(--fastboard-active-color, #2867cc);
-}
-.fastboard-toolbar-contents {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: system-ui;
-  pointer-events: auto;
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  padding: 2px 0;
-  gap: 0;
-  flex-direction: column;
-}
-.fastboard-toolbar-contents * {
-  box-sizing: inherit;
-}
-.fastboard-toolbar-contents.light {
-  color: var(--fastboard-color, #5d6066);
-  background-color: var(--fastboard-bg-color, rgba(255, 255, 255, .9));
-  border-color: var(--fastboard-border-color, #e5e8f0);
-}
-.fastboard-toolbar-contents.dark {
-  color: var(--fastboard-color, #7b7e84);
-  background-color: var(--fastboard-bg-color, rgba(20, 24, 30, .9));
-  border-color: var(--fastboard-border-color, #383b42);
-}
-.fastboard-toolbar-contents > .fastboard-toolbar-btn {
-  margin: 2px 4px;
-}
-.fastboard-toolbar-btn-interactive {
-  position: relative;
-}
-.fastboard-toolbar-triangle {
-  width: 0px;
-  height: 0px;
-  border-bottom: 3px solid;
-  border-left: 3px solid rgba(0, 0, 0, 0);
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-.fastboard-toolbar-btn:focus + .fastboard-toolbar-triangle {
-  opacity: 0;
-}
-.fastboard-toolbar-scrollable {
-  padding: 2px 4px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-.fastboard-toolbar-tooltip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.fastboard-toolbar-hotkey {
-  display: inline-flex;
-  margin-right: -4px;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  background-color: #ffffff1a;
-  border-radius: 4px;
-}
-.fastboard-toolbar-panel-wrapper {
-  display: none;
-}
-.fastboard-toolbar-panel {
-  display: flex;
-  flex-direction: column;
-}
-.fastboard-toolbar-panel-divider {
-  height: .5px;
-  width: 100%;
-  margin: 4px 0;
-  background-color: #ffffff26;
-}
-.fastboard-toolbar-slider.pencil-eraser-size {
-  width: 136px;
-}
-.fastboard-toolbar-colors,
-.fastboard-toolbar-shapes {
-  display: grid;
-  align-self: center;
-  grid-template: repeat(2, 1fr)/repeat(4, 1fr);
-  align-items: center;
-  justify-items: center;
-  gap: 4px;
-}
-.fastboard-toolbar-shape-btn,
-.fastboard-toolbar-color-btn {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.fastboard-toolbar-color-btn {
-  border: 1px solid rgba(0, 0, 0, 0);
-}
-.fastboard-toolbar-color-btn.light.is-active {
-  border-color: var(--fastboard-active-color, #3381ff);
-}
-.fastboard-toolbar-color-btn.dark.is-active {
-  border-color: var(--fastboard-active-color, #2867cc);
-}
-.fastboard-toolbar-color-item {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  pointer-events: none;
-}
-.fastboard-toolbar-panel.apps {
-  display: grid;
-  grid-template-columns: repeat(min(var(--n, 3), 3), minmax(max-content, 1fr));
-  gap: 4px;
-}
-.fastboard-toolbar-app-btn {
-  margin: 0;
-  border: 0;
-  border-radius: 2px;
-  padding: 4px 6px;
-  background-color: #0000;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  font-size: 0;
-}
-.fastboard-toolbar-app-btn:disabled {
-  opacity: .8;
-}
-.fastboard-toolbar-app-btn-icon {
-  width: 32px;
-  height: 32px;
-  pointer-events: none;
-}
-.fastboard-toolbar-app-btn-text {
-  font-size: 14px;
-  line-height: 1;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.fastboard-toolbar-app-btn.is-loading {
-  cursor: progress;
-}
-.fastboard-toolbar-app-btn.is-failed {
-  cursor: not-allowed;
-  opacity: .5;
-}
-.fastboard-toolbar-app-btn:not(:disabled, .is-loading, .is-failed):hover.light {
-  cursor: pointer;
-  background-color: var(--fastboard-hover-bg-color, #ebf2ff);
-}
-.fastboard-toolbar-app-btn-text.light {
-  color: var(--fastboard-color, #5d6066);
-}
-.fastboard-toolbar-app-btn:not(:disabled, .is-loading, .is-failed):hover.dark {
-  cursor: pointer;
-  background-color: var(--fastboard-hover-bg-color, #383b42);
-}
-.fastboard-toolbar-app-btn-text.dark {
-  color: var(--fastboard-color, #7b7e84);
-}
-.fastboard-root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.fastboard-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.fastboard-left {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  bottom: 50px;
-  top: 8px;
-  left: 0;
-  z-index: 200;
-  pointer-events: none;
-}
-.fastboard-left .fastboard-toolbar {
-  padding-left: 8px;
-}
-.fastboard-bottom-left,
-.fastboard-bottom,
-.fastboard-bottom-right {
-  display: flex;
-  gap: 10px;
-  position: absolute;
-  bottom: 8px;
-  left: 8px;
-  z-index: 200;
-  pointer-events: none;
-}
-.fastboard-bottom-right {
-  left: auto;
-  right: 8px;
-}
-.fastboard-bottom {
-  right: 8px;
-}
-.fastboard-left.hidden *,
-.fastboard-bottom.hidden *,
-.fastboard-bottom-left.hidden *,
-.fastboard-bottom-right.hidden * {
-  opacity: 0;
-  pointer-events: none;
-}
-.fastboard-tip {
-  font-family: inherit;
-  color: #d5d9e0;
-  background-color: #03060d;
-}
-.fastboard-tip[data-placement^=right] > .tippy-arrow:before {
-  top: 4px;
-  border-width: 4px;
-  border-right-color: #03060d;
-}
-.fastboard-tip[data-placement^=top] > .tippy-arrow:before {
-  left: 4px;
-  border-width: 4px;
-  border-top-color: #03060d;
-}
-.fastboard-panel .tippy-content {
-  padding: 8px;
-}
-.netless-whiteboard:focus-visible {
-  outline: none;
-}