453 lines
10 KiB
CSS
453 lines
10 KiB
CSS
/* ============================================================
|
||
WorkUtils Light Theme — 基于 AtlantaFX PrimerLight
|
||
定义所有项目自定义样式类,覆盖 AtlantaFX 默认
|
||
============================================================ */
|
||
|
||
/* ---- 根变量 ---- */
|
||
.root {
|
||
-workutils-bg: #f8fafc;
|
||
-workutils-surface: #ffffff;
|
||
-workutils-card: #f1f5f9;
|
||
-workutils-border: #e2e8f0;
|
||
-workutils-text: #1e293b;
|
||
-workutils-text-secondary: #64748b;
|
||
-workutils-text-muted: #94a3b8;
|
||
-workutils-primary: #2563eb;
|
||
-workutils-danger: #ef4444;
|
||
-workutils-warning: #f59e0b;
|
||
-workutils-success: #10b981;
|
||
|
||
-workutils-nav-bg: #1e293b;
|
||
-workutils-nav-text: #ffffff;
|
||
-workutils-nav-hover: rgba(255,255,255,0.10);
|
||
-workutils-nav-active: rgba(37,99,235,0.35);
|
||
-workutils-nav-bar: #2563eb;
|
||
}
|
||
|
||
/* ---- 导航栏 ---- */
|
||
.nav-bar {
|
||
-fx-background-color: -workutils-nav-bg;
|
||
}
|
||
|
||
.nav-brand {
|
||
-fx-text-fill: white;
|
||
-fx-padding: 18 14 18 14;
|
||
-fx-font-weight: bold;
|
||
}
|
||
|
||
.nav-separator {
|
||
-fx-background-color: rgba(255,255,255,0.1);
|
||
}
|
||
|
||
/* ============ ListView 导航(JavaFX 标准化方案) ============ */
|
||
|
||
.nav-list {
|
||
-fx-background-color: transparent;
|
||
-fx-background-insets: 0;
|
||
-fx-border-width: 0;
|
||
-fx-padding: 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: rgba(255,255,255,0.15);
|
||
-fx-background-radius: 3;
|
||
}
|
||
.nav-list .scroll-bar .thumb:hover {
|
||
-fx-background-color: rgba(255,255,255,0.25);
|
||
}
|
||
.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;
|
||
/* 平滑过渡背景色和文字色 */
|
||
-fx-transition: -fx-background-color 150ms ease-out;
|
||
}
|
||
|
||
.nav-cell .label {
|
||
-fx-text-fill: white;
|
||
/* 深色背景下的文字阴影,提升对比度 */
|
||
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.45), 3, 0, 0, 1);
|
||
-fx-transition: -fx-text-fill 150ms ease-out,
|
||
-fx-effect 150ms ease-out;
|
||
}
|
||
|
||
/* 移除 JavaFX ListCell 默认焦点环(让选中态边框干净) */
|
||
.nav-list .list-cell {
|
||
-fx-focus-color: transparent;
|
||
-fx-faint-focus-color: transparent;
|
||
-fx-border-color: transparent;
|
||
-fx-border-width: 0;
|
||
}
|
||
|
||
/* 强制空 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-nav-hover;
|
||
}
|
||
|
||
/* 兜底:所有 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-nav-active;
|
||
-fx-background-insets: 0;
|
||
-fx-padding: 10 14 10 14;
|
||
}
|
||
|
||
.nav-list .list-cell:filled:selected .label {
|
||
-fx-text-fill: white !important;
|
||
-fx-font-weight: 600;
|
||
/* 移除 dropshadow,让文字干净锐利 */
|
||
-fx-effect: null !important;
|
||
}
|
||
|
||
.nav-list .list-cell:filled:selected .nav-indicator {
|
||
-fx-fill: #2563eb;
|
||
-fx-effect: dropshadow(gaussian, #60a5fa, 6, 0, 0, 0);
|
||
}
|
||
|
||
/* 兼容:之前手动加的 .nav-cell-active 类名也支持 */
|
||
.nav-cell-active {
|
||
-fx-background-color: -workutils-nav-active;
|
||
-fx-background-insets: 0;
|
||
-fx-padding: 10 14 10 14;
|
||
}
|
||
|
||
/* 按下状态:微妙的反馈 */
|
||
.nav-cell:pressed {
|
||
-fx-background-color: rgba(96,165,250,0.35);
|
||
}
|
||
|
||
/* ListView 自身获得焦点时也保持透明,不显示蓝色环 */
|
||
.nav-list:focused {
|
||
-fx-background-color: transparent;
|
||
-fx-border-color: transparent;
|
||
}
|
||
|
||
/* 左侧指示条 */
|
||
.nav-indicator {
|
||
-fx-fill: transparent;
|
||
-fx-arc-width: 2;
|
||
-fx-arc-height: 2;
|
||
-fx-transition: -fx-fill 150ms ease-out;
|
||
}
|
||
|
||
.nav-cell-active .nav-indicator {
|
||
-fx-fill: #2563eb;
|
||
-fx-effect: dropshadow(gaussian, #60a5fa, 6, 0, 0, 0);
|
||
}
|
||
|
||
/* 点击涟漪层 */
|
||
.nav-ripple {
|
||
-fx-fill: rgba(96,165,250,0.4);
|
||
-fx-opacity: 0;
|
||
}
|
||
|
||
.nav-version {
|
||
-fx-text-fill: -workutils-text-muted;
|
||
-fx-padding: 10 14 10 14;
|
||
}
|
||
|
||
/* ---- 顶栏 ---- */
|
||
.header-bar {
|
||
-fx-background-color: -workutils-surface;
|
||
-fx-border-width: 0 0 1 0;
|
||
-fx-border-color: -workutils-border;
|
||
-fx-pref-height: 48;
|
||
}
|
||
|
||
/* ---- 内容区 ---- */
|
||
.content-area {
|
||
-fx-background-color: -workutils-bg;
|
||
}
|
||
|
||
/* ---- 卡片 ---- */
|
||
.card {
|
||
-fx-background-color: -workutils-surface;
|
||
-fx-background-radius: 6;
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-radius: 6;
|
||
-fx-border-width: 1;
|
||
}
|
||
|
||
/* ---- 按钮增强 ---- */
|
||
.btn-primary {
|
||
-fx-background-color: -workutils-primary;
|
||
-fx-text-fill: white;
|
||
-fx-font-weight: bold;
|
||
-fx-background-radius: 4;
|
||
-fx-cursor: hand;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
-fx-background-color: derive(-workutils-primary, -12%);
|
||
}
|
||
|
||
.btn-danger {
|
||
-fx-background-color: -workutils-danger;
|
||
-fx-text-fill: white;
|
||
-fx-background-radius: 4;
|
||
-fx-cursor: hand;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
-fx-background-color: derive(-workutils-danger, -12%);
|
||
}
|
||
|
||
.btn-success {
|
||
-fx-background-color: -workutils-success;
|
||
-fx-text-fill: white;
|
||
-fx-background-radius: 4;
|
||
-fx-cursor: hand;
|
||
}
|
||
|
||
.btn-warning {
|
||
-fx-background-color: -workutils-warning;
|
||
-fx-text-fill: white;
|
||
-fx-background-radius: 4;
|
||
-fx-cursor: hand;
|
||
}
|
||
|
||
.btn-small {
|
||
-fx-background-color: -workutils-card;
|
||
-fx-text-fill: -workutils-text-secondary;
|
||
-fx-background-radius: 4;
|
||
-fx-padding: 4 12 4 12;
|
||
-fx-cursor: hand;
|
||
}
|
||
|
||
.btn-small:hover {
|
||
-fx-background-color: -workutils-border;
|
||
}
|
||
|
||
/* ---- 文本域 ---- */
|
||
.text-field-default {
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
-fx-background-radius: 4;
|
||
-fx-padding: 6 10;
|
||
}
|
||
|
||
.text-area-default {
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
-fx-background-radius: 4;
|
||
-fx-background-insets: 0;
|
||
-fx-padding: 8;
|
||
}
|
||
|
||
/* ---- 日志区 ---- */
|
||
.log-area {
|
||
-fx-control-inner-background: #f8fafc;
|
||
-fx-text-fill: -workutils-text;
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
-fx-background-radius: 4;
|
||
}
|
||
|
||
/* ---- 状态栏 ---- */
|
||
.status-bar {
|
||
-fx-background-color: -workutils-card;
|
||
-fx-border-width: 1 0 0 0;
|
||
-fx-border-color: -workutils-border;
|
||
-fx-text-fill: -workutils-text-secondary;
|
||
-fx-padding: 8 12 8 12;
|
||
}
|
||
|
||
/* ---- DB 信息栏 ---- */
|
||
.db-info-bar {
|
||
-fx-background-color: derive(#2563eb, 90%);
|
||
-fx-background-radius: 6;
|
||
}
|
||
|
||
.db-info-box {
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
-fx-background-color: white;
|
||
-fx-background-radius: 4;
|
||
}
|
||
|
||
/* ---- 表格 ---- */
|
||
.table-default {
|
||
-fx-background-color: white;
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
}
|
||
|
||
/* ---- 标题 ---- */
|
||
.section-title {
|
||
-fx-font-weight: bold;
|
||
-fx-text-fill: -workutils-text;
|
||
}
|
||
|
||
.hint-text {
|
||
-fx-text-fill: -workutils-text-secondary;
|
||
}
|
||
|
||
.muted-text {
|
||
-fx-text-fill: -workutils-text-muted;
|
||
}
|
||
|
||
.danger-text {
|
||
-fx-text-fill: -workutils-danger;
|
||
}
|
||
|
||
.warning-text {
|
||
-fx-text-fill: -workutils-warning;
|
||
}
|
||
|
||
/* ---- 欢迎页 ---- */
|
||
.welcome-page {
|
||
-fx-background-color: -workutils-bg;
|
||
}
|
||
|
||
.welcome-heading {
|
||
-fx-font-weight: bold;
|
||
-fx-text-fill: -workutils-text;
|
||
}
|
||
|
||
.welcome-desc {
|
||
-fx-text-fill: -workutils-text-secondary;
|
||
}
|
||
|
||
/* ---- 分割线 ---- */
|
||
.divider {
|
||
-fx-background-color: -workutils-border;
|
||
}
|
||
|
||
/* ---- 切换按钮组 ---- */
|
||
.toggle-btn {
|
||
-fx-background-radius: 4;
|
||
-fx-cursor: hand;
|
||
-fx-padding: 6 16;
|
||
}
|
||
|
||
.toggle-btn:selected {
|
||
-fx-background-color: -workutils-primary;
|
||
-fx-text-fill: white;
|
||
}
|
||
|
||
.toggle-btn:not(:selected) {
|
||
-fx-background-color: -workutils-card;
|
||
-fx-text-fill: -workutils-text;
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
}
|
||
|
||
/* ---- ComboBox ---- */
|
||
.combo-default {
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
-fx-background-radius: 4;
|
||
}
|
||
|
||
/* ---- 项目树 ---- */
|
||
.project-tree {
|
||
-fx-background-color: white;
|
||
-fx-border-color: -workutils-border;
|
||
-fx-border-width: 1;
|
||
-fx-border-radius: 4;
|
||
}
|
||
|
||
/* ---- 代码文本 ---- */
|
||
.mono-text {
|
||
-fx-font-family: "Consolas";
|
||
}
|
||
|
||
/* ---- 主题切换按钮 ---- */
|
||
.theme-toggle-row {
|
||
-fx-padding: 8 0;
|
||
-fx-alignment: CENTER_LEFT;
|
||
}
|
||
|
||
/* ---- 紧凑列表单元格 ---- */
|
||
.compact-list .list-cell {
|
||
-fx-padding: 3 8 3 8;
|
||
-fx-font-size: 13;
|
||
}
|
||
|
||
.compact-list .list-cell:selected {
|
||
-fx-background-color: derive(-workutils-primary, 85%);
|
||
-fx-text-fill: -workutils-text;
|
||
}
|
||
|
||
.compact-list .list-cell:filled:hover {
|
||
-fx-background-color: -workutils-card;
|
||
}
|
||
.operation-status {
|
||
-fx-padding: 6 0;
|
||
}
|
||
|
||
.operation-status-success .label {
|
||
-fx-text-fill: #059669;
|
||
}
|
||
|
||
.operation-status-error .label {
|
||
-fx-text-fill: #dc2626;
|
||
}
|
||
|
||
.empty-state {
|
||
-fx-padding: 28 20;
|
||
-fx-background-color: #f8fafc;
|
||
-fx-background-radius: 8;
|
||
}
|
||
|
||
.empty-state-title {
|
||
-fx-text-fill: #1e293b;
|
||
}
|
||
|
||
.empty-state-description {
|
||
-fx-text-fill: #64748b;
|
||
}
|