custom.css

/*
One Dark for Jupyter Notebook/iPython 4
Author: James Draper
Inspired by and adapted from the following:
https://github.com/powerpak/jupyter-dark-theme
Base16 for iPython Notebook (https://github.com/nsonnad/base16-ipython-notebook)
Base16 Twilight Dark, David Hart (http://hart-dev.com)
CodeMirror template adapted for IPython Notebook by Nikhil Sonnad (https://github.com/nsonnad/base16-ipython-notebook)
CodeMirror template by Jan T. Scott (https://github.com/idleberg/base16-chrome-devtools)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
One Dark Color list
atom-one-dark-cyan : #56B6C2
atom-one-dark-blue : #61AFEF
atom-one-dark-bg-1 : #121417
atom-one-dark-mono-2 : #828997
atom-one-dark-red-1 : #E06C75
atom-one-dark-mono-1 : #ABB2BF
atom-one-dark-silver : #AAAAAA
atom-one-dark-purple : #C678DD
atom-one-dark-orange-2 : #E5C07B
atom-one-dark-bg-hl : #2F343D
atom-one-dark-black : #0F1011
atom-one-dark-gutter : #666D7A
atom-one-dark-fg : #ABB2BF
atom-one-dark-green : #98C379
atom-one-dark-red-2 : #BE5046
atom-one-dark-orange-1 : #D19A66
atom-one-dark-mono-3 : #5C6370
atom-one-dark-accent : #AEB9F5
atom-one-dark-bg : #282C34
atom-one-dark-gray : #3E4451
  CHANGE THE BACKGROUND OF ANY MATPLOTLIB OUTPUT BY ADDING THIS:
  matplotlib.rcParams['figure.facecolor'] = 'white'
*/

/* DEFINE MAIN STYLES */
:root {
    --main-font-family: Consolas, monaco, monospace;
    --main-bg-color: #282C34;

    --atom-one-dark-cyan : #56B6C2;
    --atom-one-dark-blue : #61AFEF;
    --atom-one-dark-bg-1 : #121417;
    --atom-one-dark-mono-2 : #828997;
    --atom-one-dark-red-1 : #E06C75;
    --atom-one-dark-mono-1 : #ABB2BF;
    --atom-one-dark-silver : #AAAAAA;
    --atom-one-dark-purple : #C678DD;
    --atom-one-dark-orange-2 : #E5C07B;
    --atom-one-dark-bg-hl : #2F343D;
    --atom-one-dark-black : #0F1011;
    --atom-one-dark-gutter : #666D7A;
    --atom-one-dark-fg : #ABB2BF;
    --atom-one-dark-green : #98C379;
    --atom-one-dark-red-2 : #BE5046;3§
    --atom-one-dark-orange-1 : #D19A66;
    --atom-one-dark-mono-3 : #5C6370;
    --atom-one-dark-accent : #AEB9F5;
    --atom-one-dark-bg : #282C34;
    --atom-one-dark-gray : #3E4451;
}


.CodeMirror pre, .CodeMirror-dialog, .CodeMirror-dialog .CodeMirror-search-field, .terminal-app .terminal {
    font-family: var(--main-font-family);
    font-size: 9pt;
}

.terminal-app .terminal {
    line-height: 1.3em;
}

div.output pre, div.output code, .rendered_html pre, .rendered_html code, div.completions select, div.container pre {
    font-family: var(--main-font-family);
}

div.output pre, div.output code, .rendered_html pre, .rendered_html p code, div.completions select, div.container pre {
    font-size: 9pt;
}

div.prompt, div.tooltiptext pre {
    font-family: Consolas, monaco, monospace;
    font-size: 8pt;
}

div.input_area {
    border-color: rgba(0, 0, 0, 0.10);
    background: rbga(0, 0, 0, 0.5);
    /* Round couners */
    border-radius: .5em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* GLOBALS */

/* The majority of the text on the intro page is warapped in the <a> tag.*/

@media not print {
    body {
        background-color: #eee;
    }
}

a {
    color: #CC7833;
}

a:hover, a:focus {
    color: #DE6F71;
}


/* Set the color of the h2 heading.*/

h2 {
    color: #c2c1c1;
}


/* Set the text color for th <p> tag. Most of the text on the nbextension page is wrapped with the <p> tag. */

p {
    color: #dccde0;
}

li {
    color: #b9c2dd;
}


/* INTRO PAGE */

body[data-notebook-path] {
    background-color: var(--main-bg-color);
}

body[data-notebook-path] #header, .terminal-app #header {
    display: none !important;
}

