- 新增 GPT-5.4 深度解析文章,涵盖六大核心能力详解 - 添加 SVG 格式的 GPT-5.4 能力全景图 - 添加 Mermaid 格式的模型家族关系图 - 添加 GPT-5.4 六大能力思维导图 - 添加 Computer Use 工作流程图 - 添加 OSWorld 桌面操作基准测试图表 - 添加 上下文窗口演进对比图 - 添加 上下文压缩原理图 - 添加 Tool Search 机制对比图 - 添加 可配置推理深度图 - 添加 GDPval 对比图表 - 添加 三方模型对比图 - 添加 API 定价对比图 - 添加 Mermaid 配置文件和样式文件 - 添加模型选择指南 SVG 图片
116 lines
2.7 KiB
CSS
116 lines
2.7 KiB
CSS
/* Sci-fi / Tech style for mermaid diagrams */
|
|
|
|
/* Node styling */
|
|
.node rect, .node polygon, .node circle, .node ellipse {
|
|
stroke-width: 2px !important;
|
|
filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4)) !important;
|
|
rx: 8 !important;
|
|
ry: 8 !important;
|
|
}
|
|
|
|
/* All text white/cyan */
|
|
text, tspan {
|
|
fill: #e0f7fa !important;
|
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
|
|
}
|
|
|
|
/* Cluster/subgraph borders */
|
|
.cluster rect {
|
|
stroke: #1a6a8a !important;
|
|
stroke-width: 2px !important;
|
|
stroke-dasharray: 6 3 !important;
|
|
fill: rgba(10, 26, 46, 0.7) !important;
|
|
rx: 12 !important;
|
|
ry: 12 !important;
|
|
filter: drop-shadow(0 0 8px rgba(0, 184, 212, 0.2)) !important;
|
|
}
|
|
|
|
/* Cluster labels */
|
|
.cluster text, .cluster tspan {
|
|
fill: #4dd0e1 !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/* Edge/arrow lines */
|
|
.edge-pattern-solid, .flowchart-link {
|
|
stroke: #00b8d4 !important;
|
|
stroke-width: 2px !important;
|
|
}
|
|
|
|
/* Arrow markers */
|
|
marker path {
|
|
fill: #00e5ff !important;
|
|
}
|
|
|
|
/* Sequence diagram lines */
|
|
.messageLine0, .messageLine1 {
|
|
stroke: #00b8d4 !important;
|
|
stroke-width: 2px !important;
|
|
}
|
|
|
|
/* Sequence diagram actors */
|
|
.actor {
|
|
stroke: #00e5ff !important;
|
|
fill: #0d2137 !important;
|
|
stroke-width: 2px !important;
|
|
filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.3)) !important;
|
|
}
|
|
|
|
/* Labels on edges */
|
|
.edgeLabel rect {
|
|
fill: #0a1628 !important;
|
|
opacity: 0.9 !important;
|
|
}
|
|
|
|
.edgeLabel span, .edgeLabel text, .edgeLabel tspan {
|
|
fill: #80deea !important;
|
|
color: #80deea !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Note boxes */
|
|
.note {
|
|
fill: #112240 !important;
|
|
stroke: #00e5ff !important;
|
|
}
|
|
|
|
/* Mindmap specific */
|
|
.mindmap-node rect, .mindmap-node circle, .mindmap-node polygon {
|
|
filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4)) !important;
|
|
}
|
|
|
|
.mindmap-node text, .mindmap-node tspan {
|
|
fill: #e0f7fa !important;
|
|
}
|
|
|
|
/* Activation bars in sequence diagrams */
|
|
.activation0, .activation1, .activation2 {
|
|
fill: #112240 !important;
|
|
stroke: #00e5ff !important;
|
|
}
|
|
|
|
/* Loop/alt boxes */
|
|
.loopLine {
|
|
stroke: #1a6a8a !important;
|
|
stroke-dasharray: 4 3 !important;
|
|
}
|
|
|
|
.loopText tspan, .loopText text {
|
|
fill: #4dd0e1 !important;
|
|
}
|
|
|
|
/* Label styling */
|
|
.label text, .label tspan {
|
|
fill: #e0f7fa !important;
|
|
}
|
|
|
|
/* Highlighted nodes with custom styles from mermaid */
|
|
[style*="fill:#4A90D9"], [style*="fill:#E74C3C"], [style*="fill:#27AE60"],
|
|
[style*="fill:#F39C12"], [style*="fill:#8E44AD"], [style*="fill:#9B59B6"],
|
|
[style*="fill:#2ECC71"], [style*="fill:#3498DB"], [style*="fill:#E67E22"] {
|
|
filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6)) !important;
|
|
stroke: #00e5ff !important;
|
|
stroke-width: 2px !important;
|
|
}
|