commit dbcd6816dabe2736911939d4ddb3b08b3db9d0f0 parent 921c055c7da45a870242cc0394567220b95688f4 Author: A Koens <[email protected]> Date: Thu, 13 Oct 2022 11:06:08 +0200 Typography and new theme Diffstat:
13 files changed, 651 insertions(+), 346 deletions(-)
diff --git a/pom.xml b/pom.xml @@ -37,11 +37,27 @@ <artifactId>jfoenix</artifactId> <version>9.0.10</version> </dependency> - <!-- https://mvnrepository.com/artifact/de.jensd/fontawesomefx --> + + <!-- https://mvnrepository.com/artifact/de.jensd/fontawesomefx-commons --> + <dependency> + <groupId>de.jensd</groupId> + <artifactId>fontawesomefx-commons</artifactId> + <version>9.1.2</version> + </dependency> + + <!-- https://mvnrepository.com/artifact/de.jensd/fontawesomefx-materialicons --> + <dependency> + <groupId>de.jensd</groupId> + <artifactId>fontawesomefx-materialicons</artifactId> + <version>2.2.0-9.1.2</version> + </dependency> + + + <!-- https://mvnrepository.com/artifact/de.jensd/fontawesomefx-fontawesome --> <dependency> <groupId>de.jensd</groupId> - <artifactId>fontawesomefx</artifactId> - <version>8.9</version> + <artifactId>fontawesomefx-fontawesome</artifactId> + <version>4.7.0-9.1.2</version> </dependency> <!-- Junit Dependencies --> diff --git a/src/main/java/module-info.java b/src/main/java/module-info.java @@ -1,15 +1,16 @@ module nl.isygameclient { - requires javafx.controls; requires javafx.fxml; - + requires javafx.controls; requires org.controlsfx.controls; - requires org.kordamp.bootstrapfx.core; + requires de.jensd.fx.glyphs.fontawesome; + requires de.jensd.fx.glyphs.materialicons; + requires de.jensd.fx.glyphs.commons; + requires com.jfoenix; requires static lombok; exports nl.isygameclient; exports nl.isygameclient.controllers; - opens nl.isygameclient to javafx.fxml; opens nl.isygameclient.controllers to javafx.fxml; } \ No newline at end of file diff --git a/src/main/resources/nl/isygameclient/css/colors.module.css b/src/main/resources/nl/isygameclient/css/colors.module.css @@ -1,162 +0,0 @@ -.on-error-container { - -fx-background-color: -md-color-on-error-container; -} -.on-error-container-text { - -fx-text-fill: -md-neutral100; -} -.on-error { - -fx-background-color: -md-color-on-error; -} -.on-error-text { - -fx-text-fill: -md-neutral100; -} -.error-container { - -fx-background-color: -md-color-error-container; -} -.error-container-text { - -fx-text-fill: -md-neutral100; -} -.on-tertiary-container { - -fx-background-color: -md-color-on-tertiary-container; -} -.on-tertiary-container-text { - -fx-text-fill: -md-neutral100; -} -.on-tertiary { - -fx-background-color: -md-color-on-tertiary; -} -.on-tertiary-text { - -fx-text-fill: -md-neutral100; -} -.tertiary-container { - -fx-background-color: -md-color-tertiary-container; -} -.tertiary-container-text { - -fx-text-fill: -md-neutral100; -} -.tertiary { - -fx-background-color: -md-color-tertiary; -} -.tertiary-text { - -fx-text-fill: -md-neutral100; -} -.shadow { - -fx-background-color: -md-color-shadow; -} -.shadow-text { - -fx-text-fill: -md-neutral100; -} -.error { - -fx-background-color: -md-color-error; -} -.error-text { - -fx-text-fill: -md-neutral100; -} -.outline { - -fx-background-color: -md-color-outline; -} -.outline-text { - -fx-text-fill: -md-neutral100; -} -.on-background { - -fx-background-color: -md-color-on-background; -} -.on-background-text { - -fx-text-fill: -md-neutral100; -} -.background { - -fx-background-color: -md-color-background; -} -.background-text { - -fx-text-fill: -md-neutral100; -} -.inverse-on-surface { - -fx-background-color: -md-color-inverse-on-surface; -} -.inverse-on-surface-text { - -fx-text-fill: -md-neutral100; -} -.inverse-surface { - -fx-background-color: -md-color-inverse-surface; -} -.inverse-surface-text { - -fx-text-fill: -md-neutral100; -} -.on-surface-variant { - -fx-background-color: -md-color-on-surface-variant; -} -.on-surface-variant-text { - -fx-text-fill: -md-neutral100; -} -.on-surface { - -fx-background-color: -md-color-on-surface; -} -.on-surface-text { - -fx-text-fill: -md-neutral100; -} -.surface-variant { - -fx-background-color: -md-color-surface-variant; -} -.surface-variant-text { - -fx-text-fill: -md-neutral100; -} -.surface { - -fx-background-color: -md-color-surface; -} -.surface-text { - -fx-text-fill: -md-neutral100; -} -.on-secondary-container { - -fx-background-color: -md-color-on-secondary-container; -} -.on-secondary-container-text { - -fx-text-fill: -md-neutral100; -} -.on-secondary { - -fx-background-color: -md-color-on-secondary; -} -.on-secondary-text { - -fx-text-fill: -md-neutral100; -} -.secondary-container { - -fx-background-color: -md-color-secondary-container; -} -.secondary-container-text { - -fx-text-fill: -md-neutral100; -} -.secondary { - -fx-background-color: -md-color-secondary; -} -.secondary-text { - -fx-text-fill: -md-neutral100; -} -.inverse-primary { - -fx-background-color: -md-color-inverse-primary; -} -.inverse-primary-text { - -fx-text-fill: -md-neutral100; -} -.on-primary-container { - -fx-background-color: -md-color-on-primary-container; -} -.on-primary-container-text { - -fx-text-fill: -md-neutral100; -} -.on-primary { - -fx-background-color: -md-color-on-primary; -} -.on-primary-text { - -fx-text-fill: -md-neutral100; -} -.primary-container { - -fx-background-color: -md-color-primary-container; -} -.primary-container-text { - -fx-text-fill: -md-neutral100; -} -.primary { - -fx-background-color: -md-color-primary; -} -.primary-text { - -fx-text-fill: -md-neutral100; -} diff --git a/src/main/resources/nl/isygameclient/css/modules/colors.module.css b/src/main/resources/nl/isygameclient/css/modules/colors.module.css @@ -0,0 +1,190 @@ +/* Primary */ +.inverse-primary { + -fx-background-color: -md-sys-color-inverse-primary; +} +.inverse-primary-text { + -fx-fill: -md-sys-color-inverse-primary; +} +.on-primary-container { + -fx-background-color: -md-sys-color-on-primary-container; +} +.on-primary-container-text { + -fx-fill: -md-sys-color-on-primary-container; +} +.on-primary { + -fx-background-color: -md-sys-color-on-primary; +} +.on-primary-text { + -fx-fill: -md-sys-color-on-primary; +} +.primary-container { + -fx-background-color: -md-sys-color-primary-container; +} +.primary-container-text { + -fx-fill: -md-sys-color-primary-container; +} +.primary { + -fx-background-color: -md-sys-color-primary; +} +.primary-text { + -fx-fill: -md-sys-color-primary; +} + +/* Secondary */ +.on-secondary-container { + -fx-background-color: -md-sys-color-on-secondary-container; +} +.on-secondary-container-text { + -fx-fill: -md-sys-color-on-secondary-container; +} +.on-secondary { + -fx-background-color: -md-sys-color-on-secondary; +} +.on-secondary-text { + -fx-fill: -md-sys-color-on-secondary; +} +.secondary-container { + -fx-background-color: -md-sys-color-secondary-container; +} +.secondary-container-text { + -fx-fill: -md-sys-color-secondary-container; +} +.secondary { + -fx-background-color: -md-sys-color-secondary; +} +.secondary-text { + -fx-fill: -md-sys-color-secondary; +} + +/* Tertiary */ +.on-tertiary-container { + -fx-background-color: -md-sys-color-on-tertiary-container; +} +.on-tertiary-container-text { + -fx-fill: -md-sys-color-on-tertiary-container; +} +.on-tertiary { + -fx-background-color: -md-sys-color-on-tertiary; +} +.on-tertiary-text { + -fx-fill: -md-sys-color-on-tertiary; +} +.tertiary-container { + -fx-background-color: -md-sys-color-tertiary-container; +} +.tertiary-container-text { + -fx-fill: -md-sys-color-tertiary-container; +} +.tertiary { + -fx-background-color: -md-sys-color-tertiary; +} +.tertiary-text { + -fx-fill: -md-sys-color-tertiary; +} + +/* Error */ +.on-error-container { + -fx-background-color: -md-sys-color-on-error-container; +} +.on-error-container-text { + -fx-fill: -md-sys-color-on-error-container; +} +.on-error { + -fx-background-color: -md-sys-color-on-error; +} +.on-error-text { + -fx-fill: -md-sys-color-on-error; +} +.error-container { + -fx-background-color: -md-sys-color-error-container; +} +.error-container-text { + -fx-fill: -md-sys-color-error-container; +} +.error { + -fx-background-color: -md-sys-color-error; +} +.error-text { + -fx-fill: -md-sys-color-error; +} + +/* Surface */ +.inverse-on-surface { + -fx-background-color: -md-sys-color-inverse-on-surface; +} +.inverse-on-surface-text { + -fx-fill: -md-sys-color-inverse-on-surface; +} +.inverse-surface { + -fx-background-color: -md-sys-color-inverse-surface; +} +.inverse-surface-text { + -fx-fill: -md-sys-color-inverse-surface; +} +.on-surface-variant { + -fx-background-color: -md-sys-color-on-surface-variant; +} +.on-surface-variant-text { + -fx-fill: -md-sys-color-on-surface-variant; +} +.on-surface { + -fx-background-color: -md-sys-color-on-surface; +} +.on-surface-text { + -fx-fill: -md-sys-color-on-surface; +} +.surface-variant { + -fx-background-color: -md-sys-color-surface-variant; +} +.surface-variant-text { + -fx-fill: -md-sys-color-surface-variant; +} +.surface { + -fx-background-color: -md-sys-color-surface; +} +.surface-text { + -fx-fill: -md-sys-color-surface; +} +.surface-tint { + -fx-background-color: -md-sys-color-surface-tint; +} +.surface-tint-text { + -fx-fill: -md-sys-color-surface-tint; +} +.surface-tint-color { + -fx-background-color: -md-sys-color-surface-tint-color; +} +.surface-tint-color-text { + -fx-fill: -md-sys-color-surface-tint-color; +} + +/* Background */ +.on-background { + -fx-background-color: -md-sys-color-on-background; +} +.on-background-text { + -fx-fill: -md-sys-color-on-background; +} +.background { + -fx-background-color: -md-sys-color-background; +} +.background-text { + -fx-fill: -md-sys-color-background; +} + +/* Shadow */ +.outline { + -fx-background-color: -md-sys-color-outline; +} +.outline-text { + -fx-fill: -md-sys-color-outline; +} +.shadow { + -fx-background-color: -md-sys-color-shadow; +} +.shadow-text { + -fx-fill: -md-sys-color-shadow; +} + + + diff --git a/src/main/resources/nl/isygameclient/css/icons.module.css b/src/main/resources/nl/isygameclient/css/modules/icons.module.css diff --git a/src/main/resources/nl/isygameclient/css/modules/typography.module.css b/src/main/resources/nl/isygameclient/css/modules/typography.module.css @@ -0,0 +1,109 @@ +/* Lable */ +.lable-small { + -fx-font-family: sans-serif; + -fx-font-size: 11; + -fx-font-style: normal; + -fx-font-weight: 500; +} + +.lable-medium { + -fx-font-family: sans-serif; + -fx-font-size: 13; + -fx-font-style: normal; + -fx-font-weight: 500; +} + +.lable-large { + -fx-font-family: sans-serif; + -fx-font-size: 14; + -fx-font-style: normal; + -fx-font-weight: 500; +} + +/* Body */ +.body-small { + -fx-font-family: sans-serif; + -fx-font-size: 12; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +.body-medium { + -fx-font-family: sans-serif; + -fx-font-size: 14; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +.body-large { + -fx-font-family: sans-serif; + -fx-font-size: 16; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +/* Headline */ +.headline-small { + -fx-font-family: sans-serif; + -fx-font-size: 24; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +.headline-medium { + -fx-font-family: sans-serif; + -fx-font-size: 28; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +.headline-large { + -fx-font-family: sans-serif; + -fx-font-size: 32; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +/* Display */ +.display-small { + -fx-font-family: sans-serif; + -fx-font-size: 36; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +.display-medium { + -fx-font-family: sans-serif; + -fx-font-size: 45; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +.display-large { + -fx-font-family: sans-serif; + -fx-font-size: 57; + -fx-font-style: normal; + -fx-font-weight: 400; +} + +/* Title */ +.title-small { + -fx-font-family: sans-serif; + -fx-font-size: 14; + -fx-font-style: normal; + -fx-font-weight: 500; +} + +.title-medium { + -fx-font-family: sans-serif; + -fx-font-size: 16; + -fx-font-style: normal; + -fx-font-weight: 500; +} + +.title-large { + -fx-font-family: sans-serif; + -fx-font-size: 22; + -fx-font-style: normal; + -fx-font-weight: 400; +} +\ No newline at end of file diff --git a/src/main/resources/nl/isygameclient/css/tokens.css b/src/main/resources/nl/isygameclient/css/old_tokens.css diff --git a/src/main/resources/nl/isygameclient/css/style.css b/src/main/resources/nl/isygameclient/css/style.css @@ -1,41 +1,18 @@ -.button { - -height: 20; - -width: 20; - -fill: -md-primary400; - - -fx-padding: 5; - -fx-min-height: -height; - -fx-min-width: -width; - -fx-max-height: -height; - -fx-max-width: -width; -} .search-bar { -fx-padding: 0 0 0 25; - -fx-text-fill: -md-color-text; - -fx-border-color: -md-color-on-surface; + -fx-text-fill: -md-sys-color-on-surface; + -fx-border-color: -md-sys-color-inverse-surface; -fx-border-width: 2; -fx-border-radius: 10 10 10 10; } +.searchIcon { + -fx-padding: 0 0 0 20; +} .transparent { -fx-background-color: transparent; } -.button:hover { - -fill: -md-primary300; -} - -.button:armed { - -fill: -md-primary500; -} -.exit-button { - -height: 16; - -width: 16; - -fill: -md-color-on-surface; -} -.exit-button:hover { - -fill: -md-color-on-error; -} diff --git a/src/main/resources/nl/isygameclient/css/theme.css b/src/main/resources/nl/isygameclient/css/theme.css @@ -1,4 +1,9 @@ @import url(tokens.css); -@import url(colors.module.css); -@import url(icons.module.css); -@import url(style.css); + +/* Modules */ +@import url(./modules/colors.module.css); +@import url(./modules/icons.module.css); +@import url(./modules/typography.module.css); + +@import url(theme.dark.css); +@import url(style.css); +\ No newline at end of file diff --git a/src/main/resources/nl/isygameclient/css/theme.dark.css b/src/main/resources/nl/isygameclient/css/theme.dark.css @@ -0,0 +1,31 @@ +* { + -md-sys-color-surface-tint: -md-sys-color-surface-tint-dark; + -md-sys-color-surface-tint-color: -md-sys-color-surface-tint-color-dark; + -md-sys-color-on-error-container: -md-sys-color-on-error-container-dark; + -md-sys-color-on-error: -md-sys-color-on-error-dark; + -md-sys-color-error-container: -md-sys-color-error-container-dark; + -md-sys-color-on-tertiary-container: -md-sys-color-on-tertiary-container-dark; + -md-sys-color-on-tertiary: -md-sys-color-on-tertiary-dark; + -md-sys-color-tertiary-container: -md-sys-color-tertiary-container-dark; + -md-sys-color-tertiary: -md-sys-color-tertiary-dark; + -md-sys-color-shadow: -md-sys-color-shadow-dark; + -md-sys-color-error: -md-sys-color-error-dark; + -md-sys-color-outline: -md-sys-color-outline-dark; + -md-sys-color-on-background: -md-sys-color-on-background-dark; + -md-sys-color-background: -md-sys-color-background-dark; + -md-sys-color-inverse-on-surface: -md-sys-color-inverse-on-surface-dark; + -md-sys-color-inverse-surface: -md-sys-color-inverse-surface-dark; + -md-sys-color-on-surface-variant: -md-sys-color-on-surface-variant-dark; + -md-sys-color-on-surface: -md-sys-color-on-surface-dark; + -md-sys-color-surface-variant: -md-sys-color-surface-variant-dark; + -md-sys-color-surface: -md-sys-color-surface-dark; + -md-sys-color-on-secondary-container: -md-sys-color-on-secondary-container-dark; + -md-sys-color-on-secondary: -md-sys-color-on-secondary-dark; + -md-sys-color-secondary-container: -md-sys-color-secondary-container-dark; + -md-sys-color-secondary: -md-sys-color-secondary-dark; + -md-sys-color-inverse-primary: -md-sys-color-inverse-primary-dark; + -md-sys-color-on-primary-container: -md-sys-color-on-primary-container-dark; + -md-sys-color-on-primary: -md-sys-color-on-primary-dark; + -md-sys-color-primary-container: -md-sys-color-primary-container-dark; + -md-sys-color-primary: -md-sys-color-primary-dark; +} diff --git a/src/main/resources/nl/isygameclient/css/theme.light.css b/src/main/resources/nl/isygameclient/css/theme.light.css @@ -0,0 +1,31 @@ +* { + -md-sys-color-surface-tint: -md-sys-color-surface-tint-light; + -md-sys-color-surface-tint-color: -md-sys-color-surface-tint-color-light; + -md-sys-color-on-error-container: -md-sys-color-on-error-container-light; + -md-sys-color-on-error: -md-sys-color-on-error-light; + -md-sys-color-error-container: -md-sys-color-error-container-light; + -md-sys-color-on-tertiary-container: -md-sys-color-on-tertiary-container-light; + -md-sys-color-on-tertiary: -md-sys-color-on-tertiary-light; + -md-sys-color-tertiary-container: -md-sys-color-tertiary-container-light; + -md-sys-color-tertiary: -md-sys-color-tertiary-light; + -md-sys-color-shadow: -md-sys-color-shadow-light; + -md-sys-color-error: -md-sys-color-error-light; + -md-sys-color-outline: -md-sys-color-outline-light; + -md-sys-color-on-background: -md-sys-color-on-background-light; + -md-sys-color-background: -md-sys-color-background-light; + -md-sys-color-inverse-on-surface: -md-sys-color-inverse-on-surface-light; + -md-sys-color-inverse-surface: -md-sys-color-inverse-surface-light; + -md-sys-color-on-surface-variant: -md-sys-color-on-surface-variant-light; + -md-sys-color-on-surface: -md-sys-color-on-surface-light; + -md-sys-color-surface-variant: -md-sys-color-surface-variant-light; + -md-sys-color-surface: -md-sys-color-surface-light; + -md-sys-color-on-secondary-container: -md-sys-color-on-secondary-container-light; + -md-sys-color-on-secondary: -md-sys-color-on-secondary-light; + -md-sys-color-secondary-container: -md-sys-color-secondary-container-light; + -md-sys-color-secondary: -md-sys-color-secondary-light; + -md-sys-color-inverse-primary: -md-sys-color-inverse-primary-light; + -md-sys-color-on-primary-container: -md-sys-color-on-primary-container-light; + -md-sys-color-on-primary: -md-sys-color-on-primary-light; + -md-sys-color-primary-container: -md-sys-color-primary-container-light; + -md-sys-color-primary: -md-sys-color-primary-light; +} diff --git a/src/main/resources/nl/isygameclient/css/tokens.css b/src/main/resources/nl/isygameclient/css/tokens.css @@ -1,122 +1,223 @@ -* { - -md-source: #4caf50; - -md-color-black: #000000; - -md-color-white: #ffffff; +* { + /* Primary */ + -md-ref-palette-primary0: #000000; + -md-ref-palette-primary5: #0a1400; + -md-ref-palette-primary10: #131f00; + -md-ref-palette-primary15: #1b2a00; + -md-ref-palette-primary20: #233600; + -md-ref-palette-primary25: #2c4200; + -md-ref-palette-primary30: #354e00; + -md-ref-palette-primary35: #3e5b00; + -md-ref-palette-primary40: #49680d; + -md-ref-palette-primary50: #618127; + -md-ref-palette-primary60: #7a9c3e; + -md-ref-palette-primary70: #93b756; + -md-ref-palette-primary80: #aed36e; + -md-ref-palette-primary90: #c9f087; + -md-ref-palette-primary95: #d7fe94; + -md-ref-palette-primary98: #f1ffd3; + -md-ref-palette-primary99: #f9ffe6; + -md-ref-palette-primary100: #ffffff; - /* error */ - -md-error50: #ffebee; - -md-error100: #ffcdd2; - -md-error200: #ef9a9a; - -md-error300: #e57373; - -md-error400: #ef5350; - -md-error500: #f44336; - -md-error600: #e53935; - -md-error700: #d32f2f; - -md-error800: #c62828; - -md-error900: #b71c1c; + /* Secondary */ + -md-ref-palette-secondary0: #000000; + -md-ref-palette-secondary5: #0c1303; + -md-ref-palette-secondary10: #171e0a; + -md-ref-palette-secondary15: #212813; + -md-ref-palette-secondary20: #2b331d; + -md-ref-palette-secondary25: #363e27; + -md-ref-palette-secondary30: #414a32; + -md-ref-palette-secondary35: #4d563d; + -md-ref-palette-secondary40: #596248; + -md-ref-palette-secondary50: #727a5f; + -md-ref-palette-secondary60: #8b9478; + -md-ref-palette-secondary70: #a6af91; + -md-ref-palette-secondary80: #c1caab; + -md-ref-palette-secondary90: #dde6c6; + -md-ref-palette-secondary95: #ebf5d4; + -md-ref-palette-secondary98: #f4fddc; + -md-ref-palette-secondary99: #f9ffe6; + -md-ref-palette-secondary100: #ffffff; - /* primary */ - -md-primary50: #e8f5e9; - -md-primary100: #c8e6c9; - -md-primary200: #a5d6a7; - -md-primary300: #81c784; - -md-primary400: #66bb6a; - -md-primary500: #4caf50; - -md-primary600: #43a047; - -md-primary700: #388e3c; - -md-primary800: #2e7d32; - -md-primary900: #1b5e20; + /* Tertiary */ + -md-ref-palette-tertiary0: #000000; + -md-ref-palette-tertiary5: #001412; + -md-ref-palette-tertiary10: #00201d; + -md-ref-palette-tertiary15: #002b28; + -md-ref-palette-tertiary20: #013733; + -md-ref-palette-tertiary25: #11423e; + -md-ref-palette-tertiary30: #1f4e49; + -md-ref-palette-tertiary35: #2c5a55; + -md-ref-palette-tertiary40: #396661; + -md-ref-palette-tertiary50: #527f7a; + -md-ref-palette-tertiary60: #6b9993; + -md-ref-palette-tertiary70: #85b4ae; + -md-ref-palette-tertiary80: #a0d0c9; + -md-ref-palette-tertiary90: #bcece5; + -md-ref-palette-tertiary95: #cafaf3; + -md-ref-palette-tertiary98: #e4fffa; + -md-ref-palette-tertiary99: #f2fffc; + -md-ref-palette-tertiary100: #ffffff; - /* secondary */ - -md-secondary50: #fff3e0; - -md-secondary100: #ffe0b2; - -md-secondary200: #ffcc80; - -md-secondary300: #ffb74d; - -md-secondary400: #ffa726; - -md-secondary500: #ff9800; - -md-secondary600: #fb8c00; - -md-secondary700: #f57c00; - -md-secondary800: #ef6c00; - -md-secondary900: #e65100; + /* Error */ + -md-ref-palette-error0: #000000; + -md-ref-palette-error5: #2d0001; + -md-ref-palette-error10: #410002; + -md-ref-palette-error15: #540003; + -md-ref-palette-error20: #690005; + -md-ref-palette-error25: #7e0007; + -md-ref-palette-error30: #93000a; + -md-ref-palette-error35: #a80710; + -md-ref-palette-error40: #ba1a1a; + -md-ref-palette-error50: #de3730; + -md-ref-palette-error60: #ff5449; + -md-ref-palette-error70: #ff897d; + -md-ref-palette-error80: #ffb4ab; + -md-ref-palette-error90: #ffdad6; + -md-ref-palette-error95: #ffedea; + -md-ref-palette-error98: #fff8f7; + -md-ref-palette-error99: #fffbff; + -md-ref-palette-error100: #ffffff; + + /* Neutral */ + -md-ref-palette-neutral0: #000000; + -md-ref-palette-neutral5: #10110d; + -md-ref-palette-neutral10: #1b1c18; + -md-ref-palette-neutral15: #252621; + -md-ref-palette-neutral20: #30312c; + -md-ref-palette-neutral25: #3b3c37; + -md-ref-palette-neutral30: #464742; + -md-ref-palette-neutral35: #52534d; + -md-ref-palette-neutral40: #5e5f59; + -md-ref-palette-neutral50: #777771; + -md-ref-palette-neutral60: #91918a; + -md-ref-palette-neutral70: #acaba5; + -md-ref-palette-neutral80: #c7c7bf; + -md-ref-palette-neutral90: #e4e3db; + -md-ref-palette-neutral95: #f2f1e9; + -md-ref-palette-neutral98: #fbf9f2; + -md-ref-palette-neutral99: #fefcf4; + -md-ref-palette-neutral100: #ffffff; - /* tertiary */ - -md-tertiary50: #e0f2f1; - -md-tertiary100: #b2dfdb; - -md-tertiary200: #80cbc4; - -md-tertiary300: #4db6ac; - -md-tertiary400: #26a69a; - -md-tertiary500: #009688; - -md-tertiary600: #00897b; - -md-tertiary700: #00796b; - -md-tertiary800: #00695c; - -md-tertiary900: #004d40; + /* Neutral Variant */ + -md-ref-palette-neutral-variant0: #000000; + -md-ref-palette-neutral-variant5: #0f1209; + -md-ref-palette-neutral-variant10: #1a1d13; + -md-ref-palette-neutral-variant15: #24271d; + -md-ref-palette-neutral-variant20: #2e3227; + -md-ref-palette-neutral-variant25: #393d32; + -md-ref-palette-neutral-variant30: #45483d; + -md-ref-palette-neutral-variant35: #515448; + -md-ref-palette-neutral-variant40: #5d6054; + -md-ref-palette-neutral-variant50: #75786c; + -md-ref-palette-neutral-variant60: #8f9284; + -md-ref-palette-neutral-variant70: #aaad9e; + -md-ref-palette-neutral-variant80: #c5c8b9; + -md-ref-palette-neutral-variant90: #e2e4d4; + -md-ref-palette-neutral-variant95: #f0f2e2; + -md-ref-palette-neutral-variant98: #f9fbeb; + -md-ref-palette-neutral-variant99: #fcfeee; + -md-ref-palette-neutral-variant100: #ffffff; - /* neutral */ - -md-neutral50: #fafafa; - -md-neutral100: #f5f5f5; - -md-neutral200: #eeeeee; - -md-neutral300: #e0e0e0; - -md-neutral400: #bdbdbd; - -md-neutral500: #787579; - -md-neutral600: #757575; - -md-neutral700: #616161; - -md-neutral800: #424242; - -md-neutral900: #212121; - /* neutral-variant */ - -md-neutral-variant50: #eceff1; - -md-neutral-variant100: #cfd8dc; - -md-neutral-variant200: #b0bec5; - -md-neutral-variant300: #90a4ae; - -md-neutral-variant400: #78909c; - -md-neutral-variant500: #607d8b; - -md-neutral-variant600: #546e7a; - -md-neutral-variant700: #455a64; - -md-neutral-variant800: #37474f; - -md-neutral-variant900: #263238; + /* System Colors */ + -md-sys-color-primary: #bdcca0; + -md-sys-color-on-primary: #293414; + -md-sys-color-primary-container: #3f4b29; + -md-sys-color-on-primary-container: #d9e8ba; + -md-sys-color-secondary: #c6c8ba; + -md-sys-color-on-secondary: #2f3228; + -md-sys-color-secondary-container: #45483d; + -md-sys-color-on-secondary-container: #e2e4d5; + -md-sys-color-tertiary: #b9cac7; + -md-sys-color-on-tertiary: #243331; + -md-sys-color-tertiary-container: #3a4a48; + -md-sys-color-on-tertiary-container: #d5e6e3; + -md-sys-color-error: #ffb4ab; + -md-sys-color-on-error: #690005; + -md-sys-color-error-container: #93000a; + -md-sys-color-on-error-container: #ffb4ab; + -md-sys-color-background: #1c1c1a; + -md-sys-color-on-background: #e5e2de; + -md-sys-color-surface: #1c1c1a; + -md-sys-color-on-surface: #e5e2de; + -md-sys-color-surface-variant: #464742; + -md-sys-color-on-surface-variant: #c7c7c0; + -md-sys-color-outline: #91918b; + -md-sys-color-outline-variant: #464742; + -md-sys-color-shadow: #000000; + -md-sys-color-scrim: #000000; + -md-sys-color-inverse-surface: #e5e2de; + -md-sys-color-inverse-on-surface: #31302e; + -md-sys-color-inverse-primary: #56633e; + -md-sys-color-surface-tint: #bdcca0; + -md-sys-color-surface-tint-color: #bdcca0; - /* Primary */ - -md-color-inverse-primary: -md-primary200; - -md-color-on-primary-container: -md-primary100; - -md-color-on-primary: -md-primary500; - -md-color-primary-container: -md-primary400; - -md-color-primary: -md-primary300; + /* Light Colors */ + -md-sys-color-primary-light: #56633e; + -md-sys-color-on-primary-light: #ffffff; + -md-sys-color-primary-container-light: #d9e8ba; + -md-sys-color-on-primary-container-light: #141f03; + -md-sys-color-secondary-light: #5d6054; + -md-sys-color-on-secondary-light: #ffffff; + -md-sys-color-secondary-container-light: #e2e4d5; + -md-sys-color-on-secondary-container-light: #1a1d14; + -md-sys-color-tertiary-light: #52625f; + -md-sys-color-on-tertiary-light: #ffffff; + -md-sys-color-tertiary-container-light: #d5e6e3; + -md-sys-color-on-tertiary-container-light: #0f1e1c; + -md-sys-color-error-light: #ba1a1a; + -md-sys-color-on-error-light: #ffffff; + -md-sys-color-error-container-light: #ffdad6; + -md-sys-color-on-error-container-light: #410002; + -md-sys-color-background-light: #fffcf8; + -md-sys-color-on-background-light: #1c1c1a; + -md-sys-color-surface-light: #fffcf8; + -md-sys-color-on-surface-light: #1c1c1a; + -md-sys-color-surface-variant-light: #e4e3db; + -md-sys-color-on-surface-variant-light: #464742; + -md-sys-color-outline-light: #777772; + -md-sys-color-outline-variant-light: #c7c7c0; + -md-sys-color-shadow-light: #000000; + -md-sys-color-scrim-light: #000000; + -md-sys-color-inverse-surface-light: #31302e; + -md-sys-color-inverse-on-surface-light: #f3f0ec; + -md-sys-color-inverse-primary-light: #bdcca0; + -md-sys-color-surface-tint-light: #56633e; + -md-sys-color-surface-tint-color-light: #56633e; - /* Secondary */ - -md-color-on-secondary-container: -md-secondary200; - -md-color-on-secondary: -md-secondary500; - -md-color-secondary-container: -md-secondary400; - -md-color-secondary: -md-secondary300; + /* Dark Colors */ + -md-sys-color-primary-dark: #bdcca0; + -md-sys-color-on-primary-dark: #293414; + -md-sys-color-primary-container-dark: #3f4b29; + -md-sys-color-on-primary-container-dark: #d9e8ba; + -md-sys-color-secondary-dark: #c6c8ba; + -md-sys-color-on-secondary-dark: #2f3228; + -md-sys-color-secondary-container-dark: #45483d; + -md-sys-color-on-secondary-container-dark: #e2e4d5; + -md-sys-color-tertiary-dark: #b9cac7; + -md-sys-color-on-tertiary-dark: #243331; + -md-sys-color-tertiary-container-dark: #3a4a48; + -md-sys-color-on-tertiary-container-dark: #d5e6e3; + -md-sys-color-error-dark: #ffb4ab; + -md-sys-color-on-error-dark: #690005; + -md-sys-color-error-container-dark: #93000a; + -md-sys-color-on-error-container-dark: #ffb4ab; + -md-sys-color-background-dark: #1c1c1a; + -md-sys-color-on-background-dark: #e5e2de; + -md-sys-color-surface-dark: #1c1c1a; + -md-sys-color-on-surface-dark: #e5e2de; + -md-sys-color-surface-variant-dark: #464742; + -md-sys-color-on-surface-variant-dark: #c7c7c0; + -md-sys-color-outline-dark: #91918b; + -md-sys-color-outline-variant-dark: #464742; + -md-sys-color-shadow-dark: #000000; + -md-sys-color-scrim-dark: #000000; + -md-sys-color-inverse-surface-dark: #e5e2de; + -md-sys-color-inverse-on-surface-dark: #31302e; + -md-sys-color-inverse-primary-dark: #56633e; + -md-sys-color-surface-tint-dark: #bdcca0; + -md-sys-color-surface-tint-color-dark: #bdcca0; - /* Tertiary */ - -md-color-on-tertiary-container: -md-error200; - -md-color-on-tertiary: -md-error400; - -md-color-tertiary-container: -md-error500; - -md-color-tertiary: -md-error300; - - /* Error */ - -md-color-on-error-container: -md-error300; - -md-color-on-error: -md-error500; - -md-color-error-container: -md-error600; - -md-color-error: -md-error300; - - /* Surface */ - -md-color-inverse-on-surface: -md-neutral500; - -md-color-inverse-surface: -md-neutral100; - - -md-color-on-surface-variant: -md-neutral-variant300; - -md-color-on-surface: -md-neutral300; - -md-color-surface-variant: -md-neutral700; - -md-color-surface: -md-neutral800; - - /* Background */ - -md-color-shadow: -md-color-black; - -md-color-outline: -md-neutral600; - -md-color-on-background: -md-neutral300; - -md-color-background: -md-neutral800; - - /* Text Colors */ - -md-color-text-highlight: -md-color-white; - -md-color-text-sub: -md-neutral400; - -md-color-text: -md-neutral200; -} + -md-ref-palette-neutralNaN: #FFFFFF; +} +\ No newline at end of file diff --git a/src/main/resources/nl/isygameclient/views/GameSelectorMenu.fxml b/src/main/resources/nl/isygameclient/views/GameSelectorMenu.fxml @@ -3,52 +3,55 @@ <?import java.lang.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> -<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?> +<?import de.jensd.fx.glyphs.materialicons.MaterialIconView?> +<?import com.jfoenix.controls.*?> -<AnchorPane minHeight="480.0" minWidth="600.0" prefHeight="480.0" prefWidth="600.0" styleClass="background" stylesheets="@../css/theme.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="nl.isygameclient.controllers.GameSelectorMenuController"> - <BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> - <center> - <VBox BorderPane.alignment="CENTER"> - <Label styleClass="error-container-text" text="Label" /> - <Separator maxWidth="50.0" prefWidth="10.0" /> - <FontAwesomeIconView/> - </VBox> - </center> +<AnchorPane minHeight="480.0" minWidth="600.0" prefHeight="1080.0" prefWidth="1920.0" style="-fx-background: white" + stylesheets="@../css/theme.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" + fx:controller="nl.isygameclient.controllers.GameSelectorMenuController"> + <BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" + AnchorPane.topAnchor="0.0"> + <top> + <HBox prefHeight="50.0" prefWidth="600.0" BorderPane.alignment="CENTER"> + <styleClass> + <String fx:value="surface"/> + </styleClass> + <Label text="Store"> + <styleClass> + <String fx:value="display-large"/> + <String fx:value="inverse-surface-text"/> + </styleClass> + </Label> + </HBox> + </top> <left> <AnchorPane BorderPane.alignment="CENTER"> - <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> + <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" + AnchorPane.topAnchor="0.0"> <Label alignment="CENTER" styleClass="background-text" text="Games"> </Label> - <Button text="Close"> - </Button> <StackPane styleClass="highlight-rectangle"> <TextField fx:id="searchBox" promptText="Search"> - <styleClass> - <String fx:value="transparent" /> - <String fx:value="search-bar" /> - </styleClass></TextField> - <Button fx:id="searchDeleteButton" mnemonicParsing="false" onAction="#handleClearSearchText" StackPane.alignment="CENTER_RIGHT"> - <styleClass> - <String fx:value="button" /> - <String fx:value="exit-button" /> - <String fx:value="close" /> - </styleClass></Button> - <Button mnemonicParsing="false" StackPane.alignment="CENTER_LEFT"> - <styleClass> - <String fx:value="button" /> - <String fx:value="search-button" /> - <String fx:value="search" /> - </styleClass></Button> + <styleClass> + <String fx:value="transparent"/> + <String fx:value="search-bar"/> + </styleClass> + </TextField> + <MaterialIconView StackPane.alignment="CENTER_LEFT" glyphName="SEARCH" glyphSize="20" styleClass="searchIcon"/> </StackPane> <AnchorPane VBox.vgrow="ALWAYS"> - <ListView styleClass="background" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0" /> + <ListView styleClass="background" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" + AnchorPane.topAnchor="0.0"/> </AnchorPane> </VBox> </AnchorPane> </left> - <top> - <HBox prefHeight="28.0" prefWidth="600.0" BorderPane.alignment="CENTER" /> - </top> + <center> + <VBox BorderPane.alignment="CENTER"> + <Label styleClass="error-container-text" text="Label"/> + <Separator maxWidth="50.0" prefWidth="10.0"/> + </VBox> + </center> </BorderPane> </AnchorPane>