nixos-dotfiles/user/configs/wayland/eww/config/eww.scss

$bg: rgb(40, 40, 40);
$fg: rgb(235, 219, 178);

$widgetbg: rgb(80, 73, 69);
$border: rgb(102, 92, 84);

$wsfg: rgb(235, 219, 178);
$wsbg: rgb(60, 56, 54);
$activewsbg: rgb(102, 92, 84);

$border_radius: 6px;

* {
  all: unset;
  min-width: 0;
}

.panel {
  background: rgba($bg, 0.8);
  color: $fg;
  font-size: 14px;

  border-bottom: 4px solid $border;

  @mixin widget {
    font-size: 12px;

    background-color: $widgetbg;

    margin-top: 0.25em;
    margin-bottom: 0.25em;
    margin-left: 0.8em;
    margin-right: 0.8em;

    padding-left: 0.8em;
    padding-right: 0.8em;

    border-radius: $border-radius;
  }

  .widget-workspace {
    @include widget;
    padding: 0;

    .workspace {
      font-size: 14px;
    }

    .workspace-button {
      padding: 0 1em 0 1em;

      :first-child {
        border-radius: $border-radius 0 0 $border-radius;
      }

      :last-child {
        border-radius: 0 $border-radius $border-radius 0;
      }
    }

    .workspace-active {
      background: $fg;
      color: $bg;
      border-radius: $border-radius;
    }
  }

  .widget-activewindow {
    font-size: 12px;
    margin: 0 0 0 1em;
  }

  .widget-systray {
    @include widget;

    menu,
    menu menu {
      font-size: 14px;
      border-radius: $border-radius;

      background: $widgetbg;
      color: $fg;
      border: 1px solid $border;

      padding: 0.3em;

      :hover {
        background: $fg;
        color: $widgetbg;
      }

      >separator {
        border-top: 1px solid;
        margin: 0.5em 0 0.5em 0;
        padding: 0;
      }
    }
  }

  .widget-music {
    @include widget;
  }

  .widget-time {
    @include widget;
    font-size: 14px;
  }
}