/* 基础样式 */ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #ffffff; color: #333333; } /* 默认浅色主题样式 */ .swagger-ui .topbar { background-color: #2c3e50; padding: 15px 0; } .swagger-ui .topbar .topbar-wrapper .link { color: #ecf0f1; font-size: 1.2rem; } .swagger-ui .info { margin: 20px 0; } .swagger-ui .info .title { font-size: 2rem; margin-bottom: 10px; color: #333; } .swagger-ui .info .description { font-size: 1rem; color: #555; margin-bottom: 15px; } /* 修复服务器URL输入框样式 */ .swagger-ui .servers li input[type="text"] { padding: 8px 12px; width: 100%; box-sizing: border-box; } /* 修复服务器选择区域的背景颜色和布局 */ .swagger-ui .servers { padding: 16px; width: 100%; box-sizing: border-box; margin: 0; } /* 确保服务器列表容器有正确的背景色和布局 */ .swagger-ui .servers-wrapper { width: 100%; box-sizing: border-box; margin: 0; } /* 确保整个顶部区域颜色一致和布局正确 */ .swagger-ui .info { margin: 0; padding: 20px 16px; width: 100%; box-sizing: border-box; } /* 确保顶部主容器颜色一致和布局正确 */ .swagger-ui { width: 100%; box-sizing: border-box; margin: 0; padding: 0; } /* 确保API信息区域颜色一致和布局正确 */ .swagger-ui .info-container { width: 100%; box-sizing: border-box; } body.dark-mode .swagger-ui .servers li label { color: #ffffff !important; font-weight: 500 !important; } /* 修复服务器URL输入框深色模式样式 */ body.dark-mode .swagger-ui .servers li input[type="text"] { background-color: #1a202c !important; color: #ffffff !important; border-color: #4a5568 !important; padding: 8px 12px !important; width: 100% !important; } /* 修复服务器选择区域的深色模式背景颜色和布局 */ body.dark-mode .swagger-ui .servers { background-color: #1a202c !important; border: none !important; padding: 16px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } /* 确保服务器列表容器在深色模式下也有正确的背景色和布局 */ body.dark-mode .swagger-ui .servers-wrapper { background-color: #1a202c !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } /* 确保整个顶部区域在深色模式下颜色一致和布局正确 */ body.dark-mode .swagger-ui .info { background-color: #1a202c !important; margin: 0 !important; padding: 20px 16px !important; border-bottom: 1px solid #4a5568 !important; width: 100% !important; box-sizing: border-box !important; } /* 确保顶部主容器在深色模式下颜色一致和布局正确 */ body.dark-mode .swagger-ui { background-color: #1a202c !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } /* 确保API信息区域在深色模式下颜色一致和布局正确 */ body.dark-mode .swagger-ui .info-container { background-color: #1a202c !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } /* 修复深色模式下内容区域的布局问题 */ body.dark-mode .swagger-ui .wrapper { width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } /* 修复深色模式下API操作块的布局 */ body.dark-mode .swagger-ui .opblock { margin: 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* 修复深色模式下过滤器的布局 */ body.dark-mode .swagger-ui .filter { width: 100% !important; box-sizing: border-box !important; padding: 16px !important; margin: 0 !important; } /* 修复深色模式下顶部栏布局 */ body.dark-mode .swagger-ui .topbar { width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 15px 0 !important; } /* 修复深色模式下顶部栏包装器布局 */ body.dark-mode .swagger-ui .topbar .topbar-wrapper { width: 100% !important; box-sizing: border-box !important; padding: 0 16px !important; } /* 修复深色模式下响应容器布局 */ body.dark-mode .swagger-ui .responses-inner { width: 100% !important; box-sizing: border-box !important; } /* 修复深色模式下操作块摘要布局 */ body.dark-mode .swagger-ui .opblock-summary { width: 100% !important; box-sizing: border-box !important; } /* 确保深色模式下所有容器元素都使用box-sizing */ body.dark-mode * { box-sizing: border-box !important; } /* 增强标签标题深色模式样式 */ body.dark-mode .swagger-ui .opblock-tag { color: #ffffff !important; background-color: #2d3748 !important; padding: 12px 16px !important; border-radius: 6px !important; margin-bottom: 12px !important; font-weight: 700 !important; font-size: 1.1rem !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } /* 增强标签标题(h3)深色模式样式 */ body.dark-mode .swagger-ui .opblock-tag.h3 { color: #ffffff !important; background-color: #2d3748 !important; } /* 增强标签部分深色模式样式 */ body.dark-mode .swagger-ui .opblock-tag-section { background-color: #2d3748 !important; padding: 16px !important; border-radius: 8px !important; margin-bottom: 20px !important; } /* 增强API描述深色模式样式 */ body.dark-mode .swagger-ui .opblock-description-wrapper { color: #ffffff !important; background-color: #2d3748 !important; padding: 12px 16px !important; border-radius: 6px !important; margin-bottom: 12px !important; font-weight: 500 !important; } body.dark-mode .swagger-ui .opblock-description-wrapper p { color: #ffffff !important; line-height: 1.5 !important; } /* 增强stats标签描述深色模式样式 */ body.dark-mode .swagger-ui .opblock-summary-description { color: #ffffff !important; font-weight: 500 !important; } /* 增强操作块标题深色模式样式 */ body.dark-mode .swagger-ui .opblock-title_normal h4 { color: #ffffff !important; font-weight: 600 !important; } /* 增强参数部分深色模式样式 */ body.dark-mode .swagger-ui .opblock-body { background-color: #2d3748 !important; } body.dark-mode .swagger-ui .opblock-body .parameter__name { color: #ffffff !important; font-weight: 600 !important; } body.dark-mode .swagger-ui .opblock-body .parameter__type { color: #ffffff !important; font-weight: 500 !important; } body.dark-mode .swagger-ui .opblock-body .parameter__description { color: #ffffff !important; } body.dark-mode .swagger-ui .parameters-col_description, body.dark-mode .swagger-ui .parameters-col_name, body.dark-mode .swagger-ui .parameters-col_type { color: #ffffff !important; } body.dark-mode .swagger-ui .parameters-col_description p, body.dark-mode .swagger-ui .parameters-col_name p, body.dark-mode .swagger-ui .parameters-col_type p { color: #ffffff !important; } /* 新增:适配API文档展开界面的所有文字元素 */ body.dark-mode .swagger-ui .opblock-body { color: #ffffff; } body.dark-mode .swagger-ui .opblock-body .parameter__name { color: #ffffff; } body.dark-mode .swagger-ui .opblock-body .parameter__type { color: #ffffff; } body.dark-mode .swagger-ui .opblock-body .parameter__description { color: #ffffff; } body.dark-mode .swagger-ui .opblock-body .body-param-options { color: #ffffff; } body.dark-mode .swagger-ui .opblock-body .body-param-options .body-param-type { color: #ffffff; } body.dark-mode .swagger-ui .responses-inner { color: #ffffff; } body.dark-mode .swagger-ui .responses-inner h4 { color: #ffffff; } body.dark-mode .swagger-ui .response-container { color: #ffffff; } body.dark-mode .swagger-ui .response-container .response-wrapper { color: #ffffff; } body.dark-mode .swagger-ui .response-container .response-code { color: #ffffff; } body.dark-mode .swagger-ui .response-container .response-description { color: #ffffff; } body.dark-mode .swagger-ui .model { color: #ffffff; } body.dark-mode .swagger-ui .model .property { color: #ffffff; } body.dark-mode .swagger-ui .model .property .property-name { color: #ffffff; } body.dark-mode .swagger-ui .model .property .property-description { color: #ffffff; } body.dark-mode .swagger-ui .model .property .property-type { color: #ffffff; } body.dark-mode .swagger-ui .model .property .required { color: #ffffff; } body.dark-mode .swagger-ui .scroll-to-top { color: #ffffff; } body.dark-mode .swagger-ui .opblock-tag-section { color: #ffffff; } body.dark-mode .swagger-ui .servers-title { color: #ffffff; } body.dark-mode .swagger-ui .servers { color: #ffffff; } body.dark-mode .swagger-ui .servers li { color: #ffffff; } body.dark-mode .swagger-ui .servers li label { color: #ffffff; } body.dark-mode .swagger-ui .servers li select { color: #ffffff; background-color: #1a202c; border-color: #4a5568; } body.dark-mode .swagger-ui .auth-wrapper { color: #ffffff; } body.dark-mode .swagger-ui .auth-wrapper .auth-title { color: #ffffff; } body.dark-mode .swagger-ui .auth-wrapper .auth-list { color: #ffffff; } body.dark-mode .swagger-ui .auth-wrapper .auth-item { color: #ffffff; } body.dark-mode .swagger-ui .auth-wrapper .auth-item label { color: #ffffff; } /* 确保代码块内的文字也清晰可见 */ body.dark-mode .swagger-ui pre { color: #ffffff; } body.dark-mode .swagger-ui code { color: #ffffff; } /* 确保所有表单元素的文字颜色正确 */ body.dark-mode .swagger-ui form { color: #ffffff; } body.dark-mode .swagger-ui form label { color: #ffffff; } body.dark-mode .swagger-ui select { color: #ffffff; background-color: #1a202c; border-color: #4a5568; } /* 适配可能的嵌套内容 */ body.dark-mode .swagger-ui .opblock-body .schema { color: #ffffff; } body.dark-mode .swagger-ui .opblock-body .schema .title { color: #ffffff; } body.dark-mode .swagger-ui .opblock-body .schema .required { color: #ffffff; } /* 适配可能的按钮组 */ body.dark-mode .swagger-ui .btn-group { color: #ffffff; } /* 适配可能的标签 */ body.dark-mode .swagger-ui .tag { color: #ffffff; } /* 适配可能的警告和提示信息 */ body.dark-mode .swagger-ui .warning { color: #ffffff; } body.dark-mode .swagger-ui .hint { color: #ffffff; } /* 适配可能的表格内容 */ body.dark-mode .swagger-ui table { color: #ffffff; } body.dark-mode .swagger-ui table th { color: #ffffff; } body.dark-mode .swagger-ui table td { color: #ffffff; } /* 响应式设计 */ @media (max-width: 768px) { .topbar-controls { flex-direction: column; align-items: flex-end; gap: 10px; } .theme-toggle-btn { padding: 6px 10px; font-size: 12px; } .theme-toggle-btn span { display: none; } }