@netless/fastboard-ui 1.0.0-canary.0 → 1.0.0-canary.10

package/dist/index.css

@@ -0,0 +1,888 @@
+/* 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;
+}