初始化
This commit is contained in:
689
resources/style.qss
Normal file
689
resources/style.qss
Normal file
@@ -0,0 +1,689 @@
|
||||
/* 奶酪云工具箱 - 暗色主题样式表 */
|
||||
/* 精确还原 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;
|
||||
}
|
||||
Reference in New Issue
Block a user