JavaFX: Add native looks.

* Add style sheets for a native look of JavaFX-based views such that the
  UI does not break too much in comparison to the SWT-based views.
* Windows 8/10, Windows 7, and MacOS X are supported. For Linux (GTK/QT)
  no style sheets have been found at the creation time of this commit.
* The style sheets for the Windows 7 and the MacOS look are bundled in
  jars that define additional controls for animation etc. These libs
  are not usable with the SWT/JavaFX integration layer since it is
  impossible to load the control classes defined in the CSS file. The
  reason for this resides in the special classloader architecture of the
  JavaFX/SWT integration where it is impossible to inject classes into
  the classloader hierarchy without modifying e(fx)clipse plugins, or
  writing custom classloader/wrapper plugins for osgi.
* The licenses of the imported CSS files are 2- and 3-clause BSD
  licenses which are placed in the folders containing the CSS files.

Issue-Ref: 3209
Issue-Url: https://af3-developer.fortiss.org/issues/3209


Signed-off-by: Alexander Diewald <diewald@fortiss.org>

org.fortiss.tooling.common.ui/.classpath

@@ -4,6 +4,7 @@
 	<classpathentry kind="con" path="org.eclipse.pde.core.requiredPlugins"/>
 	<classpathentry kind="src" path="src"/>
 	<classpathentry kind="src" path="external-src"/>
+	<classpathentry kind="src" path="res"/>
 	<classpathentry exported="true" kind="lib" path="lib/org.conqat.ide.commons.gef.jar"/>
 	<classpathentry exported="true" kind="lib" path="lib/org.conqat.ide.commons.ui.jar"/>
 	<classpathentry exported="true" kind="lib" path="lib/jgrapht-jdk1.6_src.jar"/>

org.fortiss.tooling.common.ui/build.properties

@@ -5,9 +5,11 @@ bin.includes = .,\
                lib/org.conqat.ide.commons.gef.jar,\
                lib/org.conqat.ide.commons.ui.jar,\
                lib/jgrapht-jdk1.6_src.jar,\
-               lib/swt-grouplayout.jar
+               lib/swt-grouplayout.jar,\
+               res/
 jars.compile.order = .
 source.. = src/,\
+           res/,\
            external-src/
 output.. = build/
 src.includes = lib/

org.fortiss.tooling.common.ui/res/aerofx/License.txt

+Copyright (c) 2014, Matthias Meidinger
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The views and conclusions contained in the software and documentation are those
+of the authors and should not be interpreted as representing official policies,
+either expressed or implied, of the FreeBSD Project.
\ No newline at end of file

org.fortiss.tooling.common.ui/res/aerofx/win7.css

