_editor.sass

/*
 *
 *Editor for files in a project
 */

.webapp-editor-content
  position   : absolute
  left       : 0
  margin     : 0
  width      : 100%
  padding    : 0
  background : white

  // get rid of bootstrap's width: 100% for .table elements in the editor content
  .table
    width: auto

.webapp-editor-close-button-x
  font-size    : 14px
  margin-top   : 9px
  margin-right : 15px
  width        : 2%
  &:hover
    color: #f00

.webapp-editor-tab-filename
  overflow    : hidden
  display     : block
  white-space : nowrap

.webapp-editor-find
  display    : inline-block
  height     : 25px
  padding    : 4px 6px
  margin-top : 3px

.webapp-editor-filename-pill
  width  : 32%
  cursor : pointer

.webapp-editor-filename-pill-icon-active
  color : orange

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

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

.webapp-editor-codemirror
  width    : 100%
  padding  : 0px

.webapp-editor-codemirror-button-row
  background : #efefef

.webapp-editor-codemirror-filename,
.webapp-editor-pdf-title
  margin-left  : 1em
  margin-right : 10px
  font-size    : 11pt
  font-weight  : bold
  color        : #555

.webapp-editor-codemirror-cursor
  position : absolute
  width    : 15em
  z-index  : 5

.webapp-editor-codemirror-cursor-inside
  position    : absolute
  top         : -1.3em
  left        : .5ex
  height      : 1.15em
  width       : .1ex
  border-left : 2px solid black
  border      : 1px solid #aaa
  opacity     : .7

.webapp-editor-codemirror-cursor-label
  position         : absolute
  top              : -2.9em
  left             : 1.5ex
  font-size        : 8pt
  font-family      : serif
  background-color : rgba(255, 255, 255, 0.7)


.webapp-editor-recent-files
  margin-bottom: 0em

.webapp-editor-codemirror-sync
  font-size : 8pt
  color     : #bbb

.webapp-latex-errors-counter
  color       : white
  font-weight : bold

.webapp-latex-warnings-counter
  color: #FDB600

.webapp-editor-latex-mesg-template
  overflow-x   : auto
  background   : white
  margin-right : 2em

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

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

.webapp-editor-latex-right-pane
  > .nav > li
    > a:hover
      background-color: #fff
    > a.btn-danger:hover
      background-color: #ad241f
  > .nav-tabs > li
    &.active > a
      color: #333
      &.btn-danger
        background-color: #ad241f
    > a
      color: #555
      margin-top     : 2px
      padding-top    : 6px
      padding-bottom : 6px
      &.btn-danger
        color: white

.webapp-editor-latex-help
  padding            : 20px
  background-color   : white
  overflow-y         : auto !important

.smc-latex-inline-error
  padding            : 10px

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

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

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

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

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

.smc-latex-inline-error-error
  background-color: #FFE0D9
.smc-latex-inline-error-warning
  background-color: #DFFFCC
.smc-latex-inline-error-typesetting
  background-color: #CCDFFF

.smc-latex-error-popover
  background-color: #FFCDCC
  > pre
    background-color: #FFCDCC
    border: 0
    font-size: 85%
  > .arrow:after
    border-right-color: #FFCDCC !important
  > .popover-title
    background-color: #FFACAA

.Codemirror-latex-errors
  padding          : 0 2px 0 4px
  min-width        : 15px
  text-align       : right
  white-space      : nowrap

.webapp-editor-pdf-preview-message
  padding          : 20px

.webapp-latex-mesg-message
  font-size   : 13pt
  margin-left : 1em

.webapp-latex-mesg-content
  font-size : 9pt
  margin    : 5px

.webapp-editor-pdf-preview-page
  background-color : #666
  color            : #fff
  margin           : 0 auto
  overflow         : visible

.webapp-editor-pdf-preview-page-single
  background-color : #666
  text-align       : center
  margin           : 0 auto
  img
    display        : block
    max-width      : 100%
    width          : 100%

.webapp-editor-pdf-preview-spinner
  position : absolute
  left     : 2em
  top      : 10em

.webapp-editor-pdf-preview-text
  border-top   : 1px solid black
  text-align   : left
  margin-left  : 1em
  margin-right : 1em
  padding-top  : 1em
  color        : #8a8a8a

