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

339 lines
5.9 KiB
SCSS
Raw Normal View History

2022-05-05 19:53:15 +08:00
//
// 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;
2022-05-07 20:25:38 +08:00
background-size: 28px;
2022-05-05 19:53:15 +08:00
}
//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;
}