##// END OF EJS Templates
Updating notebook.less to use baseLineHeight from variables.
Brian E. Granger -
Show More
@@ -1,511 +1,511
1 1 /**
2 2 * Primary styles
3 3 *
4 4 * Author: IPython Development Team
5 5 */
6 6
7 7 @import "variables.less";
8 8 @import "highlight.less";
9 9
10 10 body {
11 11 background-color:@notebook_background;
12 12 }
13 13
14 14 body.notebook_app {
15 15 overflow: hidden;
16 16 }
17 17
18 18 blockquote {
19 19 border-left: 4px solid #DDD;
20 20 padding: 0 15px;
21 21 color: #777;
22 22 }
23 23
24 24 span#save_widget {
25 25 padding: 5px;
26 26 margin: 0px 0px 0px 300px;
27 27 display:inline-block;
28 28 }
29 29
30 30 span#checkpoint_status span#autosave_status {
31 31 font-size: small;
32 32 }
33 33
34 34 /*span#save_widget > span#autosave_status {
35 35 font-size: x-small;
36 36 }
37 37 */
38 38 span#notebook_name {
39 39 height: 1em;
40 40 line-height: 1em;
41 41 padding: 3px;
42 42 border: none;
43 43 font-size: 146.5%;
44 44 }
45 45
46 46
47 47 .ui-menubar-item .ui-button .ui-button-text {
48 48 padding: 0.4em 1.0em;
49 49 font-size: 100%;
50 50 }
51 51
52 52 .ui-menu {
53 53 .box-shadow(0px 6px 10px -1px #adadad);
54 54 }
55 55
56 56 .ui-menu .ui-menu-item a {
57 57 border: 1px solid transparent;
58 58 padding: 2px 1.6em;
59 59 }
60 60
61 61 .ui-menu .ui-menu-item a.ui-state-focus {
62 62 margin: 0;
63 63 }
64 64
65 65 .ui-menu hr {
66 66 margin: 0.3em 0;
67 67 }
68 68
69 69 #menubar_container {
70 70 position: relative;
71 71 }
72 72
73 73 #notification_area {
74 74 position: absolute;
75 75 right: 0px;
76 76 top: 0px;
77 77 height: 25px;
78 78 padding: 3px 0px;
79 79 padding-right: 3px;
80 80 z-index: 10;
81 81 }
82 82
83 83 .notification_widget{
84 84 float : right;
85 85 right: 0px;
86 86 top: 1px;
87 87 height: 25px;
88 88 padding: 3px 6px;
89 89 z-index: 10;
90 90 }
91 91
92 92 .toolbar {
93 93 padding: 3px 15px;
94 94 border-bottom: @border_width @border_color solid;
95 95
96 96 button {
97 97 margin-top:2px;
98 98 margin-bottom:2px;
99 99 }
100 100
101 101
102 102 select, label {
103 103 height : 19px;
104 104 vertical-align:middle;
105 105 margin-right:2px;
106 106 margin-bottom:0;
107 107 display: inline;
108 108 font-size: 92%;
109 109 margin-left:0.3em;
110 110 margin-right:0.3em;
111 111 padding: 0px;
112 112 }
113 113 }
114 114
115 115 .toolbar select{
116 116 width:auto;
117 117 }
118 118
119 119 span#quick_help_area {
120 120 position: static;
121 121 padding: 5px 0px;
122 122 margin: 0px 0px 0px 0px;
123 123 }
124 124
125 125 .help_string {
126 126 float: right;
127 127 width: 170px;
128 128 padding: 0px 5px;
129 129 text-align: left;
130 130 font-size: 85%;
131 131 }
132 132
133 133 .help_string_label {
134 134 float: right;
135 135 font-size: 85%;
136 136 }
137 137
138 138 div#notebook_panel {
139 139 margin: 0px 0px 0px 0px;
140 140 padding: 0px;
141 141 }
142 142
143 143 div#notebook {
144 144 overflow-y: scroll;
145 145 overflow-x: auto;
146 146 width: 100%;
147 147 /* This spaces the cell away from the edge of the notebook area */
148 148 padding: 5px 5px 15px 5px;
149 149 margin: 0px;
150 150 }
151 151
152 152 div#pager_splitter {
153 153 height: 8px;
154 154 }
155 155
156 156 #pager_container {
157 157 position : relative;
158 158 }
159 159
160 160 div#pager {
161 161 padding: 15px;
162 162 overflow: auto;
163 163 display: none;
164 164 }
165 165
166 166 div.ui-widget-content {
167 167 border: 1px solid @border_color;
168 168 outline: none;
169 169 }
170 170
171 171 .cell {
172 172 border: 1px solid transparent;
173 173 .vbox();
174 174
175 175 &.selected {
176 176 .corner-all;
177 177 border : thin @border_color solid;
178 178 }
179 179 }
180 180
181 181 div.cell {
182 182 width: 100%;
183 183 padding: 5px 5px 5px 0px;
184 184 /* This acts as a spacer between cells, that is outside the border */
185 185 margin: 2px 0px 2px 0px;
186 186 outline: none;
187 187 }
188 188
189 189 div.code_cell {
190 190 }
191 191
192 192 /* any special styling for code cells that are currently running goes here */
193 193 div.code_cell.running {
194 194 }
195 195
196 196 div.prompt {
197 197 /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
198 198 width: 11ex;
199 199 /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
200 200 padding: 0.4em;
201 201 margin: 0px;
202 202 font-family: monospace;
203 203 text-align: right;
204 204 /* This has to match that of the the CodeMirror class line-height below */
205 line-height: 1.231;
205 line-height: @baseLineHeight;
206 206 }
207 207
208 208 div.input {
209 209 page-break-inside: avoid;
210 210 .hbox();
211 211 }
212 212
213 213 /* input_area and input_prompt must match in top border and margin for alignment */
214 214 div.input_area {
215 215 /*color: @base_font_color;*/
216 216 border: 1px solid @light_border_color;
217 217 .corner-all;
218 218 background: @cell_background;
219 219 }
220 220
221 221 div.input_prompt {
222 222 color: navy;
223 223 border-top: 1px solid transparent;
224 224 }
225 225
226 226 div.output_wrapper {
227 227 /* This is a spacer between the input and output of each cell */
228 228 margin-top: 5px;
229 229 margin-left: 5px;
230 230 /* FF needs explicit width to stretch */
231 231 width: 100%;
232 232 /* this position must be relative to enable descendents to be absolute within it */
233 233 position: relative;
234 234 }
235 235
236 236 /* class for the output area when it should be height-limited */
237 237 div.output_scroll {
238 238 /* ideally, this would be max-height, but FF barfs all over that */
239 239 height: 24em;
240 240 /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
241 241 width: 100%;
242 242
243 243 overflow: auto;
244 244 .corner-all;
245 245 .box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
246 246 }
247 247
248 248 /* output div while it is collapsed */
249 249 div.output_collapsed {
250 250 margin-right: 5px;
251 251 }
252 252
253 253 div.out_prompt_overlay {
254 254 height: 100%;
255 255 padding: 0px;
256 256 position: absolute;
257 257 .corner-all;
258 258 }
259 259
260 260 div.out_prompt_overlay:hover {
261 261 /* use inner shadow to get border that is computed the same on WebKit/FF */
262 262 .box-shadow(inset 0 0 1px #000);
263 263 background: rgba(240, 240, 240, 0.5);
264 264 }
265 265
266 266 div.output_prompt {
267 267 color: darkred;
268 268 /* 5px right shift to account for margin in parent container */
269 269 margin: 0 5px 0 -5px;
270 270 }
271 271
272 272 /* This class is the outer container of all output sections. */
273 273 div.output_area {
274 274 padding: 0px;
275 275 page-break-inside: avoid;
276 276 .hbox();
277 277 }
278 278
279 279
280 280 /* This is needed to protect the pre formating from global settings such
281 281 as that of bootstrap */
282 282 div.output_area pre {
283 283 font-family: monospace;
284 284 margin: 0;
285 285 padding: 0;
286 286 border: 0;
287 287 font-size: 100%;
288 288 vertical-align: baseline;
289 289 color: black;
290 290 background-color: white;
291 291 .border-radius(0);
292 292 line-height: inherit;
293 293 }
294 294
295 295 /* This class is for the output subarea inside the output_area and after
296 296 the prompt div. */
297 297 div.output_subarea {
298 298 padding: 0.44em 0.4em 0.4em 1px;
299 299 .box-flex1();
300 300 }
301 301
302 302 /* The rest of the output_* classes are for special styling of the different
303 303 output types */
304 304
305 305 /* all text output has this class: */
306 306 div.output_text {
307 307 text-align: left;
308 308 color: @base_font_color;
309 309 font-family: monospace;
310 310 /* This has to match that of the the CodeMirror class line-height below */
311 line-height: 1.231;
311 line-height: @baseLineHeight;
312 312 }
313 313
314 314 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
315 315 div.output_stream {
316 316 padding-top: 0.0em;
317 317 padding-bottom: 0.0em;
318 318 }
319 319 div.output_stdout {
320 320 }
321 321 div.output_stderr {
322 322 background: #fdd; /* very light red background for stderr */
323 323 }
324 324
325 325 div.output_latex {
326 326 text-align: left;
327 327 }
328 328
329 329 div.output_html {
330 330 }
331 331
332 332 div.output_png {
333 333 }
334 334
335 335 div.output_jpeg {
336 336 }
337 337
338 338 div.text_cell {
339 339 padding: 5px 5px 5px 5px;
340 340 }
341 341
342 342 div.text_cell_input {
343 343 color: @base_font_color;
344 344 border: 1px solid @light_border_color;
345 345 .corner-all;
346 346 background: @cell_background;
347 347 }
348 348
349 349 div.text_cell_render {
350 350 /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
351 351 outline: none;
352 352 resize: none;
353 353 width: inherit;
354 354 border-style: none;
355 355 padding: 5px;
356 356 color: @base_font_color;
357 357 }
358 358
359 359 /* The following gets added to the <head> if it is detected that the user has a
360 360 * monospace font with inconsistent normal/bold/italic height. See
361 361 * notebookmain.js. Such fonts will have keywords vertically offset with
362 362 * respect to the rest of the text. The user should select a better font.
363 363 * See: https://github.com/ipython/ipython/issues/1503
364 364 *
365 365 * .CodeMirror span {
366 366 * vertical-align: bottom;
367 367 * }
368 368 */
369 369
370 370 .CodeMirror {
371 line-height: 1.231; /* Changed from 1em to our global default */
371 line-height: @baseLineHeight; /* Changed from 1em to our global default */
372 372 height: auto; /* Changed to auto to autogrow */
373 373 background: none; /* Changed from white to allow our bg to show through */
374 374 }
375 375
376 376 .CodeMirror-scroll {
377 377 /* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
378 378 /* We have found that if it is visible, vertical scrollbars appear with font size changes.*/
379 379 overflow-y: hidden;
380 380 overflow-x: auto; /* Changed from auto to remove scrollbar */
381 381 }
382 382
383 383 .CodeMirror-lines {
384 384 /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
385 385 /* we have set a different line-height and want this to scale with that. */
386 386 padding: 0.4em;
387 387 }
388 388
389 389 .CodeMirror pre {
390 390 /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
391 391 /* .CodeMirror-lines */
392 392 padding: 0;
393 393 border: 0;
394 394 .border-radius(0)
395 395 }
396 396
397 397 /* CSS font colors for translated ANSI colors. */
398 398
399 399
400 400 .ansiblack {color: @base_font_color;}
401 401 .ansired {color: darkred;}
402 402 .ansigreen {color: darkgreen;}
403 403 .ansiyellow {color: brown;}
404 404 .ansiblue {color: darkblue;}
405 405 .ansipurple {color: darkviolet;}
406 406 .ansicyan {color: steelblue;}
407 407 .ansigrey {color: grey;}
408 408 .ansibold {font-weight: bold;}
409 409
410 410 .completions {
411 411 position: absolute;
412 412 z-index: 10;
413 413 overflow: hidden;
414 414 border: 1px solid @border_color;
415 415 .corner-all;
416 416 .box-shadow(0px 6px 10px -1px #adadad);
417 417 }
418 418
419 419 .completions select {
420 420 background: white;
421 421 outline: none;
422 422 border: none;
423 423 padding: 0px;
424 424 margin: 0px;
425 425 overflow: auto;
426 426 font-family: monospace;
427 427 font-size: 110%;
428 428 color: @base_font_color;
429 429 }
430 430
431 431 .completions select option.context {
432 432 color: @blueDark;
433 433 }
434 434
435 435 pre.dialog {
436 436 background-color: @cell_background;
437 437 border: 1px solid #ddd;
438 438 .corner-all;
439 439 padding: 0.4em;
440 440 padding-left: 2em;
441 441 }
442 442
443 443 p.dialog {
444 444 padding : 0.2em;
445 445 }
446 446
447 447 .shortcut_key {
448 448 display: inline-block;
449 449 width: 15ex;
450 450 text-align: right;
451 451 font-family: monospace;
452 452 }
453 453
454 454 .shortcut_descr {
455 455 }
456 456
457 457 /* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems
458 458 to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do.
459 459 */
460 460 pre, code, kbd, samp { white-space: pre-wrap; }
461 461
462 462 #fonttest {
463 463 font-family: monospace;
464 464 }
465 465
466 466 .js-error {
467 467 color: darkred;
468 468 }
469 469
470 470 a {
471 471 text-decoration: underline;
472 472 }
473 473
474 474 p {
475 475
476 476 margin-bottom:0;
477 477
478 478 }
479 479
480 480 a.heading-anchor:link, a.heading-anchor:visited {
481 481 text-decoration: none;
482 482 color: inherit;
483 483 }
484 484
485 485 /* raw_input styles */
486 486
487 487 div.raw_input {
488 488 padding-top: 0px;
489 489 padding-bottom: 0px;
490 490 height: 1em;
491 491 line-height: 1em;
492 492 font-family: monospace;
493 493 }
494 494 span.input_prompt {
495 495 font-family: inherit;
496 496 }
497 497 input.raw_input {
498 498 font-family: inherit;
499 499 font-size: inherit;
500 500 color: inherit;
501 501 width: auto;
502 502 margin: -2px 0px 0px 1px;
503 503 padding-left: 1px;
504 504 padding-top: 2px;
505 505 height: 1em;
506 506 }
507 507
508 508 p.p-space {
509 509 margin-bottom: 10px;
510 510 }
511 511
General Comments 0
You need to be logged in to leave comments. Login now