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

.dashfs-bg {
  background-color: rgba(20, 20, 20, 0.7);
}

.dashfs-greet {
  border-radius: 10px;
  margin-top: 40px;
  margin-left: 40px;
  border: 3px solid transparent;
  border-left: 3px solid $color5;
  padding: 10px;
}

.dashfs-greet-text {
  font-family: 'Rubik';
  font-size: 20pt;
  color: $color5;
}

.dashfs-greet-subtext {
  font-family: 'Rubik';
  font-size: 14pt;
  color: $color5;
}

.dashfs-clock {
  border-radius: 10px;
  margin-top: 40px;
  margin-right: 40px;
  border: 3px solid transparent;
  border-right: 3px solid $color4;
  padding: 15px;
}

.dashfs-clock-time {
  margin-top: -15px;
  font-family: 'Rubik';
  font-size: 45pt;
  color: $color4;
}

.dashfs-clock-date {
  font-family: 'Rubik';
  font-size: 22pt;
  color: $color4;
}

.dashfs-calendar-title {
  border-radius: 9999px;
  font-size: 15pt;
  font-family: 'Rubik';
  font-weight: 500;
  margin: 1px;
  min-height: 44px;
  min-width: 44px;
  margin: 3px;
}

.dashfs-calendar-button {
  border-radius: 9999px;
  font-size: 12pt;
  font-family: 'Rubik';
  font-weight: 500;
  margin: 1px;
  min-height: 44px;
  min-width: 44px;
  margin: 3px;
}

.dashfs-calendar-text {
  border-radius: 9999px;
  font-size: 11pt;
  font-family: 'Rubik';
  font-weight: 500;
  min-height: 44px;
  min-width: 44px;
  margin: 3px;
}

.dashfs-section-nopad {
  border-radius: 10px;
  border: 3px solid transparent;
  border-top: 3px solid $color4;
}

.dashfs-section {
  border-radius: 10px;
  border: 3px solid transparent;
  border-top: 3px solid $color1;
  padding: 10px;
  min-width: 200px;
}

.dashfs-section-title {
  color: $color1;
  font-size: 18pt;
  font-family: 'Rubik';
  margin-bottom: 5px;
}

.dashfs-fetch {
  color: $color1;
  font-size: 15pt;
  font-family: 'Rubik';
}

.dashfs-fetch-icon {
  color: $color1;
  font-size: 16pt;
  margin: 5px 0px;
  margin-right: 10px;
  font-family: 'Material Symbols Rounded';
}

.dashfs-section-button {
  border-radius: 8px;
  padding: 0 10px;
}

.dashfs-section-button:hover {
  background-color: $overlay0;
}

.dashfs-calendar-icon {
  background-position: center;
  min-height: 42px;
  min-width: 30px;
}

.dashfs-monthbutton {
  // background-size: 80% auto;
  background-color: transparent;
  background-position: center;
  border-radius: 6px;
  margin: 12px 3px;
  margin-top: 0px;
  padding: 6px;
  min-width: 20px;
  min-height: 20px;
}

.dashfs-monthbutton:hover {
  background-color: rgba(95, 95, 95, 0.4);
}

.dashfs-calendar-text {
  border-radius: 9999px;
  font-size: 12pt;
  font-family: 'Rubik';
  font-weight: 500;
  min-height: 44px;
  min-width: 44px;
  margin: 3px;
}

.dashfs-nerd-icon {
  color: $color1;
  font-size: 16pt;
  margin: 5px 0px;
  margin-right: 10px;
  font-family: 'JetBrainsMono Nerd Font';
}

.dashfs-button-only {
  :first-child {
    :first-child {
      border-radius: 10px;
      border: 1px solid transparent;
      border-top: 1px solid transparent;
    }
  }
}

.dashfs-button-only:hover {
  :first-child {
    :first-child {
      background-color: shade($overlay0, 2%);
      border: 1px solid $overlayedge;
      border-top: 1px solid tint($overlayedge, 5%);
    }
  }
}

.dashfs-button-pad {
  padding: 3px;
  // min-width: 42px;
  min-height: 42px;
}

.dashfs-taskbaricon {
  background-size: 60%;
  background-position: center;
  min-width: 64px;
  min-height: 64px;
  border-radius: 10px;
  border: 1px solid transparent;
  border-top: 1px solid transparent;
}

.dashfs-taskbaricon-false {
  background-size: 70%;
  background-position: center;
  min-width: 64px;
  min-height: 64px;
  border-radius: 10px;
  border: 1px solid transparent;
  border-top: 1px solid transparent;
}

.dashfs-taskbaricon-true {
  background-size: 70%;
  background-position: center;
  min-width: 64px;
  min-height: 64px;
  border-radius: 6px;
  border: 1px solid transparent;
  border-top: 1px solid transparent;
}

.dashfs-taskbar-indicator-true {
  border-radius: 10px;
  border: 1px solid transparent;
  border-top: 1px solid transparent;
  margin-bottom: 4px;
  margin-top: 65px;
  margin-left: 25px;
  margin-right: 25px;
  background-color: $color4;
}

.dashfs-taskbar-indicator-false {
  border-radius: 10px;
  border: 1px solid transparent;
  border-top: 1px solid transparent;
  margin-bottom: 4px;
  margin-top: 65px;
  margin-left: 32px;
  margin-right: 32px;
  background-color: #9C98A3;
}

.dashfs-day-1 {
  background-color: transparent;
  color: #7C7C7C;
}

.dashfs-day0 {
  background-color: transparent;
  color: white;
}

.dashfs-day1 {
  background-color: tint($color4, 20%);
  color: black;
}

.dashfs-day0:hover {
  background-color: rgba(75, 75, 75, 0.5);
}

.dashfs-day0:active {
  background-color: tint(rgba(75, 75, 75, 0.5), 10%);
}

.dashfs-day1:hover {
  background-color: tint($color4, 10%);
  color: black;
}

.dashfs-day1:active {
  background-color: tint($color4, 20%);
  color: black;
}

.dashfs-music-cover {
  border-radius: 10px;
  min-height: 50px;
  min-width: 50px;
  background-size: auto 100%;
  background-position: center;
}

.dashfs-resource-title {
  color: $tertiary;
  font-size: 18pt;
  font-family: 'Rubik';
  margin-bottom: 5px;
}

.dashfs-resource-box {
  border-radius: 10px;
  border: 3px solid transparent;
  border-top: 3px solid $tertiary;
  padding: 20px 5px;
  min-width: 110px;
}

.dashfs-resource-circle {
  color: $tertiary;
  background-color: #5B5A5C;
}

.dashfs-resource-icon {
  color: $tertiary;
  font-size: 30pt;
  font-family: 'Material Symbols Rounded';
}

.dashfs-resource-label {
  color: $onTertiary;
  background-color: $tertiary;
  font-size: 13pt;
  font-family: 'Rubik';
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 9999px;
  min-width: 50px;
}

.dashfs-graph {
  background-image: url('images/svg/graph.svg');
  background-size: 100% 100%;
  background-position: center;
}

.dashfs-cava-column {
  background-color: rgba(176, 226, 247, 0.1);
  border-radius: 9999px;
  margin: 5px 0;
}

.dashfs-quote-content {
  font-family: 'Space Grotesk';
  font-weight: 500;
  font-size: 16pt;
  color: $primary;
}

.dashfs-quote-author {
  font-family: 'Space Grotesk';
  font-weight: 500;
  font-size: 14pt;
  color: $primary;
}