UI整体重构
This commit is contained in:
张家训
@@ -0,0 +1,287 @@
|
||||
/* ============================================================
|
||||
WorkUtils Dark Theme — 基于 AtlantaFX PrimerDark
|
||||
所有颜色变量覆盖为暗色系
|
||||
============================================================ */
|
||||
|
||||
.root {
|
||||
-workutils-bg: #0d1117;
|
||||
-workutils-surface: #161b22;
|
||||
-workutils-card: #21262d;
|
||||
-workutils-border: #30363d;
|
||||
-workutils-text: #c9d1d9;
|
||||
-workutils-text-secondary: #8b949e;
|
||||
-workutils-text-muted: #6e7681;
|
||||
-workutils-primary: #58a6ff;
|
||||
-workutils-danger: #f85149;
|
||||
-workutils-warning: #d29922;
|
||||
-workutils-success: #3fb950;
|
||||
|
||||
-workutils-nav-bg: #0d1117;
|
||||
-workutils-nav-text: #8b949e;
|
||||
-workutils-nav-hover: rgba(255,255,255,0.06);
|
||||
-workutils-nav-active: rgba(88,166,255,0.15);
|
||||
-workutils-nav-bar: #58a6ff;
|
||||
}
|
||||
|
||||
/* ---- 导航栏 ---- */
|
||||
.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.08);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
-fx-background-color: transparent;
|
||||
-fx-text-fill: -workutils-nav-text;
|
||||
-fx-background-radius: 0;
|
||||
-fx-border-width: 0 0 0 3;
|
||||
-fx-border-color: transparent;
|
||||
-fx-padding: 12 16 12 16;
|
||||
-fx-alignment: CENTER-LEFT;
|
||||
-fx-cursor: hand;
|
||||
-fx-max-width: Infinity;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
-fx-background-color: -workutils-nav-hover;
|
||||
-fx-text-fill: #e6edf3;
|
||||
}
|
||||
|
||||
.nav-btn-active {
|
||||
-fx-background-color: -workutils-nav-active;
|
||||
-fx-text-fill: white;
|
||||
-fx-border-color: -workutils-nav-bar;
|
||||
}
|
||||
|
||||
.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: #0d1117;
|
||||
-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: #0d1117;
|
||||
-fx-background-radius: 4;
|
||||
-fx-cursor: hand;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
-fx-background-color: -workutils-warning;
|
||||
-fx-text-fill: #0d1117;
|
||||
-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: #161b22;
|
||||
-fx-text-fill: -workutils-text;
|
||||
-fx-border-color: -workutils-border;
|
||||
-fx-border-width: 1;
|
||||
-fx-border-radius: 4;
|
||||
-fx-background-radius: 4;
|
||||
-fx-background-color: -workutils-surface;
|
||||
}
|
||||
|
||||
/* ---- 状态栏 ---- */
|
||||
.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: rgba(88,166,255,0.12);
|
||||
-fx-background-radius: 6;
|
||||
}
|
||||
|
||||
.db-info-box {
|
||||
-fx-border-color: -workutils-border;
|
||||
-fx-border-width: 1;
|
||||
-fx-border-radius: 4;
|
||||
-fx-background-color: -workutils-surface;
|
||||
-fx-background-radius: 4;
|
||||
}
|
||||
|
||||
/* ---- 表格 ---- */
|
||||
.table-default {
|
||||
-fx-background-color: -workutils-surface;
|
||||
-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: #0d1117;
|
||||
}
|
||||
|
||||
.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: -workutils-surface;
|
||||
-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;
|
||||
}
|
||||
Reference in New Issue
Block a user