4

RichTextFx (top control) doesn't looks like TextArea (bottom control) by default:

RichTextFX without border, corners and focus border

I have found a way how to add round corners (just copy and configure some styles from modena.css):

.virtualized-scroll-pane {
    -fx-padding: 0;
    -fx-cursor: default;
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        derive(-fx-base,-1%);
}
.virtualized-scroll-pane {
    -fx-background-color: null;
}
.virtualized-scroll-pane > .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;
}
.virtualized-scroll-pane > .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;
}
.virtualized-scroll-pane > .corner {
    -fx-background-radius: 0 0 2 0;
}
.virtualized-scroll-pane .code-area {
    /*the is 1px less top and bottom than TextInput because of scrollpane border */
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
    -fx-cursor: text;
    -fx-background-color:
        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-radius: 2;
}
.virtualized-scroll-pane:focused .code-area {
    -fx-background-color:
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 0, 2;
    -fx-background-radius: 2, 1, 0;
}

but don't understand how to add gray border around unfocused control and blue border around focused control (i.e. around text control and scrollbars)?

Seems like blue border of focused control configured here but the following CSS doesn't work:

.virtualized-scroll-pane {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
.virtualized-scroll-pane:focused {
    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
    -fx-prompt-text-fill: transparent;
}

As I understand this is doesn't work because .virtualized-scroll-pane doesn't take focus.

Here is Maven project for reproduce problem.

So, how to fix it?

FYI: RichTextFX 0.7-M1, JDK 1.8.0_91-b14

4

3 回答 3

2

您可以手动切换focused伪类，VirtualizedScrollPane然后您可以.virtualized-scroll-pane:focused在 CSS 中使用选择器：

PseudoClass FOCUSED = PseudoClass.getPseudoClass("focused");
area.focusedProperty().addListener((obs, oldVal, newVal) -> {
    virtualizedScrollPane.pseudoClassStateChanged(FOCUSED, newVal);
});
于 2016-06-14T18:04:26.610 回答
2

我发现了以下自定义 RichTextFx 的方法：

对于 0.6.10 版本：

.code-area {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-padding: 0.041666625em;
}

.code-area:focused {
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
}

.code-area .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;
}

.code-area .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;
}

richtextfx-0.6.10-无选择 richtextfx-0.6.10-with-selection

对于 0.7-M1（修复了 'focused' 伪类）：

.virtualized-scroll-pane {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
}

.virtualized-scroll-pane:focused {
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
}

/* 
I don't understand why this rule fix problem with border around CodeArea.
May be somebody can explain it.
*/
.virtualized-scroll-pane .styled-text-area {
    -fx-background-insets: 0px;
}

.virtualized-scroll-pane .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;

    -fx-padding: 0 0.08333325em 0.08333325em 0.08333325em;
    -fx-border-insets: 0 0.08333325em 0.08333325em 0.08333325em;
    -fx-background-insets: 0 0.08333325em 0.08333325em 0.08333325em;
}

.virtualized-scroll-pane .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;

    -fx-padding: 0.08333325em 0.08333325em 0.08333325em 0;
    -fx-border-insets: 0.08333325em 0.08333325em 0.08333325em 0;
    -fx-background-insets: 0.08333325em 0.08333325em 0.08333325em 0;
}

richtextfx-0.7-M1-无选择 richtextfx-0.7-M1-with-selection

完整版本在独立分支的存储库中可用。

未解决的问题：

  • 滚动条大小
  • 右下角正方形的颜色
  • 在文本之前和顶部缩进

可能有人可以提供更好的解决方案吗？

于 2016-06-15T11:11:27.467 回答
0

对于右下角正方形的颜色，请使用以下命令：

.virtualized-scroll-pane  .scroll-pane .filler {
    -fx-background-color: white;
}

.virtualized-scroll-pane  .scroll-pane .corner {
    -fx-background-color: white;
}
于 2018-03-27T13:06:57.303 回答