.webapp-editor-pdf-preview-highlight
  margin-bottom    : -3em
  padding-bottom   : 3em
  opacity          : .3
  background-color : yellow

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

.webapp-editor-search-openfiles-input
  width : 80%

.webapp-editor-openfile-excluded-from-search
  opacity: .6

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

.smc-users-viewing-document
  display : inline-block

.webapp-editor-chat-title
  color: #666
  margin-right: 5px
  white-space: nowrap
  font-size: 18pt
  font-weight: bold
  position: fixed
  z-index: 10
  right: 0
  margin-top: -2px

.smc-editor-chat-smiley
  font-size : 125%

/*********** Synchronized Worksheets **************** */

.sagews-input
  white-space : nowrap

.sagews-input-live:hover
  cursor           : pointer
  background-color : #428bca

.sagews-input-hr
  margin        : 0px
  margin-right  : -10px
  margin-bottom : .5ex
  // makes line look centered
  display       : inline-block
  height        : 3px
  background    : #ccc

.sagews-input-newcell
  width : 60%

.sagews-input-eval-state
  width : 20%

.sagews-input-run-state
  width : 20%

.sagews-input-evaluated
  background : #428bca

// .sagews-input-unevaluated!

.sagews-input-execute
  background : #080

.sagews-input-running
  background : #0a0

.sagews-input-waiting
  background : #DC4437

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

.sagews-output
  display        : block
  white-space    : normal
  word-wrap      : break-word
  padding-left   : 2em

.sagews-output-stdout
  white-space : pre-wrap

.sagews-output-stderr
  white-space : pre-wrap

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

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

.sagews-output-cm-wrap
  padding-top    : 1ex  !important
  padding-bottom : 1ex  !important
  border         : 1px solid #ddd

.sagews-output-edit-button-group
  visibility : hidden

.sagews-output:hover .sagews-output-edit-button-group
  visibility : visible

.sagews-output-editor
  font-family : helvetica
  border      : 3px solid lightblue

.sagews-output-editor-content
  padding : 6px

.sagews-output-editor-buttons
  background-color : #efefef
  margin-bottom    : 5px
  border           : 1px solid lightgrey

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

.webapp-editor-mathjax-editor
  cursor      : pointer
  border      : 1px solid lightgrey !important
  padding     : 3px !important
  margin-left : 5px

.sagews-editor-latex-raw
  border     : 1px solid lightgrey
  padding    : 3px
  box-shadow : 3px 3px 3px 3px #888888
  margin     : 0 auto

.sagews-editor-latex-preview
  border  : 1px solid black
  padding : 12px

.sagews-output-editor-foreground-color-selector
  cursor : pointer
  width  : 1px
  height : 30px

.sagews-output-editor-background-color-selector
  cursor : pointer
  width  : 1px
  height : 30px

.sagews-output-html
  font-family : helvetica

.sagews-output-md
  font-family : helvetica

.sagews-output-stderr
  color       : red

.sagews-output-code
  white-space : pre
  border      : 2px solid lightblue
  padding     : 1ex

.sagews-output-tex
  background : white
  /* so that tex is visible */

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

.sagews-output-video
  cursor     : pointer
  background : white
  border     : 1px solid lightgrey

.sagews-output-link
  cursor : pointer

.sagews-output-hide
  height     : 0px
  background : #eee

// .sagews-output-interact!

.webapp-editor-image
  padding    : 0px
  overflow-y : auto
  left       : 0px

.webapp-editor-image-container
  overflow         : auto
  background-color : #fff
  border           : 1px solid #aaa
  box-shadow       : 5px 5px 5px 5px #888

.webapp-editor-image-title
  margin-left  : 3em
  margin-right : 5em
  font-size    : 10pt
  font-weight  : bold
  color        : #555


.webapp-editor-static-html-content
  overflow-y : auto
  margin     : 0
  border-top : 1px solid lightgray


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

/*the slider background */

.webapp-editor-history-slider-style
  height   : 11px
  position : relative
  margin   : 11px
  > .ui-slider-handle
    width       : 16px
    height      : 24px
    position    : absolute
    top         : -8px
    margin-left : -6px
    z-index     : 5
    outline     : none

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

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

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

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

