Erick Pérez Castellanos
aaee4a2657
There's a bunch of stuff missing here, but this code is already working. This includes only part of the drawing code, I already take into account here LTR and RTL languages. Here month-view make use of classes for styling different regions of the grid, there are: 1. header class, which is used for the font and color details of the days naming on the top of the grid 2. current class, which is used for drawing the current day number and its background 3. lines class: which set the color property of the lines in the grid 4. :selected pseudo-class is used for drawing the font on the days marked when creating an event. This will work as well for keyboard navigation What's missing here: 1. properly update click/press marks to new model 2. draw border around the selected days
76 lines
1.2 KiB
CSS
76 lines
1.2 KiB
CSS
.views {
|
|
/* background color of every view */
|
|
background-color: @theme_base_color;
|
|
background-image: none;
|
|
}
|
|
|
|
.nav-button {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
/* nav-bar labels */
|
|
.start-header {
|
|
font: bold 18;
|
|
color: @theme_selected_bg_color;
|
|
padding: 12px;
|
|
}
|
|
|
|
.end-header {
|
|
font: bold 18;
|
|
padding: 12px;
|
|
}
|
|
|
|
.calendar-view {
|
|
padding: 6px;
|
|
font: 10;
|
|
}
|
|
|
|
.calendar-view.header {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-view.current {
|
|
background-color: black;
|
|
border-radius: 2px;
|
|
color: white;
|
|
font: bold;
|
|
}
|
|
|
|
.calendar-view:selected {
|
|
color: @theme_selected_bg_color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-view.lines {
|
|
color: alpha(@theme_fg_color, 0.4);
|
|
}
|
|
|
|
.event-widget {
|
|
border-radius: 2px;
|
|
margin-top: 3px;
|
|
margin-left: 6px;
|
|
margin-bottom: 3px;
|
|
margin-right: 6px;
|
|
padding: 4px;
|
|
font: 10;
|
|
}
|
|
|
|
GcalEventWidget.color-dark {
|
|
color: white;
|
|
outline-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
GcalEventWidget.color-dark:backdrop {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
GcalEventWidget.color-light {
|
|
color: black;
|
|
outline-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
GcalEventWidget.color-light:backdrop {
|
|
color: rgba(0, 0, 0, 0.3);
|
|
}
|