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 // Manual dark-mode definition so that it applies to code blocks within the shadow

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

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

20 .dark-mode .cm-editor {

21 border-color: #444;

22 }

24 /**

25 * Custom Copy Button

26 */

27 .cm-copy-button {

28 position: absolute;

29 display: flex;

30 align-items: center;

31 justify-content: center;

32 top: -1px;

33 right: -1px;

34 background-color: #EEE;

35 border: 1px solid #DDD;

36 border-radius: 0 4px 0 0;

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

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

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

40 line-height: 0;

41 cursor: pointer;

42 z-index: 5;

43 user-select: none;

44 opacity: 0;

45 pointer-events: none;

46 width: 32px;

47 height: 32px;

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

49 svg {

50 fill: currentColor;

51 }

52 &.success {

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

54 color: #FFF;

55 }

56 &:focus {

57 outline: 0 !important;

58 }

59 }

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

61 user-select: all;

62 opacity: .6;

63 pointer-events: all;

64 }