fvtt-oath-hammer/less/item-list.less

// ============================================================
// ITEM LIST — Used in actor sheet tabs (weapons, spells, etc.)
// ============================================================

.oathhammer {

  .item-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  // Header row shared by all lists
  .item-list-header {
    display: grid;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 3px;
    border-bottom: 1px solid @color-olive;
    margin-bottom: 2px;
    font-family: @font-secondary;
    font-size: @font-size-xs;
    color: @color-blue;
    span { text-align: center; }
    .col-name { text-align: left; }
  }

  // Data row
  .item-entry {
    display: grid;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-bottom: 1px solid @color-olive-faint;
    &:hover { background-color: @color-blue-hover; }

    .item-img {
      width: @item-img-size;
      height: @item-img-size;
      border: 1px solid @color-olive;
      border-radius: 2px;
      object-fit: cover;
      align-self: center;
      justify-self: center;
      flex-shrink: 0;
    }

    .item-name {
      font-family: @font-body;
      font-size: @font-size-base;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .item-detail {
      font-size: @font-size-xs;
      color: @color-olive;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-group {
      font-size: @font-size-xs;
      color: @color-olive;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-magic {
      text-align: center;
      font-size: @font-size-xs;
      color: #8e44ad;
    }

    .item-type {
      font-size: @font-size-xs;
      color: @color-blue;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-equipped {
      display: flex;
      align-items: center;
      justify-content: center;
      input[type="checkbox"] {
        width: 0.95rem;
        height: 0.95rem;
        cursor: pointer;
        margin: 0;
      }
    }

    .item-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      a {
        .transition-opacity();
        font-size: @font-size-sm;
        &:hover { color: @color-blue; }
      }
    }
  }

  // ── Per-list grid templates ──────────────────────────────
  // Format: [img] [name] [detail cols...] [equipped?] [actions]

  .item-list--weapon {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 4.5rem 3.5rem 2rem 1.5rem 1.8rem 5.5rem;
    }
  }

  .item-list--armor {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 3.5rem 2.5rem 3.5rem 1.5rem 1.8rem 3.5rem;
    }
  }

  .item-list--ammo {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 4rem 3.5rem;
    }
  }

  .item-list--spell {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 3rem 6rem 3rem 5.5rem;
    }
  }

  .item-list--miracle {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 4.5rem 5.5rem;
    }
  }

  .item-list--equipment {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 5rem 3rem 3.5rem;
    }
  }

  .item-list--magic-item {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 5rem 3.5rem;
    }
  }

  .item-list--condition {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 5.5rem 3.5rem;
    }
  }

  .item-list--trait {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 6rem 6rem 3.5rem;
    }
  }

  .item-list--oath {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 7rem 3.5rem 3.5rem;
    }
  }

  .item-usage {
    font-size: @font-size-xs;
    color: @color-olive;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item-violated {
    text-align: center;
    font-size: @font-size-sm;
    i.fa-circle-xmark { color: #c0392b; }
    i.fa-circle-check { color: #27ae60; }
  }

  .oath--violated {
    background-color: fade(#c0392b, 8%);
    .item-name { color: #c0392b; }
  }

  .no-items {
    color: var(--color-dark-5);
    font-style: italic;
    font-size: @font-size-xs;
    padding: 4px;
  }

  .create-btn {
    margin-left: 6px;
    color: @color-blue;
    .transition-opacity();
  }
}