优化编辑器和前端内容页显示
This commit is contained in:
+380
-4
@@ -5,15 +5,15 @@
|
||||
|
||||
// body 样式
|
||||
body {
|
||||
background-color: var(--el-bg-color-page);
|
||||
color: var(--el-text-color-primary);
|
||||
background-color: #f5f7fa;
|
||||
color: #303133;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
// container-box 样式
|
||||
.container-box {
|
||||
background-color: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ebeef5;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
@@ -48,6 +48,382 @@ body {
|
||||
.toolbar-container{
|
||||
border-bottom: 1px solid #dcdfe6 !important;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
background-color: transparent !important;
|
||||
|
||||
* {
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1a1a2e !important;
|
||||
margin: 8px 0 !important;
|
||||
line-height: 1.8 !important;
|
||||
font-size: 14px !important;
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: 600 !important;
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
s, del {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 28px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3973ff !important;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&:hover {
|
||||
color: #3973ff !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f5f7fa !important;
|
||||
color: #1a1a2e !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
border-radius: 3px !important;
|
||||
padding: 2px 6px !important;
|
||||
font-family: 'Consolas', 'Monaco', monospace !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f5f7fa !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
border-radius: 4px !important;
|
||||
color: #1a1a2e !important;
|
||||
padding: 12px 16px !important;
|
||||
margin: 12px 0 !important;
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
color: #1a1a2e !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #3973ff !important;
|
||||
background-color: #f5f7fa !important;
|
||||
color: #606266 !important;
|
||||
padding: 8px 16px !important;
|
||||
margin: 12px 0 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
width: 100% !important;
|
||||
|
||||
th, td {
|
||||
border: 1px solid #e4e7ed !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #1a1a2e !important;
|
||||
padding: 8px 12px !important;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f5f7fa !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc !important;
|
||||
color: #1a1a2e !important;
|
||||
padding-left: 24px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal !important;
|
||||
color: #1a1a2e !important;
|
||||
padding-left: 24px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #1a1a2e !important;
|
||||
line-height: 1.8 !important;
|
||||
margin: 4px 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #e4e7ed !important;
|
||||
margin: 16px 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
.w-e-panel-tab-content {
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.wang-editor-wrapper {
|
||||
border-color: #3d3d3d !important;
|
||||
background-color: #1a1a1a !important;
|
||||
|
||||
.toolbar-container {
|
||||
background-color: #2d2d2d !important;
|
||||
border-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
background-color: #1a1a1a !important;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #4d4d4d !important;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #2d2d2d !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
background-color: transparent !important;
|
||||
|
||||
* {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #e0e0e0 !important;
|
||||
margin: 8px 0 !important;
|
||||
line-height: 1.8 !important;
|
||||
font-size: 14px !important;
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: 600 !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
s, del {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 28px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4f84ff !important;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&:hover {
|
||||
color: #4f84ff !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #2d2d2d !important;
|
||||
color: #e0e0e0 !important;
|
||||
border-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #2d2d2d !important;
|
||||
border-color: #3d3d3d !important;
|
||||
color: #e0e0e0 !important;
|
||||
|
||||
code {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-color: #4f84ff !important;
|
||||
background-color: #2d2d2d !important;
|
||||
color: #b0b0b0 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-color: #3d3d3d !important;
|
||||
|
||||
th, td {
|
||||
border-color: #3d3d3d !important;
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #2d2d2d !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol, li {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
img, video {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.w-e-panel-tab-content {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item__label{
|
||||
min-width: 80px !important;
|
||||
|
||||
Reference in New Issue
Block a user