+/*
+ * Copyright (c) 2014, Matthias Meidinger
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * The views and conclusions contained in the software and documentation are those
+ * of the authors and should not be interpreted as representing official policies,
+ * either expressed or implied, of the FreeBSD Project.
+ */
+
+.root{
+    -fx-text-base-color: black;
+    -fx-text-fill: -fx-text-base-color;
+
+    /* This is the default Windows-font */
+    -fx-font-family: "Segoe UI Semibold";
+    -fx-font-size: 10.5;
+
+    /* For debugging purposes*/
+    -fx-background-color: rgb(240,240,240);
+
+    -fx-disabled-opacity: 0.6;
+}
+
+.text{
+    -fx-font-smoothing-type: lcd;
+}
+
+/* disabled controls */
+.button:disabled,
+.toggle-button:disabled,
+.radio-button:disabled,
+.check-box:disabled,
+.hyperlink:disabled,
+.menu-button:disabled,
+.split-menu-button:disabled,
+.slider:disabled,
+.scroll-pane:disabled,
+.progress-bar:disabled,
+.progress-indicator:disabled,
+.text-input:disabled,
+.choice-box:disabled,
+.combo-box-base:disabled,
+.list-view:disabled,
+.tree-view:disabled,
+.table-view:disabled,
+.tree-table-view:disabled,
+.tab-pane:disabled,
+.tab-pane > .tab-header-area > .headers-region > .tab:disabled {
+    -fx-opacity: -fx-disabled-opacity;
+}
+
+/* mnemonics */
+.button:show-mnemonics > .mnemonic-underline,
+.toggle-button:show-mnemonics > .mnemonic-underline,
+.radio-button:show-mnemonics > .mnemonic-underline,
+.check-box:show-mnemonics > .mnemonic-underline,
+.hyperlink:show-mnemonics > .mnemonic-underline,
+.split-menu-button:show-mnemonics > .mnemonic-underline,
+.menu-button:show-mnemonics > .mnemonic-underline {
+    -fx-stroke: -fx-text-base-color;
+}
+
+.mnemonic-underline{
+    -fx-stroke: transparent;
+}
+
+
+
+
+/********************************************
+*                                           *
+*       Button & Default-Button             *
+*                                           *
+*********************************************/
+.button-focus-border{
+    -fx-stroke: black;
+    -fx-stroke-dash-array: 1;
+    -fx-stroke-width: 1px;
+    -fx-stroke-line-cap: butt;
+    -fx-stroke-type: inside;
+}
+
+.button, .toggle-button{
+    -fx-alignment: center;
+    -fx-background-color:
+        rgb(112,112,112),
+        linear-gradient(rgb(252,252,252), rgb(252,252,252)),
+        linear-gradient(rgb(242,242,242) 0%, rgb(235,235,235) 49%, rgb(221,221,221) 50%, rgb(207,207,207) 100%);
+    -fx-background-insets: 0,1,2;
+    -fx-background-radius: 3,2,1;
+    -fx-padding: 4 4 3 3;
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.button:hover{
+    -fx-background-color:
+        rgb(60,127,177),
+        linear-gradient(rgb(250,253,254),rgb(250,253,254)),
+        linear-gradient(rgb(234, 246, 253) 0%, rgb(217, 240, 252) 49%, rgb(190, 230, 253) 50%, rgb(167, 217, 245) 100%);
+}
+
+.button:default{
+    -fx-background-color:
+        rgb(60,127,177),
+        linear-gradient(rgb(47,212,255), rgb(47,212,255)),
+        linear-gradient(rgb(234,246,252) 0%, rgb(228,243,252) 49%, rgb(202,233,250) 50%, rgb(182,222,245) 100%);
+}
+
+.button:armed, .toggle-button:armed{
+    -fx-background-color:
+        rgb(44,98,139),
+        linear-gradient(rgb(158,176,186), rgb(158,176,186)),
+        linear-gradient(rgb(229,244,252) 0%, rgb(196,229,246) 49%, rgb(152,209,239) 50%, rgb(104,179,219) 100%);
+}
+
+
+/********************************************
+*                                           *
+*       TextField                           *
+*                                           *
+*********************************************/
+.text-field{
+   /* If four values are used, the sides are top, right, bottom, left. */
+   -fx-border-color: rgb(170,170,178) rgb(218,220,230) rgb(226,231.0,239) rgb(226,224,234);
+   -fx-background-color: rgb(255,255,255);
+   -fx-padding: 0.0em;
+   -fx-cursor: text;
+   -fx-effect: null;
+   -fx-pref-height: 20px;
+}
+.text-field:focused{
+    -fx-border-color: rgb(61,123,173) rgb(164,201,227) rgb(183,217,237) rgb(181,207,231);
+    /* Remove the blue glow on focus */
+    -fx-background-insets: 0, 0, 0, 0;
+    -fx-effect: null;
+}
+
+
+/********************************************
+*                                           *
+*       CheckBox                            *
+*                                           *
+*********************************************/
+.check-box-focus-border{
+    -fx-stroke: black;
+    -fx-stroke-dash-array: 1;
+    -fx-stroke-width: 1px;
+    -fx-stroke-line-cap: butt;
+    -fx-stroke-type: inside;
+}
+/* TODO: Style the mark by using a fx-shape */
+.check-box{
+    -fx-label-padding: 0.0em 0.0em 0.0em 0.05em;
+}
+
+.check-box > .box{
+    -fx-padding: 0.7em;
+    -fx-background-insets: 0, 2, 4;
+    -fx-border-color: rgb(140.0, 141.0, 141.0);
+    -fx-background-color:
+        rgb(244,244,244),
+        linear-gradient(to bottom right, rgb(174,179,185), rgb(233,233,234)),
+        linear-gradient(to bottom right, rgb(203,207,213), rgb(246,246,246));
+    -fx-scale-x: 0.75;
+    -fx-scale-y: 0.75;
+}
+
+.check-box:hover > .box {
+    -fx-border-color: rgb(85,134,163);
+    -fx-background-color:
+        rgb(222,249,250),
+        linear-gradient(to bottom right, rgb(121,198,249), rgb(207,236,253)),
+        linear-gradient(to bottom right, rgb(177,223,253), rgb(231,247,254));
+}
+
+.check-box:pressed > .box{
+    -fx-border-color: rgb(44,98,139);
+        -fx-background-color:
+            rgb(194,228,246),
+            linear-gradient(to bottom right, rgb(94,182,247), rgb(194,228,246)),
+            linear-gradient(to bottom right, rgb(157,213,252), rgb(224,244,254));
+}
+
+.check-box:disabled > .box{
+    -fx-background-color:
+        linear-gradient(rgb(239.0, 239.0, 239.0), rgb(250.0, 250.0, 250.0));
+}
+
+.check-box:selected > .box{
+    -fx-padding: -0.208333em 0 0.208333em 0.23em;
+    -fx-padding: -0.208333em 0.083333em 0.208333em 0.23em;
+    -fx-padding: 0.166667em 0.166667em 0.25em 0.25em;
+}
+
+.check-box:selected > .box > .mark{
+    -fx-padding: 0.416667em 0.416667em 0.5em 0.5em;
+    -fx-shape: "M 5.1806931,9.0173267 7.5232674,12.170792 11.307426,4.4673266 10.091089,3.9717821 7.2980199,9.6029703 6.1267328,7.9361386 z";
+    -fx-background-color: rgb(76,97,152);
+}
+
+.check-box:selected:hover > .box > .mark{
+    -fx-background-color: rgb(4,34,113);
+}
+
+.check-box:selected:pressed > .box > .mark{
+    -fx-background-color: rgb(44,83,148);
+}
+
+
+/********************************************
+*                                           *
+*       RadioButton                         *
+*                                           *
+*********************************************/
+.radio-button-focus-border{
+    -fx-stroke: black;
+    -fx-stroke-dash-array: 1;
+    -fx-stroke-width: 1px;
+    -fx-stroke-line-cap: butt;
+    -fx-stroke-type: inside;
+}
+
+.radio-button{
+    -fx-label-padding: 0.0em 0.0em 0.0em 0.35em;
+}
+
+.radio-button > .text{
+    -fx-translate-y: 1px;
+}
+
+.radio-button > .radio{
+    -fx-pref-height: 12px;
+    -fx-pref-width: 12px;
+    -fx-background-color:
+        rgb(147,148,148),
+        rgb(239,239,239),
+        linear-gradient(to bottom right, rgb(179,184,189), rgb(235,235,235)),
+        linear-gradient(to bottom right, rgb(203,207,213), rgb(241,241,241));
+    -fx-background-insets: 0,1,2,3;
+    -fx-background-radius: 1em;
+    -fx-padding: 0.333333em;
+}
+
+.radio-button:hover > .radio{
+    -fx-background-color:
+        rgb(93,140,167),
+        rgb(216,244,246),
+        linear-gradient(to bottom right, rgb(128,202,249), rgb(210,238,253)),
+        linear-gradient(to bottom right, rgb(177,223,253), rgb(223,243,254));
+    -fx-background-insets: 0,1,2,3;
+}
+
+.radio-button:pressed > .radio{
+    -fx-background-color:
+        rgb(58,103,135),
+        rgb(198,239,241),
+        linear-gradient(to bottom right, rgb(90,179,246), rgb(190,230,252)),
+        linear-gradient(to bottom right, rgb(147,208,252), rgb(208,237,253));
+    -fx-background-insets: 0,1,2,3;
+    -fx-background-radius: 1.0em;
+    -fx-padding: 0.333333em;
+}
+
+.radio-button:selected > .radio > .dot{
+    -fx-padding: 0.333333em;
+    -fx-pref-height: 4px;
+    -fx-pref-width: 4px;
+    -fx-background-color:
+        rgb(20,47,68),
+        rgb(11,130,199),
+        linear-gradient(to bottom right, rgb(255,255,255) 20%, rgb(11,130,199) 60%);
+    -fx-background-insets: 0,1,2;
+    -fx-background-radius: 1.0em;
+}
+
+.radio-button:selected:hover > .radio > .dot{
+   -fx-background-color:
+        rgb(20,47,68),
+        rgb(11,130,199),
+        linear-gradient(to bottom right, rgb(255,255,255) 20%, rgb(13,160,243) 60%);
+}
+
+.radio-button:selected:pressed > .radio > .dot{
+   -fx-background-color:
+        rgb(20,47,68),
+        rgb(11,130,199),
+    linear-gradient(to bottom right, rgb(255,255,255) 20%, rgb(7,84,131) 60%);
+}
+
+.radio-button:show-mnemonics .mnemonic-underline{
+    -fx-stroke: -fx-text-base-color;
+}
+
+/********************************************
+*                                           *
+*       TabPane                             *
+*                                           *
+*********************************************/
+.tab-pane{
+    -fx-tab-min-height: 1.8333em; /* 22 */
+    -fx-tab-max-height: 1.8333em; /* 22 */
+}
+
+.tab-pane:top > .tab-content-area {
+    -fx-background-color: rgb(255,255,255);
+    -fx-border-color: transparent rgb(137,140,149) rgb(137,140,149) rgb(137,140,149);
+}
+
+.tab-pane:top > .tab-header-area {
+    -fx-padding: 0.416667em 0.166667em 0.0em 0.416667em; /* 5 2 0 5 */
+    -fx-padding: 0.416667em 5 0.0em 0.416667em; /* 5 2 0 5 */
+}
+
+.tab-pane > *.tab-header-area > .headers-region {
+    -fx-translate-x: -5px;
+}
+
+.tab-pane > *.tab-header-area > *.tab-header-background{
+    -fx-background-color: rgb(240,240,240);
+    -fx-border-color: transparent transparent rgb(137,140,149) transparent ;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab{
+    -fx-padding: 0.083333em 0.5em 0.083333em 0.5em;
+    -fx-border-color: rgb(137,140,149);
+    -fx-background-color:
+        rgb(255,255,255),
+        linear-gradient(to bottom, rgb(242,242,242) 0%, rgb(235,235,235) 49%, rgb(221,221,221) 50%, rgb(207,207,207) 100%);
+    -fx-background-insets: 0,2 2 0 2;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab:top{
+    -fx-border-color: rgb(244,0,0), rgb(137,140,149), rgb(137,140,149), rgb(137,140,149);
+    -fx-border-width: 1 1 1 1;
+    -fx-pref-height: 1.8em;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab:hover{
+    -fx-border-color: rgb(60,127,177);
+    -fx-background-color:
+        rgb(255,255,255),
+        linear-gradient(to bottom, rgb(234,246,253) 0%, rgb(217,240,252) 49%, rgb(190,230,253) 50%, rgb(167,217,245) 100%);
+    -fx-background-insets: 0,2 2 0 2;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab:selected{
+    -fx-border-color: rgb(137,140,149);
+    -fx-border-width: 1 1 0 1;
+    -fx-background-color: rgb(255,255,255);
+    -fx-pref-height: 2em;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab:selected .focus-indicator{
+    -fx-border-width: 0;
+    -fx-border-color: transparent;
+}
+
+.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
+    -fx-alignment: CENTER;
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.tab-pane.floating > .tab-content-area {
+    -fx-background-color: -fx-outer-border, -fx-background;
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 3, 2;
+    -fx-padding: 2;
+}
+
+/********************************************
+*                                           *
+*       Hyperlink                           *
+*                                           *
+*********************************************/
+.hyperlink{
+    -fx-text-fill: rgb(0,102,204);
+}
+
+.hyperlink:focused{
+    -fx-border-color: black;
+    -fx-border-style: dotted;
+}
+
+
+/********************************************
+*                                           *
+*       GroupBox                            *
+*                                           *
+*********************************************/
+.group-box-border{
+    -fx-stroke: rgb(213,223,229);
+    -fx-stroke-dash-array: 1 0;
+    -fx-stroke-width: 1px;
+    -fx-stroke-line-cap: butt;
+    -fx-stroke-type: inside;
+    -fx-arc-height: 6px;
+    -fx-arc-width: 6px;
+}
+
+
+/********************************************
+*                                           *
+*       TableView                           *
+*                                           *
+*********************************************/
+.table-view{
+    -fx-border-color: rgb(130,135,144);
+    -fx-background-color: white;
+}
+
+.table-view > column-header-background > nested-column-header > .arrow{
+    -fx-shape:null;
+}
+
+.table-view > .column-header-background > .nested-column-header > .column-header{
+    -fx-pref-height: 23px;
+    -fx-border-color: rgb(213,213,213);
+    -fx-border-width: 0 1 1 0;
+    -fx-background-color:
+        linear-gradient(to bottom, rgb(255,255,255) 0%, rgb(255,255,255) 40%, rgb(247,248,250) 41%, rgb(241,242,244) 100%);
+}
+
+.table-view > .column-header-background > .nested-column-header > .column-header:hover{
+    -fx-border-color: transparent rgb(136,203,235) rgb(147,201,227) rgb(105,187,227);
+    -fx-border-width: 0 1 1 1;
+    -fx-background-color:
+        linear-gradient(to bottom, rgb(227,247,255) 0%, rgb(227,247,255) 40%, rgb(189,237,255) 41%, rgb(183,231,251) 100%);
+}
+
+.table-view > .column-header-background > .nested-column-header > .column-header:pressed{
+    -fx-translate-x: 1px;
+    -fx-translate-y: 1px;
+    -fx-border-color: rgb(134,163,178) rgb(79,144,174) rgb(147,201,227) rgb(80,145,175);
+    -fx-border-width: 1;
+    -fx-background-color:
+        linear-gradient(to bottom, rgb(188,228,249) 0%, rgb(188,228,249) 40%, rgb(141,214,247) 41%, rgb(138,209,245) 100%);
+}
+
+.table-view > .column-header-background > .nested-column-header > .column-header > .label{
+    -fx-translate-x: 4px;
+    -fx-alignment: center-left;
+}
+
+
+/********************************************
+*                                           *
+*       Separator                           *
+*                                           *
+*********************************************/
+.separator:horizontal{
+    -fx-border-color:rgb(160,160,160);
+    -fx-border-width: 0.5;
+}
\ No newline at end of file

org.fortiss.tooling.common.ui/res/aquafx/License.txt

+Copyright (c) 2013, Claudine Zillmann All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted
+provided that the following conditions are met:
+* Redistributions of source code must retain the above copyright notice, this list of conditions
+  and the following disclaimer.
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions
+  and the following disclaimer in the documentation and/or other materials provided with the
+  distribution.
+* Neither the name of AquaFX, the website aquafx-project.com, nor the names of its contributors may
+  be used to endorse or promote products derived from this software without specific prior written
+  permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
+IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL CLAUDINE ZILLMANN BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

org.fortiss.tooling.common.ui/res/aquafx/aquafx-air.css

+.root{
+    -dark-wind: rgb(248.0, 248.0, 248.0);
+    -dark-wind-transparent: rgb(255.0, 255.0, 255.0, 0.8);
+    -dark-wind-armed: rgb(200.0, 200.0, 200.0);
+    -light-wind: rgb(255.0, 255.0, 255.0);
+    -light-wind-armed: rgb(248.0, 248.0, 248.0 );
+    -white-wind: rgb(250.0, 250.0, 250.0);
+    -light-white-wind: rgb(255.0, 255.0, 255.0);
+    -light-white-wind-armed: rgb(248.0, 248.0, 248.0);
+    -lighter-wind: rgb(255.0, 255.0, 255.0);
+    -lighter-white-wind: rgb(255.0, 255.0, 255.0);
+    
+    -fx-selected-row: -dark-wind-armed;
+    
+    -main-gradient-armed: linear-gradient(-light-wind-armed 15.0%, -dark-wind-armed 50.0%,
+       -dark-wind-armed 50.0%, -light-white-wind-armed 100.0%);
+            
+    -main-gradient: linear-gradient(-light-wind 15.0%, -dark-wind 50.0%,
+        -dark-wind 50.0%, -light-white-wind 100.0%);
+        
+    -fx-cell-hover-color: -light-wind;
+}
+
+.hyperlink {
+    -fx-text-fill: -dark-wind;
+}
+
+.button,
+.toggle-button,
+.radio-button,
+.choice-box,
+.slider,
+.text-field,
+.password-field,
+.text-area,
+.menu-button,
+.split-menu-button,
+.combo-box,
+.color-picker,
+.check-box {
+    -fx-aqua-inner-focus-color: -dark-wind-transparent;
+    -fx-aqua-outer-focus-color: -dark-wind;
+}
+
+.button{
+    -fx-aqua-start-color-1: -light-wind;
+    -fx-aqua-start-color-2: -dark-wind;
+    -fx-aqua-start-color-3: -dark-wind;
+    -fx-aqua-start-color-4: -light-white-wind;
+    -fx-aqua-end-color-1: -lighter-wind;
+    -fx-aqua-end-color-2: -light-white-wind;
+    -fx-aqua-end-color-3: -light-white-wind;
+    -fx-aqua-end-color-4: -lighter-white-wind;
+    -fx-aqua-armed-style:"linear-gradient(-light-wind 0.0%, -dark-wind-armed 100.0% ),
+        -main-gradient,
+        radial-gradient(focus-angle 180.0deg, focus-distance 95.0%, center 1.0% 50.0%,
+        radius 50.0%, -dark-wind, transparent),
+        radial-gradient(focus-angle 0.0deg, focus-distance 95.0%, center 100.0% 50.0%,
+        radius 50.0%, -dark-wind, transparent)";
+}
+
+.button:armed, .button:default:armed, .toggle-button:armed, .toggle-button:selected:armed{
+    -fx-background-color:
+        linear-gradient(-light-wind 0.0%, -dark-wind-armed 100.0% ),
+        -main-gradient,
+        radial-gradient(focus-angle 180.0deg, focus-distance 95.0%, center 1.0% 50.0%,
+        radius 50.0%, -dark-wind, transparent),
+        radial-gradient(focus-angle 0.0deg, focus-distance 95.0%, center 100.0% 50.0%,
+        radius 50.0%, -dark-wind, transparent);
+}
+
+.check-box:selected > .box,
+.check-box:indeterminate > .box,
+.radio-button:selected > .radio {
+    -fx-background-color: -main-gradient;
+}
+
+.check-box:selected:armed > .box,
+.radio-button:selected:armed > .radio {
+    -fx-background-color: -main-gradient-armed;
+}
+
+.titled-pane:focused  > .title > .arrow-button > .arrow  {
+    -fx-effect: dropshadow(one-pass-box , -dark-wind, 6.5, 0.8 , 0.0, 0.0);
+}
+
+
+/* Draws focus border around tableview */
+.table-view:focused,
+.tree-table-view:focused,
+.tree-view:focused,
+.list-view:focused  {
+    -fx-effect: dropshadow(one-pass-box , -dark-wind-transparent, 8.0, 0.8 , 0.0, 0.0);
+}
+
+.table-row-cell:odd,
+.tree-table-row-cell:odd {
+    -fx-background-color: -dark-wind;
+}
+
+.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected, 
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
+.table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected:hover,
+.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, 
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover {
+    -fx-background-color: -fx-selected-row;
+}
+
+/* When the list-cell is selected and focused */
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected,
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient( -light-white-wind, -dark-wind-armed),
+     linear-gradient(-light-white-wind, -dark-wind);
+    -fx-text-fill: black;
+}
+
+/* When the ListView is _not_ focused, we show alternate selection colors */
+.list-cell:filled:selected:focused,
+.list-cell:filled:selected {
+    -fx-background-color: linear-gradient(-light-white-wind-armed, -dark-wind-armed),
+     linear-gradient(-light-white-wind-armed, -dark-wind-armed);
+    -fx-text-fill: black;
+}
+
+.list-view:horizontal:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient(to right, -light-white-wind, -dark-wind-armed),
+        linear-gradient(to right, -light-white-wind, -dark-wind);
+    -fx-text-fill: black;
+}
+
+.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient(to right, -light-white-wind-armed, -dark-wind-armed),
+     linear-gradient(to right, -light-white-wind-armed, -dark-wind-armed);
+    -fx-text-fill: black;
+}
+
+.pagination > .pagination-control > .control-box > .bullet-button:selected {   
+    -fx-background-color: -main-gradient;
+}
+
+.progress-indicator > .determinate-indicator > .progress {
+    -fx-background-color:
+       rgb(208.0, 208.0, 208.0),
+       radial-gradient(center 50.0% 50.0%, radius 50.0%, -dark-wind, -white-wind);
+}
+
+.progress-indicator > .determinate-indicator > .tick {
+    -fx-background-color: rgb(208.0, 208.0, 208.0), black;
+}
+
+.progress-bar {
+    -fx-aqua-determinate-image: "progress_wind.png";
+}
+
+.progress-bar:indeterminate  {
+      -fx-aqua-indeterminate-color:-dark-wind;      
+}

org.fortiss.tooling.common.ui/res/aquafx/aquafx-earth.css

+.root{
+    -dark-green: rgb(69.0, 199.0, 73.0);
+    -dark-green-transparent: rgb(69.0, 199.0, 73.0, 0.8);
+    -dark-green-armed: rgb(69.0, 154.0, 73.0);
+    -light-green: rgb(180.0, 235.0, 145.0);
+    -light-green-armed: rgb(160.0, 196.0, 139.0 );
+    -white-green: rgb(148.0, 212.0, 112.0);
+    -light-white-green: rgb(184.0, 233.0, 154.0);
+    -light-white-green-armed: rgb(163.0, 196.0, 143.0);
+    -lighter-green: rgb(219, 255, 190);
+    -lighter-white-green: rgb(206, 231, 190);
+    
+    -fx-selected-row: -dark-green;
+    
+    -main-gradient-armed: linear-gradient(-light-green-armed 15.0%, -dark-green-armed 50.0%,
+       -dark-green-armed 50.0%, -light-white-green-armed 100.0%);
+            
+    -main-gradient: linear-gradient(-light-green 15.0%, -dark-green 50.0%,
+        -dark-green 50.0%, -light-white-green 100.0%);
+        
+    -fx-cell-hover-color: -light-green;
+}
+
+.hyperlink {
+    -fx-text-fill: -dark-green;
+}
+
+.button,
+.toggle-button,
+.radio-button,
+.choice-box,
+.slider,
+.text-field,
+.password-field,
+.text-area,
+.menu-button,
+.split-menu-button,
+.combo-box,
+.color-picker,
+.check-box {
+    -fx-aqua-inner-focus-color: -dark-green-transparent;
+    -fx-aqua-outer-focus-color: -dark-green;
+}
+
+.button{
+    -fx-aqua-start-color-1: -light-green;
+    -fx-aqua-start-color-2: -dark-green;
+    -fx-aqua-start-color-3: -dark-green;
+    -fx-aqua-start-color-4: -light-white-green;
+    -fx-aqua-end-color-1: -lighter-green;
+    -fx-aqua-end-color-2: -light-white-green;
+    -fx-aqua-end-color-3: -light-white-green;
+    -fx-aqua-end-color-4: -lighter-white-green;
+    -fx-aqua-armed-style:"linear-gradient(-light-green 0.0%, -dark-green-armed 100.0% ),
+        -main-gradient,
+        radial-gradient(focus-angle 180.0deg, focus-distance 95.0%, center 1.0% 50.0%,
+        radius 50.0%, -dark-green, transparent),
+        radial-gradient(focus-angle 0.0deg, focus-distance 95.0%, center 100.0% 50.0%,
+        radius 50.0%, -dark-green, transparent)";
+}
+
+.button:armed, .button:default:armed, .toggle-button:armed, .toggle-button:selected:armed{
+    -fx-background-color:
+        linear-gradient(-light-green 0.0%, -dark-green-armed 100.0% ),
+        -main-gradient,
+        radial-gradient(focus-angle 180.0deg, focus-distance 95.0%, center 1.0% 50.0%,
+        radius 50.0%, -dark-green, transparent),
+        radial-gradient(focus-angle 0.0deg, focus-distance 95.0%, center 100.0% 50.0%,
+        radius 50.0%, -dark-green, transparent);
+}
+
+.check-box:selected > .box,
+.check-box:indeterminate > .box,
+.radio-button:selected > .radio {
+    -fx-background-color: -main-gradient;
+}
+
+.check-box:selected:armed > .box,
+.radio-button:selected:armed > .radio {
+    -fx-background-color: -main-gradient-armed;
+}
+
+.titled-pane:focused  > .title > .arrow-button > .arrow  {
+    -fx-effect: dropshadow(one-pass-box , -dark-green, 6.5, 0.8 , 0.0, 0.0);
+}
+
+
+/* Draws focus border around tableview */
+.table-view:focused,
+.tree-table-view:focused,
+.tree-view:focused,
+.list-view:focused  {
+    -fx-effect: dropshadow(one-pass-box , -dark-green-transparent, 8.0, 0.8 , 0.0, 0.0);
+}
+
+.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected, 
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
+.table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected:hover,
+.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, 
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover {
+    -fx-background-color: -fx-selected-row;
+}
+
+/* When the list-cell is selected and focused */
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected,
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient( -light-white-green, -dark-green-armed),
+     linear-gradient(-light-white-green, -dark-green);
+}
+
+/* When the ListView is _not_ focused, we show alternate selection colors */
+.list-cell:filled:selected:focused,
+.list-cell:filled:selected {
+    -fx-background-color: linear-gradient(-light-white-green-armed, -dark-green-armed),
+     linear-gradient(-light-white-green-armed, -dark-green-armed);
+}
+
+.list-view:horizontal:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient(to right, -light-white-green, -dark-green-armed),
+        linear-gradient(to right, -light-white-green, -dark-green);
+}
+
+.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient(to right, -light-white-green-armed, -dark-green-armed),
+     linear-gradient(to right, -light-white-green-armed, -dark-green-armed);
+}
+
+.pagination > .pagination-control > .control-box > .bullet-button:selected {   
+    -fx-background-color: -main-gradient;
+}
+
+.progress-indicator > .determinate-indicator > .progress {
+    -fx-background-color:
+       rgb(208.0, 208.0, 208.0),
+       radial-gradient(center 50.0% 50.0%, radius 50.0%, -dark-green, -white-green);
+}
+
+.progress-bar {
+    -fx-aqua-determinate-image: "progress_earth.png";
+}
+
+.progress-bar:indeterminate  {
+      -fx-aqua-indeterminate-color:-dark-green;      
+}

