It would be nice to support something like LESS (https://lesscss.org/).
I've integrated a LESS parser in my personal project that takes .less
files and converts them to CSS before giving them to JavaFX. This
allows me to use functions like "fade" and "lighten":
-fx-background-color: fade(black, 40%);
-fx-background-color: lighten(@glass-color, 20%, relative);
It supports variables, and the & operator to repeat parent selectors,
here a bigger example:
.group-heading {
@c1: rgba(255, 255, 255, 85%);
@c2: fade(@text-accent-highlight, 70%);
&.horizontal {
-fx-background-color: linear-gradient(to right, transparent 0%,
@c2 18%, transparent 48%, transparent),
linear-gradient(to right, transparent 0%,
@c2 6%, @c2 35%, transparent 98%, transparent);
-fx-border-color: linear-gradient(to right, transparent 0%,
transparent 50%, @c1 93%, @c1 99%, transparent);
}
&.vertical {
-fx-background-color: linear-gradient(to top, transparent 0%,
@c2 18%, transparent 48%, transparent),
linear-gradient(to top, transparent 0%,
@c2 6%, @c2 35%, transparent 98%, transparent);
-fx-border-color: linear-gradient(to top, transparent 0%,
transparent 50%, @c1 93%, @c1 99%, transparent);
}
}
It integrates relatively easily. I let it statically compile the less
files and generate regular CSS file URL's:
private static final String ROOT_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "root.less");
private static final String PROGRESS_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "progress-pane.less");
private static final String CLOCK_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "clock-pane.less");
private static final String LOGO_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "logo-pane.less");
private static final String FPS_STYLES_URL =
LessLoader.compile(RootNodeFactory.class, "fps-pane.less");
Then you can use it like any other stylesheet on a component:
clockPane.getStylesheets().add(CLOCK_STYLES_URL);
--John
On 15/01/2023 01:31, Scott Palmer wrote:
I was looking at Modena.css and came across this:
/* A bright blue for the focus indicator of objects. Typically
used as the
* first color in -fx-background-color for the "focused"
pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
*/
-fx-focus-color: #039ED3;
-fx-faint-focus-color: #039ED322;
I noticed two things pertaining to -fx-faint-focus-color. Although
I've used this form to specify colors myself, the JavaFX CSS Reference
Guide at
https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html#typecolor does
not mention being able to use an 8-digit form of #rrggbbaa when using
hex digits. Only the 3- and 6-digit forms of hexadecimal RGB are
mentioned. RGB + Alpha colors are only documented in the form of
rgba(#,#,#,#) and rgba(#%,#%,#%,#).
More importantly, this is a copy of -fx-focus-color with an added
alpha channel, but it's created by repeating the literal color value
and appending the alpha component, rather than somehow deriving it
from -fx-focus-color. Similar repetition is needed for the
semi-transparent chart colors.
Would it make sense to add support for something similar to derive(
<color> , <number>% ) to specify a color based on an existing color
with a new value for the alpha channel (or any other) value? Maybe a
color-transform method that would do for an RGBA color vector what
other transforms do for spatial coordinates?*
Regards,
Scott
* Note: It seems future CSS standards are looking for ways to do
similar things. A color-modfunction was proposed in
https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod
but removed in the next revision
https://www.w3.org/TR/2022/CRD-css-color-4-20221101/#changes-from-20160705.
I'm not following CSS development closely, but some googling suggests
the next proposal is based on a new keyword 'from' to create derived
colors. E.g rgb(from skyblue, 255 g b) to get a color based on
skyblue with a red component of 255. This is mentioned here
https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198
I'm skeptical that it is worth waiting for the dust to settle on the
CSS standard, but supporting whatever they come up with is a possibility.
