scrying-pool/styles/components/_freeform-camera.less

//
// _freeform-camera.less — Floating camera window styles for freeform layout
//

//
// _freeform-camera.less — Floating camera window styles for freeform layout
//
// DOM structure (Foundry v14 ApplicationV2):
//   section.app-v2.application.window-content.scrying-pool.freeform-camera
//     header.window-header              ← title bar
//     section.window-content            ← inner wrapper for PARTS
//       section.freeform-camera__body   ← our template root
//         div.freeform-camera__video-container
//         div.freeform-camera__footer
//     footer.window-resizable-handle    ← resize grip
//

// ── Outer app element ─────────────────────────────────────────────────────
// Override Foundry's defaults with higher specificity + !important.
.scrying-pool.freeform-camera {
  border-radius: 4px !important;
  overflow: hidden !important;
}

// ── Window header — ultra-compact ─────────────────────────────────────────
.scrying-pool.freeform-camera > header.window-header {
  padding: 1px 6px !important;
  min-height: 0 !important;
  height: 22px !important;
  line-height: 20px !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0;
  gap: 2px;
}

.scrying-pool.freeform-camera .window-title {
  font-size: 10px !important;
  line-height: 18px !important;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #dde2e8;
}

.scrying-pool.freeform-camera .window-controls {
  gap: 1px;
}

.scrying-pool.freeform-camera .window-control {
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;

  i {
    font-size: 10px !important;
  }

  &:hover {
    background: rgba(255, 255, 255, 0.15) !important;
  }
}

.scrying-pool.freeform-camera .window-control.close {
  font-size: 13px !important;
  font-weight: 400;
}

// ── Inner content wrapper (Foundry's .window-content) ─────────────────────
.scrying-pool.freeform-camera > .window-content {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #000;
}

// ── Our body inside inner wrapper ─────────────────────────────────────────
.scrying-pool.freeform-camera .freeform-camera__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  color: #dde2e8;
}

.scrying-pool.freeform-camera .freeform-camera__video-container {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.scrying-pool.freeform-camera .freeform-camera__video-element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// ── Footer ────────────────────────────────────────────────────────────────
.scrying-pool.freeform-camera .freeform-camera__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 6px;
  gap: 4px;
  background: rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
  height: 18px;
}

.scrying-pool.freeform-camera .freeform-camera__footer-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.scrying-pool.freeform-camera .freeform-camera__footer-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.scrying-pool.freeform-camera .freeform-camera__control-btn {
  background: none;
  border: none;
  color: #dde2e8;
  cursor: pointer;
  padding: 1px 3px;
  font-size: 9px;
  line-height: 1;
  border-radius: 2px;
  transition: background 0.15s;

  &:hover { background: rgba(255, 255, 255, 0.15); }
  &:active { background: rgba(255, 255, 255, 0.25); }

  i { font-size: 9px; }
}

.scrying-pool.freeform-camera .freeform-camera__name {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

// ── Volume slider ─────────────────────────────────────────────────────────
.scrying-pool.freeform-camera .freeform-camera__volume {
  width: 44px;
  height: 10px;
  accent-color: #4a9eff;
  cursor: pointer;
  margin: 0;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a9eff;
    border: none;
  }

  &::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a9eff;
    border: none;
  }

  &::-webkit-slider-runnable-track { height: 2px; }
  &::-moz-range-track { height: 2px; }
}

// ── Spotlight glow ────────────────────────────────────────────────────────
.scrying-pool.freeform-camera.is-spotlight {
  box-shadow: 0 0 10px 2px #ffd700;
  border-color: #ffd700;
}

.scrying-pool.freeform-camera.is-spotlight > header.window-header {
  border-bottom-color: #ffd700 !important;
}