The current implementation of the Year navigator gives absolutely no clue that the days are actually selectable, which may confuse some users. A simple way to inform the user that the Year navigator is actually interactive is the hovering effect. Fix the lack of feedback by adding the hover effect to the year navigator. https://bugzilla.gnome.org/show_bug.cgi?id=762462
259 lines
4.7 KiB
CSS
259 lines
4.7 KiB
CSS
@define-color event_shadow_color alpha(black, 0.2);
|
|
|
|
.nav-button {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
/* nav-bar labels */
|
|
.start-header {
|
|
font-size: 18pt;
|
|
font-weight: bold;
|
|
color: @theme_selected_bg_color;
|
|
padding: 12px;
|
|
}
|
|
|
|
.end-header {
|
|
font-size: 18pt;
|
|
font-weight: bold;
|
|
padding: 12px;
|
|
}
|
|
|
|
calendar-view {
|
|
padding: 6px;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
calendar-view.header {
|
|
font-weight: bold;
|
|
}
|
|
|
|
calendar-view.current {
|
|
background-color: black;
|
|
border-radius: 2px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
calendar-view:selected {
|
|
color: @theme_selected_bg_color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
calendar-view.overflow:hover {
|
|
font-weight: bold;
|
|
color: @theme_selected_bg_color;
|
|
background-image: linear-gradient(to bottom, shade(@theme_bg_color, 0.9), alpha(@theme_bg_color, 0.2) 10%,
|
|
alpha(@theme_bg_color, 0.2) 95%, shade(@theme_bg_color, 0.95) 100%);
|
|
}
|
|
|
|
calendar-view.overflow {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
calendar-view.lines {
|
|
color: alpha(@theme_fg_color, 0.4);
|
|
}
|
|
|
|
calendar-view.first-view-header {
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
color: @theme_selected_bg_color;
|
|
padding: 12px;
|
|
}
|
|
|
|
calendar-view.second-view-header {
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
padding: 12px;
|
|
color: alpha(@theme_fg_color, 0.55);
|
|
}
|
|
|
|
/* Year View CSS */
|
|
.year-view {
|
|
padding: 0px;
|
|
}
|
|
|
|
/* Header the padding if for sizing, on drawing the spacing between cells,
|
|
* and the padding will be automatically calculated
|
|
* Because of year-view widget internals, the color property should be the same
|
|
* of .calendar-view.first-view-header selector */
|
|
.year-navigator {
|
|
padding: 6px 12px;
|
|
color: @theme_selected_bg_color;
|
|
}
|
|
|
|
.year-navigator.header {
|
|
color: @theme_selected_bg_color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.year-navigator.lines {
|
|
color: alpha(@theme_fg_color, 0.4);
|
|
}
|
|
|
|
.year-navigator.days {
|
|
padding: 5px;
|
|
color: @theme_fg_color;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.year-navigator.sunday {
|
|
color: alpha(@theme_fg_color, 0.5);
|
|
}
|
|
|
|
.year-navigator.week-numbers {
|
|
font-size: 70%;
|
|
font-weight: bold;
|
|
border-radius: 2px;
|
|
background-color: alpha(@theme_fg_color, 0.05);
|
|
color: alpha(@theme_fg_color, 0.4);
|
|
}
|
|
|
|
/* these two are supposed be changed in sync with .calendar-view */
|
|
.year-navigator.current {
|
|
background-color: black;
|
|
border-radius: 2px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
.year-navigator:selected {
|
|
color: @theme_selected_bg_color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.year-navigator:hover {
|
|
background-color: alpha(@theme_fg_color, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.year-navigator.with-events {
|
|
background-color: @theme_fg_color;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.year-navigator.with-events-selected {
|
|
background-color: @theme_selected_bg_color;
|
|
}
|
|
|
|
.year-navigator.with-events-sunday {
|
|
background-color: alpha(@theme_fg_color, 0.5);
|
|
}
|
|
|
|
.sidebar-header {
|
|
font-weight: bold;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.italic-label {
|
|
font-style: italic;
|
|
}
|
|
|
|
list.sidebar {
|
|
background-color: @theme_bg_color;
|
|
}
|
|
|
|
box.sidebar {
|
|
background-color: @theme_bg_color;
|
|
border-color: @borders;
|
|
border-style: solid;
|
|
}
|
|
|
|
.year-view box.sidebar:dir(ltr) {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.year-view box.sidebar:dir(rtl) {
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.year-view scrolledwindow {
|
|
border-top-width: 0;
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
.year-view button {
|
|
border-radius: 0;
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
popover.events {
|
|
background-color: @theme_bg_color;
|
|
padding: 0;
|
|
}
|
|
|
|
popover.events box {
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
popover.events list {
|
|
background-color: @theme_bg_color;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
popover.events scrolledwindow {
|
|
border-width: 0;
|
|
}
|
|
|
|
popover.events button {
|
|
border-radius: 6px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-style: solid none none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
event-widget {
|
|
border-radius: 2px;
|
|
margin: 2px 2px 1px;
|
|
padding: 3px 4px;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
event-widget.color-dark {
|
|
color: white;
|
|
outline-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
event-widget.color-dark:backdrop {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
event-widget.color-light {
|
|
color: black;
|
|
outline-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
event-widget.color-light:backdrop {
|
|
color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.middle-entry {
|
|
border-bottom-left-radius: 0px;
|
|
border-top-left-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
}
|
|
|
|
.middle-entry:dir(ltr) {
|
|
border-left: 0px;
|
|
}
|
|
|
|
.middle-entry:dir(rtl) {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.search-viewport {
|
|
background-color: @theme_base_color;
|
|
}
|
|
|
|
/* calendar popover */
|
|
.calendar-list {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.calendar-list > list {
|
|
border-radius: 4px;
|
|
}
|