eww-brand-new/.config/eww/eww.scss
//// Catppuccin mocha
//$rosewater: #f5e0dc;
//$flamingo: #f2cdcd;
//$pink: #f5c2e7;
//$mauve: #cba6f7;
//$red: #f38ba8;
//$maroon: #eba0ac;
//$peach: #fab387;
//$yellow: #f9e2af;
//$green: #a6e3a1;
//$teal: #94e2d5;
//$sky: #89dceb;
//$sapphire: #74c7ec;
//$blue: #89b4fa;
//$lavender: #b4befe;
//$text: #cdd6f4;
//$subtext1: #bac2de;
//$subtext0: #a6adc8;
//$overlay2: #9399b2;
//$overlay1: #7f849c;
//$overlay0: #6c7086;
//$surface2: #585b70;
//$surface1: #45475a;
//$surface0: #313244;
//$base: #1e1e2e;
//$mantle: #181825;
//$crust: #11111b;

// Gruvbox dark
//$rosewater: #d4be98; // Gruvbox light beige
//$flamingo: #ea6962; // Gruvbox light red
//$pink: #d3869b; // Gruvbox purple
//$mauve: #d3869b; // Gruvbox purple (reused as closest match)
//$red: #ea6962; // Gruvbox red
//$maroon: #c14a4a; // Gruvbox dark red
//$peach: #e78a4e; // Gruvbox orange
//$yellow: #d8a657; // Gruvbox yellow
//$green: #a9b665; // Gruvbox green
//$teal: #89b482; // Gruvbox aqua
//$sky: #89b482; // Gruvbox aqua (reused)
//$sapphire: #7daea3; // Gruvbox blue-green
//$blue: #7daea3; // Gruvbox blue
//$lavender: #89b482; // Gruvbox aqua (reused)
//$text: #ebdbb2; // Gruvbox fg
//$subtext1: #d5c4a1; // Gruvbox fg1
//$subtext0: #bdae93; // Gruvbox fg2
//$overlay2: #a89984; // Gruvbox fg3
//$overlay1: #928374; // Gruvbox fg4
//$overlay0: #7c6f64; // Gruvbox gray
//$surface2: #504945; // Gruvbox bg2
//$surface1: #3c3836; // Gruvbox bg1
//$surface0: #32302f; // Gruvbox bg0_s
//$base: #282828; // Gruvbox bg0
//$mantle: #1d2021; // Gruvbox bg0_h
//$crust: #1b1b1b; // Gruvbox bg0_h (slightly darker)


// Gruvbox light
$rosewater: #af3a03;
$flamingo: #9d2b22;
$pink: #8f3f71;
$mauve: #8f3f71;
$red: #b83229;
$maroon: #9a3a34;
$peach: #d65d0e;
$yellow: #b57e22;
$green: #7c7b20;
$teal: #4a8568;
$sky: #427b58;
$sapphire: #076678;
$blue: #1a7088;
$lavender: #427b58;

$text: #3c3836;
$subtext1: #504945;
$subtext0: #665c54;
$overlay2: #7c6f64;
$overlay1: #928374;
$overlay0: #a89984;

$surface2: #d5c4a1;
$surface1: #ebdbb2;
$surface0: #f2e5bc;
$base: #fbf1c7;
$mantle: #e9dbb1;
$crust: #e0cfa0;

* {
  all: unset;
}

window {
  font-family: "NotoSans Nerd Font", sans-serif;
  background-color: $base;
}

.bar {
  padding-left: 7px;
  padding-right: 7px;
}

.workspace {
  margin: 3px;
  padding: 0px;
}

.icon {
  margin: 0 5px;
  color: $text;
}

.icon.single-icon {
  margin: 0;
}

.mic {
  .icon.running {
    color: $green;
  }
}

.workspaces {
  font-size: 10px;

  .workspace {
    padding: 2px 1px;
    border-radius: 5px;

    .column {
      padding: 0px 4px;
    }

  }

  .workspace.empty {
    padding: 9px 9px;
  }

  .workspace.active {
    background-color: $surface2;
  }


  widget:nth-child(1) .workspace {
    .column {
      color: $red;
    }
  }

  widget:nth-child(2) .workspace {
    .column {
      color: $peach;
    }
  }

  widget:nth-child(3) .workspace {
    .column {
      color: $yellow;
    }
  }

  widget:nth-child(4) .workspace {
    .column {
      color: $green;
    }
  }


  widget:nth-child(5) .workspace {
    .column {
      color: $sky;
    }
  }

  widget:nth-child(6) .workspace {
    .column {
      color: $sapphire;
    }
  }


  widget:nth-child(7) .workspace {
    .column {
      color: $pink;
    }
  }

  widget .workspace {
    .column {
      color: $overlay2;
    }
  }

  widget .workspace .column.focused {
    color: $text;
  }
}


.bluetooth,
.battery,
.time,
.date,
.tray,
.speakers,
.mic,
.player .wifi {
  color: $text;
  font-size: 12px;
}

.battery,
.time,
.date {
  font-size: 10px;
}

.player {
  .icon.play {
    color: $green;
  }

  .icon.pause {
    color: $red;
  }
}


.battery {
  label.icon1 {
    margin-right: 0;
  }

  label.icon2 {
    margin-left: 0;
  }

  .icon1.charging {
    color: $green;
  }

  .icon1.discharging {
    color: $peach;
  }

  .icon.level_0,
  .icon.level_1 {
    color: $red;
  }

  .icon.level_2 {
    color: $peach;
  }

  .icon.level_3 {
    color: $yellow;
  }

  .icon.level_4,
  .icon.level_5,
  .icon.level_6,
  .icon.level_7,
  .icon.level_8 {
    color: $green;
  }

  .icon.level_9,
  .icon.level_10 {
    color: $mauve;
  }
}

.text {
  font-size: 10px;
}

.tooltip {
  background-color: $surface0;
  color: $text;
  font-size: 12px;
}

.bluetooth {
  .icon.connected {
    color: $green;
  }
}

.camera {
  .icon.connected {
    color: $green;
  }
}

.icon.muted {
  color: $red;
}

.wifi {
  .icon.connected {
    color: $green;
  }
}

.tray image {
  -gtk-icon-transform: scale(0.5);
}

.date,
.time {
  .text {
    color: $overlay2;
  }
}

scale trough {
  background-color: $surface1;
  border-radius: 2px;
  min-height: 5px;
  min-width: 50px;
}

scale trough highlight {
  background-color: $green;
  border-radius: 2px;
}

scale.over trough highlight {
  background-color: $peach;
  border-radius: 2px;
}
