one-dark/cinnamon/sass/ui/calendar.scss

//
// Calendar
//
.calendar {
  spacing-rows: 0;
  spacing-columns: 0;
}

.calendar-main-box {
  margin: 0 16px 8px;
}

.calendar-events-main-box {
  height: 300px;
  margin-right: 0.5em;
  padding: 0.5em;
  min-width: 350px;
  border: 0;
  border-radius: 6px;
  background-color: transparentize($base_color, 0.7);
}

// .calendar-events-no-events-box {
// }

.calendar-events-no-events-button {
  margin: 6px 0 6px 0;
  padding: 6px;

  &:hover {
    background-color: $selected_bg_color;

    .calendar-events-no-events-icon,
    .calendar-events-no-events-label {
      color: $selected_fg_color;
    }
  }
}

.calendar-events-no-events-icon,
.calendar-events-no-events-label {
  font-weight: bold;
  color: $fg_color;
  text-align: center;
}

.calendar-events-date-label {
  padding: 0.1em 0.1em 0.5em 0.1em;
  color: $fg_color;
  font-weight: bold;
  text-align: center;
}

.calendar-events-event-container {
  padding: 0;
}

.calendar-event-button {
  border: 1px solid rgba(0, 0, 0, 0);

  .calendar-event-time-past {
    color: transparentize($fg_color, 0.6);
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.2em;
  }
  .calendar-event-time-present {
    color: $fg_color;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.2em;

    &:all-day {
      color: $selected_bg_color;
    }
  }
  .calendar-event-time-future {
    color: $fg_color;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.2em;
  }

  .calendar-event-summary {
    color: $fg_color;
    text-align: left;
    width: 200px;
  }

  .calendar-event-countdown {
    text-align: right;
    margin-bottom: 0.6em;
    color: $fg_color;

    &:soon {
      font-weight: bold;
    }
    &:imminent {
      font-weight: bold;
      color: $warning_color;
    }
    &:current {
      font-weight: bold;
      color: $selected_bg_color;
    }
  }

  &:hover {
    background-color: $selected_bg_color;
    border: 1px solid $borders_color;
    .calendar-event-time-past,
    .calendar-event-time-present,
    .calendar-event-time-future,
    .calendar-event-summary {
      color: $selected_fg_color;
    }

    .calendar-event-countdown {
      text-align: right;
      margin-bottom: 0.6em;
      color: $selected_fg_color;

      &:soon {
        font-weight: bold;
      }
      &:imminent {
        font-weight: bold;
      }
      &:current {
        font-weight: bold;
      }
    }
  }
}

// .calendar-event-row-content {
// }

.calendar-event-color-strip {
  width: 2px;
}

.calendar-today-home-button {
  padding: 0;
}

.calendar-today-day-label {
  font-size: 1.75em;
  color: $fg_color;
  font-weight: bold;
  text-align: center;
}

.calendar-today-date-label {
  font-size: 1.1em;
  color: $fg_color;
  font-weight: bold;
  text-align: center;
}

.calendar-today-home-button-enabled {
  padding: 0;

  &:hover {
    color: $highlight_color;

    .calendar-today-day-label,
    .calendar-today-date-label {
      color: inherit;
    }
  }
}

.calendar-month-label {
  color: $fg_color;
  font-weight: bold;
  padding: 8px 0;
  font-size: 1.2em;
}

.calendar-change-month-back,
.calendar-change-month-forward {
  width: 32px;
  height: 32px;
  background-size: 32px;
}

//arrow back
.calendar-change-month-back {
  background-image: url('common-assets/misc/calendar-arrow-left.svg');

  &:focus,
  &:hover {
    background-image: url('common-assets/misc/calendar-arrow-left-hover.svg');
  }

  &:active {
    background-image: url('common-assets/misc/calendar-arrow-left.svg');
  }

  &:rtl {
    background-image: url('common-assets/misc/calendar-arrow-right.svg');

    &:focus,
    &:hover {
      background-image: url('common-assets/misc/calendar-arrow-right-hover.svg');
    }

    &:active {
      background-image: url('common-assets/misc/calendar-arrow-right.svg');
    }
  }
}

//arrow forward
.calendar-change-month-forward {
  background-image: url('common-assets/misc/calendar-arrow-right.svg');

  &:focus,
  &:hover {
    background-image: url('common-assets/misc/calendar-arrow-right-hover.svg');
  }

  &:active {
    background-image: url('common-assets/misc/calendar-arrow-right.svg');
  }

  &:rtl {
    background-image: url('common-assets/misc/calendar-arrow-left.svg');

    &:focus,
    &:hover {
      background-image: url('common-assets/misc/calendar-arrow-left-hover.svg');
    }

    &:active {
      background-image: url('common-assets/misc/calendar-arrow-left.svg');
    }
  }
}

.calendar-day-event-dot-box {
  margin-top: 17px;
  max-rows: 1;
}

.calendar-day-event-dot {
  margin: 1px;
  border-radius: 2px;
  width: 4px;
  height: 4px;
}

.calendar-day-base {
  font-size: 1.1em;
  text-align: center;
  width: 48px;
  height: 48px;
  margin: 0 8px;
  border-radius: 24px;
  border: 1px solid transparent;

  &:hover {
    color: $selected_fg_color;
    background-color: $selected_bg_color;
    background-color: transparentize($selected_bg_color, 0.2);
  }
}

.calendar-day-heading {
  color: $selected_fg_color;
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 1.2em;
  font-weight: bold;
}

// .calendar-day {
//   border-width: 0;
//   color: transparentize($fg_color, 0.1);
// }

// .calendar-day-top {
//   border-top-width: 0;
// }

// .calendar-day-left {
//   border-left-width: 0;
// }

.calendar-today {
  font-weight: bold;
  color: $selected_fg_color;
  background-color: $selected_bg_color;
  border-width: 0;

  &:selected {
    background-color: $selected_bg_color;
  }
}

.calendar-not-today {
  color: $fg_color;

  &:selected {
    font-weight: bold;
    background-color: transparent;
    border: 1px solid $selected_bg_color;

    // &:hover {
    // }
  }
}

// 周末
.calendar-nonwork-day {
  color: $error_color;
  background-color: transparent;
  font-weight: bold;

  &:hover {
    color: $error_color;
  }
}

.calendar-other-month-day {
  color: transparentize($fg_color, 0.7);
}

.calendar-other-month-day:hover {
  color: inherit;
}

.calendar-week-number {
  margin-top: 14px;
  color: transparentize($fg_color, 0.15);
  font-size: 1em;
}