##// END OF EJS Templates
Minor style changes. Using better fonts, indenting menu items.
Brian Granger -
Show More
@@ -1,63 +1,67 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
7
8 body {
8 body {
9 background-color: white;
9 background-color: white;
10 /* This makes sure that the body covers the entire window and needs to
10 /* This makes sure that the body covers the entire window and needs to
11 be in a different element than the display: box in wrapper below */
11 be in a different element than the display: box in wrapper below */
12 position: absolute;
12 position: absolute;
13 left: 0px;
13 left: 0px;
14 right: 0px;
14 right: 0px;
15 top: 0px;
15 top: 0px;
16 bottom: 0px;
16 bottom: 0px;
17 overflow: hidden;
17 overflow: hidden;
18 }
18 }
19
19
20
20
21 div#header {
21 div#header {
22 /* Initially hidden to prevent FLOUC */
22 /* Initially hidden to prevent FLOUC */
23 display: none;
23 display: none;
24 position: relative;
24 position: relative;
25 height: 40px;
25 height: 40px;
26 padding: 5px;
26 padding: 5px;
27 margin: 0px;
27 margin: 0px;
28 width: 100%;
28 width: 100%;
29 }
29 }
30
30
31 span#ipython_notebook {
31 span#ipython_notebook {
32 position: absolute;
32 position: absolute;
33 padding: 2px 2px 2px 5px;
33 padding: 2px 2px 2px 5px;
34 }
34 }
35
35
36 span#ipython_notebook h1 img {
36 span#ipython_notebook h1 img {
37 font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
37 font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
38 height: 24px;
38 height: 24px;
39 text-decoration:none;
39 text-decoration:none;
40 display: inline;
40 display: inline;
41 color: black;
41 color: black;
42 }
42 }
43
43
44 div#main_app {
44 div#main_app {
45 /* Initially hidden to prevent FLOUC */
45 /* Initially hidden to prevent FLOUC */
46 display: none;
46 display: none;
47 width: 100%;
47 width: 100%;
48 position: relative;
48 position: relative;
49 }
49 }
50
50
51 .ui-widget {
52 font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
53 }
54
51 .ui-button .ui-button-text {
55 .ui-button .ui-button-text {
52 padding: 0.2em 0.8em;
56 padding: 0.2em 0.8em;
53 font-size: 77%;
57 font-size: 77%;
54 }
58 }
55
59
56 span#login_widget {
60 span#login_widget {
57 float: right;
61 float: right;
58 }
62 }
59
63
60 /* generic class for hidden objects */
64 /* generic class for hidden objects */
61 .hidden {
65 .hidden {
62 display: none;
66 display: none;
63 }
67 }
@@ -1,378 +1,378 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
7
8 body {
8 body {
9 background-color: white;
9 background-color: white;
10 /* This makes sure that the body covers the entire window and needs to
10 /* This makes sure that the body covers the entire window and needs to
11 be in a different element than the display: box in wrapper below */
11 be in a different element than the display: box in wrapper below */
12 position: absolute;
12 position: absolute;
13 left: 0px;
13 left: 0px;
14 right: 0px;
14 right: 0px;
15 top: 0px;
15 top: 0px;
16 bottom: 0px;
16 bottom: 0px;
17 overflow: hidden;
17 overflow: hidden;
18 }
18 }
19
19
20 span#save_widget {
20 span#save_widget {
21 padding: 5px;
21 padding: 5px;
22 margin: 0px 0px 0px 300px;
22 margin: 0px 0px 0px 300px;
23 display:inline-block;
23 display:inline-block;
24 }
24 }
25
25
26 span#notebook_name {
26 span#notebook_name {
27 height: 1em;
27 height: 1em;
28 line-height: 1em;
28 line-height: 1em;
29 padding: 3px;
29 padding: 3px;
30 border: none;
30 border: none;
31 font-size: 146.5%;
31 font-size: 146.5%;
32 }
32 }
33
33
34 .ui-menubar-item .ui-button .ui-button-text {
34 .ui-menubar-item .ui-button .ui-button-text {
35 padding: 0.4em 1.0em;
35 padding: 0.4em 1.0em;
36 font-size: 100%;
36 font-size: 100%;
37 }
37 }
38
38
39 .ui-menu {
39 .ui-menu {
40 -moz-box-shadow: 0px 6px 10px -1px #adadad;
40 -moz-box-shadow: 0px 6px 10px -1px #adadad;
41 -webkit-box-shadow: 0px 6px 10px -1px #adadad;
41 -webkit-box-shadow: 0px 6px 10px -1px #adadad;
42 box-shadow: 0px 6px 10px -1px #adadad;
42 box-shadow: 0px 6px 10px -1px #adadad;
43 }
43 }
44
44
45 .ui-menu .ui-menu-item a {
45 .ui-menu .ui-menu-item a {
46 padding: 2px 0.9em;
46 padding: 2px 1.6em;
47 }
47 }
48
48
49 .ui-menu hr {
49 .ui-menu hr {
50 margin: 0.3em 0;
50 margin: 0.3em 0;
51 }
51 }
52
52
53 span#quick_help_area {
53 span#quick_help_area {
54 position: static;
54 position: static;
55 padding: 5px 0px;
55 padding: 5px 0px;
56 margin: 0px 0px 0px 0px;
56 margin: 0px 0px 0px 0px;
57 }
57 }
58
58
59 span#kernel_status {
59 span#kernel_status {
60 position: absolute;
60 position: absolute;
61 padding: 8px 5px 5px 5px;
61 padding: 8px 5px 5px 5px;
62 right: 10px;
62 right: 10px;
63 font-weight: bold;
63 font-weight: bold;
64 }
64 }
65
65
66
66
67 .status_idle {
67 .status_idle {
68 color: gray;
68 color: gray;
69 visibility: hidden;
69 visibility: hidden;
70 }
70 }
71
71
72 .status_busy {
72 .status_busy {
73 color: red;
73 color: red;
74 }
74 }
75
75
76 .status_restarting {
76 .status_restarting {
77 color: black;
77 color: black;
78 }
78 }
79
79
80 #kernel_persist {
80 #kernel_persist {
81 float: right;
81 float: right;
82 }
82 }
83
83
84 .help_string {
84 .help_string {
85 float: right;
85 float: right;
86 width: 170px;
86 width: 170px;
87 padding: 0px 5px;
87 padding: 0px 5px;
88 text-align: left;
88 text-align: left;
89 font-size: 85%;
89 font-size: 85%;
90 }
90 }
91
91
92 .help_string_label {
92 .help_string_label {
93 float: right;
93 float: right;
94 font-size: 85%;
94 font-size: 85%;
95 }
95 }
96
96
97 div#notebook_panel {
97 div#notebook_panel {
98 margin: 0px 0px 0px 0px;
98 margin: 0px 0px 0px 0px;
99 padding: 0px;
99 padding: 0px;
100 }
100 }
101
101
102 div#notebook {
102 div#notebook {
103 overflow-y: scroll;
103 overflow-y: scroll;
104 overflow-x: auto;
104 overflow-x: auto;
105 width: 100%;
105 width: 100%;
106 /* This spaces the cell away from the edge of the notebook area */
106 /* This spaces the cell away from the edge of the notebook area */
107 padding: 5px 5px 15px 5px;
107 padding: 5px 5px 15px 5px;
108 margin: 0px
108 margin: 0px
109 background-color: white;
109 background-color: white;
110 }
110 }
111
111
112 div#pager_splitter {
112 div#pager_splitter {
113 height: 8px;
113 height: 8px;
114 }
114 }
115
115
116 div#pager {
116 div#pager {
117 padding: 15px;
117 padding: 15px;
118 overflow: auto;
118 overflow: auto;
119 }
119 }
120
120
121 div.cell {
121 div.cell {
122 width: 100%;
122 width: 100%;
123 padding: 5px 5px 5px 0px;
123 padding: 5px 5px 5px 0px;
124 /* This acts as a spacer between cells, that is outside the border */
124 /* This acts as a spacer between cells, that is outside the border */
125 margin: 2px 0px 2px 0px;
125 margin: 2px 0px 2px 0px;
126 }
126 }
127
127
128 div.code_cell {
128 div.code_cell {
129 background-color: white;
129 background-color: white;
130 }
130 }
131 /* any special styling for code cells that are currently running goes here */
131 /* any special styling for code cells that are currently running goes here */
132 div.code_cell.running {
132 div.code_cell.running {
133 }
133 }
134
134
135 div.prompt {
135 div.prompt {
136 /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
136 /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
137 width: 11ex;
137 width: 11ex;
138 /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
138 /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
139 padding: 0.4em;
139 padding: 0.4em;
140 margin: 0px;
140 margin: 0px;
141 font-family: monospace;
141 font-family: monospace;
142 text-align:right;
142 text-align:right;
143 }
143 }
144
144
145 div.input {
145 div.input {
146 page-break-inside: avoid;
146 page-break-inside: avoid;
147 }
147 }
148
148
149 /* input_area and input_prompt must match in top border and margin for alignment */
149 /* input_area and input_prompt must match in top border and margin for alignment */
150 div.input_area {
150 div.input_area {
151 color: black;
151 color: black;
152 border: 1px solid #ddd;
152 border: 1px solid #ddd;
153 border-radius: 3px;
153 border-radius: 3px;
154 background: #f7f7f7;
154 background: #f7f7f7;
155 }
155 }
156
156
157 div.input_prompt {
157 div.input_prompt {
158 color: navy;
158 color: navy;
159 border-top: 1px solid transparent;
159 border-top: 1px solid transparent;
160 }
160 }
161
161
162 div.output {
162 div.output {
163 /* This is a spacer between the input and output of each cell */
163 /* This is a spacer between the input and output of each cell */
164 margin-top: 5px;
164 margin-top: 5px;
165 }
165 }
166
166
167 div.output_prompt {
167 div.output_prompt {
168 color: darkred;
168 color: darkred;
169 }
169 }
170
170
171 /* This class is the outer container of all output sections. */
171 /* This class is the outer container of all output sections. */
172 div.output_area {
172 div.output_area {
173 padding: 0px;
173 padding: 0px;
174 page-break-inside: avoid;
174 page-break-inside: avoid;
175 }
175 }
176
176
177 /* This class is for the output subarea inside the output_area and after
177 /* This class is for the output subarea inside the output_area and after
178 the prompt div. */
178 the prompt div. */
179 div.output_subarea {
179 div.output_subarea {
180 padding: 0.4em 6.1em 0.4em 0.4em;
180 padding: 0.4em 6.1em 0.4em 0.4em;
181 }
181 }
182
182
183 /* The rest of the output_* classes are for special styling of the different
183 /* The rest of the output_* classes are for special styling of the different
184 output types */
184 output types */
185
185
186 /* all text output has this class: */
186 /* all text output has this class: */
187 div.output_text {
187 div.output_text {
188 text-align: left;
188 text-align: left;
189 color: black;
189 color: black;
190 font-family: monospace;
190 font-family: monospace;
191 }
191 }
192
192
193 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
193 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
194 div.output_stream {
194 div.output_stream {
195 padding-top: 0.0em;
195 padding-top: 0.0em;
196 padding-bottom: 0.0em;
196 padding-bottom: 0.0em;
197 }
197 }
198 div.output_stdout {
198 div.output_stdout {
199 }
199 }
200 div.output_stderr {
200 div.output_stderr {
201 background: #fdd; /* very light red background for stderr */
201 background: #fdd; /* very light red background for stderr */
202 }
202 }
203
203
204 div.output_latex {
204 div.output_latex {
205 text-align: left;
205 text-align: left;
206 color: black;
206 color: black;
207 }
207 }
208
208
209 div.output_html {
209 div.output_html {
210 }
210 }
211
211
212 div.output_png {
212 div.output_png {
213 }
213 }
214
214
215 div.output_jpeg {
215 div.output_jpeg {
216 }
216 }
217
217
218 div.text_cell {
218 div.text_cell {
219 background-color: white;
219 background-color: white;
220 }
220 }
221
221
222 div.text_cell_input {
222 div.text_cell_input {
223 color: black;
223 color: black;
224 }
224 }
225
225
226 div.text_cell_render {
226 div.text_cell_render {
227 font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
227 font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
228 outline: none;
228 outline: none;
229 resize: none;
229 resize: none;
230 width: inherit;
230 width: inherit;
231 border-style: none;
231 border-style: none;
232 padding: 5px;
232 padding: 5px;
233 color: black;
233 color: black;
234 }
234 }
235
235
236 .CodeMirror {
236 .CodeMirror {
237 line-height: 1.231; /* Changed from 1em to our global default */
237 line-height: 1.231; /* Changed from 1em to our global default */
238 }
238 }
239
239
240 .CodeMirror-scroll {
240 .CodeMirror-scroll {
241 height: auto; /* Changed to auto to autogrow */
241 height: auto; /* Changed to auto to autogrow */
242 /* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
242 /* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
243 /* We have found that if it is visible, vertical scrollbars appear with font size changes.*/
243 /* We have found that if it is visible, vertical scrollbars appear with font size changes.*/
244 overflow-y: hidden;
244 overflow-y: hidden;
245 overflow-x: auto; /* Changed from auto to remove scrollbar */
245 overflow-x: auto; /* Changed from auto to remove scrollbar */
246 }
246 }
247
247
248 /* CSS font colors for translated ANSI colors. */
248 /* CSS font colors for translated ANSI colors. */
249
249
250
250
251 .ansiblack {color: black;}
251 .ansiblack {color: black;}
252 .ansired {color: darkred;}
252 .ansired {color: darkred;}
253 .ansigreen {color: darkgreen;}
253 .ansigreen {color: darkgreen;}
254 .ansiyellow {color: brown;}
254 .ansiyellow {color: brown;}
255 .ansiblue {color: darkblue;}
255 .ansiblue {color: darkblue;}
256 .ansipurple {color: darkviolet;}
256 .ansipurple {color: darkviolet;}
257 .ansicyan {color: steelblue;}
257 .ansicyan {color: steelblue;}
258 .ansigrey {color: grey;}
258 .ansigrey {color: grey;}
259 .ansibold {font-weight: bold;}
259 .ansibold {font-weight: bold;}
260
260
261 .completions , .tooltip {
261 .completions , .tooltip {
262 position: absolute;
262 position: absolute;
263 z-index: 10;
263 z-index: 10;
264 overflow: auto;
264 overflow: auto;
265 border: 1px solid black;
265 border: 1px solid black;
266 }
266 }
267
267
268 .completions select {
268 .completions select {
269 background: white;
269 background: white;
270 outline: none;
270 outline: none;
271 border: none;
271 border: none;
272 padding: 0px;
272 padding: 0px;
273 margin: 0px;
273 margin: 0px;
274 font-family: monospace;
274 font-family: monospace;
275 }
275 }
276
276
277 @-moz-keyframes fadeIn {
277 @-moz-keyframes fadeIn {
278 from {opacity:0;}
278 from {opacity:0;}
279 to {opacity:1;}
279 to {opacity:1;}
280 }
280 }
281
281
282 @-webkit-keyframes fadeIn {
282 @-webkit-keyframes fadeIn {
283 from {opacity:0;}
283 from {opacity:0;}
284 to {opacity:1;}
284 to {opacity:1;}
285 }
285 }
286
286
287 @keyframes fadeIn {
287 @keyframes fadeIn {
288 from {opacity:0;}
288 from {opacity:0;}
289 to {opacity:1;}
289 to {opacity:1;}
290 }
290 }
291
291
292 /*"close" "expand" and "Open in pager button" of
292 /*"close" "expand" and "Open in pager button" of
293 /* the tooltip*/
293 /* the tooltip*/
294 .tooltip a {
294 .tooltip a {
295 float:right;
295 float:right;
296 }
296 }
297
297
298 /*properties of tooltip after "expand"*/
298 /*properties of tooltip after "expand"*/
299 .bigtooltip {
299 .bigtooltip {
300 height:30%;
300 height:30%;
301 }
301 }
302
302
303 /*properties of tooltip before "expand"*/
303 /*properties of tooltip before "expand"*/
304 .smalltooltip {
304 .smalltooltip {
305 text-overflow: ellipsis;
305 text-overflow: ellipsis;
306 overflow: hidden;
306 overflow: hidden;
307 height:15%;
307 height:15%;
308 }
308 }
309
309
310 .tooltip {
310 .tooltip {
311 /*transition when "expand"ing tooltip */
311 /*transition when "expand"ing tooltip */
312 -webkit-transition-property: height;
312 -webkit-transition-property: height;
313 -webkit-transition-duration: 1s;
313 -webkit-transition-duration: 1s;
314 -moz-transition-property: height;
314 -moz-transition-property: height;
315 -moz-transition-duration: 1s;
315 -moz-transition-duration: 1s;
316 transition-property: height;
316 transition-property: height;
317 transition-duration: 1s;
317 transition-duration: 1s;
318 max-width:700px;
318 max-width:700px;
319 border-radius: 0px 10px 10px 10px;
319 border-radius: 0px 10px 10px 10px;
320 box-shadow: 3px 3px 5px #999;
320 box-shadow: 3px 3px 5px #999;
321 /*fade-in animation when inserted*/
321 /*fade-in animation when inserted*/
322 -webkit-animation: fadeIn 200ms;
322 -webkit-animation: fadeIn 200ms;
323 -moz-animation: fadeIn 200ms;
323 -moz-animation: fadeIn 200ms;
324 animation: fadeIn 200ms;
324 animation: fadeIn 200ms;
325 vertical-align: middle;
325 vertical-align: middle;
326 background: #FDFDD8;
326 background: #FDFDD8;
327 outline: none;
327 outline: none;
328 padding: 3px;
328 padding: 3px;
329 margin: 0px;
329 margin: 0px;
330 font-family: monospace;
330 font-family: monospace;
331 min-height:50px;
331 min-height:50px;
332 }
332 }
333
333
334 /*fixed part of the completion*/
334 /*fixed part of the completion*/
335 .completions p b {
335 .completions p b {
336 font-weight:bold;
336 font-weight:bold;
337 }
337 }
338
338
339 .completions p {
339 .completions p {
340 background: #DDF;
340 background: #DDF;
341 /*outline: none;
341 /*outline: none;
342 padding: 0px;*/
342 padding: 0px;*/
343 border-bottom: black solid 1px;
343 border-bottom: black solid 1px;
344 padding: 1px;
344 padding: 1px;
345 font-family: monospace;
345 font-family: monospace;
346 }
346 }
347
347
348 pre.dialog {
348 pre.dialog {
349 background-color: #f7f7f7;
349 background-color: #f7f7f7;
350 border: 1px solid #ddd;
350 border: 1px solid #ddd;
351 border-radius: 3px;
351 border-radius: 3px;
352 padding: 0.4em;
352 padding: 0.4em;
353 padding-left: 2em;
353 padding-left: 2em;
354 }
354 }
355
355
356 p.dialog {
356 p.dialog {
357 padding : 0.2em;
357 padding : 0.2em;
358 }
358 }
359
359
360 @media print {
360 @media print {
361 body { overflow: visible !important; }
361 body { overflow: visible !important; }
362 .ui-widget-content { border: 0px; }
362 .ui-widget-content { border: 0px; }
363 }
363 }
364
364
365 .shortcut_key {
365 .shortcut_key {
366 display: inline-block;
366 display: inline-block;
367 width: 15ex;
367 width: 15ex;
368 text-align: right;
368 text-align: right;
369 font-family: monospace;
369 font-family: monospace;
370 }
370 }
371
371
372 .shortcut_descr {
372 .shortcut_descr {
373 }
373 }
374
374
375 /* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems
375 /* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems
376 to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do.
376 to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do.
377 */
377 */
378 pre, code, kbd, samp { white-space: pre-wrap; }
378 pre, code, kbd, samp { white-space: pre-wrap; }
General Comments 0
You need to be logged in to leave comments. Login now