custum-hyprpanel/scss/style/menus/calendar.scss

.calendar-menu-content * {
  font-size: $font-size * $bar-menus-menu-clock-scaling * 0.01;
}

.calendar-content-container {
  margin-top: 0em;
  min-width: 27em;
  min-height: 6em;
  background: if(
    $bar-menus-monochrome,
    $bar-menus-background,
    $bar-menus-menu-clock-background-color
  );
  border: $bar-menus-border-size solid
    if(
      $bar-menus-monochrome,
      $bar-menus-border-color,
      $bar-menus-menu-clock-border-color
    );
  border-radius: $bar-menus-border-radius;
  margin-right: 0.5em;
  opacity: $bar-menus-opacity * 0.01;
}

.calendar-menu-item-container {
  border-radius: $bar-menus-card_radius;
  margin-bottom: 1.35em;
  background: if(
    $bar-menus-monochrome,
    $bar-menus-cards,
    $bar-menus-menu-clock-card-color
  );
}

.calendar-content-items {
  margin: 1.35em;
}

.calendar-container-box {
  margin: 0.75em;
  margin-bottom: 0em;
}

.calendar-menu-widget {
  border-radius: 0.4em;
  color: if(
    $bar-menus-monochrome,
    $bar-menus-text,
    $bar-menus-menu-clock-calendar-days
  );

  &:selected {
    box-shadow:
      inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-clock-calendar-currentday),
      inset -0.4em -0.3em 0 0
        if(
          $bar-menus-monochrome,
          $bar-menus-cards,
          $bar-menus-menu-clock-card-color
        ),
      inset 0.4em 0 0 0.01em
        if(
          $bar-menus-monochrome,
          $bar-menus-cards,
          $bar-menus-menu-clock-card-color
        );
    color: if(
      $bar-menus-monochrome,
      $bar-menus-label,
      $bar-menus-menu-clock-calendar-currentday
    );
    border-radius: 0em;
  }

  &.header {
    background-color: transparent;
    color: if(
      $bar-menus-monochrome,
      $bar-menus-label,
      $bar-menus-menu-clock-calendar-yearmonth
    );
  }

  &.button {
    color: $text;
    font-weight: 900;
    font-size: 900em;
  }

  &:hover {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-icons-active,
      $bar-menus-menu-clock-calendar-paginator
    );
  }

  &.highlight {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-icons-active,
      $bar-menus-menu-clock-calendar-weekdays
    );
  }

  &:indeterminate {
    color: transparentize(
      if(
        $bar-menus-monochrome,
        $bar-menus-text,
        $bar-menus-menu-clock-calendar-days
      ),
      0.65
    );
  }

  font-size: 1.1em;
  padding: 0.35em;
}

.clock-content-items {
  min-height: 8em;

  .clock-content-time {
    font-size: 4em;
    color: if(
      $bar-menus-monochrome,
      $bar-menus-label,
      $bar-menus-menu-clock-time-time
    );
  }

  .clock-content-period {
    font-size: 1.75em;
    margin-bottom: 1.35em;
    margin-right: -0.875em;
    color: if(
      $bar-menus-monochrome,
      $bar-menus-label,
      $bar-menus-menu-clock-time-timeperiod
    );
  }
}

.calendar-menu-item-container {
  margin-bottom: 0.65em;
  &:last-child {
    margin-bottom: 0em;
  }
}

.weather-container-box {
  margin: 1.5em;
  margin-top: 2.5em;
  min-width: 3em;

  .calendar-menu-weather.today.icon {
    label {
      color: if(
        $bar-menus-monochrome,
        $bar-menus-icons-active,
        $bar-menus-menu-clock-weather-icon
      );
      font-size: 5em;
    }
  }

  .calendar-menu-weather.today.temp.label {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-text,
      $bar-menus-menu-clock-weather-temperature
    );
    margin-left: 0.2em;
    font-size: 2.5em;

    &.icon {
      font-size: 2.5em;
    }
  }

  .calendar-menu-weather.today.condition.label {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-label,
      $bar-menus-menu-clock-weather-status
    );
    font-size: 1.5em;
    margin-bottom: 0.4em;
  }

  .calendar-menu-weather.today.temp.label.icon.weather-color.red {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-icons-active,
      $bar-menus-menu-clock-weather-thermometer-extremelyhot
    );
  }

  .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-icons-active,
      $bar-menus-menu-clock-weather-thermometer-hot
    );
  }

  .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-icons-active,
      $bar-menus-menu-clock-weather-thermometer-moderate
    );
  }

  .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-icons-active,
      $bar-menus-menu-clock-weather-thermometer-cold
    );
  }

  .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
    color: if(
      $bar-menus-monochrome,
      $bar-menus-icons-active,
      $bar-menus-menu-clock-weather-thermometer-extremelycold
    );
  }
}

.calendar-menu-weather.today.stats.container {
  margin-bottom: 0.75em;
  color: if(
    $bar-menus-monochrome,
    $bar-menus-label,
    $bar-menus-menu-clock-weather-stats
  );

  .weather.label {
    margin-left: 0.35em;
  }
}

.menu-separator.weather {
  margin: 1.5em 0em;
}

.hourly-weather-time {
  color: if(
    $bar-menus-monochrome,
    $bar-menus-label,
    $bar-menus-menu-clock-weather-hourly-time
  );
  margin-bottom: 0.5em;
}

.hourly-weather-icon {
  color: if(
    $bar-menus-monochrome,
    $bar-menus-icons-active,
    $bar-menus-menu-clock-weather-hourly-icon
  );
  margin-bottom: 0.25em;
  font-size: 1.8em;
}

.hourly-weather-temp {
  color: if(
    $bar-menus-monochrome,
    $bar-menus-label,
    $bar-menus-menu-clock-weather-hourly-temperature
  );
}

.weather.precip.icon {
  min-width: 1em;
  font-size: 1em;
}

.weather.wind.icon {
  min-width: 1em;
  font-size: 1em;
}