js-draw 0.25.0 → 1.0.0

package/dist/Editor.css

@@ -0,0 +1,1281 @@
+:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content > div > div {
+  padding: 5px;
+}
+:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content > div {
+  min-height: 0;
+}
+:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img {
+  max-width: min(50vw, 75%);
+  max-height: 50vh;
+  /* Center */
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+:root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row > button {
+  flex-grow: 1;
+  text-align: end;
+  max-width: 50%;
+  min-width: min(100%, 40px);
+}
+
+.toolbar-overflow-widget-overflow-list {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {
+  height: var(--toolbar-button-height);
+}
+
+.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {
+  flex-direction: row;
+}
+
+.toolbar-overflow-widget.horizontal > .toolbar-dropdown {
+  max-width: 100%;
+  left: 15px;
+  right: 15px;
+  /*
+   Override the default transform and margin-left.
+
+   Setting translate to none prevents the dropdown from being shifted off the
+   screen on window resize by dropdown-repositioning logic.
+  */
+  margin-left: 0 !important;
+  translate: none !important;
+  padding: 4px;
+}
+
+.toolbar-zoomLevelEditor {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.toolbar-zoomLevelEditor .zoomDisplay {
+  flex-grow: 1;
+}
+
+.toolbar-zoomLevelEditor button {
+  min-width: 48px;
+}
+
+.selection-format-menu.disabled {
+  opacity: 0.5;
+}
+
+.toolbar-document-properties-widget button.about-button {
+  width: 100%;
+  text-align: end;
+}
+
+.toolbar-thicknessSliderContainer {
+  display: flex;
+  flex-direction: row;
+}
+.toolbar-thicknessSliderContainer input {
+  flex-grow: 1;
+}
+
+/* Make color selection buttons fill their containing label */
+.toolbar-element .clr-field * {
+  cursor: pointer;
+}
+.toolbar-element .clr-field button {
+  width: 1.2em;
+  height: 1.2em;
+  top: 50%;
+  left: 0;
+  border-radius: 50%;
+  margin-left: 0;
+  margin-right: 0;
+}
+.toolbar-element .clr-field input {
+  opacity: 0;
+}
+
+.color-input-container {
+  display: inline-flex;
+  flex-direction: row;
+}
+.color-input-container.picker-open .clr-field {
+  pointer-events: none;
+}
+
+:root .color-input-container > button.pipetteButton {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  display: inline-flex;
+}
+
+.color-input-container .pipetteButton > svg {
+  width: 100%;
+}
+
+.color-input-container .pipetteButton .pickColorInstructions {
+  display: none;
+  font-size: 1em;
+  position: absolute;
+  margin-left: 30px;
+  background-color: var(--background-color-1);
+  border-radius: 30px;
+  padding: 4px;
+  opacity: 0;
+  transition: 0.2s ease opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .color-input-container .pipetteButton .pickColorInstructions {
+    transition: none;
+  }
+}
+
+.color-input-container .pipetteButton.active {
+  background-color: var(--selection-background-color);
+  --icon-color: var(--selection-foreground-color);
+}
+.color-input-container .pipetteButton.active .pickColorInstructions {
+  display: block;
+  opacity: 0.8;
+}
+
+.tool-dropdown-separator {
+  --border-color: rgba(100, 100, 100, 0.2);
+  --border-color: color-mix(in srgb, var(--foreground-color-1), rgba(0, 0, 0, 0) 80%);
+  border-top: 1px solid var(--border-color);
+  padding-left: 2px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.toolbar-element .toolbar--file-input-container {
+  display: flex;
+}
+.toolbar-element .toolbar--file-input-container > input[type=file] {
+  opacity: 0;
+  width: 0;
+  min-width: 0 !important;
+  max-width: 0;
+  height: 0;
+}
+.toolbar-element .toolbar--file-input-container > label {
+  display: block;
+  flex-grow: 1;
+  padding: 0 !important;
+  padding-bottom: 5px;
+  --active-border-color: rgba(100, 100, 100, 0.5);
+  --active-border-color: color-mix(
+  	in srgb, var(--foreground-color-1), transparent
+  );
+}
+.toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description {
+  background-color: var(--background-color-3);
+  color: var(--foreground-color-3);
+  border: 1px dashed var(--active-border-color);
+  padding: 10px;
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  --action-color: var(--primary-action-foreground-color);
+  --icon-color: var(--action-color);
+}
+.toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description > span {
+  white-space: pre-wrap;
+}
+.toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description > span > b {
+  color: var(--action-color);
+  cursor: pointer;
+}
+.toolbar-element .toolbar--file-input-container > label > .toolbar--file-input-description > .icon {
+  width: min(50vw, 42px);
+  height: min(50vw, 42px);
+  margin-bottom: 8px;
+  display: block;
+}
+.toolbar-element .toolbar--file-input-container > label:active, .toolbar-element .toolbar--file-input-container > label:hover, .toolbar-element .toolbar--file-input-container > label.drag-target {
+  --active-border-color: var(--foreground-color-1);
+}
+.toolbar-element .toolbar--file-input-container > label.drag-target > .toolbar--file-input-description {
+  border-width: 2px;
+}
+
+.toolbar-grid-selector {
+  position: relative;
+}
+.toolbar-grid-selector > div {
+  display: flex;
+  flex-direction: row;
+  max-width: 350px;
+  flex-wrap: wrap;
+  --button-size: 48px;
+}
+.toolbar-grid-selector .choice-button {
+  display: flex;
+  flex-direction: column-reverse;
+  box-sizing: border-box;
+  flex-shrink: 1;
+  margin: 2px;
+}
+.toolbar-grid-selector .choice-button:focus-within {
+  outline: 2px solid var(--foreground-color-1);
+}
+.toolbar-grid-selector .choice-button input {
+  opacity: 0;
+  height: 0;
+}
+.toolbar-grid-selector .choice-button label {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--button-size);
+  height: var(--button-size);
+  font-size: 0.7rem;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+}
+.toolbar-grid-selector .choice-button .icon {
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 100%;
+}
+.toolbar-grid-selector .choice-button.checked {
+  background-color: var(--selection-background-color);
+  color: var(--selection-foreground-color);
+}
+
+/* The *main* root toolbar element */
+.toolbar-root {
+  background-color: var(--background-color-1);
+  --icon-color: var(--foreground-color-1);
+  --toolbar-button-height: min(20vh, 60px);
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* Any root toolbar element */
+.toolbar-element {
+  z-index: 1;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.toolbar-element details > summary {
+  cursor: pointer;
+}
+
+.toolbar-element > .toolbar-toolContainer > .toolbar-button,
+.toolbar-element > .toolbar-toolContainer > * > button,
+.toolbar-element > .toolbar-buttonGroup > button,
+.toolbar-element > .toolbar-button {
+  white-space: pre;
+  height: var(--toolbar-button-height);
+}
+
+.toolbar-dropdown .toolbar-button > .toolbar-icon {
+  max-width: 50px;
+  width: 100%;
+}
+
+.toolbar-button.disabled {
+  filter: opacity(0.5) sepia(0.2);
+  cursor: unset;
+}
+
+.toolbar-button, .toolbar-element button {
+  cursor: pointer;
+  text-align: center;
+  border-radius: 6px;
+  border: none;
+  box-shadow: 0px 0px 2px var(--shadow-color);
+  transition: background-color 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease;
+}
+
+.toolbar-button,
+.toolbar-buttonGroup > button,
+.toolbar-toolContainer > * > button,
+.toolbar-root > button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-left: 3px;
+  padding-right: 3px;
+  min-width: 40px;
+  max-width: 105px;
+  width: min-content;
+  font-size: 1em;
+}
+
+.toolbar-button > label {
+  cursor: inherit;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Decrease the font size of labels in the main toolbar if they're long. */
+.toolbar-root > .toolbar-toolContainer > .toolbar-button > label.long-label {
+  font-size: 0.75em;
+}
+
+.toolbar-dropdown > .toolbar-toolContainer > button,
+.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
+  width: 6em;
+}
+
+.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
+  box-shadow: 0px 2px 4px var(--shadow-color);
+}
+
+.toolbar-root button:disabled {
+  cursor: inherit;
+  filter: opacity(0.5);
+}
+
+.toolbar-root .toolbar-icon {
+  flex-shrink: 1;
+  user-select: none;
+  width: 100%;
+  min-width: 20px;
+  min-height: 20px;
+}
+
+.toolbar-toolContainer.selected > .toolbar-button {
+  background-color: var(--selection-background-color);
+  color: var(--selection-foreground-color);
+  --icon-color: var(--selection-foreground-color);
+}
+
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
+  display: none;
+}
+
+.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
+  height: 15px;
+  transition: transform 0.25s ease;
+}
+
+.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {
+  transform: rotate(180deg);
+}
+
+.toolbar-dropdown.hidden,
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown:not(.hiding) {
+  display: none;
+}
+
+.toolbar-dropdown {
+  position: absolute;
+  padding: 15px;
+  padding-top: 5px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  max-height: 80vh;
+  max-width: fit-content;
+  /* Prevent overlap/being displayed under the undo/redo buttons */
+  z-index: 2;
+  background-color: var(--background-color-1);
+  box-shadow: 0px 3px 3px var(--shadow-color);
+}
+
+/* Animate showing/hiding the dropdown. Animations triggered in JavaScript. */
+@keyframes dropdown-transition-in {
+  0% {
+    opacity: 0;
+    transform: scale(1, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+@keyframes dropdown-transition-out {
+  0% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1, 0);
+  }
+}
+.toolbar-dropdown {
+  /* Ensure the animation begins from the correct location. */
+  transform-origin: top left;
+  --dropdown-show-animation: dropdown-transition-in;
+  --dropdown-hide-animation: dropdown-transition-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Disable toolbar animations if reducing motion */
+  .toolbar-dropdown {
+    --dropdown-show-animation: none;
+    --dropdown-hide-animation: none;
+  }
+  .toolbar-dropdown.hiding {
+    display: none;
+  }
+  /* Also disable arrow rotation */
+  .toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {
+    transition: none;
+  }
+  /* ...and background color animation. */
+  :root .toolbar-button, .toolbar-root button {
+    transition: none;
+  }
+}
+.toolbar-buttonGroup {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.toolbar-closeColorPickerOverlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  touch-action: none;
+  background-color: var(--background-color-1);
+  opacity: 0.3;
+  z-index: 2;
+}
+
+.toolbar-spacedList > * {
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.toolbar-indentedList {
+  padding-left: 10px;
+}
+
+@media print {
+  /* Hide all toolbar elements on print. */
+  .toolbar-element {
+    display: none;
+  }
+}
+@keyframes toolbar--edgemenu-transition-in {
+  from {
+    translate: 0 100%;
+  }
+  to {
+    translate: 0;
+  }
+}
+@keyframes toolbar--edgemenu-transition-out {
+  to {
+    translate: 0 100%;
+  }
+}
+@keyframes toolbar--edgemenu-container-transition-in {
+  from {
+    overflow-y: hidden;
+  }
+  to {
+    overflow-y: hidden;
+  }
+}
+@keyframes toolbar--edgemenu-container-transition-out {
+  from {
+    overflow-y: hidden;
+  }
+  to {
+    overflow-y: hidden;
+  }
+}
+.toolbar-edge-toolbar {
+  --toolbar-button-height: min(20vh, 48px);
+  --toolbar-button-size: var(--toolbar-button-height);
+  --label-hover-offset-size: calc(14px + var(--toolbar-button-height));
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: space-around;
+  --button-label-hover-offset-y: var(--label-hover-offset-size);
+  --button-label-hover-offset-x: 0;
+}
+@media screen and (min-width: 610px) {
+  .toolbar-edge-toolbar {
+    flex-wrap: nowrap;
+  }
+  .toolbar-edge-toolbar > .toolbar-action-row {
+    max-width: 50vw;
+  }
+}
+@media screen and (max-width: 700px) {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline {
+    font-size: 0.9em;
+  }
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button label {
+    opacity: 0;
+    animation: 0.2s linear hide-initially;
+  }
+  @keyframes hide-initially {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes rehide-label {
+    0% {
+      opacity: 0.8;
+    }
+    80% {
+      opacity: 0.8;
+    }
+    100% {
+      opacity: 0.1;
+    }
+  }
+  @keyframes show-label {
+    0% {
+      opacity: 0;
+    }
+    80% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.8;
+    }
+  }
+  @keyframes keep-label-hidden {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+@media screen and (max-width: 700px) and (hover: hover) {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:hover > label {
+    opacity: 0.8;
+    animation: 1s ease show-label;
+  }
+}
+@media screen and (max-width: 700px) {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:active > label {
+    opacity: 0.8;
+    animation: 0.5s ease show-label;
+  }
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:focus-visible > label {
+    animation: 1.5s ease rehide-label;
+    opacity: 0;
+  }
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button:has(:focus-visible) > label {
+    animation: 1.5s ease rehide-label;
+    opacity: 0;
+  }
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button > label {
+    opacity: 0;
+    position: absolute;
+    margin-top: var(--button-label-hover-offset-y);
+    margin-left: var(--button-label-hover-offset-x);
+    pointer-events: none;
+    background-color: var(--background-color-1);
+    color: var(--foreground-color-1);
+    border-radius: 25px;
+    padding: 10px;
+    transition: 0.2s ease opacity, 0.2s ease margin-top;
+  }
+}
+@media screen and (max-width: 700px) and (prefers-reduced-motion: reduce) {
+  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline .toolbar-button > label {
+    transition: none;
+  }
+}
+.toolbar-edge-toolbar > div.toolbar-element {
+  flex-direction: row;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  background-color: var(--background-color-2);
+  color: var(--foreground-color-2);
+  --icon-color: var(--foreground-color-2);
+  --extra-left-right-padding: 0px;
+}
+.toolbar-edge-toolbar > div.toolbar-element::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+.toolbar-edge-toolbar > div.toolbar-element::-webkit-scrollbar-thumb {
+  background-color: var(--shadow-color);
+}
+.toolbar-edge-toolbar > div.toolbar-element.toolbar-tool-row {
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-grow: 100;
+}
+.toolbar-edge-toolbar > div.toolbar-element.toolbar-action-row {
+  z-index: 2;
+  background-color: var(--background-color-3);
+  color: var(--foreground-color-3);
+  --icon-color: var(--foreground-color-3);
+}
+.toolbar-edge-toolbar > div.toolbar-element.has-scroll {
+  justify-content: start;
+  position: relative;
+  --button-label-hover-offset-y: 0;
+  --button-label-hover-offset-x: calc(0px - var(--label-hover-offset-size));
+}
+.toolbar-edge-toolbar > div.toolbar-element.has-scroll > :nth-child(1) {
+  --button-label-hover-offset-x: var(--label-hover-offset-size);
+}
+.toolbar-edge-toolbar .toolbar-toolContainer.selected > .toolbar-button {
+  background-color: var(--selection-background-color);
+  color: var(--selection-foreground-color);
+  --icon-color: var(--selection-foreground-color);
+}
+.toolbar-edge-toolbar .toolbar-button {
+  box-sizing: border-box;
+  background-color: transparent;
+}
+.toolbar-edge-toolbar .toolbar-button .toolbar-showHideDropdownIcon {
+  flex-shrink: 0.01;
+  height: 12px;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer {
+  order: 1;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer.label-inline {
+  flex-grow: 1;
+  display: flex;
+  --button-flex-direction: row;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left {
+  justify-content: end;
+  --button-flex-direction: row-reverse;
+  order: 100;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left > .toolbar-button > .toolbar-icon {
+  margin-left: 10px;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right {
+  order: -1;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer.label-inline > .toolbar-button {
+  width: auto;
+  flex-direction: var(--button-flex-direction);
+}
+.toolbar-edge-toolbar .toolbar-toolContainer.label-inline > .toolbar-button > .toolbar-icon {
+  height: 100%;
+  margin-right: 10px;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button {
+  width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
+  height: var(--toolbar-button-size);
+}
+@keyframes rehide-label {
+  0% {
+    opacity: 0.8;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
+@keyframes show-label {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.8;
+  }
+}
+@keyframes keep-label-hidden {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@media (hover: hover) {
+  .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover > label {
+    opacity: 0.8;
+    animation: 1s ease show-label;
+  }
+}
+.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active > label {
+  opacity: 0.8;
+  animation: 0.5s ease show-label;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible > label {
+  animation: 1.5s ease rehide-label;
+  opacity: 0;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:has(:focus-visible) > label {
+  animation: 1.5s ease rehide-label;
+  opacity: 0;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button > label {
+  opacity: 0;
+  position: absolute;
+  margin-top: var(--button-label-hover-offset-y);
+  margin-left: var(--button-label-hover-offset-x);
+  pointer-events: none;
+  background-color: var(--background-color-1);
+  color: var(--foreground-color-1);
+  border-radius: 25px;
+  padding: 10px;
+  transition: 0.2s ease opacity, 0.2s ease margin-top;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button > label {
+    transition: none;
+  }
+}
+.toolbar-edge-toolbar > div > .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
+  display: block;
+  visibility: hidden;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button {
+  margin: 0;
+  border-radius: 0;
+  padding: 8px;
+  box-shadow: none;
+}
+.toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button.has-dropdown {
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 0px;
+}
+
+.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container {
+  height: 0;
+  background-color: transparent;
+  opacity: 0.9;
+}
+.imageEditorContainer.pipette--color-selection-in-progress .toolbar-edgemenu-container .toolbar-edgemenu {
+  position: absolute;
+}
+
+.toolbar-edgemenu-container {
+  background-color: var(--background-color-transparent);
+  transition: 0.15s ease-in-out height, 0.15s ease-in-out background-color, 0.2s ease-in-out opacity;
+  position: absolute;
+  width: var(--editor-current-width-px);
+  height: var(--editor-current-height-px);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  z-index: 2;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toolbar-edgemenu-container {
+    transition: none;
+  }
+}
+.toolbar-edgemenu-container.dropdown-below-edge {
+  overflow-y: hidden;
+}
+.toolbar-edgemenu-container button {
+  font-size: 1.2em;
+  box-shadow: none;
+  border: none;
+  padding: 10px;
+  color: var(--foreground-color-1);
+  transition: 0.2s ease box-shadow;
+  font-weight: bold;
+  color: var(--primary-action-foreground-color);
+}
+.toolbar-edgemenu-container button:hover {
+  box-shadow: 0 1px 2px var(--shadow-color);
+}
+.toolbar-edgemenu-container .toolbar-grid-selector .choice-button {
+  --button-label-hover-offset-y: var(--button-size);
+}
+@keyframes rehide-label {
+  0% {
+    opacity: 0.8;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
+@keyframes show-label {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.8;
+  }
+}
+@keyframes keep-label-hidden {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@media (hover: hover) {
+  .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover > label > .button-label-text {
+    opacity: 0.8;
+    animation: 1s ease show-label;
+  }
+}
+.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active > label > .button-label-text {
+  opacity: 0.8;
+  animation: 0.5s ease show-label;
+}
+.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible > label > .button-label-text {
+  animation: 1.5s ease rehide-label;
+  opacity: 0;
+}
+.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:has(:focus-visible) > label > .button-label-text {
+  animation: 1.5s ease rehide-label;
+  opacity: 0;
+}
+.toolbar-edgemenu-container .toolbar-grid-selector .choice-button > label > .button-label-text {
+  opacity: 0;
+  position: absolute;
+  margin-top: var(--button-label-hover-offset-y);
+  margin-left: var(--button-label-hover-offset-x);
+  pointer-events: none;
+  background-color: var(--background-color-1);
+  color: var(--foreground-color-1);
+  border-radius: 25px;
+  padding: 10px;
+  transition: 0.2s ease opacity, 0.2s ease margin-top;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toolbar-edgemenu-container .toolbar-grid-selector .choice-button > label > .button-label-text {
+    transition: none;
+  }
+}
+
+.toolbar-edgemenu-container .toolbar-edgemenu {
+  --toolbar-button-height: 48px;
+  touch-action: none;
+  user-select: none;
+  background-color: var(--background-color-2);
+  --icon-color: var(--foreground-color-2);
+  box-shadow: 0px 0px 1px var(--shadow-color);
+  padding-left: 10px;
+  padding-right: 10px;
+  width: min(400px, 100vw);
+  box-sizing: border-box;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  transition: translate 0.1s ease, padding-bottom 0.1s ease;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu input, .toolbar-edgemenu-container .toolbar-edgemenu textarea {
+  user-select: auto;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer {
+  display: inline-block;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu button {
+  background-color: transparent;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu > button.drag-elem {
+  height: 40px;
+  display: block;
+  cursor: ns-resize;
+  position: relative;
+  margin-top: -15px;
+  margin-bottom: 10px;
+  width: 100%;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu > button.drag-elem::before {
+  content: "";
+  background-color: var(--icon-color);
+  opacity: 0.2;
+  display: block;
+  position: relative;
+  top: 10px;
+  height: 5px;
+  border-radius: 5px;
+  width: min(80%, 40px);
+  margin-left: auto;
+  margin-right: auto;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer {
+  display: block;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button {
+  flex-direction: row;
+  max-width: unset;
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  box-shadow: none;
+  padding: 2px;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button > .toolbar-icon {
+  width: 25px;
+  height: 25px;
+  padding: 13px;
+  margin-right: 15px;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button label, .toolbar-edgemenu-container .toolbar-edgemenu .toolbar-toolContainer .toolbar-button > label.long-label {
+  font-size: 1em;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-nonbutton-controls-main-list {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList {
+  box-sizing: border-box;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div {
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  min-height: 35px;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > label {
+  padding-right: 35px;
+  min-width: 105px;
+  flex-shrink: 1;
+  box-sizing: border-box;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > input[type=checkbox] {
+  width: 20px;
+  height: 20px;
+}
+.toolbar-edgemenu-container .toolbar-edgemenu .toolbar-spacedList > div > input:not([type=checkbox]) {
+  flex-grow: 1;
+  min-width: 48px;
+  flex-shrink: 1;
+}
+
+.toolbar-dropdown-toolbar button, .toolbar-dropdown-toolbar .toolbar-button {
+  background-color: var(--background-color-2);
+  color: var(--foreground-color-2);
+  --icon-color: var(--foreground-color-2);
+}
+.toolbar-dropdown-toolbar, .toolbar-dropdown-toolbar .toolbar-dropdown {
+  background-color: var(--background-color-3);
+  color: var(--foreground-color-3);
+}
+.toolbar-dropdown-toolbar .toolbar-spacedList > div > label {
+  padding-right: 10px;
+  min-width: 50px;
+}
+.toolbar-dropdown-toolbar .clr-field button {
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 0;
+  border-radius: 5px;
+}
+.toolbar-dropdown-toolbar .toolbar-grid-selector > div {
+  --button-size: 57px;
+}
+.toolbar-dropdown-toolbar .toolbar-dropdown > div > .toolbar-toolContainer {
+  display: inline-block;
+}
+
+.selection-tool-selection-background {
+  background-color: var(--selection-background-color);
+  opacity: 0.5;
+  overflow: visible;
+  position: absolute;
+}
+
+.selection-tool-handle {
+  border: 1px solid var(--foreground-color-1);
+  background: var(--background-color-1);
+  position: absolute;
+  cursor: grab;
+}
+
+.selection-tool-handle.selection-tool-circle {
+  border-radius: 100%;
+}
+
+.overlay.handleOverlay {
+  height: 0;
+  overflow: visible;
+}
+
+@keyframes selection-duplicated-animation {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.02, 1.02);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+/* Do not run the animation when the user has disabled motion animations. */
+@media (prefers-reduced-motion: reduce) {
+  @keyframes selection-duplicated-animation {}
+}
+.find-tool-overlay {
+  /* Show at the bottom of the screen. */
+  order: -1;
+  position: absolute;
+}
+
+.js-draw-sound-ui-toggle {
+  width: 0px;
+  height: 0px;
+  overflow: hidden;
+}
+
+.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
+  overflow: visible;
+  z-index: 5;
+}
+
+.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {
+  opacity: 0.5;
+}
+
+.about-dialog-container dialog {
+  display: flex;
+  flex-direction: column;
+}
+.about-dialog-container dialog .close-button {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.about-dialog-container dialog .about-entry-container {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+  margin-left: 20px;
+  margin-right: 20px;
+  padding-bottom: 20px;
+  white-space: pre-wrap;
+  font-family: monospace;
+}
+.about-dialog-container dialog .about-entry-container > h2, .about-dialog-container dialog .about-entry-container > details > summary {
+  cursor: pointer;
+  margin-top: 15px;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+.about-dialog-container dialog .about-entry-container > h2 a, .about-dialog-container dialog .about-entry-container > details > summary a {
+  color: var(--foreground-color-1);
+  text-decoration: underline;
+}
+
+.dialog-container {
+  background-color: var(--background-color-transparent);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  position: absolute;
+  z-index: 3;
+  width: var(--editor-current-width-px);
+  height: var(--editor-current-height-px);
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+}
+.dialog-container dialog {
+  background-color: var(--background-color-1);
+  color: var(--foreground-color-1);
+  border: none;
+  outline: none;
+  box-shadow: 0 0 2px var(--shadow-color);
+  border-radius: 8px;
+  max-height: 90vh;
+  width: min(100%, 500px);
+  box-sizing: border-box;
+}
+
+/* Imports Coloris' CSS and makes additional changes to the color picker */
+#clr-picker {
+  --clr-slider-size: 30px;
+}
+
+/* Coloris: Try to avoid scrolling instead of updating the color input. */
+#clr-picker #clr-color-area, #clr-picker .clr_hue {
+  touch-action: none;
+}
+
+/* Increase space between inputs */
+#clr-picker .clr-alpha {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+/* Increase size of input thumb to make it easier to select colors. */
+#clr-picker.clr-picker input[type=range]::-moz-range-thumb {
+  width: var(--clr-slider-size);
+  height: var(--clr-slider-size);
+}
+
+/* Also apply to Chrome/iOS */
+#clr-picker.clr-picker input[type=range]::-webkit-slider-thumb {
+  /*
+   Note: This doesn't seem to take effect in iOS if it's combined with the
+         ::-moz-range-thumb rule above
+   */
+  width: var(--clr-slider-size);
+  height: var(--clr-slider-size);
+}
+
+#clr-picker.clr-picker input[type=range]::-webkit-slider-runnable-track {
+  height: var(--clr-slider-size);
+}
+
+#clr-picker.clr-picker input[type=range]::-moz-range-track {
+  height: var(--clr-slider-size);
+}
+
+/*
+Debugging: Uncommenting this rule makes Coloris' sliders more
+visible.
+
+#clr-picker.clr-picker input[type="range"] {
+	opacity: 0.5;
+	-webkit-appearance: auto;
+	appearance: auto;
+}
+*/
+/* Deafult colors for the editor */
+.imageEditorContainer {
+  --background-color-1: white;
+  --foreground-color-1: black;
+  --background-color-2: #f5f5f5;
+  --foreground-color-2: #2c303a;
+  --background-color-3: #e5e5e5;
+  --foreground-color-3: #1c202a;
+  --selection-background-color: #cbdaf1;
+  --selection-foreground-color: #2c303a;
+  --background-color-transparent: rgba(105, 100, 100, 0.5);
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --primary-action-foreground-color: #15b;
+}
+
+@media (prefers-color-scheme: dark) {
+  .imageEditorContainer {
+    --background-color-1: #151515;
+    --foreground-color-1: white;
+    --background-color-2: #222;
+    --foreground-color-2: #efefef;
+    --background-color-3: #272627;
+    --foreground-color-3: #eee;
+    --selection-background-color: #607;
+    --selection-foreground-color: white;
+    --shadow-color: rgba(250, 250, 250, 0.5);
+    --background-color-transparent: rgba(50, 50, 50, 0.5);
+    --primary-action-foreground-color: #7ae;
+  }
+}
+.imageEditorContainer {
+  color: var(--foreground-color-1);
+  font-family: system-ui, -apple-system, sans-serif;
+  background-color: var(--background-color-1);
+  width: 100%;
+  height: 400px;
+  min-height: 220px;
+  min-width: 100px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.imageEditorContainer input {
+  accent-color: var(--primary-action-foreground-color);
+}
+
+.imageEditorContainer .imageEditorRenderArea {
+  display: grid;
+  grid-template-columns: 1fr;
+  flex-grow: 2;
+  flex-shrink: 1;
+  min-height: 100px;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.imageEditorContainer .imageEditorRenderArea canvas {
+  /* Stack all canvases on top of each other */
+  grid-row: 1/1;
+  grid-column: 1/1;
+  touch-action: none;
+  /* Fill the container */
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  /* Allow the canvas to shrink (needed in Chrome) */
+  min-width: 0;
+  max-width: inherit;
+  min-height: 0px;
+  max-height: inherit;
+}
+
+.imageEditorContainer .loadingMessage {
+  position: fixed;
+  text-align: center;
+  font-size: 2em;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.imageEditorContainer .accessibilityAnnouncement {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.imageEditorContainer .textRendererOutputContainer {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.imageEditorContainer .textRendererOutputContainer:focus-within {
+  overflow: visible;
+  z-index: 5;
+}
+
+@media print {
+  .imageEditorContainer .loadingMessage {
+    display: none;
+  }
+  .imageEditorContainer .imageEditorRenderArea canvas {
+    width: 100%;
+    height: initial;
+  }
+}