mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-20 00:06:42 +00:00
f7ad387a10
Needed some level of harcoding though due to callouts using colors, which can't be css colors as DOMPDF won't understand these. Use css variables elsewhere and added new dark variants to fit a bit better.
64 lines
1.3 KiB
SCSS
64 lines
1.3 KiB
SCSS
/**
|
|
* 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;
|
|
}
|
|
|
|
// 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
|
|
// <html> 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;
|
|
right: -1px;
|
|
background-color: #EEE;
|
|
border: 1px solid #DDD;
|
|
border-radius: 0 4px 0 0;
|
|
@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;
|
|
} |