org.fortiss.tooling.common.ui/res/aquafx/aquafx-fire.css

+.root{
+    -dark-red: rgb(226.0, 61.0, 56.0);
+    -dark-red-transparent: rgb(226.0, 61.0, 56.0, 0.8);
+    -dark-red-armed: rgb(165.0, 64.0, 59.0);
+    -light-red: rgb(251.0, 207.0, 202.0);
+    -light-red-armed: rgb(187.0, 156.0, 152.0 );
+    -orange-red: rgb(226.0, 90.0, 56.0);
+    -light-orange-red: rgb(251.0, 177.0, 175.0);
+    -light-orange-red-armed: rgb(222.0, 175.0, 174.0);
+    -lighter-red: rgb(251, 231, 228);
+    -lighter-orange-red: rgb(250, 216, 216);
+    
+    -fx-selected-row: -dark-red;
+    
+    -main-gradient-armed: linear-gradient(-light-red-armed 15.0%, -dark-red-armed 50.0%,
+       -dark-red-armed 50.0%, -light-orange-red-armed 100.0%);
+            
+    -main-gradient: linear-gradient(-light-red 15.0%, -dark-red 50.0%,
+        -dark-red 50.0%, -light-orange-red 100.0%);
+        
+    -fx-cell-hover-color: -light-red;
+}
+
+.hyperlink {
+    -fx-text-fill: -dark-red;
+}
+
+.button,
+.toggle-button,
+.radio-button,
+.choice-box,
+.slider,
+.text-field,
+.password-field,
+.text-area,
+.menu-button,
+.split-menu-button,
+.combo-box,
+.color-picker,
+.check-box {
+    -fx-aqua-inner-focus-color: -dark-red-transparent;
+    -fx-aqua-outer-focus-color: -dark-red;
+}
+
+.button{
+    -fx-aqua-start-color-1: -light-red;
+    -fx-aqua-start-color-2: -dark-red;
+    -fx-aqua-start-color-3: -dark-red;
+    -fx-aqua-start-color-4: -light-orange-red;
+    -fx-aqua-end-color-1: -lighter-red;
+    -fx-aqua-end-color-2: -light-orange-red;
+    -fx-aqua-end-color-3: -light-orange-red;
+    -fx-aqua-end-color-4: -lighter-orange-red;
+    -fx-aqua-armed-style:"linear-gradient(-light-red 0.0%, -dark-red-armed 100.0% ),
+        -main-gradient,
+        radial-gradient(focus-angle 180.0deg, focus-distance 95.0%, center 1.0% 50.0%,
+        radius 50.0%, -dark-red, transparent),
+        radial-gradient(focus-angle 0.0deg, focus-distance 95.0%, center 100.0% 50.0%,
+        radius 50.0%, -dark-red, transparent)";
+}
+
+.button:armed, .button:default:armed, .toggle-button:armed, .toggle-button:selected:armed{
+    -fx-background-color:
+        linear-gradient(-light-red 0.0%, -dark-red-armed 100.0% ),
+        -main-gradient,
+        radial-gradient(focus-angle 180.0deg, focus-distance 95.0%, center 1.0% 50.0%,
+        radius 50.0%, -dark-red, transparent),
+        radial-gradient(focus-angle 0.0deg, focus-distance 95.0%, center 100.0% 50.0%,
+        radius 50.0%, -dark-red, transparent);
+}
+
+.check-box:selected > .box,
+.check-box:indeterminate > .box,
+.radio-button:selected > .radio {
+    -fx-background-color: -main-gradient;
+}
+
+.check-box:selected:armed > .box,
+.radio-button:selected:armed > .radio {
+    -fx-background-color: -main-gradient-armed;
+}
+
+.titled-pane:focused  > .title > .arrow-button > .arrow  {
+    -fx-effect: dropshadow(one-pass-box , -dark-red, 6.5, 0.8 , 0.0, 0.0);
+}
+
+
+/* Draws focus border around tableview */
+.table-view:focused,
+.tree-table-view:focused,
+.tree-view:focused,
+.list-view:focused  {
+    -fx-effect: dropshadow(one-pass-box , -dark-red-transparent, 8.0, 0.8 , 0.0, 0.0);
+}
+
+.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected, 
+.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
+.table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:focused:selected:hover,
+.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, 
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected:hover,
+.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:focused:selected:hover {
+    -fx-background-color: -fx-selected-row;
+}
+
+/* When the list-cell is selected and focused */
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected,
+.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient( -light-orange-red, -dark-red-armed),
+     linear-gradient(-light-orange-red, -dark-red);
+}
+
+/* When the ListView is _not_ focused, we show alternate selection colors */
+.list-cell:filled:selected:focused,
+.list-cell:filled:selected {
+    -fx-background-color: linear-gradient(-light-orange-red-armed, -dark-red-armed),
+     linear-gradient(-light-orange-red-armed, -dark-red-armed);
+}
+
+.list-view:horizontal:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient(to right, -light-orange-red, -dark-red-armed),
+        linear-gradient(to right, -light-orange-red, -dark-red);
+}
+
+.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
+    -fx-background-color: linear-gradient(to right, -light-orange-red-armed, -dark-red-armed),
+     linear-gradient(to right, -light-orange-red-armed, -dark-red-armed);
+}
+
+.pagination > .pagination-control > .control-box > .bullet-button:selected {   
+    -fx-background-color: -main-gradient;
+}
+
+.progress-indicator > .determinate-indicator > .progress {
+    -fx-background-color:
+       rgb(208.0, 208.0, 208.0),
+       radial-gradient(center 50.0% 50.0%, radius 50.0%, -dark-red, -orange-red);
+}
+
+.progress-bar {
+    -fx-aqua-determinate-image: "progress_fire.png";
+}
+
+.progress-bar:indeterminate  {
+      -fx-aqua-indeterminate-color:-dark-red;      
+}

