Dave Jarvis' Repositories

git clone https://repo.autonoma.ca/repo/keenwrite.git
keenwrite / Commits / 1a14cfd
README.md
* Real-time document statistics (with CJK word separation)
* Diagrams: Mermaid, GraphViz, UML, sequence, timing, and more
-* Dark, custom, and responsive themes
+* Dark, custom, and responsive user interface skins
* Integrated file manager
* Interactive document outline
Read the [detailed documentation](docs/README.md) for using the application.
-### Themes
+### Skins
-Read the [themes documentation](docs/themes.md) to learn about themes.
+Read the [skins documentation](docs/skins.md) to learn about how to change
+the user interface appearance.
## Screenshots
docs/README.md
* [r.md](r.md) -- Call R functions within R Markdown documents
* [svg.md](svg.md) -- Fix known issues with displaying SVG files
-* [themes.md](themes.md) -- Describes how to add and customize themes
+* [skins.md](skins.md) -- Describes how to customize the user interface
* [credits.md](credits.md) -- Thanks to authors of contributing projects
* [samples](samples) -- Contains example documents
docs/skins.md
+# Skins
+
+The application provides bundled skins and the ability to add custom
+skins. This document describes the interplay between bundled skins
+and building your own look and feel.
+
+A skin is a set of styles, similar to cascading style sheet classes,
+that configures the user interface colours, fonts, spacing, highlights,
+drop-shadows, gradients, and more.
+
+For more information on CSS, see the [W3C CSS tutorial](https://www.w3.org/Style/Examples/011/firstcss).
+
+# Order
+
+The order that stylesheets are applied matters so that stylesheets can
+override styles defined previously. The application's user interface
+is made up of the following stylesheets, applied in the order listed:
+
+* **scene.css** --- Defines toolbar styling.
+* **markdown.css** --- Defines text editor styling.
+* **skins/skin_name.css** --- Bundled skin selected in preferences.
+* **custom.css** --- User-defined file set in preferences.
+
+# Customization
+
+Create a custom skin as follows:
+
+1. Start the application.
+1. Click **File → New** to create a new file.
+1. Click **File → Save As** to rename the file.
+1. Save the file as `custom.css`.
+1. Change the content to the following:
+``` css
+.root {
+ -fx-base: rgb( 30, 30, 30 );
+ -fx-background: -fx-base;
+}
+```
+
+Next, apply the skin as follows:
+
+1. Click **Edit → Preferences** to open the preferences dialog.
+1. Click **Skins** to view the available options.
+1. Click **Browse** to select a custom file.
+1. Browse to and select `custom.css`, created previously.
+1. Click **Open**.
+1. Click **Apply**.
+
+The user interface immediately changes to a dark mode. Continue:
+
+1. Click **OK** to close the dialog.
+1. Change the **rgb** numbers in **custom.css** from `30` to `60`.
+1. Click **File → Save** to save the CSS file.
+
+The user interface immediately changes colour.
+
+# Classes
+
+When creating your own skin, there many classes that can be styled. The
+previous section showed how to set up a rudimentary skin. Instead, start
+with a template that already has a number of classes defined so that you
+can tweak them to your taste. Accomplish this as follows:
+
+1. Visit the [skin](https://github.com/DaveJarvis/keenwrite/tree/master/src/main/resources/com/keenwrite/skins) repository directory
+1. Click one of the files (e.g., `haunted_grey.css`).
+1. Click **Raw**.
+1. Copy the entire text.
+1. Return to `custom.css`.
+1. Delete the contents.
+1. Paste the copied text.
+1. Save the file.
+
+To see how the CSS styles are applied to the text editor, open
+[markdown.css](https://github.com/DaveJarvis/keenwrite/blob/master/src/main/resources/com/keenwrite/editor/markdown.css), which is also in the repository.
+
+# Modena
+
+The basic look used by the application is _Modena Light_. Typically we
+only need to override a few classes to completely change the application's
+look and feel. For a full listing of available styles see the OpenJDK's
+[Modena CSS file](https://github.com/openjdk/jfx/blob/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css).
+
+# JavaFX CSS
+
+The [Java CSS Reference Guide](https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/doc-files/cssref.html) is exhaustive. In addition to showing many
+differences between JavaFX CSS and W3C CSS, the guide introduces numerous
+helpful functions for manipulating colours and gradients using existing
+colour definitions.
+
+# RichTextFX
+
+The application uses RichTextFX to render the text editor. Styling various
+text editor classes can require using the prefix `-rtfx` instead of the
+regular JavaFX `-fx`.
+
+# Submit
+
+If you have a look that you'd like to contribute to the project, do pass
+it along. Either open a new issue in the [issue tracker](https://github.com/DaveJarvis/keenwrite/issues) that contains the CSS file or submit a pull request.
+
docs/themes.md
-# Themes
-
-The application provides bundled themes and the ability to add custom
-themes. This document describes the interplay between bundled themes
-and building your own theme.
-
-A theme is a set of styles, similar to cascading style sheet classes,
-that instruct the user interface on how to apply colours, fonts, spacing,
-highlights, drop-shadows, gradients, and so forth.
-
-For more information on CSS, see the [W3C CSS tutorial](https://www.w3.org/Style/Examples/011/firstcss).
-
-# Order
-
-The order that stylesheets are applied matters so that stylesheets can
-override styles defined previously. The application's user interface
-is made up of the following stylesheets, applied in the order listed:
-
-* **scene.css** --- Defines toolbar styling.
-* **markdown.css** --- Defines text editor styling.
-* **themes/theme_name.css** --- Bundled theme selected in preferences.
-* **custom.css** --- User-defined file set in preferences.
-
-# Customization
-
-Create a custom theme as follows:
-
-1. Start the application.
-1. Click **File → New** to create a new file.
-1. Click **File → Save As** to rename the file.
-1. Save the file as `custom.css`.
-1. Change the content to the following:
-``` css
-.root {
- -fx-base: rgb( 30, 30, 30 );
- -fx-background: -fx-base;
-}
-```
-
-Next, apply the theme as follows:
-
-1. Click **Edit → Preferences** to open the preferences dialog.
-1. Click **Themes** to view the theme options.
-1. Click **Browse** to select a custom theme file.
-1. Browse to and select `custom.css`, created previously.
-1. Click **Open**.
-1. Click **Apply**.
-
-The user interface immediately changes to a dark mode. Continue:
-
-1. Click **OK** to close the dialog.
-1. Change the **rgb** numbers in **custom.css** from `30` to `60`.
-1. Click **File → Save** to save the CSS file.
-
-The user interface immediately changes colour.
-
-# Classes
-
-When creating your own theme, there many classes that can be styled. The
-previous section showed how to set up a rudimentary theme. Instead, start
-with a template that already has a number of classes defined so that you
-can tweak them to your taste. Accomplish this as follows:
-
-1. Visit the [themes](https://github.com/DaveJarvis/keenwrite/tree/master/src/main/resources/com/keenwrite/themes) repository directory
-1. Click one of the themes (e.g., `haunted_grey.css`).
-1. Click **Raw**.
-1. Copy the entire text.
-1. Return to `custom.css`.
-1. Delete the contents.
-1. Paste the copied text.
-1. Save the file.
-
-To see how the CSS styles are applied to the text editor, open
-[markdown.css](https://github.com/DaveJarvis/keenwrite/blob/master/src/main/resources/com/keenwrite/editor/markdown.css), which is also in the repository.
-
-# Modena
-
-The basic theme used by the application is _Modena Light_. Typically we
-only need to override a few classes to completely change the application's
-look and feel. For a full listing of available styles see the OpenJDK's
-[Modena CSS file](https://github.com/openjdk/jfx/blob/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css).
-
-# JavaFX CSS
-
-The [Java CSS Reference Guide](https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/doc-files/cssref.html) is exhaustive. In addition to showing many
-differences between JavaFX CSS and W3C CSS, the guide introduces numerous
-helpful functions for manipulating colours and gradients using existing
-colour definitions.
-
-# RichTextFX
-
-The application uses RichTextFX to render the text editor. Styling various
-text editor classes can require using the prefix `-rtfx` instead of the
-regular JavaFX `-fx`.
-
-# Submit
-
-Send in your themes! If you have a theme you'd like to contribute to the
-project, or improvements to an existing theme, do pass it along. Either open a new issue in the [issue tracker](https://github.com/DaveJarvis/keenwrite/issues) that contains the CSS file or submit a pull request.
-
src/main/java/com/keenwrite/Constants.java
public static final String STYLESHEET_APPLICATION_BASE =
get( "file.stylesheet.application.base" );
- public static final String STYLESHEET_APPLICATION_THEME =
- get( "file.stylesheet.application.theme" );
+ public static final String STYLESHEET_APPLICATION_SKIN =
+ get( "file.stylesheet.application.skin" );
public static final String STYLESHEET_MARKDOWN =
get( "file.stylesheet.markdown" );
/**
- * Default CSS theme to apply (resolves to a minimal implementation).
+ * Default CSS to apply (resolves to a minimal implementation).
*/
- public static final String THEME_DEFAULT = "Modena Light";
+ public static final String SKIN_DEFAULT = "Modena Light";
/**
- * Custom CSS theme to apply.
+ * Custom CSS to apply.
*/
- public static final File THEME_CUSTOM_DEFAULT = null;
+ public static final File SKIN_CUSTOM_DEFAULT = null;
/**
src/main/java/com/keenwrite/MainScene.java
import static com.keenwrite.events.ScrollLockEvent.fireScrollLockEvent;
import static com.keenwrite.events.StatusEvent.clue;
-import static com.keenwrite.preferences.ThemeProperty.toFilename;
-import static com.keenwrite.preferences.WorkspaceKeys.KEY_UI_THEME_CUSTOM;
-import static com.keenwrite.preferences.WorkspaceKeys.KEY_UI_THEME_SELECTION;
+import static com.keenwrite.preferences.SkinProperty.toFilename;
+import static com.keenwrite.preferences.WorkspaceKeys.KEY_UI_SKIN_CUSTOM;
+import static com.keenwrite.preferences.WorkspaceKeys.KEY_UI_SKIN_SELECTION;
import static com.keenwrite.ui.actions.ApplicationBars.*;
import static javafx.application.Platform.runLater;
private void initStylesheets( final Scene scene, final Workspace workspace ) {
- final var internal = workspace.themeProperty( KEY_UI_THEME_SELECTION );
- final var external = workspace.fileProperty( KEY_UI_THEME_CUSTOM );
- final var inTheme = internal.get();
- final var exTheme = external.get();
- applyStylesheets( scene, inTheme, exTheme );
+ final var internal = workspace.skinProperty( KEY_UI_SKIN_SELECTION );
+ final var external = workspace.fileProperty( KEY_UI_SKIN_CUSTOM );
+ final var inSkin = internal.get();
+ final var exSkin = external.get();
+ applyStylesheets( scene, inSkin, exSkin );
internal.addListener(
( c, o, n ) -> {
if( n != null ) {
- applyStylesheets( scene, n, exTheme );
+ applyStylesheets( scene, n, exSkin );
}
}
if( n != null ) {
try {
- applyStylesheets( scene, inTheme, n );
+ applyStylesheets( scene, inSkin, n );
} catch( final Exception ex ) {
// Changes to the CSS file won't autoload, which is okay.
mFileWatchService.removeListener( mStylesheetFileListener );
mStylesheetFileListener = event ->
- runLater( () -> applyStylesheets( scene, inTheme, event.getFile() ) );
+ runLater( () -> applyStylesheets( scene, inSkin, event.getFile() ) );
mFileWatchService.addListener( mStylesheetFileListener );
}
private String getStylesheet( final String filename ) {
- return get( STYLESHEET_APPLICATION_THEME, filename );
+ return get( STYLESHEET_APPLICATION_SKIN, filename );
}
src/main/java/com/keenwrite/preferences/PreferencesController.java
import static com.keenwrite.Messages.get;
import static com.keenwrite.preferences.LocaleProperty.localeListProperty;
-import static com.keenwrite.preferences.ThemeProperty.themeListProperty;
+import static com.keenwrite.preferences.SkinProperty.skinListProperty;
import static com.keenwrite.preferences.WorkspaceKeys.*;
import static javafx.scene.control.ButtonType.CANCEL;
),
Category.of(
- get( KEY_UI_THEME ),
+ get( KEY_UI_SKIN ),
Group.of(
- get( KEY_UI_THEME_SELECTION ),
- Setting.of( label( KEY_UI_THEME_SELECTION ) ),
- Setting.of( title( KEY_UI_THEME_SELECTION ),
- themeListProperty(),
- themeProperty( KEY_UI_THEME_SELECTION ) )
+ get( KEY_UI_SKIN_SELECTION ),
+ Setting.of( label( KEY_UI_SKIN_SELECTION ) ),
+ Setting.of( title( KEY_UI_SKIN_SELECTION ),
+ skinListProperty(),
+ skinProperty( KEY_UI_SKIN_SELECTION ) )
),
Group.of(
- get( KEY_UI_THEME_CUSTOM ),
- Setting.of( label( KEY_UI_THEME_CUSTOM ) ),
- Setting.of( title( KEY_UI_THEME_CUSTOM ),
- fileProperty( KEY_UI_THEME_CUSTOM ), false )
+ get( KEY_UI_SKIN_CUSTOM ),
+ Setting.of( label( KEY_UI_SKIN_CUSTOM ) ),
+ Setting.of( title( KEY_UI_SKIN_CUSTOM ),
+ fileProperty( KEY_UI_SKIN_CUSTOM ), false )
)
),
}
- private ObjectProperty<String> themeProperty( final Key key ) {
- return mWorkspace.themeProperty( key );
+ private ObjectProperty<String> skinProperty( final Key key ) {
+ return mWorkspace.skinProperty( key );
}
src/main/java/com/keenwrite/preferences/SkinProperty.java
+/* Copyright 2020-2021 White Magic Software, Ltd. -- All rights reserved. */
+package com.keenwrite.preferences;
+
+import com.keenwrite.Constants;
+import javafx.beans.property.SimpleObjectProperty;
+import javafx.collections.ObservableList;
+
+import java.util.LinkedHashSet;
+import java.util.Set;
+
+import static com.keenwrite.Constants.SKIN_DEFAULT;
+import static com.keenwrite.preferences.Workspace.listProperty;
+
+/**
+ * Maintains a list of look and feels that the user may choose.
+ */
+public final class SkinProperty extends SimpleObjectProperty<String> {
+ /**
+ * Ordered set of available skins.
+ */
+ private static final Set<String> sSkins = new LinkedHashSet<>();
+
+ static {
+ sSkins.add( "Count Darcula" );
+ sSkins.add( "Haunted Grey" );
+ sSkins.add( "Modena Dark" );
+ sSkins.add( SKIN_DEFAULT );
+ sSkins.add( "Silver Cavern" );
+ sSkins.add( "Solarized Dark" );
+ sSkins.add( "Vampire Byte" );
+ }
+
+ public SkinProperty( final String skin ) {
+ super( skin );
+ }
+
+ public static ObservableList<String> skinListProperty() {
+ return listProperty( sSkins );
+ }
+
+ /**
+ * Returns the given skin name as a sanitized file name, which must map
+ * to a stylesheet file bundled with the application. This does not include
+ * the path to the stylesheet. If the given name is not known, the file
+ * name for {@link Constants#SKIN_DEFAULT} is returned. The extension must
+ * be added separately.
+ *
+ * @param skin The name to convert to a file name.
+ * @return The given name converted lower case, spaces replaced with
+ * underscores, without the ".css" extension appended.
+ */
+ public static String toFilename( final String skin ) {
+ return sanitize( skin ).toLowerCase().replace( ' ', '_' );
+ }
+
+ /**
+ * Ensures that the given name is in the list of known skins.
+ *
+ * @param skin Validate this name's existence.
+ * @return The given name, if valid, otherwise the default skin.
+ */
+ private static String sanitize( final String skin ) {
+ return sSkins.contains( skin ) ? skin : SKIN_DEFAULT;
+ }
+}
src/main/java/com/keenwrite/preferences/ThemeProperty.java
-/* Copyright 2020-2021 White Magic Software, Ltd. -- All rights reserved. */
-package com.keenwrite.preferences;
-
-import com.keenwrite.Constants;
-import javafx.beans.property.SimpleObjectProperty;
-import javafx.collections.ObservableList;
-
-import java.util.LinkedHashSet;
-import java.util.Set;
-
-import static com.keenwrite.Constants.THEME_DEFAULT;
-import static com.keenwrite.preferences.Workspace.listProperty;
-
-/**
- * Responsible for providing a list of themes from which the user may pick.
- */
-public final class ThemeProperty extends SimpleObjectProperty<String> {
- /**
- * Ordered set of available themes.
- */
- private static final Set<String> sThemes = new LinkedHashSet<>();
-
- static {
- sThemes.add( "Count Darcula" );
- sThemes.add( "Haunted Grey" );
- sThemes.add( "Modena Dark" );
- sThemes.add( THEME_DEFAULT );
- sThemes.add( "Silver Cavern" );
- sThemes.add( "Solarized Dark" );
- sThemes.add( "Vampire Byte" );
- }
-
- public ThemeProperty( final String themeName ) {
- super( themeName );
- }
-
- public static ObservableList<String> themeListProperty() {
- return listProperty( sThemes );
- }
-
- /**
- * Returns the given theme name as a sanitized file name, which must map
- * to a stylesheet file bundled with the application. This does not include
- * the path to the stylesheet. If the given theme name cannot be found in
- * the known theme list, the file name for {@link Constants#THEME_DEFAULT}
- * is returned. The extension must be added separately.
- *
- * @param theme The name to convert to a file name.
- * @return The given theme name converted lower case, spaces replaced with
- * underscores, without the ".css" extension appended.
- */
- public static String toFilename( final String theme ) {
- return sanitize( theme ).toLowerCase().replace( ' ', '_' );
- }
-
- /**
- * Ensures that the given theme name is in the list of known themes.
- *
- * @param theme Validate this theme name's existence.
- * @return The given theme name, if valid, otherwise the default theme name.
- */
- private static String sanitize( final String theme ) {
- return sThemes.contains( theme ) ? theme : THEME_DEFAULT;
- }
-}
src/main/java/com/keenwrite/preferences/Workspace.java
entry( KEY_UI_WINDOW_FULL, asBooleanProperty() ),
- entry( KEY_UI_THEME_SELECTION, asThemeProperty( THEME_DEFAULT ) ),
- entry( KEY_UI_THEME_CUSTOM, asFileProperty( THEME_CUSTOM_DEFAULT ) ),
+ entry( KEY_UI_SKIN_SELECTION, asSkinProperty( SKIN_DEFAULT ) ),
+ entry( KEY_UI_SKIN_CUSTOM, asFileProperty( SKIN_CUSTOM_DEFAULT ) ),
entry( KEY_LANGUAGE_LOCALE, asLocaleProperty( LOCALE_DEFAULT ) ),
@SuppressWarnings( "SameParameterValue" )
- private ThemeProperty asThemeProperty( final String defaultValue ) {
- return new ThemeProperty( defaultValue );
+ private SkinProperty asSkinProperty( final String defaultValue ) {
+ return new SkinProperty( defaultValue );
}
}
- public ObjectProperty<String> themeProperty( final Key key ) {
+ public ObjectProperty<String> skinProperty( final Key key ) {
return valuesProperty( key );
}
src/main/java/com/keenwrite/preferences/WorkspaceKeys.java
public static final Key KEY_UI_WINDOW_FULL = key( KEY_UI_WINDOW, "full" );
- public static final Key KEY_UI_THEME = key( KEY_UI, "theme" );
- public static final Key KEY_UI_THEME_SELECTION = key( KEY_UI_THEME, "selection" );
-
- public static final Key KEY_UI_THEME_CUSTOM = key( KEY_UI_THEME, "custom" );
+ public static final Key KEY_UI_SKIN = key( KEY_UI, "skin" );
+ public static final Key KEY_UI_SKIN_SELECTION = key( KEY_UI_SKIN, "selection" );
+ public static final Key KEY_UI_SKIN_CUSTOM = key( KEY_UI_SKIN, "custom" );
public static final Key KEY_LANGUAGE = key( KEY_ROOT, "language" );
src/main/resources/com/keenwrite/messages.properties
workspace.definition.delimiter.ended.title=Closing
-workspace.ui.theme=Themes
-workspace.ui.theme.selection=Bundled
-workspace.ui.theme.selection.desc=Pre-packaged application style (default: Modena Light)
-workspace.ui.theme.selection.title=Name
-workspace.ui.theme.custom=Custom
-workspace.ui.theme.custom.desc=User-defined JavaFX cascading stylesheet file
-workspace.ui.theme.custom.title=Path
+workspace.ui.skin=Skins
+workspace.ui.skin.selection=Bundled
+workspace.ui.skin.selection.desc=Pre-packaged application style (default: Modena Light)
+workspace.ui.skin.selection.title=Name
+workspace.ui.skin.custom=Custom
+workspace.ui.skin.custom.desc=User-defined JavaFX cascading stylesheet file
+workspace.ui.skin.custom.title=Path
workspace.ui.font=Fonts
src/main/resources/com/keenwrite/settings.properties
# ########################################################################
-file.stylesheet.application.dir=${application.package}/themes
+file.stylesheet.application.dir=${application.package}/skins
file.stylesheet.application.base=${file.stylesheet.application.dir}/scene.css
-file.stylesheet.application.theme=${file.stylesheet.application.dir}/{0}.css
+file.stylesheet.application.skin=${file.stylesheet.application.dir}/{0}.css
file.stylesheet.markdown=${application.package}/editor/markdown.css
# {0} language code, {1} script code, {2} country code
src/main/resources/com/keenwrite/skins/count_darcula.css
+.root {
+ -fx-base: rgb( 43, 43, 43 );
+ -fx-background: -fx-base;
+ -fx-control-inner-background: -fx-base;
+
+ -fx-light-text-color: rgb( 187, 187, 187 );
+ -fx-mid-text-color: derive( -fx-base, 100% );
+ -fx-dark-text-color: derive( -fx-base, 25% );
+ -fx-text-foreground: -fx-light-text-color;
+ -fx-text-background: derive( -fx-control-inner-background, 7.5% );
+ -fx-text-selection: derive( -fx-control-inner-background, 45% );
+
+ /* Make controls ( buttons, thumb, etc. ) slightly lighter */
+ -fx-color: derive( -fx-base, 20% );
+}
+
+.caret {
+ -fx-stroke: -fx-accent;
+}
+
+.glyph-icon {
+ -fx-text-fill: -fx-light-text-color;
+ -fx-fill: -fx-light-text-color;
+}
+
+.glyph-icon:hover {
+ -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
+}
+
+/* Fix derived prompt color for text fields */
+.text-input {
+ -fx-prompt-text-fill: derive( -fx-control-inner-background, +50% );
+}
+
+/* Keep prompt invisible when focused ( above color fix overrides it ) */
+.text-input:focused {
+ -fx-prompt-text-fill: transparent;
+}
+
+/* Fix scroll bar buttons arrows colors */
+.scroll-bar > .increment-button > .increment-arrow,
+.scroll-bar > .decrement-button > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, -fx-light-text-color;
+}
+
+.scroll-bar > .increment-button:hover > .increment-arrow,
+.scroll-bar > .decrement-button:hover > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb( 240, 240, 240 );
+}
+
+.scroll-bar > .increment-button:pressed > .increment-arrow,
+.scroll-bar > .decrement-button:pressed > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb( 255, 255, 255 );
+}
src/main/resources/com/keenwrite/skins/haunted_grey.css
+/* https://stackoverflow.com/a/58441758/59087
+ */
+.root {
+ -fx-accent: #1e74c6;
+ -fx-focus-color: -fx-accent;
+ -fx-base: #373e43;
+ -fx-control-inner-background: derive( -fx-base, 35% );
+ -fx-control-inner-background-alt: -fx-control-inner-background;
+
+ -fx-light-text-color: derive( -fx-base, 150% );
+ -fx-mid-text-color: derive( -fx-base, 100% );
+ -fx-dark-text-color: derive( -fx-base, 25% );
+ -fx-text-foreground: -fx-light-text-color;
+ -fx-text-background: derive( -fx-control-inner-background, 7.5% );
+ -fx-text-selection: derive( -fx-control-inner-background, 45% );
+}
+
+.glyph-icon {
+ -fx-text-fill: -fx-light-text-color;
+ -fx-fill: -fx-light-text-color;
+}
+
+.glyph-icon:hover {
+ -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
+}
+
+.label {
+ -fx-text-fill: -fx-light-text-color;
+}
+
+.text-field {
+ -fx-prompt-text-fill: gray;
+}
+
+.button {
+ -fx-focus-traversable: false;
+}
+
+.button:hover {
+ -fx-text-fill: white;
+}
+
+.separator *.line {
+ -fx-background-color: #3C3C3C;
+ -fx-border-style: solid;
+ -fx-border-width: 1px;
+}
+
+.scroll-bar {
+ -fx-background-color: derive( -fx-base, 45% );
+}
+
+.button:default {
+ -fx-base: -fx-accent;
+}
+
+.table-view {
+ -fx-selection-bar-non-focused: derive( -fx-base, 50% );
+}
+
+.table-view .column-header .label {
+ -fx-alignment: CENTER_LEFT;
+ -fx-font-weight: none;
+}
+
+.list-cell:even,
+.list-cell:odd,
+.table-row-cell:even,
+.table-row-cell:odd {
+ -fx-control-inner-background: derive( -fx-base, 15% );
+}
+
+.list-cell:empty,
+.table-row-cell:empty {
+ -fx-background-color: transparent;
+}
+
+.list-cell,
+.table-row-cell {
+ -fx-border-color: transparent;
+ -fx-table-cell-border-color: transparent;
+}
+
+/* Avoid clipping text descenders in statistics table row. */
+.table-row-cell {
+ -fx-cell-size: 30px;
+}
src/main/resources/com/keenwrite/skins/modena_dark.css
+/* https://github.com/joffrey-bion/javafx-themes/blob/master/css/modena_dark.css
+ */
+.root {
+ -fx-base: rgb( 50, 50, 50 );
+ -fx-background: -fx-base;
+
+ /* Make controls ( buttons, thumb, etc. ) slightly lighter */
+ -fx-color: derive( -fx-base, 10% );
+
+ /* Text fields and table rows background */
+ -fx-control-inner-background: rgb( 20, 20, 20 );
+ /* Version of -fx-control-inner-background for alternative rows */
+ -fx-control-inner-background-alt: derive( -fx-control-inner-background, 2.5% );
+
+ /* Text colors depending on background's brightness */
+ -fx-light-text-color: rgb( 220, 220, 220 );
+ -fx-mid-text-color: rgb( 100, 100, 100 );
+ -fx-dark-text-color: rgb( 20, 20, 20 );
+ -fx-text-foreground: -fx-light-text-color;
+ -fx-text-background: derive( -fx-control-inner-background, 7.5% );
+ -fx-text-selection: derive( -fx-control-inner-background, 45% );
+
+ /* A bright blue for highlighting/accenting objects. For example: selected
+ * text; selected items in menus, lists, trees, and tables; progress bars */
+ -fx-accent: rgb( 0, 80, 100 );
+
+ /* Color of non-focused yet selected elements */
+ -fx-selection-bar-non-focused: rgb( 50, 50, 50 );
+}
+
+.glyph-icon {
+ -fx-text-fill: -fx-light-text-color;
+ -fx-fill: -fx-light-text-color;
+}
+
+.glyph-icon:hover {
+ -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
+}
+
+/* Fix derived prompt color for text fields */
+.text-input {
+ -fx-prompt-text-fill: derive( -fx-control-inner-background, +50% );
+}
+
+/* Keep prompt invisible when focused ( above color fix overrides it ) */
+.text-input:focused {
+ -fx-prompt-text-fill: transparent;
+}
+
+/* Fix scroll bar buttons arrows colors */
+.scroll-bar > .increment-button > .increment-arrow,
+.scroll-bar > .decrement-button > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb( 220, 220, 220 );
+}
+
+.scroll-bar > .increment-button:hover > .increment-arrow,
+.scroll-bar > .decrement-button:hover > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb( 240, 240, 240 );
+}
+
+.scroll-bar > .increment-button:pressed > .increment-arrow,
+.scroll-bar > .decrement-button:pressed > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb( 255, 255, 255 );
+}
src/main/resources/com/keenwrite/skins/modena_light.css
+.root {
+ -fx-text-foreground: -fx-dark-text-color;
+ -fx-text-background: derive( -fx-accent, 124% );
+ -fx-text-selection: #a6d2ff;
+}
src/main/resources/com/keenwrite/skins/scene.css
+/*
+ * Copyright (c) 2015 Karl Tauber <karl at jformdesigner dot com>
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * o Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *
+ * o Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.tool-bar {
+ -fx-spacing: 0;
+}
+
+.tool-bar .button {
+ -fx-background-color: transparent;
+}
+
+.tool-bar .button:hover {
+ -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+ -fx-color: -fx-hover-base;
+}
+
+.tool-bar .button:armed {
+ -fx-color: -fx-pressed-base;
+}
+
+/* Definition editor drag and drop target.
+ */
+.drop-target {
+ -fx-border-color: #eea82f;
+ -fx-border-width: 0 0 2 0;
+ -fx-padding: 3 3 1 3
+}
src/main/resources/com/keenwrite/skins/silver_cavern.css
+/* https://toedter.com/2011/10/26/java-fx-2-0-css-styling/
+ */
+.root {
+ -fx-base: rgb( 50, 50, 50 );
+ -fx-background: -fx-base;
+ -fx-control-inner-background: -fx-base;
+
+ -fx-light-text-color: derive( -fx-base, 150% );
+ -fx-mid-text-color: derive( -fx-base, 100% );
+ -fx-dark-text-color: derive( -fx-base, 25% );
+ -fx-text-foreground: -fx-light-text-color;
+ -fx-text-background: derive( -fx-control-inner-background, 7.5% );
+ -fx-text-selection: derive( -fx-control-inner-background, 45% );
+}
+
+.glyph-icon {
+ -fx-text-fill: -fx-light-text-color;
+ -fx-fill: -fx-light-text-color;
+}
+
+.glyph-icon:hover {
+ -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
+}
+
+.tab {
+ -fx-background-color: linear-gradient( to top, -fx-base, derive( -fx-base, 30% ) );
+}
+
+.menu-bar {
+ -fx-background-color: linear-gradient( to bottom, -fx-base, derive( -fx-base, 30% ) );
+}
+
+.tool-bar:horizontal {
+ -fx-background-color: linear-gradient( to bottom, derive( -fx-base, +50% ), derive( -fx-base, -40% ), derive( -fx-base, -20% ) );
+}
+
+.button {
+ -fx-background-color: transparent;
+}
+
+.button:hover {
+ -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
+ -fx-color: -fx-hover-base;
+}
+
+.table-view {
+ -fx-table-cell-border-color:derive( -fx-base, +10% );
+ -fx-table-header-border-color:derive( -fx-base, +20% );
+}
+
+.split-pane:horizontal > * > .split-pane-divider {
+ -fx-border-color: transparent -fx-base transparent -fx-base;
+ -fx-background-color: transparent, derive( -fx-base, 20% );
+ -fx-background-insets: 0, 0 1 0 1;
+}
+
+.separator-label {
+ -fx-text-fill: orange;
+}
src/main/resources/com/keenwrite/skins/solarized_dark.css
+/* https://ethanschoonover.com/solarized
+ */
+.root {
+ /* Solarized: base03 */
+ -fx-base: rgb( 0, 43, 54 );
+ -fx-background: -fx-base;
+
+ /* Brighten controls */
+ -fx-color: derive( -fx-base, -40% );
+
+ -fx-control-inner-background: -fx-base;
+ -fx-control-inner-background-alt: derive( -fx-control-inner-background, 2.5% );
+
+ /* Text colors */
+ /* Solarized: base0 */
+ -fx-light-text-color: rgb( 131, 148, 150 );
+ -fx-mid-text-color: derive( -fx-light-text-color, 50% );
+ -fx-dark-text-color: derive( -fx-light-text-color, 25% );
+ -fx-text-foreground: -fx-light-text-color;
+ -fx-text-background: derive( -fx-control-inner-background, 7.5% );
+ -fx-text-selection: derive( -fx-control-inner-background, 45% );
+
+ -fx-mid-text-color: derive( -fx-base, 100% );
+ -fx-dark-text-color: derive( -fx-base, 25% );
+ -fx-text-foreground: -fx-light-text-color;
+ -fx-text-background: derive( -fx-control-inner-background, 7.5% );
+ -fx-text-selection: derive( -fx-control-inner-background, 45% );
+
+ /* Accent colors */
+ -fx-accent: rgb( 38, 139, 210 );
+ -fx-focus-color: rgb( 253, 246, 227 );
+
+ /* Non-focused-selected elements */
+ -fx-selection-bar-non-focused: rgb( 0, 43, 54 );
+}
+
+.glyph-icon {
+ -fx-text-fill: -fx-light-text-color;
+ -fx-fill: -fx-light-text-color;
+}
+
+.glyph-icon:hover {
+ -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
+}
+
+.scroll-bar {
+ -fx-background-color: derive( -fx-base, 45% );
+}
+
+.caret {
+ -fx-stroke: -fx-accent;
+}
+
src/main/resources/com/keenwrite/skins/vampire_byte.css
+/* https://github.com/Col-E/Recaf/blob/master/src/main/resources/style/ui-dark.css
+ */
+.root {
+ -fx-base: rgb( 45, 45, 46 );
+ -fx-background: -fx-base;
+
+ /* Brighten controls */
+ -fx-color: derive( -fx-base, -40% );
+
+ /* Control background */
+ -fx-control-inner-background: rgb( 46, 46, 47 );
+
+ /* Alternative control background ( rows ) */
+ -fx-control-inner-background-alt: derive( -fx-control-inner-background, 2.5% );
+
+ /* Text colors */
+ -fx-light-text-color: rgb( 220, 220, 220 );
+ -fx-mid-text-color: rgb( 100, 100, 100 );
+ -fx-dark-text-color: rgb( 20, 20, 20 );
+ -fx-text-foreground: -fx-light-text-color;
+ -fx-text-background: derive( -fx-control-inner-background, 7.5% );
+ -fx-text-selection: derive( -fx-control-inner-background, 45% );
+
+ /* Accent colors */
+ -fx-accent: rgb( 51, 51, 52 );
+ -fx-focus-color: rgb( 51, 51, 52 );
+
+ /* Non-focused-selected elements */
+ -fx-selection-bar-non-focused: rgb( 45, 45, 46 );
+}
+
+.glyph-icon {
+ -fx-text-fill: -fx-light-text-color;
+ -fx-fill: -fx-light-text-color;
+}
+
+.glyph-icon:hover {
+ -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
+}
+
+* {
+ -fx-highlight-fill: rgba( 0, 180, 255, 0.4 );
+}
+
+/* Scroll */
+.scroll-bar {
+ -fx-background-color: rgb( 61,61,62 );
+}
+.scroll-bar .thumb {
+ -fx-background-color: rgb( 91,91,92 );
+ -fx-background-radius: 0;
+}
+.scroll-bar .thumb:hover,
+.scroll-bar .thumb:pressed {
+ -fx-background-color: rgb( 141,141,142 );
+}
+.scroll-bar .increment-button .increment-arrow,
+.scroll-bar .decrement-button .decrement-arrow {
+ -fx-background-color: rgb( 200,200,200 );
+}
+.corner {
+ -fx-background-color: rgb( 61,61,62 );
+}
+
+/* Menu */
+.menu-bar {
+ -fx-background-color: rgb( 45, 45, 48 );
+}
+.menu {
+ -fx-padding: 6 14 6 14;
+ -fx-background-insets: -1;
+}
+.menu-item {
+ -fx-padding: 5 11 5 11;
+ -fx-background-insets: -1;
+}
+.menu:hover {
+ -fx-background-color: rgb( 61, 61, 62 );
+}
+.context-menu,
+.menu:showing {
+ -fx-background-color: rgb( 27, 27, 28 );
+ -fx-border-insets: -1;
+ -fx-border-width: 1;
+ -fx-border-color: black;
+}
+.context-menu {
+ -fx-min-width: 80px;
+ -fx-background-insets: -1;
+ -fx-border-insets: -1;
+ -fx-border-width: 1;
+ -fx-border-color: black;
+}
+.context-menu .menu-item:focused {
+ -fx-background-color: rgb( 61, 61, 62 );
+}
+.context-menu-header {
+ /* TODO: Find a way to disable hover coloring on the menu header */
+ -fx-opacity: 1.0;
+ -fx-background-color: rgb( 24, 50, 95 );
+}
+.context-menu-header .label {
+ -fx-opacity: 1.0;
+}
+
+/* Tabs */
+.tab-pane {
+ -fx-tab-min-width: 100px;
+}
+.tab-pane *.tab-header-background {
+ -fx-background-color: rgb( 29, 29, 31 );
+ -fx-border-width: 0 0 1 0;
+ -fx-border-color: black;
+}
+.headers-region {
+ -fx-background-color: rgb( 75, 75, 76 );
+}
+.tab {
+ -fx-background-color: rgb( 36,36,37 );
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-background-radius: 0;
+ -fx-padding: 2 2 1 2;
+ -fx-border-insets: 0;
+ -fx-border-width: 1 1 1 1;
+ -fx-border-color: black;
+}
+.tab:selected {
+ -fx-background-color: rgb( 45, 45, 46 );
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-padding: 2;
+ -fx-border-insets: 0;
+ -fx-border-width: 1 1 0 1;
+ -fx-border-color: black;
+}
+.tab:selected .focus-indicator {
+ -fx-border-color: transparent;
+}
+
+/* Table */
+.table-view {
+ -fx-selection-bar: rgb( 50, 71, 77 );
+ -fx-selection-bar-non-focused: rgb( 46, 56, 59 );
+ -fx-background-color: rgb( 36,36,37 );
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-background-radius: 0;
+ -fx-padding: -1;
+ -fx-border-width: 0 1 1 1;
+ -fx-border-color: rgb( 22, 22, 23 );
+}
+.table-view .filler,
+.table-view .show-hide-columns-button,
+.column-overlay {
+ -fx-background-color: transparent;
+}
+.column-header-background {
+ -fx-background-color: rgb( 36,36,37 );
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-padding: -1;
+ -fx-border-insets: 0;
+ -fx-border-width: 0 1 0 1;
+ -fx-border-color: rgb( 22, 22, 23 );
+}
+.column-header {
+ -fx-background-color: rgb( 45, 45, 46 );
+ -fx-background-insets: -1 -0 -1 0;
+ -fx-padding: 2;
+ -fx-border-insets: 1 -1 1 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb( 22, 22, 23 );
+}
+
+/* Splitpane */
+.split-pane-divider {
+ -fx-background-color: black;
+ -fx-padding: 0;
+ -fx-background-insets: -5;
+}
+
+/* Tree */
+.tree-table-view,
+.tree-view {
+ -fx-background-color: rgb( 29, 29, 31 );
+ -fx-background-insets: 0;
+ -fx-border-width: 0 1 0 0;
+ -fx-border-color: black;
+}
+.tree-table-cell,
+.tree-cell {
+ -fx-background-color: rgb( 29, 29, 31 );
+}
+.tree-cell:selected {
+ -fx-background-color: rgb( 44, 48, 55 );
+}
+
+/* Buttons */
+.box,
+.button,
+.combo-box,
+.slider .thumb {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb( 63, 63, 70 );
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb( 85, 85, 85 );
+}
+.check-box:hover .box,
+.button:hover,
+.combo-box:hover,
+.slider .thumb:hover {
+ -fx-background-color: rgb( 80, 80, 85 );
+ -fx-border-color: rgb( 0, 122, 205 );
+}
+.check-box:pressed .box,
+.button:pressed,
+.combo-box:pressed,
+.slider .thumb:pressed {
+ -fx-background-color: rgb( 0, 122, 205 );
+ -fx-border-color: rgb( 0, 162, 245 );
+}
+.combo-box:showing {
+ -fx-background-color: rgb( 27, 27, 28 );
+ -fx-border-width: 1 1 0 1;
+ -fx-border-color: black;
+}
+.combo-box .combo-box-popup .list-cell {
+ -fx-background-color: rgb( 27, 27, 28 );
+}
+.combo-box .combo-box-popup .list-cell:hover {
+ -fx-background-color: rgb( 61, 61, 62 );
+}
+.combo-box .combo-box-popup .list-view {
+ -fx-background-color: rgb( 27, 27, 28 );
+ -fx-border-width: 0 1 1 1;
+ -fx-border-color: black;
+}
+.hyperlink {
+ -fx-text-fill: rgb( 30, 132, 250 );
+}
+hyperlink:visited {
+ -fx-text-fill: rgb( 98, 59, 217 );
+}
+
+/* slider */
+.slider .track {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb( 29, 29, 31 );
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb( 65, 65, 65 );
+}
+.slider .thumb {
+ -fx-padding: 5;
+}
+.axis-tick-mark {
+ -fx-stroke: rgb( 100, 100, 100 );
+}
+
+/* Text */
+.text-area .content,
+.text-field {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb( 63, 63, 70 );
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb( 85, 85, 85 );
+}
+.text-area {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb( 63, 63, 70 );
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb( 85, 85, 85 );
+}
+.text-area .content {
+ -fx-border-width: 0;
+}
+
+/* Popup */
+.tooltip {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb( 40, 40, 42 );
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb( 70, 70, 72 );
+}
src/main/resources/com/keenwrite/themes/count_darcula.css
-.root {
- -fx-base: rgb( 43, 43, 43 );
- -fx-background: -fx-base;
- -fx-control-inner-background: -fx-base;
-
- -fx-light-text-color: rgb( 187, 187, 187 );
- -fx-mid-text-color: derive( -fx-base, 100% );
- -fx-dark-text-color: derive( -fx-base, 25% );
- -fx-text-foreground: -fx-light-text-color;
- -fx-text-background: derive( -fx-control-inner-background, 7.5% );
- -fx-text-selection: derive( -fx-control-inner-background, 45% );
-
- /* Make controls ( buttons, thumb, etc. ) slightly lighter */
- -fx-color: derive( -fx-base, 20% );
-}
-
-.caret {
- -fx-stroke: -fx-accent;
-}
-
-.glyph-icon {
- -fx-text-fill: -fx-light-text-color;
- -fx-fill: -fx-light-text-color;
-}
-
-.glyph-icon:hover {
- -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
-}
-
-/* Fix derived prompt color for text fields */
-.text-input {
- -fx-prompt-text-fill: derive( -fx-control-inner-background, +50% );
-}
-
-/* Keep prompt invisible when focused ( above color fix overrides it ) */
-.text-input:focused {
- -fx-prompt-text-fill: transparent;
-}
-
-/* Fix scroll bar buttons arrows colors */
-.scroll-bar > .increment-button > .increment-arrow,
-.scroll-bar > .decrement-button > .decrement-arrow {
- -fx-background-color: -fx-mark-highlight-color, -fx-light-text-color;
-}
-
-.scroll-bar > .increment-button:hover > .increment-arrow,
-.scroll-bar > .decrement-button:hover > .decrement-arrow {
- -fx-background-color: -fx-mark-highlight-color, rgb( 240, 240, 240 );
-}
-
-.scroll-bar > .increment-button:pressed > .increment-arrow,
-.scroll-bar > .decrement-button:pressed > .decrement-arrow {
- -fx-background-color: -fx-mark-highlight-color, rgb( 255, 255, 255 );
-}
src/main/resources/com/keenwrite/themes/haunted_grey.css
-/* https://stackoverflow.com/a/58441758/59087
- */
-.root {
- -fx-accent: #1e74c6;
- -fx-focus-color: -fx-accent;
- -fx-base: #373e43;
- -fx-control-inner-background: derive( -fx-base, 35% );
- -fx-control-inner-background-alt: -fx-control-inner-background;
-
- -fx-light-text-color: derive( -fx-base, 150% );
- -fx-mid-text-color: derive( -fx-base, 100% );
- -fx-dark-text-color: derive( -fx-base, 25% );
- -fx-text-foreground: -fx-light-text-color;
- -fx-text-background: derive( -fx-control-inner-background, 7.5% );
- -fx-text-selection: derive( -fx-control-inner-background, 45% );
-}
-
-.glyph-icon {
- -fx-text-fill: -fx-light-text-color;
- -fx-fill: -fx-light-text-color;
-}
-
-.glyph-icon:hover {
- -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
-}
-
-.label {
- -fx-text-fill: -fx-light-text-color;
-}
-
-.text-field {
- -fx-prompt-text-fill: gray;
-}
-
-.button {
- -fx-focus-traversable: false;
-}
-
-.button:hover {
- -fx-text-fill: white;
-}
-
-.separator *.line {
- -fx-background-color: #3C3C3C;
- -fx-border-style: solid;
- -fx-border-width: 1px;
-}
-
-.scroll-bar {
- -fx-background-color: derive( -fx-base, 45% );
-}
-
-.button:default {
- -fx-base: -fx-accent;
-}
-
-.table-view {
- -fx-selection-bar-non-focused: derive( -fx-base, 50% );
-}
-
-.table-view .column-header .label {
- -fx-alignment: CENTER_LEFT;
- -fx-font-weight: none;
-}
-
-.list-cell:even,
-.list-cell:odd,
-.table-row-cell:even,
-.table-row-cell:odd {
- -fx-control-inner-background: derive( -fx-base, 15% );
-}
-
-.list-cell:empty,
-.table-row-cell:empty {
- -fx-background-color: transparent;
-}
-
-.list-cell,
-.table-row-cell {
- -fx-border-color: transparent;
- -fx-table-cell-border-color: transparent;
-}
-
-/* Avoid clipping text descenders in statistics table row. */
-.table-row-cell {
- -fx-cell-size: 30px;
-}
src/main/resources/com/keenwrite/themes/modena_dark.css
-/* https://github.com/joffrey-bion/javafx-themes/blob/master/css/modena_dark.css
- */
-.root {
- -fx-base: rgb( 50, 50, 50 );
- -fx-background: -fx-base;
-
- /* Make controls ( buttons, thumb, etc. ) slightly lighter */
- -fx-color: derive( -fx-base, 10% );
-
- /* Text fields and table rows background */
- -fx-control-inner-background: rgb( 20, 20, 20 );
- /* Version of -fx-control-inner-background for alternative rows */
- -fx-control-inner-background-alt: derive( -fx-control-inner-background, 2.5% );
-
- /* Text colors depending on background's brightness */
- -fx-light-text-color: rgb( 220, 220, 220 );
- -fx-mid-text-color: rgb( 100, 100, 100 );
- -fx-dark-text-color: rgb( 20, 20, 20 );
- -fx-text-foreground: -fx-light-text-color;
- -fx-text-background: derive( -fx-control-inner-background, 7.5% );
- -fx-text-selection: derive( -fx-control-inner-background, 45% );
-
- /* A bright blue for highlighting/accenting objects. For example: selected
- * text; selected items in menus, lists, trees, and tables; progress bars */
- -fx-accent: rgb( 0, 80, 100 );
-
- /* Color of non-focused yet selected elements */
- -fx-selection-bar-non-focused: rgb( 50, 50, 50 );
-}
-
-.glyph-icon {
- -fx-text-fill: -fx-light-text-color;
- -fx-fill: -fx-light-text-color;
-}
-
-.glyph-icon:hover {
- -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
-}
-
-/* Fix derived prompt color for text fields */
-.text-input {
- -fx-prompt-text-fill: derive( -fx-control-inner-background, +50% );
-}
-
-/* Keep prompt invisible when focused ( above color fix overrides it ) */
-.text-input:focused {
- -fx-prompt-text-fill: transparent;
-}
-
-/* Fix scroll bar buttons arrows colors */
-.scroll-bar > .increment-button > .increment-arrow,
-.scroll-bar > .decrement-button > .decrement-arrow {
- -fx-background-color: -fx-mark-highlight-color, rgb( 220, 220, 220 );
-}
-
-.scroll-bar > .increment-button:hover > .increment-arrow,
-.scroll-bar > .decrement-button:hover > .decrement-arrow {
- -fx-background-color: -fx-mark-highlight-color, rgb( 240, 240, 240 );
-}
-
-.scroll-bar > .increment-button:pressed > .increment-arrow,
-.scroll-bar > .decrement-button:pressed > .decrement-arrow {
- -fx-background-color: -fx-mark-highlight-color, rgb( 255, 255, 255 );
-}
src/main/resources/com/keenwrite/themes/modena_light.css
-.root {
- -fx-text-foreground: -fx-dark-text-color;
- -fx-text-background: derive( -fx-accent, 124% );
- -fx-text-selection: #a6d2ff;
-}
src/main/resources/com/keenwrite/themes/scene.css
-/*
- * Copyright (c) 2015 Karl Tauber <karl at jformdesigner dot com>
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * o Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *
- * o Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.tool-bar {
- -fx-spacing: 0;
-}
-
-.tool-bar .button {
- -fx-background-color: transparent;
-}
-
-.tool-bar .button:hover {
- -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
- -fx-color: -fx-hover-base;
-}
-
-.tool-bar .button:armed {
- -fx-color: -fx-pressed-base;
-}
-
-/* Definition editor drag and drop target.
- */
-.drop-target {
- -fx-border-color: #eea82f;
- -fx-border-width: 0 0 2 0;
- -fx-padding: 3 3 1 3
-}
src/main/resources/com/keenwrite/themes/silver_cavern.css
-/* https://toedter.com/2011/10/26/java-fx-2-0-css-styling/
- */
-.root {
- -fx-base: rgb( 50, 50, 50 );
- -fx-background: -fx-base;
- -fx-control-inner-background: -fx-base;
-
- -fx-light-text-color: derive( -fx-base, 150% );
- -fx-mid-text-color: derive( -fx-base, 100% );
- -fx-dark-text-color: derive( -fx-base, 25% );
- -fx-text-foreground: -fx-light-text-color;
- -fx-text-background: derive( -fx-control-inner-background, 7.5% );
- -fx-text-selection: derive( -fx-control-inner-background, 45% );
-}
-
-.glyph-icon {
- -fx-text-fill: -fx-light-text-color;
- -fx-fill: -fx-light-text-color;
-}
-
-.glyph-icon:hover {
- -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
-}
-
-.tab {
- -fx-background-color: linear-gradient( to top, -fx-base, derive( -fx-base, 30% ) );
-}
-
-.menu-bar {
- -fx-background-color: linear-gradient( to bottom, -fx-base, derive( -fx-base, 30% ) );
-}
-
-.tool-bar:horizontal {
- -fx-background-color: linear-gradient( to bottom, derive( -fx-base, +50% ), derive( -fx-base, -40% ), derive( -fx-base, -20% ) );
-}
-
-.button {
- -fx-background-color: transparent;
-}
-
-.button:hover {
- -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
- -fx-color: -fx-hover-base;
-}
-
-.table-view {
- -fx-table-cell-border-color:derive( -fx-base, +10% );
- -fx-table-header-border-color:derive( -fx-base, +20% );
-}
-
-.split-pane:horizontal > * > .split-pane-divider {
- -fx-border-color: transparent -fx-base transparent -fx-base;
- -fx-background-color: transparent, derive( -fx-base, 20% );
- -fx-background-insets: 0, 0 1 0 1;
-}
-
-.separator-label {
- -fx-text-fill: orange;
-}
src/main/resources/com/keenwrite/themes/solarized_dark.css
-/* https://ethanschoonover.com/solarized
- */
-.root {
- /* Solarized: base03 */
- -fx-base: rgb( 0, 43, 54 );
- -fx-background: -fx-base;
-
- /* Brighten controls */
- -fx-color: derive( -fx-base, -40% );
-
- -fx-control-inner-background: -fx-base;
- -fx-control-inner-background-alt: derive( -fx-control-inner-background, 2.5% );
-
- /* Text colors */
- /* Solarized: base0 */
- -fx-light-text-color: rgb( 131, 148, 150 );
- -fx-mid-text-color: derive( -fx-light-text-color, 50% );
- -fx-dark-text-color: derive( -fx-light-text-color, 25% );
- -fx-text-foreground: -fx-light-text-color;
- -fx-text-background: derive( -fx-control-inner-background, 7.5% );
- -fx-text-selection: derive( -fx-control-inner-background, 45% );
-
- -fx-mid-text-color: derive( -fx-base, 100% );
- -fx-dark-text-color: derive( -fx-base, 25% );
- -fx-text-foreground: -fx-light-text-color;
- -fx-text-background: derive( -fx-control-inner-background, 7.5% );
- -fx-text-selection: derive( -fx-control-inner-background, 45% );
-
- /* Accent colors */
- -fx-accent: rgb( 38, 139, 210 );
- -fx-focus-color: rgb( 253, 246, 227 );
-
- /* Non-focused-selected elements */
- -fx-selection-bar-non-focused: rgb( 0, 43, 54 );
-}
-
-.glyph-icon {
- -fx-text-fill: -fx-light-text-color;
- -fx-fill: -fx-light-text-color;
-}
-
-.glyph-icon:hover {
- -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
-}
-
-.scroll-bar {
- -fx-background-color: derive( -fx-base, 45% );
-}
-
-.caret {
- -fx-stroke: -fx-accent;
-}
-
src/main/resources/com/keenwrite/themes/vampire_byte.css
-/* https://github.com/Col-E/Recaf/blob/master/src/main/resources/style/ui-dark.css
- */
-.root {
- -fx-base: rgb( 45, 45, 46 );
- -fx-background: -fx-base;
-
- /* Brighten controls */
- -fx-color: derive( -fx-base, -40% );
-
- /* Control background */
- -fx-control-inner-background: rgb( 46, 46, 47 );
-
- /* Alternative control background ( rows ) */
- -fx-control-inner-background-alt: derive( -fx-control-inner-background, 2.5% );
-
- /* Text colors */
- -fx-light-text-color: rgb( 220, 220, 220 );
- -fx-mid-text-color: rgb( 100, 100, 100 );
- -fx-dark-text-color: rgb( 20, 20, 20 );
- -fx-text-foreground: -fx-light-text-color;
- -fx-text-background: derive( -fx-control-inner-background, 7.5% );
- -fx-text-selection: derive( -fx-control-inner-background, 45% );
-
- /* Accent colors */
- -fx-accent: rgb( 51, 51, 52 );
- -fx-focus-color: rgb( 51, 51, 52 );
-
- /* Non-focused-selected elements */
- -fx-selection-bar-non-focused: rgb( 45, 45, 46 );
-}
-
-.glyph-icon {
- -fx-text-fill: -fx-light-text-color;
- -fx-fill: -fx-light-text-color;
-}
-
-.glyph-icon:hover {
- -fx-effect: dropshadow( three-pass-box, rgba( 0, 0, 0, 0.2 ), 4, 0, 0, 0 );
-}
-
-* {
- -fx-highlight-fill: rgba( 0, 180, 255, 0.4 );
-}
-
-/* Scroll */
-.scroll-bar {
- -fx-background-color: rgb( 61,61,62 );
-}
-.scroll-bar .thumb {
- -fx-background-color: rgb( 91,91,92 );
- -fx-background-radius: 0;
-}
-.scroll-bar .thumb:hover,
-.scroll-bar .thumb:pressed {
- -fx-background-color: rgb( 141,141,142 );
-}
-.scroll-bar .increment-button .increment-arrow,
-.scroll-bar .decrement-button .decrement-arrow {
- -fx-background-color: rgb( 200,200,200 );
-}
-.corner {
- -fx-background-color: rgb( 61,61,62 );
-}
-
-/* Menu */
-.menu-bar {
- -fx-background-color: rgb( 45, 45, 48 );
-}
-.menu {
- -fx-padding: 6 14 6 14;
- -fx-background-insets: -1;
-}
-.menu-item {
- -fx-padding: 5 11 5 11;
- -fx-background-insets: -1;
-}
-.menu:hover {
- -fx-background-color: rgb( 61, 61, 62 );
-}
-.context-menu,
-.menu:showing {
- -fx-background-color: rgb( 27, 27, 28 );
- -fx-border-insets: -1;
- -fx-border-width: 1;
- -fx-border-color: black;
-}
-.context-menu {
- -fx-min-width: 80px;
- -fx-background-insets: -1;
- -fx-border-insets: -1;
- -fx-border-width: 1;
- -fx-border-color: black;
-}
-.context-menu .menu-item:focused {
- -fx-background-color: rgb( 61, 61, 62 );
-}
-.context-menu-header {
- /* TODO: Find a way to disable hover coloring on the menu header */
- -fx-opacity: 1.0;
- -fx-background-color: rgb( 24, 50, 95 );
-}
-.context-menu-header .label {
- -fx-opacity: 1.0;
-}
-
-/* Tabs */
-.tab-pane {
- -fx-tab-min-width: 100px;
-}
-.tab-pane *.tab-header-background {
- -fx-background-color: rgb( 29, 29, 31 );
- -fx-border-width: 0 0 1 0;
- -fx-border-color: black;
-}
-.headers-region {
- -fx-background-color: rgb( 75, 75, 76 );
-}
-.tab {
- -fx-background-color: rgb( 36,36,37 );
- -fx-background-insets: 2 -1 -1 -1;
- -fx-background-radius: 0;
- -fx-padding: 2 2 1 2;
- -fx-border-insets: 0;
- -fx-border-width: 1 1 1 1;
- -fx-border-color: black;
-}
-.tab:selected {
- -fx-background-color: rgb( 45, 45, 46 );
- -fx-background-insets: 2 -1 -1 -1;
- -fx-padding: 2;
- -fx-border-insets: 0;
- -fx-border-width: 1 1 0 1;
- -fx-border-color: black;
-}
-.tab:selected .focus-indicator {
- -fx-border-color: transparent;
-}
-
-/* Table */
-.table-view {
- -fx-selection-bar: rgb( 50, 71, 77 );
- -fx-selection-bar-non-focused: rgb( 46, 56, 59 );
- -fx-background-color: rgb( 36,36,37 );
- -fx-background-insets: 2 -1 -1 -1;
- -fx-background-radius: 0;
- -fx-padding: -1;
- -fx-border-width: 0 1 1 1;
- -fx-border-color: rgb( 22, 22, 23 );
-}
-.table-view .filler,
-.table-view .show-hide-columns-button,
-.column-overlay {
- -fx-background-color: transparent;
-}
-.column-header-background {
- -fx-background-color: rgb( 36,36,37 );
- -fx-background-insets: 2 -1 -1 -1;
- -fx-padding: -1;
- -fx-border-insets: 0;
- -fx-border-width: 0 1 0 1;
- -fx-border-color: rgb( 22, 22, 23 );
-}
-.column-header {
- -fx-background-color: rgb( 45, 45, 46 );
- -fx-background-insets: -1 -0 -1 0;
- -fx-padding: 2;
- -fx-border-insets: 1 -1 1 0;
- -fx-border-width: 1;
- -fx-border-color: rgb( 22, 22, 23 );
-}
-
-/* Splitpane */
-.split-pane-divider {
- -fx-background-color: black;
- -fx-padding: 0;
- -fx-background-insets: -5;
-}
-
-/* Tree */
-.tree-table-view,
-.tree-view {
- -fx-background-color: rgb( 29, 29, 31 );
- -fx-background-insets: 0;
- -fx-border-width: 0 1 0 0;
- -fx-border-color: black;
-}
-.tree-table-cell,
-.tree-cell {
- -fx-background-color: rgb( 29, 29, 31 );
-}
-.tree-cell:selected {
- -fx-background-color: rgb( 44, 48, 55 );
-}
-
-/* Buttons */
-.box,
-.button,
-.combo-box,
-.slider .thumb {
- -fx-background-radius: 0;
- -fx-background-color: rgb( 63, 63, 70 );
- -fx-background-insets: 0;
- -fx-border-width: 1;
- -fx-border-color: rgb( 85, 85, 85 );
-}
-.check-box:hover .box,
-.button:hover,
-.combo-box:hover,
-.slider .thumb:hover {
- -fx-background-color: rgb( 80, 80, 85 );
- -fx-border-color: rgb( 0, 122, 205 );
-}
-.check-box:pressed .box,
-.button:pressed,
-.combo-box:pressed,
-.slider .thumb:pressed {
- -fx-background-color: rgb( 0, 122, 205 );
- -fx-border-color: rgb( 0, 162, 245 );
-}
-.combo-box:showing {
- -fx-background-color: rgb( 27, 27, 28 );
- -fx-border-width: 1 1 0 1;
- -fx-border-color: black;
-}
-.combo-box .combo-box-popup .list-cell {
- -fx-background-color: rgb( 27, 27, 28 );
-}
-.combo-box .combo-box-popup .list-cell:hover {
- -fx-background-color: rgb( 61, 61, 62 );
-}
-.combo-box .combo-box-popup .list-view {
- -fx-background-color: rgb( 27, 27, 28 );
- -fx-border-width: 0 1 1 1;
- -fx-border-color: black;
-}
-.hyperlink {
- -fx-text-fill: rgb( 30, 132, 250 );
-}
-hyperlink:visited {
- -fx-text-fill: rgb( 98, 59, 217 );
-}
-
-/* slider */
-.slider .track {
- -fx-background-radius: 0;
- -fx-background-color: rgb( 29, 29, 31 );
- -fx-background-insets: 0;
- -fx-border-width: 1;
- -fx-border-color: rgb( 65, 65, 65 );
-}
-.slider .thumb {
- -fx-padding: 5;
-}
-.axis-tick-mark {
- -fx-stroke: rgb( 100, 100, 100 );
-}
-
-/* Text */
-.text-area .content,
-.text-field {
- -fx-background-radius: 0;
- -fx-background-color: rgb( 63, 63, 70 );
- -fx-background-insets: 0;
- -fx-border-width: 1;
- -fx-border-color: rgb( 85, 85, 85 );
-}
-.text-area {
- -fx-background-radius: 0;
- -fx-background-color: rgb( 63, 63, 70 );
- -fx-background-insets: 0;
- -fx-border-width: 1;
- -fx-border-color: rgb( 85, 85, 85 );
-}
-.text-area .content {
- -fx-border-width: 0;
-}
-
-/* Popup */
-.tooltip {
- -fx-background-radius: 0;
- -fx-background-color: rgb( 40, 40, 42 );
- -fx-background-insets: 0;
- -fx-border-width: 1;
- -fx-border-color: rgb( 70, 70, 72 );
-}

Rename theme to skin

Author DaveJarvis <email>
Date 2021-03-31 22:43:47 GMT-0700
Commit 1a14cfd934ca404495aab98c251f979cd4fae6ca
Parent 3b90293
Delta 876 lines added, 876 lines removed