192 lines
3.8 KiB
CSS
192 lines
3.8 KiB
CSS
/* Date / Time menu */
|
|
|
|
/* overall menu */
|
|
#calendarArea {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Calendar menu side column */
|
|
.datemenu-calendar-column {
|
|
spacing: 5px;
|
|
}
|
|
|
|
.datemenu-calendar-column:ltr { padding-left: 6px; }
|
|
.datemenu-calendar-column:rtl { padding-right: 6px; }
|
|
|
|
.datemenu-calendar-column .datemenu-displays-box {
|
|
spacing: 5px;
|
|
}
|
|
|
|
|
|
/* today header button */
|
|
.datemenu-today-button {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
background-color: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.datemenu-today-button:hover {
|
|
transition-duration: 100ms;
|
|
background-color: SECTION-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
|
|
}
|
|
|
|
.datemenu-today-button:focus {
|
|
transition-duration: 100ms;
|
|
background-color: ACCENT-OPACITY-COLOR;
|
|
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
/* weekday label */
|
|
.day-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* date label */
|
|
.date-label {
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
/* Calendar */
|
|
|
|
.calendar {
|
|
border-radius: 14px;
|
|
background-color: SECTION-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* month header */
|
|
.calendar-month-label {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
|
|
/* day buttons, prev/next month button */
|
|
.calendar-day-base,
|
|
.calendar-month-header .pager-button {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
border-radius: 10px;
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
.calendar-day-base:hover,
|
|
.calendar-day-base:active:hover,
|
|
.calendar-day-base:selected:hover,
|
|
.calendar .calendar-month-header .pager-button:hover {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
color: TEXT-PRIMARY-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.calendar-day-base:focus,
|
|
.calendar .calendar-month-header .pager-button:focus {
|
|
background-color: ACCENT-OPACITY-COLOR;
|
|
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR;
|
|
}
|
|
|
|
.calendar-day-base:active,
|
|
.calendar-day-base:selected {
|
|
background: ACCENT-DISABLED_HOVER;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
/* today button */
|
|
.calendar-today,
|
|
.calendar-today:selected {
|
|
background-color: ACCENT-COLOR;
|
|
color: TEXT-PRIMARY-COLOR !important;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.calendar-today:hover,
|
|
.calendar-today:selected:hover {
|
|
background-color: ACCENT_HOVER;
|
|
}
|
|
|
|
/* if day has event */
|
|
.calendar .calendar-day-with-events {
|
|
background-image: url("calendar-event.svg");
|
|
background-size: contain;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* weekend day button */
|
|
.calendar .calendar-nonwork-day {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
/* other month day button */
|
|
.calendar .calendar-other-month-day {
|
|
color: TEXT-DISABLED-COLOR;
|
|
}
|
|
|
|
.calendar .calendar-other-month-day.calendar-day-with-events {
|
|
background-image: url("calendar-event-disabled.svg");
|
|
background-size: contain;
|
|
}
|
|
|
|
|
|
/* Events / World clocks / weather section */
|
|
|
|
.events-button,
|
|
.world-clocks-button,
|
|
.weather-button {
|
|
background-color: SECTION-COLOR;
|
|
color: TEXT-SECONDARY-COLOR;
|
|
border-radius: 14px;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.events-button:hover,
|
|
.world-clocks-button:hover,
|
|
.weather-button:hover {
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
}
|
|
|
|
.events-button:focus,
|
|
.world-clocks-button:focus,
|
|
.weather-button:focus {
|
|
background-color: ACCENT-OPACITY-COLOR;
|
|
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
.events-button:active,
|
|
.world-clock-button:active,
|
|
.weather-button:active {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
}
|
|
|
|
/* header */
|
|
.weather-button .weather-header,
|
|
.events-button .events-title,
|
|
.world-clocks-button .world-clocks-header {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
|
|
/* Events section */
|
|
.events-button .events-list {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
.events-button .event-time {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
|
|
/* World clocks section */
|
|
.world-clocks-button .world-clocks-time {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
}
|
|
|
|
.world-clocks-button .world-clocks-city,
|
|
.world-clocks-button .world-clocks-timezone {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
|
|
/* Weather section */
|
|
.weather-button .weather-forecast-time {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
}
|