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;
    max-height: 150px;
  }

  .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; }
    }
  }

  .skills-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .skill-category {
    .card-style();
    padding: 10px;

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

  .skill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border-bottom: 1px solid @color-border-dark-3;

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

    label {
      flex: 1;
      font-size: @font-size-12;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:hover {
      box-shadow: 0 0 10px @theme-color-highlight inset;
    }
  }

  .skill-control {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .skill-value {
    min-width: 25px;
    text-align: center;
    font-weight: bold;
  }

  .rarity-badge {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 5px;

    &.rarity-0 { .rarity-badge(@rarity-0-bg, @rarity-0-text); }
    &.rarity-1 { .rarity-badge(@rarity-1-bg, @rarity-1-text); }
    &.rarity-2 { .rarity-badge(@rarity-2-bg, @rarity-2-text); }
    &.rarity-3 { .rarity-badge(@rarity-3-bg, @rarity-3-text); }
  }

  .skill-category-selector {
    margin-bottom: 15px;
    .card-style();
  }

  .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;
    }
  }

  .ability-section {
    .card-style();
  }

  .ability-category-header {
    font-family: "DistressBlack", sans-serif;
    font-size: @font-size-14;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid @color-border-dark-3;
    padding-bottom: 5px;
  }

  .ability-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;

    label {
      flex: 1;
      font-size: @font-size-12;
      white-space: nowrap;
    }
  }

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

  .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;
    }
  }

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

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

  .hexa {
    .hexa-style();
    .transition();

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