amy/donetick-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Calendar.css styles for better readability

Browse source
This commit is contained in:
Mo Tarbin 2025-01-14 02:30:41 -05:00
parent 62368b62b9
commit cc11a624ad
1 changed files with 10 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/views/components/Calendar.css
View file

@ -3,45 +3,42 @@
max-width: 600px; max-width: 600px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background-color: transparent; background-color: transparent;
border: none;
} }
.react-calendar__tile { .react-calendar__tile {
padding: 1em; padding: 10px;
min-height: 3rem; min-height: 45px;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.react-calendar__tile:enabled:hover { .react-calendar__tile:enabled:hover {
/* lighten existing color: ; */ background-color: #cbcbcb;
background-color: rgba(0, 123, 255, 0.2);
} }
.react-calendar__tile--active { .react-calendar__tile--active {
background-color: #007bff !important; background-color: #007bff !important;
} }
/* Today's tile styles */ .react-calendar__tile--now {
.react-calendar .react-calendar__tile--now { border: 1px dotted #4ec1a2e3 !important;
/* More specific selector */ border-radius: 8px;
/* background-color: #4ec1a2e3; */
border: 2px dotted #4ec1a2e3;
border-radius: 8px; /* Consistent with other tiles */
background-color: inherit; background-color: inherit;
} }
.react-calendar .react-calendar__tile--now:enabled:hover { .react-calendar__tile--now:enabled:hover {
background-color: rgba(0, 123, 255, 0.1); background-color: rgba(0, 123, 255, 0.1);
} }
/* Ensure dot container doesn't break row height */
.dot-container { .dot-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 16px; height: 16px;
/* if more than 4 dot make them go to the new line: */
flex-wrap: wrap; flex-wrap: wrap;
position: relative;
} }
.dot { .dot {
@ -51,11 +48,6 @@
margin: 0 1px; margin: 0 1px;
} }
/* Tooltip styles */
.dot-container {
position: relative;
}
.chore-tooltip { .chore-tooltip {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -73,7 +65,6 @@
visibility 0.2s ease; visibility 0.2s ease;
} }
/* remove different color on weekend: */
.react-calendar__month-view__days__day--weekend { .react-calendar__month-view__days__day--weekend {
color: inherit; color: inherit;
} }