@yesilyazilim/web.spa 1.1.6 → 1.1.7

package/index.css

@@ -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);
@@ -1771,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;
@@ -1779,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;
@@ -1792,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;
 }
 
@@ -1830,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 {
@@ -2099,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;
@@ -2112,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;
 }
 
@@ -2136,6 +2138,10 @@ select:focus > option:hover {
   box-shadow: 0 12px 20px #80808080;
 }
 
+.f-large {
+  font-size: large;
+}
+
 .fg-danger {
   color: var(--danger);
 }
@@ -2190,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);
@@ -2237,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;
 }
@@ -2352,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 {
@@ -2459,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);
@@ -2480,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);
@@ -2593,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;
 }
@@ -4632,6 +4658,7 @@ multi-combo-box {
   background: var(--base-down);
   cursor: pointer;
   align-items: center;
+  width: 100%;
   display: flex;
   position: relative;
 }
@@ -5571,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;
@@ -6421,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;
 }
@@ -6463,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%);