@v1nt1248/3nclient-lib 0.1.58 → 0.1.60

package/dist/variables.css

@@ -8,11 +8,17 @@
   --spacing-xxl: 48px;
   --white-inf: rgba(255, 255, 255, 0);
   --white-100: #fff;
+  --white-4: rgba(250, 250, 250, 0.04);
+  --white-8: rgba(250, 250, 250, 0.08);
+  --white-12: rgba(250, 250, 250, 0.12);
+  --white-24: rgba(250, 250, 250, 0.24);
+  --white-48: rgba(250, 250, 250, 0.48);
   --black-inf: rgba(0, 0, 0, 0);
   --black-4: rgba(0, 0, 0, 0.04);
   --black-8: rgba(0, 0, 0, 0.08);
   --black-12: rgba(0, 0, 0, 0.12);
   --black-24: rgba(0, 0, 0, 0.24);
+  --black-48: rgba(0, 0, 0, 0.48);
   --black-100: #000;
   --red-0: #feeeed;
   --red-5: #fcd9d6;
@@ -115,6 +121,10 @@
 }
 
 .default-theme {
+  --ripple: var(--white-48);
+  --shadow-key-1: var(--black-12);
+  --shadow-key-2: var(--black-8);
+  --shadow-key-3: var(--black-4);
   --shadow-close: var(--black-4);
   --shadow-far: var(--black-8);
   --global-default: var(--grey-5);
@@ -277,6 +287,10 @@
 }
 
 .dark-theme {
+  --ripple: var(--black-48);
+  --shadow-key-1: var(--white-12);
+  --shadow-key-2: var(--white-8);
+  --shadow-key-3: var(--white-4);
   --shadow-close: var(--black-12);
   --shadow-far: var(--black-24);
   --global-default: var(--blue-95);
@@ -746,10 +760,6 @@
 }
 
 html {
-  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
-  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
-  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
-  
   overflow: hidden;
   font-family: Manrope, sans-serif;
 }
@@ -767,17 +777,17 @@ div {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: var(--grey-30);
+  background-color: var(--s-default-outline-focused);
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 2px;
   height: 50px;
-  background-color: var(--grey-70);
+  background-color: var(--default-fill-pressed);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--grey-90);
+  background-color: var(--t-default-fill-default);
 }
 
 ::-webkit-resizer {
@@ -811,8 +821,8 @@ div {
 
 .ui3n-ripple {
   --ui3n-ripple-duration: 400ms;
-  --ui3n-ripple-bg-color: rgba(255, 255, 255, 0.7);
-  
+  --ui3n-ripple-bg-color: var(--ripple);
+
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
@@ -832,8 +842,8 @@ div {
   font-weight: 400;
   word-wrap: break-word;
   white-space: break-spaces;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
-  0 1px 1px 0 rgba(0, 0, 0, 0.14),
-  0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 1px -1px var(--shadow-key-1),
+  0 1px 1px 0 var(--shadow-key-2),
+  0 1px 3px 0 var(--shadow-key-3);
   z-index: 1000;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-drop-files/ui3n-drop-files.vue

@@ -75,41 +75,45 @@
     :class="[
       $style.ui3nDropFiles,
       permanentDisplay && $style.ui3nDropFilesWithBorder,
-      isOverDropPlace || isOverDropZone && $style.ui3nDropFilesWithAccentBorder
+      (isOverDropPlace || isOverDropZone) && $style.ui3nDropFilesWithAccentBorder
     ]"
     @dragenter="onDragenter"
     @dragleave="onDragleave"
   >
     <slot />
+
     <div
+      v-if="permanentDisplay || isOverDropPlace || isOverDropZone"
       :class="$style.ui3nDropFilesDropzone"
       @dragenter="onDropzoneDragenter"
       @dragover="onDropzoneDragover"
       @dragleave="onDropzoneDragleave"
       @drop="onDrop"
     >
-      <template v-if="permanentDisplay || isOverDropPlace || isOverDropZone">
-        <h3 :class="$style.ui3nDropFilesDropzoneTitle">
-          {{ title }}
-        </h3>
-
-        <div :class="$style.ui3nDropFilesDropzoneIcon">
-          <svg
-            :width="wrapperElementMinSize * 0.35"
-            :height="wrapperElementMinSize * 0.35"
-            viewBox="0 0 192 192"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M51 152C47.9333 152 45.3333 150.934 43.2 148.8C41.0667 146.667 40 144.067 40 141V119.8H46.2V141C46.2 142.2 46.7 143.3 47.7 144.3C48.7 145.3 49.8 145.8 51 145.8H141C142.2 145.8 143.3 145.3 144.3 144.3C145.3 143.3 145.8 142.2 145.8 141V119.8H152V141C152 144.067 150.933 146.667 148.8 148.8C146.667 150.934 144.067 152 141 152H51ZM93 122.4V49.2002L72.8 69.2002L68.4 65.0002L96 37.2002L123.6 65.0002L119.2 69.2002L99 49.2002V122.4H93Z"
-              fill="var(--color-icon-control-primary-default)"
-            />
-          </svg>
-        </div>
-      </template>
-
-      <div :class="$style.ui3nDropFilesDropzoneAdditional">
+      <h3 :class="$style.ui3nDropFilesDropzoneTitle">
+        {{ title }}
+      </h3>
+
+      <div :class="$style.ui3nDropFilesDropzoneIcon">
+        <svg
+          :width="wrapperElementMinSize * 0.35"
+          :height="wrapperElementMinSize * 0.35"
+          viewBox="0 0 192 192"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M51 152C47.9333 152 45.3333 150.934 43.2 148.8C41.0667 146.667 40 144.067 40 141V119.8H46.2V141C46.2 142.2 46.7 143.3 47.7 144.3C48.7 145.3 49.8 145.8 51 145.8H141C142.2 145.8 143.3 145.3 144.3 144.3C145.3 143.3 145.8 142.2 145.8 141V119.8H152V141C152 144.067 150.933 146.667 148.8 148.8C146.667 150.934 144.067 152 141 152H51ZM93 122.4V49.2002L72.8 69.2002L68.4 65.0002L96 37.2002L123.6 65.0002L119.2 69.2002L99 49.2002V122.4H93Z"
+            fill="var(--color-icon-control-primary-default)"
+          />
+        </svg>
+      </div>
+
+      <div
+        :class="$style.ui3nDropFilesDropzoneAdditional"
+        @dragenter.stop.prevent
+        @dragleave.stop.prevent
+      >
         <slot name="additional-text" />
       </div>
     </div>

package/src/components/ui3n-emoji/ui3n-emoji.vue

@@ -17,7 +17,7 @@
 
   onMounted(() => {
     if (emojiElement.value) {
-      emojiElement.value.style.setProperty('--emoji-size', `${props.size}px`);
+      emojiElement.value.style.setProperty('--ui3n-emoji-size', `${props.size}px`);
     }
   });
 

package/src/components/ui3n-list/ui3n-list.vue

@@ -43,12 +43,12 @@ defineSlots<Ui3nListSlots<T>>();
 <style lang="scss" module>
 .ui3nList {
   --ui3n-list-item-height: 28px;
-  --ui3n-list-bg-color: transparent;
+  --ui3n-list-bg-color: var(--color-bg-block-primary-default);
 
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: transparent;
+  background-color: var(--ui3n-list-bg-color);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

package/src/components/ui3n-virtual-scroll/ui3n-virtual-scroll.vue

@@ -79,6 +79,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  background-color: var(--color-bg-block-primary-default);
 }
 
 .viewport {