CoCalc -- _editor.sass

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/frontend/_editor.sass
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
/*
7
 *
8
 *Editor for files in a project
9
 */
10

11
.webapp-editor-content
12
  position   : absolute
13
  left       : 0
14
  margin     : 0
15
  width      : 100%
16
  padding    : 0
17
  background : white
18

19
  // get rid of bootstrap's width: 100% for .table elements in the editor content
20
  .table
21
    width: auto
22
.webapp-editor-textedit-buttonbar
23
  padding    : 3px 3px 0px 3px
24
  background : #efefef
25

26
.webapp-editor-close-button-x
27
  font-size    : 14px
28
  margin-top   : 9px
29
  margin-right : 15px
30
  width        : 2%
31
  &:hover
32
    color: #f00
33

34
.webapp-editor-tab-filename
35
  overflow    : hidden
36
  display     : block
37
  white-space : nowrap
38

39
.webapp-editor-find
40
  display    : inline-block
41
  height     : 25px
42
  padding    : 4px 6px
43
  margin-top : 3px
44

45
.webapp-editor-filename-pill
46
  width  : 32%
47
  cursor : pointer
48

49
.webapp-editor-filename-pill-icon-active
50
  color : orange
51

52
@media (max-width: 767px)
53
  .webapp-editor-filename-pill
54
    width: 50%
55

56
@media (max-width: 480px)
57
  .webapp-editor-filename-pill
58
    width: 100%
59

60
.webapp-editor-codemirror
61
  width    : 100%
62
  padding  : 0px
63

64
.webapp-editor-codemirror-button-row
65
  background : #efefef
66

67
.webapp-editor-codemirror-filename,
68
.webapp-editor-pdf-title
69
  margin-left  : 1em
70
  margin-right : 10px
71
  font-size    : 11pt
72
  font-weight  : bold
73
  color        : #555
74

75
.webapp-editor-codemirror-message
76
  font-size    : 11pt
77

78
.webapp-editor-codemirror-cursor
79
  position : absolute
80
  width    : 15em
81
  z-index  : 5
82

83
.webapp-editor-codemirror-cursor-inside
84
  position    : absolute
85
  top         : -1.3em
86
  left        : .5ex
87
  height      : 1.15em
88
  width       : .1ex
89
  border-left : 2px solid black
90
  border      : 1px solid #aaa
91
  opacity     : .7
92

93
.webapp-editor-codemirror-cursor-label
94
  position         : absolute
95
  top              : -2.9em
96
  left             : 1.5ex
97
  font-size        : 8pt
98
  font-family      : serif
99
  background-color : rgba(255, 255, 255, 0.7)
100

101

102
.webapp-editor-recent-files
103
  margin-bottom: 0em
104

105
.webapp-editor-codemirror-sync
106
  font-size : 8pt
107
  color     : #bbb
108

109
.webapp-latex-errors-counter
110
  color       : white
111
  font-weight : bold
112

113
.webapp-latex-warnings-counter
114
  color: #FDB600
115

116
.webapp-editor-latex-mesg-template
117
  overflow-x   : auto
118
  background   : white
119
  margin-right : 2em
120

121
.webapp-editor-latex-mesg-template-error
122
  border : 2px solid #a00
123

124
.webapp-editor-latex-mesg-template-warning, .webapp-editor-latex-mesg-template-typesetting
125
  border: 2px solid #FDB600
126

127
.webapp-editor-latex-right-pane
128
  > .nav > li
129
    > a:hover
130
      background-color: #fff
131
    > a.btn-danger:hover
132
      background-color: #ad241f
133
  > .nav-tabs > li
134
    &.active > a
135
      color: #333
136
      &.btn-danger
137
        background-color: #ad241f
138
    > a
139
      color: #555
140
      margin-top     : 2px
141
      padding-top    : 6px
142
      padding-bottom : 6px
143
      &.btn-danger
144
        color: white
145

146
.webapp-editor-latex-help
147
  padding            : 20px
148
  background-color   : white
149
  overflow-y         : auto !important
150

151
.smc-latex-inline-error
152
  padding            : 10px
153

154
  &.smc-latex-inline-error-error
