// Styling for the now-playing and idle-gallery weather-overlay widgets. Installed
// to /home/<KIOSK_USERNAME>/.config/eww/eww.scss by build-thin-client-iso.sh.
//
// eww compiles SCSS itself (bundled grass), so nothing on the image needs a Sass
// toolchain. eww.scss rather than eww.css because every eww release supports the
// former, while plain eww.css is only honoured by newer builds.

$bg: rgba(16, 16, 20, 0.88);
$fg: #e8e8ec;
$muted: #9a9aa6;

.np-root {
  background-color: $bg;
  border-radius: 12px;
  padding: 12px;
  color: $fg;
  font-family: sans-serif;
}

.np-art {
  border-radius: 8px;
}

.np-title {
  font-size: 15px;
  font-weight: 600;
  color: $fg;
}

.np-artist {
  font-size: 13px;
  color: $muted;
}

.np-controls {
  margin-left: 8px;
}

.np-btn {
  font-size: 20px;
  color: $fg;
  background-color: transparent;
  border: none;
  padding: 4px 8px;

  &:hover {
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 6px;
  }
}

// Idle-gallery weather/clock overlay. Text-shadow rather than a background card —
// a solid panel over someone's photo would fight the point of a photo slideshow, so
// this reads like on-screen text (photo-frame convention) instead of a floating box.
.wo-root {
  color: $fg;
  font-family: sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}

.wo-time {
  font-size: 46px;
  font-weight: 700;
  color: $fg;
}

.wo-date {
  font-size: 16px;
  font-weight: 500;
  color: $muted;
}

.wo-weather {
  margin-top: 6px;
}

.wo-location,
.wo-temp,
.wo-condition {
  font-size: 15px;
  color: $fg;
}

.wo-sep {
  font-size: 15px;
  color: $muted;
}