Calendar style

main2
Bob Mottram 2019-10-10 20:19:47 +01:00
parent 5a04f407d3
commit 7e50140f71
1 changed files with 74 additions and 68 deletions

View File

@ -1,6 +1,12 @@
:root {
--main-bg-color: #282c37;
--lines-color: darkgray;
--day-number: lightgray;
}
body { body {
background-color: #e66053; background-color: var(--main-bg-color);
color: #4E4F4A; color: gray;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -28,7 +34,7 @@ main {
.calendar__day__header, .calendar__day__header,
.calendar__day__cell { .calendar__day__cell {
border: 2px solid #e66053; border: 2px solid var(--lines-color);
text-align: center; text-align: center;
width: 100% / 7; width: 100% / 7;
vertical-align: middle; vertical-align: middle;
@ -74,16 +80,16 @@ main {
} }
tr:nth-child(odd) > .calendar__day__cell:nth-child(odd) { tr:nth-child(odd) > .calendar__day__cell:nth-child(odd) {
color: #e66053; color: var(--day-number);
} }
tr:nth-child(even) > .calendar__day__cell:nth-child(even) { tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
color: #e66053; color: var(--day-number);
} }
.calendar__day__cell[data-event] { .calendar__day__cell[data-event] {
background-color: #e66053; background-color: blue;
color: #4E4F4A; color: blue;
} }
.calendar__day__cell[data-event]:after { .calendar__day__cell[data-event]:after {
content: attr(data-event); content: attr(data-event);