├── README.md ├── custom.css ├── custom.js ├── custom.scss └── style.jpg /README.md: -------------------------------------------------------------------------------- 1 | # Custom Jupyter Notebook Styles 2 | 3 | I made some custom styles for my jupyter notebooks. 4 | 5 | ### Usage 6 | 7 | Simply link this directory into the `static/custom/` jupyter directory. 8 | 9 | ```sh 10 | ln -s . /usr/local/lib/python2.7/site-packages/notebook/static/custom/ 11 | ``` 12 | 13 | Or just copy the [`custom.css`](custom.css) there. 14 | 15 | ### Look 16 | 17 | This is how it looks: 18 | 19 | ![Example](style.jpg) -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system "Helvetica Neue"; } 3 | 4 | .notebook_app > #header { 5 | -webkit-box-shadow: none; 6 | box-shadow: none; 7 | border-bottom: 1px solid #AAA; } 8 | 9 | .container { 10 | width: 100%; 11 | border: none; 12 | margin: 0; } 13 | 14 | body > #header { 15 | background-color: #e3e3e3; 16 | border-bottom: 0.5px solid #777777; 17 | padding: 0 20px; 18 | position: relative; } 19 | body > #header #header-container { 20 | display: inline-block; 21 | position: fixed; 22 | padding: 0; 23 | left: 428px; 24 | top: 4px; 25 | z-index: 1; 26 | background: none; } 27 | body > #header #header-container .save_widget { 28 | border-left: 1px solid #777777; } 29 | body > #header #header-container .filename { 30 | padding: 0; } 31 | body > #header #header-container .navbar-brand, body > #header #header-container #kernel_logo_widget, body > #header #header-container .checkpoint_status { 32 | display: none; } 33 | @media (min-width: 1000px) { 34 | body > #header { 35 | padding: 0 120px; } 36 | body > #header #header-container { 37 | left: 528px; } } 38 | @media (min-width: 1250px) { 39 | body > #header { 40 | padding: 0 370px 0 270px; } 41 | body > #header #header-container { 42 | left: 678px; } } 43 | @media (min-width: 1500px) { 44 | body > #header { 45 | padding: 0 370px; } 46 | body > #header #header-container { 47 | left: 778px; } } 48 | body > #header #maintoolbar { 49 | margin-bottom: 0px; } 50 | body > #header #maintoolbar .toolbar select { 51 | -webkit-appearance: none; 52 | padding: 2px 8px; 53 | font-size: 13px; 54 | color: #333; 55 | background-color: #fff; 56 | border-color: #ccc; } 57 | body > #header #maintoolbar .toolbar select:hover { 58 | color: #333; 59 | background-color: #e6e6e6; 60 | border-color: #adadad; } 61 | 62 | .navbar-nav > li > a, .kernel_indicator_name, #header-container .filename, span.autosave_status { 63 | color: #777777; 64 | cursor: pointer; 65 | font-size: 13px; 66 | color: #777; } 67 | .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .kernel_indicator_name:hover, .kernel_indicator_name:focus, #header-container .filename:hover, #header-container .filename:focus, span.autosave_status:hover, span.autosave_status:focus { 68 | color: #333; } 69 | 70 | .navbar-default { 71 | padding-top: 4px; 72 | margin: -1px; } 73 | 74 | .navbar { 75 | background-color: #e3e3e3; } 76 | 77 | .navbar-inner { 78 | margin: 4px 0 8px 10px; } 79 | 80 | .notebook_app { 81 | background-color: white; } 82 | 83 | #notebook-container { 84 | box-shadow: none; 85 | width: 100%; 86 | padding-right: 60px; 87 | max-width: 1000px; 88 | margin: 0 auto; } 89 | 90 | .edit_mode div.cell.selected, div.cell.selected { 91 | border-color: white; 92 | border-left: 3px solid #e0e0e0; 93 | margin-left: -3px; 94 | background: none; } 95 | 96 | .edit_mode div.cell.selected { 97 | border-left-color: #619cff; } 98 | 99 | div.input_area { 100 | border: none; 101 | border-radius: 4px 4px 0 0; 102 | background: #f7f7f7; 103 | padding: 5px; } 104 | 105 | div.output_subarea { 106 | border: 4px solid #f7f7f7; 107 | border-radius: 0 0 4px 4px; 108 | padding: 8px; 109 | max-width: none; 110 | margin-bottom: -4px; } 111 | 112 | div.output_scroll { 113 | -webkit-box-shadow: none; 114 | box-shadow: none; 115 | border-bottom: 12px double #f7f7f7; } 116 | 117 | div.out_prompt_overlay { 118 | border-bottom: 12px solid white; } 119 | 120 | .prompt, div.input_prompt, div.output_prompt { 121 | padding: 5px; 122 | color: #e0e0e0; 123 | font-family: "Operator Mono"; 124 | font-weight: 300; } 125 | 126 | div.output_prompt { 127 | color: white; } 128 | 129 | .CodeMirror-linenumber { 130 | color: #CFCFCF; } 131 | 132 | .CodeMirror pre, pre, code, .CodeMirror-linenumber { 133 | font-family: "Operator Mono"; 134 | font-weight: 300; } 135 | 136 | .CodeMirror span.cm-comment, .cm-s-ipython span.cm-comment { 137 | color: #a0a0a0; 138 | font-style: italic; } 139 | .CodeMirror span.cm-keyword, .CodeMirror span.cm-operator, .CodeMirror span.cm-variable-2, .cm-s-ipython span.cm-keyword, .cm-s-ipython span.cm-operator, .cm-s-ipython span.cm-variable-2 { 140 | color: #e58700; 141 | font-weight: 500; } 142 | .CodeMirror span.cm-number, .CodeMirror span.cm-atom, .cm-s-ipython span.cm-number, .cm-s-ipython span.cm-atom { 143 | color: #b983ff; } 144 | .CodeMirror span.cm-string, .cm-s-ipython span.cm-string { 145 | color: #a3a500; } 146 | .CodeMirror span.cm-string-2, .cm-s-ipython span.cm-string-2 { 147 | color: #c99800; } 148 | .CodeMirror span.cm-arg-is, .cm-s-ipython span.cm-arg-is { 149 | color: #619cff; 150 | font-weight: 500; } 151 | .CodeMirror span.cm-def, .cm-s-ipython span.cm-def { 152 | color: #619cff; 153 | font-style: italic; 154 | text-decoration: underline; } 155 | .CodeMirror span.cm-variable, .CodeMirror span.cm-variable-3, .CodeMirror span.cm-bracket, .cm-s-ipython span.cm-variable, .cm-s-ipython span.cm-variable-3, .cm-s-ipython span.cm-bracket { 156 | color: black; } 157 | .CodeMirror span.cm-meta, .cm-s-ipython span.cm-meta { 158 | color: yellow; } 159 | .CodeMirror span.cm-qualifier, .cm-s-ipython span.cm-qualifier { 160 | color: grey; } 161 | .CodeMirror span.cm-builtin, .cm-s-ipython span.cm-builtin { 162 | color: #00ba38; } 163 | .CodeMirror span.cm-tag, .cm-s-ipython span.cm-tag { 164 | color: #3F7F7F; } 165 | .CodeMirror span.cm-attribute, .cm-s-ipython span.cm-attribute { 166 | color: #7F007F; } 167 | .CodeMirror span.cm-error, .cm-s-ipython span.cm-error { 168 | color: #f8766d; 169 | font-weight: 500; } 170 | 171 | .CodeMirror-cursor { 172 | border-left: 2.5px solid #619cff; 173 | height: 18px !important; } 174 | 175 | .selected .CodeMirror .CodeMirror-activeline-background { 176 | background: #e8f2ff; } 177 | 178 | .selected div.CodeMirror span.CodeMirror-matchingbracket { 179 | outline: none; 180 | border-bottom: 2px solid #619cff; 181 | background: #619cff; 182 | color: white; } 183 | 184 | div.CodeMirror span.CodeMirror-matchingbracket { 185 | color: inherit; } 186 | 187 | .cm-s-default .cm-header, .cm-s-default .cm-quote, .cm-s-default .cm-variable-2 { 188 | color: black; } 189 | 190 | .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 { 191 | color: black; 192 | font-size: inherit; 193 | font-weight: 500; 194 | font-style: normal; } 195 | 196 | .cm-strong { 197 | font-weight: 500; } 198 | 199 | .rendered_html { 200 | font-family: "Operator Mono"; 201 | font-weight: 300; } 202 | .rendered_html.text_cell_render p, .rendered_html.text_cell_render h1, .rendered_html.text_cell_render h2, .rendered_html.text_cell_render h3, .rendered_html.text_cell_render h4, .rendered_html.text_cell_render h5, .rendered_html.text_cell_render h6, .rendered_html.text_cell_render ul, .rendered_html.text_cell_render ol { 203 | font-family: "Gotham Narrow"; 204 | font-size: 16px; 205 | font-weight: 300; 206 | font-style: normal; 207 | line-height: 24px; 208 | margin-bottom: 16px; 209 | margin-top: 0; } 210 | .rendered_html.text_cell_render p ul, .rendered_html.text_cell_render p ol, .rendered_html.text_cell_render h1 ul, .rendered_html.text_cell_render h1 ol, .rendered_html.text_cell_render h2 ul, .rendered_html.text_cell_render h2 ol, .rendered_html.text_cell_render h3 ul, .rendered_html.text_cell_render h3 ol, .rendered_html.text_cell_render h4 ul, .rendered_html.text_cell_render h4 ol, .rendered_html.text_cell_render h5 ul, .rendered_html.text_cell_render h5 ol, .rendered_html.text_cell_render h6 ul, .rendered_html.text_cell_render h6 ol, .rendered_html.text_cell_render ul ul, .rendered_html.text_cell_render ul ol, .rendered_html.text_cell_render ol ul, .rendered_html.text_cell_render ol ol { 211 | margin-bottom: 0; } 212 | .rendered_html.text_cell_render h1 { 213 | font-size: 4em; 214 | font-weight: 900; 215 | line-height: 48px; } 216 | .rendered_html.text_cell_render h2 { 217 | font-size: 2.5em; 218 | font-weight: 700; 219 | line-height: 48px; } 220 | .rendered_html.text_cell_render h3 { 221 | font-size: 1.5em; 222 | font-weight: 700; } 223 | .rendered_html.text_cell_render h4 { 224 | font-size: 0.9em; 225 | font-weight: 700; 226 | text-transform: uppercase; } 227 | .rendered_html.text_cell_render h5, .rendered_html.text_cell_render h6, .rendered_html.text_cell_render strong { 228 | font-weight: 700; } 229 | .rendered_html.text_cell_render h5 code, .rendered_html.text_cell_render h6 code, .rendered_html.text_cell_render strong code { 230 | font-weight: 700; } 231 | .rendered_html.text_cell_render hr { 232 | border-bottom: 1px solid black; } 233 | .rendered_html.text_cell_render code { 234 | font-weight: 200; 235 | font-size: 95; } 236 | .rendered_html table, .rendered_html table tr, .rendered_html table th, .rendered_html table td { 237 | border: none; 238 | padding: 1px 4px; } 239 | .rendered_html table tbody tr:nth-child(even) { 240 | background: #f7f7f7; } 241 | .rendered_html table th { 242 | font-weight: 500; } 243 | .rendered_html table td { 244 | border-right: 1px solid #f7f7f7; 245 | border-bottom: 1px solid #f7f7f7; 246 | text-align: right; } 247 | .rendered_html table thead tr th { 248 | border-bottom: 1px solid black; 249 | text-align: center; } 250 | .rendered_html table thead tr th:nth-child(1) { 251 | border-right: 1px solid black; } 252 | .rendered_html table tbody tr th { 253 | border-right: 1px solid black; 254 | text-align: right; } 255 | .rendered_html table tr { 256 | margin: 0em 2em; } 257 | 258 | a { 259 | color: #619cff; } 260 | a:hover { 261 | color: black; } 262 | -------------------------------------------------------------------------------- /custom.js: -------------------------------------------------------------------------------- 1 | $([IPython.events]).on("app_initialized.NotebookApp", function () { 2 | // $('div#header').hide(); 3 | // $('div#maintoolbar').hide(); 4 | }); 5 | 6 | // $('.prompt').html(function() { 7 | // var text = $(this).text(); 8 | // text = text.split('[')[0]; 9 | // return text; 10 | // }); 11 | 12 | // leave at least 2 line with only a star on it below, or doc generation fails 13 | /** 14 | * 15 | * 16 | * Placeholder for custom user javascript 17 | * mainly to be overridden in profile/static/custom/custom.js 18 | * This will always be an empty file in IPython 19 | * 20 | * User could add any javascript in the `profile/static/custom/custom.js` file. 21 | * It will be executed by the ipython notebook at load time. 22 | * 23 | * Same thing with `profile/static/custom/custom.css` to inject custom css into the notebook. 24 | * 25 | * 26 | * The object available at load time depend on the version of IPython in use. 27 | * there is no guaranties of API stability. 28 | * 29 | * The example below explain the principle, and might not be valid. 30 | * 31 | * Instances are created after the loading of this file and might need to be accessed using events: 32 | * define([ 33 | * 'base/js/namespace', 34 | * 'base/js/events' 35 | * ], function(IPython, events) { 36 | * events.on("app_initialized.NotebookApp", function () { 37 | * IPython.keyboard_manager.... 38 | * }); 39 | * }); 40 | * 41 | * __Example 1:__ 42 | * 43 | * Create a custom button in toolbar that execute `%qtconsole` in kernel 44 | * and hence open a qtconsole attached to the same kernel as the current notebook 45 | * 46 | * define([ 47 | * 'base/js/namespace', 48 | * 'base/js/events' 49 | * ], function(IPython, events) { 50 | * events.on('app_initialized.NotebookApp', function(){ 51 | * IPython.toolbar.add_buttons_group([ 52 | * { 53 | * 'label' : 'run qtconsole', 54 | * 'icon' : 'icon-terminal', // select your icon from http://fortawesome.github.io/Font-Awesome/icons 55 | * 'callback': function () { 56 | * IPython.notebook.kernel.execute('%qtconsole') 57 | * } 58 | * } 59 | * // add more button here if needed. 60 | * ]); 61 | * }); 62 | * }); 63 | * 64 | * __Example 2:__ 65 | * 66 | * At the completion of the dashboard loading, load an unofficial javascript extension 67 | * that is installed in profile/static/custom/ 68 | * 69 | * define([ 70 | * 'base/js/events' 71 | * ], function(events) { 72 | * events.on('app_initialized.DashboardApp', function(){ 73 | * require(['custom/unofficial_extension.js']) 74 | * }); 75 | * }); 76 | * 77 | * __Example 3:__ 78 | * 79 | * Use `jQuery.getScript(url [, success(script, textStatus, jqXHR)] );` 80 | * to load custom script into the notebook. 81 | * 82 | * // to load the metadata ui extension example. 83 | * $.getScript('/static/notebook/js/celltoolbarpresets/example.js'); 84 | * // or 85 | * // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert 86 | * $.getScript('/static/notebook/js/celltoolbarpresets/slideshow.js'); 87 | * 88 | * 89 | * @module IPython 90 | * @namespace IPython 91 | * @class customjs 92 | * @static 93 | */ 94 | -------------------------------------------------------------------------------- /custom.scss: -------------------------------------------------------------------------------- 1 | $background-gray: #F7F7F7; 2 | $light-gray: #E0E0E0; 3 | $menu-color: #E3E3E3; 4 | $menu-border-color: #777; 5 | 6 | 7 | $gray: #A0A0A0; 8 | $red: #F8766D; 9 | $orange: #E58700; 10 | $brown: #C99800; 11 | $olive: #A3A500; 12 | $forest: #6BB100; 13 | $green: #00BA38; 14 | $emerald: #00BF7D; 15 | $alge: #00C0AF; 16 | $sea: #00BCD8; 17 | $cyan: #02AFF7; 18 | $blue: #619CFF; 19 | $purple: #B983FF; 20 | $magenta: E76BF3; 21 | $pink: #FD61D1; 22 | $raspberry: #FF67A4; 23 | 24 | 25 | body { 26 | font-family: -apple-system "Helvetica Neue"; 27 | } 28 | 29 | .notebook_app > #header { 30 | -webkit-box-shadow: none; 31 | box-shadow: none; 32 | border-bottom: 1px solid #AAA; 33 | } 34 | 35 | .container { 36 | width: 100%; 37 | border: none; 38 | margin: 0; 39 | } 40 | 41 | body > #header { 42 | background-color: $menu-color; 43 | border-bottom: 0.5px solid $menu-border-color; 44 | padding: 0 20px; 45 | position: relative; 46 | 47 | #header-container { 48 | display: inline-block; 49 | position: fixed; 50 | padding: 0; 51 | left: 428px; 52 | top: 4px; 53 | z-index: 1; 54 | background: none; 55 | .save_widget { 56 | border-left: 1px solid $menu-border-color; 57 | } 58 | .filename { 59 | padding: 0; 60 | } 61 | .navbar-brand, #kernel_logo_widget, .checkpoint_status { 62 | display: none; 63 | } 64 | } 65 | 66 | @media (min-width: 1000px){ 67 | padding: 0 120px; 68 | #header-container { 69 | left: 528px; 70 | } 71 | } 72 | @media (min-width: 1250px){ 73 | padding: 0 370px 0 270px; 74 | #header-container { 75 | left: 678px; 76 | } 77 | } 78 | @media (min-width: 1500px){ 79 | padding: 0 370px; 80 | #header-container { 81 | left: 778px; 82 | } 83 | } 84 | 85 | #maintoolbar { 86 | margin-bottom: 0px; 87 | 88 | .toolbar select { 89 | -webkit-appearance: none; 90 | padding: 2px 8px; 91 | font-size: 13px; 92 | 93 | color: #333; 94 | background-color: #fff; 95 | border-color: #ccc; 96 | 97 | &:hover { 98 | color: #333; 99 | background-color: #e6e6e6; 100 | border-color: #adadad; 101 | } 102 | } 103 | } 104 | } 105 | 106 | .navbar-nav > li > a, .kernel_indicator_name, #header-container .filename, span.autosave_status { 107 | color: $menu-border-color; 108 | cursor: pointer; 109 | font-size: 13px; 110 | color: #777; 111 | &:hover, &:focus { 112 | color: #333; 113 | } 114 | } 115 | .navbar-default { 116 | padding-top: 4px; 117 | margin: -1px; 118 | } 119 | .navbar { 120 | background-color: $menu-color; 121 | } 122 | .navbar-inner { 123 | margin: 4px 0 8px 10px; 124 | } 125 | 126 | 127 | 128 | 129 | .notebook_app { 130 | background-color: white; 131 | } 132 | 133 | #notebook-container { 134 | box-shadow: none; 135 | width: 100%; 136 | padding-right: 60px; 137 | max-width: 1000px; 138 | margin: 0 auto; 139 | } 140 | 141 | .edit_mode div.cell.selected, div.cell.selected { 142 | border-color: white; 143 | border-left: 3px solid $light-gray; 144 | margin-left: -3px; 145 | background: none; 146 | // background: linear-gradient(to right, $light-gray -40px, $light-gray 5px, transparent 5px, transparent 100%); 147 | } 148 | .edit_mode div.cell.selected { 149 | border-left-color: $blue; 150 | // background: linear-gradient(to right, $blue -40px, $blue 5px, transparent 5px, transparent 100%); 151 | } 152 | 153 | div.input_area { 154 | border: none; 155 | border-radius: 4px 4px 0 0; 156 | background: $background-gray; 157 | padding: 5px; 158 | } 159 | div.output_subarea { 160 | border: 4px solid $background-gray; 161 | border-radius: 0 0 4px 4px; 162 | padding: 8px; 163 | max-width: none; 164 | margin-bottom: -4px; 165 | } 166 | div.output_scroll { 167 | -webkit-box-shadow: none; 168 | box-shadow: none; 169 | border-bottom: 12px double $background-gray; 170 | } 171 | div.out_prompt_overlay {border-bottom: 12px solid white} 172 | 173 | 174 | .prompt, div.input_prompt, div.output_prompt { 175 | padding: 5px; 176 | color: $light-gray; 177 | font-family: "Operator Mono"; 178 | font-weight: 300; 179 | } 180 | div.output_prompt {color: white} 181 | 182 | .CodeMirror-linenumber { 183 | color: #CFCFCF; 184 | } 185 | 186 | .CodeMirror pre, pre, code, .CodeMirror-linenumber { 187 | font-family: "Operator Mono"; 188 | font-weight: 300; 189 | } 190 | 191 | .CodeMirror, .cm-s-ipython { 192 | span.cm-comment { 193 | color: $gray; 194 | font-style: italic; 195 | } 196 | span.cm-keyword, span.cm-operator, span.cm-variable-2 { 197 | color: $orange; 198 | font-weight: 500; 199 | } 200 | span.cm-number, span.cm-atom { 201 | color: $purple; 202 | } 203 | span.cm-string { 204 | color: $olive; 205 | } 206 | span.cm-string-2 { 207 | color: $brown; 208 | } 209 | span.cm-arg-is { 210 | color: $blue; 211 | font-weight: 500; 212 | } 213 | span.cm-def { 214 | color: $blue; 215 | font-style: italic; 216 | text-decoration: underline; 217 | } 218 | span.cm-variable, span.cm-variable-3, span.cm-bracket { 219 | color: black; 220 | } 221 | span.cm-property {} 222 | 223 | span.cm-meta { 224 | color: yellow; 225 | } 226 | span.cm-qualifier { 227 | color: grey; 228 | } 229 | span.cm-builtin { 230 | color: $green; 231 | } 232 | span.cm-tag { color: #3F7F7F; } 233 | span.cm-attribute { color: #7F007F; } 234 | span.cm-error { 235 | color: $red; 236 | font-weight: 500; 237 | } 238 | } 239 | 240 | .CodeMirror-cursor { 241 | border-left: 2.5px solid $blue; 242 | height: 18px !important; 243 | } 244 | 245 | .selected .CodeMirror .CodeMirror-activeline-background { 246 | background: #e8f2ff; 247 | } 248 | 249 | .selected div.CodeMirror span.CodeMirror-matchingbracket { 250 | outline: none; 251 | border-bottom: 2px solid $blue; 252 | background: $blue; 253 | color: white; 254 | } 255 | div.CodeMirror span.CodeMirror-matchingbracket { 256 | color: inherit; 257 | } 258 | 259 | .cm-s-default .cm-header, .cm-s-default .cm-quote, .cm-s-default .cm-variable-2 { 260 | color: black; 261 | } 262 | .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 { 263 | color: black; 264 | font-size: inherit; 265 | font-weight: 500; 266 | font-style: normal; 267 | } 268 | .cm-strong { 269 | font-weight: 500; 270 | } 271 | 272 | 273 | 274 | 275 | 276 | 277 | // HTML OUTPUT 278 | 279 | .rendered_html { 280 | font-family: "Operator Mono"; 281 | font-weight: 300; 282 | 283 | &.text_cell_render { 284 | p, h1, h2, h3, h4, h5, h6, ul, ol { 285 | font-family: "Gotham Narrow"; 286 | font-size: 16px; 287 | font-weight: 300; 288 | font-style: normal; 289 | line-height: 24px; 290 | margin-bottom: 16px; 291 | margin-top: 0; 292 | ul, ol { 293 | margin-bottom: 0; 294 | } 295 | } 296 | 297 | h1 { 298 | font-size: 4em; 299 | font-weight: 900; 300 | line-height: 48px; 301 | } 302 | 303 | h2 { 304 | font-size: 2.5em; 305 | font-weight: 700; 306 | line-height: 48px; 307 | } 308 | 309 | h3 { 310 | font-size: 1.5em; 311 | font-weight: 700; 312 | } 313 | 314 | h4 { 315 | font-size: 0.9em; 316 | font-weight: 700; 317 | text-transform: uppercase; 318 | } 319 | 320 | h5, h6, strong { 321 | font-weight: 700; 322 | code { 323 | font-weight: 700; 324 | } 325 | } 326 | 327 | hr { 328 | border-bottom: 1px solid black; 329 | } 330 | 331 | code { 332 | font-weight: 200; 333 | font-size: 95; 334 | } 335 | } 336 | 337 | table { 338 | &, tr, th, td { 339 | border: none; 340 | padding: 1px 4px; 341 | } 342 | 343 | tbody tr:nth-child(even) { 344 | background: $background-gray; 345 | } 346 | 347 | th { 348 | font-weight: 500; 349 | } 350 | 351 | td { 352 | border-right: 1px solid $background-gray; 353 | border-bottom: 1px solid $background-gray; 354 | text-align: right; 355 | } 356 | 357 | thead tr th { 358 | border-bottom: 1px solid black; 359 | text-align: center; 360 | } 361 | 362 | thead tr th:nth-child(1) { 363 | border-right: 1px solid black; 364 | } 365 | 366 | tbody tr th { 367 | border-right: 1px solid black; 368 | text-align: right; 369 | } 370 | 371 | tr { 372 | margin: 0em 2em; 373 | } 374 | } 375 | } 376 | 377 | // GENERAL 378 | 379 | a { 380 | color: $blue; 381 | &:hover { 382 | color: black; 383 | } 384 | } 385 | 386 | -------------------------------------------------------------------------------- /style.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrLoh/jupyter-styles/e75eb961e9327ec3f02efb42d0f7008832b05935/style.jpg --------------------------------------------------------------------------------