marquisite
Well-known member
Towards the end of the core_pikaday.less master style template, there are some style rules which contain hardcoded values for font colour, background, etc. This relates to
Below is how the date picker with a date range looks currently with the default XF2 theme (left) and FlatAwesome+ (right). As you can see, the green 16, blue 2, etc colours are identical in both styles.
![xenforo-2-date-picker-date-range-hardcoded-colours-default-theme-and-flatawesome.webp xenforo-2-date-picker-date-range-hardcoded-colours-default-theme-and-flatawesome.webp](https://xenforo.com/community/data/attachments/181/181769-393ad9c0bdca5a383f9a0728fbb1be9e.jpg?hash=OTrZwL3KWj)
Having the start/end/in range classes referencing colour palette values would ensure that they will automatically adjust to different forum style. Possibly something like the example below could work.
![xenforo-2-date-picker-date-range-style-properties-example-default-theme.webp xenforo-2-date-picker-date-range-style-properties-example-default-theme.webp](https://xenforo.com/community/data/attachments/181/181791-fc9477958c5f4c864a1af0d7ca977422.jpg?hash=_JR3lYxfTI)
In the above example, three additional style properties were added to core_pikaday.less:
The existing .is-inrange .pika-button, .is-startrange .pika-button and .is-endrange .pika-button style definitions were removed and the following was inserted after
.is-inrange .pika-button
, .is-startrange .pika-button
and .is-endrange .pika-button
. While I don't believe XF 2.0 (currently) uses these classes by default, it seems silly to define them with hardcoded colours when a whole style system is available. Changing them to inherit style property values would simplify styling for anyone who uses the Pikaday setStartRange/setEndRange functions via an addon, custom development, etc.Below is how the date picker with a date range looks currently with the default XF2 theme (left) and FlatAwesome+ (right). As you can see, the green 16, blue 2, etc colours are identical in both styles.
![xenforo-2-date-picker-date-range-hardcoded-colours-default-theme-and-flatawesome.webp xenforo-2-date-picker-date-range-hardcoded-colours-default-theme-and-flatawesome.webp](https://xenforo.com/community/data/attachments/181/181769-393ad9c0bdca5a383f9a0728fbb1be9e.jpg?hash=OTrZwL3KWj)
Having the start/end/in range classes referencing colour palette values would ensure that they will automatically adjust to different forum style. Possibly something like the example below could work.
![xenforo-2-date-picker-date-range-style-properties-example-default-theme.webp xenforo-2-date-picker-date-range-style-properties-example-default-theme.webp](https://xenforo.com/community/data/attachments/181/181791-fc9477958c5f4c864a1af0d7ca977422.jpg?hash=_JR3lYxfTI)
In the above example, three additional style properties were added to core_pikaday.less:
Code:
@pd-day-range-between-bg: xf-diminish(@pd-day-selected-bg, 25%);
@pd-day-range-start-selected-bg: @xf-textColorFeature;
@pd-day-range-end-selected-bg: @xf-textColorEmphasized;
The existing .is-inrange .pika-button, .is-startrange .pika-button and .is-endrange .pika-button style definitions were removed and the following was inserted after
.is-disabled &, .is-outside-current-month & { }
:
Code:
.is-inrange & {
background: @pd-day-range-between-bg;
}
.is-startrange & {
color: @pd-day-selected-color;
background: @pd-day-range-start-selected-bg;
box-shadow: inset 0 1px 3px @pd-day-selected-shadow;
border-radius: 3px;
}
.is-endrange & {
color: @pd-day-selected-color;
background: @pd-day-range-end-selected-bg;
box-shadow: inset 0 1px 3px @pd-day-selected-shadow;
border-radius: 3px;
}
Upvote
2