@yesilyazilim/web.spa 1.1.5 → 1.1.7

package/index.css

@@ -456,7 +456,7 @@
   --glass-border-color: color-mix(in srgb, var(--base-down) 100%, var(--transparent) 100%);
   --bp-1: 10%;
   --bp-2: 20%;
-  --app-back: color-mix(in srgb, var(--mid-d5) 100%, var(--base-tint) 15%);
+  --app-back: color-mix(in srgb, var(--mid-d5) 100%, var(--primary) 10%);
   --app-back-2: color-mix(in srgb, var(--base-down) 80%, var(--primary-2) var(--bp-2));
   --app-back-img: linear-gradient(135deg, var(--app-back) 0%, var(--app-back) 20%, var(--app-back-2) 100%);
   --accent-bg-img: linear-gradient(to right, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
@@ -481,9 +481,9 @@
   --glass-border-color: color-mix(in srgb, var(--primary) 20%, var(--transparent) 100%);
   --bp-1: 3%;
   --bp-2: 10%;
-  --app-back: color-mix(in srgb, var(--base-down) 80%, var(--base-tint) var(--bp-2));
-  --app-back-2: color-mix(in srgb, var(--base-down) 80%, var(--primary-2) var(--bp-2));
-  --app-back-img: linear-gradient(135deg, var(--app-back) 0%, var(--app-back) 50%, var(--app-back-2) 100%);
+  --app-back: color-mix(in srgb, var(--base-down) 100%, var(--base-tint) var(--bp-1));
+  --app-back-2: color-mix(in srgb, var(--base-down) 100%, var(--primary-2) var(--bp-2));
+  --app-back-img: linear-gradient(135deg, var(--app-back) 0%, var(--app-back) 20%, var(--app-back-2) 100%);
   --accent-bg-img: linear-gradient(to right, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
   --danger: var(--red-600);
   --danger-2: var(--red-700);
@@ -505,7 +505,7 @@
   --d5: 90%;
   --transparent: #fff0;
   --ghost: color-mix(in oklab, var(--base-up) 5%, transparent 100%);
-  --text: color-mix(in oklab, var(--base-up) 90%, var(--primary) 10%);
+  --text: color-mix(in oklab, var(--base-up) 70%, var(--mid) 10%);
   --active: color-mix(in oklab, var(--primary) 100%, var(--base-down) 25%);
   --primary-hover: color-mix(in oklab, var(--primary) 100%, var(--base-up) 50%);
   --primary-focus: color-mix(in srgb, var(--primary), var(--transparent) 50%);
@@ -578,9 +578,10 @@
   --muted-background-color: var(--mid-d5);
   --drop-shadow: 0px 10px 30px 0px var(--drop-shadow-color);
   --drop-shadow-r: 0px -10px 30px 0px var(--drop-shadow-color);
-  --drop-shadow-s: 0px 2px 4px 0px var(--drop-shadow-color);
   --drop-shadow-m: 0px 5px 10px 0px var(--drop-shadow-color);
+  --drop-shadow-s: 0px 2px 4px 0px var(--drop-shadow-color);
   --drop-shadow-mr: 0px -5px 10px 0px var(--drop-shadow-color);
+  --drop-shadow-sr: 0px -2px 4px 0px var(--drop-shadow-color);
   --focus-shadow: 0 0 0 3px var(--focus-color);
   --form-element-color: var(--color);
   --form-element-background-color: var(--background-color);
@@ -640,7 +641,7 @@
   --line-height: 1;
   --scrollbar-width: 0px;
   --border-radius: calc(var(--spacing-half) * 3);
-  --border-width: 2px;
+  --border-width: 1.5px;
   --outline-width: 2px;
   --transition: .2s ease-in;
   --border: var(--border-width) solid var(--border-color);
@@ -660,20 +661,6 @@
   --font-size: 13px !important;
 }
 
-:root[data-theme="dark"] {
-  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
-  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
-  --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
-  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
-  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-}
-
 ::selection {
   background-color: var(--primary-focus);
 }
@@ -1785,7 +1772,7 @@ html, body {
   --border-width: 2px;
 }
 
-::-webkit-calendar-picker-indicator {
+body ::-webkit-calendar-picker-indicator {
   width: var(--icon-width) !important;
   margin-right: calc(var(--icon-width) * -1) !important;
   margin-left: var(--icon-position) !important;
@@ -1793,12 +1780,12 @@ html, body {
   opacity: 0 !important;
 }
 
-::-webkit-scrollbar {
+body ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
-::-webkit-scrollbar-thumb {
+body ::-webkit-scrollbar-thumb {
   background-color: var(--mid-d2);
   background-clip: padding-box;
   border: 2px solid #0000;
@@ -1806,12 +1793,12 @@ html, body {
   transition: border-width .5s;
 }
 
-::-webkit-scrollbar-thumb:hover {
+body ::-webkit-scrollbar-thumb:hover {
   background-color: var(--mid);
   border-width: 0;
 }
 
-::-webkit-scrollbar-track {
+body ::-webkit-scrollbar-track {
   background: none;
 }
 
@@ -1844,6 +1831,7 @@ select:focus > option:hover {
   border: 1px solid var(--border-color);
   font-size: var(--font-size) !important;
   background-color: #0000 !important;
+  transform: none !important;
 }
 
 .tabulator > .tabulator-header {
@@ -2113,7 +2101,7 @@ select:focus > option:hover {
 .comp-busy-cont {
   z-index: 1000;
   cursor: wait;
-  background: #ffffffc0;
+  background: rgba(var(--base-down), .2);
   flex-flow: column wrap;
   place-content: center;
   place-items: center;
@@ -2126,13 +2114,13 @@ select:focus > option:hover {
 
 .comp-busy-cont > .comp-busy-spin {
   content: "";
-  width: 24px;
-  height: 24px;
-  opacity: var(--loading-spinner-opacity);
+  opacity: .5;
   border: 3px solid;
   border-right-color: #0000;
   border-radius: 40px;
-  animation: .75s linear infinite spinner;
+  width: 24px;
+  height: 24px;
+  animation: .75s linear infinite spin;
   display: inline-block;
 }
 
@@ -2150,6 +2138,10 @@ select:focus > option:hover {
   box-shadow: 0 12px 20px #80808080;
 }
 
+.f-large {
+  font-size: large;
+}
+
 .fg-danger {
   color: var(--danger);
 }
@@ -2204,6 +2196,21 @@ select:focus > option:hover {
   color: var(--primary-inverse);
 }
 
+.alert {
+  padding: var(--spacing-2x);
+  border-radius: var(--border-radius);
+  text-align: center;
+  border-style: solid;
+  border-width: var(--border-width);
+  box-shadow: var(--drop-shadow-s);
+}
+
+.alert.alert-warning {
+  border-color: var(--warning);
+  background-color: var(--warning-d3);
+  color: var(--warning-u2);
+}
+
 .glass {
   backdrop-filter: blur(5px);
   border-radius: var(--border-radius);
@@ -2251,11 +2258,25 @@ select:focus > option:hover {
   inset: 0;
 }
 
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 app-dialog-content {
   z-index: 5000;
   box-shadow: var(--drop-shadow);
   border-radius: var(--border-radius);
   grid-template-rows: auto 1fr;
+  min-width: fit-content;
+  max-width: 100%;
+  min-height: max-content;
+  max-height: 100%;
   display: grid;
   position: absolute;
 }
@@ -2366,11 +2387,12 @@ app-indeterminate-progress.bottom > .indeterminate-progress-bar {
 
 app-indeterminate-progress.top {
   z-index: 1;
+  background-color: color-mix(in srgb, var(--base-down) 20%, transparent);
   pointer-events: all;
   cursor: wait;
-  background-color: #fffa;
   height: 100%;
   position: absolute;
+  top: 0;
 }
 
 app-indeterminate-progress.top > .indeterminate-progress-bar {
@@ -2473,7 +2495,7 @@ app-message-display.success .msg-icon {
 }
 
 app-spinner {
-  background: rgba(var(--background-color), .1);
+  background: rgba(var(--base-down), .2);
   justify-content: center;
   align-items: center;
   gap: var(--spacing);
@@ -2494,16 +2516,6 @@ app-spinner .spinner {
   animation: 1.2s linear infinite spin;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 app-skeleton {
   --skeleton-bg: var(--primary-d4);
   --skeleton-highlight: var(--primary-d5);
@@ -2607,7 +2619,7 @@ app-skeleton {
 }
 
 .skeleton-group.skeleton-table .skeleton-table-row {
-  border-bottom: 1px solid #f7fafc;
+  border-bottom: 1px solid var(--border-color);
   padding: 8px 0;
   display: flex;
 }
@@ -4646,6 +4658,7 @@ multi-combo-box {
   background: var(--base-down);
   cursor: pointer;
   align-items: center;
+  width: 100%;
   display: flex;
   position: relative;
 }
@@ -5585,7 +5598,6 @@ app-drawer-contanier > .dr-parent {
   width: 100%;
   height: 100%;
   padding: var(--drw-pad);
-  z-index: 1;
   justify-content: space-around;
   align-items: center;
   display: flex;
@@ -5595,7 +5607,7 @@ app-drawer-contanier > .dr-parent {
 app-drawer-contanier > .dr-parent > app-drawer {
   --drw-size: -300px;
   z-index: 10;
-  max-height: calc(100% - var(--drw-pad));
+  max-height: calc(80% - var(--drw-pad));
   background-image: var(--glass-bg-img);
   min-height: 50%;
   box-shadow: var(--drop-shadow);
@@ -5656,12 +5668,10 @@ app-drawer-contanier > .dr-parent > app-drawer > .item-container {
 }
 
 app-drawer-contanier > .dr-parent > app-drawer.dr-left {
-  width: min-content;
   left: var(--drw-size);
 }
 
 app-drawer-contanier > .dr-parent > app-drawer.dr-right {
-  width: min-content;
   right: var(--drw-size);
 }
 
@@ -6437,33 +6447,78 @@ nav-header > .header-right .color-item > span {
 }
 
 s-login {
-  background: linear-gradient(132deg, var(--primary2-u1), var(--primary-u1), var(--primary-u4));
-  background-size: 400% 400%;
   width: 100%;
   height: 100%;
-  animation: 15s infinite Gradient;
   display: block;
-  overflow: hidden;
+}
+
+s-login .wave {
+  background: var(--primary-d4);
+  --spncol: var(--base-down);
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+  position: absolute;
+  left: 0;
+  box-shadow: inset 0 0 50px #00000080;
+}
+
+s-login .wave span {
+  content: "";
+  width: 325vh;
+  height: 325vh;
+  position: absolute;
+  top: -15%;
+  left: 50%;
+  transform: translate(-50%, -75%);
+}
+
+s-login .wave span:first-child {
+  background: var(--spncol);
+  border-radius: 45%;
+  animation: 10s linear infinite animate;
+}
+
+s-login .wave span:nth-child(2) {
+  background: color-mix(in srgb, var(--spncol) 100%, var(--transparent) 100%);
+  border-radius: 40%;
+  animation: 20s linear infinite animate;
+}
+
+s-login .wave span:nth-child(3) {
+  background: color-mix(in srgb, var(--spncol) 100%, var(--transparent) 100%);
+  border-radius: 42.5%;
+  animation: 30s linear infinite animate;
+}
+
+@keyframes animate {
+  0% {
+    transform: translate(-50%, -75%)rotate(0);
+  }
+
+  100% {
+    transform: translate(-50%, -75%)rotate(360deg);
+  }
 }
 
 s-login > app-card {
+  background: var(--glass-bg-img);
+  border: var(--glass-border-color);
   border-radius: var(--border-radius);
   backdrop-filter: blur(5px);
-  background: #fffc;
-  border: 1px solid #ffffff80;
-  justify-content: center;
-  gap: 30px;
   height: 400px;
+  box-shadow: var(--drop-shadow);
+  justify-content: space-around;
+  gap: 30px;
   padding: 20px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translateX(-50%)translateY(-50%);
-  box-shadow: 0 4px 30px #0000001a;
 }
 
 s-login > app-card > .card-title {
-  background: -webkit-linear-gradient(left, var(--primary) 0%, var(--primary-2) 100%);
+  background: -webkit-linear-gradient(left, var(--primary-u1) 0%, var(--primary2-u1) 100%);
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
 }
@@ -6479,6 +6534,10 @@ s-login > app-card > .card-content form {
   padding: 20px;
 }
 
+s-login > app-card > .card-content form input {
+  text-align: center;
+}
+
 @keyframes slide {
   0% {
     transform: translateX(-25%);