vermine2047/less/actor/community.less

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

.system-vermine2047 .vermine2047.actor.community {
  .char-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    max-height: 130px;

    .community-portrait {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .char-name,
    .char-vermine2047 {
      border-bottom: none;
      line-height: 2rem;
    }

    .char-vermine2047 {
      font-size: 1.1rem;
    }

    .profile,
    .origin,
    .level,
    .population {
      width: 100%;
    }

    input[type="text"] {
      flex: 1;
      min-width: 0;
    }

    .level input,
    .population input {
      width: 60px;
      text-align: center;
    }
  }

  .community-section {
    padding: 8px;
    border: 1px solid @color-border-dark-4;
    background: fade(@color-chitin-dark, 20%);

    h3 {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-13;
      color: @theme-color-dark;
      margin: 0 0 8px;
      text-align: left;
      border-bottom: none;
    }
  }

  .community-linked-group {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border: 1px dashed @color-hemolymph;
    background: fade(@color-hemolymph, 8%);

    .label {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-11;
      color: @color-text-light-2;
    }
  }

  .community-size-info {
    margin: 6px 0 0;
    font-size: @font-size-11;
    color: @color-text-dark-secondary;
    opacity: 0.85;
  }

  .community-warning {
    margin: 6px 0 0;
    padding: 4px 8px;
    font-size: @font-size-11;
    font-weight: 700;
    color: @color-hemolymph;
    background: fade(@color-hemolymph, 12%);
    border: 1px solid @color-hemolymph;
  }

  .community-hint {
    margin: 0;
    font-size: @font-size-11;
    font-style: italic;
    color: @color-text-dark-secondary;
    opacity: 0.8;
  }

  // Jauges de Domaines
  .gauge {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid @color-border-dark-4;
    border-left: 4px solid @color-border-dark-4;

    label {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-11;
      color: @color-text-light-2;
    }

    input[type="number"] {
      width: 48px;
      text-align: center;
      padding: 2px;
    }

    .gauge-value {
      font-family: "DistressBlack", sans-serif;
      font-size: @font-size-16;
      color: @color-text-dark-header;
    }

    .gauge-state {
      font-family: "Roboto", sans-serif;
      font-size: @font-size-11;
      font-weight: 700;
      text-transform: uppercase;
    }

    &.crisis { border-left-color: @color-hemolymph; .gauge-state { color: @color-hemolymph; } }
    &.low { border-left-color: @color-honeycomb; .gauge-state { color: @color-honeycomb; } }
    &.stable { border-left-color: @color-acid-green; .gauge-state { color: @color-acid-green; } }
    &.opulent { border-left-color: @theme-color-accent; .gauge-state { color: @theme-color-accent; } }
  }

  .morale-level {
    font-family: "Roboto", sans-serif;
    font-size: @font-size-12;
    font-weight: 700;

    &.high { color: @color-acid-green; }
    &.normal { color: @color-text-dark-secondary; }
    &.low { color: @color-honeycomb; }
    &.crisis { color: @color-hemolymph; }
  }
}