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