.smc-history-diff-wrap-divide
  border-bottom : 1px solid grey
  margin-bottom : 2em

.smc-history-diff-gutter1
  width : 50px
  color : #999

.smc-history-diff-gutter2
  width : 50px
  color : #999

.smc-history-diff-number
  color        : #999
  padding-left : 10px

/*Style for the slider button */

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

li
  line-height : normal

code
  font-size : inherit

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

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

.file-pages
  float    : none
  overflow : hidden
  > li > a
    position      : static
    /* Bootstrap 3 has this as relative ??  */
    padding       : 13px 15px 7px
    border-radius : 5px 5px 0px 0px
    /* Flatten bottom corners like tabs  */

.file-tab-placeholder
  /* Currently blank */

.file-pages li
  &.ui-sortable-helper > a
    background-color : #eee
  &.active.ui-sortable-helper > a
    background-color : #08c

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

.webapp-editor-codemirror-not-synced
  background    : red
  color         : white
  padding       : 5px
  border-radius : 3px

.webapp-editor-resize-bar-layout-1
  height        : 5px
  cursor        : ns-resize
  background    : #ddd
  border        : 1px solid grey
  border-radius : 3px
  z-index       : 1
  &:hover
    background : #888

.smc-vertical-drag-bar, .webapp-editor-resize-bar-layout-2, .webapp-editor-latex-resize-bar, .webapp-editor-html-md-resize-bar
  cursor        : ew-resize
  background    : #ddd
  width         : 4px
  border        : 1px solid grey
  border-radius : 3px
  z-index       : 1
  &:hover
    background : #888

.webapp-editor-html-md-preview
  padding       : 12px
  background    : white
  overflow      : auto
  border        : 1px solid grey
  border-radius : 4px

.smc-html-selection
  background-color : lightgrey
  border           : 1px solid lightgrey

.smc-html-cursor
  border-left  : 1px solid black
  margin-right : -1px

.webapp-html-editor-symbols-dialog td:hover
  background : lightblue

.webapp-editor-codeedit-buttonbar-mode
  background : #fafafa
  padding    : 6px 12px
  border     : 1px solid #ddd
  cursor     : pointer
  color      : darkblue

.sagews-output-raw_input
  font-family : sans-serif
  margin      : 1em


.smc-sagews-gutter-hide-show
  width        : 12px
  color        : #999
  margin-right : 14px
  margin-left  : 3px

.CodeMirror-linewidget
  overflow : hidden


/* Used for new sync. */
.smc-editor-codemirror-cursor
  position : absolute
  width    : 15em
  z-index  : 5

.smc-editor-codemirror-cursor-inside
  position : absolute
  top      : -1.2em
  left     : -1px
  height   : 1.2em
  width    : 1px

.smc-editor-codemirror-cursor-label
  position    : absolute
  top         : -2.3em
  font-size   : 8pt
  font-family : serif
  color       : #fff

.smc-uncommitted
  color            : white
  background-color : red
  padding          : 5px
  border-radius    : 3px
  margin-left      : 5px
  margin-right     : -5px

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

h1 { font-size: 250% }
h2 { font-size: 200% }
h3 { font-size: 170% }
h4 { font-size: 150% }
h5 { font-size: 130% }
h6 { font-size: 110% }

/* Important: for display math in Sage Worksheets.
   See https://github.com/sagemathinc/cocalc/issues/136
   NOTE: I did try putting
         styles: {'background-color':'inherit !important'}
   in the mathjax config section of last.coffee, but
   that did nothing.  So we're just going with this below. */

.MathJax_SVG_Display
  background-color : inherit !important


.smc-vfill
  flex           : 1
  display        : flex
  flex-direction : column
  overflow       : hidden

.smc-vflex
  display        : flex
  flex-direction : column

.smc-btn-group-nobreak
  display     : flex
  align-items : flex-start

.webapp-editor-codemirror-button-container
  border: 1px solid lightgrey

.smc-message-from-viewer a:link, .smc-message-from-viewer a:visited
   color : #FFEB3B

.smc-chat-message
  img
    max-width: 100%
  blockquote
    padding: 0px 0px 0px 10px
    font-size: inherit
    p
      font-size: inherit
  pre
    font-size: inherit
    padding: 5px

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