ss-dp/src/components/ant_override.less

/* Global Ant Design Overrides for Dashboard/Big Screen */

// ==============================================================================
// 1. Table Component
// ==============================================================================
.ant-table-wrapper {
  .ant-table {
    background: transparent !important;
    color: #fff;

    // Header Styles
    .ant-table-thead > tr > th {
      background: rgba(21, 60, 102, 0.9) !important; // Dark Blue Header
      color: #fff !important;
      font-weight: bold;
      border-bottom: 1px solid rgba(0, 160, 233, 0.3);
      padding: 8px 10px; // Reduced padding
      border-radius: 0 !important;

      // Remove separator line between headers
      // Increase specificity to override Ant Design defaults
      &::before,
      &:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
        background-color: transparent !important;
        width: 0 !important;
        content: none !important; // Ensure it's removed
      }
    }

    // Fix for white scrollbar placeholder in header (User Feedback)
    .ant-table-cell-scrollbar {
      // display: none !important; // CANNOT HIDE, otherwise header won't align with body scrollbar
      box-shadow: none !important;
      background: transparent !important;
    }

    // Body Styles
    .ant-table-tbody > tr > td {
      background: transparent !important;
      color: #fff !important;
      border-bottom: none !important; // Removed bottom border
      
      // Hover effect
      &.ant-table-cell-row-hover {
        background: rgba(0, 160, 233, 0.2) !important;
      }
    }

    // Hover row global
    .ant-table-tbody > tr:hover > td {
      background: rgba(0, 160, 233, 0.2) !important;
    }

    // Empty Data
    .ant-empty-description {
      color: rgba(255, 255, 255, 0.5);
    }
  }

  // Pagination
  .ant-pagination {
    color: rgba(255, 255, 255, 0.85); // Total text color

    .ant-pagination-item {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 4px;
      margin-right: 8px;
      
      a { color: rgba(255, 255, 255, 0.85); }
      
      &:hover {
        border-color: #1890ff;
        a { color: #1890ff; }
      }

      &-active {
        background: #1890ff; // Solid active background
        border-color: #1890ff;
        a { color: #fff; }
        
        &:hover {
          background: #40a9ff;
          border-color: #40a9ff;
          a { color: #fff; }
        }
      }
    }
    
    .ant-pagination-prev, .ant-pagination-next {
      .ant-pagination-item-link {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        color: rgba(255, 255, 255, 0.85);
        
        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }
      }

      &.ant-pagination-disabled .ant-pagination-item-link {
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.25);
      }
    }

    // Quick Jumper
    .ant-pagination-options {
      .ant-pagination-options-quick-jumper {
        color: rgba(255, 255, 255, 0.85);
        input {
          background: transparent;
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: #fff;
          &:hover, &:focus {
            border-color: #1890ff;
          }
        }
      }
    }
  }
}

// Table Scrollbar Fix (Remove white strip)
.ant-table-body, .ant-table-content {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    background: transparent !important; // Fix the white strip
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 160, 233, 0.5);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 160, 233, 0.8);
  }
}