.tabbable {
    color: #979797;
}

.nav-tabs {
    border-bottom-color: #444;
}

.nav-tabs>li>a:hover, .nav>li>a:focus {
    background-color: #333;
    border-color: #222 #222 #555 #222;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #979797;
    background-color: #444;
    border-top-color: #444;
    border-right-color: #444;
    border-left-color: #444;
}

.list_container {
    border-color: #444;
}

.list_container>div {
    border-bottom-color: #444;
}

.list_item:hover {
    background-color: #333;
}

.list_header {
    background-color: #444;
}

#notebook_list input[type="checkbox"] {
    opacity: 0.3;
}

#notebook_list input[type="checkbox"]:checked {
    opacity: 1;
}

.item_icon {
    color: #777;
}

.panel {
    border-color: #444;
    background-color: #222;
}

.panel-default>.panel-heading {
    border-color: #444;
}

#site .panel-group .panel .panel-heading {
    background-color: #444;
}

#running .panel-group .panel .panel-body .list_container .list_item {
    border-bottom-color: #444;
}


/* Dropdown menus */

.dropdown-menu {
    background: rgba(50, 50, 50, 0.95);
    color: #b7b7b7;
}

.dropdown-menu>li>a, .dropdown-submenu>a:after, .dropdown-menu>li>a:visited:after {
    color: #b7b7b7;
}

.dropdown-menu .divider {
    background-color: #444;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    color: #fff;
    background-color: #444;
}

.dropdown-menu>li>a:hover:after, .dropdown-menu>li>a:focus:after, .dropdown-menu>li>a:active:after {
    color: #fff;
}


/* TERMINAL INTERFACE */

.terminal-app #site {
    background: #272727;
}

.terminal-app .terminal {
    background: #141414 !important;
}


/* NOTEBOOK AND EDITOR INTERFACE */


/* comment out the following line to unhide the toolbar */


/*
div#maintoolbar { display: none !important; }
*/


/* Header UI styles */

body.notebook_app>#header {
    display: block !important;
}

.notebook_app>#header, .edit_app>#header {
    background-color: #282C34;
    color: #b7b7b7;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.edit_app #menubar .navbar {
    margin-bottom: 0;
}

body>#header .header-bar {
    background: #444;
}

#header .navbar-brand {
    display: none;
}

#header .filename {
    margin-left: 0;
    margin-right: 2em;
}

#header .current_kernel_logo {
    width: 24px;
    height: 24px;
}

span.save_widget span.filename:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.navbar-default {
    background: transparent;
    color: #b7b7b7;
    border-color: #444;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color: #fff;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    color: #fff;
    background-color: #444;
}


/* Notebook Background */

@media not print {
    .notebook_app #notebook {
        background-color: var(--main-bg-color);

    }
    .notebook_app #notebook-container, .edit_app #texteditor-backdrop {
        background-color: var(--main-bg-color);
        border-radius: .35em;
    }
}


/* Invert the notebook editor UI */

.celltoolbar {
    border-color: #444;
    background: #444;
    color: #b7b7b7;
}

.ctb_global_show .ctb_show~div.text_cell_render {
    border-color: #444;
}

.celltoolbar select {
    opacity: 0.5;
}

.modal-dialog .modal-content, .popover, .popover .popover-title {
    background: rgba(50, 50, 50, 0.95);
    color: #b7b7b7;
}

.modal-header, .popover-title {
    border-bottom-color: #444;
}

.modal-footer {
    border-top-color: #444;
}

