Skip to content
Snippets Groups Projects
Select Git revision
  • b31bf0746032413a581bab954e8eaa0e40637b3d
  • master default protected
  • css2
  • css
4 results

index.js

Blame
  • CombinationGrid.css 1.85 KiB
    .combination-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        padding: 0.5rem;
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
      }
      
      .combination-card {
        background-color: var(--background-white);
        border: 1px solid var(--primary-light);
        border-radius: 12px;
        padding: 1.5rem;
        transition: all 0.3s ease;
      }
    
      .combination-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-color);
      }
      
      .card-image {
        width: 120px;
        height: 120px;
        object-fit: contain;
        margin: 0 auto 1rem;
        padding: 0.75rem;
        background-color: var(--background-light);
        border-radius: 8px;
        transition: all 0.3s ease;
      }
      
      .combination-card:hover .card-image {
        background-color: white;
        box-shadow: var(--shadow-sm);
      }
      
      .card-title {
        color: var(--primary-color);
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
      }
      
      .card-description {
        color: var(--text-secondary);
        font-size: 0.95rem;
        line-height: 1.4;
      }
      
      @media (max-width: 768px) {
        .combination-grid {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
      
        .combination-card {
          padding: 1rem;
        }
      
        .card-image {
          width: 100px;
          height: 100px;
        }
      }
      
    
      .part-type {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 0.25rem;
        background-color: var(--background-light);
        padding: 0.4rem 0.8rem;
        border-radius: 6px;
        border: 1px solid var(--primary-light);
        letter-spacing: 0.5px;
      }
      
      .part-item:hover .part-type {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
      }