Skip to content

Instantly share code, notes, and snippets.

@roboslone
Last active June 9, 2017 01:55
Show Gist options
  • Save roboslone/5209ef485e81e5ce38c7189da43adae1 to your computer and use it in GitHub Desktop.
Save roboslone/5209ef485e81e5ce38c7189da43adae1 to your computer and use it in GitHub Desktop.
Jupyter Notebook styles
body {
background-color: #F3F2EE;
font-family: "Yandex Sans Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.notebook_app {
background-color: #F3F2EE;
}
body > #header #header-container {
padding: 10px;
background: #fff;
border-bottom: 1px solid #cecece;
display: none;
}
#ipython_notebook {
display: none;
}
#notebook_name {
margin-left: 0;
margin-right: 8px;
}
.checkpoint_status {
display: none;
}
.autosave_status {
display: none;
}
#kernel_logo_widget .current_kernel_logo {
display: none !important;
margin-right: 16px;
}
div#site{
height: 100% !important;
background-color: #F3F2EE;
}
.notebook_app > #header {
box-shadow: none;
}
div#notebook {
padding-top: 0;
background-color: #F3F2EE;
}
#notebook-container {
padding: 0;
}
#menubar {
margin: 0;
}
#menubar .navbar {
border: 0;
margin-bottom: 0;
border-bottom: 1px solid #cfcfcf;
padding: 5px;
padding-top: 2px;
padding-left: 0;
padding-right: 5px;
padding-bottom: 0;
}
.navbar-default {
background-color: #fff;
}
#kernel_indicator {
border: none;
margin-right: 14px;
}
#maintoolbar {
padding: 5px;
padding-bottom: 1px;
margin-top: 0;
background: #fff;
border-bottom: 1px solid #cfcfcf;
display: none;
}
#maintoolbar-container {
background: #fff;
}
#maintoolbar-container > select {
display: none;
}
#modal_indicator {
display: none;
}
.navbar-default .navbar-nav > .dropdown > a,
.navbar-default .navbar-nav > .dropdown > a:focus {
background: transparent;
color: #999999;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .dropdown > a:hover {
background: transparent;
color: black;
}
.dropdown-menu {
border: 1px solid #cecece;
border-radius: 0;
box-shadow: none;
}
.dropdown-menu > .disabled {
color: #999999;
}
.dropdown-menu > li > a {
padding: 5px 20px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #ffeba0;
}
.dropdown-menu .divider {
background-color: rgba(0, 0, 0, .1);
}
.notification_widget {
border: 1px solid rgba(0, 0, 0, .1);
background-color: #F3F2EE;
color: #999999;
margin: 3px 5px 3px 5px !important;
border-radius: 2px;
}
.notification_widget:hover {
background-color: #F3F2EE;
color: black;
}
.notification_widget:active:hover {
background-color: #F3F2EE;
color: black;
box-shadow: none;
border: 1px solid rgba(0, 0, 0, .2);
}
.notebook_app .container {
width:100% !important;
background-color: #F3F2EE;
}
.notebook_app > #header {
-webkit-box-shadow: none;
box-shadow: none;
}
#notebook-container {
background-color: #F3F2EE;
box-shadow: none;
}
.prompt {
min-width: 10ex;
max-width: 10ex;
}
div.out_prompt_overlay:hover {
box-shadow: none;
background: rgba(255, 255, 255, 0.6)
}
div.output_subarea {
max-width: 100%;
}
div.input_prompt {
color: #999999;
border-top: 8px solid transparent;
}
div.output_prompt {
color: #1A1A1A;
border-top: 4px solid transparent;
}
div.output_text {
padding: 10px;
}
div.output_stderr {
background: transparent !important;
padding: 10px;
}
div.output_stderr > pre {
color: #999999;
white-space: pre;
}
div.code_cell, div.text_cell > .input {
margin-bottom: 0px;
margin: 0 0 10px 0;
}
div.cell {
margin: 10px 0 10px 0;
padding: 5px 15px 5px 0;
border-radius: 2px;
border: none;
}
div.cell.selected {
background: none;
padding-left: 0;
}
.inner_cell > .input_area {
padding: 0 5px;
border: 1px solid #cccccc;
border-radius: 2px;
overflow: hidden;
transition: border-color .05s linear;
}
div.text_cell > .inner_cell > .input_area {
border-style: dashed;
}
div.text_cell > .inner_cell > .input_area {
background: #F3F2EE;
}
.inner_cell > .input_area:hover {
border: 1px solid #b3b3b3;
border-radius: 2px;
overflow: hidden;
}
.edit_mode div.code_cell.selected > .input > .inner_cell > .input_area, .edit_mode div.text_cell.selected > .inner_cell > .input_area {
border: 2px solid #4A85F2;
border-radius: 2px;
overflow: hidden;
}
.edit_mode div.cell.selected > .input > .inner_cell > .input_area > .CodeMirror, .edit_mode div.cell.selected > .inner_cell > .input_area > .CodeMirror {
padding: 4px;
}
div.cell.selected:before, div.cell.selected.jupyter-soft-selected:before {
background: #4A85F2;
transition: background .05s linear;
width: 5px;
}
.edit_mode div.cell.selected:before {
background: transparent;
transition: background .05s linear;
}
.edit_mode div.cell.selected {
background: none;
padding-left: 0;
border-color: #047d65;
}
div.cell.jupyter-soft-selected {
border: none;
padding-left: 0;
background: #E4EDFE;
}
div.cell.jupyter-soft-selected:before {
background: #AEC8FA;
}
div.input_area {
border-radius: 0;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px 0 1px 1px;
background-color: #fff !important;
}
.cmd-palette .modal-body {
padding: 0;
}
.typeahead-field input, .typeahead-select {
border-radius: 0;
}
.modal-content {
border: 0;
border-radius: 0;
}
ul.typeahead-list {
border: 0;
max-height: none;
}
.typeahead-field input, .typeahead-select {
border: 0;
}
.typeahead-dropdown, .typeahead-list {
border-radius: 0;
margin: 3px 0 0;
padding: 0;
}
.end_space {
background-color: #F3F2EE;
}
.widget-hbox .widget-label {
max-width: 50ex;
}
.widget-hprogress {
width: 50%;
}
.CodeMirror {
padding: 5px;
font-family: PragmataPro,monospace;
font-size: 14px;
}
.CodeMirror .cm-s-elegant {
background-color: #fff;
}
.widget-area {
margin-left: 13px;
}
.rendered_html pre, .rendered_html code {
border: 1px solid #cfcfcf;
background-color: #F3F2EE;
border-radius: 3px;
padding: 5px;
}
.rendered_html code {
border: 0;
}
.rendered_html tr, .rendered_html th, .rendered_html td {
border: none;
}
.rendered_html table {
border: 1px solid #ddd;
background-color: #F3F2EE;
}
.typeahead-button {
display: none !important;
}
.typeahead-group {
display: none;
}
.typeahead-dropdown>li.active>a,
.typeahead-dropdown>li>a:focus,
.typeahead-dropdown>li>a:hover,
.typeahead-list>li.active>a,
.typeahead-list>li>a:focus,
.typeahead-list>li>a:hover {
background-color: #ffeba0;
}
ul.typeahead-list > li > a {
padding: 10px 10px 10px 22px;
}
.typeahead-dropdown, .typeahead-list {
margin: 0;
border-radius: 0 0 3px 3px;
}
.modal-dialog {
margin-top: 0;
}
.typeahead-query > input {
padding: 30px 20px;
font-size: 16px;
font-family: "Yandex Sans Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #999999;
}
.typeahead-result > .empty {
height: 0;
}
.typeahead-list > li {
border: none;
font-family: "Yandex Sans Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.typeahead-dropdown, .typeahead-list {
box-shadow: none;
}
.modal-backdrop {
opacity: .7 !important;
}
.modal-content {
box-shadow: none;
border-top: none;
border-radius: 0 0 3px 3px;
}
.close {
display: none;
}
.btn-sm {
border-radius: 2px;
}
#logout, .btn, .btn-default {
border-color: #999999;
color: #999999;
background: none;
}
.btn:hover, .btn:active, .btn:focus, .btn-default:hover, .btn-default:active, .btn-default:focus, #logout:hover, #logout:active, #logout:focus {
border-color: #999999;
color: #fff;
background: #999999;
outline: none;
}
.btn-danger {
border-color: #FF5A4C;
color: #FF5A4C;
background: none;
}
.btn-danger:hover, .btn-danger:active, .btn-danger:focus {
border-color: #FF5A4C;
color: #fff;
background: #FF5A4C;
outline: none;
}
.btn:active, .btn.active, .btn:focus, .btn.focus {
box-shadow: none;
outline: none;
}
.btn-default:hover,
.btn-default:active,
.btn-default:focus,
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus,
#logout:hover,
#logout:active,
#logout:focus,
#logout:active:hover,
#logout.active:hover,
.open > .dropdown-toggle#logout:hover,
#logout:active:focus,
#logout.active:focus,
.open > .dropdown-toggle#logout:focus,
#logout:active.focus,
#logout.active.focus,
.open > .dropdown-toggle#logout.focus {
border-color: #999999;
color: #fff;
background: #999999;
outline: none;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus,
.notification_widget.danger:hover,
.notification_widget.danger:active,
.notification_widget.danger:focus,
.notification_widget.danger:active:hover,
.notification_widget.danger.active:hover,
.open > .dropdown-toggle.notification_widget.danger:hover,
.notification_widget.danger:active:focus,
.notification_widget.danger.active:focus,
.open > .dropdown-toggle.notification_widget.danger:focus,
.notification_widget.danger:active.focus,
.notification_widget.danger.active.focus,
.open > .dropdown-toggle.notification_widget.danger.focus {
border-color: #FF5A4C;
color: #fff;
background: #FF5A4C;
outline: none;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus,
.notification_widget.warning:hover,
.notification_widget.warning:active,
.notification_widget.warning:focus,
.notification_widget.warning:active:hover,
.notification_widget.warning.active:hover,
.open > .dropdown-toggle.notification_widget.warning:hover,
.notification_widget.warning:active:focus,
.notification_widget.warning.active:focus,
.open > .dropdown-toggle.notification_widget.warning:focus,
.notification_widget.warning:active.focus,
.notification_widget.warning.active.focus,
.open > .dropdown-toggle.notification_widget.warning.focus {
border-color: #FFBF5B;
color: #fff;
background: #FFBF5B;
outline: none;
}
.btn-info:hover,
.btn-info:active,
.btn-info:focus,
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus,
.notification_widget.info:hover,
.notification_widget.info:active,
.notification_widget.info:focus,
.notification_widget.info:active:hover,
.notification_widget.info.active:hover,
.open > .dropdown-toggle.notification_widget.info:hover,
.notification_widget.info:active:focus,
.notification_widget.info.active:focus,
.open > .dropdown-toggle.notification_widget.info:focus,
.notification_widget.info:active.focus,
.notification_widget.info.active.focus,
.open > .dropdown-toggle.notification_widget.info.focus {
border-color: #78A4F6;
color: #fff;
background: #78A4F6;
outline: none;
}
@roboslone
Copy link
Author

1

2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment