sagecell.css

.sagecell_messages div {
    margin-bottom: 12pt;
}

.sagecell_sliderControl {
    max-width: 40em;
    margin-right: 1.0em;
    margin-left: 0.5em;
}

.sagecell_multiSliderContainer {
    margin-left: 1.0em;
    whitespace: nowrap;
}

.sagecell_multiSliderControl {
    display: inline-block;
    margin-right: 0.5em;
    margin-left: 0.5em;
    margin-top: 0.25em;
}

.sagecell_colorSelector {
    display: inline-block;
    width: 2em;
    height: 2em;
    border: 2px solid gray;
    border-radius: 3px;
    padding: 1px;
    cursor: pointer;
    vertical-align: middle;
}

.sagecell .error, .sagecell .stderr {
    color: red;
}

.sagecell .colorpicker {
    z-index: 10;
}

.sagecell .CodeMirror {
    border: 1px solid;
    height: auto;
}

.sagecell .CodeMirror-scroll {
    min-height: 3em;
    max-height: 14em;
}

.sagecell .CodeMirror-fullscreen .CodeMirror-scroll {
    max-height: none;
}

.sagecell .CodeMirror-hints {
    padding-right: 10px;
}

.sagecell .ui-dialog-content {
    font-size: 80%;
}

.sagecell_input {
    overflow: hidden;
    padding-right: 2px;
}

.sagecell button.sagecell_evalButton {
    cursor: default;
}

.sagecell_output {
    padding-right: 2px;
}

.sagecell_output_elements {
    margin-top: 0.5em;
}

.sagecell_permalink {
    padding-right: 5px;
    text-align: right;
    position: relative;
}

.sagecell_permalink_result {
    position: absolute;
    padding-right: 5px;
    text-align: right;
    right: 3px;
    z-index: 100;
    background-color: white;
    border: 1px solid black;
    border-radius: 3px;
    padding: 5px;
}

.sagecell_permalink_result a:not([href]) {
    color: gray;
    text-decoration: none;
    cursor: default;
}

.sagecell_permalink_result img {
    display: inline-block;
    background-color: lightgray;
    width: 200px;
    height: 200px;
}

.sagecell_sessionContainer {
    position: relative;
}

.sagecell_sessionContainer:after {
    display: table;
    content: " ";
    clear: both;
}

.sagecell_sessionOutput {
    position: relative;
    border: 2px solid;
    padding: 5px;
    margin-top: 2px;
    min-height: 16px;
    overflow-x: auto;
}

.sagecell_sessionOutput pre {
    margin: 0px;
}

.sagecell_sessionOutput.sagecell_active {
    border-color: #080;
}

.sagecell_poweredBy {
    float: right;
    padding: 3px 5px 5px 0px;
    text-align: right;
    overflow: visible;
    font-size: 80%;
}

.sagecell_poweredBy img {
    vertical-align: -5px;
    border-style: none;
    text-decoration: none;
}

.sagecell_spinner {
    position: absolute;
    right: 5px;
    top: 5px;
}

.sagecell_sessionFiles {
    width: 80%;
    padding-bottom: 1.0em;
}

.sagecell_interactContainer {
    position: relative;
    padding: 15px 5px 5px 5px;
    border: 2px solid lightgray;
    margin-bottom: 2px;
}

.sagecell_bookmarks {
    cursor: default;
}

.sagecell_interactContainer .sagecell_bookmarks {
    position: absolute;
    right: 3px;
    top: 3px;
}

.sagecell_bookmarks div {
    display: inline-block;
    height: 1.5em;
    vertical-align: bottom;
    overflow-y: hidden;
    font-size: 1.3em;
    font-family: Arial;
    color: #8c8c8c;
    transition: color 0.25s ease-out;
}

.sagecell_bookmarks div:first-child {
    color: transparent;
    visibility: hidden;
}

.sagecell_bookmarks div:last-child {
    margin-left: 10px;
    width: 1.5em;
}

.sagecell_bookmarks div:last-child:before {
    display: inline-block;
    content: "\2605";
}

.sagecell_bookmarks div.sagecell_export {
    visibility: visible;
    transition: color 0.5s 0.5s;
    color: inherit;
    cursor: pointer;
}

