@yesilyazilim/web.spa 1.0.32 → 1.0.33

package/index.css

@@ -11259,6 +11259,8 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
   --primary-focus: color-mix(in srgb, var(--primary) 25%, transparent);
   --primary-50: var(--blue-100);
   --primary-200: var(--blue-200);
+  --primary-300: var(--blue-300);
+  --primary-400: var(--blue-400);
   --primary-900: var(--blue-900);
   --primary-dark: var(--blue-500);
   --active: var(--blue-400);
@@ -11549,6 +11551,29 @@ span {
   display: flex;
 }
 
+.pad-h {
+  padding: var(--spacing-half);
+}
+
+.pad {
+  padding: var(--spacing);
+}
+
+.pad-2x {
+  padding: var(--spacing-2x);
+}
+
+.border {
+  border: 1px solid var(--form-element-border-color);
+}
+
+.panel-container {
+  padding: var(--spacing);
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
 .comp-busy-cont {
   z-index: 1000;
   cursor: wait;
@@ -11575,6 +11600,20 @@ span {
   display: inline-block;
 }
 
+.DragElement {
+  border: 1px solid var(--primary-gray);
+  background-color: var(--primary-gray-ghost);
+  color: var(--background);
+  padding: var(--spacing-2x);
+  padding-bottom: calc(var(--spacing-2x) * 5);
+  border-radius: var(--border-radius);
+  word-wrap: break-word;
+  text-align: center;
+  width: 100px;
+  max-width: 100px;
+  box-shadow: 0 12px 20px #80808080;
+}
+
 .fg-danger {
   color: var(--danger);
 }
@@ -12188,16 +12227,18 @@ app-main-panel > .mp-cover > .mp-panels .mp-middle {
 
 app-main-panel > app-main-panel-drag-window {
   z-index: 100;
+  backdrop-filter: blur(2px);
+  --webkit-backdrop-filter: blur(2px);
+  background: #ffffff4d;
   justify-content: center;
   align-items: center;
-  width: auto;
-  height: auto;
-  margin-top: -150px;
-  margin-left: -200px;
+  width: 100vw;
+  height: 100vh;
   display: flex;
-  position: absolute;
-  top: 50%;
-  left: 50%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 0 4px 30px #0000001a;
 }
 
 app-main-panel > app-main-panel-drag-window > .mp-dp-container {
@@ -12211,7 +12252,7 @@ app-main-panel > app-main-panel-drag-window > .mp-dp-container {
 }
 
 app-main-panel > app-main-panel-drag-window > .mp-dp-container .mp-drag-panel {
-  background: color-mix(in srgb, var(--background-color) 75%, transparent);
+  background: color-mix(in srgb, var(--active) 25%, transparent);
   border-radius: var(--border-radius);
   -webkit-backdrop-filter: blur(8.3px);
   border: 1px solid #80808080;
@@ -12235,14 +12276,16 @@ app-main-panel > app-main-panel-drag-window > .mp-dp-container .mp-drag-panel.bo
 }
 
 app-main-panel > app-main-panel-drag-window > .mp-dp-container .mp-drag-panel.blocked {
-  background: color-mix(in srgb, var(--primary-gray-light) 75%, transparent);
+  background: color-mix(in srgb, var(--primary-gray-light) 50%, transparent);
 }
 
 app-main-panel > app-main-panel-drag-window > .mp-dp-container .mp-drag-panel[dragok="true"] {
-  background: color-mix(in srgb, var(--active) 75%, transparent);
+  background: color-mix(in srgb, var(--success) 25%, transparent);
 }
 
 app-ribbon {
+  --tab-accent-hover: color-mix(in srgb, var(--tab-accent-color) 50%, transparent);
+  --tab-body: var(--primary-gray-ghost);
   --tab-header-background: var(--primary-gray) !important;
   --tab-header-foreground: var(--primary-inverse) !important;
   --tab-accent-color: var(--background-color) !important;
@@ -12403,7 +12446,6 @@ app-ribbon > app-tab-container > .appTabContainerHeader {
 }
 
 app-ribbon > app-tab-container .appTabContainerBody {
-  background: var(--primary-gray-ghost);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   transition: top .5s;
@@ -12447,9 +12489,10 @@ app-radio-button > button:last-child {
   --tab-header-background: var(--background-color);
   --tab-header-foreground: var(--color);
   --tab-accent-color: var(--primary);
-  --tab-accent-hover: var(--range-border-color);
+  --tab-accent-hover: color-mix(in srgb, var(--tab-accent-color) 50%, transparent);
   --tab-body: var(--background-color);
   --tab-border-h: 3px;
+  --tab-header-border-color: var(--primary-gray-ghost);
 }
 
 app-tab-container {
@@ -12462,7 +12505,6 @@ app-tab-container .appTabContainerHeader {
   color: var(--tab-header-foreground);
   background-color: var(--tab-header-background);
   flex-flow: row;
-  gap: 3px;
   width: 100%;
   padding: 0 5px;
   display: flex;
@@ -12470,11 +12512,12 @@ app-tab-container .appTabContainerHeader {
 }
 
 app-tab-container .appTabContainerHeader app-tab-header {
-  border-bottom: var(--tab-border-h) solid var(--tab-header-background);
+  border-bottom: var(--tab-border-h) solid;
+  border-bottom-color: var(--tab-header-border-color);
   grid-template-columns: 1fr auto;
   align-items: center;
-  gap: 3px;
   min-width: 60px;
+  transition: border-bottom-color .5s;
   display: grid;
   position: relative;
 }