dotfiles/eww/eww.scss

// ─────────────────────────────────────────────
//  Palette — tweak these to match your theme
// ─────────────────────────────────────────────
$bg:          rgba(0, 0, 0, 0.35);
$bg-surface:  rgba(0, 0, 0, 0.35);
$border:      rgba(255, 255, 255, 0);
$text:        #cdd6f4;
$subtext:     #6c7086;
$accent:      #89b4fa;
$accent2:     #cba6f7;
$green:       #a6e3a1;
$yellow:      #f9e2af;
$red:         #f38ba8;

// ─────────────────────────────────────────────
//  Reset / Base
// ─────────────────────────────────────────────
* {
  all: unset;
  font-family: "JetBrains Mono", "Iosevka", monospace;
  font-size: 12px;
  color: $text;
}

// ─────────────────────────────────────────────
//  Window margin (replaces calc() in geometry)
// ─────────────────────────────────────────────
.eww-bar {
  margin: 8px 10px 0 10px;
}

// ─────────────────────────────────────────────
//  Bar root
// ─────────────────────────────────────────────
.bar-left{
  background: $bg;
  border-radius: 8px;
  padding: 0 10px;
  min-height: 24px;
}

.bar-right, .bar-center {
  border-radius: 8px;
  padding: 0 10px;
  min-height: 24px;
}

.bar-left   { border-radius: 8px 8px 8px 8px; }
.bar-center { border-radius: 8px; }
.bar-right  { border-radius: 8px 8px 8px 8px; }

// ─────────────────────────────────────────────
//  Workspaces
// ─────────────────────────────────────────────
.workspaces {
  padding: 0 2px;
}

.workspace-btn {
  background: transparent;
  border-radius: 5px;
  color: $subtext;
  font-weight: bold;
  font-size: 11px;
  padding: 2px 7px;
  margin: 2px 0px;
  transition: all 200ms ease;

  &:hover {
    background: rgba(137, 180, 250, 0.12);
    color: $accent;
  }

  &.active {
    background: rgba(23, 142, 21, 0.778);
    color: $accent;
  }

  &.urgent {
    background: rgba(207, 42, 89, 0.732);
    color: $red;
  }
}

// ─────────────────────────────────────────────
//  Window title
// ─────────────────────────────────────────────
.window-title {
  padding-left: 4px;
  color: $subtext;

  .window-icon {
    font-size: 11px;
    color: $accent2;
    margin-right: 4px;
  }

  .window-text {
    font-size: 11px;
  }
}

// ─────────────────────────────────────────────
//  Clock
// ─────────────────────────────────────────────
.clock {
  padding: 0px 16px;

  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;

  .clock-time {
    font-weight: bold;
    font-size: 12px;
    color: $text;
    letter-spacing: 0.04em;
  }

  .clock-sep {
    color: $border;
  }

  .clock-date {
    font-size: 11px;
    color: $subtext;
  }
}

// ─────────────────────────────────────────────
//  Center buttons (logout / settings)
// ─────────────────────────────────────────────
.center-btn {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  color: $subtext;
  font-size: 13px;
  padding: 0px 16px;
  transition: all 150ms ease;

  &:hover {
    color: $accent;
    background: rgba(137, 180, 250, 0.10);
  }
}

// ─────────────────────────────────────────────
//  Stat pills (cpu / mem / battery / network / volume)
// ─────────────────────────────────────────────
.stat-pill {
  background: $bg-surface;
  border-radius: 6px;
  border: 1px solid $border;
  padding: 2px 8px;
  color: $text;

  .stat-icon {
    font-size: 12px;
    color: $accent;
  }

  .stat-value {
    font-size: 11px;
  }

  &.clickable {
    transition: background 150ms ease;
    &:hover {
      background: rgba(137, 180, 250, 0.14);
    }
  }

  &.charging .stat-icon { color: $green; }
  &.warning   .stat-icon { color: $yellow; }
  &.critical  .stat-icon { color: $red; }
}

// ─────────────────────────────────────────────
//  Theme toggle
// ─────────────────────────────────────────────
.theme-btn {
  .theme-icon {
    font-size: 13px;
    color: $accent2;
  }
}