├── .gitignore ├── README.md ├── build.gradle ├── gradlew ├── gradlew.bat ├── out └── production │ └── resources │ └── cloud_css │ ├── ElementButton.bss │ ├── ElementButton.css │ ├── ElementFX.bss │ ├── ElementFX.css │ ├── ElementTextField.bss │ └── ElementTextField.css ├── screenshot └── screen_1.0.png ├── settings.gradle └── src ├── main ├── kotlin │ └── ink │ │ └── bluecloud │ │ └── css │ │ ├── CssResources.kt │ │ ├── ElementButton.kt │ │ └── ElementTextField.kt └── resources │ └── cloud_css │ ├── ElementButton.bss │ ├── ElementButton.css │ ├── ElementFX.bss │ ├── ElementFX.css │ ├── ElementTextField.bss │ └── ElementTextField.css └── test ├── java ├── mains.java └── test.java └── kotlin ├── BssCompiler.kt ├── devapp ├── CloudStyleGlobal.kt ├── app.kt └── treeview │ ├── TreeClass.kt │ └── Treeview.kt └── testapp └── Demo.kt /.gitignore: -------------------------------------------------------------------------------- 1 | /.gradle/ 2 | /build/ 3 | /.idea/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ElementFX 2 | 3 | ElementUi in javafx,that you can get a beautiful applications with only one line code. 4 | JavaFX版本的ElementUi，您可以仅需一行代码而轻松美化您的JavaFX应用 5 | 6 | ### Usage: 7 | 8 | For Java: 9 | ``` 10 | Button button = new Button(); 11 | ElementButtonKt.theme(button, ElementButton.grayButton); 12 | 13 | Scene scene = new Scene(root); 14 | scene.getStylesheets().add(CssResources.globalCssFile); 15 | scene.getStylesheets().add(CssResources.buttonCssFile);//可选，用于每个组件可单独调整主题 16 | 17 | /* 18 | or： 19 | CssResourcesKt.themes(scene, (strings, cssResources) -> { 20 | strings.add(CssResources.globalCssFile); 21 | strings.add(CssResources.buttonCssFile); 22 | return null; 23 | }); 24 | */ 25 | 26 | primaryStage.setScene(scene); 27 | primaryStage.setTitle("ElementForJavaFX"); 28 | primaryStage.show(); 29 | ``` 30 | For Kotlin: 31 | ``` 32 | primaryStage.run { 33 | scene = Scene(root,400.0,400.0).apply { 34 | themes { 35 | this += it.globalCssFile 36 | this += it.buttonCssFile//可选，用于每个组件可单独调整主题 37 | } 38 | } 39 | title = "ElementForJavaFX" 40 | show() 41 | } 42 | ``` 43 | 44 | ### Note: 45 | 46 | 本项目尚未在仓库中发布，您可以自行在out/production/resources/cloud_css中找到您需要的css文件通过JavaFx的api自行引入 47 | 也可以在release中下载预览版本通过本地导入的方式引用 48 | 具体用法请查看demo 49 | 50 | This project has not yet been released in the maven,but you can find the css file you need in out/production/resources/cloud_css and import it by JavaFx api. 51 | You can also download the preview version in the release and importing in locally way. 52 | Please refer to the demo for details. 53 | 54 | 55 | ## 当前支持的组件(Supported nodes): 56 | > + Button 57 | > + TextField 58 | > + ListView 59 | > + TextArea 60 | > + Label 61 | > + ComboBox 62 | > + CheckBox 63 | > + ScrollPane 64 | > + ScrollBar 65 | > + DatePicker 66 | > + TableView 67 | > + Spinner 68 | > + TabPane 69 | > + Pagination 70 | > + ContextMenu 71 | > + Slider 72 | > + ProgressBar 73 | > + TreeView 74 | 75 | #### 示例效果： 76 | ![Screen](screenshot/screen_1.0.png) 77 | Demo path is : src/test/kotlin/testapp/Demo.kt 78 | 79 | 80 | ### todo: 81 | 为每个组件单独调整主题。 82 | Change themes individually for nodes. 83 | ``` 84 | val regButton = Button("Register").apply { 85 | theme(ElementButton.orangeButton) 86 | } 87 | ``` 88 | NOTE:当前仅支持TextField和Button -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | plugins { 2 | id 'maven-publish' 3 | id 'application' 4 | id 'org.jetbrains.kotlin.jvm' version '1.7.20' 5 | id 'org.openjfx.javafxplugin' version '0.0.12' 6 | } 7 | 8 | group = 'ink.bluecloud' 9 | version = '1.3-SNAPSHOT' 10 | 11 | repositories { 12 | mavenLocal() 13 | maven { 14 | url 'https://repo.huaweicloud.com/repository/maven/' 15 | } 16 | maven { 17 | url 'https://maven.aliyun.com/repository/central/' 18 | } 19 | maven { 20 | url 'https://maven.aliyun.com/repository/public/' 21 | } 22 | maven { 23 | url 'https://oss.sonatype.org/content/repositories/snapshots' 24 | } 25 | mavenCentral() 26 | } 27 | 28 | dependencies { 29 | testImplementation 'org.jetbrains.kotlin:kotlin-test' 30 | testImplementation group: 'no.tornado', name: 'tornadofx', version: '2.0.0-SNAPSHOT' 31 | } 32 | 33 | javafx { 34 | version = '19' 35 | modules = ['javafx.controls'] 36 | } 37 | 38 | test { 39 | useJUnitPlatform() 40 | } 41 | 42 | compileKotlin { 43 | kotlinOptions.jvmTarget = '17' 44 | // kotlinOptions.useK2 = true 45 | } 46 | 47 | compileTestKotlin { 48 | kotlinOptions.jvmTarget = '17' 49 | } 50 | 51 | application { 52 | mainClassName = 'MainKt' 53 | } 54 | 55 | publishing { 56 | publications { 57 | // 这个mavenJava可以随便填，只是一个任务名字而已 58 | // MavenPublication必须有，这个是调用的任务类 59 | mavenJava(MavenPublication) { 60 | // 这里头是artifacts的配置信息，不填会采用默认的 61 | groupId = 'ink.bluecloud' 62 | artifactId = 'elementfx' 63 | version = '1.3' 64 | 65 | from components.java 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /out/production/resources/cloud_css/ElementButton.bss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anivie/ElementFX/ab1768d96b4787d4c07f5655e88b864c61ab5690/out/production/resources/cloud_css/ElementButton.bss -------------------------------------------------------------------------------- /out/production/resources/cloud_css/ElementButton.css: -------------------------------------------------------------------------------- 1 | .white-button { 2 | -fx-font-size: 15px; 3 | -fx-cursor: HAND; 4 | -fx-background-color: rgba(255, 255, 255, 1); 5 | -fx-border-color: rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1); 6 | -fx-border-radius: 5px 5px 5px 5px; 7 | -fx-background-radius: 5px 5px 5px 5px; 8 | } 9 | .white-button:hover { 10 | -fx-background-color: white; 11 | -fx-border-color: rgba(198, 226, 255, 1) rgba(198, 226, 255, 1) rgba(198, 226, 255, 1) rgba(198, 226, 255, 1); 12 | -fx-text-fill: rgba(64, 158, 255, 1); 13 | } 14 | .white-button:pressed { 15 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 16 | } 17 | .default-button { 18 | -fx-font-size: 15px; 19 | -fx-cursor: HAND; 20 | -fx-background-color: rgba(236, 245, 255, 1); 21 | -fx-background-radius: 5px 5px 5px 5px; 22 | -fx-border-color: rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1); 23 | -fx-border-radius: 5px 5px 5px 5px; 24 | -fx-text-fill: rgba(64, 158, 255, 1); 25 | } 26 | .default-button:hover { 27 | -fx-background-color: rgba(64, 158, 255, 1); 28 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 29 | -fx-text-fill: rgba(255, 255, 255, 1); 30 | } 31 | .default-button:pressed { 32 | -fx-background-color: rgba(58, 142, 230, 1); 33 | -fx-border-color: rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1); 34 | -fx-text-fill: rgba(255, 255, 255, 1); 35 | } 36 | .green-button { 37 | -fx-font-size: 15px; 38 | -fx-cursor: HAND; 39 | -fx-background-color: rgba(240, 249, 235, 1); 40 | -fx-background-radius: 5px 5px 5px 5px; 41 | -fx-border-color: rgba(179, 225, 157, 1) rgba(179, 225, 157, 1) rgba(179, 225, 157, 1) rgba(179, 225, 157, 1); 42 | -fx-border-radius: 5px 5px 5px 5px; 43 | -fx-text-fill: rgba(113, 198, 71, 1); 44 | } 45 | .green-button:hover { 46 | -fx-background-color: rgba(103, 194, 58, 1); 47 | -fx-border-color: rgba(103, 194, 58, 1) rgba(103, 194, 58, 1) rgba(103, 194, 58, 1) rgba(103, 194, 58, 1); 48 | -fx-text-fill: rgba(255, 255, 255, 1); 49 | } 50 | .green-button:pressed { 51 | -fx-background-color: rgba(82, 155, 46, 1); 52 | -fx-border-color: rgba(82, 155, 46, 1) rgba(82, 155, 46, 1) rgba(82, 155, 46, 1) rgba(82, 155, 46, 1); 53 | -fx-text-fill: rgba(255, 255, 255, 1); 54 | } 55 | .gray-button { 56 | -fx-font-size: 15px; 57 | -fx-cursor: HAND; 58 | -fx-background-color: rgba(244, 244, 245, 1); 59 | -fx-background-radius: 5px 5px 5px 5px; 60 | -fx-border-color: rgba(200, 201, 204, 1) rgba(200, 201, 204, 1) rgba(200, 201, 204, 1) rgba(200, 201, 204, 1); 61 | -fx-border-radius: 5px 5px 5px 5px; 62 | -fx-text-fill: rgba(153, 156, 161, 1); 63 | } 64 | .gray-button:hover { 65 | -fx-background-color: rgba(144, 147, 153, 1); 66 | -fx-border-color: rgba(144, 147, 153, 1) rgba(144, 147, 153, 1) rgba(144, 147, 153, 1) rgba(144, 147, 153, 1); 67 | -fx-text-fill: rgba(255, 255, 255, 1); 68 | } 69 | .gray-button:pressed { 70 | -fx-background-color: rgba(115, 118, 122, 1); 71 | -fx-border-color: rgba(115, 118, 122, 1) rgba(115, 118, 122, 1) rgba(115, 118, 122, 1) rgba(115, 118, 122, 1); 72 | -fx-text-fill: rgba(255, 255, 255, 1); 73 | } 74 | .orange-button { 75 | -fx-font-size: 15px; 76 | -fx-cursor: HAND; 77 | -fx-background-color: rgba(253, 246, 236, 1); 78 | -fx-background-radius: 5px 5px 5px 5px; 79 | -fx-border-color: rgba(243, 209, 158, 1) rgba(243, 209, 158, 1) rgba(243, 209, 158, 1) rgba(243, 209, 158, 1); 80 | -fx-border-radius: 5px 5px 5px 5px; 81 | -fx-text-fill: rgba(234, 175, 86, 1); 82 | } 83 | .orange-button:hover { 84 | -fx-background-color: rgba(230, 162, 60, 1); 85 | -fx-border-color: rgba(230, 162, 60, 1) rgba(230, 162, 60, 1) rgba(230, 162, 60, 1) rgba(230, 162, 60, 1); 86 | -fx-text-fill: rgba(255, 255, 255, 1); 87 | } 88 | .orange-button:pressed { 89 | -fx-background-color: rgba(184, 130, 48, 1); 90 | -fx-border-color: rgba(184, 130, 48, 1) rgba(184, 130, 48, 1) rgba(184, 130, 48, 1) rgba(184, 130, 48, 1); 91 | -fx-text-fill: rgba(255, 255, 255, 1); 92 | } 93 | .red-button { 94 | -fx-font-size: 15px; 95 | -fx-cursor: HAND; 96 | -fx-background-color: rgba(254, 240, 240, 1); 97 | -fx-background-radius: 5px 5px 5px 5px; 98 | -fx-border-color: rgba(250, 182, 182, 1) rgba(250, 182, 182, 1) rgba(250, 182, 182, 1) rgba(250, 182, 182, 1); 99 | -fx-border-radius: 5px 5px 5px 5px; 100 | -fx-text-fill: rgba(245, 113, 113, 1); 101 | } 102 | .red-button:hover { 103 | -fx-background-color: rgba(245, 108, 108, 1); 104 | -fx-border-color: rgba(245, 108, 108, 1) rgba(245, 108, 108, 1) rgba(245, 108, 108, 1) rgba(245, 108, 108, 1); 105 | -fx-text-fill: rgba(255, 255, 255, 1); 106 | } 107 | .red-button:pressed { 108 | -fx-background-color: rgba(196, 86, 86, 1); 109 | -fx-border-color: rgba(196, 86, 86, 1) rgba(196, 86, 86, 1) rgba(196, 86, 86, 1) rgba(196, 86, 86, 1); 110 | -fx-text-fill: rgba(255, 255, 255, 1); 111 | } -------------------------------------------------------------------------------- /out/production/resources/cloud_css/ElementFX.bss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anivie/ElementFX/ab1768d96b4787d4c07f5655e88b864c61ab5690/out/production/resources/cloud_css/ElementFX.bss -------------------------------------------------------------------------------- /out/production/resources/cloud_css/ElementFX.css: -------------------------------------------------------------------------------- 1 | .button { 2 | -fx-background-color: rgba(236, 245, 255, 1); 3 | -fx-background-radius: 5px 5px 5px 5px; 4 | -fx-border-color: rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1); 5 | -fx-border-radius: 5px 5px 5px 5px; 6 | -fx-text-fill: rgba(64, 158, 255, 1); 7 | -fx-font-size: 15px; 8 | -fx-padding: 5px 10px 5px 10px; 9 | -fx-cursor: HAND; 10 | } 11 | .button:hover { 12 | -fx-background-color: rgba(64, 158, 255, 1); 13 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 14 | -fx-text-fill: rgba(255, 255, 255, 1); 15 | } 16 | .button:pressed { 17 | -fx-background-color: rgba(58, 142, 230, 1); 18 | -fx-border-color: rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1); 19 | -fx-text-fill: rgba(255, 255, 255, 1); 20 | } 21 | .text-field { 22 | -fx-border-radius: 5px 5px 5px 5px; 23 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 24 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 25 | -fx-accent: rgba(46, 188, 232, 1); 26 | -fx-background-color: rgba(255, 255, 255, 1); 27 | -fx-padding: 5px 3px 5px 3px; 28 | -fx-font-size: 14px; 29 | } 30 | .text-field:focused { 31 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 32 | } 33 | .list-view { 34 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 35 | -fx-border-width: 1px 1px 1px 1px; 36 | -fx-background-insets: 0px 0px 0px 0px; 37 | } 38 | .list-view .list-cell { 39 | -fx-background-color: rgba(255, 255, 255, 1); 40 | -fx-font-size: 15px; 41 | -fx-text-fill: rgba(117, 117, 117, 1); 42 | -fx-padding: 10px 0px 10px 5px; 43 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(235, 238, 245, 1) rgba(0, 0, 0, 0); 44 | } 45 | .list-view .list-cell:odd { 46 | -fx-background-color: rgba(255, 255, 255, 1); 47 | } 48 | .list-view .list-cell:hover { 49 | -fx-background-color: rgba(245, 247, 250, 1); 50 | } 51 | .list-view:focused .list-cell:selected { 52 | -fx-background-color: rgba(236, 245, 255, 1); 53 | -fx-text-fill: rgba(117, 117, 117, 1); 54 | } 55 | .list-view .scroll-bar .decrement-arrow { 56 | -fx-min-width: 0px; 57 | -fx-min-height: 0px; 58 | -fx-pref-width: 0px; 59 | -fx-pref-height: 0px; 60 | visibility: hidden; 61 | } 62 | .list-view .scroll-bar .increment-arrow { 63 | -fx-min-width: 0px; 64 | -fx-min-height: 0px; 65 | -fx-pref-width: 0px; 66 | -fx-pref-height: 0px; 67 | visibility: hidden; 68 | } 69 | .list-view .scroll-bar .decrement-button { 70 | -fx-min-width: 0px; 71 | -fx-min-height: 0px; 72 | -fx-pref-width: 0px; 73 | -fx-pref-height: 0px; 74 | visibility: hidden; 75 | } 76 | .list-view .scroll-bar .increment-button { 77 | -fx-min-width: 0px; 78 | -fx-min-height: 0px; 79 | -fx-pref-width: 0px; 80 | -fx-pref-height: 0px; 81 | visibility: hidden; 82 | } 83 | .list-view .scroll-bar:vertical { 84 | -fx-padding: 0px 0px 0px 0px; 85 | -fx-pref-width: 9px; 86 | -fx-background-color: rgba(255, 255, 255, 1); 87 | } 88 | .list-view .scroll-bar:vertical .thumb { 89 | -fx-background-color: rgba(221, 222, 224, 1); 90 | -fx-background-insets: 0px 0px 0px 0px; 91 | -fx-background-radius: 5px 5px 5px 5px; 92 | } 93 | .list-view .scroll-bar:vertical .thumb:pressed { 94 | -fx-background-color: rgba(199, 201, 204, 1); 95 | } 96 | .list-view:focused { 97 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 98 | } 99 | .text-area { 100 | -fx-border-radius: 5px 5px 5px 5px; 101 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 102 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 103 | -fx-accent: rgba(46, 188, 232, 1); 104 | -fx-background-color: rgba(255, 255, 255, 1); 105 | -fx-padding: 5px 3px 5px 3px; 106 | -fx-font-size: 17px; 107 | } 108 | .text-area .content { 109 | -fx-background-color: rgba(255, 255, 255, 1); 110 | } 111 | .text-area:focused { 112 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 113 | } 114 | .text-area .scroll-bar .decrement-arrow { 115 | -fx-min-width: 0px; 116 | -fx-min-height: 0px; 117 | -fx-pref-width: 0px; 118 | -fx-pref-height: 0px; 119 | visibility: hidden; 120 | } 121 | .text-area .scroll-bar .increment-arrow { 122 | -fx-min-width: 0px; 123 | -fx-min-height: 0px; 124 | -fx-pref-width: 0px; 125 | -fx-pref-height: 0px; 126 | visibility: hidden; 127 | } 128 | .text-area .scroll-bar .decrement-button { 129 | -fx-min-width: 0px; 130 | -fx-min-height: 0px; 131 | -fx-pref-width: 0px; 132 | -fx-pref-height: 0px; 133 | visibility: hidden; 134 | } 135 | .text-area .scroll-bar .increment-button { 136 | -fx-min-width: 0px; 137 | -fx-min-height: 0px; 138 | -fx-pref-width: 0px; 139 | -fx-pref-height: 0px; 140 | visibility: hidden; 141 | } 142 | .text-area .scroll-bar:vertical, .text-area .scroll-bar:horizontal { 143 | -fx-padding: 0px 0px 0px 0px; 144 | -fx-pref-width: 9px; 145 | -fx-background-color: rgba(255, 255, 255, 1); 146 | } 147 | .text-area .scroll-bar:vertical .thumb, .text-area .scroll-bar:horizontal .thumb { 148 | -fx-background-color: rgba(236, 245, 255, 1); 149 | -fx-background-insets: 0px 0px 0px 0px; 150 | -fx-background-radius: 0px 0px 0px 0px; 151 | } 152 | .text-area .scroll-bar:vertical .thumb:pressed, .text-area .scroll-bar:horizontal .thumb:pressed { 153 | -fx-background-color: rgba(124, 188, 255, 1); 154 | } 155 | .label { 156 | -fx-font-size: 13px; 157 | -fx-text-fill: rgba(117, 117, 117, 1); 158 | } 159 | .combo-box { 160 | -fx-background-color: rgba(255, 255, 255, 1); 161 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 162 | -fx-border-radius: 5px 5px 5px 5px; 163 | -fx-cursor: HAND; 164 | } 165 | .combo-box > .list-cell { 166 | -fx-font-size: 17px; 167 | } 168 | .combo-box > .arrow-button > .arrow { 169 | -fx-shape: "M460.8 755.2a26.112 26.112 0 0 1-18.944-8.704L97.792 363.008a25.6 25.6 0 1 1 37.888-34.304L460.8 691.2l326.656-363.008a25.6 25.6 0 0 1 37.888 34.304L481.28 747.008a26.112 26.112 0 0 1-20.48 8.192z"; 170 | -fx-background-color: rgba(220, 223, 230, 1); 171 | -fx-pref-height: 5px; 172 | -fx-pref-width: 10px; 173 | } 174 | .combo-box > .arrow-button:pressed .arrow { 175 | -fx-background-color: rgba(103, 106, 113, 1); 176 | } 177 | .combo-box > .combo-box-popup .list-view { 178 | -fx-border-color: rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1); 179 | } 180 | .combo-box > .combo-box-popup .list-view .list-cell { 181 | -fx-background-color: rgba(255, 255, 255, 1); 182 | -fx-text-fill: rgba(0, 0, 0, 0.5); 183 | -fx-font-size: 17px; 184 | -fx-cursor: HAND; 185 | } 186 | .combo-box > .combo-box-popup .list-view .list-cell:hover { 187 | -fx-background-color: rgba(245, 247, 250, 1); 188 | } 189 | .combo-box > .combo-box-popup .list-view .list-cell:selected { 190 | -fx-text-fill: rgba(64, 158, 254, 1); 191 | -fx-background-color: rgba(245, 247, 250, 1); 192 | } 193 | .combo-box > .combo-box-popup .scroll-bar .decrement-arrow { 194 | -fx-min-width: 0px; 195 | -fx-min-height: 0px; 196 | -fx-pref-width: 0px; 197 | -fx-pref-height: 0px; 198 | visibility: hidden; 199 | } 200 | .combo-box > .combo-box-popup .scroll-bar .increment-arrow { 201 | -fx-min-width: 0px; 202 | -fx-min-height: 0px; 203 | -fx-pref-width: 0px; 204 | -fx-pref-height: 0px; 205 | visibility: hidden; 206 | } 207 | .combo-box > .combo-box-popup .scroll-bar .decrement-button { 208 | -fx-min-width: 0px; 209 | -fx-min-height: 0px; 210 | -fx-pref-width: 0px; 211 | -fx-pref-height: 0px; 212 | visibility: hidden; 213 | } 214 | .combo-box > .combo-box-popup .scroll-bar .increment-button { 215 | -fx-min-width: 0px; 216 | -fx-min-height: 0px; 217 | -fx-pref-width: 0px; 218 | -fx-pref-height: 0px; 219 | visibility: hidden; 220 | } 221 | .combo-box > .combo-box-popup .scroll-bar:vertical { 222 | -fx-padding: 0px 0px 0px 0px; 223 | -fx-pref-width: 9px; 224 | -fx-background-color: rgba(255, 255, 255, 1); 225 | } 226 | .combo-box > .combo-box-popup .scroll-bar:vertical .thumb { 227 | -fx-background-color: rgba(236, 245, 255, 1); 228 | -fx-background-insets: 0px 0px 0px 0px; 229 | -fx-background-radius: 0px 0px 0px 0px; 230 | } 231 | .combo-box > .combo-box-popup .scroll-bar:vertical .thumb:pressed { 232 | -fx-background-color: rgba(124, 188, 255, 1); 233 | } 234 | .combo-box:focused { 235 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 236 | } 237 | .combo-box:editable > .text-field { 238 | -fx-border-width: 0px 0px 0px 0px; 239 | } 240 | .combo-box:editable > .arrow-button { 241 | -fx-background-color: rgba(255, 255, 255, 1); 242 | } 243 | .check-box { 244 | -fx-font-size: 14px; 245 | -fx-cursor: HAND; 246 | -fx-text-fill: rgba(117, 117, 117, 1); 247 | } 248 | .check-box .box { 249 | -fx-background-color: rgba(255, 255, 255, 1); 250 | -fx-background-radius: 3px 3px 3px 3px; 251 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 252 | -fx-border-radius: 3px 3px 3px 3px; 253 | } 254 | .check-box:selected .box { 255 | -fx-background-color: rgba(64, 158, 255, 1); 256 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 257 | } 258 | .check-box:selected .mark { 259 | -fx-background-color: rgba(255, 255, 255, 1); 260 | -fx-shape: "M299,396l2-2,3,3,6-6,2,2-8,8Z"; 261 | } 262 | .scroll-pane { 263 | -fx-background-color: rgba(0, 0, 0, 0); 264 | } 265 | .scroll-pane .viewport { 266 | -fx-background-color: rgba(0, 0, 0, 0); 267 | } 268 | .scroll-bar .decrement-arrow { 269 | -fx-min-width: 0px; 270 | -fx-min-height: 0px; 271 | -fx-pref-width: 0px; 272 | -fx-pref-height: 0px; 273 | visibility: hidden; 274 | } 275 | .scroll-bar .increment-arrow { 276 | -fx-min-width: 0px; 277 | -fx-min-height: 0px; 278 | -fx-pref-width: 0px; 279 | -fx-pref-height: 0px; 280 | visibility: hidden; 281 | } 282 | .scroll-bar .decrement-button { 283 | -fx-min-width: 0px; 284 | -fx-min-height: 0px; 285 | -fx-pref-width: 0px; 286 | -fx-pref-height: 0px; 287 | visibility: hidden; 288 | } 289 | .scroll-bar .increment-button { 290 | -fx-min-width: 0px; 291 | -fx-min-height: 0px; 292 | -fx-pref-width: 0px; 293 | -fx-pref-height: 0px; 294 | visibility: hidden; 295 | } 296 | .scroll-bar:vertical { 297 | -fx-padding: 0px 0px 0px 0px; 298 | -fx-pref-width: 9px; 299 | -fx-background-color: rgba(255, 255, 255, 1); 300 | } 301 | .scroll-bar:vertical .thumb { 302 | -fx-background-color: rgba(236, 245, 255, 1); 303 | -fx-background-insets: 0px 0px 0px 0px; 304 | -fx-background-radius: 0px 0px 0px 0px; 305 | } 306 | .scroll-bar:vertical .thumb:pressed { 307 | -fx-background-color: rgba(124, 188, 255, 1); 308 | } 309 | .scroll-bar:horizontal { 310 | -fx-padding: 0px 0px 0px 0px; 311 | -fx-pref-height: 9px; 312 | -fx-background-color: rgba(255, 255, 255, 1); 313 | } 314 | .scroll-bar:horizontal .thumb { 315 | -fx-background-color: rgba(236, 245, 255, 1); 316 | -fx-background-insets: 0px 0px 0px 0px; 317 | -fx-background-radius: 0px 0px 0px 0px; 318 | } 319 | .scroll-bar:horizontal .thumb:pressed { 320 | -fx-background-color: rgba(124, 188, 255, 1); 321 | } 322 | .date-picker { 323 | -fx-border-color: rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1); 324 | -fx-border-radius: 3px 3px 3px 3px; 325 | -fx-background-color: rgba(255, 255, 255, 1); 326 | } 327 | .date-picker .arrow-button { 328 | -fx-background-color: rgba(255, 255, 255, 1); 329 | -fx-cursor: HAND; 330 | } 331 | .date-picker .arrow-button:hover, .date-picker .arrow-button:focused { 332 | -fx-background-color: rgba(247, 247, 247, 1); 333 | } 334 | .date-picker .arrow-button > .arrow { 335 | -fx-shape: "M896 448H128v447.957333l477.738667 0.021334L896 895.957333V448z m0-42.666667V192.042667C896 192 768 192 768 192V149.333333h128.042667A42.666667 42.666667 0 0 1 938.666667 192.042667v703.914666A42.624 42.624 0 0 1 896.064 938.666667H127.936A42.666667 42.666667 0 0 1 85.333333 895.957333V192.042667C85.333333 168.469333 104.256 149.333333 127.957333 149.333333H256v42.666667l-128 0.042667V405.333333h768zM298.666667 85.333333h42.666666v170.666667h-42.666666V85.333333z m384 0h42.666666v170.666667h-42.666666V85.333333zM384 149.333333h256v42.666667H384V149.333333z"; 336 | } 337 | .date-picker .date-picker-popup > .month-year-pane { 338 | -fx-background-color: rgba(255, 255, 255, 1); 339 | -fx-border-width: 0px 0px 1px 0px; 340 | -fx-border-color: rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1); 341 | } 342 | .date-picker .date-picker-popup > .month-year-pane .spinner > .button { 343 | -fx-cursor: HAND; 344 | -fx-background-color: rgba(255, 255, 255, 1); 345 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 346 | } 347 | .date-picker .date-picker-popup > .month-year-pane .spinner > .label { 348 | -fx-font-weight: 700; 349 | } 350 | .date-picker .date-picker-popup > .calendar-grid { 351 | -fx-background-color: rgba(255, 255, 255, 1); 352 | } 353 | .date-picker .date-picker-popup .date-cell { 354 | -fx-background-radius: 3px 3px 3px 3px; 355 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 356 | -fx-cursor: HAND; 357 | } 358 | .date-picker .date-picker-popup .date-cell:hover { 359 | -fx-background-color: rgba(245, 245, 245, 1); 360 | -fx-text-fill: rgba(0, 0, 0, 1); 361 | } 362 | .date-picker .date-picker-popup .date-cell:focused { 363 | -fx-background-color: rgba(24, 144, 255, 1); 364 | -fx-text-fill: rgba(255, 255, 255, 1); 365 | } 366 | .date-picker .date-picker-popup .next-month { 367 | -fx-background-color: rgba(0, 0, 0, 0); 368 | -fx-text-fill: rgba(217, 217, 217, 1); 369 | } 370 | .date-picker .date-picker-popup .next-month:hover { 371 | -fx-background-color: rgba(245, 245, 245, 1); 372 | -fx-text-fill: rgba(217, 217, 217, 1); 373 | } 374 | .date-picker .text-field { 375 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 376 | } 377 | .date-picker:focused { 378 | -fx-border-color: rgba(64, 169, 255, 1) rgba(64, 169, 255, 1) rgba(64, 169, 255, 1) rgba(64, 169, 255, 1); 379 | } 380 | .table-view { 381 | -fx-selection-bar: rgba(255, 255, 255, 1); 382 | -fx-selection-bar-non-focused: rgba(255, 255, 255, 1); 383 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 384 | -fx-border-width: 1px 1px 1px 1px; 385 | -fx-background-insets: 0px 0px 0px 0px; 386 | } 387 | .table-view .column-header { 388 | -fx-background-color: rgba(255, 255, 255, 1); 389 | -fx-padding: 10px 5px 5px 5px; 390 | -fx-border-color: rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1); 391 | -fx-border-width: 0px 0.5px 0px 0.5px; 392 | } 393 | .table-view .filler { 394 | -fx-background-color: rgba(255, 255, 255, 1); 395 | } 396 | .table-view .table-row-cell { 397 | -fx-border-color: rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1); 398 | -fx-border-width: 0.5px 0px 0.5px 0px; 399 | } 400 | .table-view .table-row-cell:odd { 401 | -fx-background-color: rgba(250, 250, 250, 1); 402 | } 403 | .table-view .table-row-cell:hover { 404 | -fx-background-color: rgba(245, 247, 250, 1); 405 | } 406 | .table-view .table-row-cell:selected { 407 | -fx-background-color: rgba(236, 245, 255, 1); 408 | } 409 | .table-view .table-row-cell:selected .text { 410 | -fx-fill: rgba(0, 0, 0, 1); 411 | } 412 | .table-view .table-cell { 413 | -fx-padding: 10px 10px 10px 10px; 414 | -fx-font-size: 13px; 415 | } 416 | .table-view .table-cell:selected { 417 | -fx-text-fill: rgba(0, 0, 0, 1); 418 | } 419 | .table-view:focused { 420 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 421 | } 422 | .spinner { 423 | -fx-border-color: rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1); 424 | -fx-border-radius: 5px 5px 5px 5px; 425 | -fx-background-insets: 0px 0px 0px 0px; 426 | -fx-background-radius: 5px 5px 5px 5px; 427 | } 428 | .spinner .increment-arrow-button { 429 | -fx-cursor: HAND; 430 | -fx-background-color: rgba(245, 247, 250, 1); 431 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1); 432 | } 433 | .spinner .increment-arrow-button:hover .increment-arrow { 434 | -fx-background-color: rgba(64, 158, 255, 1); 435 | } 436 | .spinner .increment-arrow-button .increment-arrow { 437 | -fx-shape: "M887.328477 617.152318 533.951458 267.007553c-0.512619-0.512619-1.216181-0.672598-1.759763-1.152533-0.127295-0.127295-0.159978-0.319957-0.287273-0.447252-12.576374-12.416396-32.831716-12.352748-45.280796 0.192662L136.511544 618.944765c-12.447359 12.576374-12.352748 32.800753 0.192662 45.248112 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415L509.792985 333.185325l332.480043 329.407768c6.239161 6.175514 14.368821 9.280473 22.527725 9.280473 8.255235 0 16.479505-3.168606 22.720387-9.471415C899.968499 649.85674 899.872168 629.599677 887.328477 617.152318z"; 438 | } 439 | .spinner .decrement-arrow-button { 440 | -fx-cursor: HAND; 441 | -fx-background-color: rgba(245, 247, 250, 1); 442 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(220, 223, 230, 1); 443 | } 444 | .spinner .decrement-arrow-button:hover .decrement-arrow { 445 | -fx-background-color: rgba(64, 158, 255, 1); 446 | } 447 | .spinner .decrement-arrow-button .decrement-arrow { 448 | -fx-shape: "M890.335385 330.911222c-12.576374-12.416396-32.800753-12.352748-45.248112 0.192662L517.248327 661.951458 184.831931 332.512727c-12.576374-12.447359-32.800753-12.352748-45.280796 0.192662-12.447359 12.576374-12.352748 32.831716 0.192662 45.280796l353.311652 350.112082c0.543583 0.543583 1.247144 0.672598 1.792447 1.183497 0.127295 0.127295 0.159978 0.287273 0.287273 0.416288 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415l350.112082-353.311652C902.975407 363.615643 902.880796 343.360301 890.335385 330.911222z"; 449 | } 450 | .spinner .text-field { 451 | -fx-border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1); 452 | } 453 | .spinner:hover { 454 | -fx-border-color: rgba(192, 196, 204, 1) rgba(192, 196, 204, 1) rgba(192, 196, 204, 1) rgba(192, 196, 204, 1); 455 | } 456 | .tab-pane { 457 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 458 | -fx-border-radius: 5px 5px 5px 5px; 459 | } 460 | .tab-pane .tab-header-background { 461 | -fx-background-color: rgba(0, 0, 0, 0); 462 | -fx-border-color: rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1); 463 | -fx-border-width: 0px 0px 3px 0px; 464 | } 465 | .tab-pane:top .tab-header-area { 466 | -fx-background-insets: 0px 0px 1px 0px; 467 | -fx-padding: 5px 2px 0px 0px; 468 | } 469 | .tab-pane .tab { 470 | -fx-padding: 5px 16px 5px 16px; 471 | -fx-cursor: HAND; 472 | -fx-background-color: rgba(0, 0, 0, 0); 473 | -fx-border-width: 0px 0px 3px 0px; 474 | -fx-border-color: rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1); 475 | } 476 | .tab-pane .tab:selected { 477 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 478 | } 479 | .tab-pane .tab:selected .tab-label { 480 | -fx-text-fill: rgba(64, 158, 255, 1); 481 | } 482 | .tab-pane .tab:hover .tab-label { 483 | -fx-text-fill: rgba(64, 158, 255, 1); 484 | } 485 | .tab-pane .tab .tab-label { 486 | -fx-font-size: 15px; 487 | } 488 | .tab-pane .tab .focus-indicator { 489 | -fx-border-width: 0px 0px 0px 0px; 490 | } 491 | .pagination .left-arrow-button { 492 | -fx-background-color: rgba(240, 242, 245, 1); 493 | -fx-background-insets: 0px 0px 0px 0px; 494 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 495 | } 496 | .pagination .left-arrow-button:hover .left-arrow { 497 | -fx-background-color: rgba(64, 158, 255, 1); 498 | } 499 | .pagination .left-arrow-button .left-arrow { 500 | -fx-shape: "M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z"; 501 | } 502 | .pagination .right-arrow-button { 503 | -fx-background-color: rgba(240, 242, 245, 1); 504 | -fx-background-insets: 0px 0px 0px 0px; 505 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 506 | } 507 | .pagination .right-arrow-button:hover { 508 | -fx-padding: 0px 0px 0px 0px; 509 | } 510 | .pagination .right-arrow-button:hover .right-arrow { 511 | -fx-background-color: rgba(64, 158, 255, 1); 512 | } 513 | .pagination .right-arrow-button .right-arrow { 514 | -fx-shape: "M584.533333 512l-302.933333 302.933333L341.333333 874.666667l302.933334-302.933334 59.733333-59.733333-59.733333-59.733333L341.333333 145.066667 281.6 209.066667l302.933333 302.933333z"; 515 | } 516 | .pagination .number-button { 517 | -fx-background-color: rgba(240, 242, 245, 1); 518 | -fx-background-insets: 0px 0px 0px 0px; 519 | -fx-background-radius: 3px 3px 3px 3px; 520 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 521 | -fx-cursor: HAND; 522 | } 523 | .pagination .number-button:hover { 524 | -fx-text-fill: rgba(64, 158, 255, 1); 525 | } 526 | .pagination .number-button:selected { 527 | -fx-background-color: rgba(64, 158, 255, 1); 528 | -fx-text-fill: rgba(255, 255, 255, 1); 529 | } 530 | .context-menu { 531 | -fx-background-insets: 0px 0px 0px 0px; 532 | } 533 | .context-menu .menu-item:hover, .context-menu .menu-item:focused { 534 | -fx-background-color: rgba(238, 238, 238, 1); 535 | } 536 | .context-menu .menu-item .label { 537 | -fx-text-fill: rgba(0, 0, 0, 1); 538 | -fx-padding: 5px 100px 5px 5px; 539 | } 540 | .slider .track { 541 | -fx-background-color: rgba(228, 231, 237, 1); 542 | } 543 | .slider .thumb { 544 | -fx-background-color: rgba(255, 255, 255, 1); 545 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 546 | -fx-border-radius: 1em 1em 1em 1em; 547 | -fx-cursor: HAND; 548 | } 549 | .slider .thumb:pressed { 550 | -fx-background-color: rgba(228, 231, 237, 1); 551 | } 552 | .progress-bar { 553 | -fx-background-color: rgba(255, 255, 255, 1); 554 | -fx-background-insets: 0px 0px 0px 0px; 555 | -fx-padding: 0px 0px 0px 0px; 556 | } 557 | .progress-bar .track { 558 | -fx-background-color: rgba(235, 238, 245, 1); 559 | } 560 | .progress-bar .bar { 561 | -fx-background-color: rgba(64, 158, 255, 1); 562 | } 563 | .tree-view { 564 | -fx-background-color: rgba(255, 255, 255, 1); 565 | } 566 | .tree-view .tree-cell { 567 | -fx-background-color: rgba(255, 255, 255, 1); 568 | -fx-text-fill: rgba(0, 0, 0, 1); 569 | -fx-cursor: HAND; 570 | } 571 | .tree-view .tree-cell:hover { 572 | -fx-background-color: rgba(245, 247, 250, 1); 573 | } 574 | .tree-view .tree-cell:selected { 575 | -fx-background-color: rgba(245, 247, 250, 1); 576 | } 577 | .tree-view .tree-cell:empty { 578 | -fx-background-color: rgba(0, 0, 0, 0); 579 | } 580 | .tree-view .tree-cell .tree-disclosure-node .arrow { 581 | -fx-background-color: rgba(168, 171, 178, 1); 582 | } -------------------------------------------------------------------------------- /out/production/resources/cloud_css/ElementTextField.bss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anivie/ElementFX/ab1768d96b4787d4c07f5655e88b864c61ab5690/out/production/resources/cloud_css/ElementTextField.bss -------------------------------------------------------------------------------- /out/production/resources/cloud_css/ElementTextField.css: -------------------------------------------------------------------------------- 1 | .default-text-field { 2 | -fx-border-radius: 5px 5px 5px 5px; 3 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 4 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 5 | -fx-accent: rgba(46, 188, 232, 1); 6 | -fx-background-color: rgba(255, 255, 255, 1); 7 | -fx-padding: 5px 3px 5px 3px; 8 | -fx-font-size: 14px; 9 | } 10 | .default-text-field:focused { 11 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 12 | } 13 | 14 | .green-text-field { 15 | -fx-border-radius: 5px 5px 5px 5px; 16 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 17 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 18 | -fx-accent: #95d475; 19 | -fx-background-color: rgba(255, 255, 255, 1); 20 | -fx-padding: 5px 3px 5px 3px; 21 | -fx-font-size: 14px; 22 | } 23 | .green-text-field:focused { 24 | -fx-border-color: #67C23A; 25 | } 26 | 27 | .orange-text-field { 28 | -fx-border-radius: 5px 5px 5px 5px; 29 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 30 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 31 | -fx-accent: #eebe77; 32 | -fx-background-color: rgba(255, 255, 255, 1); 33 | -fx-padding: 5px 3px 5px 3px; 34 | -fx-font-size: 14px; 35 | } 36 | .orange-text-field:focused { 37 | -fx-border-color: #E6A23C; 38 | } 39 | 40 | .gray-text-field { 41 | -fx-border-radius: 5px 5px 5px 5px; 42 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 43 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 44 | -fx-accent: #b1b3b8; 45 | -fx-background-color: rgba(255, 255, 255, 1); 46 | -fx-padding: 5px 3px 5px 3px; 47 | -fx-font-size: 14px; 48 | } 49 | .gray-text-field:focused { 50 | -fx-border-color: #909399; 51 | } 52 | 53 | .red-text-field { 54 | -fx-border-radius: 5px 5px 5px 5px; 55 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 56 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 57 | -fx-accent: #f89898; 58 | -fx-background-color: rgba(255, 255, 255, 1); 59 | -fx-padding: 5px 3px 5px 3px; 60 | -fx-font-size: 14px; 61 | } 62 | .red-text-field:focused { 63 | -fx-border-color: #F56C6C; 64 | } -------------------------------------------------------------------------------- /screenshot/screen_1.0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anivie/ElementFX/ab1768d96b4787d4c07f5655e88b864c61ab5690/screenshot/screen_1.0.png -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | 2 | rootProject.name = 'ElementFX' 3 | 4 | -------------------------------------------------------------------------------- /src/main/kotlin/ink/bluecloud/css/CssResources.kt: -------------------------------------------------------------------------------- 1 | package ink.bluecloud.css 2 | 3 | import javafx.scene.Scene 4 | 5 | object CssResources { 6 | const val globalCssFile = "cloud_css/ElementFX.css" 7 | const val buttonCssFile = "cloud_css/ElementButton.css" 8 | const val textFieldCssFile = "cloud_css/ElementTextField.css" 9 | } 10 | 11 | fun Scene.themes(block: CssResources.(MutableList) -> Unit) { 12 | buildList { 13 | CssResources.block(this) 14 | 15 | if (indexOf(CssResources.globalCssFile) > 0) { 16 | this -= CssResources.globalCssFile 17 | stylesheets += CssResources.globalCssFile 18 | stylesheets += this 19 | } else { 20 | stylesheets += this 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/main/kotlin/ink/bluecloud/css/ElementButton.kt: -------------------------------------------------------------------------------- 1 | package ink.bluecloud.css 2 | 3 | import javafx.scene.control.Button 4 | 5 | enum class ElementButton(val style: String) { 6 | whiteButton("white-button"), 7 | defaultButton("default-button"), 8 | greenButton("green-button"), 9 | grayButton("gray-button"), 10 | orangeButton("orange-button"), 11 | redButton("red-button"), 12 | } 13 | 14 | fun Button.theme(theme: ElementButton) { 15 | styleClass.first().run { 16 | styleClass.clear() 17 | styleClass += this 18 | styleClass += theme.style 19 | } 20 | } -------------------------------------------------------------------------------- /src/main/kotlin/ink/bluecloud/css/ElementTextField.kt: -------------------------------------------------------------------------------- 1 | package ink.bluecloud.css 2 | 3 | import javafx.scene.control.TextField 4 | 5 | enum class ElementTextField(val style: String) { 6 | defaultTextField("default-text-field"), 7 | greenTextField("green-text-field"), 8 | grayTextField("gray-text-field"), 9 | orangeTextField("orange-text-field"), 10 | redTextField("red-text-field"), 11 | } 12 | 13 | fun TextField.theme(theme: ElementTextField) { 14 | styleClass.clear() 15 | styleClass += theme.style 16 | } -------------------------------------------------------------------------------- /src/main/resources/cloud_css/ElementButton.bss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anivie/ElementFX/ab1768d96b4787d4c07f5655e88b864c61ab5690/src/main/resources/cloud_css/ElementButton.bss -------------------------------------------------------------------------------- /src/main/resources/cloud_css/ElementButton.css: -------------------------------------------------------------------------------- 1 | .white-button { 2 | -fx-font-size: 15px; 3 | -fx-cursor: HAND; 4 | -fx-background-color: rgba(255, 255, 255, 1); 5 | -fx-border-color: rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1); 6 | -fx-border-radius: 5px 5px 5px 5px; 7 | -fx-background-radius: 5px 5px 5px 5px; 8 | } 9 | .white-button:hover { 10 | -fx-background-color: white; 11 | -fx-border-color: rgba(198, 226, 255, 1) rgba(198, 226, 255, 1) rgba(198, 226, 255, 1) rgba(198, 226, 255, 1); 12 | -fx-text-fill: rgba(64, 158, 255, 1); 13 | } 14 | .white-button:pressed { 15 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 16 | } 17 | .default-button { 18 | -fx-font-size: 15px; 19 | -fx-cursor: HAND; 20 | -fx-background-color: rgba(236, 245, 255, 1); 21 | -fx-background-radius: 5px 5px 5px 5px; 22 | -fx-border-color: rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1); 23 | -fx-border-radius: 5px 5px 5px 5px; 24 | -fx-text-fill: rgba(64, 158, 255, 1); 25 | } 26 | .default-button:hover { 27 | -fx-background-color: rgba(64, 158, 255, 1); 28 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 29 | -fx-text-fill: rgba(255, 255, 255, 1); 30 | } 31 | .default-button:pressed { 32 | -fx-background-color: rgba(58, 142, 230, 1); 33 | -fx-border-color: rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1); 34 | -fx-text-fill: rgba(255, 255, 255, 1); 35 | } 36 | .green-button { 37 | -fx-font-size: 15px; 38 | -fx-cursor: HAND; 39 | -fx-background-color: rgba(240, 249, 235, 1); 40 | -fx-background-radius: 5px 5px 5px 5px; 41 | -fx-border-color: rgba(179, 225, 157, 1) rgba(179, 225, 157, 1) rgba(179, 225, 157, 1) rgba(179, 225, 157, 1); 42 | -fx-border-radius: 5px 5px 5px 5px; 43 | -fx-text-fill: rgba(113, 198, 71, 1); 44 | } 45 | .green-button:hover { 46 | -fx-background-color: rgba(103, 194, 58, 1); 47 | -fx-border-color: rgba(103, 194, 58, 1) rgba(103, 194, 58, 1) rgba(103, 194, 58, 1) rgba(103, 194, 58, 1); 48 | -fx-text-fill: rgba(255, 255, 255, 1); 49 | } 50 | .green-button:pressed { 51 | -fx-background-color: rgba(82, 155, 46, 1); 52 | -fx-border-color: rgba(82, 155, 46, 1) rgba(82, 155, 46, 1) rgba(82, 155, 46, 1) rgba(82, 155, 46, 1); 53 | -fx-text-fill: rgba(255, 255, 255, 1); 54 | } 55 | .gray-button { 56 | -fx-font-size: 15px; 57 | -fx-cursor: HAND; 58 | -fx-background-color: rgba(244, 244, 245, 1); 59 | -fx-background-radius: 5px 5px 5px 5px; 60 | -fx-border-color: rgba(200, 201, 204, 1) rgba(200, 201, 204, 1) rgba(200, 201, 204, 1) rgba(200, 201, 204, 1); 61 | -fx-border-radius: 5px 5px 5px 5px; 62 | -fx-text-fill: rgba(153, 156, 161, 1); 63 | } 64 | .gray-button:hover { 65 | -fx-background-color: rgba(144, 147, 153, 1); 66 | -fx-border-color: rgba(144, 147, 153, 1) rgba(144, 147, 153, 1) rgba(144, 147, 153, 1) rgba(144, 147, 153, 1); 67 | -fx-text-fill: rgba(255, 255, 255, 1); 68 | } 69 | .gray-button:pressed { 70 | -fx-background-color: rgba(115, 118, 122, 1); 71 | -fx-border-color: rgba(115, 118, 122, 1) rgba(115, 118, 122, 1) rgba(115, 118, 122, 1) rgba(115, 118, 122, 1); 72 | -fx-text-fill: rgba(255, 255, 255, 1); 73 | } 74 | .orange-button { 75 | -fx-font-size: 15px; 76 | -fx-cursor: HAND; 77 | -fx-background-color: rgba(253, 246, 236, 1); 78 | -fx-background-radius: 5px 5px 5px 5px; 79 | -fx-border-color: rgba(243, 209, 158, 1) rgba(243, 209, 158, 1) rgba(243, 209, 158, 1) rgba(243, 209, 158, 1); 80 | -fx-border-radius: 5px 5px 5px 5px; 81 | -fx-text-fill: rgba(234, 175, 86, 1); 82 | } 83 | .orange-button:hover { 84 | -fx-background-color: rgba(230, 162, 60, 1); 85 | -fx-border-color: rgba(230, 162, 60, 1) rgba(230, 162, 60, 1) rgba(230, 162, 60, 1) rgba(230, 162, 60, 1); 86 | -fx-text-fill: rgba(255, 255, 255, 1); 87 | } 88 | .orange-button:pressed { 89 | -fx-background-color: rgba(184, 130, 48, 1); 90 | -fx-border-color: rgba(184, 130, 48, 1) rgba(184, 130, 48, 1) rgba(184, 130, 48, 1) rgba(184, 130, 48, 1); 91 | -fx-text-fill: rgba(255, 255, 255, 1); 92 | } 93 | .red-button { 94 | -fx-font-size: 15px; 95 | -fx-cursor: HAND; 96 | -fx-background-color: rgba(254, 240, 240, 1); 97 | -fx-background-radius: 5px 5px 5px 5px; 98 | -fx-border-color: rgba(250, 182, 182, 1) rgba(250, 182, 182, 1) rgba(250, 182, 182, 1) rgba(250, 182, 182, 1); 99 | -fx-border-radius: 5px 5px 5px 5px; 100 | -fx-text-fill: rgba(245, 113, 113, 1); 101 | } 102 | .red-button:hover { 103 | -fx-background-color: rgba(245, 108, 108, 1); 104 | -fx-border-color: rgba(245, 108, 108, 1) rgba(245, 108, 108, 1) rgba(245, 108, 108, 1) rgba(245, 108, 108, 1); 105 | -fx-text-fill: rgba(255, 255, 255, 1); 106 | } 107 | .red-button:pressed { 108 | -fx-background-color: rgba(196, 86, 86, 1); 109 | -fx-border-color: rgba(196, 86, 86, 1) rgba(196, 86, 86, 1) rgba(196, 86, 86, 1) rgba(196, 86, 86, 1); 110 | -fx-text-fill: rgba(255, 255, 255, 1); 111 | } -------------------------------------------------------------------------------- /src/main/resources/cloud_css/ElementFX.bss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anivie/ElementFX/ab1768d96b4787d4c07f5655e88b864c61ab5690/src/main/resources/cloud_css/ElementFX.bss -------------------------------------------------------------------------------- /src/main/resources/cloud_css/ElementFX.css: -------------------------------------------------------------------------------- 1 | .button { 2 | -fx-background-color: rgba(236, 245, 255, 1); 3 | -fx-background-radius: 5px 5px 5px 5px; 4 | -fx-border-color: rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1) rgba(179, 216, 255, 1); 5 | -fx-border-radius: 5px 5px 5px 5px; 6 | -fx-text-fill: rgba(64, 158, 255, 1); 7 | -fx-font-size: 15px; 8 | -fx-padding: 5px 10px 5px 10px; 9 | -fx-cursor: HAND; 10 | } 11 | .button:hover { 12 | -fx-background-color: rgba(64, 158, 255, 1); 13 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 14 | -fx-text-fill: rgba(255, 255, 255, 1); 15 | } 16 | .button:pressed { 17 | -fx-background-color: rgba(58, 142, 230, 1); 18 | -fx-border-color: rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1) rgba(58, 142, 230, 1); 19 | -fx-text-fill: rgba(255, 255, 255, 1); 20 | } 21 | .text-field { 22 | -fx-border-radius: 5px 5px 5px 5px; 23 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 24 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 25 | -fx-accent: rgba(46, 188, 232, 1); 26 | -fx-background-color: rgba(255, 255, 255, 1); 27 | -fx-padding: 5px 3px 5px 3px; 28 | -fx-font-size: 14px; 29 | } 30 | .text-field:focused { 31 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 32 | } 33 | .list-view { 34 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 35 | -fx-border-width: 1px 1px 1px 1px; 36 | -fx-background-insets: 0px 0px 0px 0px; 37 | } 38 | .list-view .list-cell { 39 | -fx-background-color: rgba(255, 255, 255, 1); 40 | -fx-font-size: 15px; 41 | -fx-text-fill: rgba(117, 117, 117, 1); 42 | -fx-padding: 10px 0px 10px 5px; 43 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(235, 238, 245, 1) rgba(0, 0, 0, 0); 44 | } 45 | .list-view .list-cell:odd { 46 | -fx-background-color: rgba(255, 255, 255, 1); 47 | } 48 | .list-view .list-cell:hover { 49 | -fx-background-color: rgba(245, 247, 250, 1); 50 | } 51 | .list-view:focused .list-cell:selected { 52 | -fx-background-color: rgba(236, 245, 255, 1); 53 | -fx-text-fill: rgba(117, 117, 117, 1); 54 | } 55 | .list-view .scroll-bar .decrement-arrow { 56 | -fx-min-width: 0px; 57 | -fx-min-height: 0px; 58 | -fx-pref-width: 0px; 59 | -fx-pref-height: 0px; 60 | visibility: hidden; 61 | } 62 | .list-view .scroll-bar .increment-arrow { 63 | -fx-min-width: 0px; 64 | -fx-min-height: 0px; 65 | -fx-pref-width: 0px; 66 | -fx-pref-height: 0px; 67 | visibility: hidden; 68 | } 69 | .list-view .scroll-bar .decrement-button { 70 | -fx-min-width: 0px; 71 | -fx-min-height: 0px; 72 | -fx-pref-width: 0px; 73 | -fx-pref-height: 0px; 74 | visibility: hidden; 75 | } 76 | .list-view .scroll-bar .increment-button { 77 | -fx-min-width: 0px; 78 | -fx-min-height: 0px; 79 | -fx-pref-width: 0px; 80 | -fx-pref-height: 0px; 81 | visibility: hidden; 82 | } 83 | .list-view .scroll-bar:vertical { 84 | -fx-padding: 0px 0px 0px 0px; 85 | -fx-pref-width: 9px; 86 | -fx-background-color: rgba(255, 255, 255, 1); 87 | } 88 | .list-view .scroll-bar:vertical .thumb { 89 | -fx-background-color: rgba(221, 222, 224, 1); 90 | -fx-background-insets: 0px 0px 0px 0px; 91 | -fx-background-radius: 5px 5px 5px 5px; 92 | } 93 | .list-view .scroll-bar:vertical .thumb:pressed { 94 | -fx-background-color: rgba(199, 201, 204, 1); 95 | } 96 | .list-view:focused { 97 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 98 | } 99 | .text-area { 100 | -fx-border-radius: 5px 5px 5px 5px; 101 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 102 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 103 | -fx-accent: rgba(46, 188, 232, 1); 104 | -fx-background-color: rgba(255, 255, 255, 1); 105 | -fx-padding: 5px 3px 5px 3px; 106 | -fx-font-size: 17px; 107 | } 108 | .text-area .content { 109 | -fx-background-color: rgba(255, 255, 255, 1); 110 | } 111 | .text-area:focused { 112 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 113 | } 114 | .text-area .scroll-bar .decrement-arrow { 115 | -fx-min-width: 0px; 116 | -fx-min-height: 0px; 117 | -fx-pref-width: 0px; 118 | -fx-pref-height: 0px; 119 | visibility: hidden; 120 | } 121 | .text-area .scroll-bar .increment-arrow { 122 | -fx-min-width: 0px; 123 | -fx-min-height: 0px; 124 | -fx-pref-width: 0px; 125 | -fx-pref-height: 0px; 126 | visibility: hidden; 127 | } 128 | .text-area .scroll-bar .decrement-button { 129 | -fx-min-width: 0px; 130 | -fx-min-height: 0px; 131 | -fx-pref-width: 0px; 132 | -fx-pref-height: 0px; 133 | visibility: hidden; 134 | } 135 | .text-area .scroll-bar .increment-button { 136 | -fx-min-width: 0px; 137 | -fx-min-height: 0px; 138 | -fx-pref-width: 0px; 139 | -fx-pref-height: 0px; 140 | visibility: hidden; 141 | } 142 | .text-area .scroll-bar:vertical, .text-area .scroll-bar:horizontal { 143 | -fx-padding: 0px 0px 0px 0px; 144 | -fx-pref-width: 9px; 145 | -fx-background-color: rgba(255, 255, 255, 1); 146 | } 147 | .text-area .scroll-bar:vertical .thumb, .text-area .scroll-bar:horizontal .thumb { 148 | -fx-background-color: rgba(236, 245, 255, 1); 149 | -fx-background-insets: 0px 0px 0px 0px; 150 | -fx-background-radius: 0px 0px 0px 0px; 151 | } 152 | .text-area .scroll-bar:vertical .thumb:pressed, .text-area .scroll-bar:horizontal .thumb:pressed { 153 | -fx-background-color: rgba(124, 188, 255, 1); 154 | } 155 | .label { 156 | -fx-font-size: 13px; 157 | -fx-text-fill: rgba(117, 117, 117, 1); 158 | } 159 | .combo-box { 160 | -fx-background-color: rgba(255, 255, 255, 1); 161 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 162 | -fx-border-radius: 5px 5px 5px 5px; 163 | -fx-cursor: HAND; 164 | } 165 | .combo-box > .list-cell { 166 | -fx-font-size: 17px; 167 | } 168 | .combo-box > .arrow-button > .arrow { 169 | -fx-shape: "M460.8 755.2a26.112 26.112 0 0 1-18.944-8.704L97.792 363.008a25.6 25.6 0 1 1 37.888-34.304L460.8 691.2l326.656-363.008a25.6 25.6 0 0 1 37.888 34.304L481.28 747.008a26.112 26.112 0 0 1-20.48 8.192z"; 170 | -fx-background-color: rgba(220, 223, 230, 1); 171 | -fx-pref-height: 5px; 172 | -fx-pref-width: 10px; 173 | } 174 | .combo-box > .arrow-button:pressed .arrow { 175 | -fx-background-color: rgba(103, 106, 113, 1); 176 | } 177 | .combo-box > .combo-box-popup .list-view { 178 | -fx-border-color: rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1); 179 | } 180 | .combo-box > .combo-box-popup .list-view .list-cell { 181 | -fx-background-color: rgba(255, 255, 255, 1); 182 | -fx-text-fill: rgba(0, 0, 0, 0.5); 183 | -fx-font-size: 17px; 184 | -fx-cursor: HAND; 185 | } 186 | .combo-box > .combo-box-popup .list-view .list-cell:hover { 187 | -fx-background-color: rgba(245, 247, 250, 1); 188 | } 189 | .combo-box > .combo-box-popup .list-view .list-cell:selected { 190 | -fx-text-fill: rgba(64, 158, 254, 1); 191 | -fx-background-color: rgba(245, 247, 250, 1); 192 | } 193 | .combo-box > .combo-box-popup .scroll-bar .decrement-arrow { 194 | -fx-min-width: 0px; 195 | -fx-min-height: 0px; 196 | -fx-pref-width: 0px; 197 | -fx-pref-height: 0px; 198 | visibility: hidden; 199 | } 200 | .combo-box > .combo-box-popup .scroll-bar .increment-arrow { 201 | -fx-min-width: 0px; 202 | -fx-min-height: 0px; 203 | -fx-pref-width: 0px; 204 | -fx-pref-height: 0px; 205 | visibility: hidden; 206 | } 207 | .combo-box > .combo-box-popup .scroll-bar .decrement-button { 208 | -fx-min-width: 0px; 209 | -fx-min-height: 0px; 210 | -fx-pref-width: 0px; 211 | -fx-pref-height: 0px; 212 | visibility: hidden; 213 | } 214 | .combo-box > .combo-box-popup .scroll-bar .increment-button { 215 | -fx-min-width: 0px; 216 | -fx-min-height: 0px; 217 | -fx-pref-width: 0px; 218 | -fx-pref-height: 0px; 219 | visibility: hidden; 220 | } 221 | .combo-box > .combo-box-popup .scroll-bar:vertical { 222 | -fx-padding: 0px 0px 0px 0px; 223 | -fx-pref-width: 9px; 224 | -fx-background-color: rgba(255, 255, 255, 1); 225 | } 226 | .combo-box > .combo-box-popup .scroll-bar:vertical .thumb { 227 | -fx-background-color: rgba(236, 245, 255, 1); 228 | -fx-background-insets: 0px 0px 0px 0px; 229 | -fx-background-radius: 0px 0px 0px 0px; 230 | } 231 | .combo-box > .combo-box-popup .scroll-bar:vertical .thumb:pressed { 232 | -fx-background-color: rgba(124, 188, 255, 1); 233 | } 234 | .combo-box:focused { 235 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 236 | } 237 | .combo-box:editable > .text-field { 238 | -fx-border-width: 0px 0px 0px 0px; 239 | } 240 | .combo-box:editable > .arrow-button { 241 | -fx-background-color: rgba(255, 255, 255, 1); 242 | } 243 | .check-box { 244 | -fx-font-size: 14px; 245 | -fx-cursor: HAND; 246 | -fx-text-fill: rgba(117, 117, 117, 1); 247 | } 248 | .check-box .box { 249 | -fx-background-color: rgba(255, 255, 255, 1); 250 | -fx-background-radius: 3px 3px 3px 3px; 251 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 252 | -fx-border-radius: 3px 3px 3px 3px; 253 | } 254 | .check-box:selected .box { 255 | -fx-background-color: rgba(64, 158, 255, 1); 256 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 257 | } 258 | .check-box:selected .mark { 259 | -fx-background-color: rgba(255, 255, 255, 1); 260 | -fx-shape: "M299,396l2-2,3,3,6-6,2,2-8,8Z"; 261 | } 262 | .scroll-pane { 263 | -fx-background-color: rgba(0, 0, 0, 0); 264 | } 265 | .scroll-pane .viewport { 266 | -fx-background-color: rgba(0, 0, 0, 0); 267 | } 268 | .scroll-bar .decrement-arrow { 269 | -fx-min-width: 0px; 270 | -fx-min-height: 0px; 271 | -fx-pref-width: 0px; 272 | -fx-pref-height: 0px; 273 | visibility: hidden; 274 | } 275 | .scroll-bar .increment-arrow { 276 | -fx-min-width: 0px; 277 | -fx-min-height: 0px; 278 | -fx-pref-width: 0px; 279 | -fx-pref-height: 0px; 280 | visibility: hidden; 281 | } 282 | .scroll-bar .decrement-button { 283 | -fx-min-width: 0px; 284 | -fx-min-height: 0px; 285 | -fx-pref-width: 0px; 286 | -fx-pref-height: 0px; 287 | visibility: hidden; 288 | } 289 | .scroll-bar .increment-button { 290 | -fx-min-width: 0px; 291 | -fx-min-height: 0px; 292 | -fx-pref-width: 0px; 293 | -fx-pref-height: 0px; 294 | visibility: hidden; 295 | } 296 | .scroll-bar:vertical { 297 | -fx-padding: 0px 0px 0px 0px; 298 | -fx-pref-width: 9px; 299 | -fx-background-color: rgba(255, 255, 255, 1); 300 | } 301 | .scroll-bar:vertical .thumb { 302 | -fx-background-color: rgba(236, 245, 255, 1); 303 | -fx-background-insets: 0px 0px 0px 0px; 304 | -fx-background-radius: 0px 0px 0px 0px; 305 | } 306 | .scroll-bar:vertical .thumb:pressed { 307 | -fx-background-color: rgba(124, 188, 255, 1); 308 | } 309 | .scroll-bar:horizontal { 310 | -fx-padding: 0px 0px 0px 0px; 311 | -fx-pref-height: 9px; 312 | -fx-background-color: rgba(255, 255, 255, 1); 313 | } 314 | .scroll-bar:horizontal .thumb { 315 | -fx-background-color: rgba(236, 245, 255, 1); 316 | -fx-background-insets: 0px 0px 0px 0px; 317 | -fx-background-radius: 0px 0px 0px 0px; 318 | } 319 | .scroll-bar:horizontal .thumb:pressed { 320 | -fx-background-color: rgba(124, 188, 255, 1); 321 | } 322 | .date-picker { 323 | -fx-border-color: rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1); 324 | -fx-border-radius: 3px 3px 3px 3px; 325 | -fx-background-color: rgba(255, 255, 255, 1); 326 | } 327 | .date-picker .arrow-button { 328 | -fx-background-color: rgba(255, 255, 255, 1); 329 | -fx-cursor: HAND; 330 | } 331 | .date-picker .arrow-button:hover, .date-picker .arrow-button:focused { 332 | -fx-background-color: rgba(247, 247, 247, 1); 333 | } 334 | .date-picker .arrow-button > .arrow { 335 | -fx-shape: "M896 448H128v447.957333l477.738667 0.021334L896 895.957333V448z m0-42.666667V192.042667C896 192 768 192 768 192V149.333333h128.042667A42.666667 42.666667 0 0 1 938.666667 192.042667v703.914666A42.624 42.624 0 0 1 896.064 938.666667H127.936A42.666667 42.666667 0 0 1 85.333333 895.957333V192.042667C85.333333 168.469333 104.256 149.333333 127.957333 149.333333H256v42.666667l-128 0.042667V405.333333h768zM298.666667 85.333333h42.666666v170.666667h-42.666666V85.333333z m384 0h42.666666v170.666667h-42.666666V85.333333zM384 149.333333h256v42.666667H384V149.333333z"; 336 | } 337 | .date-picker .date-picker-popup > .month-year-pane { 338 | -fx-background-color: rgba(255, 255, 255, 1); 339 | -fx-border-width: 0px 0px 1px 0px; 340 | -fx-border-color: rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1) rgba(217, 217, 217, 1); 341 | } 342 | .date-picker .date-picker-popup > .month-year-pane .spinner > .button { 343 | -fx-cursor: HAND; 344 | -fx-background-color: rgba(255, 255, 255, 1); 345 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 346 | } 347 | .date-picker .date-picker-popup > .month-year-pane .spinner > .label { 348 | -fx-font-weight: 700; 349 | } 350 | .date-picker .date-picker-popup > .calendar-grid { 351 | -fx-background-color: rgba(255, 255, 255, 1); 352 | } 353 | .date-picker .date-picker-popup .date-cell { 354 | -fx-background-radius: 3px 3px 3px 3px; 355 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 356 | -fx-cursor: HAND; 357 | } 358 | .date-picker .date-picker-popup .date-cell:hover { 359 | -fx-background-color: rgba(245, 245, 245, 1); 360 | -fx-text-fill: rgba(0, 0, 0, 1); 361 | } 362 | .date-picker .date-picker-popup .date-cell:focused { 363 | -fx-background-color: rgba(24, 144, 255, 1); 364 | -fx-text-fill: rgba(255, 255, 255, 1); 365 | } 366 | .date-picker .date-picker-popup .next-month { 367 | -fx-background-color: rgba(0, 0, 0, 0); 368 | -fx-text-fill: rgba(217, 217, 217, 1); 369 | } 370 | .date-picker .date-picker-popup .next-month:hover { 371 | -fx-background-color: rgba(245, 245, 245, 1); 372 | -fx-text-fill: rgba(217, 217, 217, 1); 373 | } 374 | .date-picker .text-field { 375 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 376 | } 377 | .date-picker:focused { 378 | -fx-border-color: rgba(64, 169, 255, 1) rgba(64, 169, 255, 1) rgba(64, 169, 255, 1) rgba(64, 169, 255, 1); 379 | } 380 | .table-view { 381 | -fx-selection-bar: rgba(255, 255, 255, 1); 382 | -fx-selection-bar-non-focused: rgba(255, 255, 255, 1); 383 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 384 | -fx-border-width: 1px 1px 1px 1px; 385 | -fx-background-insets: 0px 0px 0px 0px; 386 | } 387 | .table-view .column-header { 388 | -fx-background-color: rgba(255, 255, 255, 1); 389 | -fx-padding: 10px 5px 5px 5px; 390 | -fx-border-color: rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1); 391 | -fx-border-width: 0px 0.5px 0px 0.5px; 392 | } 393 | .table-view .filler { 394 | -fx-background-color: rgba(255, 255, 255, 1); 395 | } 396 | .table-view .table-row-cell { 397 | -fx-border-color: rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1) rgba(235, 238, 245, 1); 398 | -fx-border-width: 0.5px 0px 0.5px 0px; 399 | } 400 | .table-view .table-row-cell:odd { 401 | -fx-background-color: rgba(250, 250, 250, 1); 402 | } 403 | .table-view .table-row-cell:hover { 404 | -fx-background-color: rgba(245, 247, 250, 1); 405 | } 406 | .table-view .table-row-cell:selected { 407 | -fx-background-color: rgba(236, 245, 255, 1); 408 | } 409 | .table-view .table-row-cell:selected .text { 410 | -fx-fill: rgba(0, 0, 0, 1); 411 | } 412 | .table-view .table-cell { 413 | -fx-padding: 10px 10px 10px 10px; 414 | -fx-font-size: 13px; 415 | } 416 | .table-view .table-cell:selected { 417 | -fx-text-fill: rgba(0, 0, 0, 1); 418 | } 419 | .table-view:focused { 420 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 421 | } 422 | .spinner { 423 | -fx-border-color: rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1); 424 | -fx-border-radius: 5px 5px 5px 5px; 425 | -fx-background-insets: 0px 0px 0px 0px; 426 | -fx-background-radius: 5px 5px 5px 5px; 427 | } 428 | .spinner .increment-arrow-button { 429 | -fx-cursor: HAND; 430 | -fx-background-color: rgba(245, 247, 250, 1); 431 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(220, 223, 230, 1) rgba(220, 223, 230, 1); 432 | } 433 | .spinner .increment-arrow-button:hover .increment-arrow { 434 | -fx-background-color: rgba(64, 158, 255, 1); 435 | } 436 | .spinner .increment-arrow-button .increment-arrow { 437 | -fx-shape: "M887.328477 617.152318 533.951458 267.007553c-0.512619-0.512619-1.216181-0.672598-1.759763-1.152533-0.127295-0.127295-0.159978-0.319957-0.287273-0.447252-12.576374-12.416396-32.831716-12.352748-45.280796 0.192662L136.511544 618.944765c-12.447359 12.576374-12.352748 32.800753 0.192662 45.248112 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415L509.792985 333.185325l332.480043 329.407768c6.239161 6.175514 14.368821 9.280473 22.527725 9.280473 8.255235 0 16.479505-3.168606 22.720387-9.471415C899.968499 649.85674 899.872168 629.599677 887.328477 617.152318z"; 438 | } 439 | .spinner .decrement-arrow-button { 440 | -fx-cursor: HAND; 441 | -fx-background-color: rgba(245, 247, 250, 1); 442 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(220, 223, 230, 1); 443 | } 444 | .spinner .decrement-arrow-button:hover .decrement-arrow { 445 | -fx-background-color: rgba(64, 158, 255, 1); 446 | } 447 | .spinner .decrement-arrow-button .decrement-arrow { 448 | -fx-shape: "M890.335385 330.911222c-12.576374-12.416396-32.800753-12.352748-45.248112 0.192662L517.248327 661.951458 184.831931 332.512727c-12.576374-12.447359-32.800753-12.352748-45.280796 0.192662-12.447359 12.576374-12.352748 32.831716 0.192662 45.280796l353.311652 350.112082c0.543583 0.543583 1.247144 0.672598 1.792447 1.183497 0.127295 0.127295 0.159978 0.287273 0.287273 0.416288 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415l350.112082-353.311652C902.975407 363.615643 902.880796 343.360301 890.335385 330.911222z"; 449 | } 450 | .spinner .text-field { 451 | -fx-border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1); 452 | } 453 | .spinner:hover { 454 | -fx-border-color: rgba(192, 196, 204, 1) rgba(192, 196, 204, 1) rgba(192, 196, 204, 1) rgba(192, 196, 204, 1); 455 | } 456 | .tab-pane { 457 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 458 | -fx-border-radius: 5px 5px 5px 5px; 459 | } 460 | .tab-pane .tab-header-background { 461 | -fx-background-color: rgba(0, 0, 0, 0); 462 | -fx-border-color: rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1); 463 | -fx-border-width: 0px 0px 3px 0px; 464 | } 465 | .tab-pane:top .tab-header-area { 466 | -fx-background-insets: 0px 0px 1px 0px; 467 | -fx-padding: 5px 2px 0px 0px; 468 | } 469 | .tab-pane .tab { 470 | -fx-padding: 5px 16px 5px 16px; 471 | -fx-cursor: HAND; 472 | -fx-background-color: rgba(0, 0, 0, 0); 473 | -fx-border-width: 0px 0px 3px 0px; 474 | -fx-border-color: rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1) rgba(228, 231, 237, 1); 475 | } 476 | .tab-pane .tab:selected { 477 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 478 | } 479 | .tab-pane .tab:selected .tab-label { 480 | -fx-text-fill: rgba(64, 158, 255, 1); 481 | } 482 | .tab-pane .tab:hover .tab-label { 483 | -fx-text-fill: rgba(64, 158, 255, 1); 484 | } 485 | .tab-pane .tab .tab-label { 486 | -fx-font-size: 15px; 487 | } 488 | .tab-pane .tab .focus-indicator { 489 | -fx-border-width: 0px 0px 0px 0px; 490 | } 491 | .pagination .left-arrow-button { 492 | -fx-background-color: rgba(240, 242, 245, 1); 493 | -fx-background-insets: 0px 0px 0px 0px; 494 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 495 | } 496 | .pagination .left-arrow-button:hover .left-arrow { 497 | -fx-background-color: rgba(64, 158, 255, 1); 498 | } 499 | .pagination .left-arrow-button .left-arrow { 500 | -fx-shape: "M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z"; 501 | } 502 | .pagination .right-arrow-button { 503 | -fx-background-color: rgba(240, 242, 245, 1); 504 | -fx-background-insets: 0px 0px 0px 0px; 505 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 506 | } 507 | .pagination .right-arrow-button:hover { 508 | -fx-padding: 0px 0px 0px 0px; 509 | } 510 | .pagination .right-arrow-button:hover .right-arrow { 511 | -fx-background-color: rgba(64, 158, 255, 1); 512 | } 513 | .pagination .right-arrow-button .right-arrow { 514 | -fx-shape: "M584.533333 512l-302.933333 302.933333L341.333333 874.666667l302.933334-302.933334 59.733333-59.733333-59.733333-59.733333L341.333333 145.066667 281.6 209.066667l302.933333 302.933333z"; 515 | } 516 | .pagination .number-button { 517 | -fx-background-color: rgba(240, 242, 245, 1); 518 | -fx-background-insets: 0px 0px 0px 0px; 519 | -fx-background-radius: 3px 3px 3px 3px; 520 | -fx-border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 521 | -fx-cursor: HAND; 522 | } 523 | .pagination .number-button:hover { 524 | -fx-text-fill: rgba(64, 158, 255, 1); 525 | } 526 | .pagination .number-button:selected { 527 | -fx-background-color: rgba(64, 158, 255, 1); 528 | -fx-text-fill: rgba(255, 255, 255, 1); 529 | } 530 | .context-menu { 531 | -fx-background-insets: 0px 0px 0px 0px; 532 | } 533 | .context-menu .menu-item:hover, .context-menu .menu-item:focused { 534 | -fx-background-color: rgba(238, 238, 238, 1); 535 | } 536 | .context-menu .menu-item .label { 537 | -fx-text-fill: rgba(0, 0, 0, 1); 538 | -fx-padding: 5px 100px 5px 5px; 539 | } 540 | .slider .track { 541 | -fx-background-color: rgba(228, 231, 237, 1); 542 | } 543 | .slider .thumb { 544 | -fx-background-color: rgba(255, 255, 255, 1); 545 | -fx-border-color: rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1) rgba(64, 158, 255, 1); 546 | -fx-border-radius: 1em 1em 1em 1em; 547 | -fx-cursor: HAND; 548 | } 549 | .slider .thumb:pressed { 550 | -fx-background-color: rgba(228, 231, 237, 1); 551 | } 552 | .progress-bar { 553 | -fx-background-color: rgba(255, 255, 255, 1); 554 | -fx-background-insets: 0px 0px 0px 0px; 555 | -fx-padding: 0px 0px 0px 0px; 556 | } 557 | .progress-bar .track { 558 | -fx-background-color: rgba(235, 238, 245, 1); 559 | } 560 | .progress-bar .bar { 561 | -fx-background-color: rgba(64, 158, 255, 1); 562 | } 563 | .tree-view { 564 | -fx-background-color: rgba(255, 255, 255, 1); 565 | } 566 | .tree-view .tree-cell { 567 | -fx-background-color: rgba(255, 255, 255, 1); 568 | -fx-text-fill: rgba(0, 0, 0, 1); 569 | -fx-cursor: HAND; 570 | } 571 | .tree-view .tree-cell:hover { 572 | -fx-background-color: rgba(245, 247, 250, 1); 573 | } 574 | .tree-view .tree-cell:selected { 575 | -fx-background-color: rgba(245, 247, 250, 1); 576 | } 577 | .tree-view .tree-cell:empty { 578 | -fx-background-color: rgba(0, 0, 0, 0); 579 | } 580 | .tree-view .tree-cell .tree-disclosure-node .arrow { 581 | -fx-background-color: rgba(168, 171, 178, 1); 582 | } -------------------------------------------------------------------------------- /src/main/resources/cloud_css/ElementTextField.bss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Anivie/ElementFX/ab1768d96b4787d4c07f5655e88b864c61ab5690/src/main/resources/cloud_css/ElementTextField.bss -------------------------------------------------------------------------------- /src/main/resources/cloud_css/ElementTextField.css: -------------------------------------------------------------------------------- 1 | .default-text-field { 2 | -fx-border-radius: 5px 5px 5px 5px; 3 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 4 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 5 | -fx-accent: rgba(46, 188, 232, 1); 6 | -fx-background-color: rgba(255, 255, 255, 1); 7 | -fx-padding: 5px 3px 5px 3px; 8 | -fx-font-size: 14px; 9 | } 10 | .default-text-field:focused { 11 | -fx-border-color: rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1) rgba(50, 150, 255, 1); 12 | } 13 | 14 | .green-text-field { 15 | -fx-border-radius: 5px 5px 5px 5px; 16 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 17 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 18 | -fx-accent: #95d475; 19 | -fx-background-color: rgba(255, 255, 255, 1); 20 | -fx-padding: 5px 3px 5px 3px; 21 | -fx-font-size: 14px; 22 | } 23 | .green-text-field:focused { 24 | -fx-border-color: #67C23A; 25 | } 26 | 27 | .orange-text-field { 28 | -fx-border-radius: 5px 5px 5px 5px; 29 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 30 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 31 | -fx-accent: #eebe77; 32 | -fx-background-color: rgba(255, 255, 255, 1); 33 | -fx-padding: 5px 3px 5px 3px; 34 | -fx-font-size: 14px; 35 | } 36 | .orange-text-field:focused { 37 | -fx-border-color: #E6A23C; 38 | } 39 | 40 | .gray-text-field { 41 | -fx-border-radius: 5px 5px 5px 5px; 42 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 43 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 44 | -fx-accent: #b1b3b8; 45 | -fx-background-color: rgba(255, 255, 255, 1); 46 | -fx-padding: 5px 3px 5px 3px; 47 | -fx-font-size: 14px; 48 | } 49 | .gray-text-field:focused { 50 | -fx-border-color: #909399; 51 | } 52 | 53 | .red-text-field { 54 | -fx-border-radius: 5px 5px 5px 5px; 55 | -fx-border-color: rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1) rgba(193, 197, 205, 1); 56 | -fx-border-width: 1.3px 1.3px 1.3px 1.3px; 57 | -fx-accent: #f89898; 58 | -fx-background-color: rgba(255, 255, 255, 1); 59 | -fx-padding: 5px 3px 5px 3px; 60 | -fx-font-size: 14px; 61 | } 62 | .red-text-field:focused { 63 | -fx-border-color: #F56C6C; 64 | } -------------------------------------------------------------------------------- /src/test/java/mains.java: -------------------------------------------------------------------------------- 1 | import ink.bluecloud.css.CssResources; 2 | import ink.bluecloud.css.ElementButton; 3 | import ink.bluecloud.css.ElementButtonKt; 4 | import javafx.application.Application; 5 | import javafx.scene.Scene; 6 | import javafx.scene.control.Button; 7 | import javafx.scene.control.TextField; 8 | import javafx.stage.Stage; 9 | 10 | class mains extends Application { 11 | @Override 12 | public void start(Stage primaryStage) throws Exception { 13 | Button button = new Button(); 14 | ElementButtonKt.theme(button, ElementButton.grayButton); 15 | Scene scene = new Scene(new TextField()); 16 | scene.getStylesheets().add(CssResources.globalCssFile); 17 | 18 | 19 | primaryStage.setScene(scene); 20 | primaryStage.setTitle("ElementForJavaFX"); 21 | primaryStage.show(); 22 | } 23 | } -------------------------------------------------------------------------------- /src/test/java/test.java: -------------------------------------------------------------------------------- 1 | import ink.bluecloud.css.CssResources; 2 | import javafx.application.Application; 3 | import javafx.scene.Scene; 4 | import javafx.scene.control.TextField; 5 | import javafx.stage.Stage; 6 | 7 | public class test { 8 | public static void main(String[] args) { 9 | Application.launch(mains.class); 10 | } 11 | } -------------------------------------------------------------------------------- /src/test/kotlin/BssCompiler.kt: -------------------------------------------------------------------------------- 1 | import javafx.css.Stylesheet 2 | import java.io.File 3 | 4 | fun main(args: Array) { 5 | /* 6 | args.forEach { 7 | val input = File(it) 8 | Stylesheet.convertToBinary(input, File(input.absolutePath.replace(".css",".bss"))) 9 | } 10 | */ 11 | 12 | File("C:\\Users\\anivi\\OneDrive\\桌面").listFiles().filter { it.extension == "css" }.forEach { 13 | val input = File(it.absolutePath) 14 | Stylesheet.convertToBinary(input, File(input.absolutePath.replace(".css",".bss"))) 15 | } 16 | } -------------------------------------------------------------------------------- /src/test/kotlin/devapp/CloudStyleGlobal.kt: -------------------------------------------------------------------------------- 1 | package devapp 2 | 3 | import javafx.scene.Cursor.HAND 4 | import javafx.scene.paint.Color.* 5 | import javafx.scene.paint.Paint 6 | import javafx.scene.text.FontWeight 7 | import tornadofx.* 8 | 9 | class CloudStyleGlobal:Stylesheet() { 10 | companion object{ 11 | val selectionBar by cssproperty>("-fx-selection-bar") 12 | val selectionBarNonFocused by cssproperty>("-fx-selection-bar-non-focused") 13 | } 14 | 15 | init { 16 | val blueBorderColor = box(c(193, 197, 205)) 17 | val blueBorderColorFocus = box(c(50, 150, 255)) 18 | 19 | button { 20 | backgroundColor += c(236,245,255) 21 | backgroundRadius += box(5.px) 22 | borderColor += box(c(179,216,255)) 23 | borderRadius += box(5.px) 24 | textFill = c(64,158,255) 25 | 26 | and(hover) { 27 | backgroundColor += c(64,158,255) 28 | borderColor += box(c(64,158,255)) 29 | textFill = WHITE 30 | } 31 | 32 | and(pressed) { 33 | backgroundColor += c(58,142,230) 34 | borderColor += box(c(58,142,230)) 35 | textFill = WHITE 36 | } 37 | 38 | fontSize = 15.px 39 | padding = box(5.px,10.px) 40 | cursor = HAND 41 | } 42 | 43 | textField { 44 | borderRadius += box(5.px) 45 | borderColor += blueBorderColor 46 | borderWidth += box(1.3.px) 47 | 48 | accentColor = c(46,188,232) 49 | 50 | backgroundColor += WHITE 51 | padding = box(5.px,3.px) 52 | fontSize = 14.px 53 | 54 | and(focused) { 55 | borderColor += blueBorderColorFocus 56 | } 57 | } 58 | 59 | listView { 60 | listCell { 61 | and(odd) { 62 | backgroundColor += WHITE 63 | } 64 | and(hover) { 65 | backgroundColor += c(245,247,250) 66 | } 67 | 68 | backgroundColor += WHITE 69 | 70 | fontSize = 15.px 71 | textFill = c(117,117,117) 72 | 73 | padding = box(10.px,0.px,10.px,5.px) 74 | borderColor += box(TRANSPARENT,TRANSPARENT,c(235,238,245),TRANSPARENT) 75 | } 76 | 77 | and(focused) { 78 | listCell { 79 | and(selected) { 80 | backgroundColor += c(236,245,255) 81 | textFill = c(117,117,117) 82 | } 83 | } 84 | } 85 | 86 | scrollBar { 87 | decrementArrow { 88 | minWidth = 0.px 89 | minHeight = 0.px 90 | prefWidth = 0.px 91 | prefHeight = 0.px 92 | visibility= FXVisibility.HIDDEN 93 | } 94 | incrementArrow{ 95 | minWidth = 0.px 96 | minHeight = 0.px 97 | prefWidth = 0.px 98 | prefHeight = 0.px 99 | visibility= FXVisibility.HIDDEN 100 | } 101 | decrementButton{ 102 | minWidth = 0.px 103 | minHeight = 0.px 104 | prefWidth = 0.px 105 | prefHeight = 0.px 106 | visibility= FXVisibility.HIDDEN 107 | } 108 | incrementButton{ 109 | minWidth = 0.px 110 | minHeight = 0.px 111 | prefWidth = 0.px 112 | prefHeight = 0.px 113 | visibility= FXVisibility.HIDDEN 114 | } 115 | 116 | and(vertical) { 117 | padding = box(0.px) 118 | prefWidth = 9.px 119 | backgroundColor += WHITE 120 | 121 | thumb{ 122 | backgroundColor += c(221,222,224) 123 | backgroundInsets += box(0.px) 124 | backgroundRadius += box(5.px) 125 | 126 | and(pressed) { 127 | backgroundColor += c(199,201,204) 128 | } 129 | } 130 | } 131 | } 132 | 133 | and(focused) { 134 | borderColor += blueBorderColorFocus 135 | } 136 | 137 | borderColor += blueBorderColor 138 | borderWidth += box(1.px) 139 | 140 | backgroundInsets += box(0.px) 141 | } 142 | 143 | textArea { 144 | content { 145 | backgroundColor += WHITE 146 | } 147 | borderRadius += box(5.px) 148 | borderColor += blueBorderColor 149 | borderWidth += box(1.3.px) 150 | 151 | accentColor = c("2EBCE8") 152 | 153 | backgroundColor += WHITE 154 | padding = box(5.px,3.px) 155 | fontSize = 17.px 156 | 157 | and(focused) { 158 | borderColor += blueBorderColorFocus 159 | } 160 | 161 | scrollBar { 162 | decrementArrow { 163 | minWidth = 0.px 164 | minHeight = 0.px 165 | prefWidth = 0.px 166 | prefHeight = 0.px 167 | visibility= FXVisibility.HIDDEN 168 | } 169 | incrementArrow{ 170 | minWidth = 0.px 171 | minHeight = 0.px 172 | prefWidth = 0.px 173 | prefHeight = 0.px 174 | visibility= FXVisibility.HIDDEN 175 | } 176 | decrementButton{ 177 | minWidth = 0.px 178 | minHeight = 0.px 179 | prefWidth = 0.px 180 | prefHeight = 0.px 181 | visibility= FXVisibility.HIDDEN 182 | } 183 | incrementButton{ 184 | minWidth = 0.px 185 | minHeight = 0.px 186 | prefWidth = 0.px 187 | prefHeight = 0.px 188 | visibility= FXVisibility.HIDDEN 189 | } 190 | 191 | and(vertical, horizontal) { 192 | padding = box(0.px) 193 | prefWidth = 9.px 194 | backgroundColor += WHITE 195 | 196 | thumb{ 197 | backgroundColor += c(236,245,255) 198 | backgroundInsets += box(0.px) 199 | backgroundRadius += box(0.px) 200 | 201 | and(pressed) { 202 | backgroundColor += c(124,188,255) 203 | } 204 | } 205 | } 206 | } 207 | } 208 | 209 | label { 210 | fontSize = 13.px 211 | textFill = c(117,117,117) 212 | } 213 | 214 | comboBox { 215 | backgroundColor += WHITE 216 | 217 | borderColor += blueBorderColor 218 | borderRadius += box(5.px) 219 | 220 | cursor = HAND 221 | 222 | child(listCell) { 223 | fontSize = 17.px 224 | } 225 | 226 | child(arrowButton) { 227 | child(arrow) { 228 | shape = "M460.8 755.2a26.112 26.112 0 0 1-18.944-8.704L97.792 363.008a25.6 25.6 0 1 1 37.888-34.304L460.8 691.2l326.656-363.008a25.6 25.6 0 0 1 37.888 34.304L481.28 747.008a26.112 26.112 0 0 1-20.48 8.192z" 229 | backgroundColor += c(220,223,230) 230 | prefHeight = 5.px 231 | prefWidth = 10.px 232 | } 233 | 234 | and(pressed) { 235 | arrow { 236 | backgroundColor += c(103, 106, 113) 237 | } 238 | } 239 | } 240 | 241 | child(comboBoxPopup) { 242 | listView { 243 | listCell { 244 | and(hover) { 245 | backgroundColor += c(245,247,250) 246 | } 247 | 248 | and(selected) { 249 | textFill = c(64,158,254) 250 | backgroundColor += c(245,247,250) 251 | } 252 | 253 | backgroundColor += WHITE 254 | textFill = c(0,0,0,0.5) 255 | fontSize = 17.px 256 | cursor = HAND 257 | } 258 | borderColor += box(c(228,231,237)) 259 | } 260 | 261 | scrollBar { 262 | decrementArrow { 263 | minWidth = 0.px 264 | minHeight = 0.px 265 | prefWidth = 0.px 266 | prefHeight = 0.px 267 | visibility= FXVisibility.HIDDEN 268 | } 269 | incrementArrow{ 270 | minWidth = 0.px 271 | minHeight = 0.px 272 | prefWidth = 0.px 273 | prefHeight = 0.px 274 | visibility= FXVisibility.HIDDEN 275 | } 276 | decrementButton{ 277 | minWidth = 0.px 278 | minHeight = 0.px 279 | prefWidth = 0.px 280 | prefHeight = 0.px 281 | visibility= FXVisibility.HIDDEN 282 | } 283 | incrementButton{ 284 | minWidth = 0.px 285 | minHeight = 0.px 286 | prefWidth = 0.px 287 | prefHeight = 0.px 288 | visibility= FXVisibility.HIDDEN 289 | } 290 | 291 | and(vertical) { 292 | padding = box(0.px) 293 | prefWidth = 9.px 294 | backgroundColor += WHITE 295 | 296 | thumb{ 297 | backgroundColor += c(236,245,255) 298 | backgroundInsets += box(0.px) 299 | backgroundRadius += box(0.px) 300 | 301 | and(pressed) { 302 | backgroundColor += c(124,188,255) 303 | } 304 | } 305 | } 306 | } 307 | } 308 | 309 | and(focused) { 310 | borderColor += blueBorderColorFocus 311 | } 312 | 313 | and(editable) { 314 | child(textField) { 315 | borderWidth += box(0.px) 316 | } 317 | 318 | child(arrowButton) { 319 | backgroundColor += WHITE 320 | } 321 | } 322 | } 323 | 324 | checkBox { 325 | box { 326 | backgroundColor += WHITE 327 | backgroundRadius += box(3.px) 328 | 329 | borderColor += blueBorderColor 330 | borderRadius += box(3.px) 331 | } 332 | 333 | and(selected) { 334 | box { 335 | backgroundColor += c(64,158,255) 336 | borderColor += blueBorderColorFocus 337 | } 338 | 339 | mark { 340 | backgroundColor += WHITE 341 | shape = "M299,396l2-2,3,3,6-6,2,2-8,8Z" 342 | } 343 | } 344 | fontSize = 14.px 345 | cursor = HAND 346 | textFill = c(117,117,117) 347 | } 348 | 349 | scrollPane { 350 | viewport { 351 | backgroundColor += TRANSPARENT 352 | } 353 | backgroundColor += TRANSPARENT 354 | } 355 | 356 | scrollBar { 357 | decrementArrow { 358 | minWidth = 0.px 359 | minHeight = 0.px 360 | prefWidth = 0.px 361 | prefHeight = 0.px 362 | visibility= FXVisibility.HIDDEN 363 | } 364 | incrementArrow{ 365 | minWidth = 0.px 366 | minHeight = 0.px 367 | prefWidth = 0.px 368 | prefHeight = 0.px 369 | visibility= FXVisibility.HIDDEN 370 | } 371 | decrementButton{ 372 | minWidth = 0.px 373 | minHeight = 0.px 374 | prefWidth = 0.px 375 | prefHeight = 0.px 376 | visibility= FXVisibility.HIDDEN 377 | } 378 | incrementButton{ 379 | minWidth = 0.px 380 | minHeight = 0.px 381 | prefWidth = 0.px 382 | prefHeight = 0.px 383 | visibility= FXVisibility.HIDDEN 384 | } 385 | 386 | and(vertical) { 387 | padding = box(0.px) 388 | prefWidth = 9.px 389 | backgroundColor += WHITE 390 | 391 | thumb{ 392 | backgroundColor += c(236,245,255) 393 | backgroundInsets += box(0.px) 394 | backgroundRadius += box(0.px) 395 | 396 | and(pressed) { 397 | backgroundColor += c(124,188,255) 398 | } 399 | } 400 | } 401 | and(horizontal) { 402 | padding = box(0.px) 403 | prefHeight = 9.px 404 | backgroundColor += WHITE 405 | 406 | thumb{ 407 | backgroundColor += c(236,245,255) 408 | backgroundInsets += box(0.px) 409 | backgroundRadius += box(0.px) 410 | 411 | and(pressed) { 412 | backgroundColor += c(124,188,255) 413 | } 414 | } 415 | } 416 | } 417 | 418 | datePicker { 419 | arrowButton { 420 | backgroundColor += WHITE 421 | cursor = HAND 422 | 423 | and(hover, focused) { 424 | backgroundColor += c(247, 247, 247) 425 | } 426 | 427 | child(arrow) { 428 | shape = "M896 448H128v447.957333l477.738667 0.021334L896 895.957333V448z m0-42.666667V192.042667C896 192 768 192 768 192V149.333333h128.042667A42.666667 42.666667 0 0 1 938.666667 192.042667v703.914666A42.624 42.624 0 0 1 896.064 938.666667H127.936A42.666667 42.666667 0 0 1 85.333333 895.957333V192.042667C85.333333 168.469333 104.256 149.333333 127.957333 149.333333H256v42.666667l-128 0.042667V405.333333h768zM298.666667 85.333333h42.666666v170.666667h-42.666666V85.333333z m384 0h42.666666v170.666667h-42.666666V85.333333zM384 149.333333h256v42.666667H384V149.333333z" 429 | } 430 | } 431 | 432 | datePickerPopup { 433 | child(monthYearPane) { 434 | spinner { 435 | child(button) { 436 | cursor = HAND 437 | backgroundColor += WHITE 438 | borderColor += box(TRANSPARENT) 439 | } 440 | 441 | child(label) { 442 | fontWeight = FontWeight.BOLD 443 | } 444 | } 445 | 446 | backgroundColor += WHITE 447 | borderWidth += box(0.px,0.px,1.px,0.px) 448 | borderColor += box(c(217,217,217)) 449 | } 450 | 451 | child(calendarGrid) { 452 | backgroundColor += WHITE 453 | } 454 | 455 | dateCell { 456 | and(hover) { 457 | backgroundColor += c(245,245,245) 458 | textFill = BLACK 459 | } 460 | and(focused) { 461 | backgroundColor += c(24,144,255) 462 | textFill = WHITE 463 | } 464 | 465 | backgroundRadius += box(3.px) 466 | borderColor += box(TRANSPARENT) 467 | cursor = HAND 468 | } 469 | 470 | nextMonth { 471 | and(hover) { 472 | backgroundColor += c(245,245,245) 473 | textFill = c(217,217,217) 474 | } 475 | 476 | backgroundColor += TRANSPARENT 477 | textFill = c(217,217,217) 478 | } 479 | } 480 | 481 | textField { 482 | borderColor += box(TRANSPARENT) 483 | } 484 | 485 | and(focused) { 486 | borderColor += box(c(64,169,255)) 487 | } 488 | 489 | borderColor += box(c(217,217,217)) 490 | borderRadius += box(3.px) 491 | 492 | backgroundColor += WHITE 493 | } 494 | 495 | tableView { 496 | columnHeader { 497 | backgroundColor += WHITE 498 | padding = box(10.px, 5.px, 5.px, 5.px) 499 | 500 | borderColor += box(c(235,238,245)) 501 | borderWidth += box(0.px, 0.5.px) 502 | } 503 | filler { 504 | backgroundColor += WHITE 505 | } 506 | 507 | tableRowCell { 508 | and(odd) { 509 | backgroundColor += c(250,250,250) 510 | } 511 | 512 | and(hover) { 513 | backgroundColor += c(245,247,250) 514 | } 515 | and(selected) { 516 | backgroundColor += c(236,245,255) 517 | text { 518 | fill = BLACK 519 | } 520 | } 521 | 522 | borderColor += box(c(235,238,245)) 523 | borderWidth += box(0.5.px, 0.px) 524 | } 525 | 526 | tableCell { 527 | and(selected) { 528 | textFill = BLACK 529 | } 530 | 531 | padding = box(10.px) 532 | fontSize = 13.px 533 | } 534 | 535 | selectionBar.value += WHITE 536 | selectionBarNonFocused.value += WHITE 537 | 538 | 539 | and(focused) { 540 | borderColor += blueBorderColorFocus 541 | } 542 | borderColor += blueBorderColor 543 | borderWidth += box(1.px) 544 | 545 | backgroundInsets += box(0.px) 546 | } 547 | 548 | spinner { 549 | incrementArrowButton { 550 | and(hover) { 551 | incrementArrow { 552 | backgroundColor += c(64,158,255) 553 | } 554 | } 555 | incrementArrow { 556 | shape = "M887.328477 617.152318 533.951458 267.007553c-0.512619-0.512619-1.216181-0.672598-1.759763-1.152533-0.127295-0.127295-0.159978-0.319957-0.287273-0.447252-12.576374-12.416396-32.831716-12.352748-45.280796 0.192662L136.511544 618.944765c-12.447359 12.576374-12.352748 32.800753 0.192662 45.248112 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415L509.792985 333.185325l332.480043 329.407768c6.239161 6.175514 14.368821 9.280473 22.527725 9.280473 8.255235 0 16.479505-3.168606 22.720387-9.471415C899.968499 649.85674 899.872168 629.599677 887.328477 617.152318z" 557 | } 558 | 559 | cursor = HAND 560 | backgroundColor += c(245,247,250) 561 | borderColor += box(TRANSPARENT, TRANSPARENT, c(220,223,230), c(220,223,230)) 562 | } 563 | 564 | decrementArrowButton { 565 | and(hover) { 566 | decrementArrow { 567 | backgroundColor += c(64,158,255) 568 | } 569 | } 570 | decrementArrow { 571 | shape = "M890.335385 330.911222c-12.576374-12.416396-32.800753-12.352748-45.248112 0.192662L517.248327 661.951458 184.831931 332.512727c-12.576374-12.447359-32.800753-12.352748-45.280796 0.192662-12.447359 12.576374-12.352748 32.831716 0.192662 45.280796l353.311652 350.112082c0.543583 0.543583 1.247144 0.672598 1.792447 1.183497 0.127295 0.127295 0.159978 0.287273 0.287273 0.416288 6.239161 6.175514 14.399785 9.280473 22.527725 9.280473 8.224271 0 16.479505-3.168606 22.720387-9.471415l350.112082-353.311652C902.975407 363.615643 902.880796 343.360301 890.335385 330.911222z" 572 | } 573 | 574 | cursor = HAND 575 | backgroundColor += c(245,247,250) 576 | borderColor += box(TRANSPARENT, TRANSPARENT, TRANSPARENT,c(220,223,230)) 577 | } 578 | 579 | textField { 580 | borderColor += box(WHITE) 581 | } 582 | 583 | 584 | borderColor += box(c(220,223,230)) 585 | borderRadius += box(5.px) 586 | 587 | backgroundInsets += box(0.px) 588 | backgroundRadius += box(5.px) 589 | 590 | and(hover) { 591 | borderColor += box(c(192,196,204)) 592 | } 593 | } 594 | 595 | tabPane { 596 | tabHeaderBackground { 597 | backgroundColor += TRANSPARENT 598 | borderColor += box(c(228,231,237)) 599 | borderWidth += box(0.px, 0.px, 3.px, 0.px) 600 | } 601 | 602 | and(top) { 603 | tabHeaderArea { 604 | backgroundInsets += box(0.px, 0.px, 1.px, 0.px) 605 | padding = box(5.px,2.px,0.px,0.px) 606 | } 607 | } 608 | 609 | tab { 610 | and(selected) { 611 | borderColor += box(c(64,158,255)) 612 | 613 | tabLabel { 614 | textFill = c(64,158,255) 615 | } 616 | } 617 | and(hover) { 618 | tabLabel { 619 | textFill = c(64,158,255) 620 | } 621 | } 622 | 623 | tabLabel { 624 | fontSize = 15.px 625 | } 626 | focusIndicator { 627 | borderWidth += box(0.px) 628 | } 629 | padding = box(5.0.px, 16.0.px) 630 | 631 | cursor = HAND 632 | 633 | backgroundColor += TRANSPARENT 634 | borderWidth += box(0.px, 0.px, 3.px, 0.px) 635 | borderColor += box(c(228,231,237)) 636 | } 637 | 638 | borderColor += blueBorderColor 639 | borderRadius += box(5.px) 640 | } 641 | 642 | pagination { 643 | leftArrowButton { 644 | and(hover) { 645 | leftArrow { 646 | backgroundColor += c(64, 158, 255) 647 | } 648 | } 649 | leftArrow { 650 | shape = "M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z" 651 | } 652 | 653 | backgroundColor += c(240, 242, 245) 654 | backgroundInsets += box(0.px) 655 | borderColor += box(TRANSPARENT) 656 | } 657 | 658 | rightArrowButton { 659 | and(hover) { 660 | rightArrow { 661 | backgroundColor += c(64, 158, 255) 662 | } 663 | padding = box(0.px) 664 | } 665 | rightArrow { 666 | shape = "M584.533333 512l-302.933333 302.933333L341.333333 874.666667l302.933334-302.933334 59.733333-59.733333-59.733333-59.733333L341.333333 145.066667 281.6 209.066667l302.933333 302.933333z" 667 | } 668 | 669 | backgroundColor += c(240, 242, 245) 670 | backgroundInsets += box(0.px) 671 | borderColor += box(TRANSPARENT) 672 | } 673 | 674 | numberButton { 675 | and(hover) { 676 | textFill = c(64,158,255) 677 | } 678 | 679 | and(selected) { 680 | backgroundColor += c(64,158,255) 681 | textFill = WHITE 682 | } 683 | backgroundColor += c(240, 242, 245) 684 | backgroundInsets += box(0.px) 685 | backgroundRadius += box(3.px) 686 | 687 | borderColor += box(TRANSPARENT) 688 | cursor = HAND 689 | } 690 | } 691 | 692 | contextMenu { 693 | backgroundInsets += box(0.px) 694 | 695 | menuItem { 696 | and(hover, focused) { 697 | backgroundColor += c(238,238,238) 698 | } 699 | 700 | label { 701 | textFill = BLACK 702 | padding = box(5.px,100.px,5.px,5.px) 703 | } 704 | } 705 | } 706 | 707 | slider { 708 | track { 709 | backgroundColor += c(228,231,237) 710 | } 711 | 712 | thumb { 713 | backgroundColor += WHITE 714 | borderColor += box(c(64,158,255)) 715 | borderRadius += box(1.em) 716 | cursor = HAND 717 | 718 | and(pressed) { 719 | backgroundColor += c(228,231,237) 720 | } 721 | } 722 | } 723 | 724 | progressBar { 725 | backgroundColor += WHITE 726 | backgroundInsets += box(0.px) 727 | padding = box(0.px) 728 | 729 | track { 730 | backgroundColor += c(235,238,245) 731 | } 732 | 733 | bar { 734 | backgroundColor += c(64,158,255) 735 | } 736 | } 737 | 738 | treeView { 739 | treeCell { 740 | and(hover) { 741 | backgroundColor += c(245,247,250) 742 | } 743 | and (selected) { 744 | backgroundColor += c(245,247,250) 745 | } 746 | and(empty) { 747 | backgroundColor += TRANSPARENT 748 | } 749 | 750 | treeDisclosureNode { 751 | arrow { 752 | backgroundColor += c(168,171,178) 753 | } 754 | } 755 | 756 | backgroundColor += WHITE 757 | textFill = BLACK 758 | cursor = HAND 759 | } 760 | 761 | backgroundColor += WHITE 762 | } 763 | } 764 | } -------------------------------------------------------------------------------- /src/test/kotlin/devapp/app.kt: -------------------------------------------------------------------------------- 1 | package devapp 2 | 3 | import devapp.treeview.treeview 4 | import javafx.application.Application 5 | import tornadofx.App 6 | import tornadofx.dumpStylesheets 7 | import tornadofx.reloadStylesheetsOnFocus 8 | import tornadofx.reloadViewsOnFocus 9 | 10 | class app:App(treeview::class) { 11 | init { 12 | reloadViewsOnFocus() 13 | reloadStylesheetsOnFocus() 14 | dumpStylesheets() 15 | } 16 | } 17 | 18 | fun main() { 19 | Application.launch(app::class.java) 20 | } -------------------------------------------------------------------------------- /src/test/kotlin/devapp/treeview/TreeClass.kt: -------------------------------------------------------------------------------- 1 | package devapp.treeview 2 | 3 | import javafx.scene.Cursor 4 | import javafx.scene.paint.Color 5 | import tornadofx.Stylesheet 6 | import tornadofx.c 7 | 8 | class TreeClass:Stylesheet() { 9 | init { 10 | treeView { 11 | treeCell { 12 | and(hover) { 13 | backgroundColor += c(245,247,250) 14 | } 15 | and (selected) { 16 | backgroundColor += c(245,247,250) 17 | } 18 | and(empty) { 19 | backgroundColor += Color.TRANSPARENT 20 | } 21 | 22 | treeDisclosureNode { 23 | arrow { 24 | backgroundColor += c(168,171,178) 25 | } 26 | } 27 | 28 | backgroundColor += Color.WHITE 29 | textFill = Color.BLACK 30 | cursor = Cursor.HAND 31 | } 32 | 33 | backgroundColor += Color.WHITE 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /src/test/kotlin/devapp/treeview/Treeview.kt: -------------------------------------------------------------------------------- 1 | package devapp.treeview 2 | 3 | import devapp.CloudStyleGlobal 4 | import javafx.util.StringConverter 5 | import tornadofx.* 6 | 7 | class treeview : View() { 8 | /* 9 | override val root = stackpane { 10 | val persons = listOf( 11 | Person("Mary Hanes", "Marketing"), 12 | Person("Steve Folley", "Customer Service"), 13 | Person("John Ramsy", "IT Help Desk"), 14 | Person("Erlick Foyes", "Customer Service"), 15 | Person("Erin James", "Marketing"), 16 | Person("Jacob Mays", "IT Help Desk"), 17 | Person("Larry Cable", "Customer Service") 18 | ) 19 | val departments = persons 20 | .map { 21 | it.department 22 | } 23 | .distinct() 24 | .map { 25 | Person(it, "") 26 | } 27 | 28 | treeview { 29 | // Create root item 30 | root = TreeItem(Person("Departments", "")) 31 | 32 | // Make sure the text in each TreeItem is the name of the Person 33 | cellFormat { text = it.name } 34 | 35 | // Generate items. Children of the root item will contain departments 36 | populate { parent -> 37 | if (parent == root) departments else persons.filter { it.department == parent.value.name } 38 | } 39 | } 40 | 41 | addStylesheet(TreeClass::class) 42 | addStylesheet(CloudStyleGlobal::class) 43 | } 44 | */ 45 | 46 | override val root = stackpane { 47 | combobox(values = listOf(Ports(21)).asObservable()) { 48 | converter = object : StringConverter() { 49 | override fun toString(`object`: Ports?): String { 50 | return `object`?.port.toString() 51 | } 52 | 53 | override fun fromString(string: String?): Ports { 54 | return Ports(21) 55 | } 56 | } 57 | 58 | isEditable = true 59 | } 60 | addStylesheet(CloudStyleGlobal::class) 61 | } 62 | 63 | data class Ports(val port: Int) 64 | 65 | } -------------------------------------------------------------------------------- /src/test/kotlin/testapp/Demo.kt: -------------------------------------------------------------------------------- 1 | package testapp 2 | 3 | import ink.bluecloud.css.ElementButton 4 | import ink.bluecloud.css.ElementTextField 5 | import ink.bluecloud.css.theme 6 | import ink.bluecloud.css.themes 7 | import javafx.application.Application 8 | import javafx.geometry.Insets 9 | import javafx.geometry.Pos 10 | import javafx.scene.Scene 11 | import javafx.scene.control.* 12 | import javafx.scene.layout.BorderPane 13 | import javafx.scene.layout.GridPane 14 | import javafx.scene.layout.HBox 15 | import javafx.scene.layout.Priority 16 | import javafx.scene.layout.VBox 17 | import javafx.stage.Stage 18 | 19 | class Demo:Application() { 20 | override fun start(primaryStage: Stage) { 21 | val loginButton = Button("Login").apply { 22 | maxWidth = Double.MAX_VALUE 23 | theme(ElementButton.greenButton) 24 | } 25 | val regButton = Button("Register").apply { 26 | theme(ElementButton.orangeButton) 27 | } 28 | 29 | val root = TabPane().apply { 30 | tabs += Tab("PersonalUser").apply { 31 | content = BorderPane().apply { 32 | bottom = HBox().apply { 33 | children += Button("Help?") 34 | alignment = Pos.CENTER_RIGHT 35 | padding = Insets(0.0,10.0,10.0,0.0) 36 | } 37 | 38 | center = VBox(10.0).apply { 39 | children += GridPane().apply { 40 | add(Label("Name:"),0,0) 41 | add(TextField(),1,0) 42 | 43 | add(Label("Password:"),0,1) 44 | add(TextField(),1,1) 45 | // add(Button("Help?"),2,1) 46 | 47 | 48 | add(CheckBox("Remember Password?").apply { 49 | isSelected = true 50 | },1,2) 51 | 52 | 53 | alignment = Pos.CENTER 54 | vgap = 10.0 55 | hgap = 5.0 56 | } 57 | 58 | children += HBox(5.0).apply { 59 | children += loginButton 60 | children += regButton 61 | 62 | HBox.setHgrow(loginButton,Priority.ALWAYS) 63 | HBox.setHgrow(regButton,Priority.NEVER) 64 | 65 | padding = Insets(0.0,30.0,0.0,30.0) 66 | alignment = Pos.CENTER 67 | } 68 | 69 | alignment = Pos.CENTER 70 | } 71 | } 72 | } 73 | 74 | tabs += Tab("BusinessUsers").apply { 75 | content = VBox(5.0).apply { 76 | children += TextField().apply { 77 | theme(ElementTextField.greenTextField) 78 | } 79 | children += TextField().apply { 80 | theme(ElementTextField.defaultTextField) 81 | } 82 | children += TextField().apply { 83 | theme(ElementTextField.grayTextField) 84 | } 85 | children += TextField().apply { 86 | theme(ElementTextField.orangeTextField) 87 | } 88 | children += TextField().apply { 89 | theme(ElementTextField.redTextField) 90 | } 91 | 92 | padding = Insets(10.0,10.0,0.0,10.0) 93 | } 94 | } 95 | 96 | tabClosingPolicy = TabPane.TabClosingPolicy.UNAVAILABLE 97 | style = "-fx-background-color:white" 98 | } 99 | 100 | primaryStage.init(root) 101 | } 102 | 103 | private fun Stage.init(root: TabPane) { 104 | scene = Scene(root,400.0,400.0).apply { 105 | themes { 106 | // it += globalCssFile 107 | // it += buttonCssFile 108 | } 109 | } 110 | title = "Element" 111 | show() 112 | } 113 | } 114 | 115 | fun main() { 116 | Application.launch(Demo::class.java) 117 | } 118 | --------------------------------------------------------------------------------