690 lines
14 KiB
Plaintext
690 lines
14 KiB
Plaintext
/* 奶酪云工具箱 - 暗色主题样式表 */
|
||
/* 精确还原 UI设计.html 配色 */
|
||
|
||
/* ==================== 配色变量参考 ==================== */
|
||
/*
|
||
cheese-400: #fbbf24 (主强调色)
|
||
cheese-500: #f59e0b (深强调色)
|
||
cheese-600: #d97706 (更深)
|
||
darkbg-900: #0f172a (主背景)
|
||
darkbg-800: #1e293b (侧边栏)
|
||
darkbg-700: #334155 (边框/悬浮)
|
||
slate-300: #cbd5e1 (主文字)
|
||
slate-400: #94a3b8 (次要文字)
|
||
slate-500: #64748b (弱文字)
|
||
slate-600: #475569 (placeholder)
|
||
*/
|
||
|
||
/* ==================== 全局样式 ==================== */
|
||
* {
|
||
font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
|
||
}
|
||
|
||
QWidget {
|
||
background-color: #0f172a;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
/* ==================== 主窗口 ==================== */
|
||
QMainWindow {
|
||
background-color: #0f172a;
|
||
}
|
||
|
||
/* ==================== 滚动条 ==================== */
|
||
QScrollBar:vertical {
|
||
background: transparent;
|
||
width: 6px;
|
||
margin: 0;
|
||
}
|
||
|
||
QScrollBar::handle:vertical {
|
||
background: #334155;
|
||
border-radius: 3px;
|
||
min-height: 30px;
|
||
}
|
||
|
||
QScrollBar::handle:vertical:hover {
|
||
background: #475569;
|
||
}
|
||
|
||
QScrollBar::add-line:vertical,
|
||
QScrollBar::sub-line:vertical,
|
||
QScrollBar::add-page:vertical,
|
||
QScrollBar::sub-page:vertical {
|
||
background: transparent;
|
||
height: 0;
|
||
}
|
||
|
||
QScrollBar:horizontal {
|
||
background: transparent;
|
||
height: 6px;
|
||
margin: 0;
|
||
}
|
||
|
||
QScrollBar::handle:horizontal {
|
||
background: #334155;
|
||
border-radius: 3px;
|
||
min-width: 30px;
|
||
}
|
||
|
||
QScrollBar::handle:horizontal:hover {
|
||
background: #475569;
|
||
}
|
||
|
||
QScrollBar::add-line:horizontal,
|
||
QScrollBar::sub-line:horizontal,
|
||
QScrollBar::add-page:horizontal,
|
||
QScrollBar::sub-page:horizontal {
|
||
background: transparent;
|
||
width: 0;
|
||
}
|
||
|
||
/* ==================== 一级侧边栏 ==================== */
|
||
#primary_sidebar {
|
||
background-color: #1e293b;
|
||
border-right: 1px solid #334155;
|
||
}
|
||
|
||
/* ==================== 二级侧边栏 ==================== */
|
||
#secondary_sidebar {
|
||
background-color: rgba(30, 41, 59, 0.5);
|
||
border-right: 1px solid #334155;
|
||
}
|
||
|
||
/* ==================== 工作区 ==================== */
|
||
#workspace {
|
||
background-color: #0f172a;
|
||
}
|
||
|
||
/* ==================== 按钮样式 ==================== */
|
||
QPushButton {
|
||
background-color: #334155;
|
||
border: 1px solid #475569;
|
||
border-radius: 8px;
|
||
padding: 8px 16px;
|
||
color: #e2e8f0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
QPushButton:hover {
|
||
background-color: #475569;
|
||
}
|
||
|
||
QPushButton:pressed {
|
||
background-color: #1e293b;
|
||
}
|
||
|
||
QPushButton:disabled {
|
||
background-color: #1e293b;
|
||
color: #64748b;
|
||
}
|
||
|
||
/* 主要按钮 */
|
||
#primary_btn {
|
||
background-color: #f59e0b;
|
||
border: none;
|
||
color: white;
|
||
font-weight: 600;
|
||
}
|
||
|
||
#primary_btn:hover {
|
||
background-color: #fbbf24;
|
||
}
|
||
|
||
#primary_btn:pressed {
|
||
background-color: #d97706;
|
||
}
|
||
|
||
/* 次要按钮 */
|
||
#secondary_btn {
|
||
background-color: transparent;
|
||
border: 1px solid #334155;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
#secondary_btn:hover {
|
||
background-color: #334155;
|
||
}
|
||
|
||
/* ==================== 输入框 ==================== */
|
||
QLineEdit {
|
||
background-color: #0f172a;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
color: #e2e8f0;
|
||
font-size: 13px;
|
||
selection-background-color: #fbbf24;
|
||
selection-color: white;
|
||
}
|
||
|
||
QLineEdit:focus {
|
||
border-color: rgba(251, 191, 36, 0.5);
|
||
}
|
||
|
||
QLineEdit::placeholder {
|
||
color: #475569;
|
||
}
|
||
|
||
/* ==================== 滑块 ==================== */
|
||
QSlider::groove:horizontal {
|
||
background: #0f172a;
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
QSlider::handle:horizontal {
|
||
background: #fbbf24;
|
||
width: 18px;
|
||
height: 18px;
|
||
margin: -5px 0;
|
||
border-radius: 9px;
|
||
}
|
||
|
||
QSlider::handle:horizontal:hover {
|
||
background: #fcd34d;
|
||
}
|
||
|
||
QSlider::sub-page:horizontal {
|
||
background: #fbbf24;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* ==================== 进度条 ==================== */
|
||
QProgressBar {
|
||
background-color: #0f172a;
|
||
border: none;
|
||
border-radius: 4px;
|
||
height: 8px;
|
||
text-align: center;
|
||
color: transparent;
|
||
}
|
||
|
||
QProgressBar::chunk {
|
||
background-color: #fbbf24;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* ==================== 表格 ==================== */
|
||
QTableWidget {
|
||
background-color: #1e293b;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
gridline-color: #334155;
|
||
alternate-background-color: #0f172a;
|
||
}
|
||
|
||
QTableWidget::item {
|
||
padding: 8px;
|
||
color: #e2e8f0;
|
||
border: none;
|
||
}
|
||
|
||
QTableWidget::item:selected {
|
||
background-color: rgba(251, 191, 36, 0.2);
|
||
color: #fbbf24;
|
||
}
|
||
|
||
QHeaderView::section {
|
||
background-color: #0f172a;
|
||
color: #94a3b8;
|
||
padding: 10px;
|
||
border: none;
|
||
border-bottom: 1px solid #334155;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ==================== 列表 ==================== */
|
||
QListWidget {
|
||
background-color: rgba(15, 23, 42, 0.5);
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 4px;
|
||
outline: none;
|
||
}
|
||
|
||
QListWidget::item {
|
||
background-color: #1e293b;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
margin: 4px;
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
QListWidget::item:hover {
|
||
border-color: rgba(251, 191, 36, 0.3);
|
||
}
|
||
|
||
QListWidget::item:selected {
|
||
background-color: rgba(251, 191, 36, 0.1);
|
||
border-color: #fbbf24;
|
||
color: #fbbf24;
|
||
}
|
||
|
||
/* ==================== 标签页 ==================== */
|
||
QTabWidget::pane {
|
||
background-color: transparent;
|
||
border: none;
|
||
}
|
||
|
||
QTabBar::tab {
|
||
background-color: transparent;
|
||
color: #94a3b8;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
}
|
||
|
||
QTabBar::tab:hover {
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
QTabBar::tab:selected {
|
||
color: #fbbf24;
|
||
border-bottom: 2px solid #fbbf24;
|
||
}
|
||
|
||
/* ==================== 单选按钮 ==================== */
|
||
QRadioButton {
|
||
color: #e2e8f0;
|
||
spacing: 8px;
|
||
}
|
||
|
||
QRadioButton::indicator {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 9px;
|
||
border: 2px solid #475569;
|
||
background-color: #0f172a;
|
||
}
|
||
|
||
QRadioButton::indicator:hover {
|
||
border-color: #fbbf24;
|
||
}
|
||
|
||
QRadioButton::indicator:checked {
|
||
background-color: #fbbf24;
|
||
border-color: #fbbf24;
|
||
}
|
||
|
||
/* ==================== 复选框 ==================== */
|
||
QCheckBox {
|
||
color: #e2e8f0;
|
||
spacing: 8px;
|
||
}
|
||
|
||
QCheckBox::indicator {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 4px;
|
||
border: 2px solid #475569;
|
||
background-color: #0f172a;
|
||
}
|
||
|
||
QCheckBox::indicator:hover {
|
||
border-color: #fbbf24;
|
||
}
|
||
|
||
QCheckBox::indicator:checked {
|
||
background-color: #fbbf24;
|
||
border-color: #fbbf24;
|
||
}
|
||
|
||
/* ==================== 下拉框 ==================== */
|
||
QComboBox {
|
||
background-color: #0f172a;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
color: #e2e8f0;
|
||
min-width: 120px;
|
||
}
|
||
|
||
QComboBox:hover {
|
||
border-color: #475569;
|
||
}
|
||
|
||
QComboBox:focus {
|
||
border-color: rgba(251, 191, 36, 0.5);
|
||
}
|
||
|
||
QComboBox::drop-down {
|
||
border: none;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
QComboBox::down-arrow {
|
||
image: none;
|
||
border: none;
|
||
}
|
||
|
||
QComboBox QAbstractItemView {
|
||
background-color: #1e293b;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
selection-background-color: rgba(251, 191, 36, 0.2);
|
||
selection-color: #fbbf24;
|
||
outline: none;
|
||
}
|
||
|
||
/* ==================== SpinBox ==================== */
|
||
QSpinBox {
|
||
background-color: #0f172a;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 6px 10px;
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
QSpinBox:focus {
|
||
border-color: rgba(251, 191, 36, 0.5);
|
||
}
|
||
|
||
QSpinBox::up-button, QSpinBox::down-button {
|
||
background: #334155;
|
||
border: none;
|
||
width: 20px;
|
||
}
|
||
|
||
QSpinBox::up-button:hover, QSpinBox::down-button:hover {
|
||
background: #475569;
|
||
}
|
||
|
||
/* ==================== 分组框 ==================== */
|
||
QGroupBox {
|
||
background-color: transparent;
|
||
border: 1px solid #334155;
|
||
border-radius: 12px;
|
||
margin-top: 16px;
|
||
padding: 16px;
|
||
padding-top: 24px;
|
||
}
|
||
|
||
QGroupBox::title {
|
||
color: #94a3b8;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
subcontrol-origin: margin;
|
||
left: 16px;
|
||
top: 4px;
|
||
padding: 0 8px;
|
||
background: #0f172a;
|
||
}
|
||
|
||
/* ==================== 文本编辑器 ==================== */
|
||
QTextEdit {
|
||
background-color: #0f172a;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
color: #e2e8f0;
|
||
font-family: "Consolas", "Courier New", monospace;
|
||
font-size: 12px;
|
||
selection-background-color: #fbbf24;
|
||
selection-color: #0f172a;
|
||
}
|
||
|
||
QTextEdit:focus {
|
||
border-color: rgba(251, 191, 36, 0.5);
|
||
}
|
||
|
||
/* ==================== 消息框 ==================== */
|
||
QMessageBox {
|
||
background-color: #1e293b;
|
||
}
|
||
|
||
QMessageBox QLabel {
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
QMessageBox QPushButton {
|
||
min-width: 80px;
|
||
}
|
||
|
||
/* ==================== 对话框 ==================== */
|
||
QDialog {
|
||
background-color: #1e293b;
|
||
}
|
||
|
||
/* ==================== 工具提示 ==================== */
|
||
QToolTip {
|
||
background-color: #0f172a;
|
||
color: #e2e8f0;
|
||
border: 1px solid #334155;
|
||
border-radius: 4px;
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
/* ==================== 菜单 ==================== */
|
||
QMenu {
|
||
background-color: #1e293b;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 4px;
|
||
}
|
||
|
||
QMenu::item {
|
||
padding: 8px 24px;
|
||
border-radius: 4px;
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
QMenu::item:selected {
|
||
background-color: rgba(251, 191, 36, 0.2);
|
||
color: #fbbf24;
|
||
}
|
||
|
||
/* ==================== 分割器 ==================== */
|
||
QSplitter::handle {
|
||
background-color: #334155;
|
||
}
|
||
|
||
QSplitter::handle:horizontal {
|
||
width: 1px;
|
||
}
|
||
|
||
QSplitter::handle:vertical {
|
||
height: 1px;
|
||
}
|
||
|
||
/* ==================== 文件对话框 ==================== */
|
||
QFileDialog {
|
||
background-color: #1e293b;
|
||
}
|
||
|
||
QFileDialog QListView,
|
||
QFileDialog QTreeView {
|
||
background-color: #0f172a;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
QFileDialog QListView::item,
|
||
QFileDialog QTreeView::item {
|
||
padding: 4px;
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
QFileDialog QListView::item:selected,
|
||
QFileDialog QTreeView::item:selected {
|
||
background-color: rgba(251, 191, 36, 0.2);
|
||
color: #fbbf24;
|
||
}
|
||
|
||
/* ==================== 卡片样式 ==================== */
|
||
#card {
|
||
background-color: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid #334155;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
#card:hover {
|
||
border-color: rgba(251, 191, 36, 0.5);
|
||
}
|
||
|
||
/* ==================== 标签样式 ==================== */
|
||
QLabel {
|
||
background: transparent;
|
||
}
|
||
|
||
/* ==================== 框架样式 ==================== */
|
||
QFrame {
|
||
background: transparent;
|
||
}
|
||
|
||
/* ==================== 动画相关样式 ==================== */
|
||
/* 注意: Qt不支持CSS动画，但我们可以通过QPropertyAnimation实现 */
|
||
|
||
/* ==================== 预览面板样式 ==================== */
|
||
ImagePreviewWidget {
|
||
background: rgba(15, 23, 42, 0.5);
|
||
border: 1px solid #334155;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
ImagePreviewWidget:hover {
|
||
border-color: rgba(251, 191, 36, 0.3);
|
||
}
|
||
|
||
/* ==================== 双栏预览样式 ==================== */
|
||
DualPreviewWidget {
|
||
background: transparent;
|
||
}
|
||
|
||
/* ==================== 设置页面样式 ==================== */
|
||
SettingsPage QGroupBox {
|
||
background: rgba(30, 41, 59, 0.3);
|
||
border: 1px solid rgba(51, 65, 85, 0.5);
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
SettingsPage QGroupBox::title {
|
||
color: #e2e8f0;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
background: transparent;
|
||
}
|
||
|
||
/* ==================== 滑块增强样式 ==================== */
|
||
QSlider::groove:horizontal {
|
||
background: #1e293b;
|
||
height: 6px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
QSlider::handle:horizontal {
|
||
background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
|
||
stop:0 #fbbf24, stop:1 #f59e0b);
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: -5px 0;
|
||
border-radius: 8px;
|
||
border: 2px solid #fbbf24;
|
||
}
|
||
|
||
QSlider::handle:horizontal:hover {
|
||
background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
|
||
stop:0 #fcd34d, stop:1 #fbbf24);
|
||
border-color: #fcd34d;
|
||
}
|
||
|
||
QSlider::sub-page:horizontal {
|
||
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
|
||
stop:0 #f59e0b, stop:1 #fbbf24);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* ==================== 按钮过渡效果 ==================== */
|
||
QPushButton {
|
||
/* transition通过QPropertyAnimation实现 */
|
||
}
|
||
|
||
#primary_btn {
|
||
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
|
||
stop:0 #fbbf24, stop:1 #f59e0b);
|
||
border: none;
|
||
border-radius: 10px;
|
||
color: white;
|
||
font-weight: 700;
|
||
padding: 10px 20px;
|
||
}
|
||
|
||
#primary_btn:hover {
|
||
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
|
||
stop:0 #fcd34d, stop:1 #fbbf24);
|
||
}
|
||
|
||
#primary_btn:pressed {
|
||
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
|
||
stop:0 #f59e0b, stop:1 #d97706);
|
||
}
|
||
|
||
/* ==================== 输入框焦点效果 ==================== */
|
||
QLineEdit:focus {
|
||
border-color: #fbbf24;
|
||
background: rgba(251, 191, 36, 0.05);
|
||
}
|
||
|
||
/* ==================== 进度条渐变 ==================== */
|
||
QProgressBar::chunk {
|
||
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
|
||
stop:0 #f59e0b, stop:1 #fbbf24);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* ==================== 卡片悬停效果 ==================== */
|
||
#card {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid #334155;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
#card:hover {
|
||
border-color: rgba(251, 191, 36, 0.4);
|
||
background: rgba(30, 41, 59, 0.7);
|
||
}
|
||
|
||
/* ==================== 列表项选中高亮 ==================== */
|
||
QListWidget::item:selected {
|
||
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
|
||
stop:0 rgba(251, 191, 36, 0.15), stop:1 rgba(251, 191, 36, 0.05));
|
||
border-left: 3px solid #fbbf24;
|
||
color: #fbbf24;
|
||
}
|
||
|
||
/* ==================== 标签页增强 ==================== */
|
||
QTabBar::tab {
|
||
background: transparent;
|
||
color: #94a3b8;
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
font-weight: 500;
|
||
}
|
||
|
||
QTabBar::tab:hover {
|
||
color: #cbd5e1;
|
||
background: rgba(51, 65, 85, 0.3);
|
||
}
|
||
|
||
QTabBar::tab:selected {
|
||
color: #fbbf24;
|
||
border-bottom: 2px solid #fbbf24;
|
||
background: rgba(251, 191, 36, 0.05);
|
||
}
|
||
|
||
/* ==================== 复选框增强 ==================== */
|
||
QCheckBox::indicator:checked {
|
||
background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
|
||
stop:0 #fbbf24, stop:1 #f59e0b);
|
||
border-color: #fbbf24;
|
||
image: url(none);
|
||
}
|
||
|
||
QCheckBox::indicator:checked::after {
|
||
color: white;
|
||
}
|