155
    border           : 3px solid #FFBBBB
156

157
  &.smc-latex-inline-error-warning
158
    border           : 3px solid #FDB600
159

160
  &.smc-latex-inline-error-typesetting
161
    border           : 3px solid #AAAAFF
162

163
  > .smc-latex-inline-error-message
164
    padding-bottom: .5em
165

166
  > .smc-latex-inline-error-content
167
    font-family: monospace
168

169
.smc-latex-inline-error-error
170
  background-color: #FFE0D9
171
.smc-latex-inline-error-warning
172
  background-color: #DFFFCC
173
.smc-latex-inline-error-typesetting
174
  background-color: #CCDFFF
175

176
.smc-latex-error-popover
177
  background-color: #FFCDCC
178
  > pre
179
    background-color: #FFCDCC
180
    border: 0
181
    font-size: 85%
182
  > .arrow:after
183
    border-right-color: #FFCDCC !important
184
  > .popover-title
185
    background-color: #FFACAA
186

187
.Codemirror-latex-errors
188
  padding          : 0 2px 0 4px
189
  min-width        : 15px
190
  text-align       : right
191
  white-space      : nowrap
192

193
.webapp-editor-pdf-preview-message
194
  padding          : 20px
195

196
.webapp-latex-mesg-message
197
  font-size   : 13pt
198
  margin-left : 1em
199

200
.webapp-latex-mesg-content
201
  font-size : 9pt
202
  margin    : 5px
203

204
.webapp-editor-pdf-preview-page
205
  background-color : #666
206
  color            : #fff
207
  margin           : 0 auto
208
  overflow         : visible
209

210
.webapp-editor-pdf-preview-page-single
211
  background-color : #666
212
  text-align       : center
213
  margin           : 0 auto
214
  img
215
    display        : block
216
    max-width      : 100%
217
    width          : 100%
218

219
.webapp-editor-pdf-preview-spinner
220
  position : absolute
221
  left     : 2em
222
  top      : 10em
223

224
.webapp-editor-pdf-preview-text
225
  border-top   : 1px solid black
226
  text-align   : left
227
  margin-left  : 1em
228
  margin-right : 1em
229
  padding-top  : 1em
230
  color        : #8a8a8a
231

232
.webapp-editor-pdf-preview-highlight
233
  margin-bottom    : -3em
234
  padding-bottom   : 3em
235
  opacity          : .3
236
  background-color : yellow
237

238
.webapp-editor-pdf-preview-buttons
239
  font-size : 11pt
240
  border    : 1px solid lightgrey
241

242
.webapp-editor-search-openfiles-input
243
  width : 80%
244

245
.webapp-editor-openfile-excluded-from-search
246
  opacity: .6
247

248
.webapp-editor-openfile-included-in-search
249
  border-radius : 6px
250
  border        : 1px solid #aaa
251
  box-shadow    : 2px 2px 2px 2px #bbb
252

253
.smc-users-viewing-document
254
  display : inline-block
255

256
.webapp-editor-chat-title
257
  color: #666
258
  margin-right: 5px
259
  white-space: nowrap
260
  font-size: 18pt
261
  font-weight: bold
262
  position: fixed
263
  z-index: 10
264
  right: 0
265
  margin-top: -2px
266

267
/*********** Synchronized Worksheets **************** */
268

269
.sagews-input
270
  white-space : nowrap
271

272
.sagews-input-live:hover
273
  cursor           : pointer
274
  background-color : #428bca
275

276
.sagews-input-hr
277
  margin        : 0px
278
  margin-right  : -10px
279
  margin-bottom : .5ex
280
  // makes line look centered
281
  display       : inline-block
282
  height        : 3px
283
  background    : #ccc
284

285
.sagews-input-newcell
286
  width : 60%
287

288
.sagews-input-eval-state
289
  width : 20%
290

291
.sagews-input-run-state
292
  width : 20%
293

294
.sagews-input-evaluated
295
  background : #428bca
296

297
// .sagews-input-unevaluated!
298

299
.sagews-input-execute
300
  background : #080
301

302
.sagews-input-running
303
  background : #0a0
304

305
.sagews-input-waiting
306
  background : #DC4437
