fvtt-oath-hammer/less/base.less

// ============================================================
// BASE — Fonts, :root CSS vars, global form elements
// ============================================================

@font-face {
  font-family: "Sherwood";
  src: url("../assets/fonts/Sherwood.otf") format("opentype"),
       url("../assets/fonts/SHERWOOD.TTF") format("truetype"),
       url("../assets/fonts/Sherwood.woff") format("woff");
}
@font-face {
  font-family: "BlueDragon";
  src: url("../assets/fonts/Blue Dragon.ttf") format("truetype");
}

:root {
  --oh-font-primary:    @font-primary;
  --oh-font-secondary:  @font-secondary;
  --oh-font-body:       @font-body;
  --oh-font-size:       @font-size-base;
  --oh-color-blue:      @color-blue;
  --oh-color-olive:     @color-olive;
  --oh-color-gold:      @color-gold;
  --oh-color-dark:      @color-dark;
  --oh-color-paper:     @color-paper;
  --oh-background-image: url("../assets/ui/oath_hammer_paper.webp");
  --oh-logo:            url("../assets/logos/official_logo_01.webp");
}

// Global dialog styling
.application.dialog.oathhammer {
  font-family: @font-body;
  font-size: @font-size-base;
  .sheet-background();
}

// Shared actor content base
.oathhammer .character-content,
.oathhammer .npc-content,
.oathhammer .settlement-content {
  font-family: @font-body;       // Calibri — standard text per design_rules.md
  font-size: @font-size-base;
  color: @color-dark;
  .sheet-background();
  overflow: auto;
  padding: 10px 20px;            // Inner margin so content clears the parchment border

  nav.tabs [data-tab] {
    color: @color-olive;
    &.active { color: @color-blue; }
  }

  input:disabled,
  select:disabled {
    background-color: @color-disabled-bg;
    border-color: transparent;
    color: @color-dark;
  }

  input,
  select {
    height: 1.5rem;
    background-color: @color-input-bg;
    border-color: @color-blue;
    color: @color-dark;
  }

  // Character/NPC name — decorative title font
  input[name="name"] {
    height: 2.5rem;
    font-family: @font-primary;   // Sherwood — decorative title
    font-size: @font-size-xl;
    font-weight: bold;
    border: none;
    border-bottom: 2px solid @color-blue;
    background: transparent;
  }

  fieldset {
    margin-bottom: 4px;
    border-radius: 4px;
    border-color: @color-olive;
  }

  legend {
    font-family: @font-secondary;  // BlueDragon — section headers
    font-size: @font-size-lg;
    font-weight: bold;
    letter-spacing: 1px;
    color: @color-blue;
  }

  label {
    font-family: @font-secondary;  // BlueDragon — UI labels
    font-size: @font-size-base;
    color: @color-dark;
  }
}

// Shared tab padding
.oathhammer .tab {
  padding: 4px;
}

// ============================================================
// PROSEMIRROR / HTML EDITOR — force dark text on parchment
// Foundry v13 uses ProseMirror for HTMLField rendering.
// Default theme uses light text; we override for readability.
// ============================================================
.oathhammer {
  // The prose-mirror custom element itself (view + edit)
  prose-mirror {
    color: @color-dark !important;
    background: transparent;
  }

  // View mode (inactive): only force text color, do NOT touch layout/height
  prose-mirror.inactive,
  prose-mirror[toggled] {
    color: @color-dark !important;
  }

  // The editor-content div (used in both modes)
  .editor-content,
  .prosemirror .editor-content,
  prose-mirror .editor-content {
    color: @color-dark !important;
    background: transparent;

    p, li, span, div, blockquote, h1, h2, h3, h4, h5, h6 {
      color: @color-dark !important;
    }

    a { color: @color-blue; }
  }

  // Edit mode: the ProseMirror editable surface
  .ProseMirror,
  .prosemirror .editor-container .ProseMirror {
    color: @color-dark !important;
    background-color: fade(@color-paper, 60%);
    border: 1px solid @color-blue;
    border-radius: 3px;
    padding: 4px 6px;
    min-height: 4rem;

    p, li, span { color: @color-dark !important; }
    a { color: @color-blue; }

    // ProseMirror placeholder ghost text
    &.ProseMirror-empty::before {
      color: fade(@color-dark, 45%);
    }
  }

  // Editor toolbar
  .editor-toolbar {
    background: fade(@color-blue, 10%);
    border-bottom: 1px solid @color-olive;

    .control-icon,
    button {
      color: @color-blue;
      &:hover { color: @color-dark; background: fade(@color-gold, 20%); }
    }
  }
}

// ============================================================
// SKILLS TAB
// ============================================================
.oathhammer .skills-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;

  .skills-group {
    margin: 0;

    legend .attr-rank {
      font-family: @font-body;
      font-size: @font-size-sm;
      color: @color-olive;
    }
  }

  .skills-header,
  .skill-row {
    display: grid;
    grid-template-columns: 1fr 2.5rem 2.5rem 2.5rem 5.5rem;
    align-items: center;
    gap: 4px;
  }

  .skills-header {
    font-family: @font-secondary;
    font-size: @font-size-sm;
    font-weight: bold;
    color: @color-blue;
    border-bottom: 1px solid @color-olive;
    margin-bottom: 2px;
    padding-bottom: 2px;

    span { text-align: center; }
    .skill-name-col { text-align: left; }
  }

  .skill-row {
    margin-bottom: 2px;

    label.skill-name-col {
      font-size: @font-size-xs;
      font-weight: bold;
    }

    .skill-rank-col select,
    .skill-modifier-col input {
      width: 100%;
      text-align: center;
      font-size: @font-size-sm;
      padding: 1px 2px;
    }

    .skill-color-col {
      display: flex;
      align-items: center;
      gap: 2px;

      .color-dice-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        border: 1px solid rgba(0,0,0,0.3);

        &.color-dice-white { background: #f0f0f0; }
        &.color-dice-red   { background: #d9534f; }
        &.color-dice-black { background: #222; }
      }

      .color-dice-select {
        flex: 1;
        font-size: @font-size-sm;
        padding: 1px 1px;
        min-width: 0;
      }

      input[type="number"] {
        width: 2.2rem;
        text-align: center;
        font-size: @font-size-sm;
        padding: 1px 2px;
        flex-shrink: 0;
      }
    }

    .skill-total {
      text-align: center;
      font-weight: bold;
      color: @color-blue;
    }
  }
}