vermine2047/less/actor/npc.less

@import "../variables";
@import "../utilities";

.system-vermine2047 .vermine2047.actor.npc {
  .sheet-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    padding: 0.5rem;
    overflow: visible;
  }

  .charname {
    margin: 0;
    height: auto;
    font-size: @font-size-18;
    line-height: 1.2;

    span,
    input {
      font-size: @font-size-18;
      font-weight: bold;
      text-align: center;
    }

    input {
      width: 100%;
    }
  }

  .ability-value,
  .resource-value {
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    margin-left: 8px;
  }

  .card, .npc-card {
    .card-style();

    h4 {
      .card-title();
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-14;
      background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");

      i { margin-right: 5px; }
    }
  }

  .npc-trait-list {
    li {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
      border-bottom: 1px solid @color-border-dark-3;
      font-size: @font-size-12;

      &:last-child { border-bottom: none; }

      strong { flex: 1; }
    }

    .trait-value {
      min-width: 30px;
      text-align: center;
      font-weight: bold;
      white-space: nowrap;
    }
  }

  .npc-roll-btn {
    color: @color-text-dark-secondary;
    opacity: 0.75;
    transition: opacity 0.15s ease;

    &:hover {
      opacity: 1;
      color: @theme-color-dark;
      text-shadow: 0 0 6px @theme-color-highlight;
    }
  }

  .npc-wounds {
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;

    .wound-cat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: bold;

      .wound-label {
        font-size: @font-size-12;
        white-space: nowrap;
      }
    }

    .wound-boxes {
      display: inline-flex;
      gap: 2px;

      i {
        font-size: 8px;
        color: @color-border-dark-2;
      }

      .hexa {
        margin: 0;
      }
    }
  }

  .npc-free-skills {
    margin-top: 15px;
    .form-group-style();

    label {
      font-size: @font-size-12;
      font-weight: bold;
      white-space: nowrap;
    }
  }

  .wounds-card {
    margin-top: 15px;
    .card-style();
  }

  .wound-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    label {
      font-size: @font-size-12;
      font-weight: bold;
      text-align: center;
    }
  }

  .wound-control {
    display: flex;
    align-items: center;
    gap: 8px;

    input { flex: 1; }
    span {
      font-size: @font-size-12;
      min-width: 30px;
      text-align: center;
    }
  }

  .tab {
    padding: 10px;
    overflow-y: auto;
  }

  .form-group {
    .form-group-style();
  }

  .header-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sheet-header .resource {
    padding: 4px 8px;
    margin-bottom: 0;
  }

  .resources {
    display: grid;
    gap: 8px;
  }

  .resource {
    .card-style();

    label { font-weight: bold; }
  }

  .resource-label {
    font-size: @font-size-12;
    font-weight: bold;
    white-space: nowrap;
  }

  .resource-content {
    display: flex;
    align-items: center;

    select {
      font-size: @font-size-12;
      padding: 3px 5px;
      min-width: 100px;
    }

    input[type="text"] {
      font-size: @font-size-12;
      padding: 3px 5px;
      min-width: 0;
      width: 100%;
    }
  }

  .npc-profile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .editor {
    min-height: 100px;
    margin-bottom: 10px;

    .editor-content {
      min-height: 80px;
      font-size: @font-size-12;
    }
  }

  .hexa {
    .hexa-style();
    .transition();
    position: relative;

    &:hover {
      .hexa-style(rgba(255, 255, 255, 0.425), rgba(0, 0, 0, 0.288));
    }

    input {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 1;
      margin: 0;
      cursor: pointer;
    }

    &.checked {
      .hexa-style(rgb(0, 0, 0), rgba(0, 0, 0, 0.288));
      &:hover { .hexa-style(rgb(43, 43, 43), rgba(0, 0, 0, 0.288)); }
    }
  }
}