IPython/frontend/html/notebook/static/css/notebook.css

/**
 * Primary styles
 *
 * Author: IPython Development Team
 */


body {
    background-color: white;
    /* This makes sure that the body covers the entire window and needs to
       be in a different element than the display: box in wrapper below */
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
}

span#save_widget {
    padding: 5px;
    margin: 0px 0px 0px 300px;
    display:inline-block;
}

span#notebook_name {
    height: 1em;
    line-height: 1em;
    padding: 3px;
    border: none;
    font-size: 146.5%;
}

#menubar {
    /* Initially hidden to prevent FLOUC */
    display: none;
}

.ui-menubar-item .ui-button .ui-button-text {
    padding: 0.4em 1.0em;
    font-size: 100%;
}

.ui-menu {
  -moz-box-shadow:    0px 6px 10px -1px #adadad;
  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
  box-shadow:         0px 6px 10px -1px #adadad;
}

.ui-menu .ui-menu-item a {
    padding: 2px 1.6em;
}

.ui-menu hr {
    margin: 0.3em 0;
}

#toolbar {
    /* Initially hidden to prevent FLOUC */
    display: none;
    padding: 3px 15px;
}

#cell_type {
    font-size: 85%;
}

span#quick_help_area {
    position: static;
    padding: 5px 0px;
    margin: 0px 0px 0px 0px;
}

span#kernel_status {
    position: absolute;
    padding: 8px 5px 5px 5px;
    right: 10px;
    font-weight: bold;
}


.status_idle {
    color: gray;
    visibility: hidden;
}

.status_busy {
    color: red;
}

.status_restarting {
    color: black;
}

#kernel_persist {
    float: right;
}

.help_string {
    float: right;
    width: 170px;
    padding: 0px 5px;
    text-align: left;
    font-size: 85%;
}

.help_string_label {
    float: right;
    font-size: 85%;
}

div#notebook_panel {
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

div#notebook {
    overflow-y: scroll;
    overflow-x: auto;
    width: 100%;
    /* This spaces the cell away from the edge of the notebook area */
    padding: 5px 5px 15px 5px;
    margin: 0px
    background-color: white;
}

div#pager_splitter {
    height: 8px;
}

div#pager {
    padding: 15px;
    overflow: auto;
    display: none;
}

div.cell {
    width: 100%;
    padding: 5px 5px 5px 0px;
    /* This acts as a spacer between cells, that is outside the border */
    margin: 2px 0px 2px 0px;
}

div.code_cell {
    background-color: white;
}
/* any special styling for code cells that are currently running goes here */
div.code_cell.running {
}

div.prompt {
    /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
    width: 11ex;
    /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
    padding: 0.4em;
    margin: 0px;
    font-family: monospace;
    text-align:right;
}

div.input {
    page-break-inside: avoid;
}

/* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
    color: black;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f7f7f7;
}

div.input_prompt {
    color: navy;
    border-top: 1px solid transparent;
}

div.output {
    /* This is a spacer between the input and output of each cell */
    margin-top: 5px;
}

div.output_prompt {
    color: darkred;
}

/* This class is the outer container of all output sections. */
div.output_area {
    padding: 0px;
    page-break-inside: avoid;
}

/* This class is for the output subarea inside the output_area and after
   the prompt div. */
div.output_subarea {
    padding: 0.4em 6.1em 0.4em 0.4em;
}

/* The rest of the output_* classes are for special styling of the different
   output types */

/* all text output has this class: */
div.output_text {
    text-align: left;
    color: black;
    font-family: monospace;
}

/* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
div.output_stream {
    padding-top: 0.0em;
    padding-bottom: 0.0em;
}
div.output_stdout {
}
div.output_stderr {
    background: #fdd; /* very light red background for stderr */
}

div.output_latex {
    text-align: left;
    color: black;
}

div.output_html {
}

div.output_png {
}

div.output_jpeg {
}

div.text_cell {
    background-color: white;
    padding: 5px 5px 5px 5px;
}

div.text_cell_input {
    color: black;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f7f7f7;
}

div.text_cell_render {
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    outline: none;
    resize: none;
    width:  inherit;
    border-style: none;
    padding: 5px;
    color: black;
}

.CodeMirror {
    line-height: 1.231;  /* Changed from 1em to our global default */
}

.CodeMirror-scroll {
    height: auto;     /* Changed to auto to autogrow */
    /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
    /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
    overflow-y: hidden;
    overflow-x: auto; /* Changed from auto to remove scrollbar */
}

/* CSS font colors for translated ANSI colors. */


.ansiblack {color: black;}
.ansired {color: darkred;}
.ansigreen {color: darkgreen;}
.ansiyellow {color: brown;}
.ansiblue {color: darkblue;}
.ansipurple {color: darkviolet;}
.ansicyan {color: steelblue;}
.ansigrey {color: grey;}
.ansibold {font-weight: bold;}

.completions , .tooltip {
    position: absolute;
    z-index: 10;
    overflow: auto;
    border: 1px solid black;
}

.completions select {
    background: white;
    outline: none;
    border: none;
    padding: 0px;
    margin: 0px;
    font-family: monospace;
}

@-moz-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

/*"close" "expand" and "Open in pager button" of
/* the tooltip*/
.tooltip a {
    float:right;
}

/*properties of tooltip after "expand"*/
.bigtooltip {
    height:30%;
}

/*properties of tooltip before "expand"*/
.smalltooltip {
    text-overflow: ellipsis;
    overflow: hidden;
    height:15%;
}

.tooltip {
    /*transition when "expand"ing tooltip */
    -webkit-transition-property: height;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height;
    -moz-transition-duration: 1s;
    transition-property: height;
    transition-duration: 1s;
    max-width:700px;
    border-radius: 0px 10px 10px 10px;
    box-shadow: 3px 3px 5px #999;
    /*fade-in animation when inserted*/
    -webkit-animation: fadeIn 200ms;
    -moz-animation: fadeIn 200ms;
    animation: fadeIn 200ms;
    vertical-align: middle;
    background: #FDFDD8;
    outline: none;
    padding: 3px;
    margin: 0px;
    font-family: monospace;
    min-height:50px;
}

/*fixed part of the completion*/
.completions p b {
    font-weight:bold;
}

.completions p {
    background: #DDF;
    /*outline: none;
    padding: 0px;*/
    border-bottom: black solid 1px;
    padding: 1px;
    font-family: monospace;
}

pre.dialog {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0.4em;
    padding-left: 2em;
}

p.dialog {
    padding : 0.2em;
}

.shortcut_key {
    display: inline-block;
    width: 15ex;
    text-align: right;
    font-family: monospace;
}

.shortcut_descr {
}

/* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
   to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
 */
pre, code, kbd, samp { white-space: pre-wrap; }