.modal-dialog .close {
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

.modal-dialog .alert-info {
    background-color: #373E42;
    color: #d9edf7;
}

.popover.bottom>.arrow:after {
    border-bottom-color: #444;
}

.btn:focus, .btn:active:focus {
    outline: 5px auto rgba(102, 175, 233, 0.3);
    outline-offset: -1px;
}

.btn-default {
    background-color: #555;
    border-color: #222;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    color: #aaa;
}

.btn-default:focus, .btn-default:hover {
    background-color: #555;
    border-color: #222;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    color: #bbb;
}

.btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {
    background-color: #474747;
    color: #999;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

.btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled]:focus, .btn-default[disabled]:hover {
    background-color: #555;
    border-color: #222;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    color: #aaa;
}

.btn-default:active:hover, .btn-default:active:focus, .open>.dropdown-toggle.btn-default:hover, .open>.dropdown-toggle.btn-default:focus {
    background-color: #474747;
    color: #999;
    border-color: #222;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    color: #eee;
    background-color: #4481b7;
    border-color: #222;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.btn-primary:focus, .btn-primary:hover {
    background-color: #4481b7;
    color: #fff;
}

.btn-primary:active {
    background-color: #306ea6;
    color: #ccc;
}

.btn-primary:active:hover, .btn-primary:active:focus {
    background-color: #306ea6;
    color: #ccc;
}

.form-control {
    background: #222;
    color: #eee;
    border-color: #777;
}

.form-control:focus {
    border-color: #458ac1;
    border-radius: .5em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.3);
}

.form-control::selection {
    border-radius: .5em;
    background: rgba(221, 240, 255, 0.19);
}

#complete {
    border-color: #444;
    border-radius: .5em;
    background: rgba(50, 50, 50, 0.95);
    color: #b7b7b7;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.completions select {
    background: rgba(50, 50, 50, 0.95);
    color: #b7b7b7;
}


/* Styles for output content */

div#notebook .text_cell_render {
    font-size: 16.25px;
    font-weight: 300;
    line-height: 1.25;
}

.rendered_html li p {
    margin-top: 1em;
}


/* Markdown Heading 1*/

.rendered_html h1 {
    color: rgb(147, 161, 164);
}

div.output_html {
    /*font-family: sans-serif; */
    font-family: Consolas, monaco, monospace;
}


/*Set colors and styles that we only want on the screen, not for print*/

@media not print {
    .notebook_app div.cell.running .input .input_area {
        border-left-color: #82591E;
        -webkit-animation-name: pulseBorder;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease-in-out;
    }
    @-webkit-keyframes pulseBorder {
        from {
            border-left-color: #82591E;
        }
        to {
            border-left-color: #eea236;
        }
    }
    .notebook_app div.input_prompt {
        color: var(--atom-one-dark-green);
    }
    .notebook_app div.output_prompt {
        color: var(--atom-one-dark-red-1);
    }
    .notebook_app div.input_area {
        border: 1px solid #464b50;
    }
    .notebook_app div.output_area pre {
        font-weight: normal;
        color: #979797;
    }
    .notebook_app div.output_subarea {
        font-weight: normal;
        color: #979797;
    }
    .notebook_app div.output_stderr {
        background-color: #cf6a4c;
    }
    .notebook_app div.output_stderr pre {
        color: #eee;
    }
    .notebook_app .rendered_html table, .notebook_app .rendered_html th, .notebook_app .rendered_html tr, .notebook_app .rendered_html td {
        background-color: var(--main-bg-color);
        table-layout: auto !important;
        border: 1px #979797 solid;
        color: #979797;
    }
    .notebook_app div.text_cell_render, .notebook_app div.output_html {
        color: #979797;
        border-radius: .5em;
    }
    .notebook_app table.dataframe tr {
        border: 1px #979797;
        /*border-radius: .5em;*/
    }
    .notebook_app .rendered_html pre, .notebook_app .rendered_html code {
        border: 0;
        background-color: #444;
        color: #b0b0b0;
        padding: 0;
    }
}


/*Terminal text coloring*/

span.ansiblack {
    color: #323537;
}

span.ansiblue {
    color: #afc4db;
}

span.ansigray {
    color: #838184;
}

span.ansigreen {
    color: #8f9d6a;
}

span.ansipurple {
    color: #9b859d;
}

span.ansired {
    color: #cf6a4c;
}

