1706 lines
62 KiB
Python
1706 lines
62 KiB
Python
#!/usr/bin/env python3
|
||
# -*- coding: utf-8 -*-
|
||
"""
|
||
MetaCore 应用程序样式表定义
|
||
|
||
本文件包含了 MetaCore 项目管理平台的完整 UI 样式定义，采用现代化的深色主题设计。
|
||
样式表使用 Qt StyleSheet (QSS) 语法，类似于 CSS，为应用程序提供统一的视觉风格。
|
||
|
||
主要特色：
|
||
- 深色主题设计，护眼且现代
|
||
- 紫色主色调 (#8b5cf6)，体现科技感
|
||
- 丰富的交互效果和动画
|
||
- 响应式设计，支持不同屏幕尺寸
|
||
- 完整的组件样式覆盖
|
||
|
||
作者: MetaCore Team
|
||
版本: 1.0.0
|
||
更新日期: 2024
|
||
"""
|
||
|
||
class StyleSheet:
|
||
"""
|
||
样式表管理类
|
||
|
||
这个类负责管理整个应用程序的样式表，提供统一的样式获取接口。
|
||
采用静态方法设计，方便在应用程序的任何地方调用。
|
||
|
||
主要功能：
|
||
- 提供完整的应用程序样式表
|
||
- 统一管理颜色主题和设计规范
|
||
- 支持未来的主题切换扩展
|
||
"""
|
||
|
||
@staticmethod
|
||
def get_main_style():
|
||
"""
|
||
获取主样式表
|
||
|
||
返回完整的 QSS 样式表字符串，包含所有 UI 组件的样式定义。
|
||
样式表采用分层设计，从全局样式到具体组件样式，确保样式的一致性和可维护性。
|
||
|
||
样式表结构：
|
||
1. 全局样式 - 基础颜色、字体等
|
||
2. 主窗口样式 - 窗口背景等
|
||
3. 侧边栏样式 - 导航、按钮等
|
||
4. 项目区域样式 - 工具栏、搜索等
|
||
5. 项目卡片样式 - 卡片布局和交互
|
||
6. 对话框样式 - 弹窗和表单
|
||
7. 通用组件样式 - 滚动条、菜单等
|
||
|
||
Returns:
|
||
str: 完整的 QSS 样式表字符串
|
||
"""
|
||
return """
|
||
/* ========================================
|
||
全局样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 全局 Widget 样式
|
||
* 定义整个应用程序的基础外观，包括背景色、文字颜色和字体
|
||
*
|
||
* 颜色说明：
|
||
* - #1e1e2e: 深蓝灰色背景，护眼且现代
|
||
* - #ffffff: 纯白色文字，确保良好的对比度和可读性
|
||
*
|
||
* 字体说明：
|
||
* 使用系统默认字体栈，确保在不同操作系统上的最佳显示效果
|
||
*/
|
||
QWidget {
|
||
background-color: #1e1e2e; /* 主背景色 - 深蓝灰 */
|
||
color: #ffffff; /* 主文字色 - 纯白 */
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
font-size: 14px; /* 标准字体大小 */
|
||
}
|
||
|
||
/*
|
||
* 主窗口样式
|
||
* 设置应用程序主窗口的背景色，与全局样式保持一致
|
||
*/
|
||
QMainWindow {
|
||
background-color: #1e1e2e; /* 与全局背景色一致 */
|
||
}
|
||
|
||
/* ========================================
|
||
侧边栏样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 侧边栏主容器样式
|
||
* 侧边栏是应用程序的主要导航区域，采用比主背景稍亮的颜色
|
||
* 右侧边框用于与主内容区域分隔
|
||
*/
|
||
Sidebar {
|
||
background-color: #252538; /* 侧边栏背景 - 比主背景稍亮 */
|
||
border-right: 1px solid #3a3a4a; /* 右边框 - 分隔线 */
|
||
}
|
||
|
||
/*
|
||
* Logo 区域样式
|
||
* 位于侧边栏顶部，显示应用程序标识
|
||
* 底部边框用于与下方内容分隔
|
||
*/
|
||
#logoWidget {
|
||
background-color: #252538; /* 与侧边栏背景一致 */
|
||
border-bottom: 1px solid #3a3a4a; /* 底部分隔线 */
|
||
}
|
||
|
||
/*
|
||
* Logo 图标样式
|
||
* 使用品牌主色调紫色，突出应用程序标识
|
||
*/
|
||
#logoIcon {
|
||
font-size: 24px; /* 较大的图标尺寸 */
|
||
background-color: transparent; /* 透明背景 */
|
||
color: #8b5cf6; /* 品牌紫色 */
|
||
font-weight: bold; /* 粗体强调 */
|
||
}
|
||
|
||
/*
|
||
* Logo 文字样式
|
||
* 应用程序名称显示，使用白色确保可读性
|
||
*/
|
||
#logoText {
|
||
font-size: 18px; /* 适中的文字大小 */
|
||
font-weight: bold; /* 粗体强调 */
|
||
color: #ffffff; /* 白色文字 */
|
||
margin-left: 8px; /* 与图标的间距 */
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/*
|
||
* 快速操作区域样式
|
||
* 包含创建项目和导入项目等主要操作按钮
|
||
* 底部边框用于与导航菜单分隔
|
||
*/
|
||
#quickActions {
|
||
background-color: #252538; /* 与侧边栏背景一致 */
|
||
border-bottom: 1px solid #3a3a4a; /* 底部分隔线 */
|
||
}
|
||
|
||
/*
|
||
* 创建项目按钮样式
|
||
* 主要操作按钮，使用品牌紫色突出显示
|
||
* 包含悬停效果和微动画，提升用户体验
|
||
*/
|
||
#createBtn {
|
||
background-color: #8b5cf6; /* 品牌紫色背景 */
|
||
color: white; /* 白色文字 */
|
||
border: none; /* 无边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 12px 16px; /* 内边距 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
text-align: left; /* 左对齐 */
|
||
font-size: 13px; /* 字体大小 */
|
||
transition: all 0.2s ease; /* 平滑过渡动画 */
|
||
}
|
||
|
||
/*
|
||
* 创建按钮悬停效果
|
||
* 颜色变深、轻微上移、添加阴影，增强交互反馈
|
||
*/
|
||
#createBtn:hover {
|
||
background-color: #7c3aed; /* 更深的紫色 */
|
||
transform: translateY(-1px); /* 向上移动1像素 */
|
||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); /* 紫色阴影 */
|
||
}
|
||
|
||
/*
|
||
* 侧边栏导入项目按钮样式
|
||
* 次要操作按钮，使用灰色调，相对低调
|
||
* 与创建按钮保持一致的字体大小
|
||
*/
|
||
#sidebarImportBtn {
|
||
background-color: #374151; /* 深灰色背景 */
|
||
color: #d1d5db; /* 浅灰色文字 */
|
||
border: 1px solid #4b5563; /* 灰色边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 12px 16px; /* 内边距 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
text-align: left; /* 左对齐 */
|
||
font-size: 13px; /* 与创建按钮一致的字体大小 */
|
||
transition: all 0.2s ease; /* 平滑过渡动画 */
|
||
}
|
||
|
||
/*
|
||
* 侧边栏导入按钮悬停效果
|
||
* 背景变亮、文字变白、添加微动画
|
||
*/
|
||
#sidebarImportBtn:hover {
|
||
background-color: #4b5563; /* 更亮的灰色 */
|
||
color: white; /* 白色文字 */
|
||
transform: translateY(-1px); /* 向上移动1像素 */
|
||
box-shadow: 0 4px 12px rgba(75, 85, 99, 0.3); /* 灰色阴影 */
|
||
}
|
||
|
||
/*
|
||
* 导航分组标题样式
|
||
* 用于分组显示导航项目，如"我的项目"、"项目类型"等
|
||
* 使用大写字母和字母间距增强视觉层次
|
||
*/
|
||
#navSectionTitle {
|
||
background-color: transparent; /* 透明背景 */
|
||
color: #9ca3af; /* 中性灰色 */
|
||
border: none; /* 无边框 */
|
||
padding: 12px 20px; /* 内边距 */
|
||
text-align: left; /* 左对齐 */
|
||
font-weight: 600; /* 粗体 */
|
||
font-size: 13px; /* 较小字体 */
|
||
text-transform: uppercase; /* 大写字母 */
|
||
letter-spacing: 0.5px; /* 字母间距 */
|
||
transition: all 0.2s ease; /* 平滑过渡 */
|
||
}
|
||
|
||
/*
|
||
* 导航分组标题悬停效果
|
||
* 背景变亮，文字变白，增强交互反馈
|
||
*/
|
||
#navSectionTitle:hover {
|
||
background-color: #3a3a4a; /* 深灰背景 */
|
||
color: #ffffff; /* 白色文字 */
|
||
}
|
||
|
||
/*
|
||
* 导航项目样式
|
||
* 具体的导航选项，如"项目概览"、"收藏项目"等
|
||
* 左侧缩进表示层级关系，圆角和边距增强视觉效果
|
||
*/
|
||
#navItem {
|
||
background-color: transparent; /* 透明背景 */
|
||
color: #9ca3af; /* 中性灰色 */
|
||
border: none; /* 无边框 */
|
||
padding: 12px 20px 12px 40px; /* 左侧缩进40px */
|
||
text-align: left; /* 左对齐 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
border-radius: 8px; /* 圆角 */
|
||
margin: 2px 12px; /* 外边距 */
|
||
transition: all 0.2s ease; /* 平滑过渡 */
|
||
}
|
||
|
||
/*
|
||
* 导航项目悬停效果
|
||
* 背景变亮、文字变白、轻微右移，增强交互感
|
||
*/
|
||
#navItem:hover {
|
||
background-color: #3a3a4a; /* 深灰背景 */
|
||
color: #ffffff; /* 白色文字 */
|
||
transform: translateX(2px); /* 向右移动2像素 */
|
||
}
|
||
|
||
/*
|
||
* 导航项目选中状态
|
||
* 当前选中的导航项，使用品牌色突出显示
|
||
* 左边框和背景色变化表示选中状态
|
||
*/
|
||
#navItem:checked {
|
||
background-color: rgba(139, 92, 246, 0.15); /* 半透明紫色背景 */
|
||
color: #8b5cf6; /* 品牌紫色文字 */
|
||
border-left: 3px solid #8b5cf6; /* 左侧紫色边框 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
}
|
||
|
||
/*
|
||
* 用户信息区域样式
|
||
* 位于侧边栏底部，显示当前用户信息
|
||
* 顶部边框用于与上方导航区域分隔
|
||
*/
|
||
#userInfo {
|
||
background-color: #252538; /* 与侧边栏背景一致 */
|
||
border-top: 1px solid #3a3a4a; /* 顶部分隔线 */
|
||
}
|
||
|
||
/*
|
||
* 用户头像样式
|
||
* 圆形头像，使用品牌色作为背景
|
||
* 通常显示用户名首字母或头像图片
|
||
*/
|
||
#userAvatar {
|
||
font-size: 14px; /* 头像内文字大小 */
|
||
font-weight: bold; /* 粗体文字 */
|
||
background-color: #8b5cf6; /* 品牌紫色背景 */
|
||
color: white; /* 白色文字 */
|
||
border-radius: 16px; /* 圆形头像 */
|
||
border: 2px solid #7c3aed; /* 深紫色边框 */
|
||
}
|
||
|
||
/*
|
||
* 用户名样式
|
||
* 显示在头像旁边的用户名文字
|
||
*/
|
||
#userName {
|
||
color: #ffffff; /* 白色文字 */
|
||
font-weight: bold; /* 粗体强调 */
|
||
margin-left: 8px; /* 与头像的间距 */
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/*
|
||
* 用户下拉菜单指示器样式
|
||
* 小箭头或图标，表示可以展开用户菜单
|
||
*/
|
||
#userDropdown {
|
||
font-size: 10px; /* 较小的图标 */
|
||
color: #888888; /* 灰色 */
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/*
|
||
* 导航滚动区域样式
|
||
* 当导航项目过多时提供滚动功能
|
||
* 设置为透明以保持视觉一致性
|
||
*/
|
||
#navScrollArea {
|
||
background-color: transparent; /* 透明背景 */
|
||
border: none; /* 无边框 */
|
||
}
|
||
|
||
/*
|
||
* 导航内容容器样式
|
||
* 包含所有导航项目的容器
|
||
*/
|
||
#navWidget {
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/*
|
||
* 导航分组容器样式
|
||
* 每个导航分组的容器
|
||
*/
|
||
#navSection {
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/*
|
||
* 导航项目列表容器样式
|
||
* 包含具体导航项目的容器
|
||
*/
|
||
#navItems {
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/* ========================================
|
||
项目区域样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 工具栏样式
|
||
* 位于项目区域顶部，包含搜索、筛选、视图切换等功能
|
||
* 使用与侧边栏相同的背景色保持一致性
|
||
*/
|
||
#toolbar {
|
||
background-color: #252538; /* 深色背景 */
|
||
border-bottom: 1px solid #3a3a4a; /* 底部分隔线 */
|
||
}
|
||
|
||
/*
|
||
* 内容头部样式
|
||
* 包含面包屑导航和页面标题等信息
|
||
* 调整为更紧凑的高度
|
||
*/
|
||
#contentHeader {
|
||
background-color: #1e1e2e; /* 主背景色 */
|
||
min-height: 40px; /* 设置最小高度，保持紧凑 */
|
||
}
|
||
|
||
/* ========================================
|
||
面包屑导航样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 面包屑导航容器样式
|
||
* 确保面包屑导航区域有统一的背景和布局
|
||
*/
|
||
#breadcrumbContainer {
|
||
background-color: transparent; /* 透明背景，继承工具栏背景 */
|
||
border: none; /* 无边框 */
|
||
padding: 0; /* 无内边距 */
|
||
margin: 0; /* 无外边距 */
|
||
}
|
||
|
||
/*
|
||
* 面包屑导航项目样式
|
||
* 显示导航路径中的非当前项目，使用灰色表示
|
||
* 确保背景透明，与工具栏背景保持一致
|
||
*/
|
||
#breadcrumbItem {
|
||
color: #9ca3af; /* 中性灰色 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
background-color: transparent; /* 透明背景，确保一致性 */
|
||
border: none; /* 无边框 */
|
||
padding: 2px 0; /* 轻微的上下内边距，保持对齐 */
|
||
margin: 0; /* 无外边距 */
|
||
font-family: inherit; /* 继承字体 */
|
||
}
|
||
|
||
/*
|
||
* 面包屑分隔符样式
|
||
* 用于分隔导航路径中的各个项目，通常是"/"或">"
|
||
* 确保背景透明，与其他面包屑元素保持一致
|
||
*/
|
||
#breadcrumbSeparator {
|
||
color: #6b7280; /* 较深的灰色 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
margin: 0 8px; /* 左右间距 */
|
||
background-color: transparent; /* 透明背景，确保一致性 */
|
||
border: none; /* 无边框 */
|
||
padding: 2px 0; /* 与其他元素相同的上下内边距 */
|
||
font-family: inherit; /* 继承字体 */
|
||
}
|
||
|
||
/*
|
||
* 面包屑当前项目样式
|
||
* 显示当前所在页面，使用白色突出显示
|
||
* 确保背景透明，与其他面包屑元素保持一致
|
||
*/
|
||
#breadcrumbCurrent {
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
background-color: transparent; /* 透明背景，确保一致性 */
|
||
border: none; /* 无边框 */
|
||
padding: 2px 0; /* 与其他元素相同的上下内边距 */
|
||
margin: 0; /* 无外边距 */
|
||
font-family: inherit; /* 继承字体 */
|
||
}
|
||
|
||
/* ========================================
|
||
按钮样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 图标按钮样式 (工具栏版本)
|
||
* 用于工具栏中的图标按钮，如搜索、筛选、视图切换等
|
||
* 采用透明背景和边框设计，悬停时有微妙的交互效果
|
||
*/
|
||
#iconBtn {
|
||
background-color: transparent; /* 透明背景 */
|
||
border: 1px solid #3a3a4a; /* 深灰边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
color: #9ca3af; /* 中性灰色图标 */
|
||
padding: 8px 12px; /* 内边距 */
|
||
font-size: 14px; /* 图标大小 */
|
||
min-width: 40px; /* 最小宽度 */
|
||
min-height: 40px; /* 最小高度 */
|
||
transition: all 0.2s ease; /* 平滑过渡动画 */
|
||
}
|
||
|
||
/*
|
||
* 图标按钮悬停效果
|
||
* 背景变亮、图标变白、边框变亮、轻微上移
|
||
*/
|
||
#iconBtn:hover {
|
||
background-color: #3a3a4a; /* 深灰背景 */
|
||
color: #ffffff; /* 白色图标 */
|
||
border-color: #4b5563; /* 更亮的边框 */
|
||
transform: translateY(-1px); /* 向上移动1像素 */
|
||
}
|
||
|
||
/*
|
||
* 主要按钮样式
|
||
* 用于重要操作，如"创建项目"、"保存"、"确认"等
|
||
* 使用品牌紫色突出显示，具有强烈的视觉吸引力
|
||
*/
|
||
#primaryBtn {
|
||
background-color: #8b5cf6; /* 品牌紫色背景 */
|
||
color: white; /* 白色文字 */
|
||
border: none; /* 无边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 12px 24px; /* 内边距，与次要按钮一致 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
transition: all 0.2s ease; /* 平滑过渡动画 */
|
||
}
|
||
|
||
/*
|
||
* 主要按钮悬停效果
|
||
* 颜色变深、轻微上移、添加紫色阴影，增强交互反馈
|
||
*/
|
||
#primaryBtn:hover {
|
||
background-color: #7c3aed; /* 更深的紫色 */
|
||
transform: translateY(-1px); /* 向上移动1像素 */
|
||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); /* 紫色阴影 */
|
||
}
|
||
|
||
/*
|
||
* 主要按钮禁用状态
|
||
* 当按钮不可用时的样式，使用灰色表示
|
||
*/
|
||
#primaryBtn:disabled {
|
||
background-color: #4a4a4a; /* 灰色背景 */
|
||
color: #888888; /* 灰色文字 */
|
||
transform: none; /* 无变换效果 */
|
||
box-shadow: none; /* 无阴影 */
|
||
cursor: not-allowed; /* 禁用光标 */
|
||
}
|
||
|
||
/*
|
||
* 导入项目按钮样式
|
||
* 用于从本地或远程源导入项目的按钮
|
||
* 使用灰色作为主要颜色，与主要按钮高度保持一致
|
||
*/
|
||
#importBtn {
|
||
background-color: #374151; /* 深灰色背景 */
|
||
color: white; /* 白色文字 */
|
||
border: none; /* 无边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 12px 24px; /* 内边距，与主要按钮一致 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
transition: all 0.2s ease; /* 平滑过渡动画 */
|
||
}
|
||
|
||
/*
|
||
* 导入项目按钮悬停效果
|
||
* 颜色变深、轻微上移、添加黑色阴影，增强交互反馈
|
||
*/
|
||
#importBtn:hover {
|
||
background-color: #4b5563; /* 更深的灰色 */
|
||
transform: translateY(-1px); /* 向上移动1像素 */
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 黑色阴影 */
|
||
}
|
||
|
||
/*
|
||
* 内容标题样式
|
||
* 用于页面或区域的主标题，如"项目概览"、"我的项目"等
|
||
* 使用较大的字体和粗体突出显示层级
|
||
*/
|
||
#contentTitle {
|
||
font-size: 20px; /* 大标题字体 */
|
||
font-weight: bold; /* 粗体强调 */
|
||
color: #ffffff; /* 白色文字 */
|
||
}
|
||
|
||
/*
|
||
* 视图切换按钮样式
|
||
* 用于在不同视图模式之间切换，如网格视图、列表视图等
|
||
* 采用透明背景设计，通过边框和颜色变化表示状态
|
||
*/
|
||
#viewBtn {
|
||
background-color: transparent; /* 透明背景 */
|
||
border: 1px solid #3a3a4a; /* 深灰边框 */
|
||
border-radius: 6px; /* 圆角设计 */
|
||
padding: 6px; /* 减少内边距：8px->6px */
|
||
color: #9ca3af; /* 中性灰色图标 */
|
||
font-size: 14px; /* 图标大小 */
|
||
min-width: 32px; /* 减少最小宽度：40px->32px */
|
||
min-height: 32px; /* 减少最小高度：40px->32px */
|
||
}
|
||
|
||
/*
|
||
* 视图按钮悬停效果
|
||
* 背景变深、图标变白、边框变亮，提供清晰的交互反馈
|
||
*/
|
||
#viewBtn:hover {
|
||
background-color: #3a3a4a; /* 深灰背景 */
|
||
color: #ffffff; /* 白色图标 */
|
||
border-color: #4b5563; /* 更亮的边框 */
|
||
}
|
||
|
||
/*
|
||
* 视图按钮选中状态
|
||
* 当前激活的视图模式，使用品牌色突出显示
|
||
*/
|
||
#viewBtn:checked {
|
||
background-color: #8b5cf6; /* 品牌紫色背景 */
|
||
color: white; /* 白色图标 */
|
||
border-color: #8b5cf6; /* 紫色边框 */
|
||
}
|
||
|
||
/*
|
||
* 搜索区域样式
|
||
* 包含搜索输入框和相关控件的容器区域
|
||
* 使用与工具栏相同的背景色保持视觉一致性
|
||
* 调整为更紧凑的高度
|
||
*/
|
||
#searchArea {
|
||
background-color: #252538; /* 深色背景，与工具栏一致 */
|
||
border-bottom: 1px solid #3a3a4a; /* 底部分隔线 */
|
||
padding: 8px 0; /* 减少上下内边距：15px->8px */
|
||
min-height: 36px; /* 设置最小高度，保持紧凑 */
|
||
}
|
||
|
||
/*
|
||
* 搜索输入框样式
|
||
* 主要的搜索功能输入框，支持实时搜索和筛选
|
||
* 采用深色主题设计，聚焦时有品牌色高亮效果
|
||
*/
|
||
#searchInput {
|
||
background-color: #1e1e2e; /* 深色背景 */
|
||
border: 1px solid #3a3a4a; /* 深灰边框 */
|
||
border-radius: 6px; /* 减小圆角：8px->6px */
|
||
padding: 6px 12px; /* 减小内边距，适合工具栏 */
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 13px; /* 稍小的字体 */
|
||
min-width: 200px; /* 减小最小宽度 */
|
||
max-width: 250px; /* 限制最大宽度 */
|
||
height: 28px; /* 减小高度，与视图按钮协调 */
|
||
}
|
||
|
||
/*
|
||
* 搜索输入框聚焦状态
|
||
* 当用户点击或聚焦输入框时的样式
|
||
* 使用品牌色边框和光晕效果，提供清晰的视觉反馈
|
||
*/
|
||
#searchInput:focus {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
outline: none; /* 移除默认轮廓 */
|
||
box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3); /* 减小光晕效果 */
|
||
}
|
||
|
||
/*
|
||
* 排序和类型筛选下拉框样式
|
||
* 用于项目排序（按时间、名称等）和类型筛选的下拉选择框
|
||
* 采用与搜索框相似的设计风格保持一致性
|
||
* 调整为与搜索框一致的高度
|
||
*/
|
||
#sortCombo, #typeCombo {
|
||
background-color: #1e1e2e; /* 深色背景 */
|
||
border: 1px solid #3a3a4a; /* 深灰边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 8px 12px; /* 减少内边距：10px->8px，与搜索框一致 */
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
min-width: 150px; /* 最小宽度 */
|
||
height: 32px; /* 设置与搜索框一致的高度 */
|
||
}
|
||
|
||
/*
|
||
* 下拉框聚焦状态
|
||
* 当用户点击下拉框时的样式，使用品牌色高亮
|
||
*/
|
||
#sortCombo:focus, #typeCombo:focus {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
outline: none; /* 移除默认轮廓 */
|
||
}
|
||
|
||
/*
|
||
* 下拉框按钮区域样式
|
||
* 移除默认的下拉按钮边框，保持简洁外观
|
||
*/
|
||
#sortCombo::drop-down, #typeCombo::drop-down {
|
||
border: none; /* 无边框 */
|
||
}
|
||
|
||
/*
|
||
* 下拉箭头样式
|
||
* 自定义下拉箭头图标，使用CSS绘制的三角形
|
||
* 替换默认的系统箭头图标
|
||
*/
|
||
#sortCombo::down-arrow, #typeCombo::down-arrow {
|
||
image: none; /* 移除默认图标 */
|
||
border-left: 5px solid transparent; /* 左边透明边框 */
|
||
border-right: 5px solid transparent; /* 右边透明边框 */
|
||
border-top: 5px solid #cccccc; /* 顶部边框形成向下箭头 */
|
||
margin-right: 5px; /* 右边距 */
|
||
}
|
||
|
||
/*
|
||
* 项目容器样式
|
||
* 包含所有项目卡片的主容器区域
|
||
* 使用主背景色保持与整体设计的一致性
|
||
*/
|
||
#projectsContainer {
|
||
background-color: #1e1e2e; /* 主背景色 */
|
||
}
|
||
|
||
/* ========================================
|
||
项目卡片样式定义
|
||
======================================== */
|
||
/* 整个卡片样式 */
|
||
#projectCard {
|
||
background-color: #8b5cf6; /* 紫色卡片背景 */
|
||
border: 1px solid #5a5a6a;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
/* 悬停效果 - 整个卡片背景变化 */
|
||
#projectCard:hover {
|
||
background-color: #7c3aed;
|
||
border-color: #6a6a7a;
|
||
}
|
||
|
||
/* 程序化悬停状态 */
|
||
#projectCard[hover="true"] {
|
||
background-color: #6d28d9;
|
||
border-color: #5a5a7a;
|
||
}
|
||
|
||
/* 待删除状态 */
|
||
#projectCard[status="pending_delete"] {
|
||
background-color: #4b5563;
|
||
border-color: #3f4a5a;
|
||
opacity: 0.7;
|
||
}
|
||
/* 待删除 悬浮 状态 */
|
||
#projectCard[status="pending_delete"]:hover {
|
||
background-color: #7c3aed;
|
||
border-color: #3f4a5a;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
#projectHeader {
|
||
background-color: transparent; /* 透明背景，继承卡片背景 */
|
||
border-top-left-radius: 16px;
|
||
border-top-right-radius: 16px;
|
||
}
|
||
|
||
/* 悬停时头部背景保持透明 */
|
||
#projectCard:hover #projectHeader {
|
||
background-color: transparent; /* 保持透明，让卡片背景显示 */
|
||
}
|
||
|
||
/* 底部样式 */
|
||
#projectFooter {
|
||
background-color: transparent; /* 透明背景，继承卡片背景 */
|
||
border-bottom-left-radius: 16px;
|
||
border-bottom-right-radius: 16px;
|
||
}
|
||
|
||
/* 悬停时底部背景保持透明 */
|
||
#projectCard:hover #projectFooter {
|
||
background-color: transparent; /* 保持透明，让卡片背景显示 */
|
||
}
|
||
|
||
/* 图片区域样式 - 保持深色背景 */
|
||
#projectImage {
|
||
background-color: #3a3a4a; /* 固定深色背景 */
|
||
border-radius: 12px;
|
||
min-height: 100px;
|
||
max-height: 120px;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 悬停时图片区域保持深色但稍微变亮 */
|
||
#projectCard:hover #projectImage {
|
||
background-color: #4a4a5a; /* 稍亮的深色 */
|
||
}
|
||
|
||
/* 其他样式保持不变 */
|
||
#projectTitle {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
background-color: transparent;
|
||
}
|
||
|
||
#menuBtn {
|
||
background-color: transparent;
|
||
border: none;
|
||
border-radius: 4px;
|
||
color: #e0e0ff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
#menuBtn:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
#deleteBtn {
|
||
background-color: transparent;
|
||
border: none;
|
||
border-radius: 6px;
|
||
color: #ff6b6b;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#deleteBtn:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
#projectImageContainer {
|
||
background-color: transparent;
|
||
padding: 0px;
|
||
}
|
||
|
||
#projectIcon {
|
||
font-size: 36px;
|
||
color: #ffffff;
|
||
padding: 10px;
|
||
}
|
||
|
||
#projectDate {
|
||
font-size: 11px;
|
||
color: #e0e0ff;
|
||
font-weight: 400;
|
||
background-color: transparent;
|
||
}
|
||
|
||
/* ========================================
|
||
对话框样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 对话框主容器样式
|
||
* 所有弹出对话框的基础样式
|
||
* 采用与主应用一致的深色主题和圆角设计
|
||
*/
|
||
QDialog {
|
||
background-color: #1e1e2e; /* 与主应用背景一致 */
|
||
border: 1px solid #3a3a4a; /* 深灰边框，与侧边栏分隔线一致 */
|
||
border-radius: 12px; /* 圆角设计 */
|
||
color: #ffffff; /* 白色文字 */
|
||
}
|
||
|
||
/*
|
||
* 模板选择区域样式
|
||
* 对话框左侧的模板选择区域
|
||
* 使用与侧边栏相似的背景色，右边框与项目信息区域分隔
|
||
*/
|
||
#templateSection {
|
||
background-color: #252538; /* 与侧边栏背景一致 */
|
||
border-right: 1px solid #3a3a4a; /* 右边框分隔线 */
|
||
}
|
||
|
||
/*
|
||
* 项目信息区域样式
|
||
* 对话框右侧的项目信息输入区域
|
||
* 使用主应用背景色，与左侧形成层次感
|
||
*/
|
||
#projectInfoSection {
|
||
background-color: #1e1e2e; /* 与主应用背景一致 */
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
* 区域标题样式
|
||
* 用于"选择模板"、"项目信息"等区域标题
|
||
* 使用中等大小字体和粗体突出显示
|
||
*/
|
||
#sectionTitle {
|
||
font-size: 16px; /* 中等字体大小 */
|
||
font-weight: 600; /* 半粗体 */
|
||
color: #ffffff; /* 白色文字 */
|
||
margin-bottom: 20px; /* 底部间距 */
|
||
}
|
||
|
||
/*
|
||
* 模板选项样式
|
||
* 每个可选择的项目模板的容器
|
||
* 支持悬停和选中状态的视觉反馈，使用与主应用一致的颜色
|
||
* 采用固定尺寸设计，确保多个模板时布局一致
|
||
*/
|
||
#templateItem {
|
||
background-color: #2a2a3a; /* 比模板区域稍亮的背景 */
|
||
border: 2px solid transparent; /* 透明边框，选中时显示 */
|
||
border-radius: 12px; /* 圆角设计 */
|
||
padding: 0px; /* 移除内边距，由内部布局控制 */
|
||
text-align: center; /* 文字居中 */
|
||
width: 180px; /* 固定宽度 */
|
||
height: 140px; /* 固定高度 */
|
||
max-width: 180px; /* 最大宽度限制 */
|
||
max-height: 140px; /* 最大高度限制 */
|
||
min-width: 180px; /* 最小宽度限制 */
|
||
min-height: 140px; /* 最小高度限制 */
|
||
}
|
||
|
||
/*
|
||
* 模板选项悬停效果
|
||
* 边框高亮和背景变亮，提供交互反馈
|
||
*/
|
||
#templateItem:hover {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
background-color: #3a3a4a; /* 更亮的背景 */
|
||
}
|
||
|
||
/*
|
||
* 模板选项选中状态
|
||
* 当前选中的模板，使用品牌色边框和半透明背景
|
||
*/
|
||
#templateItem:checked {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
background-color: rgba(139, 92, 246, 0.15); /* 稍深的半透明紫色背景 */
|
||
}
|
||
|
||
/*
|
||
* 模板选项按下状态
|
||
* 当用户点击模板按钮时的样式
|
||
*/
|
||
#templateItem:pressed {
|
||
background-color: rgba(139, 92, 246, 0.25); /* 更深的紫色背景 */
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
}
|
||
|
||
/*
|
||
* 模板选项聚焦状态
|
||
* 当模板按钮获得焦点时的样式（键盘导航）
|
||
*/
|
||
#templateItem:focus {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
outline: none; /* 移除默认轮廓 */
|
||
}
|
||
|
||
/*
|
||
* 模板图标样式
|
||
* 模板按钮中的图标显示
|
||
* 使用较大的字体尺寸突出显示
|
||
*/
|
||
#templateIcon {
|
||
font-size: 36px; /* 较大的图标尺寸 */
|
||
color: #ffffff; /* 白色图标 */
|
||
background-color: transparent; /* 透明背景 */
|
||
border: none; /* 无边框 */
|
||
padding: 0; /* 无内边距 */
|
||
}
|
||
|
||
/*
|
||
* 模板名称样式
|
||
* 显示模板名称的文字
|
||
* 确保在不同状态下都有良好的可读性
|
||
*/
|
||
#templateName {
|
||
font-size: 14px; /* 标准字体大小 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
color: #ffffff; /* 白色文字 */
|
||
background-color: transparent; /* 透明背景 */
|
||
border: none; /* 无边框 */
|
||
padding: 0; /* 无内边距 */
|
||
margin-top: 4px; /* 与图标的间距 */
|
||
}
|
||
|
||
/*
|
||
* 确保模板按钮内的所有子元素背景透明
|
||
* 防止子元素覆盖父元素的背景样式
|
||
*/
|
||
#templateItem QLabel {
|
||
background-color: transparent; /* 透明背景 */
|
||
border: none; /* 无边框 */
|
||
}
|
||
|
||
/*
|
||
* 模板按钮布局容器样式
|
||
* 确保内部布局不影响背景显示
|
||
*/
|
||
#templateItem QVBoxLayout {
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/*
|
||
* 模板容器样式
|
||
* 包含所有模板按钮的网格容器
|
||
* 支持固定尺寸的模板按钮布局
|
||
*/
|
||
#templatesContainer {
|
||
background-color: transparent; /* 透明背景，继承父容器背景 */
|
||
border: none; /* 无边框 */
|
||
padding: 10px; /* 内边距 */
|
||
}
|
||
|
||
/*
|
||
* 模板滚动区域样式
|
||
* 确保滚动区域能够正确显示固定尺寸的模板按钮
|
||
*/
|
||
QScrollArea[objectName="templateScrollArea"] {
|
||
background-color: transparent; /* 透明背景 */
|
||
border: none; /* 无边框 */
|
||
min-height: 200px; /* 最小高度，确保至少显示一行模板 */
|
||
}
|
||
|
||
/*
|
||
* 模板描述区域样式
|
||
* 显示选中模板详细描述的文本区域
|
||
* 使用与主应用一致的深色背景和圆角设计，增强可读性
|
||
*/
|
||
#templateDescription {
|
||
background-color: #2a2a3a; /* 与模板项背景一致 */
|
||
border: 1px solid #3a3a4a; /* 添加边框增强层次感 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 15px; /* 内边距 */
|
||
margin-bottom: 20px; /* 底部间距 */
|
||
color: #e5e5e5; /* 更亮的文字颜色 */
|
||
line-height: 1.5; /* 行高增强可读性 */
|
||
}
|
||
|
||
/*
|
||
* 表单标签样式
|
||
* 表单输入框上方的标签文字
|
||
* 使用白色和中等粗细突出显示
|
||
*/
|
||
#formLabel {
|
||
font-size: 14px; /* 标准字体大小 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
color: #ffffff; /* 白色文字 */
|
||
margin-bottom: 8px; /* 底部间距 */
|
||
}
|
||
|
||
/*
|
||
* 表单输入框样式
|
||
* 用于项目名称、路径等单行输入的文本框
|
||
* 采用与搜索框一致的深色主题设计，聚焦时有品牌色高亮
|
||
*/
|
||
#formInput {
|
||
background-color: #2a2a3a; /* 与模板项背景一致 */
|
||
border: 1px solid #3a3a4a; /* 与应用边框一致 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 12px 16px; /* 内边距，与搜索框一致 */
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
}
|
||
|
||
/*
|
||
* 表单输入框聚焦状态
|
||
* 当用户点击或聚焦输入框时的样式
|
||
* 使用与搜索框一致的聚焦效果
|
||
*/
|
||
#formInput:focus {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
outline: none; /* 移除默认轮廓 */
|
||
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); /* 紫色光晕效果 */
|
||
}
|
||
|
||
/*
|
||
* 表单输入框错误状态
|
||
* 当输入验证失败时的样式
|
||
*/
|
||
#formInput[error="true"] {
|
||
border-color: #ff4444; /* 红色边框 */
|
||
background-color: rgba(255, 68, 68, 0.1); /* 半透明红色背景 */
|
||
}
|
||
|
||
/*
|
||
* 表单输入框成功状态
|
||
* 当输入验证成功时的样式
|
||
*/
|
||
#formInput[valid="true"] {
|
||
border-color: #22c55e; /* 绿色边框 */
|
||
background-color: rgba(34, 197, 94, 0.1); /* 半透明绿色背景 */
|
||
}
|
||
|
||
/*
|
||
* 错误提示标签样式
|
||
* 在输入框下方显示一行小红字的错误提示
|
||
* 简洁明了，不占用过多空间
|
||
*/
|
||
#errorLabel {
|
||
color: #ff4444; /* 红色文字 */
|
||
font-size: 11px; /* 小字体 */
|
||
background-color: transparent; /* 透明背景 */
|
||
border: none; /* 无边框 */
|
||
padding: 2px 0 0 0; /* 仅顶部小间距 */
|
||
margin: 0; /* 无外边距 */
|
||
height: 18px; /* 固定高度，一行文字 */
|
||
line-height: 16px; /* 行高 */
|
||
font-weight: normal; /* 正常字重 */
|
||
text-overflow: ellipsis; /* 文字过长时显示省略号 */
|
||
white-space: nowrap; /* 不换行 */
|
||
overflow: hidden; /* 隐藏溢出内容 */
|
||
}
|
||
|
||
/*
|
||
* 表单文本区域样式
|
||
* 用于项目描述等多行输入的文本区域
|
||
* 样式与单行输入框保持一致
|
||
*/
|
||
#formTextArea {
|
||
background-color: #2a2a3a; /* 与输入框背景一致 */
|
||
border: 1px solid #3a3a4a; /* 与输入框边框一致 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 12px 16px; /* 内边距，与输入框一致 */
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
min-height: 80px; /* 最小高度 */
|
||
}
|
||
|
||
/*
|
||
* 表单文本区域聚焦状态
|
||
* 与输入框聚焦状态保持一致
|
||
*/
|
||
#formTextArea:focus {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
outline: none; /* 移除默认轮廓 */
|
||
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); /* 紫色光晕效果 */
|
||
}
|
||
|
||
/*
|
||
* 浏览按钮样式
|
||
* 用于选择文件或文件夹的浏览按钮
|
||
* 使用品牌色突出显示重要操作
|
||
*/
|
||
#browseBtn {
|
||
background-color: #8b5cf6; /* 品牌紫色背景 */
|
||
color: white; /* 白色文字 */
|
||
border: none; /* 无边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
}
|
||
|
||
/*
|
||
* 浏览按钮悬停效果
|
||
* 颜色变深，增强交互反馈
|
||
*/
|
||
#browseBtn:hover {
|
||
background-color: #7c3aed; /* 更深的紫色 */
|
||
}
|
||
|
||
/*
|
||
* 对话框按钮区域样式
|
||
* 对话框底部的按钮容器区域
|
||
* 使用与侧边栏一致的背景色，顶部边框与内容区域分隔
|
||
*/
|
||
#buttonArea {
|
||
background-color: #252538; /* 与侧边栏背景一致 */
|
||
border-top: 1px solid #3a3a4a; /* 顶部分隔线 */
|
||
}
|
||
|
||
/*
|
||
* 次要按钮样式
|
||
* 用于"取消"、"返回"等次要操作的按钮
|
||
* 采用透明背景和边框设计，相对低调
|
||
*/
|
||
#secondaryBtn {
|
||
background-color: transparent; /* 透明背景 */
|
||
border: 1px solid #4a4a4a; /* 深灰边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 12px 24px; /* 内边距 */
|
||
color: #cccccc; /* 浅灰色文字 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
}
|
||
|
||
/*
|
||
* 次要按钮悬停效果
|
||
* 背景变深、文字变白，提供交互反馈
|
||
*/
|
||
#secondaryBtn:hover {
|
||
background-color: #3a3a3a; /* 深灰背景 */
|
||
color: #ffffff; /* 白色文字 */
|
||
}
|
||
|
||
/* ========================================
|
||
对话框滚动区域样式
|
||
======================================== */
|
||
|
||
/*
|
||
* 对话框内滚动区域样式
|
||
* 确保滚动区域与对话框背景融合
|
||
*/
|
||
QDialog QScrollArea {
|
||
background-color: transparent; /* 透明背景 */
|
||
border: none; /* 无边框 */
|
||
}
|
||
|
||
/*
|
||
* 对话框滚动区域视口样式
|
||
* 滚动内容的实际显示区域
|
||
*/
|
||
QDialog QScrollArea > QWidget > QWidget {
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/* ========================================
|
||
项目设置页面样式
|
||
======================================== */
|
||
|
||
/*
|
||
* 页面标题样式
|
||
* 设置页面的主标题
|
||
*/
|
||
#pageTitle {
|
||
font-size: 24px; /* 大字体 */
|
||
font-weight: bold; /* 粗体 */
|
||
color: #ffffff; /* 白色文字 */
|
||
margin-bottom: 5px; /* 底部间距 */
|
||
}
|
||
|
||
/*
|
||
* 页面副标题样式
|
||
* 设置页面的描述文字
|
||
*/
|
||
#pageSubtitle {
|
||
font-size: 14px; /* 标准字体 */
|
||
color: #9ca3af; /* 灰色文字 */
|
||
margin-bottom: 0px; /* 无底部间距 */
|
||
}
|
||
|
||
/*
|
||
* 设置分组框样式
|
||
* 用于组织不同的设置选项
|
||
*/
|
||
#settingsGroup {
|
||
background-color: #252538; /* 深色背景 */
|
||
border: 1px solid #3a3a4a; /* 边框 */
|
||
border-radius: 12px; /* 圆角 */
|
||
padding: 20px; /* 内边距 */
|
||
margin: 10px 0; /* 上下间距 */
|
||
font-size: 16px; /* 标题字体大小 */
|
||
font-weight: 600; /* 标题字体粗细 */
|
||
color: #ffffff; /* 标题文字颜色 */
|
||
}
|
||
|
||
/*
|
||
* 设置描述文字样式
|
||
* 用于说明设置选项的作用
|
||
*/
|
||
#settingsDescription {
|
||
color: #9ca3af; /* 灰色文字 */
|
||
font-size: 13px; /* 小字体 */
|
||
line-height: 1.4; /* 行高 */
|
||
}
|
||
|
||
/*
|
||
* 设置标签样式
|
||
* 用于设置项的标签文字
|
||
*/
|
||
#settingsLabel {
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 14px; /* 标准字体 */
|
||
font-weight: 500; /* 中等粗细 */
|
||
}
|
||
|
||
/*
|
||
* 路径输入框样式
|
||
* 用于显示和输入文件路径
|
||
*/
|
||
#pathInput {
|
||
background-color: #1e1e2e; /* 深色背景 */
|
||
border: 1px solid #3a3a4a; /* 边框 */
|
||
border-radius: 8px; /* 圆角 */
|
||
padding: 10px 12px; /* 内边距 */
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 14px; /* 字体大小 */
|
||
min-height: 20px; /* 最小高度 */
|
||
}
|
||
|
||
/*
|
||
* 路径输入框聚焦状态
|
||
*/
|
||
#pathInput:focus {
|
||
border-color: #8b5cf6; /* 品牌色边框 */
|
||
outline: none; /* 移除默认轮廓 */
|
||
}
|
||
|
||
/*
|
||
* 浏览按钮样式
|
||
* 用于打开文件夹选择对话框
|
||
* 调整为更紧凑的尺寸
|
||
*/
|
||
#browseBtn {
|
||
background-color: #374151; /* 深灰背景 */
|
||
color: #ffffff; /* 白色文字 */
|
||
border: none; /* 无边框 */
|
||
border-radius: 6px; /* 减小圆角：8px->6px */
|
||
padding: 8px 12px; /* 减小内边距：10px 16px->8px 12px */
|
||
font-size: 13px; /* 减小字体：14px->13px */
|
||
font-weight: 500; /* 字体粗细 */
|
||
min-width: 60px; /* 减小最小宽度：80px->60px */
|
||
max-height: 32px; /* 限制最大高度 */
|
||
}
|
||
|
||
/*
|
||
* 浏览按钮悬停效果
|
||
*/
|
||
#browseBtn:hover {
|
||
background-color: #4b5563; /* 更亮的背景 */
|
||
}
|
||
|
||
/*
|
||
* 重置按钮样式
|
||
* 调整为更紧凑的尺寸
|
||
*/
|
||
#resetBtn {
|
||
background-color: transparent; /* 透明背景 */
|
||
color: #9ca3af; /* 灰色文字 */
|
||
border: 1px solid #4a4a4a; /* 边框 */
|
||
border-radius: 6px; /* 减小圆角：8px->6px */
|
||
padding: 8px 12px; /* 减小内边距：10px 16px->8px 12px */
|
||
font-size: 13px; /* 减小字体：14px->13px */
|
||
min-width: 50px; /* 减小最小宽度：60px->50px */
|
||
max-height: 32px; /* 限制最大高度 */
|
||
}
|
||
|
||
/*
|
||
* 重置按钮悬停效果
|
||
*/
|
||
#resetBtn:hover {
|
||
background-color: #374151; /* 深灰背景 */
|
||
color: #ffffff; /* 白色文字 */
|
||
}
|
||
|
||
/*
|
||
* 快捷按钮样式
|
||
* 用于快速选择常用位置
|
||
*/
|
||
#shortcutBtn {
|
||
background-color: #1e1e2e; /* 深色背景 */
|
||
color: #9ca3af; /* 灰色文字 */
|
||
border: 1px solid #3a3a4a; /* 边框 */
|
||
border-radius: 8px; /* 圆角 */
|
||
padding: 8px 12px; /* 内边距 */
|
||
font-size: 13px; /* 字体大小 */
|
||
min-width: 100px; /* 最小宽度 */
|
||
}
|
||
|
||
/*
|
||
* 快捷按钮悬停效果
|
||
*/
|
||
#shortcutBtn:hover {
|
||
background-color: #252538; /* 背景变亮 */
|
||
color: #ffffff; /* 文字变白 */
|
||
border-color: #8b5cf6; /* 品牌色边框 */
|
||
}
|
||
|
||
/*
|
||
* 设置复选框样式
|
||
* 用于开关类型的设置选项
|
||
*/
|
||
#settingsCheckbox {
|
||
color: #ffffff; /* 白色文字 */
|
||
font-size: 14px; /* 字体大小 */
|
||
spacing: 8px; /* 复选框与文字间距 */
|
||
}
|
||
|
||
/*
|
||
* 复选框指示器样式
|
||
*/
|
||
#settingsCheckbox::indicator {
|
||
width: 18px; /* 宽度 */
|
||
height: 18px; /* 高度 */
|
||
border-radius: 4px; /* 圆角 */
|
||
border: 2px solid #3a3a4a; /* 边框 */
|
||
background-color: #1e1e2e; /* 背景色 */
|
||
}
|
||
|
||
/*
|
||
* 复选框选中状态
|
||
*/
|
||
#settingsCheckbox::indicator:checked {
|
||
background-color: #8b5cf6; /* 品牌色背景 */
|
||
border-color: #8b5cf6; /* 品牌色边框 */
|
||
image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuNUw0LjUgOEwxMSAxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
|
||
}
|
||
|
||
/* ========================================
|
||
导入对话框样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 文件上传区域样式
|
||
* 支持拖拽上传的文件放置区域
|
||
* 使用虚线边框表示可拖拽区域
|
||
*/
|
||
#uploadArea {
|
||
background-color: #3a3a3a; /* 深灰背景 */
|
||
border: 2px dashed #4a4a4a; /* 虚线边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 20px; /* 内边距 */
|
||
}
|
||
|
||
/*
|
||
* 文件拖拽悬停状态
|
||
* 当文件被拖拽到上传区域上方时的样式
|
||
* 边框和背景高亮，提供清晰的视觉反馈
|
||
*/
|
||
#uploadArea[dragOver="true"] {
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
background-color: rgba(139, 92, 246, 0.1); /* 半透明紫色背景 */
|
||
}
|
||
|
||
/*
|
||
* 上传按钮样式
|
||
* 用于手动选择文件的按钮
|
||
* 使用品牌色突出显示
|
||
*/
|
||
#uploadBtn {
|
||
background-color: #8b5cf6; /* 品牌紫色背景 */
|
||
color: white; /* 白色文字 */
|
||
border: none; /* 无边框 */
|
||
border-radius: 6px; /* 圆角设计 */
|
||
padding: 8px 16px; /* 内边距 */
|
||
font-size: 14px; /* 标准字体大小 */
|
||
}
|
||
|
||
/*
|
||
* 上传按钮悬停效果
|
||
* 颜色变深，增强交互反馈
|
||
*/
|
||
#uploadBtn:hover {
|
||
background-color: #7c3aed; /* 更深的紫色 */
|
||
}
|
||
|
||
/* ========================================
|
||
通用组件样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 分组框样式
|
||
* 用于将相关控件分组显示的容器
|
||
* 包含标题和边框，增强内容组织
|
||
*/
|
||
QGroupBox {
|
||
font-weight: 600; /* 粗体标题 */
|
||
color: #ffffff; /* 白色文字 */
|
||
border: 1px solid #3a3a3a; /* 深灰边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
margin-top: 10px; /* 顶部外边距 */
|
||
padding-top: 10px; /* 顶部内边距 */
|
||
}
|
||
|
||
/*
|
||
* 分组框标题样式
|
||
* 分组框顶部的标题文字定位和样式
|
||
*/
|
||
QGroupBox::title {
|
||
subcontrol-origin: margin; /* 标题定位基准 */
|
||
left: 10px; /* 左侧偏移 */
|
||
padding: 0 5px 0 5px; /* 左右内边距 */
|
||
}
|
||
|
||
/*
|
||
* 列表控件样式
|
||
* 用于显示项目列表、文件列表等的控件
|
||
* 采用深色主题设计
|
||
*/
|
||
QListWidget {
|
||
background-color: #3a3a3a; /* 深灰背景 */
|
||
border: 1px solid #4a4a4a; /* 深灰边框 */
|
||
border-radius: 6px; /* 圆角设计 */
|
||
padding: 5px; /* 内边距 */
|
||
color: #ffffff; /* 白色文字 */
|
||
}
|
||
|
||
/*
|
||
* 列表项样式
|
||
* 列表中每个项目的样式
|
||
* 使用底部边框分隔各个项目
|
||
*/
|
||
QListWidget::item {
|
||
padding: 5px; /* 内边距 */
|
||
border-bottom: 1px solid #4a4a4a; /* 底部分隔线 */
|
||
}
|
||
|
||
/*
|
||
* 最后一个列表项样式
|
||
* 移除最后一项的底部边框，避免多余的分隔线
|
||
*/
|
||
QListWidget::item:last {
|
||
border-bottom: none; /* 无底部边框 */
|
||
}
|
||
|
||
/*
|
||
* 复选框样式
|
||
* 用于选择操作的复选框控件
|
||
* 采用自定义样式替换系统默认外观
|
||
*/
|
||
QCheckBox {
|
||
color: #ffffff; /* 白色文字 */
|
||
spacing: 8px; /* 复选框与文字间距 */
|
||
}
|
||
|
||
/*
|
||
* 复选框指示器样式
|
||
* 复选框的方形指示器部分
|
||
* 使用深色主题和圆角设计
|
||
*/
|
||
QCheckBox::indicator {
|
||
width: 16px; /* 指示器宽度 */
|
||
height: 16px; /* 指示器高度 */
|
||
border: 2px solid #4a4a4a; /* 深灰边框 */
|
||
border-radius: 3px; /* 小圆角 */
|
||
background-color: #3a3a3a; /* 深灰背景 */
|
||
}
|
||
|
||
/*
|
||
* 复选框选中状态
|
||
* 当复选框被选中时的样式
|
||
* 使用品牌色背景和边框
|
||
*/
|
||
QCheckBox::indicator:checked {
|
||
background-color: #8b5cf6; /* 品牌紫色背景 */
|
||
border-color: #8b5cf6; /* 品牌紫色边框 */
|
||
}
|
||
|
||
/*
|
||
* 复选框选中标记
|
||
* 选中状态下显示的勾选标记
|
||
* 使用白色粗体勾号
|
||
*/
|
||
QCheckBox::indicator:checked::after {
|
||
content: "✓"; /* 勾选标记 */
|
||
color: white; /* 白色标记 */
|
||
font-weight: bold; /* 粗体强调 */
|
||
}
|
||
|
||
/* ========================================
|
||
滚动条样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 垂直滚动条样式
|
||
* 自定义滚动条外观，替换系统默认样式
|
||
* 采用窄宽度和圆角设计，更加现代化
|
||
*/
|
||
QScrollBar:vertical {
|
||
background-color: #252538; /* 滚动条背景色 */
|
||
width: 8px; /* 滚动条宽度 */
|
||
border-radius: 4px; /* 圆角设计 */
|
||
}
|
||
|
||
/*
|
||
* 滚动条滑块样式
|
||
* 用户可拖拽的滚动条滑块部分
|
||
* 使用较亮的颜色便于识别
|
||
*/
|
||
QScrollBar::handle:vertical {
|
||
background-color: #4a4a5a; /* 滑块背景色 */
|
||
border-radius: 4px; /* 圆角设计 */
|
||
min-height: 20px; /* 最小高度 */
|
||
}
|
||
|
||
/*
|
||
* 滚动条滑块悬停效果
|
||
* 当鼠标悬停在滑块上时变亮
|
||
*/
|
||
QScrollBar::handle:vertical:hover {
|
||
background-color: #6a6a7a; /* 更亮的滑块颜色 */
|
||
}
|
||
|
||
/*
|
||
* 滚动条箭头按钮样式
|
||
* 隐藏滚动条两端的箭头按钮，保持简洁外观
|
||
*/
|
||
QScrollBar::add-line:vertical,
|
||
QScrollBar::sub-line:vertical {
|
||
height: 0px; /* 高度为0，隐藏箭头 */
|
||
}
|
||
|
||
/* ========================================
|
||
菜单样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 右键菜单和下拉菜单样式
|
||
* 统一的菜单外观设计，采用深色主题
|
||
* 包含圆角和边框，增强视觉层次
|
||
*/
|
||
QMenu {
|
||
background-color: #2a2a2a; /* 深灰背景 */
|
||
border: 1px solid #3a3a3a; /* 深灰边框 */
|
||
border-radius: 8px; /* 圆角设计 */
|
||
padding: 8px 0; /* 上下内边距 */
|
||
}
|
||
|
||
/*
|
||
* 菜单项样式
|
||
* 菜单中每个选项的样式
|
||
* 使用适当的内边距增强可点击性
|
||
*/
|
||
QMenu::item {
|
||
padding: 8px 16px 8px 36px; /* 上 右 下 左，左边距36px给图标留空间 */
|
||
color: #ffffff; /* 白色文字 */
|
||
background-color: transparent; /* 透明背景 */
|
||
border-radius: 4px; /* 圆角 */
|
||
min-height: 20px; /* 最小高度 */
|
||
}
|
||
|
||
/*
|
||
* 菜单项选中状态
|
||
* 当鼠标悬停或键盘选中菜单项时的样式
|
||
*/
|
||
QMenu::item:selected {
|
||
background-color: #3a3a3a; /* 深灰背景高亮 */
|
||
}
|
||
|
||
/*
|
||
* 菜单图标样式
|
||
* 调整图标位置和大小，使其与文字保持合适间距
|
||
*/
|
||
QMenu::icon {
|
||
left: 12px; /* 图标距离左边12px */
|
||
width: 16px; /* 图标宽度 */
|
||
height: 16px; /* 图标高度 */
|
||
}
|
||
|
||
/*
|
||
* 菜单分隔线样式
|
||
* 用于分隔不同功能组的菜单项
|
||
*/
|
||
QMenu::separator {
|
||
height: 1px; /* 分隔线高度 */
|
||
background-color: #3a3a3a; /* 深灰色分隔线 */
|
||
margin: 4px 0; /* 上下外边距 */
|
||
}
|
||
|
||
/* ========================================
|
||
状态栏和菜单栏样式定义
|
||
======================================== */
|
||
|
||
/*
|
||
* 应用程序底部的状态信息显示栏
|
||
* 显示当前操作状态、进度信息等
|
||
*/
|
||
QStatusBar {
|
||
background-color: #2a2a2a; /* 深灰背景 */
|
||
border-top: 1px solid #3a3a3a; /* 顶部分隔线 */
|
||
color: #cccccc; /* 浅灰色文字 */
|
||
}
|
||
|
||
/*
|
||
* 菜单栏样式
|
||
* 应用程序顶部的主菜单栏
|
||
* 包含"文件"、"编辑"、"视图"等主要菜单
|
||
*/
|
||
QMenuBar {
|
||
background-color: #2a2a2a; /* 深灰背景 */
|
||
color: #ffffff; /* 白色文字 */
|
||
border-bottom: 1px solid #3a3a3a; /* 底部分隔线 */
|
||
}
|
||
|
||
/*
|
||
* 菜单栏项目样式
|
||
* 菜单栏中每个主菜单项的样式
|
||
* 如"文件"、"编辑"等菜单项
|
||
*/
|
||
QMenuBar::item {
|
||
padding: 8px 12px; /* 内边距 */
|
||
background-color: transparent; /* 透明背景 */
|
||
}
|
||
|
||
/*
|
||
* 菜单栏项目选中状态
|
||
* 当鼠标悬停或点击菜单栏项目时的样式
|
||
*/
|
||
QMenuBar::item:selected {
|
||
background-color: #3a3a3a; /* 深灰背景高亮 */
|
||
}
|
||
"""
|
||
|
||
@staticmethod
|
||
def get_card_style():
|
||
return """
|
||
/* 基础卡片样式 - 修复继承问题 */
|
||
#projectCard {
|
||
background-color: #8b5cf6;
|
||
border: 1px solid #5a5a6a;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
/* 简化悬停状态 */
|
||
#projectCard:hover {
|
||
background-color: #7c3aed;
|
||
border-color: #6a6a7a;
|
||
}
|
||
|
||
/* 头部样式 - 移除透明背景 */
|
||
#projectHeader {
|
||
background-color: #8b5cf6;
|
||
border-top-left-radius: 16px;
|
||
border-top-right-radius: 16px;
|
||
}
|
||
|
||
#projectTitle {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
background-color: transparent;
|
||
}
|
||
|
||
#menuBtn {
|
||
background-color: transparent;
|
||
border: none;
|
||
border-radius: 4px;
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
#menuBtn:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
/* 图片区域样式 - 调整尺寸和边距 */
|
||
#projectImageContainer {
|
||
background-color: transparent;
|
||
padding: 0px; /* 减少内边距 */
|
||
}
|
||
|
||
#projectImage {
|
||
background-color: #3a3a4a;
|
||
border-radius: 12px;
|
||
min-height: 100px; /* 减小最小高度 */
|
||
max-height: 120px;
|
||
}
|
||
|
||
#projectIcon {
|
||
font-size: 36px; /* 减小图标大小 */
|
||
color: #ffffff;
|
||
padding: 10px;
|
||
}
|
||
|
||
/* 底部样式 - 移除透明背景 */
|
||
#projectFooter {
|
||
background-color: #8b5cf6;
|
||
border-bottom-left-radius: 16px;
|
||
border-bottom-right-radius: 16px;
|
||
}
|
||
|
||
#projectDate {
|
||
font-size: 11px;
|
||
color: #e0e0ff; /* 更亮的颜色提高可读性 */
|
||
font-weight: 400;
|
||
background-color: transparent;
|
||
}
|
||
"""
|