style: light cards and lists, sans section titles, hairline outlined buttons, quieter sidebar labels

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

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

@@ -28,7 +28,6 @@ import org.jackhuang.hmcl.util.javafx.MappedObservableList;
 import org.jetbrains.annotations.Nullable;
 import org.jetbrains.annotations.UnmodifiableView;
 
-import java.util.Locale;
 
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 import static org.jackhuang.hmcl.util.javafx.ExtendedProperties.createSelectedItemPropertyFor;
@@ -78,7 +77,7 @@ public final class AccountListPage extends DecoratorAnimatedPage implements Deco
             getSidebar().clear();
 
             getSidebar()
-                    .startCategory(i18n("account.create").toUpperCase(Locale.ROOT))
+                    .startCategory(i18n("account.create"))
                     .add(offlineItem)
                     .add(microsoftItem);
 

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

@@ -135,6 +135,7 @@ public class ComponentList extends Control implements NoPaddingComponent {
 
         {
             Label advanced = new Label(title);
+            advanced.getStyleClass().add("component-list-title");
             node.getChildren().setAll(advanced);
         }
 

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

@@ -2349,3 +2349,78 @@
     -fx-pref-height: 18px;
     -fx-max-height: 18px;
 }
+
+/* ---- Unified list and card styling ---- */
+
+/* Sidebar section labels: small muted text without an underline. */
+.class-title {
+    -fx-font-family: "Noto Sans SC";
+    -fx-padding: 13px 16px 4px 16px;
+}
+
+.class-title Text {
+    -fx-fill: -monet-on-surface-variant;
+}
+
+.class-title Rectangle {
+    -fx-fill: transparent;
+}
+
+/* Cards: a hairline border instead of a drop shadow. */
+.card, .card-no-padding, .card-non-transparent {
+    -fx-background-color: -monet-surface-bright;
+    -fx-border-color: -monet-outline-variant;
+    -fx-border-radius: 13px;
+    -fx-effect: null;
+}
+
+/* Icon buttons use a softer ink than body text. */
+.toggle-icon4 .svg, .toggle-icon-tiny .svg {
+    -fx-fill: -monet-on-surface-variant;
+}
+
+/* ---- Settings lists ---- */
+.component-list-title {
+    -fx-font-family: "Noto Sans SC";
+    -fx-font-weight: bold;
+    -fx-font-size: 14px;
+    -fx-text-fill: -monet-on-surface;
+}
+
+.options-list {
+    -fx-background-radius: 13px;
+    -fx-border-color: -monet-outline-variant;
+    -fx-border-radius: 13px;
+    -fx-effect: null;
+}
+
+.options-list-item {
+    -fx-background-color: -monet-surface-bright;
+}
+
+.options-list-item:first {
+    -fx-background-radius: 13px 13px 0 0;
+}
+
+.options-list-item:last {
+    -fx-background-radius: 0 0 13px 13px;
+}
+
+.options-list-item:first:last {
+    -fx-background-radius: 13px;
+}
+
+/* Sidebar rows: a lighter selected and hover tint. */
+.advanced-list-item:selected .rippler-container,
+.advanced-list-item .rippler-container:hover {
+    -fx-background-color: -monet-surface-container-high;
+}
+
+/* Outlined buttons: one crisp hairline. */
+.jfx-button-border {
+    -fx-border-color: -monet-outline-variant;
+    -fx-border-radius: 8px;
+    -fx-border-width: 1px;
+    -fx-background-radius: 8px;
+    -fx-padding: 8px 16px;
+}