scrying-pool/templates/settings.hbs

<form class="scrying-pool scrying-pool-settings">
  <div class="scrying-pool-settings__inner">
    <!-- Drag grip -->
    <div class="scrying-pool-settings__grip" title="Drag to move">
      <i class="fa-solid fa-grip-lines"></i>
    </div>
    
    <!-- Close button -->
    <button type="button" class="scrying-pool-settings__close-btn" data-action="close">
      <i class="fa-solid fa-times"></i>
    </button>
    
    <!-- Header -->
    <div class="scrying-pool-settings__header">
      <h2 class="scrying-pool-settings__title">{{localize "SCRYING_POOL.Settings.Title"}}</h2>
      <p class="scrying-pool-settings__hint">{{localize "SCRYING_POOL.Settings.Hint"}}</p>
    </div>

    <!-- Content -->
    <div class="scrying-pool-settings__content">
      <div class="scrying-pool-settings__status">
        <label class="scrying-pool-settings__label">{{localize "SCRYING_POOL.Settings.StripStatus"}}</label>
        {{#if hasStrip}}
          <button type="button" data-action="close-strip" class="scrying-pool-settings__btn scrying-pool-settings__btn--close">
            <i class="fa-solid fa-eye-slash"></i> {{localize "SCRYING_POOL.Settings.CloseStrip"}}
          </button>
        {{else}}
          <button type="button" data-action="reopen-strip" class="scrying-pool-settings__btn scrying-pool-settings__btn--reopen">
            <i class="fa-solid fa-eye"></i> {{localize "SCRYING_POOL.Settings.ReopenStrip"}}
          </button>
        {{/if}}
      </div>
    </div>
  </div>

  <style>
    /* Match Director's Board styling */
    .scrying-pool-settings {
      background: linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
      color: var(--sp-text-primary, #dde2e8);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 2px solid hsl(200, 55%, 40%);
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
                  inset 0 1px 0 rgba(255, 255, 255, 0.04);
      min-width: 320px;
    }

    /* Hide Foundry's default window header */
    .scrying-pool-settings header.window-header {
      display: none;
    }

    .scrying-pool-settings__inner {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Drag grip */
    .scrying-pool-settings__grip {
      width: 100%;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      color: var(--sp-text-muted, hsl(0, 0%, 70%));
      opacity: 0.35;
      font-size: 10px;
      flex-shrink: 0;
      transition: opacity 0.15s, background 0.15s;
      user-select: none;
      border-radius: 8px 8px 0 0;
    }

    .scrying-pool-settings__grip:hover {
      opacity: 0.8;
      background: rgba(255, 255, 255, 0.03);
    }

    .scrying-pool-settings__grip:active {
      cursor: grabbing;
      opacity: 1;
    }

    /* Close button */
    .scrying-pool-settings__close-btn {
      position: absolute;
      top: 2px;
      right: 6px;
      z-index: 10;
      width: 20px;
      height: 20px;
      padding: 0;
      line-height: 20px;
      font-size: 14px;
      font-weight: 400;
      background: transparent;
      color: var(--sp-text-muted, hsl(0, 0%, 70%));
      border: none;
      border-radius: 3px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.15s, background 0.15s, color 0.15s;
    }

    .scrying-pool-settings__close-btn:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 0.08);
      color: var(--sp-text-primary, #dde2e8);
    }

    .scrying-pool-settings__close-btn:active {
      opacity: 0.75;
    }

    /* Header */
    .scrying-pool-settings__header {
      padding: 12px 16px 8px;
    }

    .scrying-pool-settings__title {
      margin: 0 0 4px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--sp-text-primary, #dde2e8);
      text-align: center;
    }

    .scrying-pool-settings__hint {
      margin: 0;
      font-size: 12px;
      color: var(--sp-text-muted, hsl(0, 0%, 60%));
      text-align: center;
      line-height: 1.4;
    }

    /* Content */
    .scrying-pool-settings__content {
      padding: 8px 16px 16px;
      display: flex;
      justify-content: center;
    }

    .scrying-pool-settings__status {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .scrying-pool-settings__label {
      font-size: 12px;
      color: var(--sp-text-muted, hsl(0, 0%, 65%));
      font-weight: 500;
    }

    /* Buttons */
    .scrying-pool-settings__btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      cursor: pointer;
      transition: background 0.15s, opacity 0.15s, transform 0.1s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

      i {
        font-size: 12px;
        pointer-events: none;
      }

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
      }

      &:active {
        transform: translateY(0);
        opacity: 0.9;
      }
    }

    .scrying-pool-settings__btn--reopen {
      background: linear-gradient(175deg, hsl(120, 60%, 30%) 0%, hsl(120, 60%, 25%) 100%);
      color: #d0f0d0;
      border: 1px solid rgba(0, 255, 0, 0.3);

      &:hover {
        background: linear-gradient(175deg, hsl(120, 60%, 35%) 0%, hsl(120, 60%, 30%) 100%);
      }
    }

    .scrying-pool-settings__btn--close {
      background: linear-gradient(175deg, hsl(0, 60%, 30%) 0%, hsl(0, 60%, 25%) 100%);
      color: #f0d0d0;
      border: 1px solid rgba(255, 0, 0, 0.3);

      &:hover {
        background: linear-gradient(175deg, hsl(0, 60%, 35%) 0%, hsl(0, 60%, 30%) 100%);
      }
    }
  </style>
</form>