232 lines
5.2 KiB
CSS
232 lines
5.2 KiB
CSS
/* Date / Time menu */
|
|
|
|
/* overall menu */
|
|
#calendarArea {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Calendar menu side column */
|
|
.datemenu-calendar-column {
|
|
spacing: 5px;
|
|
}
|
|
|
|
/* let's bring back issue #1 */
|
|
.datemenu-calendar-column:ltr { padding-left: 0; }
|
|
.datemenu-calendar-column:rtl { padding-right: 0; }
|
|
|
|
.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-header .calendar-month-label {
|
|
color: TEXT-PRIMARY-COLOR !important;
|
|
padding: 0 !important; /* override because of gdm */
|
|
background-color: transparent; /* 46+ */
|
|
}
|
|
|
|
.calendar-month-header .pager-button { /* override because of gdm */
|
|
height: 2.2em !important;
|
|
width: 2.2em !important;
|
|
}
|
|
|
|
/* days of week */
|
|
.calendar-day.calendar-day-heading,
|
|
.calendar .calendar-day-heading /* 46+ */ {
|
|
color: TEXT-SECONDARY-COLOR;
|
|
background-color: transparent;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* day buttons, prev/next month button */
|
|
.calendar-day,
|
|
.calendar-month-header .pager-button {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
background-color: transparent; /* 46+ */
|
|
border-radius: 10px;
|
|
padding: 0;
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
.calendar-day:hover,
|
|
.calendar-day:selected:hover,
|
|
.calendar .calendar-day-heading:hover, /* 46+ */
|
|
.calendar .calendar-day-heading:selected:hover, /* 46+ */
|
|
.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:focus,
|
|
.calendar .calendar-day-heading:focus, /* 46+ */
|
|
.calendar .calendar-month-header .pager-button:focus {
|
|
background-color: ACCENT-OPACITY-COLOR;
|
|
box-shadow: inset 0 0 0 1.5px ACCENT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
.calendar-day:selected,
|
|
.calendar .calendar-day-heading:selected /* 46+ */ {
|
|
background: ACCENT-DISABLED_HOVER;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
/* today button */
|
|
.calendar-today,
|
|
.calendar-today:selected {
|
|
background-color: BUTTON-COLOR;
|
|
color: BUTTON-TEXT-COLOR !important;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.calendar-today:hover,
|
|
.calendar-today:selected:hover,
|
|
.calendar-today:focus,
|
|
.calendar-today:selected:focus {
|
|
background-color: BUTTON_HOVER;
|
|
}
|
|
|
|
/* if day has event */
|
|
.calendar .calendar-day-with-events {
|
|
background-image: url("./calendar-event.svg");
|
|
background-size: contain;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.calendar .calendar-today.calendar-day-with-events {
|
|
background-image: url("./calendar-event-today.svg") !important; /* override because of gdm */
|
|
background-size: contain;
|
|
}
|
|
|
|
/* weekend day button */
|
|
.calendar .calendar-nonwork-day, /* up to 44 */
|
|
.calendar-weekend { /* 45+ */
|
|
color: TEXT-SECONDARY-COLOR;
|
|
}
|
|
|
|
/* other month day button */
|
|
.calendar .calendar-other-month-day, /* up to 44 */
|
|
.calendar-other-month { /* 45+ */
|
|
color: TEXT-DISABLED-COLOR !important;
|
|
}
|
|
|
|
.calendar .calendar-other-month-day.calendar-day-with-events, /* up to 44 */
|
|
.calendar-other-month.calendar-day-with-events { /* 45+ */
|
|
background-image: url("./calendar-event-disabled.svg") !important; /* override because of gdm */
|
|
background-size: contain;
|
|
}
|
|
|
|
.calendar .calendar-week-number {
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
color: TEXT-SECONDARY-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
transition-duration: 125ms;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.events-button .events-box .events-list .event-placeholder { /* if no events, 46+ */
|
|
color: TEXT-DISABLED-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;
|
|
}
|