org.fortiss.tooling.common.ui/res/jfxtras/License.txt

+Copyright (c) 2011-2018, JFXtras
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of the JFXtras project nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file

org.fortiss.tooling.common.ui/src/org/fortiss/tooling/common/ui/javafx/.ratings

-AF3FXViewPart.java b6a5e5efc2b7bb6f7a62eb478f697ec459a0cfb3 GREEN
+AF3FXViewPart.java 9f63bcde312d81dca05514e0269aee9a5bd5e2a2 YELLOW

org.fortiss.tooling.common.ui/src/org/fortiss/tooling/common/ui/javafx/AF3FXViewPart.java

@@ -16,15 +16,17 @@
 package org.fortiss.tooling.common.ui.javafx;
 
 import java.io.IOException;
-
-import org.eclipse.fx.ui.workbench3.FXViewPart;
-import org.eclipse.swt.SWT;
-import org.eclipse.swt.widgets.Composite;
+import java.net.URL;
 
 import javafx.application.Platform;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
-import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.Pane;
+
+import org.apache.commons.lang3.SystemUtils;
+import org.eclipse.fx.ui.workbench3.FXViewPart;
+import org.eclipse.swt.SWT;
+import org.eclipse.swt.widgets.Composite;
 
 /**
  * Base class to create eclipse (SWT-based) views using JavaFX GUI elements. This class requires
@@ -37,11 +39,11 @@ import javafx.scene.layout.BorderPane;
  * class for non-removal.
  */
 public abstract class AF3FXViewPart extends FXViewPart { // NO_UCD
-	/** Holds the relative path to the CSS file defining the Applications appearance. */
-	private final static String CSSLOCATION = "/application.css";
-
 	/** For later use, if we need to define different styles. */
-	private final String cssLocation;
+	private String cssLocation;
+
+	/** Flag that indicates if a custom style sheet has been applied. */
+	private boolean isCustomStyleSheetApplied;
 
 	/**
 	 * Holds the relative location of the FXML JavaXML files. Roots are the source folders of the
@@ -59,15 +61,12 @@ public abstract class AF3FXViewPart extends FXViewPart { // NO_UCD
 	 *            Stub class that defines the FXML file defining the layout and controller
 	 * @param fXMLLocation
 	 *            location of the fXML file relative to the source (resource) folders.
-	 * @param cssLocation
-	 *            style sheet file path for the appearance settings relative to the source
-	 *            (resource) folders.
 	 * @throws Exception
 	 *             if the given FXML file path is not given or if it cannot be found in any of the
 	 *             source (resource) folders.
 	 */
-	private AF3FXViewPart(Class<? extends AF3FXViewPart> viewerClass, String fXMLLocation,
-			String cssLocation) throws Exception {
+	public AF3FXViewPart(Class<? extends AF3FXViewPart> viewerClass, String fXMLLocation)
+			throws Exception {
 		if(fXMLLocation == null) {
 			throw new Exception(
 					"The location of the FXML file defining the gui elements was not given," +
@@ -78,7 +77,6 @@ public abstract class AF3FXViewPart extends FXViewPart { // NO_UCD
 		Platform.setImplicitExit(false);
 		this.viewerClass = viewerClass;
 		this.fXMLLocation = fXMLLocation;
-		this.cssLocation = cssLocation;
 	}
 
 	/**
@@ -88,13 +86,17 @@ public abstract class AF3FXViewPart extends FXViewPart { // NO_UCD
 	 *            Stub class that defines the FXML file defining the layout and controller
 	 * @param fXMLLocation
 	 *            location of the fXML file relative to the source (resource) folders.
+	 * @param cssLocation
+	 *            style sheet file path for the appearance settings relative to the source
+	 *            (resource) folders.
 	 * @throws Exception
 	 *             if the given FXML file path is not given or if it cannot be found in any of the
 	 *             source (resource) folders.
 	 */
-	public AF3FXViewPart(Class<? extends AF3FXViewPart> viewerClass, String fXMLLocation)
-			throws Exception {
-		this(viewerClass, fXMLLocation, CSSLOCATION);
+	public AF3FXViewPart(Class<? extends AF3FXViewPart> viewerClass, String fXMLLocation,
+			String cssLocation) throws Exception {
+		this(viewerClass, fXMLLocation);
+		this.cssLocation = cssLocation;
 	}
 
 	/** {@inheritDoc} */
@@ -104,8 +106,9 @@ public abstract class AF3FXViewPart extends FXViewPart { // NO_UCD
 			if(!"0".equals(System.getenv("SWT_GTK3"))) {
 				org.eclipse.swt.widgets.Label errorLabel =
 						new org.eclipse.swt.widgets.Label(parent, SWT.BOLD);
-				errorLabel.setText("Cannot show JavaFX view without setting SWT_GTK3 to '0'.\n" +
-						"Please relaunch Eclipse using a terminal and 'SWT_GTK3=0 ./eclipse' command.");
+				errorLabel
+						.setText("Cannot show JavaFX view without setting SWT_GTK3 to '0'.\n"
+								+ "Please relaunch Eclipse using a terminal and 'SWT_GTK3=0 ./eclipse' command.");
 				return;
 			}
 		}
@@ -115,17 +118,23 @@ public abstract class AF3FXViewPart extends FXViewPart { // NO_UCD
 	/** {@inheritDoc} */
 	@Override
 	protected Scene createFxScene() {
-		BorderPane root = null;
+		Pane root = null;
 		FXMLLoader loader = new FXMLLoader();
 		loader.setClassLoader(viewerClass.getClassLoader());
 		loader.setLocation(viewerClass.getResource(fXMLLocation));
 		try {
-			root = (BorderPane)loader.load();
+			root = (Pane)loader.load();
 		} catch(IOException e) {
 			throw new RuntimeException("Cannot load the resource located at " + fXMLLocation, e);
 		}
+
+		if(cssLocation != null) {
+			isCustomStyleSheetApplied = applyStyleSheet(root, getClass(), cssLocation);
+		}
+		if(!isCustomStyleSheetApplied) {
+			setNativeLook(root);
+		}
 		Scene scene = new Scene(root, 400, 400);
-		scene.getStylesheets().add(getClass().getResource(cssLocation).toExternalForm());
 		return scene;
 	}
 
@@ -134,4 +143,48 @@ public abstract class AF3FXViewPart extends FXViewPart { // NO_UCD
 	protected void setFxFocus() {
 		// Not needed.
 	}
+
+	/**
+	 * Sets the native look of the target platform to break the UI. Most of the UI code is based on
+	 * SWT which uses a platform native look. Currently, Windows 8&10, Windows 7, and MacOS X native
+	 * looks are supported.
+	 */
+	private void setNativeLook(Pane pane) {
+		if(SystemUtils.IS_OS_WINDOWS_10 || SystemUtils.IS_OS_WINDOWS_8) {
+			applyStyleSheet(pane, AF3FXViewPart.class, "/jfxtras/JMetroLightTheme.css");
+		} else if(SystemUtils.IS_OS_WINDOWS) {
+			applyStyleSheet(pane, AF3FXViewPart.class, "/aerofx/win7.css");
+		} else if(SystemUtils.IS_OS_MAC_OSX) {
+			applyStyleSheet(pane, AF3FXViewPart.class, "/aquafx/aquafx.css");
+		} else if(SystemUtils.IS_OS_LINUX) {
+			// At the time of writing this method, no CSS is known that mimics GTK or QT. Thus, use
+			// the default modena look.
+		}
+	}
+
+	/**
+	 * Applies the style sheet from the given location to the given {@link Pane}. The class loader
+	 * of the plugin containing the style sheet must be given such that this resource can be loaded.
+	 * For instance the class loader of the common.ui plugin must be given for the native looks.
+	 * 
+	 * @param pane
+	 *            {@link Pane} to which the style sheet shall be applied.
+	 * @param viewerClass
+	 *            Class containing the style sheet resource.
+	 * @param styleSheetLocation
+	 *            relative location of the style sheet to its containing resource folder (aka source
+	 *            folder).
+	 * @return whether the style sheet could be applied.
+	 */
+	private boolean applyStyleSheet(Pane pane, Class<?> viewerClass, String styleSheetLocation) {
+		if(viewerClass == null || styleSheetLocation == null) {
+			return false;
+		}
+		URL cssURL = viewerClass.getResource(styleSheetLocation);
+		if(cssURL != null) {
+			pane.getStylesheets().add(cssURL.toExternalForm());
+			return true;
+		}
+		return false;
+	}
 }