.sagecell_export:before {
    content: "\22ef";
}

.sagecell_bookmarks input {
    border: 1px solid black;
    border-radius: 3px;
    vertical-align: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    font-family: monospace;
}

.sagecell_sessionOutput.sagecell_active .sagecell_bookmarks div:last-child:hover {
    color: #ffa500;
    cursor: pointer;
}

.sagecell_bookmarks_list.ui-menu {
    display: inline-block;
    min-width: 15em;
    cursor: default;
    z-index: 99;
}

.sagecell_bookmarks_list.ui-menu li.ui-state-disabled {
    opacity: 1;
    margin: 0px;
}

.sagecell_bookmarks_list > li > a > input,
.sagecell_bookmarks_list > li > a > div:first-child {
    display: inline-block;
    width: 85%;
    border: none;
    border-radius: 3px;
}

.sagecell_bookmarks_list > li > a > div:last-child {
    float: right;
    width: 1.5em;
    text-align: center;
    font-weight: bold;
    color: #777;
    cursor: pointer;
    transition: 0.25s color;
}

.sagecell_bookmarks_list > li:not(:last-child):not(:hover) > a > div:last-child {
     display: none;
}

.sagecell_bookmarks_list > li > a > div:last-child:hover {
    color: darkred;
}

.sagecell_bookmarks_list > li > a > div:last-child:before {
    content: "\2716";
}

.sagecell_bookmarks_list > li:last-child > a > div:hover {
    color: darkblue;
}

.sagecell_bookmarks_list > li:last-child > a > div:before {
    content: "+";
}

.sagecell_interactOutput {
    padding: 10px;
    padding-right: 2em;
    padding-left: 2em;
    overflow-x: auto;
    vertical-align: top;
}

.sagecell_interactValueBox {
    border: 1px solid transparent;
    background-color: transparent;
    vertical-align: baseline;
    font-family: monospace;  /* Required since dynamic input box size is determined by monospaced fonts */
    max-width: 10ex;
}

.sagecell_interactValueBox:hover {
    border-color: lightgray;
}

.sagecell_interactValueBox:focus {
    border-color: gray;
}

.sagecell_interactControlCell {
    display: inline-table;
    vertical-align: top;
    min-width: 200px;
}

.sagecell_interactControlLabel {
    display: table-cell;
    text-align: right !important;
    vertical-align: middle !important;
    padding-right: 0.5ex !important;
    padding-top: 0.6ex !important;
    padding-bottom: 0.6ex !important;
    min-width: 10ex;
    overflow-wrap: break-word;
}

