This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化代码块显示

old
宇天 2021-01-29 15:43:54 +08:00
parent 17d399d8fb
commit c6837e79c0
2 changed files with 22 additions and 22 deletions

View File

@ -18,31 +18,33 @@
} }
.code-box { .code-box {
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
width: 100%; width: 100%;
max-height: 610px; max-height: 610px;
margin: 10px 0; margin: 10px 0;
border: 1px solid var(--color-plain-2); border-radius: 6px;
border-radius: 2px; background: #f7f8fb;
color: var(--color-dark-1);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
.title { .title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 24px; height: 32px;
padding: 0 12px; padding: 0 12px;
line-height: 1; line-height: 1;
font-size: 12px; font-size: 14px;
background: var(--color-plain-2);
user-select: none; user-select: none;
i { i {
display: inline-block; display: inline-block;
width: 10px; width: 12px;
height: 10px; height: 12px;
margin-right: 6px; margin-right: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--color-red-1); background: var(--color-red-1);
@ -55,8 +57,8 @@
} }
.act { .act {
--size: 16px; --size: 18px;
margin: 0 2px; margin: 0 6px;
color: var(--color-grey-2); color: var(--color-grey-2);
cursor: pointer; cursor: pointer;
@ -75,7 +77,6 @@
line-height: 18px; line-height: 18px;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 13px; font-size: 13px;
background: linear-gradient(to right, var(--color-plain-1) 40px, #fff 40px);
color: var(--color-dark-1); color: var(--color-dark-1);
cursor: text; cursor: text;
counter-reset: code; counter-reset: code;
@ -114,18 +115,11 @@
:host([dark]) { :host([dark]) {
.code-box { .code-box {
border-color: var(--color-dark-2); border-color: var(--color-dark-2);
background: var(--color-dark-1);
.title { color: var(--color-plain-3);
background: var(--color-dark-2);
}
.code { .code {
background: linear-gradient( color: var(--color-plain-2);
to right,
#596b7f 40px,
var(--color-dark-1) 40px
);
color: var(--color-plain-3);
p::before { p::before {
color: var(--color-grey-3); color: var(--color-grey-3);
@ -180,7 +174,13 @@ export default class Code {
mounted() { mounted() {
var txt = this.innerHTML || this.textContent var txt = this.innerHTML || this.textContent
this.value = txt.replace(/^[\r\n]|\s{2,}$/g, '')
txt = txt.trim().replace(/^[\r\n]|\s{2,}$/g, '')
if (txt.startsWith('<xmp>') && txt.endsWith('</xmp>')) {
txt = txt.slice(5, -6).trim()
}
this.value = txt
this.textContent = '' this.textContent = ''
this._cpFN = $.bind(this.__CP__, 'click', ev => { this._cpFN = $.bind(this.__CP__, 'click', ev => {

View File

@ -177,7 +177,7 @@
} }
&:focus { &:focus {
@include focus1; // @include focus1;
} }
&:last-child { &:last-child {