span.ansiyellow {
    color: #c2bc15;
}


/*CODE EDITING*/

.CodeMirror {
    background: #141414;
    color: var(--atom-one-dark-mono-1);
    border-radius: .35em;
    /*box-shadow: inset 10px 10px 16px -4px rgba(0, 0, 0, 0.44);*/
}

div.CodeMirror-selected {
    background: rgba(221, 240, 255, 0.19) !important;
}

#texteditor-backdrop #texteditor-container .CodeMirror-gutter, .CodeMirror-gutters {
    background: #444;
    color: #777;
}

.CodeMirror-linenumber {
    color: #7C7C7C;
    font-size: 10px;
}

.CodeMirror-cursor {
    border-left: 1px solid #A7A7A7 !important;
    margin-top: -2px;
    min-height: 18px;
}

.cm-s-ipython.CodeMirror {
    background-color: var(--main-bg-color);
    /*background: #282C34;*/
    /*background: #2c303c;*/
    /* The color below is all of the text not spoken for by the code below. */
    color: #B5C2D9;
}

.cm-s-ipython div.CodeMirror-selected {
    background: #343d46 !important;
}

.cm-s-ipython .CodeMirror-gutters {
    background: #2b303b;
    border-right: 0px;
}

.cm-s-ipython .CodeMirror-linenumber {
    color: #7C7C7C;
    font-size: 10px;
}

.cm-s-ipython .CodeMirror-cursor {
    border-left: 1px solid #a7adba !important;
}

.cm-s-ipython span.cm-comment {
    color: #7C7C7C;
}

.cm-s-ipython span.cm-atom {
    color: #61afef;
}

.cm-s-ipython span.cm-number {
    color: #e2a271;
}

.cm-s-ipython span.cm-property {
    color: #B5C2D9;
}

.cm-s-ipython span.cm-attribute {
    color: #ea8080;
}

.cm-s-ipython span.cm-keyword {
    color: #cc89e0;
}

.cm-s-ipython span.cm-string {
    color: #94c273;
}

.cm-s-ipython span.cm-meta {
    color: #51b6c3;
}

.cm-s-ipython span.cm-operator {
    color: #5cadf1;
}

.cm-s-ipython span.cm-builtin {
    color: #61afef;
}

.cm-s-ipython span.cm-variable {
    color: #B5C2D9;
}

.cm-s-ipython span.cm-variable-2 {
    color: #ea8080;
}

.cm-s-ipython span.cm-variable-3 {
    color: #51b6c3;
}

.cm-s-ipython span.cm-def {
    color: #e2a271;
    color: var(--atom-one-dark-orange-2);
    /*color: var(--atom-one-dark-blue);*/
}

.cm-s-ipython span.cm-error {
    background: #bf616a;
    color: #a7adba;
}

.cm-s-ipython span.cm-bracket {
    color: #B5C2D9;
    font-weight: bold;
}

.cm-s-ipython span.cm-tag {
    color: #61afef;
}

.cm-s-ipython span.cm-link {
    color: #e2a271;
}

.cm-s-ipython span.cm-storage {
    color: #61afef;
}

.cm-s-ipython span.cm-entity {
    color: #61afef;
}

.cm-s-ipython span.cm-latex {
    color: #8fb36a;
}

.cm-s-ipython .CodeMirror-matchingbracket { color: #b58900 !important; font-weight: bold; }
.cm-s-ipython .CodeMirror-matchingbracket {
    text-decoration: underline;
    -moz-text-decoration-color: #37d6f2;
    text-decoration-color: #37d6f2;
    color: #B5C2D9 !important;
}


/*Markdown editing*/

.CodeMirror.cm-s-default {
    background: #2C2C2C;
    color: #787474;
    border-radius: .35em;
    box-shadow: inset 10px 10px 16px -4px rgba(0, 0, 0, 0.44);
}

.cm-s-default span.cm-bracket {
    color: #c0c5ce;
}

.cm-s-default span.cm-header {
    color: #CF4A4C;
}

.cm-s-default span.cm-variable-2 {
    color: #7587A6;
}

.cm-s-default span.cm-comment {
    color: #7F7A80;
}