@aakash58/chatbot 1.1.20 → 1.1.21

package/projects/doohbot/src/lib/styles/material-override.scss

@@ -0,0 +1,302 @@
+@use '@angular/material' as mat;
+
+// ================================
+//      Manual CSS Overrides
+// ================================
+
+// ================================
+//      Custom Snackbar Overrides
+// ================================
+
+.mat-mdc-snack-bar-container {
+  &.mdc-snackbar {
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .mdc-snackbar__surface {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    min-width: 0 !important;
+  }
+
+  .mdc-snackbar__label {
+    padding: 0 !important;
+    width: 100%;
+  }
+}
+
+// ==========================================
+//      Global Material Button Overrides
+// ==========================================
+
+.mat-mdc-button-base {
+  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
+    box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+// Raised and Flat variant elevation enhancements
+.mat-mdc-raised-button,
+.mat-mdc-unelevated-button {
+  &:hover:not(:disabled) {
+    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.15) !important;
+  }
+}
+
+// Icon button specific interaction
+.mat-mdc-icon-button {
+  transition: transform 0.2s ease !important;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// Consistency for all variants
+.mdc-button,
+.mat-mdc-button,
+.mat-mdc-raised-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-stroked-button {
+  border-radius: var(--button-container-shape, 5px) !important;
+
+  // Link state layers to theme
+  .mat-ripple {
+    opacity: 0.1 !important;
+  }
+}
+
+// ==========================================
+//      Shared Component Overrides
+// ==========================================
+
+// Global Dialog Styling
+.mat-mdc-dialog-container {
+  border-radius: 12px !important;
+  --mdc-dialog-container-color: var(--background-color) !important;
+
+  .mdc-dialog__surface {
+    border-radius: 12px !important;
+    overflow: hidden;
+  }
+}
+
+// Global Select & Dropdown Styling
+.mat-mdc-select-panel {
+  border-radius: 12px !important;
+  padding: 8px 0 !important;
+  box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.12) !important;
+  border: 1px solid rgba(var(--black-rgb), 0.05) !important;
+
+  // Hide scrollbar for cleaner look
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mat-mdc-option {
+    min-height: 44px !important;
+
+    &.mdc-list-item--selected:not(.mdc-list-item--disabled) {
+      .mdc-list-item__primary-text {
+        color: var(--primary-color) !important;
+      }
+    }
+  }
+}
+
+// Global Menu & Context Actions
+.mat-mdc-menu-panel {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border: 1px solid rgba(var(--black-rgb), 0.1) !important;
+  box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.12) !important;
+  --mdc-menu-container-color: var(--background-color) !important;
+
+  .mat-mdc-menu-item:hover {
+    background-color: color-mix(in srgb, var(--primary-color), transparent 92%) !important;
+  }
+
+  // Consistent item styling
+  .mat-mdc-menu-item {
+    min-height: 44px !important;
+    font-size: 0.95rem !important;
+    font-weight: 500 !important;
+
+    .mat-icon {
+      margin-right: 12px !important;
+      font-size: 20px !important;
+      width: 20px !important;
+      height: 20px !important;
+      color: var(--secondary-text-color) !important;
+    }
+  }
+}
+
+// Basic Form Field resets (overridden below by more specific cases)
+.mat-mdc-form-field {
+  width: 100%;
+
+  .mat-mdc-text-field-wrapper {
+    background: transparent !important;
+  }
+}
+
+// Global Tooltip Styling
+.mat-mdc-tooltip {
+  --mdc-plain-tooltip-container-color: var(--black); // Standard dark tooltip
+  --mdc-plain-tooltip-supporting-text-color: var(--white);
+  border-radius: 6px !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  padding: 6px 10px !important;
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(var(--white-rgb), 0.1);
+}
+
+// --- Section Actions Pattern (Shared for Personalization Sections) ---
+.section-actions {
+  display: flex;
+  align-items: center;
+  padding: 32px 0 0 0;
+  border-top: 1px solid rgba(var(--black-rgb), 0.05);
+  margin-top: auto; // Push to bottom of flex container
+  padding-top: 24px;
+
+  .spacer {
+    flex: 1;
+  }
+
+  .reset-btn {
+    background-color: var(--secondary-text-color) !important;
+    color: var(--white) !important;
+    border-radius: 8px !important;
+    padding: 0 24px !important;
+    height: 44px !important;
+    font-weight: 500;
+
+    &:hover {
+      background-color: var(--text-color) !important;
+    }
+  }
+
+  .save-btn {
+    background-color: var(--primary-color) !important;
+    color: var(--white) !important;
+    border-radius: 8px !important;
+    padding: 0 24px !important;
+    height: 44px !important;
+    font-weight: 500;
+
+    &:disabled {
+      background-color: rgba(var(--black-rgb), 0.05) !important;
+      color: rgba(var(--black-rgb), 0.3) !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
+// Remove default padding from dialog content globally for custom layouts
+.mat-mdc-dialog-content.no-padding {
+  padding: 0 !important;
+}
+
+// Global Slide Toggle Styling
+.mat-mdc-slide-toggle {
+  --mdc-switch-selected-handle-color: var(--white);
+  --mdc-switch-selected-track-color: var(--primary-color);
+  --mdc-switch-selected-focus-handle-color: var(--white);
+  --mdc-switch-selected-hover-handle-color: var(--white);
+  --mdc-switch-selected-pressed-handle-color: var(--white);
+  --mdc-switch-unselected-handle-color: var(--white);
+  --mdc-switch-unselected-track-color: rgba(var(--black-rgb), 0.1);
+
+  .mdc-switch__handle-track {
+    filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.1));
+  }
+}
+
+// Sleek Form Field Overrides (Personalization Hub Style)
+.mat-mdc-form-field {
+
+  // Container & Interaction
+  .mat-mdc-text-field-wrapper {
+    background: rgba(var(--black-rgb), 0.04) !important;
+    border: 1px solid rgba(var(--black-rgb), 0.08);
+    border-radius: 8px !important;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: text;
+
+    &:hover {
+      border-color: rgba(var(--black-rgb), 0.15);
+      background: rgba(var(--black-rgb), 0.05) !important;
+    }
+  }
+
+  &.mat-focused .mat-mdc-text-field-wrapper {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1) !important;
+    background: var(--background-color) !important;
+  }
+
+  // Input & Select Content Styling
+  .mat-mdc-form-field-infix {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    min-height: auto !important;
+    display: flex;
+    align-items: center;
+
+    .mat-mdc-input-element,
+    .mat-mdc-select-value {
+      font-size: 0.95rem !important;
+      font-weight: 400 !important;
+      color: var(--text-color) !important;
+
+      &::placeholder {
+        color: var(--secondary-text-color) !important;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  // Handle "No Label" variant (removing Material's label layout)
+  &.no-label {
+    .mdc-notched-outline__notch {
+      display: none !important;
+    }
+
+    .mdc-floating-label {
+      display: none !important;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      padding-top: 0 !important;
+    }
+  }
+
+  // Remove the bottom space reserved for error/hints if subscriptSizing is ignored or dynamic
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none !important;
+  }
+
+  // Specific height for select to match inputs
+  &.mat-form-field-type-mat-select {
+    .mat-mdc-text-field-wrapper {
+      min-height: 44px !important;
+      height: 44px !important;
+    }
+  }
+}