@zsviczian/excalidraw 0.18.0-3 → 0.18.0-30

package/dist/styles.development.css

@@ -407,7 +407,7 @@
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
   --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
+  --color-surface-mid: #f6f6f9;
   --color-surface-low: #ececf4;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
@@ -499,7 +499,7 @@
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
   --color-logo-text: #e2dfff;
-  --color-surface-high: hsl(245, 10%, 21%);
+  --color-surface-high: #2e2d39;
   --color-surface-low: hsl(240, 8%, 15%);
   --color-surface-mid: hsl(240 6% 10%);
   --color-surface-lowest: hsl(0, 0%, 7%);
@@ -644,14 +644,16 @@
 .excalidraw .color-picker__top-picks {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .excalidraw .color-picker__button {
-  --radius: 0.25rem;
+  --radius: 4px;
+  --size: 1.375rem;
   padding: 0;
   margin: 0;
-  width: 1.35rem;
-  height: 1.35rem;
-  border: 1px solid var(--color-gray-30);
+  width: var(--size);
+  height: var(--size);
+  border: 0;
   border-radius: var(--radius);
   filter: var(--theme-filter);
   background-color: var(--swatch-color);
@@ -660,26 +662,43 @@
   font-family: inherit;
   box-sizing: border-box;
 }
-.excalidraw .color-picker__button:hover::after {
+.excalidraw .color-picker__button.has-outline {
+  box-shadow: inset 0 0 0 1px #d9d9d9;
+}
+.excalidraw .color-picker__button:hover:not(.active):not(.color-picker__button--large) {
+  transform: scale(1.075);
+}
+.excalidraw .color-picker__button:hover:not(.active).color-picker__button--large::after {
   content: "";
   position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
   box-shadow: 0 0 0 1px var(--color-gray-30);
-  border-radius: calc(var(--radius) + 1px);
+  border-radius: var(--radius);
   filter: var(--theme-filter);
 }
+.excalidraw .color-picker__button .color-picker__button-outline {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.excalidraw .color-picker__button .color-picker__button-outline svg {
+  color: var(--color-gray-60);
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .excalidraw .color-picker__button.active .color-picker__button-outline {
   position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
+  --offset: -1px;
+  top: var(--offset);
+  left: var(--offset);
+  right: var(--offset);
+  bottom: var(--offset);
   box-shadow: 0 0 0 1px var(--color-primary-darkest);
   z-index: 1;
-  border-radius: calc(var(--radius) + 1px);
+  border-radius: var(--radius);
   filter: var(--theme-filter);
 }
 .excalidraw .color-picker__button:focus-visible {
@@ -722,10 +741,11 @@
 }
 .excalidraw .color-picker__button__hotkey-label {
   position: absolute;
-  right: 4px;
-  bottom: 4px;
+  right: 5px;
+  bottom: 3px;
   filter: none;
   font-size: 11px;
+  font-weight: 500;
 }
 .excalidraw .color-picker {
   background: var(--popup-bg-color);
@@ -1201,7 +1221,7 @@
 .excalidraw .range-wrapper {
   position: relative;
   padding-top: 10px;
-  padding-bottom: 30px;
+  padding-bottom: 25px;
 }
 .excalidraw .range-input {
   width: 100%;
@@ -1483,6 +1503,22 @@
 .excalidraw-hyperlinkContainer__buttons {
   flex: 0 0 auto;
 }
+/*!********************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!./components/ConvertElementTypePopup.scss ***!
+  \********************************************************************************************************************************************************************************************************************/
+.excalidraw .ConvertElementTypePopup {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.2rem;
+  border-radius: 0.5rem;
+  background: var(--island-bg-color);
+  box-shadow: var(--shadow-island);
+  padding: 0.5rem;
+}
+.excalidraw .ConvertElementTypePopup:focus {
+  outline: none;
+}
 /*!***************************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!./components/DialogActionButton.scss ***!
   \***************************************************************************************************************************************************************************************************************/
@@ -1721,6 +1757,8 @@
   border-radius: var(--border-radius-lg);
   position: relative;
   transition: box-shadow 0.5s ease-in-out;
+  display: flex;
+  flex-direction: column;
 }
 .excalidraw .dropdown-menu--mobile .dropdown-menu-container.zen-mode {
   box-shadow: none;
@@ -1782,6 +1820,7 @@
   align-items: center;
   cursor: pointer;
   border-radius: var(--border-radius-md);
+  flex: 1 0 auto;
 }
 @media screen and (min-width: 1921px) {
   .excalidraw .dropdown-menu .dropdown-menu-item {
@@ -2548,7 +2587,7 @@
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
   --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
+  --color-surface-mid: #f6f6f9;
   --color-surface-low: #ececf4;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
@@ -2640,7 +2679,7 @@
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
   --color-logo-text: #e2dfff;
-  --color-surface-high: hsl(245, 10%, 21%);
+  --color-surface-high: #2e2d39;
   --color-surface-low: hsl(240, 8%, 15%);
   --color-surface-mid: hsl(240 6% 10%);
   --color-surface-lowest: hsl(0, 0%, 7%);
@@ -2973,6 +3012,7 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  overflow: hidden;
 }
 .excalidraw .command-palette-dialog .commands .item-selected {
   background-color: var(--color-surface-mid);
@@ -2992,9 +3032,9 @@
   height: 16px;
   margin-right: 6px;
 }
-/*!**************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!./element/ElementCanvasButtons.scss ***!
-  \**************************************************************************************************************************************************************************************************************/
+/*!*****************************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!./components/ElementCanvasButtons.scss ***!
+  \*****************************************************************************************************************************************************************************************************************/
 .excalidraw .excalidraw-canvas-buttons {
   position: absolute;
   box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.3);
@@ -3221,10 +3261,12 @@
 .excalidraw .drag-input-container {
   display: flex;
   width: 100%;
+  border-radius: var(--border-radius-lg);
 }
 .excalidraw .drag-input-container:focus-within {
   box-shadow: 0 0 0 1px var(--color-primary-darkest);
   border-radius: var(--border-radius-md);
+  background: transparent;
 }
 .excalidraw .disabled {
   opacity: 0.5;
@@ -3232,26 +3274,18 @@
 }
 .excalidraw .drag-input-label {
   flex-shrink: 0;
-  border: 1px solid var(--default-border-color);
-  border-right: 0;
-  padding: 0 0.5rem 0 0.75rem;
+  border: 0;
+  padding: 0 0.5rem 0 0.25rem;
   min-width: 1rem;
+  width: 1.5rem;
   height: 2rem;
-  box-sizing: border-box;
+  box-sizing: content-box;
   color: var(--popup-text-color);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
-:root[dir=ltr] .excalidraw .drag-input-label {
-  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-}
-:root[dir=rtl] .excalidraw .drag-input-label {
-  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-  border-right: 1px solid var(--default-border-color);
-  border-left: 0;
-}
 .excalidraw .drag-input {
   box-sizing: border-box;
   width: 100%;
@@ -3263,21 +3297,11 @@
   border: 0;
   outline: none;
   height: 2rem;
-  border: 1px solid var(--default-border-color);
-  border-left: 0;
   letter-spacing: 0.4px;
   padding: 0.5rem;
   padding-left: 0.25rem;
   appearance: none;
 }
-:root[dir=ltr] .excalidraw .drag-input {
-  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-}
-:root[dir=rtl] .excalidraw .drag-input {
-  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-  border-left: 1px solid var(--default-border-color);
-  border-right: 0;
-}
 .excalidraw .drag-input:focus-visible {
   box-shadow: none;
 }
@@ -3323,6 +3347,9 @@
 .exc-stats__row div + div {
   text-align: right;
 }
+.exc-stats__row:empty {
+  display: none;
+}
 .exc-stats__row--heading {
   text-align: center;
   font-weight: bold;
@@ -4286,18 +4313,44 @@
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
+  padding: 0 0.75rem;
   gap: 0.125rem;
 }
+.excalidraw .layer-ui__search .collapsible-items {
+  gap: 2px;
+}
+.excalidraw .layer-ui__search-result-title {
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 700;
+}
+.excalidraw .layer-ui__search-result-title .title-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-right: 0.25rem;
+}
+.excalidraw .layer-ui__search-result-title .title-icon svg g {
+  stroke-width: 1.25;
+}
+.excalidraw .layer-ui__divider {
+  width: 100%;
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+  position: relative;
+}
 .excalidraw .layer-ui__result-item {
   display: flex;
   align-items: center;
-  min-height: 2rem;
+  min-height: 1.875rem;
   flex: 0 0 auto;
   padding: 0.25rem 0.75rem;
   cursor: pointer;
   border: 1px solid transparent;
   outline: none;
-  margin: 0 0.75rem;
+  font-size: 16px;
   border-radius: var(--border-radius-md);
 }
 .excalidraw .layer-ui__result-item .text-icon {
@@ -5372,6 +5425,38 @@
     opacity: 1;
   }
 }
+/*!********************************************************************************************************************************************************************************************************!*\
+  !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!./components/UnlockPopup.scss ***!
+  \********************************************************************************************************************************************************************************************************/
+.excalidraw .UnlockPopup {
+  position: absolute;
+  z-index: var(--zIndex-interactiveCanvas);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  background: var(--island-bg-color);
+  box-shadow: var(--shadow-island);
+  padding: 0.8rem;
+  cursor: pointer;
+  color: var(--color-gray-60);
+}
+.excalidraw .UnlockPopup:focus {
+  outline: none;
+}
+.excalidraw .UnlockPopup svg {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-gray-60);
+}
+.excalidraw .UnlockPopup:hover svg {
+  color: var(--color-primary);
+}
+.excalidraw .UnlockPopup:active svg {
+  transform: scale(0.95);
+}
 /*!****************************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!./components/footer/FooterCenter.scss ***!
   \****************************************************************************************************************************************************************************************************************/
@@ -5858,7 +5943,7 @@
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
   --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
+  --color-surface-mid: #f6f6f9;
   --color-surface-low: #ececf4;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
@@ -5950,7 +6035,7 @@
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
   --color-logo-text: #e2dfff;
-  --color-surface-high: hsl(245, 10%, 21%);
+  --color-surface-high: #2e2d39;
   --color-surface-low: hsl(240, 8%, 15%);
   --color-surface-mid: hsl(240 6% 10%);
   --color-surface-lowest: hsl(0, 0%, 7%);
@@ -6071,14 +6156,14 @@ body.excalidraw-cursor-resize * {
   display: flex;
   justify-content: space-between;
 }
-.excalidraw .panelColumn {
+.excalidraw .selected-shape-actions {
   display: flex;
   flex-direction: column;
   row-gap: 0.75rem;
 }
-.excalidraw .panelColumn h3,
-.excalidraw .panelColumn legend,
-.excalidraw .panelColumn .control-label {
+.excalidraw .selected-shape-actions h3,
+.excalidraw .selected-shape-actions legend,
+.excalidraw .selected-shape-actions .control-label {
   margin: 0;
   margin-bottom: 0.25rem;
   font-size: 0.75rem;
@@ -6086,36 +6171,36 @@ body.excalidraw-cursor-resize * {
   font-weight: 400;
   display: block;
 }
-.excalidraw .panelColumn .control-label input {
+.excalidraw .selected-shape-actions .control-label input {
   display: block;
   width: 100%;
 }
-.excalidraw .panelColumn legend {
+.excalidraw .selected-shape-actions legend {
   padding: 0;
 }
-.excalidraw .panelColumn .iconSelectList {
+.excalidraw .selected-shape-actions .iconSelectList {
   flex-wrap: wrap;
   position: relative;
 }
-.excalidraw .panelColumn .buttonList {
+.excalidraw .selected-shape-actions .buttonList {
   flex-wrap: wrap;
   display: flex;
   column-gap: 0.5rem;
   row-gap: 0.5rem;
 }
-.excalidraw .panelColumn .buttonList label {
+.excalidraw .selected-shape-actions .buttonList label {
   font-size: 0.75rem;
 }
-.excalidraw .panelColumn .buttonList input[type=radio],
-.excalidraw .panelColumn .buttonList input[type=button] {
+.excalidraw .selected-shape-actions .buttonList input[type=radio],
+.excalidraw .selected-shape-actions .buttonList input[type=button] {
   opacity: 0;
   position: absolute;
   pointer-events: none;
 }
-.excalidraw .panelColumn .buttonList .iconRow {
+.excalidraw .selected-shape-actions .buttonList .iconRow {
   margin-top: 8px;
 }
-.excalidraw .panelColumn fieldset {
+.excalidraw .selected-shape-actions fieldset {
   margin: 0;
   padding: 0;
   border: none;
@@ -6214,10 +6299,6 @@ body.excalidraw-cursor-resize * {
   left: 0;
   right: 0;
   --bar-padding: calc(4 * var(--space-factor));
-  padding-top: max(var(--bar-padding), var(--sat,0));
-  padding-right: var(--sar, 0);
-  padding-bottom: var(--sab, 0);
-  padding-left: var(--sal, 0);
   z-index: 4;
   display: flex;
   align-items: flex-end;
@@ -6233,9 +6314,6 @@ body.excalidraw-cursor-resize * {
   flex-direction: column;
   pointer-events: var(--ui-pointerEvents);
 }
-.excalidraw .App-bottom-bar > .Island .panelColumn {
-  padding: 8px 8px 0 8px;
-}
 .excalidraw .App-toolbar {
   width: 100%;
 }
@@ -6263,6 +6341,9 @@ body.excalidraw-cursor-resize * {
   box-sizing: border-box;
   margin-bottom: var(--bar-padding);
 }
+.excalidraw .App-mobile-menu .selected-shape-actions {
+  padding: 8px 8px 0 8px;
+}
 .excalidraw .App-menu {
   display: grid;
   color: var(--icon-fill-color);