@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/dev/index.css

@@ -307,6 +307,8 @@
   --editor-container-padding: 1rem;
   --scrollbar-thumb: var(--button-gray-2);
   --scrollbar-thumb-hover: var(--button-gray-3);
+  --color-slider-track: hsl(240, 100%, 90%);
+  --color-slider-thumb: var(--color-gray-80);
   --modal-shadow:
     0px 100px 80px rgba(0, 0, 0, 0.07),
     0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
@@ -452,6 +454,7 @@
   --avatar-border-color: var(--color-gray-85);
   --scrollbar-thumb: #343a40;
   --scrollbar-thumb-hover: #495057;
+  --color-slider-track: hsl(244, 23%, 39%);
   --color-selection: #3530c4;
   --color-icon-white: var(--color-gray-90);
   --color-primary: #a8a5ff;
@@ -1001,31 +1004,22 @@
   color: #000000;
 }
 
-/* components/Popover.scss */
-.excalidraw .popover {
-  position: absolute;
-  z-index: 10;
-  padding: 5px 0 5px;
-  outline: none;
-}
-
 /* components/IconPicker.scss */
 :export {
   themeFilter: invert(93%) hue-rotate(180deg);
   rightSidebarWidth: 302px;
 }
-.excalidraw .picker-container {
-  display: inline-block;
-  box-sizing: border-box;
-  margin-right: 0.25rem;
-}
 .excalidraw .picker {
+  padding: 0.5rem;
   background: var(--popup-bg-color);
   border: 0 solid rgba(255, 255, 255, 0.25);
-  box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 4px 2px;
+  box-shadow: var(--shadow-island);
   border-radius: 4px;
   position: absolute;
 }