.sagecell_interactControl {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.sagecell_interactContainer .sagecell_interactControl {
    /* only pad if we are setting up the layout.  If we have an inline control
       don't pad, but leave it up to the user */
    padding: 1ex;
}

.sagecell_sliderContainer {
    display: table;
    width: 100%;
    height: 100%;
    max-width: 700px;
    min-width: 200px;
}

.sagecell_sliderContainer > div:first-child {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

.sagecell_sliderContainer > div:first-child + div {
    display: table-cell;
    min-width: 11ex;
}

.sagecell_interactTextbox[size="0"] {
    width: 100%;
    max-width: 40em;
}

.sagecell_dirtyControl {
    box-shadow: 0px 0px 2px 1px #c00;
    transition: box-shadow 1s;
    border-radius: 2px;
}

.sagecell_commands, .sagecell .ui-widget .sagecell_commands {
    width: 100%;
    height: 200px;
    border: 1px solid;
    font-family: monospace;
    font-size: 10pt;
}

.sagecell_editor {
    margin-bottom: 8px;
}

.sagecell_options {
    display: inline-block;
    margin-right: 2px;
    float: right;
    text-align: right;
    font-size: 80%;
}

.sagecell_fullScreen {
    position: absolute;
    right: 1.5em;
    top: 0.5em;
    z-index: 10;
    padding: 2px;
    color: rgb(128,128,128);
}

.sagecell_editor div.ui-accordion-content.ui-helper-reset {
    padding: 1em 0.5em;
    font-size: 90.9%;
}

.sagecell_advancedFrame {
    border-radius: 5px;
    background-color: #ddf;
    border: 1px solid;
    padding: 0.2em;
    display: inline-block;
    width: 300px;
    overflow: hidden;
    margin-left: 3em;
    margin-bottom: 1em;
    vertical-align: top;
}

.sagecell_advancedTitle {
    cursor: default;
}

.sagecell_advancedFields {
    border: 1px solid gray;
    background-color: white;
    padding: 5px;
}

.sagecell_fileList li {
    list-style: none;
    position: relative;
}

.sagecell_fileName {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sagecell_deleteButton {
    position: absolute;
    left: -1.2em;
    cursor: pointer;
    margin-right: 5px;
}

.sagecell_deleteButton:hover {
    color: red;
}

.sagecell_deleteButton:active {
    color: darkred;
}

.sagecell_deleteButton:before {
    content: "\2716";
}

.sagecell table.table_form tr.row-a {
    background-color: #f8f8f8;
}

.sagecell table.table_form tr.row-b {
    background-color: #efefef;
}

.sagecell table.table_form td {
    padding: 5px 15px;
    color: #00a;
}

.sagecell .sagecell-templates .hide {
 display: none;   
}

.sagecell .sagecell-templates .pull-right {
    float: right;
}

.sagecell .sagecell-templates .lighten {
    color: gray;
}

/* These colors are constructed in
 * notebook/static/notebook/less/ansicolors.less
 * but were copied from
 * notebook/static/style/ipython.min.css
 * and processed in Python via
 * replace("{\n  ", "{").replace("\n}", "}").replace("\n.","\n.sagecell .")
 */
.sagecell .ansi-black-fg {color: #3E424D;}
.sagecell .ansi-black-bg {background-color: #3E424D;}
.sagecell .ansi-black-intense-fg {color: #282C36;}
.sagecell .ansi-black-intense-bg {background-color: #282C36;}
.sagecell .ansi-red-fg {color: #E75C58;}
.sagecell .ansi-red-bg {background-color: #E75C58;}
.sagecell .ansi-red-intense-fg {color: #B22B31;}
.sagecell .ansi-red-intense-bg {background-color: #B22B31;}
.sagecell .ansi-green-fg {color: #00A250;}
.sagecell .ansi-green-bg {background-color: #00A250;}
.sagecell .ansi-green-intense-fg {color: #007427;}
.sagecell .ansi-green-intense-bg {background-color: #007427;}
.sagecell .ansi-yellow-fg {color: #DDB62B;}
.sagecell .ansi-yellow-bg {background-color: #DDB62B;}
.sagecell .ansi-yellow-intense-fg {color: #B27D12;}
.sagecell .ansi-yellow-intense-bg {background-color: #B27D12;}
.sagecell .ansi-blue-fg {color: #208FFB;}
.sagecell .ansi-blue-bg {background-color: #208FFB;}
.sagecell .ansi-blue-intense-fg {color: #0065CA;}
.sagecell .ansi-blue-intense-bg {background-color: #0065CA;}
.sagecell .ansi-magenta-fg {color: #D160C4;}
.sagecell .ansi-magenta-bg {background-color: #D160C4;}
.sagecell .ansi-magenta-intense-fg {color: #A03196;}
.sagecell .ansi-magenta-intense-bg {background-color: #A03196;}
.sagecell .ansi-cyan-fg {color: #60C6C8;}
.sagecell .ansi-cyan-bg {background-color: #60C6C8;}
.sagecell .ansi-cyan-intense-fg {color: #258F8F;}
.sagecell .ansi-cyan-intense-bg {background-color: #258F8F;}
.sagecell .ansi-white-fg {color: #C5C1B4;}
.sagecell .ansi-white-bg {background-color: #C5C1B4;}
.sagecell .ansi-white-intense-fg {color: #A1A6B2;}
.sagecell .ansi-white-intense-bg {background-color: #A1A6B2;}
.sagecell .ansi-default-inverse-fg {color: #FFFFFF;}
.sagecell .ansi-default-inverse-bg {background-color: #000000;}
.sagecell .ansi-bold {font-weight: bold;}
.sagecell .ansi-underline {text-decoration: underline;}