dotfiles/de/home/.config/eww/style/bar.scss

$bar-reveal-children-bg-color: rgba($color0, 0.1);

.bar {
  font-size: 1.05em;
  padding: 10px 0px 10px;
  margin: 0px 15px;

  .leftgroup,
  .centergroup,
  .rightgroup {
    background-color: $bar-bg-color;
    border-radius: $bar-module-border-radius;
    border: 3px solid $bar-module-fg-color;
    box-shadow: 0px 0px 9px 0px $bar-module-fg-color;
//    &>box:not(.workspaces),
//    &>box.revealer-on-hover,
    .revealer-on-hover>widget>box>box>*,
//    .revealer-on-hover>widget>box>box>button,
    .reveal_children>*,
    &>button,
    &>label {
      color: $bar-module-fg-color;
//      background-color: $bar-bg-color;
      border-radius: $bar-module-border-radius;
      margin: 0px 5px;
//      padding: 0px 5px;
//      margin-left: -5px;
      min-width: $bar-module-width;
//      border: 2px solid $bar-module-fg-color;
//      background-color: $bar-module-bg-color;
//      box-shadow: 4px 0 3px -2px $bar-module-fg-color;
    }
    .revealer-on-hover>widget>box>box>* {
//    .revealer-on-hover>widget>box>box>button {
//      margin-right: 0px;
      border-radius: 8px;
    }
    .revealer-on-hover>widget>box>box>*,
//    .revealer-on-hover>widget>box>box>button,
    .reveal_children>*,
//    &>box.revealer-on-hover:not(:last-child),
    &>button,
    &>label {
//      &>:not(:last-child) {
        box-shadow: 3px 0 3px -2px $bar-module-fg-color;
//      }
//      margin-left: -5px;
    }
//    .revealer-on-hover:not(:last-child) {
//      margin: 0px 10px;
//    }
    .revealer-on-hover.true {
      background-color: $bar-reveal-children-bg-color;
      border-radius: 8px;
    }
    .reveal_children {
//      background-color: $bar-reveal-children-bg-color;
      border-radius: 0px $bar-module-border-radius $bar-module-border-radius 0px;
    }
    .reveal_children>* {
      margin-left: -6px;
//      background-color: $bar-reveal-children-bg-color;
//      margin: 0px;
//      border-radius: 0px $bar-module-border-radius $bar-module-border-radius 0px;
//      padding: -10px;
//      &:first-child {
//        margin-left: 5px;
//        color: red;
//        box-shadow: -4px 0px 2px -2px red, 5px 0 3px -2px $bar-module-fg-color;
//      }
    }
  }

  .workspaces {
    color: $bar-module-fg-color;
//    border-radius: $bar-module-border-radius;
    margin: 0px 5px;
//    min-width: $bar-module-width;
//    border: 2px solid $bar-module-fg-color;
//    background-color: $bar-module-bg-color;
//    margin-left: 5px;
    revealer {
     
      &.ws-left {
        padding-left: 5px;
      }
      &.ws-right {
        padding-right: 1px;
      }
    }
    button {
      min-width: 35px;
      transition: all 0.3s;
//      padding: 0px 0px;
      &.left {
//        border-right: 1px solid $bar-module-fg-color;
//        border-left: 1px solid $bar-module-fg-color;
        margin-right: -2px;
        border-radius: $bar-module-border-radius - 2;
        box-shadow: -4px 0 3px -2px $bar-module-fg-color;
//        background-color: $bar-reveal-children-bg-color;
      }
      &.center {
        color: $bar-module-fg-color;
        border-radius: $bar-module-border-radius;
        box-shadow: 0 0 2px 1px $bar-module-fg-color;
      }
      &.right {
//        border-left: 1px solid $bar-module-fg-color;
//        border-right: 1px solid $bar-module-fg-color;
        margin-left: -2px;
        border-radius: $bar-module-border-radius - 1;
        box-shadow: 4px 0 3px -2px $bar-module-fg-color;
//        background-color: $bar-reveal-children-bg-color;
      }
      label {
        padding: 4px 6px;
        margin-right: -10px;
      }
      .workspace-number {
        margin: 0px;
        margin-left: 2px;
        margin-top: -15px;
        padding: 0px;
        font-size: 0.6em;
      }
      &:hover {
        text-shadow: $bar-module-hover-shadow;
        color: $bar-hover-fg-color;
      }
    }
  }
  scale trough,
  progressbar>trough {
    background-color: $color9;
    min-width: 50px;
    min-height: 10px;
    border-radius: 4px;
  }
  scale trough highlight,
  progressbar>trough>progress {
    background-color: $color2;
    border-radius: 4px;
    min-height: 10px;
    transition: box-shadow 0.3s;
    &:hover{
      box-shadow: 0px 0px 0px 2px $color2;
    }
  }
  circular-progress {
    color: $color9;
    background-color: $color2;
  }
  &>box>button,
  &>box>label,
  .bar-module>button,
  .bar-module>label,
//  .revealer-on-hover>widget>box>box>*,
  .revealer-on-hover>widget>box>box>button,
  .reveal_children>* {
    padding: 0px 5px;
    min-width: $bar-module-width;
    transition: all 0.3s;
    &:hover {
      color: $bar-hover-fg-color;
      text-shadow: $bar-module-hover-shadow;
    }
  }
//  .reveal_children>* {
//    border-left: 1px solid $bar-module-fg-color;
//  }
  .tray>widget>image,
  .scratchpad>button>image {
    padding: 3px 4px;
    min-width: $bar-module-width;
  }
  .tray>widget,
  .scratchpad>button {
    image{
      opacity: 0.4;
      transition: all 0.3s;
      border-radius: 4px;
    }
    &:hover,&:hover image {
      opacity: 1;
    }
  }
  .datetime {
    font-weight: bold;
  }
//  .chevron {
//    margin-right: 10px;
//  }
  .chevron box {
    border: 2px solid transparent;
    box-shadow: 8px -8px 10px -8px black;
  }
}