dotfiles/.themes/gruvbox-dark-gtk/cinnamon/scss/sections/_calendar.scss

121 lines
2.5 KiB
SCSS

// the calendar displayed by the calendar applet is a heavily modified menu and inherits from the .menu selectosr
// indivudual elements within the menu can be themed seperately with these selectors
.calendar {
padding: 1em 1.75em;
spacing-rows: 1px;
spacing-columns: 5px;
}
// also covers the year label
.calendar-month-label {
color: $dark_fg_color;
font-size: 0.8em;
padding: 5px 10px;
border-radius: $roundness;
font-weight: bold;
text-align: center;
}
.calendar-change-month-back {
@extend %calendar-shared;
border: 1px solid transparent;
background-image: url(assets/calendar-arrow-left.svg);
&:rtl {
background-image: url(assets/calendar-arrow-right.svg);
}
&:hover {
border: 1px solid $selected_bg_color;
}
&:active {
background-color: $selected_bg_color;
}
}
.calendar-change-month-forward {
@extend %calendar-shared;
border: 1px solid transparent;
background-image: url(assets/calendar-arrow-right.svg);
&:rtl {
background-image: url(assets/calendar-arrow-left.svg);
}
&:hover {
border: 1px solid $selected_bg_color;
}
&:active {
background-color: $selected_bg_color;
}
}
.datemenu-date-label {
padding: 1em 1.75em;
color: $dark_fg_color;
font-weight: bold;
text-align: center;
}
.calendar-day-base {
font-size: 0.8em;
text-align: center;
width: 2.4em;
height: 1.8em;
border-radius: $roundness;
&:active {
background-color: $selected_bg_color;
}
&:hover {
}
}
.calendar-day-heading {
color: $dark_fg_color;
padding-top: 0.9em;
}
.calendar-week-number {
color: $dark_fg_color;
font-weight: bold;
padding-top: 0.6em;
}
.calendar-day {
&:ltr {
color: $dark_fg_color;
padding: 2px;
}
&:rtl {
color: $dark_fg_color;
padding: 3px;
}
}
.calendar-day-top {
&:ltr {
}
&:rtl {
}
}
.calendar-day-left {
&:ltr {
}
&:rtl {
}
}
.calendar-work-day {
}
.calendar-nonwork-day {
font-weight: bold;
}
// this is always is an active state
.calendar-today {
@extend %selected-bg-grad-to-bottom;
font-weight: bold;
&:active {
color: $selected_fg_color;
}
}
.calendar-other-month-day {
font-style: italic;
}
// this is always is an active state
.calendar-day-with-events {
background-color: $selected_bg_color;
font-weight: bold;
&:active {
color: $selected_fg_color;
}
}