/** * Custom CodeMirror BookStack overrides */ .cm-editor { font-size: 12px; border: 1px solid #ddd; line-height: 1.4; margin-bottom: $-l; } .page-content .cm-editor, .CodeMirrorContainer .cm-editor { border-radius: 4px; } .cm-editor .cm-line, .cm-editor .cm-gutter { font-family: var(--font-code); } // Manual dark-mode definition so that it applies to code blocks within the shadow // dom which are used within the WYSIWYG editor, as the .dark-mode on the parent // node are not applies so instead we have the class on the parent element. .dark-mode .cm-editor { border-color: #444; } /** * Custom Copy Button */ .cm-copy-button { position: absolute; display: flex; align-items: center; justify-content: center; top: -1px; inset-inline-end: -1px; background-color: #EEE; border: 1px solid #DDD; border-start-end-radius: 4px; @include lightDark(background-color, #eee, #333); @include lightDark(border-color, #ddd, #444); @include lightDark(color, #444, #888); line-height: 0; cursor: pointer; z-index: 5; user-select: none; opacity: 0; pointer-events: none; width: 32px; height: 32px; transition: background-color linear 60ms, color linear 60ms; svg { fill: currentColor; } &.success { background: var(--color-positive); color: #FFF; } &:focus { outline: 0 !important; } } .cm-editor:hover .cm-copy-button { user-select: all; opacity: .6; pointer-events: all; }