130 lines
2.9 KiB
CSS
130 lines
2.9 KiB
CSS
:root {
|
|
--blue: rgb(88, 164, 246);
|
|
--light: #fff;
|
|
--primary-color: #1890ff;
|
|
--primary-color-bg: #1890ff1a;
|
|
--app-background: #f4f4f4;
|
|
--card-background: #ffffff;
|
|
--text-color: rgba(0, 0, 0, 0.85);
|
|
--text-color-secondary: rgba(0, 0, 0, 0.45);
|
|
--border-color: #f0f0f0;
|
|
--hover-background: rgba(0, 0, 0, 0.04);
|
|
--scrollbar-thumb: rgba(0, 0, 0, 0.28);
|
|
--app-font-size: 16px;
|
|
--editor-font-size: 17px;
|
|
--preview-font-size: 16px;
|
|
--preview-code-font-size: 16px;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--app-background);
|
|
color: var(--text-color);
|
|
font-size: var(--app-font-size);
|
|
line-height: 1.5;
|
|
font-family: var(--app-font-family, "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif);
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background: none var(--primary-color);
|
|
color: #fff;
|
|
line-height: 2.5;
|
|
cursor: pointer;
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
button:disabled {
|
|
filter: grayscale(1);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button:not(:disabled):active {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
textarea {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
background-color: var(--app-background);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
border-color: var(--app-background);
|
|
}
|
|
|
|
/* 全局主题样式 - 确保 Ant Design Vue 组件使用主题变量 */
|
|
.ant-modal-content {
|
|
background-color: var(--card-background, #ffffff) !important;
|
|
color: var(--text-color, #000000d9) !important;
|
|
}
|
|
|
|
.ant-modal-header {
|
|
background-color: var(--card-background, #ffffff) !important;
|
|
border-bottom-color: var(--border-color, #e8e8e8) !important;
|
|
}
|
|
|
|
.ant-modal-title {
|
|
color: var(--text-color, #000000d9) !important;
|
|
}
|
|
|
|
.ant-modal-body {
|
|
background-color: var(--card-background, #ffffff) !important;
|
|
color: var(--text-color, #000000d9) !important;
|
|
}
|
|
|
|
.ant-modal-footer {
|
|
background-color: var(--card-background, #ffffff) !important;
|
|
border-top-color: var(--border-color, #e8e8e8) !important;
|
|
}
|
|
|
|
.ant-input,
|
|
.ant-input-affix-wrapper,
|
|
.ant-select-selector,
|
|
.ant-select-selection-search-input,
|
|
.ant-picker,
|
|
.ant-textarea {
|
|
background-color: var(--card-background, #ffffff) !important;
|
|
color: var(--text-color, #000000d9) !important;
|
|
border-color: var(--border-color, #d9d9d9) !important;
|
|
}
|
|
|
|
.ant-input::placeholder,
|
|
.ant-textarea::placeholder {
|
|
color: var(--text-color-secondary, #bfbfbf) !important;
|
|
}
|
|
|
|
.ant-form-item-label > label {
|
|
color: var(--text-color, #000000d9) !important;
|
|
}
|
|
|
|
.ant-select-dropdown {
|
|
background-color: var(--card-background, #ffffff) !important;
|
|
}
|
|
|
|
.ant-select-item {
|
|
color: var(--text-color, #000000d9) !important;
|
|
}
|
|
|
|
.ant-select-item:hover {
|
|
background-color: var(--hover-background, #f5f5f5) !important;
|
|
}
|
|
|
|
.ant-select-item-option-selected {
|
|
background-color: var(--hover-background, #f5f5f5) !important;
|
|
color: var(--primary-color, #1890ff) !important;
|
|
}
|
|
|
|
.font-size-3xl {
|
|
font-size: 3rem;
|
|
}
|