.qiuwen-edit-demo {
display: flex;
border: 1px solid #c8ccd1;
background: #f8f9fa;
}
.qiuwen-edit-demo-title {
text-align: center;
font-weight: bold;
}
.qiuwen-edit-demo > div {
flex: 1;
}
.qiuwen-edit-demo-column {
display: flex;
}
.qiuwen-edit-demo-column-heading {
font-weight: bold;
text-align: center;
background: #eaecf0;
padding: 0.2em 0.5em;
}
.qiuwen-edit-demo-column-content {
padding: 3px 0.5em;
flex: 1;
}
.qiuwen-edit-demo-source-column > .qiuwen-edit-demo-column-content > pre:only-child,
.qiuwen-edit-demo-source-column > .qiuwen-edit-demo-column-content > .mw-highlight:only-child > pre /* 考虑到 syntaxhighlight 产生的 pre 会被 div 包围一层*/{
margin: -3px -0.5em; /* 抵消外侧元素3px 0.5em的margin */
border: none;
}
.qiuwen-edit-demo + .qiuwen-edit-demo {
border-top: none;
margin-top: 0;
}
.qiuwen-edit-demo-title + .qiuwen-edit-demo {
margin-top: 0;
}
@media (min-width: 850px) {
.qiuwen-edit-demo > div:not(:first-child) {
border-left: 1px solid #c8ccd1;
}
.qiuwen-edit-demo-column {
flex-direction: column;
}
.qiuwen-edit-demo-column-heading {
border-bottom: 1px solid #c8ccd1;
}
body.skin-gongbi .qiuwen-edit-demo-column-heading {
top: 3.75em;
}
.qiuwen-edit-demo + .qiuwen-edit-demo > div > .qiuwen-edit-demo-column-heading {
display: none;
}
}
@media (max-width: 850px) {
.qiuwen-edit-demo > div:not(:first-child) {
border-top: 1px solid #c8ccd1;
}
.qiuwen-edit-demo {
flex-direction: column;
}
.qiuwen-edit-demo-column-heading {
writing-mode: vertical-rl;
border-right: 1px solid #c8ccd1;
}
.qiuwen-edit-demo-column {
flex-direction: row;
}
}