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