488 lines
15 KiB
CSS
488 lines
15 KiB
CSS
/* 基础样式 */
|
||
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;
|
||
}
|
||
} |