gnome-shell/data/theme/gnome-shell-sass/widgets/_calendar.scss

/* Date/Time Menu */

// overall menu
#calendarArea {}

// Calendar menu side column
.datemenu-calendar-column {
  spacing: $base_spacing;
  border: none;
  border-style: solid;
  border-color: $borders_color;

  &:ltr {padding-left: $base_padding;}
  &:rtl {padding-right: $base_padding;}

  .datemenu-displays-box {spacing: $base_spacing;}
}

/* today button (the date) */
.datemenu-today-button {
  @include card($flat: true);
  padding: $base_padding * 1.5;

  // weekday label
  .day-label {
    @include fontsize($base_font_size+1);
    color: $insensitive_fg_color;
    font-weight: bold;
  }

  // date label
  .date-label {
    @include fontsize($base_font_size+7);
    font-weight: 1000;
  }
}

/* Calendar */
.calendar {
  @include card(flat);

  // month header
  .calendar-month-header {

    // prev/next month icons
    .calendar-change-month-back StIcon,
    .calendar-change-month-forward StIcon {
      icon-size: $base_icon_size;
    }

    // month label
    .calendar-month-label {
      font-weight: bold;
    }

    .pager-button {
      background-color: transparent;
      height: 32px;
      width: 32px;
      margin: 2px;
      border-radius: $base_border_radius - 2px;
      &:hover, &:focus {background-color: $hover_bg_color;}
      &:active {background-color: $active_bg_color;}
    }
  }

  $calendar_day_size: 32px;

  .calendar-day-base {
    @include fontsize($base_font_size - 3);
    text-align: center;
    margin: 2px;
    height: $calendar_day_size;
    width: $calendar_day_size;
    border-radius: $calendar_day_size * 0.5 + 2px;
    font-feature-settings: "tnum";
    
    &:hover {background-color: $hover_bg_color;}
    &:focus {
      font-weight: 1000;
      background-color: mix($bg_color, $selected_bg_color, 80%);
      color: $selected_fg_color;
      box-shadow: 0 0 0 2px transparentize($selected_bg_color, 0.4);
    }

    &:active,&:selected {
      font-weight: 1000;
      color: $active_fg_color;
      background-color: $active_bg_color;
      &:focus {
        background-color: mix($active_bg_color, $selected_bg_color, 80%);
      }
    }

    // day of week heading
    &.calendar-day-heading {
      color: $insensitive_fg_color;
      padding-top: $base_padding;
      height: 16px !important; // force heading to be smaller height
      @include fontsize($base_font_size - 2);
    }
  }

  .calendar-day {
    border-width: 0; // border collapse hack - see calendar.js
  }

  .calendar-work-day {}

  .calendar-nonwork-day {
    color: $insensitive_fg_color;
  }

  .calendar-other-month-day {
    color: transparentize($fg_color, 0.5);
    &.calendar-nonwork-day {
      color: transparentize($insensitive_fg_color, 0.5);
    }
  }


  // Today
  .calendar-today {
    background-color: $selected_bg_color;
    font-weight: 1000;
    color: $selected_fg_color !important;

    &:hover,&:focus {
      background-color:lighten($selected_bg_color, 3%);
      color: inherit;
    }

    &:active,&:selected {
      background-color: $selected_bg_color;
      color: inherit;

      &:hover,&:focus {
        background-color:lighten($selected_bg_color, 3%);
        color: inherit;
      }
    }
  }

  .calendar-day-with-events {
    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
    background-size: contain;
    &.calendar-work-day {
      color: lighten($fg_color,10%);
      font-weight: bold;
    }
  }

  .calendar-week-number {
    @include fontsize($base_font_size - 4);
    font-weight: bold;
    font-feature-settings: "tnum";
    margin: 6px;
    padding: $base_padding;
    border-radius: 3px;
    background-color: darken($bg_color, 2%);
    color: $insensitive_fg_color
  }
}

/* Events */
.events-button {
  @include card;
  padding: $base_padding * 2;

  .events-box {
    spacing: $base_spacing;
  }

  .events-list {
    spacing: 2 * $base_spacing;
  }

  .events-title {
    color: $insensitive_fg_color;
    font-weight: bold;
    margin-bottom: $base_margin;
  }

  .event-time {
    color: $insensitive_fg_color;
    font-feature-settings: "tnum";
    @include fontsize($base_font_size - 1);
  }
}

/* World clocks */
.world-clocks-button {
  @include card;
  padding: $base_padding * 2;

  .world-clocks-grid {
    spacing-rows: $base_spacing;
    spacing-columns: $base_spacing * 2;
  }

  // title
  .world-clocks-header {
    color: $insensitive_fg_color;
    font-weight: bold;
  }

  // city label
  .world-clocks-city {
    color: $fg_color;
    @include fontsize($base_font_size);
    font-weight: normal;
  }

  // timezone time
  .world-clocks-time {
    font-weight: bold;
    color: $fg_color;
    font-feature-settings: "tnum";
    @include fontsize($base_font_size);

    &:ltr {text-align: right;}
    &:rtl {text-align: left;}
  }

  // timezone offset label
  .world-clocks-timezone {
    color: $insensitive_fg_color;
    font-feature-settings: "tnum";
    @include fontsize($base_font_size - 1);
  }
}

/* Weather */
.weather-button {
  @include card;
  padding: $base_padding * 2;

  .weather-box {
    spacing: $base_spacing + $base_margin;
  }

  .weather-header-box {
    spacing: $base_spacing;
  }

  .weather-header {
    color: $insensitive_fg_color;
    font-weight: bold;

    &.location {
      font-weight: normal;
      @include fontsize($base_font_size - 1);
    }
  }

  .weather-grid {
    spacing-rows: $base_spacing;
    spacing-columns: $base_spacing * 2;
  }

  .weather-forecast-time {
    color: darken($fg_color,30%);
    font-feature-settings: "tnum";
    @include fontsize($base_font_size - 2);
    font-weight: normal;
    padding-top: 0.2em;
    padding-bottom: 0.4em;
  }

  .weather-forecast-icon {
    icon-size: $base_icon_size * 2;
  }

  .weather-forecast-temp {
    font-weight: bold;
  }
}