dotfiles/home/.config/eww/eww.scss

// Sakura Line - eww design system.
// The same tokens as polybar, rofi and dunst: the theme's alpha, 1px border,
// 12px radius, rows with an 8px radius and a 17% accent tint on hover.
// colors.scss is a link to ~/.local/state/rice/theme/eww-colors.scss.
@import "colors";

$tint: rgba($accent, 0.17);

* {
  all: unset;
  font-family: $font, "Symbols Nerd Font";
}

window, .closer { background-color: transparent; }

tooltip {
  background-color: rgba($bg, 0.95);
  border: $border-width solid $border;
  border-radius: $radius-small;
  padding: 6px 10px;
  color: $fg;
  font-size: 11px;
}

// ------------------------------------------------------------------ panel
.panel {
  background-color: rgba($bg, $alpha);
  border: $border-width solid $border;
  border-radius: $radius;
  padding: 4px 8px 10px 8px;
  color: $fg;
  font-size: 13px;
}

.head {
  padding: 10px 10px 12px 10px;
  margin-bottom: 6px;
  border-bottom: $border-width solid $border;
}
.title { font-weight: bold; font-size: 14px; }

.head-action {
  color: $dim;
  font-size: 15px;
  padding: 2px 7px;
  margin-left: 2px;
  border-radius: $radius-small;
}
.head-action:hover  { color: $fg; background-color: $tint; }
.head-action.active { color: $accent; }

.section {
  color: $dim;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 10px 4px 10px;
}

.sep {
  min-height: 1px;
  margin: 6px 4px;
  background-color: $border;
}

.empty { color: $dim; padding: 8px 10px; }

// -------------------------------------------------------------------- rows
.row {
  padding: 8px 10px;
  border-radius: $radius-small;
}
.row:hover { background-color: $tint; }
.row.active .row-title, .row.active .glyph { color: $accent; }
.row.dimmed .row-title, .row.dimmed .glyph { color: $dim; }

.glyph     { font-size: 15px; min-width: 24px; margin-right: 10px; }
.row-title { color: $fg; }
.row-sub   { color: $dim; font-size: 11px; margin-top: 1px; }
.row-value { color: $dim; margin-left: 10px; }
.chev      { color: $dim; margin-left: 8px; font-size: 15px; }

.accent { color: $accent; }
.urgent { color: $urgent; }
.good   { color: $green; }
.warn   { color: $yellow; }
.dim    { color: $dim; }

// ---------------------------------------------------------------- controls
.slider-row:hover { background-color: transparent; }
.slider-row .glyph { padding: 2px 0; border-radius: $radius-small; }
.slider-row .glyph:hover { color: $accent; }
.slider-value { min-width: 48px; }

scale trough {
  min-height: 6px;
  min-width: 140px;
  margin: 0 4px;
  border-radius: 3px;
  background-color: $selection;
}
scale highlight {
  border-radius: 3px;
  background-color: $accent;
}
scale slider {
  min-width: 12px;
  min-height: 12px;
  margin: -3px;
  border-radius: 6px;
  background-color: $fg;
}

.switch {
  min-width: 30px;
  min-height: 16px;
  padding: 2px;
  border-radius: 10px;
  background-color: $selection;
}
.switch.on { background-color: rgba($accent, 0.55); }
.knob {
  min-width: 12px;
  min-height: 12px;
  border-radius: 6px;
  background-color: $dim;
}
.switch.on .knob { background-color: $fg; }

.pill {
  padding: 4px 10px;
  margin: 0 3px;
  border-radius: $radius-small;
  color: $dim;
}
.pills       { padding: 2px 6px 6px 6px; }
.pill:hover  { color: $fg; background-color: $tint; }
.pill.active { color: $accent; background-color: $tint; }

.field {
  padding: 8px 10px;
  border-radius: $radius-small;
  background-color: rgba($surface, 0.8);
  color: $fg;
  caret-color: $accent;
}

progressbar trough {
  min-height: 4px;
  border-radius: 2px;
  background-color: $selection;
}
progressbar progress {
  min-height: 4px;
  border-radius: 2px;
  background-color: $accent;
}

// ---------------------------------------------------------------- calendar
.cal-title { font-weight: bold; }
.cal-grid  { margin: 4px 4px 2px 4px; }
.cal-dow, .cal-wk { color: $dim; font-size: 10px; font-weight: bold; min-height: 22px; }
.cal-wk    { min-width: 26px; }
.cal-day {
  min-width: 34px;
  min-height: 30px;
  border-radius: $radius-small;
  color: $fg;
}
.cal-day:hover    { background-color: $tint; }
.cal-day.other    { color: $muted; }
.cal-day.weekend  { color: $fg-alt; }
.cal-day.selected { background-color: $tint; color: $accent; }
.cal-day.today    { background-color: $accent; color: $bg; font-weight: bold; }
.cal-dot          { color: $magenta; font-size: 8px; min-height: 8px; }
.cal-day.today .cal-dot { color: $bg; }

.event-time { color: $accent; min-width: 52px; font-size: 12px; }
.event-bar  { min-width: 3px; border-radius: 2px; margin-right: 10px; background-color: $magenta; }
.event-bar.reminder { background-color: $yellow; }

// ------------------------------------------------------------------- media
.art {
  min-width: 72px;
  min-height: 72px;
  border-radius: $radius-small;
  background-size: cover;
  background-position: center;
  background-color: $surface;
}
.media-title  { font-weight: bold; }
.media-artist { color: $dim; font-size: 12px; }
.media-btn {
  font-size: 18px;
  padding: 4px 12px;
  border-radius: $radius-small;
}
.media-btn:hover { background-color: $tint; color: $accent; }
.media-time { color: $dim; font-size: 10px; }

// ----------------------------------------------------------- notifications
// The event box takes the hover tint; GTK ignores padding on event boxes,
// so the box inside it carries the padding.
.notif-hit       { border-radius: $radius-small; }
.notif-hit:hover { background-color: $tint; }
.notif           { padding: 8px 10px; }
.notif.critical .notif-summary { color: $urgent; }
.notif-app     { color: $dim; font-size: 10px; font-weight: bold; }
.notif-summary { font-weight: bold; }
.notif-body    { color: $fg-alt; font-size: 12px; }
.notif-ago     { color: $dim; font-size: 10px; }
.notif-close {
  color: $dim;
  padding: 0 6px;
  border-radius: $radius-small;
  font-size: 13px;
}
.notif-close:hover { color: $urgent; background-color: rgba($urgent, 0.15); }