Skip to content
This repository was archived by the owner on Sep 3, 2022. It is now read-only.

Dark theme fixes #1133

Merged
merged 2 commits into from
Jan 20, 2017
Merged

Dark theme fixes #1133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd6d9ba
pop toolbar upward if there's not enough space down
Jan 15, 2017
7d9cd4d
apply monokai colors for dark theme, skin scrollbars
Jan 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 125 additions & 32 deletions sources/web/datalab/static/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,17 @@ span.autosave_status {
color: #ddd;
}
a {
color: #ddd;
color: #ffe883;
}
a:visited {
color: #ddd;
color: #ffe883;
}
a:hover {
color: #fff;
}
a.item_link {
color: #ddd;
}
input {
background-color: #333;
}
Expand All @@ -90,6 +93,10 @@ input {
.dropdown-menu li a {
color: #ddd;
}
.dropdown-menu li a:hover {
color: #ddd;
background-color: #444;
}
#updateMessageArea a {
color: #333;
}
Expand All @@ -101,26 +108,31 @@ input {
div.text_cell_render {
color: #ddd;
}
.rendered_html pre, .rendered_html code, .rendered_html {
background-color: none;
.notebook_app .rendered_html table, .notebook_app .rendered_html th,
.notebook_app .rendered_html tr, .notebook_app .rendered_html td,
.notebook_app .rendered_html code, .notebook_app .rendered_html pre {
background-color: #444;
color: #ddd;
}
.notebook_app .rendered_html .headerrow {
background-color: #333;
}
div.cell.selected {
background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
border: solid 1px #555;
border: solid 1px #333 !important;
}
div.code_cell.session.completed div.input {
border-left: solid 4px #559ad7;
}
div.code_cell div.input {
background-color: #333;
border-left: solid 4px #555;
border-left: solid 4px #666;
}
div.output, div.output_area pre {
div.output, div.output_area pre, .notebook_app .rendered_html {
color: #ddd;
}
div.output {
background-color: #555;
background-color: #444;
}
div.output_stderr {
background-color: #a94442;
Expand All @@ -140,29 +152,11 @@ input.raw_input::-moz-selection {
background: #333;
}
.CodeMirror-selected {
background-color: #555 !important;
}
.CodeMirror-gutters {
color: #ddd;
background: #333;
background-color: #444 !important;
}
.CodeMirror-cursor {
border-left-color: #eee;
}
.cm-keyword {
color: #aaf !important;
}
.cm-number, .cm-string, .cm-string2 {
color: lightgreen !important;
}
.cm-def, .cm-variable, .cm-variable-2, .cm-variable-3, .cm-property,
.cm-qualifier, .cm-operator, .cm-meta, .cm-builtin,
.cm-tag, .cm-attribute, .cm-header, .cm-hr, .cm-atom {
color: #559edd !important;
}
.cm-link, .cm-url {
color: #559ad7 !important;
}
code {
background-color: #666;
}
Expand All @@ -178,9 +172,6 @@ code {
.ansiyellow {
color: #ff0;
}
.cm-magic, .ansired {
color: #559edd;
}
.item_icon {
color: #adadad;
}
Expand Down Expand Up @@ -208,6 +199,94 @@ table.bqsv th, table.bqsv td {
color: #ddd;
}

/* Monokai theme for code cells */
.cm-s-ipython.CodeMirror {
background: #333;
color: #f8f8f2;
}
.cm-s-ipython div.CodeMirror-selected {
background: #49483E;
}
.cm-s-ipython .CodeMirror-line::selection, .cm-s-ipython .CodeMirror-line > span::selection, .cm-s-ipython .CodeMirror-line > span > span::selection {
background: rgba(73, 72, 62, .99);
}
.cm-s-ipython .CodeMirror-line::-moz-selection, .cm-s-ipython .CodeMirror-line > span::-moz-selection, .cm-s-ipython .CodeMirror-line > span > span::-moz-selection {
background: rgba(73, 72, 62, .99);
}
.cm-s-ipython .CodeMirror-gutters {
background: #272822;
border-right: 1px solid #666;
color: #444;
}
.cm-s-ipython .CodeMirror-guttermarker {
color: white;
}
.cm-s-ipython .CodeMirror-guttermarker-subtle {
color: #d0d0d0;
}
.cm-s-ipython .CodeMirror-linenumber {
color: #888;
}
.cm-s-ipython .CodeMirror-cursor {
border-left: 1px solid #f8f8f0;
}
.cm-s-ipython span.cm-comment {
color: #75715e;
}
.cm-s-ipython span.cm-atom {
color: #ae81ff;
}
.cm-s-ipython span.cm-number {
color: #ae81ff;
}
.cm-s-ipython span.cm-property, .cm-s-ipython span.cm-attribute {
color: #a6e22e;
}
.cm-s-ipython span.cm-keyword {
color: #f92672;
}
.cm-s-ipython span.cm-string {
color: #e6db74;
}
.cm-s-ipython span.cm-operator {
color: #ae81ff;
}
.cm-s-ipython span.cm-variable {
color: #f8f8f2;
}
.cm-s-ipython span.cm-variable-2 {
color: #9effff;
}
.cm-s-ipython span.cm-variable-3 {
color: #66d9ef;
}
.cm-s-ipython span.cm-def {
color: #fd971f;
}
.cm-s-ipython span.cm-bracket {
color: #f8f8f2;
}
.cm-s-ipython span.cm-tag {
color: #f92672;
}
.cm-s-ipython span.cm-header {
color: #ae81ff;
}
.cm-s-ipython span.cm-link {
color: #ae81ff;
}
.cm-s-ipython span.cm-error {
color: #f8f8f0;
}
.cm-s-ipython .CodeMirror-activeline-background {
background: #373831;
}

.cm-s-ipython .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}

/* Modals */
.modal-content {
background-color: #444;
Expand All @@ -217,10 +296,10 @@ table.bqsv th, table.bqsv td {
color: #ddd;
}
.modal-header {
border-bottom: 1px solid #555;
border-bottom: 1px solid #444;
}
.modal-footer {
border-top: 1px solid #555;
border-top: 1px solid #444;
}
.close {
color: inherit;
Expand All @@ -238,3 +317,17 @@ svg>rect {
svg text {
fill: #ddd;
}

/* Scrollbars */
::-webkit-scrollbar {
width: 12px;
background-color: #555;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #333;
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #222;
}
7 changes: 0 additions & 7 deletions sources/web/datalab/static/datalab.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,7 +452,6 @@ div.cellPlaceholder {

/* CodeMirror Customization */
pre, code, .CodeMirror, .CodeMirror pre, .CodeMirror-linenumber {
font-family: 'Lucida Console', 'Source Code Pro', monospace !important;
font-size: 15px !important;
}
.CodeMirror pre, .CodeMirror-linenumber {
Expand All @@ -461,15 +460,9 @@ pre, code, .CodeMirror, .CodeMirror pre, .CodeMirror-linenumber {
.CodeMirror-cursor {
border-left: 2px solid #222;
}
.CodeMirror-gutters {
border-right: 1px solid #eee;
}
.CodeMirror-linenumber {
visibility: hidden;
}
div.selected .CodeMirror-gutters {
border-right: 1px solid #ddd;
}
div.selected .CodeMirror-linenumber, div#texteditor-container .CodeMirror-linenumber {
visibility: visible;
}
Expand Down
27 changes: 14 additions & 13 deletions sources/web/datalab/static/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,20 +61,21 @@ div.code_cell div.input {
.CodeMirror-selected {
background-color: #addfff !important;
}
.cm-keyword {
color: #00f !important;
}
.cm-number, .cm-string, .cm-string2 {
color: #000080 !important;
code {
background-color: #eee;
}
.cm-def, .cm-variable, .cm-variable-2, .cm-variable-3, .cm-property,
.cm-qualifier, .cm-operator, .cm-meta, .cm-builtin,
.cm-tag, .cm-attribute, .cm-header, .cm-hr, .cm-atom {
color: #000 !important;

/* Scrollbars */
::-webkit-scrollbar {
width: 12px;
background-color: #eee;
}
.cm-link, .cm-url {
color: #337ab7 !important;
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #ccc;
}
code {
background-color: #eee;
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bbb;
}