alt: some UI details

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

@@ -40,6 +40,7 @@ public class ListPageSkin extends SkinBase<ListPage<?>> {
         spinnerPane.getStyleClass().add("large-spinner-pane");
         Pane placeholder = new Pane();
         VBox list = new VBox();
+        spinnerPane.getStyleClass().add("content-background");
 
         StackPane contentPane = new StackPane();
         {

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

@@ -32,6 +32,7 @@ import javafx.scene.text.Font;
 import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.setting.*;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane.MessageType;
+import org.jackhuang.hmcl.ui.construct.Navigator;
 import org.jackhuang.hmcl.ui.construct.Validator;
 import org.jackhuang.hmcl.ui.decorator.DecoratorPage;
 import org.jackhuang.hmcl.upgrade.RemoteVersion;
@@ -70,6 +71,7 @@ public final class SettingsPage extends SettingsView implements DecoratorPage {
 
     public SettingsPage() {
         FXUtils.smoothScrolling(scroll);
+        addEventHandler(Navigator.NavigationEvent.NAVIGATING, this::onDecoratorPageNavigating);
 
         // ==== Download sources ====
         cboDownloadSource.getItems().setAll(DownloadProviders.providersById.keySet());

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

@@ -41,6 +41,7 @@ public abstract class ToolbarListPageSkin<T extends ListPageBase<? extends Node>
 
         SpinnerPane spinnerPane = new SpinnerPane();
         spinnerPane.getStyleClass().add("large-spinner-pane");
+        spinnerPane.getStyleClass().add("content-background");
 
         BorderPane root = new BorderPane();
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/animation/TransitionHandler.java

@@ -67,7 +67,7 @@ public final class TransitionHandler implements AnimationHandler {
     }
 
     public void setContent(Node newView, AnimationProducer transition) {
-        setContent(newView, transition, Duration.millis(320));
+        setContent(newView, transition, Duration.millis(160));
     }
 
     public void setContent(Node newView, AnimationProducer transition, Duration duration) {

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

@@ -27,18 +27,15 @@ import javafx.beans.binding.Bindings;
 import javafx.beans.value.ChangeListener;
 import javafx.beans.value.ObservableValue;
 import javafx.event.EventHandler;
-import javafx.geometry.Insets;
 import javafx.scene.Cursor;
 import javafx.scene.Node;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.input.DragEvent;
 import javafx.scene.layout.*;
-import javafx.scene.paint.Color;
 import javafx.stage.Stage;
 import javafx.util.Duration;
 import org.jackhuang.hmcl.Launcher;
-import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.auth.authlibinjector.AuthlibInjectorDnD;
 import org.jackhuang.hmcl.setting.Config;
 import org.jackhuang.hmcl.setting.EnumBackgroundImage;
@@ -280,12 +277,6 @@ public class DecoratorController {
         decorator.canBackProperty().set(navigator.canGoBack());
         decorator.canCloseProperty().set(navigator.canGoBack());
 
-        if (navigator.canGoBack()) {
-            decorator.setContentBackground(new Background(new BackgroundFill(Color.rgb(244, 244, 244, 0.5), CornerRadii.EMPTY, Insets.EMPTY)));
-        } else {
-            decorator.setContentBackground(null);
-        }
-
         if (to instanceof Region) {
             Region region = (Region) to;
             // Let root pane fix window size.

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

@@ -18,6 +18,8 @@
 package org.jackhuang.hmcl.ui.decorator;
 
 import javafx.beans.property.ReadOnlyStringProperty;
+import javafx.scene.Node;
+import org.jackhuang.hmcl.ui.construct.Navigator;
 
 public interface DecoratorPage {
     ReadOnlyStringProperty titleProperty();
@@ -32,4 +34,8 @@ public interface DecoratorPage {
 
     default void onForceToClose() {
     }
+
+    default void onDecoratorPageNavigating(Navigator.NavigationEvent event) {
+        ((Node) this).getStyleClass().add("content-background");
+    }
 }

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

@@ -29,11 +29,7 @@ import javafx.scene.Node;
 import javafx.scene.control.Label;
 import javafx.scene.control.SkinBase;
 import javafx.scene.input.MouseEvent;
-import javafx.scene.layout.BorderPane;
-import javafx.scene.layout.HBox;
-import javafx.scene.layout.Region;
-import javafx.scene.layout.StackPane;
-import javafx.scene.layout.VBox;
+import javafx.scene.layout.*;
 import javafx.scene.paint.Color;
 import javafx.scene.shape.Rectangle;
 import javafx.stage.Stage;
@@ -110,7 +106,6 @@ public class DecoratorSkin extends SkinBase<Decorator> {
             {
                 contentPlaceHolder = new StackPane();
                 contentPlaceHolder.getStyleClass().add("jfx-decorator-content-container");
-                contentPlaceHolder.backgroundProperty().bind(skinnable.contentBackgroundProperty());
                 FXUtils.setOverflowHidden(contentPlaceHolder, true);
                 Bindings.bindContent(contentPlaceHolder.getChildren(), skinnable.contentProperty());
 

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

@@ -24,6 +24,7 @@ import javafx.beans.property.StringProperty;
 import javafx.scene.Node;
 import javafx.scene.layout.StackPane;
 import org.jackhuang.hmcl.ui.animation.TransitionHandler;
+import org.jackhuang.hmcl.ui.construct.Navigator;
 import org.jackhuang.hmcl.ui.construct.PageCloseEvent;
 import org.jackhuang.hmcl.ui.wizard.*;
 
@@ -52,7 +53,7 @@ public class DecoratorWizardDisplayer extends StackPane implements TaskExecutorD
         wizardController.setProvider(provider);
         wizardController.onStart();
 
-        // getStyleClass().add("white-background");
+        addEventHandler(Navigator.NavigationEvent.NAVIGATING, this::onDecoratorPageNavigating);
     }
 
     @Override

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

@@ -107,7 +107,8 @@ public final class VersionPage extends StackPane implements DecoratorPage {
         btnTestGame.setGraphic(SVG.launch(Theme.whiteFillBinding(), 20, 20));
         FXUtils.installFastTooltip(btnTestGame, i18n("version.launch.test"));
 
-        setEventHandler(Navigator.NavigationEvent.NAVIGATED, this::onNavigated);
+        addEventHandler(Navigator.NavigationEvent.NAVIGATING, this::onDecoratorPageNavigating);
+        addEventHandler(Navigator.NavigationEvent.NAVIGATED, this::onNavigated);
     }
 
     public void load(String id, Profile profile) {

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

@@ -42,6 +42,7 @@ import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.construct.ComponentList;
 import org.jackhuang.hmcl.ui.construct.ImagePickerItem;
 import org.jackhuang.hmcl.ui.construct.MultiFileItem;
+import org.jackhuang.hmcl.ui.construct.Navigator;
 import org.jackhuang.hmcl.ui.decorator.DecoratorPage;
 import org.jackhuang.hmcl.util.Logging;
 import org.jackhuang.hmcl.util.io.FileUtils;
@@ -104,6 +105,7 @@ public final class VersionSettingsPage extends StackPane implements DecoratorPag
 
     public VersionSettingsPage() {
         FXUtils.loadFXML(this, "/assets/fxml/version/version-settings.fxml");
+        addEventHandler(Navigator.NavigationEvent.NAVIGATING, this::onDecoratorPageNavigating);
 
         cboLauncherVisibility.getItems().setAll(LauncherVisibility.values());
         cboLauncherVisibility.setConverter(stringConverter(e -> i18n("settings.advanced.launcher_visibility." + e.name().toLowerCase())));

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

@@ -19,7 +19,7 @@
 }
 
 .disabled Label {
-    -fx-text-fill: gray;
+    -fx-text-fill: rgba(0, 0, 0, 0.5);
 }
 
 .side-menu {
@@ -36,7 +36,7 @@
 }
 
 .subtitle-label {
-    -fx-text-fill: gray;
+    -fx-text-fill: rgba(0, 0, 0, 0.5);
 }
 
 .update-label {
@@ -113,11 +113,11 @@
 }
 
 .two-line-list-item > .subtitle {
-	-fx-text-fill: gray;
+	-fx-text-fill: rgba(0, 0, 0, 0.5);
 }
 
 .bubble {
-    -fx-background-color: gray;
+    -fx-background-color: rgba(0, 0, 0, 0.5);
     -fx-background-radius: 2px;
     -fx-text-fill: white;
 }
@@ -1034,6 +1034,14 @@
     -fx-border-width: 1;
 }
 
+.content-background {
+    -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);
 }