##// END OF EJS Templates
slightly more subtle prompt overlay
MinRK -
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(200, 200, 255, 0.5);
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