✨ feat: 新增 WYSIWYG 编辑器功能和相关工具栏事件处理
This commit is contained in:
@@ -0,0 +1,279 @@
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.vditor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
font-family: @font-family-base;
|
||||
|
||||
&--fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100% !important;
|
||||
left: 0;
|
||||
height: 100vh !important;
|
||||
z-index: 90;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
min-height: 60px;
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-preview {
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
overflow: auto;
|
||||
margin-left: -1px;
|
||||
border-left: 1px solid var(--border-color);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 3px 0;
|
||||
background-color: var(--textarea-background-color);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&__action {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background-color: var(--toolbar-background-color);
|
||||
|
||||
button {
|
||||
background-color: var(--toolbar-background-color);
|
||||
color: var(--toolbar-icon-color);
|
||||
line-height: 20px;
|
||||
border: 0;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
|
||||
&.vditor-preview__action--current,
|
||||
&:hover {
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
background-color: var(--toolbar-background-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .vditor-reset {
|
||||
padding: 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img:not(.emoji) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-devtools {
|
||||
display: none;
|
||||
background-color: var(--textarea-background-color);
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
box-shadow: inset 1px 0 var(--border-color);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 3px 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-counter {
|
||||
padding: 3px;
|
||||
color: var(--toolbar-icon-color);
|
||||
background-color: var(--count-background-color);
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
float: right;
|
||||
margin: 8px 3px 0 0;
|
||||
|
||||
&--error {
|
||||
color: @errorColor;
|
||||
background-color: rgba(@errorColor, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&-resize {
|
||||
padding: 3px 0;
|
||||
cursor: row-resize;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
&--top {
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: -3px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
height: 3px;
|
||||
background-color: var(--resize-background-color);
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&--selected {
|
||||
& > div {
|
||||
background-color: var(--resize-hover-background-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--resize-hover-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
width: 13px;
|
||||
height: 3px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
color: var(--resize-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-upload {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
transition: @transition;
|
||||
background-color: @blurColor;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
top: 10px;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: both;
|
||||
left: 50%;
|
||||
z-index: 5;
|
||||
|
||||
&--show {
|
||||
display: block;
|
||||
animation-name: slideInDown;
|
||||
}
|
||||
|
||||
&__content {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
line-height: 16px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 3px;
|
||||
background: var(--toolbar-background-color);
|
||||
position: relative;
|
||||
margin-left: -50%;
|
||||
color: var(--toolbar-icon-color);
|
||||
max-width: 100%;
|
||||
box-shadow: var(--panel-shadow);
|
||||
|
||||
ul {
|
||||
margin: 2px 0;
|
||||
padding: 0 0 0 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @blurColor;
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
color: var(--toolbar-icon-color);
|
||||
top: -7px;
|
||||
right: -15px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
|
||||
&__bar {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background-color: var(--toolbar-background-color);
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-left: 24px;
|
||||
user-select: none;
|
||||
color: var(--toolbar-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-right: 8px;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
flex: 1;
|
||||
background-color: var(--textarea-background-color);
|
||||
overflow: auto;
|
||||
cursor: zoom-out;
|
||||
|
||||
img {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.vditor-hint {
|
||||
background-color: var(--panel-background-color);
|
||||
position: absolute;
|
||||
box-shadow: var(--panel-shadow);
|
||||
border-radius: 3px;
|
||||
padding: 5px 0;
|
||||
z-index: 4;
|
||||
line-height: 20px;
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
max-width: 250px;
|
||||
min-width: 80px;
|
||||
display: none;
|
||||
|
||||
.vditor-hint {
|
||||
margin-top: -31px;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
|
||||
&.vditor-panel--left {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--toolbar-icon-color);
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--current,
|
||||
button:not(.vditor-menu--disabled):hover {
|
||||
background-color: var(--toolbar-background-color) !important;
|
||||
color: var(--toolbar-icon-hover-color) !important;
|
||||
}
|
||||
|
||||
&__emoji {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
.vditor-ir {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&__node {
|
||||
&[data-type="code-block"]:before,
|
||||
&[data-type="code-block"]:after,
|
||||
&[data-type="yaml-front-matter"]:before,
|
||||
&[data-type="yaml-front-matter"]:after,
|
||||
&[data-type="math-block"]:before,
|
||||
&[data-type="math-block"]:after {
|
||||
content: ' ';
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
&:not(.vditor-ir__node--expand) .vditor-ir__marker {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&:not(.vditor-ir__node--expand)[data-type="a"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[data-type="link-ref"],
|
||||
&[data-type="footnotes-ref"] {
|
||||
color: @blurColor;
|
||||
}
|
||||
|
||||
&[data-type="html-block"] {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.vditor-ir__marker {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
.vditor-ir__marker {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&--expand {
|
||||
.vditor-ir__marker {
|
||||
color: var(--second-color);
|
||||
display: inline;
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
||||
&--hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--heading {
|
||||
color: var(--ir-heading-color);
|
||||
}
|
||||
|
||||
&--bi {
|
||||
color: var(--ir-bi-color);
|
||||
}
|
||||
|
||||
&--link {
|
||||
color: var(--ir-link-color);
|
||||
}
|
||||
|
||||
&--title {
|
||||
color: var(--ir-title-color);
|
||||
}
|
||||
|
||||
&--bracket {
|
||||
color: var(--ir-bracket-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&--paren {
|
||||
color: var(--ir-paren-color);
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: var(--ir-heading-color);
|
||||
}
|
||||
|
||||
&--pre code {
|
||||
color: var(--textarea-text-color);
|
||||
height: auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type="code-block"]:before,
|
||||
&[data-type="code-block"]:after {
|
||||
content: '```';
|
||||
}
|
||||
|
||||
&[data-type="yaml-front-matter"]:before,
|
||||
&[data-type="yaml-front-matter"]:after {
|
||||
content: '---';
|
||||
}
|
||||
|
||||
&[data-type="math-block"]:before,
|
||||
&[data-type="math-block"]:after {
|
||||
content: '$$';
|
||||
}
|
||||
}
|
||||
|
||||
span[data-type="code-block-open-marker"],
|
||||
span[data-type="code-block-close-marker"],
|
||||
span[data-type="yaml-front-matter-open-marker"],
|
||||
span[data-type="yaml-front-matter-close-marker"],
|
||||
span[data-type="math-block-open-marker"],
|
||||
span[data-type="math-block-close-marker"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
cursor: pointer;
|
||||
white-space: initial;
|
||||
min-height: 27px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: var(--ir-bracket-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre.vditor-reset {
|
||||
background-color: var(--panel-background-color);
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&[contenteditable="false"] {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: var(--textarea-background-color);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
height: var(--editor-bottom);
|
||||
display: block;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: inline-block;
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
blockquote:empty::before,
|
||||
pre > code:empty::before,
|
||||
p:empty::before,
|
||||
h1:empty::after,
|
||||
h2:empty::after,
|
||||
h3:empty::after,
|
||||
h4:empty::after,
|
||||
h5:empty::after,
|
||||
h6:empty::after {
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
// block title
|
||||
& .vditor-reset > h1:before,
|
||||
& .vditor-reset > h2:before,
|
||||
& .vditor-reset > h3:before,
|
||||
& .vditor-reset > h4:before,
|
||||
& .vditor-reset > h5:before,
|
||||
& .vditor-reset > h6:before,
|
||||
div[data-type="link-ref-defs-block"]:before,
|
||||
div[data-type="footnotes-block"]:before,
|
||||
.vditor-toc:before {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -29px;
|
||||
content: 'H1';
|
||||
font-size: 0.85rem;
|
||||
font-weight: normal;
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
& .vditor-reset > h2:before {
|
||||
content: 'H2';
|
||||
}
|
||||
|
||||
& .vditor-reset > h3:before {
|
||||
content: 'H3';
|
||||
}
|
||||
|
||||
& .vditor-reset > h4:before {
|
||||
content: 'H4';
|
||||
}
|
||||
|
||||
& .vditor-reset > h5:before {
|
||||
content: 'H5';
|
||||
}
|
||||
|
||||
& .vditor-reset > h6:before {
|
||||
content: 'H6';
|
||||
}
|
||||
|
||||
div[data-type="link-ref-defs-block"] {
|
||||
&:before {
|
||||
content: '"A"';
|
||||
}
|
||||
|
||||
color: var(--blockquote-color);
|
||||
}
|
||||
|
||||
div[data-type="footnotes-block"] {
|
||||
&:before {
|
||||
content: '^F';
|
||||
}
|
||||
|
||||
border-top: 2px solid var(--heading-border-color);
|
||||
padding-top: 24px;
|
||||
margin-top: 24px;
|
||||
|
||||
& > div[data-type="footnotes-def"] {
|
||||
& > ul, & > ol, & > p, & > blockquote, & > pre, & > table, & > hr {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vditor-toc {
|
||||
&:before {
|
||||
content: "ToC";
|
||||
}
|
||||
|
||||
span[data-type="toc-h"] {
|
||||
color: @blurColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @max-width) {
|
||||
.vditor-ir {
|
||||
h1:before,
|
||||
h2:before,
|
||||
h3:before,
|
||||
h4:before,
|
||||
h5:before,
|
||||
h6:before,
|
||||
div[data-type="link-ref-defs-block"]:before,
|
||||
div[data-type="footnotes-block"]:before,
|
||||
.vditor-toc:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* panel.
|
||||
*
|
||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||
* @version 1.0.0.0, Jan 22, 2020
|
||||
*/
|
||||
|
||||
@keyframes scale-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.vditor {
|
||||
&-panel {
|
||||
background-color: var(--panel-background-color);
|
||||
position: absolute;
|
||||
box-shadow: var(--panel-shadow);
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
z-index: 3;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
user-select: none;
|
||||
max-width: 320px;
|
||||
min-width: 80px;
|
||||
animation-duration: 0.15s;
|
||||
animation-name: scale-in;
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
|
||||
color: var(--toolbar-icon-color);
|
||||
|
||||
&--none {
|
||||
padding: 0;
|
||||
animation: none;
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
&--arrow:before {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
border: 7px solid transparent;
|
||||
top: -14px;
|
||||
left: 5px;
|
||||
border-bottom-color: var(--panel-background-color);
|
||||
}
|
||||
|
||||
&--left {
|
||||
right: 0;
|
||||
|
||||
&.vditor-panel--arrow:before {
|
||||
right: 5px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: 0;
|
||||
padding: 3px 5px;
|
||||
background-color: var(--panel-background-color);
|
||||
font-size: 12px;
|
||||
color: var(--textarea-text-color);
|
||||
|
||||
&:focus {
|
||||
background-color: var(--toolbar-background-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
color: var(--toolbar-icon-color);
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
padding: 4px 5px;
|
||||
height: 21px;
|
||||
width: 23px;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover,
|
||||
&--current {
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 13px !important;
|
||||
width: 13px !important;
|
||||
float: left;
|
||||
fill: currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,610 @@
|
||||
.vditor {
|
||||
&-reset {
|
||||
&--anchor {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: @errorColor;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
color: #24292e;
|
||||
font-variant-ligatures: no-common-ligatures;
|
||||
font-family: @font-family-base;
|
||||
word-wrap: break-word;
|
||||
overflow: auto;
|
||||
line-height: 1.5;
|
||||
font-size: 16px;
|
||||
word-break: break-word;
|
||||
|
||||
ul ul ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
li p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
audio {
|
||||
max-width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
max-height: 90vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
cursor: auto;
|
||||
max-width: 20px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
|
||||
&:hover .vditor-anchor svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.55em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.38em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.13em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #eaecef;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 1em;
|
||||
color: #6a737d;
|
||||
border-left: 0.25em solid #eaecef;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ins > iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 1px solid #d1d5da;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.iframe__video {
|
||||
min-width: 80%;
|
||||
min-height: 36vh;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
margin-bottom: 16px;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
word-break: keep-all;
|
||||
width: 100%;
|
||||
|
||||
tr {
|
||||
background-color: #fafbfc;
|
||||
border-top: 1px solid #c6cbd1;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
word-break: normal;
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
min-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(2n) {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
code:not(.hljs):not(.highlight-chroma) {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
border-radius: 3px;
|
||||
font-family: @font-family-code;
|
||||
word-break: break-word;
|
||||
background-size: 20px 20px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
|
||||
& > code {
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
padding: 0.5em;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
font-family: @font-family-code;
|
||||
background-size: 20px 20px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
|
||||
word-break: initial;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
&:hover div.vditor-copy {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.language-math,
|
||||
.language-echarts,
|
||||
.language-mindmap,
|
||||
.language-plantuml,
|
||||
.language-mermaid,
|
||||
.language-markmap,
|
||||
.language-abc,
|
||||
.language-flowchart,
|
||||
.language-graphviz {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.language-math mjx-container:focus {
|
||||
outline: none;
|
||||
cursor: context-menu;
|
||||
}
|
||||
|
||||
.language-echarts,
|
||||
.language-mindmap {
|
||||
overflow: hidden;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.language-mermaid,
|
||||
.language-markmap,
|
||||
.language-flowchart,
|
||||
.language-graphviz {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.language-graphviz parsererror {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #24292e;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #d1d5da;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #d1d5da;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
height: auto;
|
||||
width: auto;
|
||||
stroke-width: initial;
|
||||
}
|
||||
|
||||
p:last-child,
|
||||
blockquote:last-child,
|
||||
pre:last-child,
|
||||
ul:last-child,
|
||||
ol:last-child,
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-comment {
|
||||
border-bottom: 2px solid rgb(248, 230, 171);
|
||||
|
||||
&--focus,
|
||||
&--hover {
|
||||
background-color: rgb(250, 241, 209);
|
||||
border-bottom: 2px solid rgb(255, 198, 10);
|
||||
|
||||
.vditor-comment {
|
||||
border-bottom: 2px solid rgb(255, 198, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-task {
|
||||
list-style: none !important;
|
||||
word-break: break-all;
|
||||
|
||||
input {
|
||||
margin: 0 0.2em 0.25em -1.6em;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&-copy {
|
||||
position: relative;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
|
||||
textarea {
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: #586069;
|
||||
height: 14px;
|
||||
width: 14px !important;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&-linenumber {
|
||||
padding-left: 4em !important;
|
||||
position: relative;
|
||||
|
||||
&__rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0.5em;
|
||||
left: 0;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
user-select: none;
|
||||
counter-reset: linenumber;
|
||||
|
||||
& > span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
counter-increment: linenumber;
|
||||
content: counter(linenumber);
|
||||
color: rgba(158, 150, 150, 0.38);
|
||||
display: block;
|
||||
padding-right: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-speech {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: #f6f8fa;
|
||||
border: 1px solid #d1d5da;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
color: #586069;
|
||||
|
||||
&:hover,
|
||||
&--current {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
fill: currentColor;
|
||||
display: block;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&-anchor {
|
||||
margin-left: 5px;
|
||||
|
||||
&--left {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
svg {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-linkcard {
|
||||
margin: 31px auto 16px;
|
||||
transition: @transition;
|
||||
cursor: pointer;
|
||||
max-width: 768px;
|
||||
padding: 0 10px;
|
||||
|
||||
a {
|
||||
border-radius: 3px;
|
||||
background-color: #f6f8fa;
|
||||
overflow: hidden;
|
||||
max-height: 250px;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
flex-wrap: wrap-reverse;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:visited .vditor-linkcard__abstract {
|
||||
color: rgba(88, 96, 105, 0.36);
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
padding: 10px;
|
||||
min-width: 200px;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #24292e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__abstract {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
font-size: 13px;
|
||||
color: #586069;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
&__site {
|
||||
font-size: 12px;
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
&__image {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
max-width: 250px;
|
||||
min-width: 126px;
|
||||
cursor: pointer;
|
||||
background-color: rgba(88, 96, 105, 0.36);
|
||||
}
|
||||
}
|
||||
|
||||
&-footnotes__goto-ref {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&-toc {
|
||||
margin-bottom: 16px;
|
||||
user-select: text;
|
||||
color: @blurColor;
|
||||
|
||||
.vditor-outline__action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none !important;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > span > svg {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-outline {
|
||||
width: 250px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
background-color: var(--panel-background-color);
|
||||
display: none;
|
||||
overflow: auto;
|
||||
|
||||
&--right {
|
||||
border-right: 0;
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none !important;
|
||||
padding-left: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__content > ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
color: var(--textarea-text-color);
|
||||
|
||||
& > svg {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
}
|
||||
|
||||
& > span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
border-bottom: 1px dashed var(--border-color);
|
||||
padding: 5px 10px;
|
||||
color: var(--toolbar-icon-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
transition: @transition;
|
||||
fill: currentColor;
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--close {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
.vditor-sv {
|
||||
font-family: @font-family-base;
|
||||
margin: 0 1px 0 0;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
border: 0;
|
||||
resize: none;
|
||||
padding: 10px 9px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--panel-background-color);
|
||||
outline: 0 none;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: var(--textarea-text-color);
|
||||
border-radius: 0 0 3px 3px;
|
||||
font-variant-ligatures: no-common-ligatures;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
&[contenteditable="false"] {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--textarea-background-color);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
height: var(--editor-bottom);
|
||||
display: block;
|
||||
}
|
||||
|
||||
span[data-type="newline"] + span[data-type="text"]:empty {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.s {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.mark:not(.vditor-sv__marker) {
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 1.75em;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 1.55em;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.38em;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1.25em;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 1.13em;
|
||||
}
|
||||
|
||||
.h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&__marker {
|
||||
color: var(--second-color);
|
||||
|
||||
&--heading {
|
||||
color: var(--ir-heading-color);
|
||||
}
|
||||
|
||||
&--bi {
|
||||
color: var(--ir-bi-color);
|
||||
}
|
||||
|
||||
&--link {
|
||||
color: var(--ir-link-color);
|
||||
}
|
||||
|
||||
&--title {
|
||||
color: var(--ir-title-color);
|
||||
}
|
||||
|
||||
&--bracket {
|
||||
color: var(--ir-bracket-color);
|
||||
}
|
||||
|
||||
&--paren {
|
||||
color: var(--ir-paren-color);
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: var(--ir-heading-color);
|
||||
}
|
||||
|
||||
&--strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
.vditor {
|
||||
&-toolbar {
|
||||
background-color: var(--toolbar-background-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 0 5px;
|
||||
line-height: 1;
|
||||
|
||||
&--pin {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&--hide {
|
||||
transition: @transition;
|
||||
height: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--toolbar-background-color);
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
.vditor-tooltipped {
|
||||
color: var(--toolbar-icon-color);
|
||||
border: 0;
|
||||
padding: 10px 5px;
|
||||
background-color: transparent;
|
||||
height: var(--toolbar-height);
|
||||
width: 25px;
|
||||
box-sizing: border-box;
|
||||
font-size: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: var(--toolbar-height);
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
opacity: .001;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
float: left;
|
||||
height: calc(var(--toolbar-height) - (var(--toolbar-divider-margin-top) * 2));
|
||||
border-left: 1px solid var(--second-color);
|
||||
margin: var(--toolbar-divider-margin-top) 8px;
|
||||
}
|
||||
|
||||
&__br {
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
&--current {
|
||||
color: var(--toolbar-icon-hover-color) !important;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: var(--second-color) !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-emojis {
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__tip {
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
width: 200px;
|
||||
margin-right: 10px;
|
||||
color: var(--toolbar-icon-color);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__tail {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: var(--toolbar-icon-color);
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--toolbar-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
float: left;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
padding: 3px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
transition: @transition;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover .vditor-emojis__icon {
|
||||
display: inline-block;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
float: left;
|
||||
margin: 3px 0 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @max-width) {
|
||||
.vditor-toolbar__item {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.vditor-panel--left.vditor-panel--arrow:before {
|
||||
right: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(hover: hover) and (pointer: fine) {
|
||||
.vditor-toolbar__item .vditor-tooltipped:hover {
|
||||
color: var(--toolbar-icon-hover-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* tool tip.
|
||||
*
|
||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||
* @version 0.1.0.0, Jan 25, 2019
|
||||
*/
|
||||
@keyframes tooltip-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vditor-tooltipped {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 1000000;
|
||||
display: none;
|
||||
padding: 5px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
content: attr(aria-label);
|
||||
background: #3b3e43;
|
||||
border-radius: 3px;
|
||||
line-height: 16px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 1000001;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: #3b3e43;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border: 5px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&--hover::before,
|
||||
&--hover::after,
|
||||
&:hover::before,
|
||||
&:hover::after,
|
||||
&:active::before,
|
||||
&:active::after,
|
||||
&:focus::before,
|
||||
&:focus::after {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
animation-name: tooltip-appear;
|
||||
animation-duration: 0.15s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
&__s::after,
|
||||
&__se::after,
|
||||
&__sw::after {
|
||||
top: 100%;
|
||||
right: 50%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&__s::before,
|
||||
&__se::before,
|
||||
&__sw::before {
|
||||
top: auto;
|
||||
right: 50%;
|
||||
bottom: -5px;
|
||||
margin-right: -5px;
|
||||
border-bottom-color: #3b3e43;
|
||||
}
|
||||
|
||||
&__se::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
&__sw::after {
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
&__n::after,
|
||||
&__ne::after,
|
||||
&__nw::after {
|
||||
right: 50%;
|
||||
bottom: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&__n::before,
|
||||
&__ne::before,
|
||||
&__nw::before {
|
||||
top: -5px;
|
||||
right: 50%;
|
||||
bottom: auto;
|
||||
margin-right: -5px;
|
||||
border-top-color: #3b3e43;
|
||||
}
|
||||
|
||||
&__ne::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
&__nw::after {
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
&__s::after,
|
||||
&__n::after {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
&__w::after {
|
||||
right: 100%;
|
||||
bottom: 50%;
|
||||
margin-right: 5px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
&__w::before {
|
||||
top: 50%;
|
||||
bottom: 50%;
|
||||
left: -5px;
|
||||
margin-top: -5px;
|
||||
border-left-color: #3b3e43;
|
||||
}
|
||||
|
||||
&__e::after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
margin-left: 5px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
&__e::before {
|
||||
top: 50%;
|
||||
right: -5px;
|
||||
bottom: 50%;
|
||||
margin-top: -5px;
|
||||
border-right-color: #3b3e43;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @max-width) {
|
||||
.vditor-tooltipped:before,
|
||||
.vditor-tooltipped:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
.vditor-wysiwyg {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 1px;
|
||||
|
||||
pre.vditor-reset {
|
||||
background-color: var(--panel-background-color);
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&[contenteditable="false"] {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: var(--textarea-background-color);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
height: var(--editor-bottom);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote:empty::before,
|
||||
pre > code:empty::before,
|
||||
p:empty::before,
|
||||
h1:empty::after,
|
||||
h2:empty::after,
|
||||
h3:empty::after,
|
||||
h4:empty::after,
|
||||
h5:empty::after,
|
||||
h6:empty::after {
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
code[data-marker="`"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
&__block {
|
||||
pre:first-child {
|
||||
margin-bottom: -1em;
|
||||
|
||||
code {
|
||||
height: auto;
|
||||
color: var(--textarea-text-color);
|
||||
height: auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
pre:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
cursor: pointer;
|
||||
white-space: initial;
|
||||
min-height: 27px;
|
||||
}
|
||||
|
||||
& > .vditor-reset > h1:before,
|
||||
& > .vditor-reset > h2:before,
|
||||
& > .vditor-reset > h3:before,
|
||||
& > .vditor-reset > h4:before,
|
||||
& > .vditor-reset > h5:before,
|
||||
& > .vditor-reset > h6:before,
|
||||
div.vditor-wysiwyg__block:before,
|
||||
div[data-type="link-ref-defs-block"]:before,
|
||||
div[data-type="footnotes-block"]:before,
|
||||
.vditor-toc:before {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -29px;
|
||||
content: 'H1';
|
||||
font-size: 0.85rem;
|
||||
font-weight: normal;
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
& > .vditor-reset > h2:before {
|
||||
content: 'H2';
|
||||
}
|
||||
|
||||
& > .vditor-reset > h3:before {
|
||||
content: 'H3';
|
||||
}
|
||||
|
||||
& > .vditor-reset > h4:before {
|
||||
content: 'H4';
|
||||
}
|
||||
|
||||
& > .vditor-reset > h5:before {
|
||||
content: 'H5';
|
||||
}
|
||||
|
||||
& > .vditor-reset > h6:before {
|
||||
content: 'H6';
|
||||
}
|
||||
|
||||
div[data-type="link-ref-defs-block"]:before {
|
||||
content: '"A"';
|
||||
}
|
||||
|
||||
div[data-type="footnotes-block"]:before {
|
||||
content: '^F';
|
||||
}
|
||||
|
||||
div.vditor-wysiwyg__block:before {
|
||||
content: "</>";
|
||||
}
|
||||
|
||||
div.vditor-wysiwyg__block[data-type="yaml-front-matter"]:before {
|
||||
content: "F";
|
||||
}
|
||||
|
||||
div.vditor-wysiwyg__block[data-type="math-block"]:before {
|
||||
content: "$$";
|
||||
}
|
||||
|
||||
.vditor-toc:before {
|
||||
content: "ToC";
|
||||
}
|
||||
|
||||
hr {
|
||||
display: inline-block;
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
details {
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span[data-type="backslash"] > span {
|
||||
display: none;
|
||||
color: var(--second-color);
|
||||
}
|
||||
|
||||
span[data-type="link-ref"],
|
||||
sup[data-type="footnotes-ref"] {
|
||||
color: @blurColor;
|
||||
}
|
||||
|
||||
span[data-type="toc-h"] {
|
||||
color: @blurColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div[data-type="footnotes-block"] {
|
||||
border-top: 2px solid var(--heading-border-color);
|
||||
padding-top: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
div[data-type="link-ref-defs-block"] {
|
||||
color: var(--blockquote-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @max-width) {
|
||||
.vditor-wysiwyg {
|
||||
h1:before,
|
||||
h2:before,
|
||||
h3:before,
|
||||
h4:before,
|
||||
h5:before,
|
||||
h6:before,
|
||||
div.vditor-wysiwyg__block:before,
|
||||
div[data-type="link-ref-defs-block"]:before,
|
||||
div[data-type="footnotes-block"]:before,
|
||||
.vditor-toc:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
@errorColor: #d23f31;
|
||||
@blurColor: #4285f4;
|
||||
|
||||
@font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans",
|
||||
"Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji",
|
||||
"EmojiSymbols";
|
||||
@font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier,
|
||||
monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
|
||||
"Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
|
||||
|
||||
@transition: all 0.15s ease-in-out;
|
||||
|
||||
@max-width: 520px;
|
||||
|
||||
.vditor {
|
||||
--border-color: #d1d5da;
|
||||
--second-color: rgba(88, 96, 105, 0.36);
|
||||
|
||||
--panel-background-color: #fff;
|
||||
--panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
|
||||
--toolbar-background-color: #f6f8fa;
|
||||
--toolbar-icon-color: #586069;
|
||||
--toolbar-icon-hover-color: @blurColor;
|
||||
--toolbar-height: 35px;
|
||||
--toolbar-divider-margin-top: 8px;
|
||||
|
||||
--textarea-background-color: #fafbfc;
|
||||
--textarea-text-color: #24292e;
|
||||
|
||||
--resize-icon-color: var(--toolbar-icon-color);
|
||||
--resize-background-color: var(--toolbar-background-color);
|
||||
--resize-hover-icon-color: var(--panel-background-color);
|
||||
--resize-hover-background-color: var(--toolbar-icon-hover-color);
|
||||
|
||||
--count-background-color: rgba(27, 31, 35, 0.05);
|
||||
--heading-border-color: #eaecef;
|
||||
--blockquote-color: #6a737d;
|
||||
|
||||
--ir-heading-color: #660e7a;
|
||||
--ir-title-color: #808080;
|
||||
--ir-bi-color: #0033b3;
|
||||
--ir-link-color: #008000;
|
||||
--ir-bracket-color: #0000ff;
|
||||
--ir-paren-color: #008000;
|
||||
|
||||
&--dark {
|
||||
--border-color: #141414;
|
||||
--second-color: rgba(185, 185, 185, 0.36);
|
||||
|
||||
--panel-background-color: #24292e;
|
||||
--panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
|
||||
|
||||
--toolbar-background-color: #1d2125;
|
||||
--toolbar-icon-color: #b9b9b9;
|
||||
--toolbar-icon-hover-color: #fff;
|
||||
|
||||
--textarea-background-color: #2f363d;
|
||||
--textarea-text-color: #d1d5da;
|
||||
|
||||
--resize-icon-color: var(--border-color);
|
||||
--resize-background-color: var(--second-color);
|
||||
--resize-hover-icon-color: var(--toolbar-icon-hover-color);
|
||||
--resize-hover-background-color: rgba(185, 185, 185, 0.86);
|
||||
|
||||
--count-background-color: rgba(@blurColor, 0.36);
|
||||
--heading-border-color: var(--textarea-text-color);
|
||||
--blockquote-color: var(--toolbar-icon-color);
|
||||
|
||||
--ir-heading-color: #9876aa;
|
||||
--ir-title-color: #808080;
|
||||
--ir-bi-color: #cc7832;
|
||||
--ir-link-color: #ffc66d;
|
||||
--ir-bracket-color: #287bde;
|
||||
--ir-paren-color: #6a8759;
|
||||
}
|
||||
}
|
||||
|
||||
@import "_tooltipped";
|
||||
@import "_panel";
|
||||
@import "_toolbar";
|
||||
@import "_content";
|
||||
@import "_hint";
|
||||
@import "_reset";
|
||||
@import "_wysiwyg";
|
||||
@import "_ir";
|
||||
@import "_sv";
|
||||
Reference in New Issue
Block a user