illogical-impulse/early/.config/eww/css/_overview.scss

.overview-window {
  @include window;
  font-family: 'Rubik', 'Material Symbols Rounded';
  border-radius: 22px;
  background-color: shade($colorbarbg, 4%);
  // background-color: transparent;
  // border: 3px solid $color0;
  //padding: 5px;
}

.overview-window-title {
  font-size: 15pt;
  color: $onPrimaryContainer;
  border-radius: 15px;
  background-color: tint($surface, 5%);
  margin: 4px;
  padding: 4px;
  min-height: 30px;
  background-image: linear-gradient(135deg, $onSecondary 15%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 33%, $onSecondary 33%, $onSecondary 68%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 95%, $onSecondary 95%);
}

.overview-window-top {
  @include rounding;
  background-color: transparent;
  border: 3px solid transparent;
  //padding: 5px;
}

.overview-ws {
  border: 2px solid;
  border-radius: 15px;
  background-color: tint($surface, 2%);
  margin: 4px;
}

.overview-ws-true {
  color: $primary;
}

.overview-ws-false {
  color: transparent;
}

.overview-ws-window {
  border-radius: 15px;
  background-color: shade($surface0, 2%);
  border: 1px solid $surface0;
  border-top: 1px solid tint($surface0, 5%);
}

.overview-ws-window-content {
  border-radius: 11px;
  // background-color: rgba(135, 147, 163, 0.7);
}

.overview-topbar-icon {
  min-width: 30px;
  min-height: 30px;
  margin: 5px;
  background-size: contain;
}

.overview-topbar-button {
  min-width: 30px;
  min-height: 30px;
  margin: 5px;
  border-radius: 8px;
}

.overview-topbar-button:hover {
  background-color: $overlay0;
}

.overview-icon {
  background-repeat: no-repeat;
  background-position: center;
}

.overview-background {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  border-radius: 15px;
}

.overview-ws-text {
  //padding-left: 5px;
  font-size: 13pt;
}

.overview-ws-subtext {
  //padding-left: 5px;
  font-size: 9pt;
}

.overview-ws-number {
  //Note: height 100px width 356px
  font-size: 25pt;
  border-radius: 11px;
  background-color: $overlay0;
  color: $onBackground;
  //margin: 10px;
  min-height: 40px;
  min-width: 40px;
}

.overview-title {
  font-weight: bold;
  font-size: 15pt;
  //padding-top: .6rem;
  //padding-bottom: .6rem;
}

.overview-search-box {
  border: 2px solid;
  border-radius: 9999px;
  background-color: tint($colorbarbg, 4%);
  color: $onBackground;
  font-size: 15pt;
  min-height: 45px;
  min-width: 130px;

  margin: 20px 20px;
  padding: 2px 17px;

  caret-color: $onBackground;

  selection {
    background-color: rgba(154, 152, 152, 0.5);
  }
}

.overview-search-box:focus {
  color: $tertiary;
}

.overview-results {
  // background-color: $surface;
  padding: 10px 5px;
  border-radius: 20px;
}

.overview-search-result {
  border-radius: 9999px;
  background-color: $onTertiary;
  color: $onBackground;
  font-size: 15pt;
  min-height: 47px;
  min-width: 400px;
  padding: 2px 12px;
  padding-left: 57px;
  margin: 0px 5px;

  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 60%, tint($tertiaryContainer, 10%) 60%);
  background-size: 400% auto;
  background-position: 40% 50%;

  caret-color: transparent;

  selection {
    background-color: transparent;
  }
}

.overview-search-result-icon {
  background-color: $tertiaryContainer;
  border-radius: 9999px;
  min-height: 51px;
  min-width: 51px;
  // padding: 2px 12px;
}

.overview-search-result:focus {
  color: $onTertiaryContainer;
  // background-color: $tertiaryContainer;
  background-position: 65% 50%;
}

.overview-search-result:active {
  color: $onTertiaryContainer;
  // background-color: $tertiaryContainer;
  background-position: 100% 50%;
}

.overview-search-typetosearch-pad {
  min-width: 160px;
  margin: 20px 20px;
  padding: 2px 12px;
}

.overview-search-typetosearch-text {
  margin: 13px 13px;
  font-size: 15pt;
  color: #CCCCCC;
}