mirror of
https://github.com/plausible/analytics.git
synced 2024-11-23 20:13:31 +03:00
8174f1d135
* Initial Implementation Still needs clear all functionality, various styles and spacing, and overall cleanup * Second pass Most of the styling issues are still present, but collapsing/expanding logic should be complete * Third pass * Refactors, comments, cleans up filters code * Flatpickr color+placement changes * Last(?) pass on UI * Actually fixes sticky dates without breaking navigation * Changelog * Puts this back where it goes * Updates based on @ukutaht's comments - Removes Screenclass hook in favor of simple viewport size storage - Uses class-based component - Removes recheck variable in favor of tri-state wrapped - General formatting & code cleanup
137 lines
3.0 KiB
CSS
137 lines
3.0 KiB
CSS
.flatpickr-calendar:before,.flatpickr-calendar:after {
|
|
right: 22px !important;
|
|
}
|
|
|
|
.flatpickr-wrapper {
|
|
right: 35% !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.flatpickr-wrapper {
|
|
right: 50% !important;
|
|
}
|
|
}
|
|
|
|
/* Because Flatpickr offers zero support for dynamic theming on its own (outside of third-party plugins) */
|
|
.dark .flatpickr-calendar {
|
|
background-color: #1f2937;
|
|
}
|
|
|
|
.dark .flatpickr-weekday {
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
.dark .flatpickr-prev-month {
|
|
fill: #f3f4f6 !important;
|
|
}
|
|
|
|
.dark .flatpickr-next-month {
|
|
fill: #f3f4f6 !important;
|
|
}
|
|
|
|
.dark .flatpickr-monthDropdown-months {
|
|
color: #f3f4f6 !important;
|
|
}
|
|
|
|
.dark .numInputWrapper {
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
.dark .numInput[disabled] {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
.dark .flatpickr-current-month .numInputWrapper span.arrowUp::after {
|
|
border-bottom-color: #f3f4f6 !important;
|
|
}
|
|
|
|
.dark .flatpickr-current-month .numInputWrapper span.arrowDown::after {
|
|
border-top-color: #f3f4f6 !important;
|
|
}
|
|
|
|
.dark .flatpickr-day.prevMonthDay {
|
|
color: #94a3af;
|
|
}
|
|
|
|
.dark .flatpickr-day {
|
|
color: #E5E7EB;
|
|
}
|
|
|
|
.dark .flatpickr-day.prevMonthDay {
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.dark .flatpickr-day.nextMonthDay {
|
|
color: #9CA3AF;
|
|
}
|
|
|
|
.dark .flatpickr-day:hover {
|
|
background-color: #374151;
|
|
}
|
|
|
|
.dark :not(.startRange):not(.endRange).flatpickr-day.nextMonthDay:hover {
|
|
background-color: #374151;
|
|
}
|
|
|
|
.dark :not(.startRange):not(.endRange).flatpickr-day.prevMonthDay:hover {
|
|
background-color: #374151;
|
|
}
|
|
|
|
.dark .flatpickr-next-month {
|
|
fill: #f3f4f6;
|
|
}
|
|
|
|
.dark .flatpickr-day.flatpickr-disabled {
|
|
color: #4B5563;
|
|
}
|
|
|
|
.dark .flatpickr-day.flatpickr-disabled:hover {
|
|
color: #4B5563;
|
|
}
|
|
|
|
.dark .flatpickr-day.today {
|
|
background-color: rgba(167, 243, 208, 0.5);
|
|
}
|
|
|
|
.dark .flatpickr-day.today {
|
|
border-color: #34D399;
|
|
}
|
|
|
|
.dark .flatpickr-day.inRange {
|
|
background-color: #374151;
|
|
box-shadow: -5px 0 0 #374151,5px 0 0 #374151;
|
|
border-color: #374151;
|
|
}
|
|
|
|
.dark .flatpickr-day.prevMonthDay.inRange {
|
|
background-color: #374151;
|
|
box-shadow: -5px 0 0 #374151,5px 0 0 #374151;
|
|
border-color: #374151;
|
|
}
|
|
|
|
.dark .flatpickr-day.nextMonthDay.inRange {
|
|
background-color: #374151;
|
|
box-shadow: -5px 0 0 #374151,5px 0 0 #374151;
|
|
border-color: #374151;
|
|
}
|
|
|
|
.flatpickr-day.startRange {
|
|
background: #6574cd !important;
|
|
border-color: #6574cd !important;
|
|
}
|
|
|
|
.flatpickr-day.endRange {
|
|
background: #6574cd !important;
|
|
border-color: #6574cd !important;
|
|
}
|
|
|
|
.dark .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
|
|
-webkit-box-shadow: -10px 0 0 #4556c3 !important;
|
|
box-shadow: -10px 0 0 #4556c3 !important;
|
|
}
|
|
|
|
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
|
|
-webkit-box-shadow: -10px 0 0 #4556c3 !important;
|
|
box-shadow: -10px 0 0 #4556c3 !important;
|
|
}
|