BookStack Code Mirror - bookstack/blob - resources/sass/

1 /**

2 * Custom CodeMirror BookStack overrides

3 */

5 .cm-editor {

6 font-size: 12px;

7 border: 1px solid #ddd;

8 line-height: 1.4;

9 margin-bottom: $-l;

10 }

12 .page-content .cm-editor,

13 .CodeMirrorContainer .cm-editor {

14 border-radius: 4px;

15 }

17 .cm-editor .cm-line, .cm-editor .cm-gutter {

18 font-family: var(--font-code);

19 }

21 // Manual dark-mode definition so that it applies to code blocks within the shadow

22 // dom which are used within the WYSIWYG editor, as the .dark-mode on the parent

23 // <html> node are not applies so instead we have the class on the parent element.

24 .dark-mode .cm-editor {

25 border-color: #444;

26 }

28 /**

29 * Custom Copy Button

30 */

31 .cm-copy-button {

32 position: absolute;

33 display: flex;

34 align-items: center;

35 justify-content: center;

36 top: -1px;

37 right: -1px;

38 background-color: #EEE;

39 border: 1px solid #DDD;

40 border-radius: 0 4px 0 0;

41 @include lightDark(background-color, #eee, #333);

42 @include lightDark(border-color, #ddd, #444);

43 @include lightDark(color, #444, #888);

44 line-height: 0;

45 cursor: pointer;

46 z-index: 5;

47 user-select: none;

48 opacity: 0;

49 pointer-events: none;

50 width: 32px;

51 height: 32px;

52 transition: background-color linear 60ms, color linear 60ms;

53 svg {

54 fill: currentColor;

55 }

56 &.success {

57 background: var(--color-positive);

58 color: #FFF;

59 }

60 &:focus {

61 outline: 0 !important;

62 }

63 }

64 .cm-editor:hover .cm-copy-button {

65 user-select: all;

66 opacity: .6;

67 pointer-events: all;

68 }