js-draw 1.20.3 → 1.21.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Henry Heino
+Copyright (c) 2023-2024 Henry Heino
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/Editor.css

@@ -1439,6 +1439,17 @@
   margin-top: calc(var(--editor-current-display-height-px) - var(--scrollbar-size));
 }
 
+.clipboard-error-dialog details > summary {
+  cursor: pointer;
+}
+.clipboard-error-dialog details[open] {
+  margin-bottom: 12px;
+}
+.clipboard-error-dialog textarea {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .selection-tool-selection-background {
   background-color: var(--selection-background-color);
   opacity: 0.5;
@@ -1498,6 +1509,24 @@
   cursor: nesw-resize;
 }
 
+.selection-tool-selection-menu > button {
+  max-height: var(--vertical-offset);
+  background-color: var(--background-color-1);
+  font-size: 14px;
+  color: var(--foreground-color-1);
+  border: 0.5px solid var(--foreground-color-1);
+  border-radius: 3px;
+  padding: 3px;
+  opacity: 0.8;
+  transition: 0.2s ease opacity;
+}
+.selection-tool-selection-menu > button:hover, .selection-tool-selection-menu > button:focus-visible {
+  background-color: var(--background-color-2);
+  color: var(--foreground-color-2);
+  cursor: pointer;
+  opacity: 1;
+}
+
 .overlay.handleOverlay {
   touch-action: none;
   direction: ltr;
@@ -1518,6 +1547,9 @@
 .overlay.handleOverlay .selection-tool-selection-inner-container.-empty {
   opacity: 0;
 }
+.overlay.handleOverlay .selection-tool-selection-inner-container.-hide-handles .selection-tool-handle {
+  display: none;
+}
 
 @keyframes selection-duplicated-animation {
   0% {
@@ -1561,50 +1593,123 @@
   opacity: 0.5;
 }
 
-.about-dialog-container dialog {
+@keyframes show-popup-menu-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.editor-popup-menu {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border: none;
+  animation: var(--hide-menu-animation-timeout) ease show-popup-menu-animation;
+  opacity: 1;
+  transition: var(--hide-menu-animation-timeout) ease opacity;
+  overflow: hidden;
+}
+.editor-popup-menu.-hide {
+  opacity: 0;
+}
+.editor-popup-menu > .content {
+  position: absolute;
+  left: var(--anchor-x);
+  top: var(--anchor-y);
   display: flex;
   flex-direction: column;
+  overflow: clip;
+  border-radius: 6px;
+  box-shadow: 0px 1px 2px var(--shadow-color);
 }
-.about-dialog-container dialog .close-button {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
+.editor-popup-menu::backdrop {
+  background: transparent;
 }
-.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;
+
+.editor-popup-menu-option {
+  display: flex;
+  justify-content: start;
+  cursor: pointer;
+  padding: 5px;
+  background-color: var(--background-color-1);
+  color: var(--foreground-color-1);
+  --icon-color: currentColor;
+  border: none;
+  font-size: 1em;
+}
+.editor-popup-menu-option:hover, .editor-popup-menu-option:focus-visible {
+  background-color: var(--background-color-2);
+  color: var(--foreground-color-2);
+}
+.editor-popup-menu-option > :first-child {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  margin-inline-start: 0em;
+  margin-inline-end: 0.25em;
+}
+
+.about-dialog-content > .scroll {
   white-space: pre-wrap;
   font-family: monospace;
 }
-.about-dialog-container dialog .about-entry-container > h2, .about-dialog-container dialog .about-entry-container > details > summary {
+.about-dialog-content > .scroll > details > summary {
   cursor: pointer;
+}
+.about-dialog-content > .scroll > h2, .about-dialog-content > .scroll > details > summary {
   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 {
+.about-dialog-content > .scroll > h2 a, .about-dialog-content > .scroll > details > summary a {
   color: var(--foreground-color-1);
   text-decoration: underline;
 }
 
-.dialog-container.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);
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.message-dialog-container dialog {
   display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
 }
-.dialog-container.dialog-container dialog {
+.message-dialog-container dialog.-closing {
+  opacity: 0;
+}
+.message-dialog-container dialog.-closing::backdrop {
+  opacity: 0;
+}
+.message-dialog-container dialog, .message-dialog-container dialog::backdrop {
+  transition: opacity 0.2s ease;
+  animation: fade-in 0.2s ease;
+}
+
+.message-dialog-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.message-dialog-content > .close {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.message-dialog-content > .scroll {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+  margin-left: 20px;
+  margin-right: 20px;
+  padding-bottom: 20px;
+}
+
+.dialog-container > dialog {
   background-color: var(--background-color-1);
   color: var(--foreground-color-1);
   border: none;
@@ -1615,6 +1720,11 @@
   width: min(100%, 500px);
   box-sizing: border-box;
 }
+.dialog-container > dialog::backdrop {
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  background-color: var(--background-color-transparent);
+}
 
 /* Imports Coloris' CSS and makes additional changes to the color picker */
 #clr-picker {