feat(ui): 更新密钥状态页面样式和API调用详情

本次提交对密钥状态页面的样式进行了调整,主要变更包括:

- **位置调整**:
  - 将某些元素的位置从右上角移动至右下角,以改善布局。

- **API调用详情表格样式**:
  - 移除API调用详情模态框表格最后一行单元格的边框。
  - 恢复成功/失败状态颜色和图标颜色,确保在API调用详情表格中状态信息的清晰可见。

这些更改旨在提升用户界面的可用性和视觉效果,改善用户体验。
This commit is contained in:
snaily
2025-05-10 12:27:35 +08:00
parent 9ea3452b17
commit 90161a1f47

View File

@@ -641,8 +641,8 @@ endblock %} {% block head_extra_styles %}
background-color: rgba(245, 158, 11, 0.28) !important;
color: #fde047 !important; /* Slightly lighter amber for text */
border: 1px solid rgba(245, 158, 11, 0.45);
position: absolute; /* 移动到右角 */
top: 0.75rem; /* 配合li的p-3内边距 */
position: absolute; /* 移动到右角 */
bottom: 0.75rem; /* 配合li的p-3内边距 */
right: 0.75rem;
z-index: 5; /* 确保在其他元素之上 */
}
@@ -653,6 +653,33 @@ endblock %} {% block head_extra_styles %}
color: #fca5a5 !important; /* Standard danger text color often works well */
border: 1px solid rgba(239, 68, 68, 0.45);
}
/* Remove border from the last row's cells in API Call Details Modal table */
#apiCallDetailsContent table tr:last-child td {
border-bottom: none !important;
}
/* Restore success/failure status colors and icon colors within the API call details table */
#apiCallDetailsContent table td span[class*="text-success"],
#apiCallDetailsContent table td span[class*="success"] {
color: #6ee7b7 !important; /* Theme success green */
}
#apiCallDetailsContent table td span[class*="text-success"] i,
#apiCallDetailsContent table td span[class*="success"] i {
color: #6ee7b7 !important;
}
#apiCallDetailsContent table td span[class*="text-danger"],
#apiCallDetailsContent table td span[class*="failure"],
#apiCallDetailsContent table td span[class*="danger"] {
color: #fca5b3 !important; /* Theme failure red */
}
#apiCallDetailsContent table td span[class*="text-danger"] i,
#apiCallDetailsContent table td span[class*="failure"] i,
#apiCallDetailsContent table td span[class*="danger"] i {
color: #fca5b3 !important;
}
/* End of API Call Details Modal Specific Styling Adjustments */
</style>
{% endblock %} {% block head_extra_scripts %}
<!-- keys_status.js needs to be loaded in head because it might be used by inline scripts -->