307

308
// Margin of sagews-output must be 0 for codemirror 3.14+, or cursor gets all jacked up.
309
// background-color: #f9f9f9
310
//
311
// this messes up codemirror themes
312

313
.sagews-output
314
  display        : block
315
  white-space    : normal
316
  word-wrap      : break-word
317
  padding-left   : 2em
318

319
.sagews-output-stdout
320
  white-space : pre-wrap
321

322
.sagews-output-stderr
323
  white-space : pre-wrap
324

325
.sagews-output-cm-gutter
326
  border-right : 1ex solid #5cb85c
327

328
.sagews-output-cm-text
329
  overflow-x   : auto   !important  // for big image output and since mathjax doesn't wrap around properly yet (?)
330
  overflow-y   : hidden !important
331
  max-width    : 100%   !important
332

333
.sagews-output-cm-wrap
334
  padding-top    : 1ex  !important
335
  padding-bottom : 1ex  !important
336
  border-top     : 1px solid lightgrey
337

338
.sagews-output-edit-button-group
339
  visibility : hidden
340

341
.sagews-output:hover .sagews-output-edit-button-group
342
  visibility : visible
343

344
.sagews-output-editor
345
  font-family : helvetica
346
  border      : 3px solid lightblue
347

348
.sagews-output-editor-content
349
  padding : 6px
350

351
.sagews-output-editor-buttons
352
  background-color : #efefef
353
  margin-bottom    : 5px
354
  border           : 1px solid lightgrey
355

356
.webapp-editor-codemirror-worksheet-editable-buttons
357
  padding-top : 3px
358

359
.webapp-editor-mathjax-editor
360
  cursor      : pointer
361
  border      : 1px solid lightgrey !important
362
  padding     : 3px !important
363
  margin-left : 5px
364

365
.sagews-editor-latex-raw
366
  border     : 1px solid lightgrey
367
  padding    : 3px
368
  box-shadow : 3px 3px 3px 3px #888888
369
  margin     : 0 auto
370

371
.sagews-editor-latex-preview
372
  border  : 1px solid black
373
  padding : 12px
374

375
.sagews-output-editor-foreground-color-selector
376
  cursor : pointer
377
  width  : 1px
378
  height : 30px
379

380
.sagews-output-editor-background-color-selector
381
  cursor : pointer
382
  width  : 1px
383
  height : 30px
384

385
.sagews-output-html
386
  font-family : helvetica
387

388
.sagews-output-md
389
  font-family : helvetica
390

391
.sagews-output-stderr
392
  color       : red
393

394
.sagews-output-code
395
  white-space : pre
396
  border      : 2px solid lightblue
397
  padding     : 1ex
398

399
.sagews-output-tex
400
  background : white
401
  /* so that tex is visible */
402

403
.sagews-output-image
404
  background : white
405
  /* so that, e.g., latex with transparent background is visible */
406
  > img
407
    cursor     : pointer
408

409
.sagews-output-video
410
  cursor     : pointer
411
  background : white
412
  border     : 1px solid lightgrey
413

414
.sagews-output-link
415
  cursor : pointer
416

417
.sagews-output-hide
418
  height     : 0px
419
  background : #eee
420

421
// .sagews-output-interact!
422

423

424
.webapp-editor-static-html-content
425
  overflow-y : auto
426
  margin     : 0
427
  border-top : 1px solid lightgray
428

429

430
.webapp-editor-history-history_editor .webapp-editor-codemirror-input-box
431
  width : 100%
432

433
/*the slider background */
434

435
.webapp-editor-history-slider-style
436
  height   : 11px
437
  position : relative
438
  margin   : 11px
439
  > .ui-slider-handle
440
    width       : 16px
441
    height      : 24px
442
    position    : absolute
443
    top         : -8px
444
    margin-left : -6px
445
    z-index     : 5
446
    outline     : none
447

448
.smc-history-diff-wrap-delete
449
  background-color : #ffecec
450

451
.smc-history-diff-gutter-delete
452
  background-color : #ffdddd
453

454
.smc-history-diff-wrap-insert
455
  background-color : #eaffea
456

