修复应用外壳运行时样式与导航契约
This commit is contained in:
张家训
@@ -18,17 +18,8 @@
|
||||
-workutils-success: #10b981;
|
||||
|
||||
-workutils-primary-light: #dbeafe;
|
||||
-workutils-font-ui: "Segoe UI";
|
||||
-workutils-font-mono: "Consolas";
|
||||
-workutils-font-page-title: 20;
|
||||
-workutils-font-section-title: 15;
|
||||
-workutils-font-body: 14;
|
||||
-workutils-font-secondary: 13;
|
||||
-workutils-row-height: 40;
|
||||
-workutils-control-height: 36;
|
||||
-workutils-header-height: 48;
|
||||
-fx-font-family: -workutils-font-ui;
|
||||
-fx-font-size: -workutils-font-body;
|
||||
-fx-font-family: "Segoe UI";
|
||||
-fx-font-size: 14px;
|
||||
}
|
||||
|
||||
/* ---- 导航栏 ---- */
|
||||
@@ -38,145 +29,64 @@
|
||||
-fx-border-width: 0 1 0 0;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
-fx-text-fill: -workutils-text;
|
||||
-fx-padding: 16 14 16 14;
|
||||
-fx-font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-separator {
|
||||
-fx-background-color: -workutils-border;
|
||||
}
|
||||
|
||||
/* ============ ListView 导航（JavaFX 标准化方案） ============ */
|
||||
|
||||
.nav-list {
|
||||
-fx-background-color: transparent;
|
||||
-fx-background-insets: 0;
|
||||
-fx-border-width: 0;
|
||||
-fx-padding: 0;
|
||||
/* ============ ToggleButton 导航 ============ */
|
||||
.navigation-rail-items {
|
||||
-fx-padding: 8px 0;
|
||||
}
|
||||
|
||||
/* 强制 ListView 所有内部容器透明，确保空区域不显示杂色 */
|
||||
.nav-list,
|
||||
.nav-list > *,
|
||||
.nav-list .list-view,
|
||||
.nav-list .viewport,
|
||||
.nav-list .virtual-flow,
|
||||
.nav-list .virtual-flow > *,
|
||||
.nav-list .clipped-container,
|
||||
.nav-list .sheet,
|
||||
.nav-list .corner {
|
||||
-fx-background-color: transparent;
|
||||
-fx-background-insets: 0;
|
||||
}
|
||||
|
||||
.nav-list .list-cell,
|
||||
.nav-list .list-cell:empty,
|
||||
.nav-list .list-cell:filled:empty {
|
||||
-fx-background-color: transparent;
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
.nav-list .scroll-bar:vertical {
|
||||
-fx-background-color: transparent;
|
||||
-fx-pref-width: 6;
|
||||
}
|
||||
.nav-list .scroll-bar .thumb {
|
||||
-fx-background-color: -workutils-border;
|
||||
-fx-background-radius: 3;
|
||||
}
|
||||
.nav-list .scroll-bar .thumb:hover {
|
||||
-fx-background-color: -workutils-text-muted;
|
||||
}
|
||||
.nav-list .scroll-bar .increment-button,
|
||||
.nav-list .scroll-bar .decrement-button {
|
||||
-fx-background-color: transparent;
|
||||
-fx-padding: 0;
|
||||
}
|
||||
|
||||
/* 每个导航项（Cell） */
|
||||
.nav-cell {
|
||||
-fx-background-color: transparent;
|
||||
-fx-background-radius: 0;
|
||||
-fx-background-insets: 0;
|
||||
-fx-padding: 10 14 10 14;
|
||||
-fx-cursor: hand;
|
||||
-fx-border-width: 0;
|
||||
/* 平滑过渡背景色和文字色 */
|
||||
}
|
||||
|
||||
.nav-cell .label {
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0 0 0 3px;
|
||||
-fx-border-radius: 0;
|
||||
-fx-padding: 0 14px 0 11px;
|
||||
-fx-text-fill: -workutils-text-secondary;
|
||||
/* 深色背景下的文字阴影，提升对比度 */
|
||||
-fx-font-size: 14px;
|
||||
-fx-font-weight: 500;
|
||||
-fx-graphic-text-gap: 12px;
|
||||
-fx-cursor: hand;
|
||||
}
|
||||
|
||||
/* 移除 JavaFX ListCell 默认焦点环（让选中态边框干净） */
|
||||
.nav-list .list-cell {
|
||||
.nav-cell .app-icon {
|
||||
-fx-icon-color: -workutils-text-secondary;
|
||||
}
|
||||
|
||||
/* 强制空 cell 完全透明（含 placeholder、footer 等场景） */
|
||||
.nav-list .list-cell:empty,
|
||||
.nav-list .list-cell:filled:empty {
|
||||
-fx-background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* hover 状态 */
|
||||
.nav-cell:hover {
|
||||
-fx-background-color: -workutils-card;
|
||||
}
|
||||
|
||||
/* 兜底：所有 selected cell（含 empty）默认透明，防止虚拟化复用时空 cell 闪现蓝色 */
|
||||
.nav-list .list-cell:selected {
|
||||
-fx-background-color: transparent;
|
||||
}
|
||||
|
||||
/* selected 状态：强制 padding、background-insets、文字色一致
|
||||
关键：用 :filled:selected 而非自定义 class，避免 JavaFX 内置样式覆盖 */
|
||||
.nav-list .list-cell:filled:selected {
|
||||
-fx-background-color: -workutils-primary-light;
|
||||
-fx-background-insets: 0;
|
||||
-fx-padding: 10 14 10 14;
|
||||
}
|
||||
|
||||
.nav-list .list-cell:filled:selected .label {
|
||||
-fx-text-fill: -workutils-primary !important;
|
||||
-fx-font-weight: 600;
|
||||
/* 移除 dropshadow，让文字干净锐利 */
|
||||
}
|
||||
|
||||
.nav-list .list-cell:filled:selected .nav-indicator {
|
||||
-fx-fill: #2563eb;
|
||||
}
|
||||
|
||||
/* 兼容：之前手动加的 .nav-cell-active 类名也支持 */
|
||||
.nav-cell:selected,
|
||||
.nav-cell-active {
|
||||
-fx-background-color: -workutils-primary-light;
|
||||
-fx-background-insets: 0;
|
||||
-fx-padding: 10 14 10 14;
|
||||
-fx-border-color: -workutils-primary;
|
||||
-fx-border-width: 0 0 0 3px;
|
||||
-fx-text-fill: -workutils-primary;
|
||||
-fx-font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-cell:selected .app-icon,
|
||||
.nav-cell-active .app-icon {
|
||||
-fx-icon-color: -workutils-primary;
|
||||
}
|
||||
|
||||
/* 按下状态：微妙的反馈 */
|
||||
.nav-cell:pressed {
|
||||
-fx-background-color: -workutils-primary-light;
|
||||
}
|
||||
|
||||
/* ListView 自身获得焦点时也保持透明，不显示蓝色环 */
|
||||
/* 左侧指示条 */
|
||||
.nav-indicator {
|
||||
-fx-fill: transparent;
|
||||
-fx-arc-width: 2;
|
||||
-fx-arc-height: 2;
|
||||
.nav-cell:focused {
|
||||
-fx-border-color: -workutils-primary;
|
||||
-fx-border-width: 1px 1px 1px 3px;
|
||||
}
|
||||
|
||||
.nav-cell-active .nav-indicator {
|
||||
-fx-fill: #2563eb;
|
||||
}
|
||||
|
||||
/* 点击涟漪层 */
|
||||
.nav-version {
|
||||
-fx-text-fill: -workutils-text-muted;
|
||||
-fx-padding: 10 14 10 14;
|
||||
-fx-padding: 10px 14px;
|
||||
}
|
||||
|
||||
/* ---- 顶栏 ---- */
|
||||
@@ -184,9 +94,9 @@
|
||||
-fx-background-color: -workutils-surface;
|
||||
-fx-border-width: 0 0 1 0;
|
||||
-fx-border-color: -workutils-border;
|
||||
-fx-pref-height: -workutils-header-height;
|
||||
-fx-min-height: -workutils-header-height;
|
||||
-fx-max-height: -workutils-header-height;
|
||||
-fx-pref-height: 48px;
|
||||
-fx-min-height: 48px;
|
||||
-fx-max-height: 48px;
|
||||
}
|
||||
|
||||
/* ---- 内容区 ---- */
|
||||
@@ -204,18 +114,18 @@
|
||||
}
|
||||
|
||||
.page-title {
|
||||
-fx-font-size: -workutils-font-page-title;
|
||||
-fx-font-size: 20px;
|
||||
-fx-font-weight: 600;
|
||||
-fx-text-fill: -workutils-text;
|
||||
}
|
||||
|
||||
.body-text {
|
||||
-fx-font-size: -workutils-font-body;
|
||||
-fx-font-size: 14px;
|
||||
-fx-text-fill: -workutils-text;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
-fx-font-size: -workutils-font-secondary;
|
||||
-fx-font-size: 13px;
|
||||
-fx-text-fill: -workutils-text-secondary;
|
||||
}
|
||||
|
||||
@@ -226,8 +136,8 @@
|
||||
.control-default,
|
||||
.text-field-default,
|
||||
.combo-default {
|
||||
-fx-pref-height: -workutils-control-height;
|
||||
-fx-min-height: -workutils-control-height;
|
||||
-fx-pref-height: 36px;
|
||||
-fx-min-height: 36px;
|
||||
}
|
||||
|
||||
/* ---- 按钮增强 ---- */
|
||||
@@ -306,8 +216,8 @@
|
||||
-fx-border-width: 1;
|
||||
-fx-border-radius: 4;
|
||||
-fx-background-radius: 4;
|
||||
-fx-font-family: -workutils-font-mono;
|
||||
-fx-font-size: -workutils-font-body;
|
||||
-fx-font-family: "Consolas";
|
||||
-fx-font-size: 13px;
|
||||
}
|
||||
|
||||
/* ---- 状态栏 ---- */
|
||||
@@ -339,25 +249,25 @@
|
||||
-fx-border-color: -workutils-border;
|
||||
-fx-border-width: 1;
|
||||
-fx-border-radius: 4;
|
||||
-fx-fixed-cell-size: -workutils-row-height;
|
||||
-fx-font-size: -workutils-font-body;
|
||||
-fx-fixed-cell-size: 40px;
|
||||
-fx-font-size: 13px;
|
||||
}
|
||||
|
||||
/* ---- 标题 ---- */
|
||||
.section-title {
|
||||
-fx-font-size: -workutils-font-section-title;
|
||||
-fx-font-size: 15px;
|
||||
-fx-font-weight: 600;
|
||||
-fx-text-fill: -workutils-text;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
-fx-text-fill: -workutils-text-secondary;
|
||||
-fx-font-size: -workutils-font-secondary;
|
||||
-fx-font-size: 13px;
|
||||
}
|
||||
|
||||
.muted-text {
|
||||
-fx-text-fill: -workutils-text-muted;
|
||||
-fx-font-size: -workutils-font-secondary;
|
||||
-fx-font-size: 13px;
|
||||
}
|
||||
|
||||
.danger-text {
|
||||
@@ -421,13 +331,13 @@
|
||||
-fx-border-color: -workutils-border;
|
||||
-fx-border-width: 1;
|
||||
-fx-border-radius: 4;
|
||||
-fx-fixed-cell-size: -workutils-row-height;
|
||||
-fx-font-size: -workutils-font-body;
|
||||
-fx-fixed-cell-size: 40px;
|
||||
-fx-font-size: 13px;
|
||||
}
|
||||
|
||||
/* ---- 代码文本 ---- */
|
||||
.mono-text {
|
||||
-fx-font-family: -workutils-font-mono;
|
||||
-fx-font-family: "Consolas";
|
||||
}
|
||||
|
||||
/* ---- 主题切换按钮 ---- */
|
||||
@@ -439,7 +349,7 @@
|
||||
/* ---- 紧凑列表单元格 ---- */
|
||||
.compact-list .list-cell {
|
||||
-fx-padding: 3 8 3 8;
|
||||
-fx-font-size: -workutils-font-secondary;
|
||||
-fx-font-size: 13px;
|
||||
}
|
||||
|
||||
.compact-list .list-cell:selected {
|
||||
@@ -473,7 +383,7 @@
|
||||
}
|
||||
.apidoc-tab-pane .tab .tab-label {
|
||||
-fx-text-fill: -workutils-text-secondary;
|
||||
-fx-font-size: -workutils-font-body;
|
||||
-fx-font-size: 14px;
|
||||
-fx-font-weight: normal;
|
||||
}
|
||||
.apidoc-tab-pane .tab:selected {
|
||||
|
||||
Reference in New Issue
Block a user