some new css styling

2019-06-23 15:39:58 +02:00
parent 0fecb8bb16
commit a6b1ce7f72
4 changed files with 163 additions and 58 deletions
--- a/src/main/resources/css/MainWindows.css
+++ b/src/main/resources/css/MainWindows.css
@ -1,6 +1,8 @@
-/*
- * HAMBURGER CSS
- */
+/*******************************************************************************
+ *                                                                             *
+ * Hamburger Menu			                                                   *
+ *                                                                             *
+ ******************************************************************************/
 
 .jfx-hamburgerW StackPane {
 	-fx-background-color: white; 
@ -12,9 +14,11 @@
 	-fx-background-radius: 5px;
 }
 							
-/*
- * TREE TABLE CSS
- */
+/*******************************************************************************
+ *                                                                             *
+ * TreeTable			                                                       *
+ *                                                                             *
+ ******************************************************************************/

 .tree-table-view {
 	-fx-tree-table-color: rgba(0, 168, 204, 0.2);
@ -84,10 +88,11 @@
    -fx-padding: 1; /* 0.083333em; */
 }

-/*
- * ChoiceBox
- */
- 
+/*******************************************************************************
+ *                                                                             *
+ * ChoiceBox			                                                       *
+ *                                                                             *
+ ******************************************************************************/

 .choice-box {
 	-fx-background-color: transparent;
@ -109,10 +114,109 @@
 	-fx-background-color: #00A8CC;
 }

-/*
- * Spinner
- */
+/*******************************************************************************
+ *                                                                             *
+ * Spinner  			                                                       *
+ *                                                                             *
+ ******************************************************************************/
+ 
 .spinner {
 	-fx-background-color: #f4f4f4;
 }

