123
2 weeks ago
parent
c0853dbed4
commit
da01eb2cd9
@ -0,0 +1,15 @@
|
||||
<role>
|
||||
<personality>
|
||||
@!thought://remember
|
||||
@!thought://recall
|
||||
@!thought://ui-optimization-thinking
|
||||
@!thought://aesthetic-enhancement
|
||||
</personality>
|
||||
<principle>
|
||||
@!execution://ui-optimization-workflow
|
||||
@!execution://layout-enhancement-process
|
||||
</principle>
|
||||
<knowledge>
|
||||
@!knowledge://qt-ui-optimization-expertise
|
||||
</knowledge>
|
||||
</role>
|
||||
Binary file not shown.
@ -0,0 +1,354 @@
|
||||
/* ===============================================
|
||||
战场探索系统 - 军事主题样式表
|
||||
版本: 2.0 优化版
|
||||
=============================================== */
|
||||
|
||||
/* 全局字体和基础样式 */
|
||||
QWidget {
|
||||
font-family: "Microsoft YaHei", "SimHei", sans-serif;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 主面板样式 */
|
||||
#rightFunctionPanel {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #0f1419, stop:1 #1a252f);
|
||||
border-left: 3px solid #00ff88;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
/* 面板标题 */
|
||||
#PanelTitle {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #00ff88, stop:1 #00c46a);
|
||||
color: #0f1419;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 16px 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
border: 2px solid #00ff88;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* 模块卡片 */
|
||||
#ModuleCard {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #1e2832, stop:1 #2a3441);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #3c4a59;
|
||||
border-left: 4px solid #00ff88;
|
||||
padding: 0px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
#ModuleCard:hover {
|
||||
border-color: #00ff88;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #243340, stop:1 #304050);
|
||||
}
|
||||
|
||||
/* 模块标题 */
|
||||
#ModuleTitle {
|
||||
color: #00ff88;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
#ModuleIcon {
|
||||
color: #00ff88;
|
||||
font-size: 20px;
|
||||
text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
/* 模块分隔线 */
|
||||
#ModuleSeparator {
|
||||
border: none;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 transparent, stop:0.5 #3c4a59, stop:1 transparent);
|
||||
height: 1px;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
/* 设备选择器 */
|
||||
#device-selector {
|
||||
background: #2a3441;
|
||||
border: 1px solid #3c4a59;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 设备卡片 */
|
||||
#RightDeviceCard {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #2a3441, stop:1 #34404f);
|
||||
border-radius: 10px;
|
||||
border: 2px solid #3c4a59;
|
||||
padding: 12px;
|
||||
margin: 4px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
#RightDeviceCard:hover {
|
||||
border-color: #00a8ff;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #34404f, stop:1 #3e4a5f);
|
||||
}
|
||||
|
||||
#RightDeviceCard[active="true"] {
|
||||
border-color: #00ff88;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 rgba(0, 255, 136, 0.1), stop:1 rgba(0, 255, 136, 0.05));
|
||||
box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
#DeviceName {
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#DeviceStatus {
|
||||
color: #a4b0be;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 功能按钮基础样式 */
|
||||
#FunctionBtn {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #2a3441, stop:1 #34404f);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #3c4a59;
|
||||
margin: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#FunctionBtn:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #34404f, stop:1 #3e4a5f);
|
||||
border-color: #00a8ff;
|
||||
}
|
||||
|
||||
#FunctionBtn:pressed {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #1e2a36, stop:1 #283341);
|
||||
}
|
||||
|
||||
/* 主要按钮样式 */
|
||||
#FunctionBtn[class="primary-large"] {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00ff88, stop:1 #00c46a);
|
||||
color: #0f1419;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border: 2px solid #00ff88;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="primary-large"]:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00c46a, stop:1 #009951);
|
||||
box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4);
|
||||
}
|
||||
|
||||
#FunctionBtn[class="primary-medium"] {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00ff88, stop:1 #00c46a);
|
||||
color: #0f1419;
|
||||
font-weight: 700;
|
||||
border: 2px solid #00ff88;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="primary-medium"]:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00c46a, stop:1 #009951);
|
||||
box-shadow: 0 3px 12px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
/* 次要按钮样式 */
|
||||
#FunctionBtn[class="secondary-medium"] {
|
||||
background: #2a3441;
|
||||
border: 2px solid #3c4a59;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="secondary-medium"]:hover {
|
||||
border-color: #00a8ff;
|
||||
background: #34404f;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="secondary-small"] {
|
||||
background: #2a3441;
|
||||
border: 2px solid #3c4a59;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="secondary-small"]:hover {
|
||||
border-color: #00a8ff;
|
||||
background: #34404f;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
#FunctionBtn[class="danger"] {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #ff3838, stop:1 #c44569);
|
||||
border: 2px solid #ff3838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="danger"]:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #e53e3e, stop:1 #b83b5e);
|
||||
box-shadow: 0 4px 15px rgba(255, 56, 56, 0.4);
|
||||
}
|
||||
|
||||
/* 加载状态按钮 */
|
||||
#FunctionBtn[class="loading"] {
|
||||
background: #34404f;
|
||||
border-color: #3c4a59;
|
||||
color: #a4b0be;
|
||||
}
|
||||
|
||||
#FunctionBtn:disabled {
|
||||
background: #1e2832;
|
||||
color: #556983;
|
||||
border-color: #2a3441;
|
||||
}
|
||||
|
||||
/* 统计显示区域 */
|
||||
#stats-display {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #2a3441, stop:1 #34404f);
|
||||
border-radius: 8px;
|
||||
border: 2px solid #3c4a59;
|
||||
border-left: 4px solid #ffa502;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#stat-label {
|
||||
color: #a4b0be;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#stat-value {
|
||||
color: #00ff88;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
#threat-level {
|
||||
color: #ffa502;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 5px rgba(255, 165, 2, 0.3);
|
||||
}
|
||||
|
||||
/* 通话状态 */
|
||||
#call-status {
|
||||
background: #2a3441;
|
||||
border: 2px solid #3c4a59;
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
color: #a4b0be;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 音量控制 */
|
||||
#volume-label {
|
||||
color: #a4b0be;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#volume-percent {
|
||||
color: #00ff88;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 音量滑块样式 */
|
||||
#volume-slider::groove:horizontal {
|
||||
border: 2px solid #3c4a59;
|
||||
height: 8px;
|
||||
background: #2a3441;
|
||||
border-radius: 4px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
#volume-slider::handle:horizontal {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00ff88, stop:1 #00c46a);
|
||||
border: 2px solid #00ff88;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -8px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#volume-slider::handle:horizontal:hover {
|
||||
background: #00c46a;
|
||||
box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
#volume-slider::sub-page:horizontal {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #00ff88, stop:1 #00a8ff);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
#FunctionBtn, #RightDeviceCard, #ModuleCard {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 按钮按下效果 */
|
||||
#FunctionBtn:pressed {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 设备卡片激活效果 */
|
||||
#RightDeviceCard[active="true"] {
|
||||
animation: glow-pulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* 发光脉冲动画 */
|
||||
@keyframes glow-pulse {
|
||||
from {
|
||||
box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态旋转动画 */
|
||||
#FunctionBtn[class="loading"]::after {
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@ -0,0 +1,326 @@
|
||||
/* ===============================================
|
||||
战场探索系统 - 蓝色军事主题样式表
|
||||
版本: 2.1 蓝色配色版
|
||||
=============================================== */
|
||||
|
||||
/* 全局字体和基础样式 */
|
||||
QWidget {
|
||||
font-family: "Microsoft YaHei", "SimHei", sans-serif;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 主面板样式 */
|
||||
#rightFunctionPanel {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #0f1419, stop:1 #1a252f);
|
||||
border-left: 3px solid #00a8ff;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
/* 面板标题 */
|
||||
#PanelTitle {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #00a8ff, stop:1 #0078d4);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 16px 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
border: 2px solid #00a8ff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* 模块卡片 */
|
||||
#ModuleCard {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #1e2832, stop:1 #2a3441);
|
||||
border-radius: 12px;
|
||||
border: 2px solid #3c4a59;
|
||||
border-left: 4px solid #00a8ff;
|
||||
padding: 0px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
#ModuleCard:hover {
|
||||
border-color: #00a8ff;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #243340, stop:1 #304050);
|
||||
}
|
||||
|
||||
/* 模块标题 */
|
||||
#ModuleTitle {
|
||||
color: #00a8ff;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 5px rgba(0, 168, 255, 0.3);
|
||||
}
|
||||
|
||||
#ModuleIcon {
|
||||
color: #00a8ff;
|
||||
font-size: 20px;
|
||||
text-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 模块分隔线 */
|
||||
#ModuleSeparator {
|
||||
border: none;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 transparent, stop:0.5 #3c4a59, stop:1 transparent);
|
||||
height: 1px;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
/* 设备选择器 */
|
||||
#device-selector {
|
||||
background: #2a3441;
|
||||
border: 1px solid #3c4a59;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 设备卡片 */
|
||||
#RightDeviceCard {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #2a3441, stop:1 #34404f);
|
||||
border-radius: 10px;
|
||||
border: 2px solid #3c4a59;
|
||||
padding: 12px;
|
||||
margin: 4px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
#RightDeviceCard:hover {
|
||||
border-color: #66d6ff;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #34404f, stop:1 #3e4a5f);
|
||||
}
|
||||
|
||||
#RightDeviceCard[active="true"] {
|
||||
border-color: #00a8ff;
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 rgba(0, 168, 255, 0.1), stop:1 rgba(0, 168, 255, 0.05));
|
||||
box-shadow: 0 0 15px rgba(0, 168, 255, 0.3);
|
||||
}
|
||||
|
||||
#DeviceName {
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#DeviceStatus {
|
||||
color: #a4b0be;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 功能按钮基础样式 */
|
||||
#FunctionBtn {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #2a3441, stop:1 #34404f);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #3c4a59;
|
||||
margin: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#FunctionBtn:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #34404f, stop:1 #3e4a5f);
|
||||
border-color: #66d6ff;
|
||||
}
|
||||
|
||||
#FunctionBtn:pressed {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #1e2a36, stop:1 #283341);
|
||||
}
|
||||
|
||||
/* 主要按钮样式 */
|
||||
#FunctionBtn[class="primary-large"] {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00a8ff, stop:1 #0078d4);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border: 2px solid #00a8ff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="primary-large"]:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #0078d4, stop:1 #005a9e);
|
||||
box-shadow: 0 4px 15px rgba(0, 168, 255, 0.4);
|
||||
}
|
||||
|
||||
#FunctionBtn[class="primary-medium"] {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00a8ff, stop:1 #0078d4);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
border: 2px solid #00a8ff;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="primary-medium"]:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #0078d4, stop:1 #005a9e);
|
||||
box-shadow: 0 3px 12px rgba(0, 168, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 次要按钮样式 */
|
||||
#FunctionBtn[class="secondary-medium"] {
|
||||
background: #2a3441;
|
||||
border: 2px solid #3c4a59;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="secondary-medium"]:hover {
|
||||
border-color: #66d6ff;
|
||||
background: #34404f;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="secondary-small"] {
|
||||
background: #2a3441;
|
||||
border: 2px solid #3c4a59;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="secondary-small"]:hover {
|
||||
border-color: #66d6ff;
|
||||
background: #34404f;
|
||||
}
|
||||
|
||||
/* 危险按钮样式 */
|
||||
#FunctionBtn[class="danger"] {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #ff3838, stop:1 #c44569);
|
||||
border: 2px solid #ff3838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#FunctionBtn[class="danger"]:hover {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #e53e3e, stop:1 #b83b5e);
|
||||
box-shadow: 0 4px 15px rgba(255, 56, 56, 0.4);
|
||||
}
|
||||
|
||||
/* 加载状态按钮 */
|
||||
#FunctionBtn[class="loading"] {
|
||||
background: #34404f;
|
||||
border-color: #3c4a59;
|
||||
color: #a4b0be;
|
||||
}
|
||||
|
||||
#FunctionBtn:disabled {
|
||||
background: #1e2832;
|
||||
color: #556983;
|
||||
border-color: #2a3441;
|
||||
}
|
||||
|
||||
/* 统计显示区域 */
|
||||
#stats-display {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #2a3441, stop:1 #34404f);
|
||||
border-radius: 8px;
|
||||
border: 2px solid #3c4a59;
|
||||
border-left: 4px solid #00a8ff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#stat-label {
|
||||
color: #a4b0be;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#stat-value {
|
||||
color: #00a8ff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
|
||||
}
|
||||
|
||||
#threat-level {
|
||||
color: #ffa502;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 5px rgba(255, 165, 2, 0.3);
|
||||
}
|
||||
|
||||
/* 通话状态 */
|
||||
#call-status {
|
||||
background: #2a3441;
|
||||
border: 2px solid #3c4a59;
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
color: #a4b0be;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 音量控制 */
|
||||
#volume-label {
|
||||
color: #a4b0be;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#volume-percent {
|
||||
color: #00a8ff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 音量滑块样式 */
|
||||
#volume-slider::groove:horizontal {
|
||||
border: 2px solid #3c4a59;
|
||||
height: 8px;
|
||||
background: #2a3441;
|
||||
border-radius: 4px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
#volume-slider::handle:horizontal {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1,
|
||||
stop:0 #00a8ff, stop:1 #0078d4);
|
||||
border: 2px solid #00a8ff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -8px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#volume-slider::handle:horizontal:hover {
|
||||
background: #0078d4;
|
||||
box-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
|
||||
}
|
||||
|
||||
#volume-slider::sub-page:horizontal {
|
||||
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
|
||||
stop:0 #00a8ff, stop:1 #66d6ff);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 设备卡片激活效果 */
|
||||
#RightDeviceCard[active="true"] {
|
||||
animation: glow-pulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* 发光脉冲动画 - 蓝色版 */
|
||||
@keyframes glow-pulse {
|
||||
from {
|
||||
box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 20px rgba(0, 168, 255, 0.6);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue