张家训
468 lines
9.9 KiB
CSS
468 lines
9.9 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-primary-light: #dbeafe;
|
|
-fx-font-family: "Segoe UI";
|
|
-fx-font-size: 14px;
|
|
}
|
|
|
|
/* ---- 导航栏 ---- */
|
|
.nav-bar {
|
|
-fx-background-color: -workutils-surface;
|
|
-fx-border-color: -workutils-border;
|
|
-fx-border-width: 0 1 0 0;
|
|
}
|
|
|
|
.nav-separator {
|
|
-fx-padding: 0;
|
|
-fx-min-height: 1px;
|
|
-fx-pref-height: 1px;
|
|
-fx-max-height: 1px;
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.nav-separator .line {
|
|
-fx-border-color: -workutils-border transparent transparent transparent;
|
|
-fx-border-width: 1px 0 0 0;
|
|
-fx-border-insets: 0;
|
|
-fx-padding: 0;
|
|
}
|
|
|
|
/* ============ ToggleButton 导航 ============ */
|
|
.navigation-rail-items {
|
|
-fx-padding: 8px 0;
|
|
}
|
|
|
|
.nav-cell {
|
|
-fx-background-color: transparent;
|
|
-fx-background-radius: 0;
|
|
-fx-background-insets: 0;
|
|
-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;
|
|
}
|
|
|
|
.nav-cell .app-icon {
|
|
-fx-icon-color: -workutils-text-secondary;
|
|
}
|
|
|
|
.nav-cell:hover {
|
|
-fx-background-color: -workutils-card;
|
|
}
|
|
|
|
.nav-cell:selected,
|
|
.nav-cell-active {
|
|
-fx-background-color: -workutils-primary-light;
|
|
-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;
|
|
}
|
|
|
|
.nav-cell:focused {
|
|
-fx-border-color: -workutils-primary;
|
|
-fx-border-width: 1px 1px 1px 3px;
|
|
}
|
|
|
|
.nav-version {
|
|
-fx-text-fill: -workutils-text-muted;
|
|
-fx-padding: 10px 14px;
|
|
}
|
|
|
|
/* ---- 顶栏 ---- */
|
|
.header-bar {
|
|
-fx-background-color: -workutils-surface;
|
|
-fx-border-width: 0 0 1 0;
|
|
-fx-border-color: -workutils-border;
|
|
-fx-pref-height: 48px;
|
|
-fx-min-height: 48px;
|
|
-fx-max-height: 48px;
|
|
}
|
|
|
|
.app-brand-icon {
|
|
-fx-alignment: center;
|
|
-fx-background-color: -workutils-primary;
|
|
-fx-background-radius: 6px;
|
|
-fx-min-width: 32px;
|
|
-fx-pref-width: 32px;
|
|
-fx-max-width: 32px;
|
|
-fx-min-height: 32px;
|
|
-fx-pref-height: 32px;
|
|
-fx-max-height: 32px;
|
|
}
|
|
|
|
.app-brand-icon .app-icon {
|
|
-fx-icon-color: white;
|
|
}
|
|
|
|
/* ---- 内容区 ---- */
|
|
.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;
|
|
}
|
|
|
|
.page-title {
|
|
-fx-font-size: 20px;
|
|
-fx-font-weight: 600;
|
|
-fx-text-fill: -workutils-text;
|
|
}
|
|
|
|
.body-text {
|
|
-fx-font-size: 14px;
|
|
-fx-text-fill: -workutils-text;
|
|
}
|
|
|
|
.secondary-text {
|
|
-fx-font-size: 13px;
|
|
-fx-text-fill: -workutils-text-secondary;
|
|
}
|
|
|
|
.app-icon {
|
|
-fx-icon-color: -workutils-text-secondary;
|
|
}
|
|
|
|
.control-default,
|
|
.text-field-default,
|
|
.combo-default {
|
|
-fx-pref-height: 36px;
|
|
-fx-min-height: 36px;
|
|
}
|
|
|
|
/* ---- 按钮增强 ---- */
|
|
.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-primary:disabled:running {
|
|
-fx-opacity: 1;
|
|
-fx-background-color: -workutils-primary;
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.btn-primary:disabled:running .loading-spinner {
|
|
-fx-progress-color: white;
|
|
-fx-opacity: 1;
|
|
}
|
|
|
|
.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;
|
|
-fx-font-family: "Consolas";
|
|
-fx-font-size: 13px;
|
|
}
|
|
|
|
/* ---- 状态栏 ---- */
|
|
.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;
|
|
-fx-fixed-cell-size: 40px;
|
|
-fx-font-size: 13px;
|
|
}
|
|
|
|
/* ---- 标题 ---- */
|
|
.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: 13px;
|
|
}
|
|
|
|
.muted-text {
|
|
-fx-text-fill: -workutils-text-muted;
|
|
-fx-font-size: 13px;
|
|
}
|
|
|
|
.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;
|
|
-fx-fixed-cell-size: 40px;
|
|
-fx-font-size: 13px;
|
|
}
|
|
|
|
/* ---- 代码文本 ---- */
|
|
.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: 13px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
/* ---- TabPane 样式（API 导出界面） ---- */
|
|
.apidoc-tab-pane {
|
|
-fx-background-color: transparent;
|
|
-fx-padding: 0;
|
|
}
|
|
.apidoc-tab-pane .tab-header-area {
|
|
-fx-background-color: transparent;
|
|
-fx-padding: 0 0 8 0;
|
|
}
|
|
.apidoc-tab-pane .tab-header-background {
|
|
-fx-background-color: transparent;
|
|
-fx-border-color: transparent;
|
|
}
|
|
.apidoc-tab-pane .tab {
|
|
-fx-background-color: transparent;
|
|
-fx-background-radius: 0;
|
|
-fx-border-color: transparent;
|
|
-fx-border-width: 0 0 2 0;
|
|
-fx-padding: 6 16 6 16;
|
|
-fx-cursor: hand;
|
|
}
|
|
.apidoc-tab-pane .tab .tab-label {
|
|
-fx-text-fill: -workutils-text-secondary;
|
|
-fx-font-size: 14px;
|
|
-fx-font-weight: normal;
|
|
}
|
|
.apidoc-tab-pane .tab:selected {
|
|
-fx-border-color: -workutils-primary;
|
|
-fx-border-width: 0 0 2 0;
|
|
}
|
|
.apidoc-tab-pane .tab:selected .tab-label {
|
|
-fx-text-fill: -workutils-primary;
|
|
-fx-font-weight: bold;
|
|
}
|
|
.apidoc-tab-pane .tab:hover:not(:selected) {
|
|
-fx-background-color: rgba(37,99,235,0.05);
|
|
}
|
|
.apidoc-tab-pane .tab-content-area {
|
|
-fx-background-color: transparent;
|
|
-fx-padding: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|