+/*******************************************************************************
+ *                                                                             *
+ * ScrollBar			                                                       *
+ *                                                                             *
+ ******************************************************************************/
+ 
+ .scroll-bar:vertical, .scroll-bar:horizontal {
+ 	-fx-background-color: transparent;
+ }
+
+.scroll-bar:vertical > .track-background, .scroll-bar:horizontal > .track-background {
+    -fx-background-color: transparent;
+    -fx-background-insets: 0.0;
+}
+
+.scroll-bar:vertical > .thumb {
+    -fx-background-color: #BCBCBC;
+    -fx-background-insets: 0.0;
+    -fx-background-radius: 15.0;
+}
+
+.scroll-bar:horizontal > .thumb {
+    -fx-background-color: #FFFFFF;
+    -fx-background-insets: 0.0;
+    -fx-background-radius: 15.0;
+}
+
+/* Up- and Down-Button Padding */
+.scroll-bar:vertical > .increment-button, .scroll-bar:vertical > .decrement-button {
+    -fx-padding: 5 2 5 2;
+}
+
+/* Left- and Right-Button Padding */
+.scroll-bar:horizontal > .increment-button, .scroll-bar:horizontal > .decrement-button {
+	-fx-background-color: transparent;
+    -fx-padding: 5 2 5 2;
+}
+
+.scroll-bar > .increment-button, .scroll-bar > .decrement-button, .scroll-bar:hover > .increment-button, .scroll-bar:hover > .decrement-button {
+    -fx-background-color: transparent;
+}
+
+.scroll-bar > .increment-button > .increment-arrow, .scroll-bar > .decrement-button > .decrement-arrow {
+    -fx-background-color: rgb(150.0, 150.0, 150.0);
+}
+
+/* Up Arrow */
+.scroll-bar:vertical > .increment-button > .increment-arrow {
+    -fx-shape: "M298 426h428l-214 214z";
+}
+
+/* Down Arrow */
+.scroll-bar:vertical > .decrement-button > .decrement-arrow {
+    -fx-shape: "M298 598l214-214 214 214h-428z";
+}
+
+/* Right Arrow */    
+.scroll-bar:horizontal > .increment-button > .increment-arrow {
+    /* -fx-shape: "M0 428l0 -428l214 214l-214 214z"; */
+    -fx-background-color:transparent;
+    -fx-shape: " ";
+    -fx-padding: 0;
+}
+
+/* Left Arrow */
+.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
+    /* -fx-shape: "M214 0l0 428l-214 -214l214 -214z"; */
+    -fx-background-color:transparent;
+    -fx-shape: " ";
+    -fx-padding: 0;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ScrollPane			                                                       *
+ *                                                                             *
+ ******************************************************************************/
+
+.scroll-pane {
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+
+.scroll-pane:focused {
+    -fx-background-insets: 0;
+}
+
+.scroll-pane .corner {
+    -fx-background-insets: 0;
+}
+
+.scroll-pane > .viewport {
+   -fx-background-color: transparent;
+}
+
+
--- a/src/main/resources/fxml/MainWindow.fxml
+++ b/src/main/resources/fxml/MainWindow.fxml
@ -19,7 +19,7 @@
 <?import javafx.scene.text.Font?>
 <?import javafx.scene.text.TextFlow?>

-<AnchorPane fx:id="mainAnchorPane" minHeight="405.0" minWidth="260.0" prefHeight="600.0" prefWidth="904.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
+<AnchorPane fx:id="mainAnchorPane" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="1130.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ScrollPane fx:id="mainScrollPane" fitToWidth="true" layoutY="38.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="38.0">
         <content>
@ -30,41 +30,7 @@
            </FlowPane>
         </content>
      </ScrollPane>
-      <HBox fx:id="topHBox" prefHeight="38.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
-         <children>
-            <JFXHamburger fx:id="menuHam" prefHeight="38.0" prefWidth="38.0" stylesheets="@../css/MainWindows.css" />
-         </children>
-      </HBox>
-      <VBox fx:id="sideMenuVBox" layoutY="32.0" prefHeight="568.0" prefWidth="175.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="38.0">
-         <children>
-            <JFXButton fx:id="aboutBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="190.0" onAction="#aboutBtnAction" prefHeight="38.0" prefWidth="190.0" text="About" textAlignment="LEFT">
-               <font>
-                  <Font name="System Bold" size="14.0" />
-               </font>
-            </JFXButton>
-            <JFXButton fx:id="settingsBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="213.0" onAction="#settingsBtnAction" prefHeight="38.0" prefWidth="213.0" text="Settings" textAlignment="LEFT">
-               <font>
-                  <Font name="System Bold" size="14.0" />
-               </font>
-            </JFXButton>
-            <JFXButton fx:id="addBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="193.0" onAction="#addBtnAction" prefHeight="38.0" prefWidth="193.0" text="Add new Game" textAlignment="LEFT">
-               <font>
-                  <Font name="System Bold" size="14.0" />
-               </font>
-            </JFXButton>
-            <JFXButton fx:id="reloadRomsBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="199.0" onAction="#reloadRomsBtnAction" prefHeight="38.0" prefWidth="199.0" text="reload roms" textAlignment="LEFT">
-               <font>
-                  <Font name="System Bold" size="14.0" />
-               </font>
-            </JFXButton>
-            <JFXButton fx:id="smmdbBtn" alignment="TOP_LEFT" onAction="#smmdbBtnAction" prefHeight="38.0" prefWidth="216.0" text="smmdb">
-               <font>
-                  <Font name="System Bold" size="14.0" />
-               </font>
-            </JFXButton>
-         </children>
-      </VBox>
-      <ScrollPane fx:id="settingsScrollPane" prefHeight="562.0" prefWidth="729.0" style="-fx-background: white;" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="175.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="38.0">
+      <ScrollPane fx:id="settingsScrollPane" fitToHeight="true" fitToWidth="true" prefHeight="562.0" prefWidth="729.0" style="-fx-background: white;" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="175.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="38.0">
         <content>
           		<!-- space between settings sections  35px, between sections elements (label + element) 20px, between label and element 3px(or more) -->
            <AnchorPane fx:id="settingsAnchorPane" prefHeight="686.0" prefWidth="711.0" style="-fx-background-color: white;">
@ -73,7 +39,7 @@
                     <children>
                        <VBox prefHeight="485.0" prefWidth="710.0" spacing="25.0">
                           <children>
-                              <VBox prefHeight="21.0" prefWidth="676.0">
+                              <VBox>
                                 <children>
                                    <Label fx:id="cemu_UISettingsLbl" text="cemu_UI Settings">
                                       <font>
@ -225,5 +191,39 @@
            <JFXButton fx:id="lastTimePlayedBtn" buttonType="RAISED" maxHeight="32.0" maxWidth="156.0" minHeight="32.0" minWidth="156.0" onAction="#lastTimePlayedBtnAction" style="-fx-background-color: #ffffff; -fx-button-type: RAISED; -fx-text-fill: BLACK;" text="Last played, never" />
         </children>
      </HBox>
+      <HBox fx:id="topHBox" prefHeight="38.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+         <children>
+            <JFXHamburger fx:id="menuHam" prefHeight="38.0" prefWidth="38.0" stylesheets="@../css/MainWindows.css" />
+         </children>
+      </HBox>
+      <VBox fx:id="sideMenuVBox" layoutY="32.0" prefHeight="568.0" prefWidth="175.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="38.0">
+         <children>
+            <JFXButton fx:id="aboutBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="190.0" onAction="#aboutBtnAction" prefHeight="38.0" prefWidth="190.0" text="About" textAlignment="LEFT">
+               <font>
+                  <Font name="System Bold" size="14.0" />
+               </font>
+            </JFXButton>
+            <JFXButton fx:id="settingsBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="213.0" onAction="#settingsBtnAction" prefHeight="38.0" prefWidth="213.0" text="Settings" textAlignment="LEFT">
+               <font>
+                  <Font name="System Bold" size="14.0" />
+               </font>
+            </JFXButton>
+            <JFXButton fx:id="addBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="193.0" onAction="#addBtnAction" prefHeight="38.0" prefWidth="193.0" text="Add new Game" textAlignment="LEFT">
+               <font>
+                  <Font name="System Bold" size="14.0" />
+               </font>
+            </JFXButton>
+            <JFXButton fx:id="reloadRomsBtn" alignment="TOP_LEFT" maxHeight="38.0" maxWidth="199.0" onAction="#reloadRomsBtnAction" prefHeight="38.0" prefWidth="199.0" text="reload roms" textAlignment="LEFT">
+               <font>
+                  <Font name="System Bold" size="14.0" />
+               </font>
+            </JFXButton>
+            <JFXButton fx:id="smmdbBtn" alignment="TOP_LEFT" onAction="#smmdbBtnAction" prefHeight="38.0" prefWidth="216.0" text="smmdb">
+               <font>
+                  <Font name="System Bold" size="14.0" />
+               </font>
+            </JFXButton>
+         </children>
+      </VBox>
   </children>
 </AnchorPane>