jupyterthemes/layout/cells.less
/**************************************************************
 Cell Input, Output, and Prompt style for Code, Txt, & MD Cells
**************************************************************/

/********** CODE CELL INPUT AREA **********/
div.input_area {
    background-color: @cc-input-bg;
    background: @cc-input-bg;
    padding-right: 1.2em;
    border: 0px;
    border-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
div.cell {
    padding: 0px;
    background: @cc-input-bg; //@notebook-bg;
    background-color: @cc-input-bg; //@notebook-bg;
    border: medium solid @notebook-bg;
    border-radius: 4px;
    top: 0;
}

div.cell.selected {
    background: @cc-input-bg; //@notebook-bg;
    background-color: @cc-input-bg; //@notebook-bg;
    border: medium solid @notebook-bg;
    padding: 0px;
    border-radius: 5px;
}

.edit_mode div.cell.selected {
    padding: 0px;
    background: @cc-input-bg; //@notebook-bg;
    background-color: @cc-input-bg; //@notebook-bg;
    border: medium solid @notebook-bg;
    border-radius: 5px;
}
div.cell.edit_mode {
    padding: 0px;
    background: @cc-input-bg; //@notebook-bg;
    background-color: @cc-input-bg; //@notebook-bg;
}
div.CodeMirror-sizer {
    margin-left: 0px;
    margin-bottom: -21px;
    border-right-width: 16px;
    min-height: 37px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
}
div.cell.selected:before,
.edit_mode div.cell.selected:before,
div.cell.selected:before,
div.cell.selected.jupyter-soft-selected:before  {
    background: @cc-input-bg !important;
    border: none;
    border-radius: 3px;
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 100%;
}

div.cell.text_cell.selected::before,
.edit_mode div.cell.text_cell.selected:before,
div.cell.text_cell.selected:before,
div.cell.text_cell.selected.jupyter-soft-selected:before {
  background: @text-cell-bg !important;
  background-color: @text-cell-bg !important;
  border-color: @tc-border-selected !important;
}

div.cell.code_cell .input {
    border-left: 5px solid @cc-input-bg !important;
    border-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
div.cell.code_cell.selected .input {
    border-left: 5px solid @cc-border-selected !important;
    border-radius: 3px;
}
.edit_mode div.cell.code_cell.selected .input {
    border-left: 5px solid @cc-border-edit !important;
    border-radius: 3px;
}
.edit_mode div.cell.selected:before {
    height: 100%;
    border-left: 5px solid @cc-border-edit !important;
    border-radius: 3px;
}

/*********** JUPYTER CELLS SOFT-SELECTED ************/
div.cell.jupyter-soft-selected,
div.cell.selected.jupyter-soft-selected {
    border-left-color: @cc-border-edit !important;
    border-left-width: 0px !important;
    padding-left: 7px !important;
    border-right-color: @cc-border-edit !important;
    border-right-width: 0px !important;
    background: @cc-border-edit !important;
    border-radius: 6px !important;
}
div.cell.selected.jupyter-soft-selected .input {
    border-left: 5px solid @cc-input-bg !important;
}
div.cell.selected.jupyter-soft-selected {
    border-left-color: @cc-border-selected;
    border-color: @notebook-bg;
    padding-left: 7px;
    border-radius: 6px;
}
div.cell.code_cell.selected .input {
    border-left: none;
    border-radius: 3px;
}
div.cell.selected.jupyter-soft-selected .prompt,
div.cell.text_cell.selected.jupyter-soft-selected .prompt {
    top: 0;
    border-left: @cc-input-bg !important;
    border-radius: 2px;
}
div.cell.text_cell.selected.jupyter-soft-selected .input_prompt {
    border-left: none !important;
}
div.cell.text_cell.jupyter-soft-selected,
div.cell.text_cell.selected.jupyter-soft-selected {
    border-left-color: @tc-border-edit !important;
    border-left-width: 0px !important;
    padding-left: 26px !important;
    border-right-color: @tc-border-edit !important;
    border-right-width: 0px !important;
    background: @tc-border-edit !important;
    border-radius: 5px !important;
}

div.cell.jupyter-soft-selected .input,
div.cell.selected.jupyter-soft-selected .input {
    border-left-color: @cc-border-edit !important;
}

/*********** CODE CELL INPUT PROMPT ************/
div.prompt, .prompt {
    font-family: @monofont, monospace;
    font-size: 9pt !important;
    font-weight: normal;
    color: @prompt-text;
    line-height: 170%;
    padding: 0px;
    padding-top: 4px;
    padding-left: 0px;
    padding-right: 1px;
    text-align: right !important;
    min-width: @prompt-min-width !important;
    width: @prompt-min-width !important;
}

div.prompt.input_prompt {
    font-size: 9pt !important;
    background-color: @cc-prompt-bg;
    border-top: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding-right: 3px;
    min-width: @prompt-min-width;
    width: @prompt-min-width !important;
}

div.prompt_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch !important;
    text-align: right;
}

div.cell.code_cell .input_prompt {
    border-right: @prompt-border;
}

div.cell.selected .prompt {
    top: 0;
}
.edit_mode div.cell.selected .prompt {
    top: 0;
}
.edit_mode div.cell.selected .prompt {
    top: 0;
}


.run_this_cell {
    visibility: hidden;
    color: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 3px;
    padding-right: 12px;
    width: 1.5ex;
    width: 0ex;
    background: transparent;
    background-color: transparent;
}

div.code_cell:hover div.input .run_this_cell {
    visibility: visible;
}

div.cell.code_cell.rendered.selected .run_this_cell:hover {
    background-color: darken(@cc-input-bg, 4%);
    background: darken(@cc-input-bg, 4%);
    color: @cc-border-selected !important;
}
div.cell.code_cell.rendered.unselected .run_this_cell:hover {
    background-color: darken(@cc-input-bg, 4%);
    background: darken(@cc-input-bg, 4%);
    color: @cc-border-selected !important;
}

i.fa-step-forward.fa {
    display: inline-block;
    font: normal normal normal 9px "FontAwesome";
}
.fa-step-forward:before {
    content: "\f04b";
}

div.cell.selected.jupyter-soft-selected .run_this_cell,
div.cell.selected.jupyter-soft-selected .run_this_cell:hover,
div.cell.unselected.jupyter-soft-selected .run_this_cell:hover,
div.cell.code_cell.rendered.selected.jupyter-soft-selected .run_this_cell:hover,
div.cell.code_cell.rendered.unselected.jupyter-soft-selected .run_this_cell:hover {
    background-color: @cc-border-edit !important;
    background: @cc-border-edit !important;
    color: @cc-border-edit !important;
}

/********** CODE CELL OUTPUT AREA **********/
div.output_wrapper {
    background-color: @cc-output-bg;
    border: 0px;
    left: 0px;
    margin-bottom: 0em;
    margin-top: 0em;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
div.output_subarea.output_text.output_stream.output_stdout,
div.output_subarea.output_text {
    font-family: @monofont, monospace;
    font-size: @output-font-size !important;
    line-height: 150% !important;
    background-color: @cc-output-bg;
    color: @cc-output-fg;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    margin-left: 11.5px;
}
div.output_area pre {
    font-family: @monofont, monospace;
    font-size: @output-font-size !important;
    line-height: 151% !important;
    color: @cc-output-fg;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
div.output_area {
    display: -webkit-box;
}
div.output_html {
    font-family: @monofont, monospace;
    font-size: @output-font-size;
    color: @table-color;
    background-color: @cc-output-bg;
    background: @cc-output-bg;
}
div.output_subarea {
    overflow-x: auto;
    // padding: 0.8em !important;
    padding: 1.2em !important;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    flex: 1;
}
div.btn.btn-default.output_collapsed {
    background: darken(@button-panel-bg, 5%);
    background-color: darken(@button-panel-bg, 5%);
    border-color: darken(@button-panel-bg, 5%);
}
div.btn.btn-default.output_collapsed:hover {
    background: darken(@button-panel-bg, 7%);
    background-color: darken(@button-panel-bg, 7%);
    border-color: darken(@button-panel-bg, 7%);
}

/************ CODE CELL OUTPUT PROMPT ************/
div.prompt.output_prompt {
    font-family: @monofont, monospace;
    // font-size: 9.5pt !important;
    font-weight: bold !important;
    background-color: @cc-output-bg;
    color: transparent;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    min-width: @out-prompt-min-width !important;
    width: @out-prompt-min-width !important;
    border-right: 2px solid transparent;
}
div.out_prompt_overlay.prompt {
    font-family: @monofont, monospace;
    // font-size: 9.5pt !important;
    font-weight: bold !important;
    background-color: @cc-output-bg;
    border-bottom-left-radius: 2px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    min-width: @out-prompt-min-width !important;
    width: @out-prompt-min-width !important;
    border-right: 2px solid transparent;
    color: transparent;
}
div.out_prompt_overlay.prompt:hover {
    background-color: @box-shadow;
    box-shadow: none !important;
    border: none;
    border-bottom-left-radius: 2px;
    -webkit-border-: 2px;
    -moz-border-radius: 2px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    min-width: @out-prompt-min-width !important;
    width: @out-prompt-min-width !important;
    border-right: 2px solid @box-shadow !important;
}
div.cell.code_cell .output_prompt {
    border-right: 2px solid transparent;
    color: transparent;
}
div.cell.selected .output_prompt,
div.cell.selected .out_prompt_overlay.prompt {
    border-left: 5px solid @tc-border-edit;
    border-right: 2px solid @cc-output-bg;
    border-radius: 0px !important;
}
.edit_mode div.cell.selected .output_prompt,
.edit_mode div.cell.selected .out_prompt_overlay.prompt {
    border-left: 5px solid @tc-border-edit;
    border-right: 2px solid @cc-output-bg;
    border-radius: 0px !important;
}

/******** TXT & MD INPUT AREA ********/
div.text_cell,
div.text_cell_render pre,
div.text_cell_render {
    font-family: @text-cell-fontfamily;
    font-size: @text-cell-fontsize;
    line-height: 130% !important;
    color: @text-cell-fg;
    background: @text-cell-bg;
    background-color: @text-cell-bg;
    border-radius: 0px;
}
div .text_cell_render {
    padding: 0.4em 0.4em 0.4em 0.4em;
}
div.cell.text_cell .CodeMirror-lines {
    padding-top: .7em !important;
    padding-bottom: .4em !important;
    padding-left: .5em !important;
    padding-right: .5em !important;
    margin-top: .4em;
    margin-bottom: .3em;
}
div.cell.text_cell.unrendered div.input_area,
div.cell.text_cell.rendered div.input_area {
    background-color: @text-cell-bg;
    background: @text-cell-bg;
    border: 0px;
    border-radius: 2px;
}
div.cell.text_cell .CodeMirror,
div.cell.text_cell .CodeMirror pre {
    line-height: 170% !important;
}
div.cell.text_cell.rendered.selected {
    font-family: @text-cell-fontfamily;
    line-height: @cc-line-height !important;
    background: @text-cell-bg;
    background-color: @text-cell-bg;
    border-radius: 0px;
}
div.cell.text_cell.unrendered.selected {
    font-family: @text-cell-fontfamily;
    line-height: @cc-line-height !important;
    background: @text-cell-bg;
    background-color: @text-cell-bg;
    border-radius: 0px;
}
div.cell.text_cell.selected {
    font-family: @text-cell-fontfamily;
    line-height: @cc-line-height !important;
    background: @text-cell-bg;
    background-color: @text-cell-bg;
    border-radius: 0px;
}
.edit_mode div.cell.text_cell.selected {
    font-family: @text-cell-fontfamily;
    line-height: @cc-line-height !important;
    background: @text-cell-bg;
    background-color: @text-cell-bg;
    border-radius: 0px;
}
div.text_cell.unrendered,
div.text_cell.unrendered.selected,
div.edit_mode div.text_cell.unrendered {
    font-family: @text-cell-fontfamily;
    line-height: @cc-line-height !important;
    background: @text-cell-bg;
    background-color: @text-cell-bg;
    border-radius: 0px;
}

/********** TEXT & MD PROMPT **********/
div.cell.text_cell .prompt {
    border-right: 0;
    min-width: @prompt-min-width !important;
    width: @prompt-min-width !important;
}
div.cell.text_cell.rendered .prompt {
    font-family: @monofont, monospace;
    font-size: 9.5pt !important;
    font-weight: normal;
    color: @prompt-text !important;
    text-align: right !important;
    min-width: @tc-prompt-width !important;
    width: @tc-prompt-width !important;
    background-color: @text-cell-bg;
    border-right: @tc-prompt-border;
    // border-left: 4px solid @tc-border-selected;
    border-left: 4px solid @text-cell-bg;
}
div.cell.text_cell.unrendered .prompt {
    font-family: @monofont, monospace;
    font-size: 9.5pt !important;
    font-weight: normal;
    color: @prompt-text !important;
    text-align: right !important;
    min-width: @tc-prompt-width !important;
    width: @tc-prompt-width !important;
    border-right: @tc-prompt-border;
    border-left: 4px solid @text-cell-bg;
    background-color: @text-cell-bg;
}
div.cell.text_cell.rendered .prompt {
    border-right: @tc-prompt-border;
}
div.cell.text_cell.rendered.selected .prompt {
    top: 0;
    border-left: 4px solid @tc-border-selected;
    border-right: @tc-prompt-border;
}
div.text_cell.unrendered.selected .prompt,
div.text_cell.rendered.selected .prompt {
    top: 0;
    background: @text-cell-bg;
    border-left: 4px solid @tc-border-edit;
    border-right: @tc-prompt-border;
}


/******** MD PRE, CODE, KEYBIND, SAMP **********/
div.rendered_html code {
    font-family: @monofont, monospace;
    font-size: @monofontsize;
    padding-top: 3px;
    padding-left: 2px;
    color: @cc-input-fg;
    background: @codeblock-bg;
    background-color: @codeblock-bg;
}
pre, code, kbd, samp {
    white-space: pre-wrap;
}
.well code, code {
    font-family: @monofont, monospace;
    font-size: @monofontsize !important;
    line-height: @cc-line-height !important;
    color: @text-cell-fg;
    background: @codeblock-bg;
    background-color: @codeblock-bg;
    border-color: @codeblock-bg;
}
kbd {
    padding: 1px;
    font-size: @monofontsize;
    font-weight: 800;
    color: @cc-input-fg;
    background-color: transparent !important;
    border: 0;
    box-shadow: none;
}
pre {
    display: block;
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: @nb-fontsize-sub;
    line-height: 1.42857143;
    color: @cc-input-fg;
    background-color: @codeblock-bg;
    border: 1px solid @codeblock-border;
    border-radius: 2px;
}


/******** TXT & MARKDOWN HEADERS **********/
div.rendered_html {
    color: @text-cell-fg;
}
.rendered_html * + ul {
    margin-top: .4em;
    margin-bottom: .3em;
}
.rendered_html * + p {
    margin-top: .5em;
    margin-bottom: .5em;
}
div.rendered_html pre {
    font-family: @monofont, monospace;
    font-size: @monofontsize !important;
    line-height: @cc-line-height !important;
    color: @text-cell-fg !important;
    background: @codeblock-bg;
    background-color: @codeblock-bg;
    max-width: 80%;
    border-radius: 0px;
    border-left: 3px solid @codeblock-bg;
    max-width: 80%;
    border-radius: 0px;
    padding-left: 5px;
    margin-left: 6px;
}

div.text_cell_render pre,
div.text_cell_render code {
    font-family: @monofont, monospace;
    font-size: @monofontsize !important;
    line-height: @cc-line-height !important;
    color: @text-cell-fg;
    background: @notebook-bg;
    background-color: @notebook-bg;
    max-width: 80%;
    border-radius: 0px;
    border-left: none;
}
div.text_cell_render pre {
    border-left: 3px solid @prompt-line !important;
    max-width: 80%;
    border-radius: 0px;
    padding-left: 5px;
    margin-left: 6px;
}
div.text_cell_render h1,
div.rendered_html h1,
div.text_cell_render h2,
div.rendered_html h2,
div.text_cell_render h3,
div.rendered_html h3,
div.text_cell_render h4,
div.rendered_html h4,
div.text_cell_render h5,
div.rendered_html h5 {
    font-family: @notebook-fontfamily;
    margin: 0.4em .2em .3em .2em !important

}
.rendered_html h1:first-child,
.rendered_html h2:first-child,
.rendered_html h3:first-child,
.rendered_html h4:first-child,
.rendered_html h5:first-child,
.rendered_html h6:first-child {
    margin-top: 0.2em !important;
    margin-bottom: 0.2em !important;
}
.rendered_html h1,
.text_cell_render h1 {
    color: @header-fg !important;
    font-size: 200%;
    text-align: left;
    font-style: normal;
    font-weight: normal;
}
.rendered_html h2,
.text_cell_render h2 {
    color: @header-fg !important;
    font-size: 170%;
    font-style: normal;
    font-weight: normal;
}
.rendered_html h3,
.text_cell_render h3 {
    color: @header-fg !important;
    font-size: 140%;
    font-style: normal;
    font-weight: normal;
}
.rendered_html h4,
.text_cell_render h4 {
    color: @header-fg !important;
    font-size: 110%;
    font-style: normal;
    font-weight: normal;
}
.rendered_html h5,
.text_cell_render h5 {
    color: @header-fg !important;
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
}
hr {
    margin-top: 8px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid @header-fg;
}
.rendered_html hr {
    color: @header-fg;
    background-color: @header-fg;
    margin-right: 2em;
}


#complete > select > option:hover {
    background: @dropdown-hover;
    background-color: @dropdown-hover;
}
div#_vivaldi-spatnav-focus-indicator._vivaldi-spatnav-focus-indicator {
    position: absolute;
    z-index: 9999999999;
    top: 0px;
    left: 0px;
    box-shadow: none;
    pointer-events: none;
    border-radius: 2px;
}

/**** HOVER HIGHLIGHT CELL INPUT PROMPT ******/

// .cell:active .input_prompt,
// .cell:hover .input_prompt,
// div.cell:hover .input_prompt {
//     background: lighten(@cc-input-bg, 2%) !important;
//     background-color: lighten(@cc-input-bg, 2%) !important;
// }
