From 6789229f8c0a8d3bf90ee90857655a13ae942ef7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=99=BD=E4=B8=8E=E5=AD=9F=E6=B5=A9=E7=84=B6?= <1063889643@qq.com> Date: Sat, 7 Oct 2023 11:02:36 +0800 Subject: [PATCH] =?UTF-8?q?#I806RK=20state=20to=20=E5=B7=B2=E5=AE=8C?= =?UTF-8?q?=E6=88=90=20=E5=9F=BA=E6=9C=AC=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/java/com/light/layout/MenuPane.java | 5 +- src/main/resources/css/colors.css | 14 ++ src/main/resources/css/menu.css | 158 +++++++++++++++---- 3 files changed, 147 insertions(+), 30 deletions(-) create mode 100644 src/main/resources/css/colors.css diff --git a/src/main/java/com/light/layout/MenuPane.java b/src/main/java/com/light/layout/MenuPane.java index b56ba7d..95bc348 100644 --- a/src/main/java/com/light/layout/MenuPane.java +++ b/src/main/java/com/light/layout/MenuPane.java @@ -54,7 +54,10 @@ public class MenuPane extends StackPane { VBox.setVgrow(dynamicMenu, Priority.ALWAYS); // 添加样式 - this.dynamicMenu.getStyleClass().addAll("menu"); + this.asideContainer.getStyleClass().add("aside"); + this.dynamicMenu.getStyleClass().add("menu"); + this.userLabel.getStyleClass().add("user-label"); + this.emailLabel.getStyleClass().add("email-label"); // 加上监听 dynamicMenu.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> { diff --git a/src/main/resources/css/colors.css b/src/main/resources/css/colors.css new file mode 100644 index 0000000..bbb74ae --- /dev/null +++ b/src/main/resources/css/colors.css @@ -0,0 +1,14 @@ + +/*颜色*/ + +*{ + -cf-primary-color: #6690FF; + -cf-success-color: #33C651; + -cf-info-color: #52A8F9; + -cf-warn-color: #FFA10A; + -cf-danger-color: #FF4C3F; + + -cf-text-color:#303133; + -cf-border-color:#CDD0D6; + -cf-base-color:#F2F3F5; +} \ No newline at end of file diff --git a/src/main/resources/css/menu.css b/src/main/resources/css/menu.css index 5f1ad56..72b0fa2 100644 --- a/src/main/resources/css/menu.css +++ b/src/main/resources/css/menu.css @@ -1,5 +1,18 @@ +@import "colors.css"; + +.aside { + /*-fx-min-width: 220px; + -fx-max-width: 220px;*/ + -fx-pref-width: 220px; + -fx-border-width: 0 1px 0 0; + -fx-border-color: -cf-border-color; + -fx-spacing: 5px; + -fx-alignment: top-center; + -fx-padding: 10px; +} + /*导航栏Item样式*/ -.nav-item{ +.nav-item { -fx-background-radius: 3px; -fx-min-height: 40px; -fx-pref-height: 40px; @@ -8,49 +21,136 @@ -fx-padding: 0 10px; -fx-cursor: hand; } -.nav-item > .icon-label > .ikonli-font-icon{ + +.nav-item > .icon-label > .ikonli-font-icon { -fx-icon-size: 20px; - -fx-icon-color: derive(#303133,30%); + -fx-icon-color: derive(-cf-text-color, 30%); } -.nav-item > .name-label{ + +.nav-item > .name-label { -fx-font-size: 14px; -fx-pref-height: 30px; -fx-font-weight: bolder; - -fx-text-fill: derive(#303133,30%); + -fx-text-fill: derive(-cf-text-color, 30%); } -.nav-item:hover > .name-label{ - -fx-text-fill: #6690FF; + +.nav-item:hover > .name-label { + -fx-text-fill: -cf-primary-color; } -.nav-item:hover > .icon-label > .ikonli-font-icon{ - -fx-icon-color: #6690FF; + +.nav-item:hover > .icon-label > .ikonli-font-icon { + -fx-icon-color: -cf-primary-color; } + /*动态导航栏*/ -.menu{ +.menu { -fx-background-insets: 0px; - -fx-background-color:transparent; - -fx-padding:5px 0 5px 0; + -fx-background-color: transparent; + -fx-padding: 0 0 5px 0; + -fx-border-width: 0; +} + +.menu .scroll-bar { + -fx-opacity: 0; +} + +.menu:hover .scroll-bar { + -fx-opacity: 1; +} + +.menu .cell.indexed-cell.list-cell { + -fx-background-color: transparent; + -fx-padding: 0px; +} + +.menu .cell.indexed-cell.list-cell:empty:hover { + -fx-background-color: transparent; +} + +.menu .cell.indexed-cell.list-cell:hover { +} + +.menu .cell.indexed-cell.list-cell:selected { +} + +.menu .cell.indexed-cell.list-cell:selected .nav-item { + -fx-background-color: rgba(0, 0, 0, 0.1); +} + +.menu .cell.indexed-cell.list-cell:selected .name-label { + -fx-text-fill: -cf-primary-color; +} + +.menu .cell.indexed-cell.list-cell:selected .icon-label > .ikonli-font-icon { + -fx-icon-color: -cf-primary-color; } -.menu .scroll-bar{ - -fx-opacity:0; + +.user-label, .email-label { + -fx-font-size: 13px; + -fx-font-weight: bolder; + -fx-text-fill: -cf-text-color; +} + +.email-label { + -fx-font-weight: lighter; + -fx-text-fill: derive(-cf-text-color, 40%); +} + +/* 滚动条样式 */ +.scroll-bar-style { + -fx-background-color: transparent; +} + +.scroll-bar-style > .viewport { + -fx-background-color: transparent; +} + +.scroll-bar-style .scroll-bar { + /*-fx-block-increment:10000;*/ + -fx-unit-increment: 20; + -fx-background-color: transparent; } -.menu:hover .scroll-bar{ - -fx-opacity:1; + +.scroll-bar-style .scroll-bar > .decrement-button > .decrement-arrow, +.scroll-bar-style .scroll-bar > .increment-button > .increment-arrow { + -fx-background-color: transparent; } -.menu .cell.indexed-cell.list-cell{ - -fx-background-color:transparent; - -fx-padding:0px; + +.scroll-bar-style .scroll-bar:vertical > .decrement-button, +.scroll-bar-style .scroll-bar:vertical > .increment-button { + -fx-pref-height: 0px; + -fx-pref-width: 0.01px; +} + +.scroll-bar-style .scroll-bar:horizontal > .decrement-button, +.scroll-bar-style .scroll-bar:horizontal > .increment-button { + -fx-pref-width: 0px; + -fx-pref-height: 0.01px; +} + +.scroll-bar-style .scroll-bar > .track { + -fx-background-radius: 0px; + -fx-background-color: transparent; +} + +.scroll-bar-style .scroll-bar:vertical > .thumb, .scroll-bar-style .scroll-bar:horizontal > .thumb { + -fx-background-color: rgba(0, 0, 0, 0.2); + -fx-background-insets: 0px; + -fx-background-radius: 3px; } -.menu .cell.indexed-cell.list-cell:empty:hover{ - -fx-background-color:transparent; + +.scroll-bar-style .scroll-bar:vertical { + -fx-padding: 6px 0px 6px 0px; } -.menu .cell.indexed-cell.list-cell:hover{} -.menu .cell.indexed-cell.list-cell:selected{} -.menu .cell.indexed-cell.list-cell:selected .nav-item{ - -fx-background-color: rgba(0,0,0,0.1); + +.scroll-bar-style .scroll-bar:horizontal { + -fx-padding: 0px 6px 0px 6px; } -.menu .cell.indexed-cell.list-cell:selected .name-label{ - -fx-text-fill: #6690FF; + +.scroll-bar-style .scroll-bar:vertical > .thumb, .scroll-bar-style .scroll-bar:vertical > .track { + -fx-background-insets: 0px 0px 0px -6px; } -.menu .cell.indexed-cell.list-cell:selected .icon-label > .ikonli-font-icon{ - -fx-icon-color: #6690FF; + +.scroll-bar-style .scroll-bar:horizontal > .thumb, .scroll-bar-style .scroll-bar:horizontal > .track { + -fx-background-insets: -6px 0px 0px 0px; } \ No newline at end of file -- Gitee