457
.smc-history-diff-gutter-insert
458
  background-color : #dbffdb
459

460
.smc-history-diff-wrap-divide
461
  border-bottom : 1px solid grey
462

463
.smc-history-diff-gutter1
464
  width : 50px
465
  color : #999
466

467
.smc-history-diff-gutter2
468
  width : 50px
469
  color : #999
470

471
.smc-history-diff-number
472
  color        : #999
473
  padding-left : 10px
474

475
/*Style for the slider button */
476

477
/* Undo various bootstrap madness (which makes scaling markdown very painful) */
478

479
li
480
  line-height : inherit
481

482
code
483
  font-size : inherit
484

485
.cm-trailingspace
486
  background-image    : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==)
487
  background-position : bottom left
488
  background-repeat   : repeat-x
489

490
/* Deals with the currently open file tabs and moving them around */
491

492
.file-pages
493
  float    : none
494
  overflow : hidden
495
  > li > a
496
    position      : static
497
    /* Bootstrap 3 has this as relative ??  */
498
    padding       : 13px 15px 7px
499
    border-radius : 5px 5px 0px 0px
500
    /* Flatten bottom corners like tabs  */
501

502
.file-tab-placeholder
503
  /* Currently blank */
504

505
.file-pages li
506
  &.ui-sortable-helper > a
507
    background-color : #eee
508
  &.active.ui-sortable-helper > a
509
    background-color : #08c
510

511
.nav-pills > li + li
512
  margin-left : 0 !important
513

514
.webapp-editor-codemirror-not-synced
515
  background    : red
516
  color         : white
517
  padding       : 5px
518
  border-radius : 3px
519

520
.webapp-editor-resize-bar-layout-1
521
  height        : 7px
522
  cursor        : ns-resize
523
  background    : #eee
524
  border        : 0.5px solid lightgrey
525
  z-index       : 1
526
  &:hover
527
    background : #428bca
528

529
.webapp-editor-resize-bar-layout-2, .webapp-editor-latex-resize-bar, .webapp-editor-html-md-resize-bar
530
  cursor        : ew-resize
531
  background    : #eee
532
  width         : 6px
533
  border        : 0.5px solid lightgrey
534
  z-index       : 100 /* must be less than 1050, which is used for modals */
535
  &:hover
536
    background : #428bca
537

538
.cc-vertical-drag-bar
539
  cursor     : ew-resize
540
  background : #eee
541
  padding    : 3px
542
  border     : 1px solid #ddd
543
  &:hover
544
    background : #428bca
545

546
.cc-vertical-drag-bar-dragging
547
  z-index       : 100
548

549
.cc-horizontal-drag-bar
550
  cursor        : ns-resize
551
  background    : #eee
552
  padding       : 3px
553
  border        : 1px solid #ddd
554
  &:hover
555
    background : #428bca
556

557
.cc-horizontal-drag-bar-dragging
558
  z-index       : 100
559

560
.webapp-editor-html-md-preview
561
  padding       : 12px
562
  background    : white
563
  overflow      : auto
564

565
.smc-html-selection
566
  background-color : lightgrey
567
  border           : 1px solid lightgrey
568

569
.smc-html-cursor
570
  border-left  : 1px solid black
571
  margin-right : -1px
572

573
.webapp-html-editor-symbols-dialog span:hover
574
  color : blue
575
  background : lightblue
576

577
.webapp-editor-codeedit-buttonbar-mode
578
  background : #fafafa
579
  padding    : 6px 12px
580
  border     : 1px solid #ddd
581
  cursor     : pointer
582
  color      : darkblue
583

584
.sagews-output-raw_input
585
  font-family : sans-serif
586
  margin      : 1em
587

588

589
.smc-sagews-gutter-hide-show
590
  width        : 12px
591
  color        : #999
592
  margin-right : 14px
593
  margin-left  : 3px
594

595
.CodeMirror-linewidget
596
  overflow : hidden
597

598

599
/* Used for new sync. */
600
.smc-editor-codemirror-cursor
601
  position : absolute
602
  width    : 15em
603
  z-index  : 5
604

605
.smc-editor-codemirror-cursor-inside
606
  position : absolute
