Notebooks Prototype v2

index.pug

- let counter = 1
- let cells = [{group: 1, type: 'text', heading: 'Common plotting pitfalls with large data', paragraph: 'When working with large datasets, visualizations are often the only way available to understand the properties of that dataset -- there are simply too many data points to examine each one!  Thus it is very important to be aware of some common plotting problems that are minor inconveniences with small datasets but very serious problems with larger ones.', git: 'modified'},{group: 1, type: 'code', string: 'import matplotlib.pyplot as plt\nimport numpy as np', time: '0.1'},{group: 1, type: 'code', string: 'print("Hello World")', time: "0.3", output: 'Hello World',git: 'added'},{group: 2, type: 'text', heading: '1. Overplotting', paragraph: 'Let\'s consider plotting some 2D data points that come from two separate categories, here plotted as blue and red in **A** and **B** below.  When the two categories are overlaid, the appearance of the result can be very different depending on which one is plotted first:'},{group: 2, type: 'code', string: 'def blues_reds(offset=0.5,pts=300):\n    blues = (np.random.normal( offset,size=pts), np.random.normal( offset,size=pts), -1*np.ones((pts)))\n    reds  = (np.random.normal(-offset,size=pts), np.random.normal(-offset,size=pts),  1*np.ones((pts)))\n    return hv.Points(blues, vdims=["c"]), hv.Points(reds, vdims=["c"])\n\nblues,reds = blues_reds()\nblues + reds + reds*blues + blues*reds', time: '2.5', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/61037/notebooks-scatter-plot.png'},{group: 3,type: 'text', heading: '2. Oversaturation', paragraph: 'You can reduce problems with overplotting by using transparency/opacity, via the alpha parameter provided to control opacity in most plotting programs.  E.g. if alpha is 0.1, full color saturation will be achieved only when 10 points overlap, reducing the effects of plot ordering but making it harder to see individual points:'},{group: 3,type: 'code', string: '%%opts Points (s=50 alpha=0.1)\nblues + reds + reds*blues + blues*reds', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/61037/scatter-plot-2.png', git: 'added'}]
- let menu = [{name: 'Lock Cell', shortcut: '⌘⇧L'},{name: 'Change Cell Type', shortcut: 'Y'},{name: 'Move cell up', shortcut: '⌥↑'},{name: 'Show cell toolbar', shortcut: '⌥↓', border: true},{name: 'Delete cell', shortcut: 'Backspace'}]

