alt: dialog covers title bar now

HMCL/src/main/java/org/jackhuang/hmcl/ui/Controllers.java

@@ -110,7 +110,9 @@ public final class Controllers {
 
         Task.runAsync(JavaVersion::initialize).start();
 
-        scene = new Scene(decorator.getDecorator(), 800, 480);
+        scene = new Scene(decorator.getDecorator(), 802, 482);
+        stage.setMinHeight(482);
+        stage.setMinWidth(802);
         decorator.getDecorator().prefWidthProperty().bind(scene.widthProperty());
         decorator.getDecorator().prefHeightProperty().bind(scene.heightProperty());
         scene.getStylesheets().setAll(config().getTheme().getStylesheets());

HMCL/src/main/java/org/jackhuang/hmcl/ui/InstallerItem.java

@@ -41,8 +41,7 @@ import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 public class InstallerItem extends BorderPane {
 
     public InstallerItem(String libraryId, String libraryVersion, @Nullable Runnable upgrade, @Nullable Consumer<InstallerItem> deleteCallback) {
-        getStyleClass().add("two-line-list-item");
+        getStyleClass().addAll("two-line-list-item", "card");
-        setStyle("-fx-background-radius: 2; -fx-background-color: white; -fx-padding: 8;");
         JFXDepthManager.setDepth(this, 1);
 
         String[] urls = new String[]{"/assets/img/grass.png", "/assets/img/fabric.png", "/assets/img/forge.png", "/assets/img/chicken.png", "/assets/img/command.png"};

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountListItemSkin.java

@@ -102,7 +102,7 @@ public class AccountListItemSkin extends SkinBase<AccountListItem> {
         root.setRight(right);
 
         root.getStyleClass().add("card");
-        root.setPadding(new Insets(8, 8, 8, 0));
+        root.setStyle("-fx-padding: 8 8 8 0;");
         JFXDepthManager.setDepth(root, 1);
 
         getChildren().setAll(root);

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FloatListCell.java

@@ -36,8 +36,7 @@ public abstract class FloatListCell<T> extends ListCell<T> {
 
         pane.getStyleClass().add("card");
         pane.setCursor(Cursor.HAND);
-        pane.setPadding(new Insets(8));
+        setPadding(new Insets(9, 9, 0, 9));
-        setPadding(new Insets(5));
         JFXDepthManager.setDepth(pane, 1);
 
         FXUtils.onChangeAndOperate(selectedProperty(), selected -> {

HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorSkin.java

@@ -30,6 +30,7 @@ import javafx.scene.Node;
 import javafx.scene.control.Label;
 import javafx.scene.control.SkinBase;
 import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.StackPane;
@@ -49,7 +50,7 @@ public class DecoratorSkin extends SkinBase<Decorator> {
     private static final SVGGlyph minus = Lang.apply(new SVGGlyph(0, "MINUS", "M804.571 420.571v109.714q0 22.857-16 38.857t-38.857 16h-694.857q-22.857 0-38.857-16t-16-38.857v-109.714q0-22.857 16-38.857t38.857-16h694.857q22.857 0 38.857 16t16 38.857z", Color.WHITE),
         glyph -> { glyph.setSize(12, 2); glyph.setTranslateY(4); });
 
-    private final BorderPane root;
+    private final StackPane parent;
     private final StackPane titleContainer;
     private final Stage primaryStage;
     private final TransitionPane navBarPane;
@@ -72,14 +73,15 @@ public class DecoratorSkin extends SkinBase<Decorator> {
         minus.fillProperty().bind(Theme.foregroundFillBinding());
 
         Decorator skinnable = getSkinnable();
-        StackPane parent = new StackPane();
+        parent = new StackPane();
+        parent.getStyleClass().add("window");
         parent.backgroundProperty().bind(skinnable.backgroundProperty());
         parent.setPickOnBounds(false);
         parent.prefHeightProperty().bind(control.prefHeightProperty());
         parent.prefWidthProperty().bind(control.prefWidthProperty());
-
+        parent.setOnMouseReleased(this::onMouseReleased);
-        root = new BorderPane();
+        parent.setOnMouseDragged(this::onMouseDragged);
-        root.getStyleClass().addAll("jfx-decorator", "resize-border");
+        parent.setOnMouseMoved(this::onMouseMoved);
 
         // animation layer at bottom
         {
@@ -89,12 +91,17 @@ public class DecoratorSkin extends SkinBase<Decorator> {
             leftPane.getStyleClass().add("jfx-decorator-drawer");
             layer.getChildren().setAll(leftPane);
             parent.getChildren().add(layer);
-            parent.getChildren().add(root);
         }
 
+        StackPane wrapper = new StackPane();
+        BorderPane root = new BorderPane();
+        root.getStyleClass().addAll("jfx-decorator");
+        wrapper.getChildren().setAll(root);
+        skinnable.setDrawerWrapper(wrapper);
+        parent.getChildren().add(wrapper);
+
         // center node with a animation layer at bottom, a container layer at middle and a "welcome" layer at top.
         StackPane container = new StackPane();
-        skinnable.setDrawerWrapper(container);
         FXUtils.setOverflowHidden(container);
 
         // content layer at middle
@@ -128,11 +135,7 @@ public class DecoratorSkin extends SkinBase<Decorator> {
         root.setCenter(container);
 
         titleContainer = new StackPane();
-        root.setOnMouseReleased(this::onMouseReleased);
-        root.setOnMouseDragged(this::onMouseDragged);
-        root.setOnMouseMoved(this::onMouseMoved);
         titleContainer.setPickOnBounds(false);
-        titleContainer.setMinHeight(40);
         titleContainer.getStyleClass().addAll("jfx-tool-bar");
         titleContainer.addEventHandler(MouseEvent.MOUSE_ENTERED, e -> allowMove = true);
         titleContainer.addEventHandler(MouseEvent.MOUSE_EXITED, e -> {
@@ -151,6 +154,8 @@ public class DecoratorSkin extends SkinBase<Decorator> {
         rectangle.widthProperty().bind(titleContainer.widthProperty());
         rectangle.heightProperty().bind(titleContainer.heightProperty().add(100));
         titleContainer.setClip(rectangle);
+
+        Rectangle buttonsContainerPlaceHolder = new Rectangle();
         {
             navBarPane = new TransitionPane();
             FXUtils.onChangeAndOperate(skinnable.stateProperty(), s -> {
@@ -170,11 +175,14 @@ public class DecoratorSkin extends SkinBase<Decorator> {
                         s.isAnimate() ? Duration.millis(160) : null, leftPane.prefWidthProperty(), null, s.getLeftPaneWidth(), FXUtils.SINE);
             });
             titleBar.setCenter(navBarPane);
+            titleBar.setRight(buttonsContainerPlaceHolder);
+        }
+        root.setTop(titleContainer);
 
+        {
             HBox buttonsContainer = new HBox();
-            buttonsContainer.setStyle("-fx-background-color: transparent;");
+            buttonsContainer.setAlignment(Pos.TOP_RIGHT);
-            buttonsContainer.setAlignment(Pos.CENTER_RIGHT);
+            buttonsContainer.setMaxHeight(40);
-            buttonsContainer.setPadding(new Insets(4));
             {
                 JFXButton btnMin = new JFXButton();
                 StackPane pane = new StackPane(minus);
@@ -190,9 +198,14 @@ public class DecoratorSkin extends SkinBase<Decorator> {
 
                 buttonsContainer.getChildren().setAll(btnMin, btnClose);
             }
-            titleBar.setRight(buttonsContainer);
+            AnchorPane layer = new AnchorPane();
+            layer.setPickOnBounds(false);
+            layer.getChildren().add(buttonsContainer);
+            AnchorPane.setTopAnchor(buttonsContainer, 0.0);
+            AnchorPane.setRightAnchor(buttonsContainer, 0.0);
+            buttonsContainerPlaceHolder.widthProperty().bind(buttonsContainer.widthProperty());
+            parent.getChildren().add(layer);
         }
-        root.setTop(titleContainer);
 
         getChildren().add(parent);
     }
@@ -277,19 +290,19 @@ public class DecoratorSkin extends SkinBase<Decorator> {
     }
 
     private boolean isRightEdge(double x, double y, Bounds boundsInParent) {
-        return x < root.getWidth() && x >= root.getWidth() - root.snappedLeftInset();
+        return x < parent.getWidth() && x >= parent.getWidth() - parent.snappedLeftInset();
     }
 
     private boolean isTopEdge(double x, double y, Bounds boundsInParent) {
-        return y >= 0 && y <= root.snappedTopInset();
+        return y >= 0 && y <= parent.snappedTopInset();
     }
 
     private boolean isBottomEdge(double x, double y, Bounds boundsInParent) {
-        return y < root.getHeight() && y >= root.getHeight() - root.snappedLeftInset();
+        return y < parent.getHeight() && y >= parent.getHeight() - parent.snappedLeftInset();
     }
 
     private boolean isLeftEdge(double x, double y, Bounds boundsInParent) {
-        return x >= 0 && x <= root.snappedLeftInset();
+        return x >= 0 && x <= parent.snappedLeftInset();
     }
 
     private boolean setStageWidth(double width) {
@@ -325,48 +338,48 @@ public class DecoratorSkin extends SkinBase<Decorator> {
             updateInitMouseValues(mouseEvent);
             if (primaryStage.isResizable()) {
                 double x = mouseEvent.getX(), y = mouseEvent.getY();
-                Bounds boundsInParent = root.getBoundsInParent();
+                Bounds boundsInParent = parent.getBoundsInParent();
-                if (root.getBorder() != null && root.getBorder().getStrokes().size() > 0) {
+                if (parent.getBorder() != null && parent.getBorder().getStrokes().size() > 0) {
-                    double diagonalSize = root.snappedLeftInset() + 10;
+                    double diagonalSize = parent.snappedLeftInset() + 10;
                     if (this.isRightEdge(x, y, boundsInParent)) {
                         if (y < diagonalSize) {
-                            root.setCursor(Cursor.NE_RESIZE);
+                            parent.setCursor(Cursor.NE_RESIZE);
-                        } else if (y > root.getHeight() - diagonalSize) {
+                        } else if (y > parent.getHeight() - diagonalSize) {
-                            root.setCursor(Cursor.SE_RESIZE);
+                            parent.setCursor(Cursor.SE_RESIZE);
                         } else {
-                            root.setCursor(Cursor.E_RESIZE);
+                            parent.setCursor(Cursor.E_RESIZE);
                         }
                     } else if (this.isLeftEdge(x, y, boundsInParent)) {
                         if (y < diagonalSize) {
-                            root.setCursor(Cursor.NW_RESIZE);
+                            parent.setCursor(Cursor.NW_RESIZE);
-                        } else if (y > root.getHeight() - diagonalSize) {
+                        } else if (y > parent.getHeight() - diagonalSize) {
-                            root.setCursor(Cursor.SW_RESIZE);
+                            parent.setCursor(Cursor.SW_RESIZE);
                         } else {
-                            root.setCursor(Cursor.W_RESIZE);
+                            parent.setCursor(Cursor.W_RESIZE);
                         }
                     } else if (this.isTopEdge(x, y, boundsInParent)) {
                         if (x < diagonalSize) {
-                            root.setCursor(Cursor.NW_RESIZE);
+                            parent.setCursor(Cursor.NW_RESIZE);
-                        } else if (x > root.getWidth() - diagonalSize) {
+                        } else if (x > parent.getWidth() - diagonalSize) {
-                            root.setCursor(Cursor.NE_RESIZE);
+                            parent.setCursor(Cursor.NE_RESIZE);
                         } else {
-                            root.setCursor(Cursor.N_RESIZE);
+                            parent.setCursor(Cursor.N_RESIZE);
                         }
                     } else if (this.isBottomEdge(x, y, boundsInParent)) {
                         if (x < diagonalSize) {
-                            root.setCursor(Cursor.SW_RESIZE);
+                            parent.setCursor(Cursor.SW_RESIZE);
-                        } else if (x > root.getWidth() - diagonalSize) {
+                        } else if (x > parent.getWidth() - diagonalSize) {
-                            root.setCursor(Cursor.SE_RESIZE);
+                            parent.setCursor(Cursor.SE_RESIZE);
                         } else {
-                            root.setCursor(Cursor.S_RESIZE);
+                            parent.setCursor(Cursor.S_RESIZE);
                         }
                     } else {
-                        root.setCursor(Cursor.DEFAULT);
+                        parent.setCursor(Cursor.DEFAULT);
                     }
                 }
             }
         } else {
-            root.setCursor(Cursor.DEFAULT);
+            parent.setCursor(Cursor.DEFAULT);
         }
     }
 
@@ -382,7 +395,7 @@ public class DecoratorSkin extends SkinBase<Decorator> {
                 this.newY = mouseEvent.getScreenY();
                 double deltaX = this.newX - this.initX;
                 double deltaY = this.newY - this.initY;
-                Cursor cursor = root.getCursor();
+                Cursor cursor = parent.getCursor();
                 if (Cursor.E_RESIZE == cursor) {
                     this.setStageWidth(this.primaryStage.getWidth() + deltaX);
                     mouseEvent.consume();

HMCL/src/main/java/org/jackhuang/hmcl/ui/download/InstallersPage.java

@@ -153,7 +153,6 @@ public class InstallersPage extends Control implements WizardPage {
             final Label label;
 
             InstallersPageItemSkin(String imageUrl, InstallerPageItem item, boolean clickable) {
-                setPadding(new Insets(8));
                 getStyleClass().add("card");
 
                 setLeft(FXUtils.limitingSize(imageView = new ImageView(new Image(imageUrl, 32, 32, true, true)), 32, 32));
@@ -200,7 +199,7 @@ public class InstallersPage extends Control implements WizardPage {
                 HBox versionNamePane = new HBox(8);
                 versionNamePane.setAlignment(Pos.CENTER_LEFT);
                 versionNamePane.getStyleClass().add("card");
-                versionNamePane.setPadding(new Insets(20, 8, 20, 16));
+                versionNamePane.setStyle("-fx-padding: 20 8 20 16");
 
                 versionNamePane.getChildren().add(new Label(i18n("archive.name")));
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/MainPage.java

@@ -115,6 +115,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
         }
 
         StackPane launchPane = new StackPane();
+        launchPane.getStyleClass().add("launch-pane");
         launchPane.setMaxWidth(230);
         launchPane.setMaxHeight(55);
         launchPane.setOnScroll(event -> {
@@ -134,8 +135,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
             JFXButton launchButton = new JFXButton();
             launchButton.setPrefWidth(230);
             launchButton.setPrefHeight(55);
-            launchButton.setButtonType(JFXButton.ButtonType.RAISED);
+            //launchButton.setButtonType(JFXButton.ButtonType.RAISED);
-            launchButton.getStyleClass().add("jfx-button-raised");
             launchButton.setOnAction(e -> launch());
             launchButton.setDefaultButton(true);
             launchButton.setClip(new Rectangle(-100, -100, 310, 200));
@@ -161,7 +161,6 @@ public final class MainPage extends StackPane implements DecoratorPage {
             }
 
             Rectangle separator = new Rectangle();
-            separator.getStyleClass().add("darker-fill");
             separator.setWidth(1);
             separator.setHeight(57);
             separator.setTranslateX(95);
@@ -170,8 +169,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
             menuButton = new JFXButton();
             menuButton.setPrefHeight(55);
             menuButton.setPrefWidth(230);
-            menuButton.setButtonType(JFXButton.ButtonType.RAISED);
+            //menuButton.setButtonType(JFXButton.ButtonType.RAISED);
-            menuButton.getStyleClass().add("jfx-button-raised");
             menuButton.setStyle("-fx-font-size: 15px;");
             menuButton.setOnMouseClicked(e -> onMenu());
             menuButton.setClip(new Rectangle(211, -100, 100, 200));

HMCL/src/main/java/org/jackhuang/hmcl/ui/profile/ProfileListItemSkin.java

@@ -75,7 +75,7 @@ public class ProfileListItemSkin extends SkinBase<ProfileListItem> {
         root.setRight(right);
 
         root.getStyleClass().add("card");
-        root.setPadding(new Insets(8, 8, 8, 0));
+        root.setStyle("-fx-padding: 8 8 8 0");
         JFXDepthManager.setDepth(root, 1);
         item.titleProperty().bind(skinnable.titleProperty());
         item.subtitleProperty().bind(skinnable.subtitleProperty());

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameListItemSkin.java

@@ -99,7 +99,7 @@ public class GameListItemSkin extends SkinBase<GameListItem> {
         root.setRight(right);
 
         root.getStyleClass().add("card");
-        root.setPadding(new Insets(8, 8, 8, 0));
+        root.setStyle("-fx-padding: 8 8 8 0");
         JFXDepthManager.setDepth(root, 1);
 
         getChildren().setAll(root);

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java

@@ -87,13 +87,12 @@ class ModListPageSkin extends SkinBase<ModListPage> {
                 BooleanProperty booleanProperty;
 
                 {
+
                     Region clippedContainer = (Region)listView.lookup(".clipped-container");
                     setPrefWidth(0);
                     HBox container = new HBox(8);
-                    container.setPadding(new Insets(0, 0, 0, 6));
                     container.setAlignment(Pos.CENTER_LEFT);
                     pane.getChildren().add(container);
-                    pane.setPadding(new Insets(8, 8, 8, 0));
                     if (clippedContainer != null) {
                         maxWidthProperty().bind(clippedContainer.widthProperty());
                         prefWidthProperty().bind(clippedContainer.widthProperty());

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/VersionPage.java

@@ -318,8 +318,6 @@ public class VersionPage extends Control implements DecoratorPage {
                 );
 
                 JFXButton upgradeButton = new JFXButton();
-                FXUtils.setLimitWidth(upgradeButton, 40);
-                FXUtils.setLimitHeight(upgradeButton, 40);
                 upgradeButton.setGraphic(SVG.update(Theme.whiteFillBinding(), 20, 20));
                 upgradeButton.getStyleClass().add("jfx-decorator-button");
                 upgradeButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@@ -328,8 +326,6 @@ public class VersionPage extends Control implements DecoratorPage {
                 FXUtils.installFastTooltip(upgradeButton, i18n("version.update"));
 
                 JFXButton testGameButton = new JFXButton();
-                FXUtils.setLimitWidth(testGameButton, 40);
-                FXUtils.setLimitHeight(testGameButton, 40);
                 testGameButton.setGraphic(SVG.launch(Theme.whiteFillBinding(), 20, 20));
                 testGameButton.getStyleClass().add("jfx-decorator-button");
                 testGameButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@@ -337,8 +333,6 @@ public class VersionPage extends Control implements DecoratorPage {
                 FXUtils.installFastTooltip(testGameButton, i18n("version.launch.test"));
 
                 JFXButton browseMenuButton = new JFXButton();
-                FXUtils.setLimitWidth(browseMenuButton, 40);
-                FXUtils.setLimitHeight(browseMenuButton, 40);
                 browseMenuButton.setGraphic(SVG.folderOpen(Theme.whiteFillBinding(), 20, 20));
                 browseMenuButton.getStyleClass().add("jfx-decorator-button");
                 browseMenuButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@@ -347,7 +341,7 @@ public class VersionPage extends Control implements DecoratorPage {
 
                 JFXButton managementMenuButton = new JFXButton();
                 FXUtils.setLimitWidth(managementMenuButton, 40);
-                FXUtils.setLimitHeight(managementMenuButton, 40);;
+                FXUtils.setLimitHeight(managementMenuButton, 40);
                 managementMenuButton.setGraphic(SVG.wrench(Theme.whiteFillBinding(), 20, 20));
                 managementMenuButton.getStyleClass().add("jfx-decorator-button");
                 managementMenuButton.ripplerFillProperty().bind(Theme.whiteFillBinding());
@@ -362,11 +356,9 @@ public class VersionPage extends Control implements DecoratorPage {
             titleBar.setRight(toolBar);
             control.state.set(new State(i18n("version.manage.manage"), titleBar, true, false, true, false, 200));
 
-            control.transitionPane.getStyleClass().add("gray-background");
+            //control.transitionPane.getStyleClass().add("gray-background");
-            FXUtils.setOverflowHidden(control.transitionPane, 8);
+            //FXUtils.setOverflowHidden(control.transitionPane, 8);
-            StackPane wrapper = new StackPane(control.transitionPane);
+            root.setCenter(control.transitionPane);
-            wrapper.setPadding(new Insets(4));
-            root.setCenter(wrapper);
 
             spinnerPane.loadingProperty().bind(control.loading);
             spinnerPane.setContent(root);

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldListItemSkin.java

@@ -85,7 +85,7 @@ public class WorldListItemSkin extends SkinBase<WorldListItem> {
         root.setRight(right);
 
         root.getStyleClass().add("card");
-        root.setPadding(new Insets(8, 8, 8, 0));
+        root.setStyle("-fx-padding: 8 8 8 0");
         JFXDepthManager.setDepth(root, 1);
 
         getChildren().setAll(root);

HMCL/src/main/resources/assets/css/root.css

@@ -18,22 +18,6 @@
 .root {
 }
 
-.jfx-list-view .scroll-bar {
-    -fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
-}
-
-.jfx-list-view .scroll-bar .track {
-    -fx-fill: transparent;
-}
-
-.scroll-pane .scroll-bar {
-    -fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
-}
-
-.scroll-pane .scroll-bar .track {
-    -fx-fill: transparent;
-}
-
 .scroll-bar .thumb {
     -fx-fill: rgba(255, 255, 255, 0.5);
     -fx-arc-width: 5px;
@@ -44,13 +28,6 @@
     -fx-text-fill: rgba(0, 0, 0, 0.5);
 }
 
-.side-menu {
-    -fx-padding: 20.0, 10.0;
-    -fx-font-size: 15.0;
-    -fx-font-weight: NORMAL;
-    -fx-text-fill: #444;
-}
-
 .title-label {
     -fx-font-size: 16.0px;
     -fx-padding: 14.0px;
@@ -153,10 +130,6 @@
 	-fx-text-fill: white;
 }
 
-.darker-fill {
-    -fx-fill: -fx-base-darker-color;
-}
-
 .sponsor-pane {
     -fx-padding: 16;
     -fx-cursor: hand;
@@ -166,6 +139,32 @@
     -fx-wrap-text: true;
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Main Page                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.launch-pane .jfx-button {
+    -fx-background-color: -fx-base-color;
+    -fx-cursor: hand;
+}
+
+.launch-pane .jfx-button .jfx-rippler {
+    -jfx-rippler-fill: white;
+    -jfx-mask-type: CIRCLE;
+    -fx-padding: 0.0;
+}
+
+.launch-pane .jfx-button, .jfx-button * {
+    -fx-text-fill: -fx-base-text-fill;
+    -fx-font-size: 14px;
+}
+
+.launch-pane Rectangle {
+    -fx-fill: -fx-base-darker-color;
+}
+
 /*******************************************************************************
  *                                                                             *
  * JFX Tab Pane                                                                *
@@ -370,7 +369,9 @@
     -fx-font-size: 13.0;
     -fx-font-weight: BOLD;
     -fx-pref-width: 100.0%;
-    -fx-pref-height: 32.0px;
+    -fx-min-height: 40px;
+    -fx-max-height: 40px;
+    -fx-pref-height: 40px;
 }
 
 .jfx-tool-bar .background {
@@ -383,6 +384,12 @@
 }
 
 .jfx-tool-bar .jfx-decorator-button {
+    -fx-min-width: 40px;
+    -fx-max-width: 40px;
+    -fx-pref-width: 40px;
+    -fx-min-height: 40px;
+    -fx-max-height: 40px;
+    -fx-pref-height: 40px;
     -fx-cursor: hand;
 }
 
@@ -436,9 +443,9 @@
 }
 
 .jfx-decorator-button {
-    -fx-max-width: 35px;
+    -fx-max-width: 40px;
     -fx-background-radius: 5px;
-    -fx-max-height: 35px;
+    -fx-max-height: 40px;
     -fx-background-color: transparent;
     -jfx-toggle-color: rgba(128, 128, 255, 0.2);
     -jfx-untoggle-color: transparent;
@@ -671,6 +678,14 @@
     -fx-background-color: transparent;
 }
 
+.jfx-list-view .scroll-bar {
+    -fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
+}
+
+.jfx-list-view .scroll-bar .track {
+    -fx-fill: transparent;
+}
+
 .jfx-list-view-float {
     -fx-padding: 5;
     -fx-background-insets: 0.0;
@@ -689,6 +704,7 @@
 .card {
     -fx-background-color: WHITE;
     -fx-background-radius: 4;
+    -fx-padding: 8px;
 }
 
 .card:selected {
@@ -1097,7 +1113,7 @@
 }
 
 .jfx-decorator-drawer {
-    -fx-background-color: rgba(244, 244, 244, 0.55);
+    -fx-background-color: rgba(244, 244, 244, 0.5);
 }
 
 .jfx-decorator-title {
@@ -1118,7 +1134,7 @@
     -fx-text-fill: -fx-base-text-fill;
 }
 
-.resize-border {
+.window {
     -fx-border-color: black;
     -fx-border-width: 1;
 }
@@ -1132,10 +1148,6 @@
     -fx-background-color: rgba(244, 244, 244, 0.5);
 }
 
-.drawer-background {
-    -fx-background-color: #FAFAFA;
-}
-
 .gray-background {
     -fx-background-color: rgba(244, 244, 244, 0.5);
 }
@@ -1325,6 +1337,14 @@
     -fx-background-color: null;
  }
 
+.scroll-pane .scroll-bar {
+    -fx-skin: "org.jackhuang.hmcl.ui.construct.FloatScrollBarSkin";
+}
+
+.scroll-pane .scroll-bar .track {
+    -fx-fill: transparent;
+}
+
 /*******************************************************************************
 *                                                                              *
 * Error Facade                                                                 *

HMCL/src/main/resources/assets/fxml/download/modpack-source.fxml

@@ -13,7 +13,7 @@
     </fx:define>
     <VBox fx:id="list" styleClass="jfx-list-view" maxHeight="150" spacing="8" maxWidth="400">
         <Label padding="${insets}" text="%install.modpack" />
-        <JFXButton fx:id="btnLocal" styleClass="card" style="-fx-padding: 8; -fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseLocalFile">
+        <JFXButton fx:id="btnLocal" styleClass="card" style="-fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseLocalFile">
             <graphic>
                 <BorderPane mouseTransparent="true">
                     <left>
@@ -25,7 +25,7 @@
                 </BorderPane>
             </graphic>
         </JFXButton>
-        <JFXButton fx:id="btnRemote" styleClass="card" style="-fx-padding: 8; -fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseRemoteFile">
+        <JFXButton fx:id="btnRemote" styleClass="card" style="-fx-cursor: HAND" prefWidth="${list.width}" onMouseClicked="#onChooseRemoteFile">
             <graphic>
                 <BorderPane mouseTransparent="true">
                     <left>