// ==============================================================================
// 2. Input / InputNumber / TextArea Component
// ==============================================================================
.ant-input, .ant-input-number, .ant-input-affix-wrapper {
  background-color: transparent !important;
  border: 1px solid rgba(59, 124, 255, 0.6) !important; // Blueish border
  color: #fff !important;
  border-radius: 4px;
  
  &:hover, &:focus, &-focused {
    border-color: #3b7cff !important;
    box-shadow: 0 0 5px rgba(59, 124, 255, 0.5);
  }

  // Placeholder color
  &::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  
  // Input Number specific
  &.ant-input-number {
    .ant-input-number-handler-wrap {
      background: rgba(255, 255, 255, 0.1);
      .ant-input-number-handler {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        .anticon { color: #fff; }
      }
    }
    .ant-input-number-input {
      color: #fff;
    }
  }
  
  // Affix wrapper (e.g. search icon)
  .ant-input-prefix, .ant-input-suffix {
    color: rgba(255, 255, 255, 0.6);
  }
}

// Fix for Input with allowClear (affix-wrapper) double border issue
.ant-input-affix-wrapper {
  // Reset inner input style
  .ant-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  // Ensure clear icon color
  .ant-input-clear-icon {
    color: rgba(255, 255, 255, 0.5);
    &:hover {
      color: #fff;
    }
  }
}

// Autofill Fix (Prevent white background)
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

// ==============================================================================
// 3. Select / DatePicker / RangePicker / TimePicker
// ==============================================================================
// Common Input Styles
.ant-select-selector, .ant-picker {
  background-color: transparent !important;
  border: 1px solid rgba(59, 124, 255, 0.6) !important;
  color: #fff !important;
  border-radius: 4px;

  &:hover {
    border-color: #3b7cff !important;
  }
}

// Select Specific
.ant-select {
  color: #fff;
  
  .ant-select-arrow {
    color: #fff;
  }
  
  .ant-select-clear {
    background: transparent;
    color: #fff;
  }

  &:not(.ant-select-disabled):hover .ant-select-selector {
    border-color: #3b7cff !important;
  }

  // Multiple Select Tags
  &.ant-select-multiple .ant-select-selection-item {
    background: rgba(0, 160, 233, 0.2); // Light blue transparent
    border: 1px solid #00a0e9;
    color: #fff;
    margin-top: 2px;
    margin-bottom: 2px;
    
    .ant-select-selection-item-remove {
      color: rgba(255, 255, 255, 0.7);
      &:hover {
        color: #fff;
      }
    }
  }
}

// Dropdowns (Select, DatePicker, etc.)
.ant-select-dropdown, .ant-picker-dropdown {
  background-color: rgba(0, 20, 50, 0.95) !important;
  border: 1px solid rgba(0, 160, 233, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

  // Select Options
  .ant-select-item {
    color: #fff;
    &-option-active, &-option-selected {
      background-color: rgba(0, 160, 233, 0.3) !important;
    }
  }
  
  // Picker Panels
  .ant-picker-panel-container {
    background: transparent;
  }
  
  .ant-picker-header {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    button { color: #fff; }
  }
  
  .ant-picker-content {
    th { color: #fff; }
    td { color: rgba(255, 255, 255, 0.8); }
  }
  .ant-picker-time-panel-cell-inner{
    color: #fff!important;
    
  }
 
  .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
    background: #00a0e9;
  }
  .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
    background: #013056 !important;
  }

 
  .ant-picker-cell {
    color: rgba(255, 255, 255, 0.5); // Default inactive color
    
    &:hover .ant-picker-cell-inner {
      background: rgba(0, 160, 233, 0.3) !important;
    }
    
    &-in-view {
      color: #fff; // Active month days
    }
    
    // Fix: Remove white background from cells
    .ant-picker-cell-inner {
      background: transparent !important;
      color: inherit;
    }

    &-selected .ant-picker-cell-inner {
      background: #00a0e9 !important; // Project Cyan
      color: #fff;
    }
    
    &-today .ant-picker-cell-inner {
      border: 1px solid #00a0e9;
      &::before {
        border: 1px solid #00a0e9 !important;
      }
    }

    // Range Selection
    &-in-range::before {
      background: rgba(0, 160, 233, 0.2) !important;
    }
    &-range-start .ant-picker-cell-inner,
    &-range-end .ant-picker-cell-inner {
      background: #00a0e9 !important;
      color: #fff;
    }
  }
  .ant-picker-cell-disabled {
    pointer-events: none;
    .ant-picker-cell-inner {
        color: rgba(255, 255, 255, 0.25) !important;
        background-color: rgba(255, 255, 255, 0.1) !important; 
    }
  }

  // Footer/Ranges
  .ant-picker-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .ant-picker-ranges .ant-picker-preset > .ant-tag-blue {
    color: #3b7cff;
    background: rgba(59, 124, 255, 0.2);
    border-color: #3b7cff;
  }
}

// Picker Text Color fix
.ant-picker-input > input {
  color: #fff !important;
  &::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
}
.ant-picker-suffix {
  color: #fff;
}

// ==============================================================================
// 4. Button Component (Ghost Blue Style)
// ==============================================================================
.ant-btn-ghost-blue {
  background: rgba(18, 56, 102, 0.6) !important;
  border: 1px solid #00a0e9 !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(0, 160, 233, 0.2) inset;
}

.ant-btn.ant-btn-ghost-blue,
.ant-btn.ant-btn-primary.ant-btn-ghost-blue {
  background: rgba(18, 56, 102, 0.6) !important;
  border-color: #00a0e9 !important;
  color: #fff !important;
}

.ant-btn.ant-btn-ghost-blue:hover,
.ant-btn.ant-btn-ghost-blue:focus,
.ant-btn.ant-btn-primary.ant-btn-ghost-blue:hover,
.ant-btn.ant-btn-primary.ant-btn-ghost-blue:focus {
  background: rgba(0, 160, 233, 0.3) !important;
  border-color: #33b5ed !important;
  color: #fff !important;
}

// ==============================================================================
// 5. Timeline Component
// ==============================================================================
.ant-timeline {
  color: #fff;
  
  .ant-timeline-item-label {
    color: #fff;
    width: calc(50% - 12px);
  }

  .ant-timeline-item-tail {
    border-left: 2px solid rgba(0, 160, 233, 0.3);
  }

  .ant-timeline-item-head {
    background-color: transparent;
    border-color: #00a0e9;
  }
  
  .ant-timeline-item-head-blue {
    color: #00a0e9;
    border-color: #00a0e9;
  }
}

// ==============================================================================
// 6. Button Component (Global Override for Dark Theme)
// ==============================================================================
.ant-btn {
  &.ant-btn-primary {
    background: #00a0e9; // Project Theme Cyan
    border-color: #00a0e9;
    &:hover, &:focus {
      background: #33b5ed;
      border-color: #33b5ed;
    }
  }

  // Default button style in dark mode
  &:not(.ant-btn-primary):not(.ant-btn-link):not(.ant-btn-text):not(.ant-btn-danger) {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    
    &:hover, &:focus {
      color: #00a0e9;
      border-color: #00a0e9;
    }
  }
}