/* assets/style.css */ /* 全局字体 */ body { font-family: '微软雅黑', 'Microsoft YaHei', sans-serif; background-color: #f0f4f8; } /* 标题栏 */ .app-header { background-color: #2e8b57; /* SeaGreen */ color: white; } /* 卡片通用样式 */ .func-card { width: 100%; padding: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); background-color: white; border-radius: 0.5rem; } /* 核心功能区顶部边框 */ .card-core { border-top: 4px solid #16a34a; /* green-600 */ } /* 数据管理区顶部边框 */ .card-data { border-top: 4px solid #3b82f6; /* blue-500 */ } /* 系统操作区顶部边框 */ .card-system { border-top: 4px solid #ef4444; /* red-500 */ } .card-logging { border-top: 4px solid #9c1be0; } /* 标题文字 */ .section-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; } /* 绿色标题 */ .text-green { color: #166534; } /* 蓝色标题 */ .text-blue { color: #1e40af; } /* 红色标题 */ .text-red { color: #991b1b; } /* assets/style.css */ /* ... (原有的样式) ... */ /* ---------------------------------- */ /* 滚动条隐藏样式 */ /* ---------------------------------- */ /* * 1. 隐藏 Webkit 内核浏览器 (Chrome, Safari, Edge) 的滚动条 * 适用于 NiceGUI 默认的 Chromium 浏览器 */ .hide-scrollbar::-webkit-scrollbar { /* 完全隐藏滚动条 */ width: 0px; background: transparent; /* 使滚动条轨道透明 */ } /* 2. 隐藏 Firefox 浏览器的滚动条 */ .hide-scrollbar { /* 设置滚动条宽度为 thin (细),比 auto (默认) 要窄 */ scrollbar-width: none; /* 'none' 是最新且更彻底的隐藏方式 */ /* 确保容器内容溢出时可以滚动 */ overflow: auto; } /* 示例:如果你只想隐藏日志区的滚动条 */ .card-logging .q-expansion-item__content .nicegui-log .q-scrollarea__content { /* 如果 nicegui-log 内部使用了 q-scrollarea,可能需要针对其内容应用样式 */ scrollbar-width: none; } /* ---------------------------------- */ /* 滚动条美化(可选 - 不隐藏,但变细变淡) */ /* 如果完全隐藏不好,可以试试这个更温和的方案 */ /* ---------------------------------- */ .thin-scrollbar::-webkit-scrollbar { width: 6px; /* 调整宽度 */ height: 6px; /* 调整高度 */ } .thin-scrollbar::-webkit-scrollbar-thumb { background-color: #a0a0a0; /* 拇指颜色 */ border-radius: 3px; border: 1px solid #f0f4f8; /* 边框颜色 */ } .thin-scrollbar::-webkit-scrollbar-track { background: transparent; } .thin-scrollbar { scrollbar-width: thin; /* Firefox 细滚动条 */ scrollbar-color: #a0a0a0 transparent; /* Firefox 颜色设置 */ } *::-webkit-scrollbar { /* 完全隐藏滚动条 */ width: 0px !important; height: 0px !important; background: transparent !important; } #nicegui-content, #q-app { /* 确保容器内容可以滚动,但滚动条被隐藏 */ overflow: auto; /* Firefox 隐藏滚动条 */ scrollbar-width: none; /* IE/Edge 隐藏滚动条 */ -ms-overflow-style: none; } /* 档案卡片容器 */ .profile-dialog { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); } /* 档案条目样式 */ .info-item { background: #ffffff; border: 1px solid #f1f5f9; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; transition: all 0.3s ease; display: flex; align-items: flex-start; } .info-item:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08); transform: translateY(-1px); } /* 标签与内容的对比度 */ .info-label { font-size: 0.75rem; font-weight: 700; color: #94a3b8; /* 浅灰色标签 */ text-transform: uppercase; letter-spacing: 0.05em; width: 100px; margin-top: 2px; } .info-value { font-size: 0.95rem; font-weight: 500; color: #1e293b; /* 深色内容 */ line-height: 1.6; word-break: break-all; } /* 自定义滚动条 */ .custom-scroll::-webkit-scrollbar { width: 4px; } .custom-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }