new design implement for login screen, organization onboarding form changes, new filter implement in all screens, remove icons from validation,

2026-07-29 19:12:51 +05:30
parent 0907e0f5dc
commit 4838e16dc8
40 changed files with 2407 additions and 793 deletions
@@ -460,6 +460,126 @@
  background: #ffffff;
 }

+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+
+:host-context(.dark) .modern-modal {
+  background: var(--color-bodybg) !important;
+  box-shadow:
+    0 15px 40px rgba(0, 0, 0, .25),
+    0 30px 80px rgba(0, 0, 0, .35);
+}
+
+:host-context(.dark) .modern-modal-body {
+  color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb {
+  background: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb:hover {
+  background: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .modern-modal-footer {
+  background: var(--color-bodybg) !important;
+  border-top: 1px solid var(--color-inputborder) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button {
+  background: var(--color-light) !important;
+  border-color: var(--color-inputborder) !important;
+  color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button:hover {
+  background: var(--color-bodybg) !important;
+  border-color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button {
+  box-shadow:
+    0 8px 20px rgba(125, 61, 235, 0.55) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button:hover {
+  box-shadow:
+    0 12px 28px rgba(125, 61, 235, .65) !important;
+}
+
+/* ==========================================================
+   Modal form-control borders in dark mode
+   ========================================================== */
+
+:host-context(.dark) ::ng-deep .modern-modal {
+
+  .shared-form-input,
+  .custom-floating-input,
+  .form-control,
+  .form-select,
+  .ti-form-input,
+  .ti-form-select,
+  .ti-form-control,
+  .ng-select-container,
+  textarea,
+  input[type="text"],
+  input:not([type]),
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="search"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"] {
+    border-color: rgb(115 122 130) !important;
+  }
+
+  .form-check-input:not(:checked) {
+    border-color: rgb(115 122 130) !important;
+  }
+
+  /* keep focus / validation colors */
+  .shared-form-control.is-focused .shared-form-input,
+  .shared-form-input:focus,
+  .custom-floating-input:focus,
+  .form-control:focus,
+  .form-select:focus,
+  .ti-form-input:focus,
+  .ti-form-select:focus,
+  .ti-form-control:focus,
+  .ng-select.ng-select-focused .ng-select-container,
+  textarea:focus {
+    border-color: var(--color-primary) !important;
+  }
+
+  .form-control.is-invalid,
+  .form-select.is-invalid,
+  .ti-form-input.is-invalid,
+  .ti-form-select.is-invalid,
+  .ti-form-control.is-invalid,
+  textarea.is-invalid,
+  .has-error .shared-form-input,
+  .ng-invalid.ng-touched,
+  .custom-floating-input.ng-invalid.ng-touched {
+    border-color: var(--color-danger) !important;
+  }
+
+  .form-check-input:checked,
+  .form-check-input.is-invalid {
+    border-color: var(--color-primary) !important;
+  }
+
+  .form-check-input.is-invalid:not(:checked) {
+    border-color: var(--color-danger) !important;
+  }
+}
+

 /* ==========================================================
   Mobile