607
  top      : -1.2em
608
  left     : -1px
609
  height   : 1.2em
610
  width    : 1px
611

612
.smc-editor-codemirror-cursor-label
613
  position    : absolute
614
  top         : -2.3em
615
  font-size   : 8pt
616
  font-family : serif
617
  color       : #fff
618

619
.smc-uncommitted
620
  color            : white
621
  background-color : red
622
  padding          : 5px
623
  border-radius    : 3px
624
  margin-left      : 5px
625
  margin-right     : -5px
626

627
/* IMPORTANT FOR SAGE WORKSHEETS!  Do not remove!
628
   This is for the hi font-size's below!
629
   We override the bootstrap css styles, which hardcode a specific
630
   pixel font-size for headers, and hence can't be zoomed.
631
   See https://github.com/sagemathinc/cocalc/issues/585
632

633
   And the color:inherit is because antd sets the color to black-ish,
634
   which is very annoying if we have a dark background and want
635
   color white uniformly, e.g., on sticky notes.
636

637
   This is also assumed for the whiteboard and slate. */
638

639
h1
640
  font-size: 250%
641
  color: inherit
642
h2
643
  font-size: 200%
644
  color: inherit
645
h3
646
  font-size: 170%
647
  color: inherit
648
h4
649
  font-size: 150%
650
  color: inherit
651
h5
652
  font-size: 130%
653
  color: inherit
654
h6
655
  font-size: 110%
656
  color: inherit
657

658

659
/* The overflow:hidden is needed for Firefox. */
660
.smc-vfill
661
  flex           : 1 1 0
662
  display        : flex
663
  flex-direction : column
664
  overflow       : hidden
665

666
.smc-btn-group-nobreak
667
  display     : flex
668
  align-items : flex-start
669

670
.webapp-editor-codemirror-button-container
671
  margin       : 3px
672

673
// Fallback if used without .smc-message-from-viewer or .smc-message-from-other
674
.user-mention
675
  color: #0958d9
676
  background: white
677
  padding: 3px,
678
  margin: -3px 0,
679

680
.smc-message-from-viewer .user-mention
681
  color: #e8e8e8
682
  background: rgba(114,137,218,.1)
683
  border-radius: 3px
684
  padding: 0 2px
685

686
.smc-message-from-other .user-mention
687
  color: #7289da
688
  background: rgba(114,137,218,.1)
689
  border-radius: 3px
690
  padding: 0 2px
691

692
.cocalc-task-description .user-mention
693
  color: #7289da
694
  background: rgba(114,137,218,.1)
695
  border-radius: 3px
696
  padding: 0 2px
697

698
.smc-chat-message
699
  overflow-x: auto
700
  overflow-y: hidden
701
  img
702
    max-width: 100%
703
  blockquote
704
    padding: 0px 0px 0px 10px
705
    font-size: inherit
706
    p
707
      font-size: inherit
708
  pre
709
    font-size: inherit
710
    padding: 5px
711

712
// Make codemirror tabs visible.  Tabs are the source of great confusion for python
713
// users, so we definitely don't want to not make them very explicit.  See
714
// https://codemirror.net/demo/visibletabs.html
715
.cm-tab
716
   background          : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=)
717
   background-position : right
718
   background-repeat   : no-repeat
719

720
// For some weird reason, the default codemirror theme doesn't set his, which
721
// makes code hard to read!  Very odd.
722
.cm-property
723
    color: darkblue
724

725
.CodeMirror pre.CodeMirror-placeholder
726
    color: #999 !important
727

728
.cocalc-html-component
729
  img
730
    max-width: 100%
731
  blockquote
732
    padding: 0px 0px 0px 10px
733
    font-size: inherit
734
    p
735
      font-size: inherit
736
  pre
737
    font-size: inherit
738
    padding: 5px
739

740
.cocalc-whiteboard-edge-select
741
  &:hover
742
    border: 2.5px solid #ccc
743
    margin: -2.5px
744

745
.cocalc-whiteboard-edge-selected
746
    border: 2.5px solid #ccc
747
    margin: -2.5px
748

749

750
Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

Product

Resources

Company

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more, all in one place.

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.