+:root[dir=rtl] .excalidraw .picker {
+  padding: 0.4rem;
+}
 .excalidraw .picker-container button,
 .excalidraw .picker button {
   position: relative;
@@ -1064,43 +1058,15 @@
 .excalidraw .picker button {
   padding: 0.25rem 0.28rem 0.35rem 0.25rem;
 }
-.excalidraw .picker-triangle {
-  width: 0;
-  height: 0;
-  position: relative;
-  top: -10px;
-  z-index: 10;
-}
-:root[dir=ltr] .excalidraw .picker-triangle {
-  left: 12px;
-}
-:root[dir=rtl] .excalidraw .picker-triangle {
-  right: 12px;
-}
-.excalidraw .picker-triangle:before {
-  content: "";
-  position: absolute;
-  border-style: solid;
-  border-width: 0 9px 10px;
-  border-color: transparent transparent rgba(0, 0, 0, 0.1);
-  top: -1px;
-}
-.excalidraw .picker-triangle:after {
-  content: "";
-  position: absolute;
-  border-style: solid;
-  border-width: 0 9px 10px;
-  border-color: transparent transparent var(--popup-bg-color);
-}
 .excalidraw .picker-content {
-  padding: 0.5rem;
   display: grid;
-  grid-template-columns: repeat(3, auto);
+  grid-template-columns: repeat(4, auto);
   grid-gap: 0.5rem;
   border-radius: 4px;
 }
-:root[dir=rtl] .excalidraw .picker-content {
-  padding: 0.4rem;
+.excalidraw .picker-collapsible {
+  font-size: 0.75rem;
+  padding: 0.5rem 0;
 }
 .excalidraw .picker-keybinding {
   position: absolute;
@@ -1213,6 +1179,60 @@
   max-width: calc(2rem + 4 * var(--default-button-size));
 }
 
+/* components/Range.scss */
+:export {
+  themeFilter: invert(93%) hue-rotate(180deg);
+  rightSidebarWidth: 302px;
+}
+.excalidraw {
+  --slider-thumb-size: 16px;
+}
+.excalidraw .range-wrapper {
+  position: relative;
+  padding-top: 10px;
+  padding-bottom: 30px;
+}
+.excalidraw .range-input {
+  width: 100%;
+  height: 4px;
+  -webkit-appearance: none;
+  background: var(--color-slider-track);
+  border-radius: 2px;
+  outline: none;
+}
+.excalidraw .range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+  background: var(--color-slider-thumb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+.excalidraw .range-input::-moz-range-thumb {
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+  background: var(--color-slider-thumb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+.excalidraw .value-bubble {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: var(--text-primary-color);
+}
+.excalidraw .zero-label {
+  position: absolute;
+  bottom: 0;
+  left: 4px;
+  font-size: 12px;
+  color: var(--text-primary-color);
+}
+
 /* components/Tooltip.scss */
 :export {
   themeFilter: invert(93%) hue-rotate(180deg);
@@ -2581,6 +2601,8 @@
   --editor-container-padding: 1rem;
   --scrollbar-thumb: var(--button-gray-2);
   --scrollbar-thumb-hover: var(--button-gray-3);
+  --color-slider-track: hsl(240, 100%, 90%);
+  --color-slider-thumb: var(--color-gray-80);
   --modal-shadow:
     0px 100px 80px rgba(0, 0, 0, 0.07),
     0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
@@ -2726,6 +2748,7 @@
   --avatar-border-color: var(--color-gray-85);
   --scrollbar-thumb: #343a40;
   --scrollbar-thumb-hover: #495057;
+  --color-slider-track: hsl(244, 23%, 39%);
   --color-selection: #3530c4;
   --color-icon-white: var(--color-gray-90);
   --color-primary: #a8a5ff;
@@ -3007,6 +3030,14 @@
   margin-right: 6px;
 }
 
+/* components/Popover.scss */
+.excalidraw .popover {
+  position: absolute;
+  z-index: 10;
+  padding: 5px 0 5px;
+  outline: none;
+}
+
 /* components/ContextMenu.scss */
 :export {
   themeFilter: invert(93%) hue-rotate(180deg);
@@ -3682,7 +3713,6 @@
   top: var(--editor-container-padding);
   right: var(--editor-container-padding);
   bottom: var(--editor-container-padding);
-  z-index: 2;
 }
 .excalidraw .FixedSideContainer_side_top.zen-mode {
   right: 42px;
@@ -5083,8 +5113,8 @@
 .excalidraw .ElementLinkDialog {
   position: absolute;
   top: var(--editor-container-padding);
-  left: calc(var(--editor-container-padding) * 4);
-  z-index: 3;
+  left: var(--editor-container-padding);
+  z-index: var(--zIndex-modal);
   border-radius: 10px;
   padding: 1.5rem;
   display: flex;
@@ -5500,6 +5530,8 @@
   --editor-container-padding: 1rem;
   --scrollbar-thumb: var(--button-gray-2);
   --scrollbar-thumb-hover: var(--button-gray-3);
+  --color-slider-track: hsl(240, 100%, 90%);
+  --color-slider-thumb: var(--color-gray-80);
   --modal-shadow:
     0px 100px 80px rgba(0, 0, 0, 0.07),
     0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
@@ -5645,6 +5677,7 @@
   --avatar-border-color: var(--color-gray-85);
   --scrollbar-thumb: #343a40;
   --scrollbar-thumb-hover: #495057;
+  --color-slider-track: hsl(244, 23%, 39%);
   --color-selection: #3530c4;
   --color-icon-white: var(--color-gray-90);
   --color-primary: #a8a5ff;
@@ -6315,10 +6348,12 @@ body.excalidraw-cursor-resize * {
 .excalidraw .main-menu-trigger:active {
   box-shadow: 0 0 0 1px var(--color-brand-active);
 }
+.excalidraw .App-mobile-menu,
 .excalidraw .App-menu__left {
   --button-border: transparent;
   --button-bg: var(--color-surface-mid);
 }
+.excalidraw.theme--dark.excalidraw .App-mobile-menu,
 .excalidraw.theme--dark.excalidraw .App-menu__left {
   --button-hover-bg: #363541;
   --button-bg: var(--color-surface-high);
@@ -6499,7 +6534,7 @@ body.excalidraw-cursor-resize * {
 
 /* components/welcome-screen/WelcomeScreen.scss */
 .excalidraw .excalifont {
-  font-family: "Excalifont";
+  font-family: "Excalifont", "Xiaolai";
 }
 .excalidraw .welcome-screen-decor {
   pointer-events: none;