body.dark
  .menu-overlay
    ul#menu
      each item in menu
        if item.border
          li.border

        li
          span=item.name
          span.shortcut=item.shortcut

  #activity-bar
    svg(width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
      path(d="M17.5 0H8.5L7 1.5V6H2.5L1 7.5V22.5699L2.5 24H14.5699L16 22.5699V18H20.7L22 16.5699V4.5L17.5 0ZM17.5 2.12L19.88 4.5H17.5V2.12ZM14.5 22.5H2.5V7.5H7V16.5699L8.5 18H14.5V22.5ZM20.5 16.5H8.5V1.5H16V6H20.5V16.5Z" fill="#C5C5C5")
    svg(width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
      path(d="M15.25 1.02546e-06C13.6605 -0.000791296 12.1046 0.457574 10.7694 1.32007C9.43422 2.18256 8.37657 3.4124 7.72375 4.8617C7.07094 6.31099 6.85077 7.91801 7.0896 9.4895C7.32843 11.061 8.01604 12.5301 9.06995 13.72L1 22.88L2.12 23.88L10.17 14.76C11.2055 15.5693 12.4192 16.1196 13.7103 16.365C15.0014 16.6104 16.3325 16.5437 17.5927 16.1707C18.8528 15.7976 20.0055 15.1288 20.955 14.2201C21.9044 13.3114 22.623 12.1891 23.0509 10.9465C23.4789 9.70396 23.6038 8.37703 23.4153 7.07642C23.2267 5.77581 22.7302 4.53915 21.967 3.46924C21.2039 2.39933 20.1962 1.52711 19.0278 0.925416C17.8595 0.323719 16.5642 0.00991516 15.25 0.0100108V1.02546e-06ZM15.25 15C13.915 15 12.6099 14.6041 11.4999 13.8624C10.3898 13.1207 9.52469 12.0665 9.01379 10.8331C8.5029 9.59973 8.36919 8.24248 8.62964 6.93311C8.89009 5.62373 9.53305 4.42106 10.4771 3.47705C11.4211 2.53305 12.6237 1.89009 13.9331 1.62964C15.2425 1.36919 16.5997 1.5029 17.8331 2.01379C19.0665 2.52469 20.1207 3.38985 20.8624 4.49988C21.6041 5.60991 22 6.91498 22 8.25C22 10.0402 21.2888 11.7571 20.0229 13.023C18.7571 14.2888 17.0402 15 15.25 15Z" fill="#C5C5C5")
    svg(width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
      path(d="M21.0068 8.22168C21.0102 7.52792 20.8205 6.84689 20.4589 6.25485C20.0972 5.66281 19.5778 5.18315 18.959 4.86957C18.3401 4.556 17.6461 4.42091 16.9549 4.47941C16.2635 4.53793 15.6023 4.78773 15.0448 5.20085C14.4875 5.61397 14.0561 6.17409 13.7991 6.8185C13.5421 7.4629 13.4695 8.16613 13.5896 8.84944C13.7096 9.53274 14.0175 10.1692 14.4787 10.6874C14.94 11.2056 15.5365 11.5852 16.2012 11.7836C15.9558 12.2824 15.5761 12.703 15.1047 12.9979C14.6334 13.2929 14.0892 13.4505 13.5332 13.4532H10.5437C9.43705 13.4571 8.37141 13.8727 7.5543 14.6191V7.39809C8.46162 7.21288 9.26787 6.69737 9.81671 5.95151C10.3656 5.20565 10.6179 4.28256 10.5248 3.36121C10.4317 2.43987 9.99988 1.5859 9.31295 0.964873C8.62602 0.343845 7.73298 0 6.80694 0C5.8809 0 4.98786 0.343845 4.30093 0.964873C3.61401 1.5859 3.18214 2.43987 3.08907 3.36121C2.99599 4.28256 3.24834 5.20565 3.79718 5.95151C4.34602 6.69737 5.15226 7.21288 6.05958 7.39809V16.5159C5.15396 16.6891 4.34302 17.1877 3.77972 17.9176C3.21642 18.6476 2.93971 19.5585 3.00176 20.4785C3.06382 21.3984 3.46036 22.2639 4.11659 22.9115C4.77282 23.5592 5.64338 23.9444 6.56406 23.9944C7.48475 24.0445 8.3919 23.7558 9.11443 23.183C9.83696 22.6102 10.3249 21.7928 10.4862 20.885C10.6476 19.9771 10.4712 19.0417 9.99026 18.255C9.50935 17.4683 8.7572 16.8848 7.87567 16.6145C8.12155 16.1162 8.50145 15.6963 8.97275 15.4019C9.44404 15.1074 9.98806 14.9503 10.5437 14.9479H13.5332C14.4659 14.9436 15.374 14.6486 16.1311 14.1039C16.8882 13.5592 17.4566 12.792 17.7572 11.9091C18.6532 11.7914 19.4761 11.3528 20.0736 10.6748C20.671 9.9968 21.0026 9.12533 21.0068 8.22168ZM4.56487 3.73752C4.56487 3.29408 4.69636 2.8606 4.94272 2.4919C5.18909 2.12319 5.53925 1.83581 5.94893 1.66611C6.35863 1.49642 6.80943 1.45202 7.24435 1.53854C7.67927 1.62504 8.07877 1.83857 8.39233 2.15214C8.70589 2.4657 8.91943 2.8652 9.00594 3.30012C9.09245 3.73504 9.04805 4.18585 8.87835 4.59553C8.70865 5.00521 8.42128 5.35539 8.05257 5.60175C7.68386 5.84811 7.25038 5.9796 6.80694 5.9796C6.2123 5.9796 5.64203 5.74339 5.22155 5.32291C4.80108 4.90245 4.56487 4.33216 4.56487 3.73752ZM9.04902 20.1794C9.04902 20.6229 8.91752 21.0563 8.67116 21.425C8.42479 21.7937 8.07463 22.0811 7.66495 22.2508C7.25526 22.4205 6.80445 22.4649 6.36954 22.3784C5.93461 22.292 5.53512 22.0784 5.22155 21.7648C4.90799 21.4512 4.69446 21.0517 4.60794 20.6169C4.52144 20.1819 4.56583 19.7311 4.73553 19.3214C4.90523 18.9117 5.19261 18.5615 5.56131 18.3152C5.93002 18.0689 6.3635 17.9373 6.80694 17.9373C7.40158 17.9373 7.97186 18.1736 8.39233 18.594C8.8128 19.0145 9.04902 19.5848 9.04902 20.1794ZM17.27 10.4638C16.8265 10.4638 16.3931 10.3322 16.0244 10.0859C15.6557 9.83954 15.3683 9.48937 15.1986 9.07969C15.0289 8.67 14.9844 8.2192 15.0709 7.78427C15.1574 7.34935 15.371 6.94985 15.6846 6.63629C15.9982 6.32273 16.3976 6.10919 16.8325 6.02268C17.2675 5.93617 17.7183 5.98058 18.1279 6.15027C18.5377 6.31997 18.8878 6.60734 19.1342 6.97605C19.3805 7.34476 19.512 7.77823 19.512 8.22168C19.512 8.81632 19.2758 9.3866 18.8554 9.80706C18.4348 10.2275 17.8646 10.4638 17.27 10.4638Z" fill="#C5C5C5")
    svg(width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg")
      path(d="M10.94 13.5L9.62 14.82C9.41924 14.0117 8.95376 13.2939 8.29772 12.7809C7.64168 12.2679 6.83282 11.9892 6 11.9892C5.16718 11.9892 4.35832 12.2679 3.70228 12.7809C3.04624 13.2939 2.58076 14.0117 2.38 14.82L1.06 13.5L0 14.56L1.72 16.28L1.5 16.5V18H0V19.5H1.5V19.58C1.5765 20.0687 1.71425 20.5458 1.91 21L0 22.94L1.06 24L2.71 22.35C3.10257 22.8509 3.60118 23.2586 4.17002 23.5438C4.73885 23.8291 5.36381 23.9849 6 24C6.63619 23.9849 7.26115 23.8291 7.82998 23.5438C8.39882 23.2586 8.89743 22.8509 9.29 22.35L10.94 24L12 22.94L10.09 21C10.2882 20.5362 10.426 20.0489 10.5 19.55V19.45H12V18H10.5V16.5L10.28 16.28L12 14.56L10.94 13.5ZM6 13.5C6.59674 13.5 7.16903 13.7371 7.59099 14.159C8.01295 14.581 8.25 15.1533 8.25 15.75H3.75C3.75 15.1533 3.98705 14.581 4.40901 14.159C4.83097 13.7371 5.40326 13.5 6 13.5ZM9 19.5C8.92674 20.2709 8.58713 20.9921 8.0396 21.5396C7.49207 22.0871 6.77085 22.4267 6 22.5C5.22915 22.4267 4.50793 22.0871 3.9604 21.5396C3.41287 20.9921 3.07326 20.2709 3 19.5V17.25H9V19.5ZM23.76 9.6V10.86L13.5 17.37V15.6L22 10.23L9 2V11.46C8.54306 11.139 8.03624 10.8958 7.5 10.74V0.63L8.64 0L23.76 9.6Z" fill="#C5C5C5")

  #sidebar
    a(id="theme", href="#")="💡 Toggle Theme"
  #cells
    each cell in cells
      .cell-container
        .cell(class=cell.git, id=index, data-type=cell.type, data-group=cell.group)
          .side
            .execution= '[' + counter + ']'
            #actions
              if cell.type == 'text'
                svg(class="fold" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                  path(fill-rule="evenodd" clip-rule="evenodd" d="M7.97612 10.0719L12.3334 5.7146L12.9521 6.33332L8.28548 11L7.66676 11L3.0001 6.33332L3.61882 5.7146L7.97612 10.0719Z" fill="#C5C5C5")
                svg(class="folded" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                  path(fill-rule="evenodd" clip-rule="evenodd" d="M10.0719 8.02397L5.7146 3.66666L6.33332 3.04794L11 7.71461V8.33333L6.33332 13L5.7146 12.3813L10.0719 8.02397Z" fill="#C5C5C5")
              if cell.type == 'code'
                svg(id="run" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                  path(fill-rule="evenodd" clip-rule="evenodd" d="M4 2V14.4805L12.9146 8.24024L4 2ZM11.1809 8.24024L4.995 12.5684V3.91209L11.1809 8.24024Z" fill="#C5C5C5")
              svg(id="gripper" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg")
                path(d="M5.00806 2.992L7.00806 2.992V4.992H5.00806V2.992ZM5.00806 6.992H7.00806L7.00806 8.992H5.00806V6.992ZM5.00806 10.992H7.00806V12.992H5.00806L5.00806 10.992ZM9.00806 2.992L11.0081 2.992V4.992H9.00806V2.992ZM9.00806 6.992L11.0081 6.992V8.992H9.00806V6.992ZM9.00806 10.992H11.0081L11.0081 12.992L9.00806 12.992L9.00806 10.992Z" fill="#C5C5C5")
          .toolbar
            if cell.type == 'text'
              svg(width="16" height="16" viewBox="0 0 16 16")
                path(d="M13.23 1H11.7701L3.52008 9.25L3.36005 9.46997L1.00006 13.59L2.4101 15L6.53009 12.64L6.75006 12.48L15.0001 4.22998V2.77002L13.23 1ZM2.4101 13.59L3.9201 10.59L5.37006 12.04L2.4101 13.59ZM6.24005 11.53L4.47003 9.76001L12.47 1.76001L14.2401 3.53003L6.24005 11.53Z" fill="#C5C5C5")
            //- svg(width="16" height="16" viewBox="0 0 16 16")
            //-     path(d="M4.708 5.578L2.061 8.224L4.708 10.87L4 11.578L1 8.578V7.87L4 4.87L4.708 5.578ZM11.708 4.87L11 5.578L13.647 8.224L11 10.87L11.708 11.578L14.708 8.578V7.87L11.708 4.87ZM4.908 13L5.802 13.448L10.802 3.448L9.908 3L4.908 13Z" fill="#C5C5C5")
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M13 7H12V5C12 3.93913 11.5786 2.92178 10.8284 2.17163C10.0783 1.42149 9.06087 1 8 1C6.93913 1 5.92172 1.42149 5.17157 2.17163C4.42142 2.92178 4 3.93913 4 5V7H3L2 8V14L3 15H13L14 14V8L13 7ZM5 5C5 4.20435 5.31605 3.44127 5.87866 2.87866C6.44127 2.31605 7.20435 2 8 2C8.79565 2 9.55873 2.31605 10.1213 2.87866C10.6839 3.44127 11 4.20435 11 5V7H5V5ZM13 14H3V8H13V14Z" fill="#C5C5C5")
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(fill-rule="evenodd" clip-rule="evenodd" d="M9.99994 3H11.9999H12.9999V4H11.9999V13L10.9999 14H3.99994L2.99994 13V4H1.99994V3H4.99994V2C4.99994 1.73478 5.10525 1.48038 5.29279 1.29285C5.48032 1.10531 5.73472 1 5.99994 1H8.99994C9.26516 1 9.51956 1.10531 9.70709 1.29285C9.89463 1.48038 9.99994 1.73478 9.99994 2V3ZM8.99994 2H5.99994V3H8.99994V2ZM3.99994 13H10.9999V4H3.99994V13ZM5.99994 5H4.99994V12H5.99994V5ZM6.99994 5H7.99994V12H6.99994V5ZM8.99994 5H9.99994V12H8.99994V5Z" fill="#C5C5C5")
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M4 8C4 8.19778 3.94135 8.39112 3.83147 8.55557C3.72159 8.72002 3.56541 8.84819 3.38268 8.92388C3.19996 8.99957 2.99889 9.01937 2.80491 8.98079C2.61093 8.9422 2.43275 8.84696 2.29289 8.70711C2.15304 8.56725 2.0578 8.38907 2.01922 8.19509C1.98063 8.00111 2.00043 7.80004 2.07612 7.61732C2.15181 7.43459 2.27998 7.27841 2.44443 7.16853C2.60888 7.05865 2.80222 7 3 7C3.26522 7 3.51957 7.10536 3.70711 7.29289C3.89464 7.48043 4 7.73478 4 8Z" fill="#C5C5C5")
              path(d="M9 8C9 8.19778 8.94135 8.39112 8.83147 8.55557C8.72159 8.72002 8.56541 8.84819 8.38268 8.92388C8.19996 8.99957 7.99889 9.01937 7.80491 8.98079C7.61093 8.9422 7.43275 8.84696 7.29289 8.70711C7.15304 8.56725 7.0578 8.38907 7.01922 8.19509C6.98063 8.00111 7.00043 7.80004 7.07612 7.61732C7.15181 7.43459 7.27998 7.27841 7.44443 7.16853C7.60888 7.05865 7.80222 7 8 7C8.26522 7 8.51957 7.10536 8.70711 7.29289C8.89464 7.48043 9 7.73478 9 8Z" fill="#C5C5C5")
              path(d="M14 8C14 8.19778 13.9414 8.39112 13.8315 8.55557C13.7216 8.72002 13.5654 8.84819 13.3827 8.92388C13.2 8.99957 12.9989 9.01937 12.8049 8.98079C12.6109 8.9422 12.4327 8.84696 12.2929 8.70711C12.153 8.56725 12.0578 8.38907 12.0192 8.19509C11.9806 8.00111 12.0004 7.80004 12.0761 7.61732C12.1518 7.43459 12.28 7.27841 12.4444 7.16853C12.6089 7.05865 12.8022 7 13 7C13.2652 7 13.5196 7.10536 13.7071 7.29289C13.8946 7.48043 14 7.73478 14 8Z" fill="#C5C5C5")

          .editor
            if cell.type == 'text'
              .code
                if cell.heading
                  h1=cell.heading
                if cell.paragraph
                  p=cell.paragraph
            else
              .code
               pre
                code(class="python")= cell.string
              .status
                span.left
                  if cell.time || cell.output
                    span.time
                      svg(width="16" height="16" viewBox="0 0 16 16")
                        path(fill-rule="evenodd" clip-rule="evenodd" d="M14.4315 3.3232L5.96151 13.3232L5.1708 13.2874L1.8208 8.5174L2.63915 7.94268L5.61697 12.1827L13.6684 2.67688L14.4315 3.3232Z" fill="#73C991")
                      = cell.time + 's'
                  else
                    span.hint='Ctrl + Enter to run'
                span.right='Python 3.7'
              -counter++
            if cell.output || cell.image
              .output
                if cell.image
                  image(src=cell.image)
                = cell.output
        .cell.new-cell
          .border
          .button.code
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M14.0001 7V8H8.00009V14H7.00009V8H1.00009V7H7.00009V1H8.00009V7H14.0001Z" fill="#C5C5C5")
            ="Code"
          .button.text
            svg(width="16" height="16" viewBox="0 0 16 16")
              path(d="M14.0001 7V8H8.00009V14H7.00009V8H1.00009V7H7.00009V1H8.00009V7H14.0001Z" fill="#C5C5C5")
            ="Markdown"

notebooks-prototype-v2.markdown

Notebooks Prototype v2

A Pen by Miguel Solorio on CodePen.

License.

script.js

$("#cells").sortable({
  helper: "clone",
  placeholder: "cell-highlight"
});
$("#cells").  disableSelection();

$(".cell").mousedown(function () {
  $(".active").removeClass("active");
  $(this).toggleClass("active");
  if(!$(this).find('.editor').hasClass("focus")){
    $(".focus").removeClass("focus");
  }
});

document.addEventListener('contextmenu', event => event.preventDefault());

$( ".cell" ).contextmenu(function(e) {
  $('.menu-overlay').toggle();
  $('#menu').css({
    top: e.pageY - 40,
    left: e.pageX
  });
  return false;
});

$('.menu-overlay').click(function(){
  $('.menu-overlay').toggle();
});

$(".editor").mousedown(function () {
  $(".focus").removeClass("focus");
  $(this).toggleClass("focus");
});

$('.fold,.folded').click(function(){
  let group = $(this).closest('.cell').data('group')
  
  $(this).parent().find('.fold,.folded').toggle();
  $('.cell:not([data-type="text"])[data-group="'+group+'"]').parent().toggle()
})

$(document).on("keydown", function (event) {
  if (event.key == "Escape") {
    
    $('.menu-overlay').hide();
    
    if ($(".editor").hasClass("focus")) {
      $(".focus").removeClass("focus");
    } else {
      $(".active").removeClass("active");
    }
  }
});

hljs.initHighlightingOnLoad();

$("#theme").click(function(){
  $('body').toggleClass('dark light');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

style.sass

.dark
  --sidebar: #252526
  --activity: #333
  --editor: #1E1E1E
  --iconHighlight: #89d185
  --gitAdded: #587C0C
  --gitModified: #357E9D
  --activeIndicator: #292929
  --focus: #007ACC
  --fontColor: #ccc
  --output: var(--activeIndicator)
  --borderCell: var(--activeIndicator)
  --borderCellStrong: var(--activeIndicator)
  --borderColor: rgba(255, 255, 255, 0.08)
  --borderSelection: rgba(255, 255, 255, 0.12)
  --shadow: rgba(0, 0, 0, 0.8)
  --code: #D4D4D4
  --icon: #c5c5c5

.light
  --sidebar: #f3f3f3
  --activity: #333
  --editor: white
  --iconHighlight: #388a34
  --gitAdded: #81b88b
  --gitModified: #66afe0
  --activeIndicator: #F6F6F6
  --fontColor: #616161
  --focus: #66afc0
  --output: var(--activeIndicator)
  --borderCell: var(--activeIndicator)
  --borderCellStrong: var(--activeIndicator)
  --borderColor: #ccc
  --borderSelection: rgba(0, 0, 0, 0.04)
  --shadow: rgba(0, 0, 0, 0.06)
  --code: #000
  --icon: #414141



*
  box-sizing: border-box

body
  
  margin: 0
  padding: 0
  font-family: 'Input Mono', monospace
  font-size: 13px
  color: var(--fontColor)
  background-color: var(--editor)
  display: flex
  height: 100%
  overflow: hidden
  flex-direction: row
  align-items: center
  // justify-content: center
#theme
  text-decoration: none
  color: var(--fontColor)

#activity-bar
  flex-shrink: 0
  display: flex
  flex-direction: column
  align-items: center
  width: 48px
  height: 100vh
  background-color: var(--activity)
  svg
    margin: 12px 0

#sidebar
  flex-shrink: 0
  padding: 20px
  width: 250px
  height: 100vh
  background-color: var(--sidebar)

#cells
  flex-shrink: 0
  width: calc(100% - 48px - 250px)
  height: 100vh
  overflow: scroll
  min-width: 300px
  padding-top: 16px


.cell
  position: relative
  display: flex
  justify-content: center
  padding: 8px 12px 8px 8px
  margin: 0 auto
  background-color: var(--editor)
  border-top: 1px solid transparent
  border-bottom: 1px solid transparent
  &:before
    content: ""
    position: absolute
    left: 0
    top: 0
    width: 3px
    height: 100%
  &.modified:before
    background-color: var(--gitModified)
  &.added:before
    background-color: var(--gitAdded)
  &:hover:not(.new-cell)
    background-color: var(--activeIndicator)
  &.active:not(.new-cell)
    border-color: var(--borderSelection)
    box-shadow: 0px 2px 8px 2px var(--shadow)
    background-color: var(--activeIndicator)
    .code,.status
      border-color: var(--borderCellStrong)

  .side
    text-align: center
    min-width: 28px
    color: var(--fontColor)
    padding-top: 8px
    flex-shrink: 0
    .execution
      opacity: .6
      font-size: 10px
    #actions
      display: none
      flex-direction: column
      height: 100%
      align-items: center
      justify-content: space-between
      &:hover
        #gripper
          opacity: .5
      #gripper
        margin-bottom: 4px
        opacity: 0
      svg, svg *
        fill: var(--icon)
      svg:active
        transform: scale(1.2)
      #run:hover, .fold:hover,.folded:hover
        cursor: pointer
      .fold
        opacity: 0
      .fold,.folded
        margin: 0 auto
        width: 20px
        height: 20px
      .folded
        display: none
    &:hover
      cursor: grab
    &:active,
    &:focus
      cursor: grabbing !important

  .toolbar
    display: none
    position: absolute
    padding: 2px 4px
    top: -12px
    right: 24px
    border: 1px solid var(--borderColor)
    background-color: var(--editor)
    svg
      width: 16px
      height: 16px
      margin: 2px 4px
      &, & *
        fill: var(--icon)
      &:last-child
        margin-right: 0
      &:hover
        cursor: pointer
      &:active
        transform: scale(1.2)

  .editor
    width: 100%

    &.focus
      .code,.status
        border-color: var(--focus)
    .code,.status
      border: 1px solid var(--borderCell)
    .code
      border-bottom: none
      background-color: var(--editor)
      padding: 8px 16px
      span.color
        color: #C586C0
    .status
      border-top: 1px solid transparent !important
      font-family: -apple-system, BlinkMacSystemFont, sans-serif
      background-color: var(--editor)
      color: var(--fontColor)
      font-size: 12px
      border-top: none
      padding: 4px 16px
      display: flex
      svg
        width: 14px
        height: 14px
      .time
        display: flex
        align-items: center
        svg
          margin-right: 4px
          &, & *
            fill: var(--iconHighlight)
      .right
        margin-left: auto

    .output
      font-size: 13px
      font-family: -apple-system, BlinkMacSystemFont, sans-serif
      padding: 16px
      background-color: var(--output)
      img
        width: 100%
        height: auto
  &:hover:not(.new-cell)
    .toolbar
      display: flex
    .execution
      display: none
    #actions
      display: flex
      .fold
        opacity: 1

  &[data-type="text"]
    #actions
      display: flex
      #gripper
        display: none
    &:hover #actions #gripper
      display: block
    *:last-child
      margin-bottom: 0
    h1
      font-size: 26px
      margin: 0
      padding-bottom: 8px
      border-bottom: 1px solid rgba(white, 0.18)
    p
      font-size: 13px
      line-height: 22px
      margin: 13px 0
    #run
      display: block
    .status, .execution
      display: none
    .editor
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji
      font-size: 22px
      border: none
      .code
        padding: 4px 16px 8px
        border: none
        background-color: transparent
      h1
        font-weight: 400

.cell-highlight
  height: 2px
  background-color: var(--focus)

.ui-sortable-helper
  opacity: .5
  .side
    &:hover
      cursor: grabbing


.menu-overlay
  display: none
  z-index: 999
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
#menu
  z-index: 999
  position: absolute
  list-style-type: none
  padding: 4px 0
  color: var(--fontColor)
  background-color: var(--sidebar)
  box-shadow: var(--shadow) 0px 4px 8px
  @at-root
    .light #menu
      background-color: var(--editor)
      li:hover
        background-color: #0074E8
  li
    display: flex
    align-items: center
    min-width: 200px
    margin: 0
    padding: 8px 24px
    text-transform: capitalize
    &.border
      margin: 4px 12px 5px 12px
      pointer-events: none
      padding: 1px 0 0 0
      background-color: var(--borderColor)
    &:hover
      color: white
      background-color: #094771
      cursor: pointer
    span
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji
      font-size: 13px
    span.shortcut
      font-family: -apple-system,BlinkMacSystemFont,sans-serif
      margin-left: auto


.new-cell
  opacity: 0
  margin: 0
  padding: 8px 0
  position: relative
  display: flex
  align-items: center
  transition: opacity .2s ease-in
  transition-delay: .1s
  background: tranparent
  &:hover
    opacity: 1
  .border
    z-index: 0
    position: absolute
    width: calc(100% - 48px)
    height: 1px
    left: 24px
    right: 0
    margin: auto
    background-color: var(--borderColor)
  .button
    z-index: 1
    font-size: 12px
    font-family: -apple-system, BlinkMacSystemFont, sans-serif
    padding: 4px 8px
    background-color: var(--editor)
    margin: 0 8px
    display: flex
    align-items: center
    &:hover
      cursor: pointer
    svg
      width: 14px
      height: 14px
      margin-right: 4px
      &, & *
        fill: var(--icon)



pre
  margin: 0
  padding: 0

.hljs
  padding: 0
  background-color: transparent

.hljs
  font-size: 12px
  line-height: 1.2rem
  font-family: 'Input Mono', monospace
  display: block
  overflow-x: auto
  color: var(--code)

.hljs-keyword, .hljs-literal, .hljs-symbol, .hljs-name
  color: #C586C0

.hljs-link
  color: #569CD6
  text-decoration: underline

.hljs-built_in, .hljs-type
  color: #4EC9B0

.hljs-number, .hljs-class
  color: #B8D7A3

.hljs-string, .hljs-meta-string
  color: #D69D85

.hljs-regexp, .hljs-template-tag
  color: #9A5334

.hljs-title
  color: #DCDCAA

.hljs-subst, .hljs-function, .hljs-params
  color: #DCDCDC

.hljs-comment, .hljs-quote
  color: #57A64A
  font-style: italic

.hljs-doctag
  color: #608B4E

.hljs-meta, .hljs-meta-keyword, .hljs-tag
  color: #9B9B9B

.hljs-variable, .hljs-template-variable
  color: #BD63C5

.hljs-attr, .hljs-attribute, .hljs-builtin-name
  color: #9CDCFE

.hljs-section
  color: gold

.hljs-emphasis
  font-style: italic

.hljs-strong
  font-weight: bold

.hljs-bullet, .hljs-selector-tag, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo
  color: #D7BA7D

.hljs-addition
  background-color: #144212
  display: inline-block
  width: 100%

.hljs-deletion
  background-color: #600
  display: inline-block
  width: 100%

.light
  .hljs-keyword, .hljs-literal, .hljs-symbol, .hljs-name
    color: #af00db

  .hljs-link
    color: #569CD6
    text-decoration: underline

  .hljs-built_in, .hljs-type
    color: #4EC9B0

  .hljs-number, .hljs-class
    color: #098658

  .hljs-string, .hljs-meta-string
    color: #a31515

  .hljs-regexp, .hljs-template-tag
    color: #9A5334

  .hljs-title
    color: #795e26

  .hljs-subst, .hljs-function, .hljs-params
    color: #001080

  .hljs-comment, .hljs-quote
    color: #57A64A
    font-style: italic

  .hljs-doctag
    color: #608B4E

  .hljs-meta, .hljs-meta-keyword, .hljs-tag
    color: #9B9B9B

  .hljs-variable, .hljs-template-variable
    color: #BD63C5

  .hljs-attr, .hljs-attribute, .hljs-builtin-name
    color: #9CDCFE

  .hljs-section
    color: gold

  .hljs-emphasis
    font-style: italic

  .hljs-strong
    font-weight: bold

  .hljs-bullet, .hljs-selector-tag, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo
    color: #D7BA7D

  .hljs-addition
    background-color: #144212
    display: inline-block
    width: 100%

  .hljs-deletion
    background-color: #600
    display: inline-block
    width: 100%