##// END OF EJS Templates
Added basic styling to text cells.
Brian Granger -
Show More
@@ -1,297 +1,310
1 /**
1 /**
2 * HTML5 ✰ Boilerplate
2 * HTML5 ✰ Boilerplate
3 *
3 *
4 * style.css contains a reset, font normalization and some base styles.
4 * style.css contains a reset, font normalization and some base styles.
5 *
5 *
6 * Credit is left where credit is due.
6 * Credit is left where credit is due.
7 * Much inspiration was taken from these projects:
7 * Much inspiration was taken from these projects:
8 * - yui.yahooapis.com/2.8.1/build/base/base.css
8 * - yui.yahooapis.com/2.8.1/build/base/base.css
9 * - camendesign.com/design/
9 * - camendesign.com/design/
10 * - praegnanz.de/weblog/htmlcssjs-kickstart
10 * - praegnanz.de/weblog/htmlcssjs-kickstart
11 */
11 */
12
12
13
13
14 /**
14 /**
15 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
15 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
16 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
16 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
17 * html5doctor.com/html-5-reset-stylesheet/
17 * html5doctor.com/html-5-reset-stylesheet/
18 */
18 */
19
19
20 html, body, div, span, object, iframe,
20 html, body, div, span, object, iframe,
21 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
21 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
22 abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
22 abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
23 small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
23 small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
24 fieldset, form, label, legend,
24 fieldset, form, label, legend,
25 table, caption, tbody, tfoot, thead, tr, th, td,
25 table, caption, tbody, tfoot, thead, tr, th, td,
26 article, aside, canvas, details, figcaption, figure,
26 article, aside, canvas, details, figcaption, figure,
27 footer, header, hgroup, menu, nav, section, summary,
27 footer, header, hgroup, menu, nav, section, summary,
28 time, mark, audio, video {
28 time, mark, audio, video {
29 margin: 0;
29 margin: 0;
30 padding: 0;
30 padding: 0;
31 border: 0;
31 border: 0;
32 /* font-size: 100%;*/
32 /* font-size: 100%;*/
33 font: inherit;
33 font: inherit;
34 vertical-align: baseline;
34 vertical-align: baseline;
35 }
35 }
36
36
37 article, aside, details, figcaption, figure,
37 article, aside, details, figcaption, figure,
38 footer, header, hgroup, menu, nav, section {
38 footer, header, hgroup, menu, nav, section {
39 display: block;
39 display: block;
40 }
40 }
41
41
42 blockquote, q { quotes: none; }
42 blockquote, q { quotes: none; }
43
43
44 blockquote:before, blockquote:after,
44 blockquote:before, blockquote:after,
45 q:before, q:after { content: ""; content: none; }
45 q:before, q:after { content: ""; content: none; }
46
46
47 ins { background-color: #ff9; color: #000; text-decoration: none; }
47 ins { background-color: #ff9; color: #000; text-decoration: none; }
48
48
49 mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
49 mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
50
50
51 del { text-decoration: line-through; }
51 del { text-decoration: line-through; }
52
52
53 abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
53 abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
54
54
55 table { border-collapse: collapse; border-spacing: 0; }
55 table { border-collapse: collapse; border-spacing: 0; }
56
56
57 hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
57 hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
58
58
59 input, select { vertical-align: middle; }
59 input, select { vertical-align: middle; }
60
60
61 /* Normalize monospace sizing:
61 /* Normalize monospace sizing:
62 en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
62 en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
63 pre, code, kbd, samp { font-family: monospace, sans-serif; }
63 pre, code, kbd, samp { font-family: monospace, sans-serif; }
64
64
65 pre {
65 pre {
66 text-align: left;
66 text-align: left;
67 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
67 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
68 font-size: 12pt;
68 font-size: 12pt;
69 }
69 }
70
70
71 body {
71 body {
72 background-color: white;
72 background-color: white;
73 /* This won't propagate to all children so we also set it below */
73 /* This won't propagate to all children so we also set it below */
74 font-size: 12pt;
74 font-size: 12pt;
75 /* This makes sure that the body covers the entire window and needs to
75 /* This makes sure that the body covers the entire window and needs to
76 be in a different element than the display: box in wrapper below */
76 be in a different element than the display: box in wrapper below */
77 position: absolute;
77 position: absolute;
78 left: 0px;
78 left: 0px;
79 right: 0px;
79 right: 0px;
80 top: 0px;
80 top: 0px;
81 bottom: 0px;
81 bottom: 0px;
82 }
82 }
83
83
84 div#wrapper {
84 div#wrapper {
85 display: box;
85 display: box;
86 display: -webkit-box;
86 display: -webkit-box;
87 display: -moz-box;
87 display: -moz-box;
88
88
89 box-orient: vertical;
89 box-orient: vertical;
90 -webkit-box-orient: vertical;
90 -webkit-box-orient: vertical;
91 -moz-box-orient: vertical;
91 -moz-box-orient: vertical;
92
92
93 /* This is needed to make sure the wrapper fills the body */
93 /* This is needed to make sure the wrapper fills the body */
94 width: 100%;
94 width: 100%;
95 height: 100%;
95 height: 100%;
96
96
97 box-sizing: border-box;
97 box-sizing: border-box;
98 -moz-box-sizing: border-box;
98 -moz-box-sizing: border-box;
99 -webkit-box-sizing: border-box;
99 -webkit-box-sizing: border-box;
100 }
100 }
101
101
102 span#ipython_notebook h1 {
102 span#ipython_notebook h1 {
103 font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
103 font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
104 font-size: 26pt;
104 font-size: 26pt;
105 padding: 10px;
105 padding: 10px;
106 margin: 10px;
106 margin: 10px;
107 }
107 }
108
108
109 div#tools {
109 div#tools {
110 font-size: 11pt;
110 font-size: 11pt;
111 }
111 }
112
112
113 span#kernel_status {
113 span#kernel_status {
114 position: absolute;
114 position: absolute;
115 top: 12%;
115 top: 12%;
116 right: 10px;
116 right: 10px;
117 font-weight: bold;
117 font-weight: bold;
118 }
118 }
119
119
120 .status_idle {
120 .status_idle {
121 color: gray;
121 color: gray;
122 }
122 }
123
123
124 .status_busy {
124 .status_busy {
125 color: red;
125 color: red;
126 }
126 }
127
127
128 .status_restarting {
128 .status_restarting {
129 color: black;
129 color: black;
130 }
130 }
131
131
132 div.notebook {
132 div.notebook {
133 /* This is a trick from Google Docs. We set the height artificially low
133 /* This is a trick from Google Docs. We set the height artificially low
134 and set overflow-y: auto to force scrolling of this dev when needed,
134 and set overflow-y: auto to force scrolling of this dev when needed,
135 but prevent the browser window from scrolling. Crazy hack */
135 but prevent the browser window from scrolling. Crazy hack */
136 height: 15px;
136 height: 15px;
137 overflow-y: auto;
137 overflow-y: auto;
138 overflow-x: hidden;
138 overflow-x: hidden;
139 padding: 5px;
139 padding: 5px;
140 background-color: white;
140 background-color: white;
141 font-size: 12pt;
141 font-size: 12pt;
142
142
143 /* Allow the notebook div to take up the rest of the vertical space */
143 /* Allow the notebook div to take up the rest of the vertical space */
144 box-flex: 1;
144 box-flex: 1;
145 -webkit-box-flex: 1;
145 -webkit-box-flex: 1;
146 -moz-box-flex: 1;
146 -moz-box-flex: 1;
147
147
148 box-sizing: border-box;
148 box-sizing: border-box;
149 -moz-box-sizing: border-box;
149 -moz-box-sizing: border-box;
150 -webkit-box-sizing: border-box;
150 -webkit-box-sizing: border-box;
151 }
151 }
152
152
153 div.cell {
153 div.cell {
154 width: 100%;
154 width: 100%;
155 padding: 5px;
155 padding: 5px;
156 position: relative;
156 position: relative;
157
157
158 box-sizing: border-box;
158 box-sizing: border-box;
159 -moz-box-sizing: border-box;
159 -moz-box-sizing: border-box;
160 -webkit-box-sizing: border-box;
160 -webkit-box-sizing: border-box;
161
161
162 display: box;
162 display: box;
163 display: -webkit-box;
163 display: -webkit-box;
164 display: -moz-box;
164 display: -moz-box;
165
165
166 box-orient: vertical;
166 box-orient: vertical;
167 -webkit-box-orient: vertical;
167 -webkit-box-orient: vertical;
168 -moz-box-orient: vertical;
168 -moz-box-orient: vertical;
169 }
169 }
170
170
171 div.code_cell {
171 div.code_cell {
172 background-color: white;
172 background-color: white;
173 }
173 }
174
174
175 div.prompt {
175 div.prompt {
176 width: 90px;
176 width: 90px;
177 padding: 0px;
177 padding: 0px;
178 margin: 0px;
178 margin: 0px;
179 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
179 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
180 }
180 }
181
181
182 div.input {
182 div.input {
183 display: box;
183 display: box;
184 display: -webkit-box;
184 display: -webkit-box;
185 display: -moz-box;
185 display: -moz-box;
186
186
187 box-orient: horizontal;
187 box-orient: horizontal;
188 -webkit-box-orient: horizontal;
188 -webkit-box-orient: horizontal;
189 -moz-box-orient: horizontal;
189 -moz-box-orient: horizontal;
190 }
190 }
191
191
192 div.input_prompt {
192 div.input_prompt {
193 color: blue;
193 color: blue;
194 }
194 }
195
195
196 div.input_area {
196 div.input_area {
197 box-flex: 1;
197 box-flex: 1;
198 -webkit-box-flex: 1;
198 -webkit-box-flex: 1;
199 -moz-box-flex: 1;
199 -moz-box-flex: 1;
200
200
201 box-sizing: border-box;
201 box-sizing: border-box;
202 -moz-box-sizing: border-box;
202 -moz-box-sizing: border-box;
203 -webkit-box-sizing: border-box;
203 -webkit-box-sizing: border-box;
204 }
204 }
205
205
206 textarea.input_textarea {
206 textarea.input_textarea {
207 width: 100%;
207 width: 100%;
208 text-align: left;
208 text-align: left;
209 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
209 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
210 font-size: 12pt;
210 font-size: 12pt;
211 border-style: none;
211 border-style: none;
212 padding: 0px;
212 padding: 0px;
213 margin: 0px;
213 margin: 0px;
214 overflow: auto;
214 overflow: auto;
215 outline: none;
215 outline: none;
216 resize: none;
216 resize: none;
217 }
217 }
218
218
219 div.output {
219 div.output {
220 display: box;
220 display: box;
221 display: -webkit-box;
221 display: -webkit-box;
222 display: -moz-box;
222 display: -moz-box;
223
223
224 box-orient: vertical;
224 box-orient: vertical;
225 -webkit-box-orient: vertical;
225 -webkit-box-orient: vertical;
226 -moz-box-orient: vertical;
226 -moz-box-orient: vertical;
227 }
227 }
228
228
229 div.output_pyout {
229 div.output_pyout {
230 display: box;
230 display: box;
231 display: -webkit-box;
231 display: -webkit-box;
232 display: -moz-box;
232 display: -moz-box;
233
233
234 box-orient: horizontal;
234 box-orient: horizontal;
235 -webkit-box-orient: horizontal;
235 -webkit-box-orient: horizontal;
236 -moz-box-orient: horizontal;
236 -moz-box-orient: horizontal;
237 }
237 }
238
238
239 div.output_prompt {
239 div.output_prompt {
240 color: red;
240 color: red;
241 }
241 }
242
242
243 div.output_area {
243 div.output_area {
244 text-align: left;
244 text-align: left;
245 color: black;
245 color: black;
246 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
246 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
247 font-size: 12pt;
247 font-size: 12pt;
248 }
248 }
249
249
250 div.output_latex {
250 div.output_latex {
251 font-size: 13pt;
251 font-size: 13pt;
252 }
252 }
253
253
254 .box_flex1 {
254 .box_flex1 {
255 box-flex: 1;
255 box-flex: 1;
256 -webkit-box-flex: 1;
256 -webkit-box-flex: 1;
257 -moz-box-flex: 1;
257 -moz-box-flex: 1;
258 }
258 }
259
259
260 div.text_cell {
260 div.text_cell {
261 background-color: white;
261 background-color: white;
262 }
262 }
263
263
264 textarea.text_cell_input {
264 textarea.text_cell_input {
265 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
265 font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
266 /* font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
266 /* font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
267 /* Slightly bigger than the rest of the notebook */
267 /* Slightly bigger than the rest of the notebook */
268 font-size: 13pt;
268 font-size: 13pt;
269 outline: none;
269 outline: none;
270 resize: none;
270 resize: none;
271 width: inherit;
271 width: inherit;
272 border-style: none;
272 border-style: none;
273 padding: 0px;
273 padding: 0px;
274 margin: 0px;
274 margin: 0px;
275 color: black;
275 color: black;
276 }
276 }
277
277
278 div.text_cell_render {
278 div.text_cell_render {
279 font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
279 font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
280 /* Slightly bigger than the rest of the notebook */
280 /* Slightly bigger than the rest of the notebook */
281 font-size: 13pt;
281 font-size: 13pt;
282 outline: none;
282 outline: none;
283 resize: none;
283 resize: none;
284 width: inherit;
284 width: inherit;
285 border-style: none;
285 border-style: none;
286 padding: 5px;
286 padding: 5px;
287 color: black;
287 color: black;
288 }
288 }
289
289
290 div.text_cell_render em {
290 div.text_cell_render em {font-style: italic;}
291 font-style: italic;
291 div.text_cell_render strong {font-weight: bold;}
292 }
292 div.text_cell_render u {text-decoration: underline;}
293 div.text_cell_render :link { text-decoration: underline }
294 div.text_cell_render :visited { text-decoration: underline }
295 div.text_cell_render h1 {font-size: 2.0em; margin: .67em 0; font-weight: bold;}
296 div.text_cell_render h2 {font-size: 1.5em; margin: .75em 0; font-weight: bold;}
297 div.text_cell_render h3 {font-size: 1.17em; margin: .83em 0; font-weight: bold;}
298 div.text_cell_render h4 {margin: 1.12em 0; font-weight: bold;}
299 div.text_cell_render h5 {font-size: .83em; margin: 1.5em 0; font-weight: bold;}
300 div.text_cell_render h6 {font-size: .75em; margin: 1.67em 0; font-weight: bold;}
301 div.text_cell_render ul {list-style:disc; margin-left: 40px;}
302 div.text_cell_render ul ul {list-style:square; margin-left: 40px;}
303 div.text_cell_render ul ul ul {list-style:circle; margin-left: 40px;}
304 div.text_cell_render ol {list-style:upper-roman; margin-left: 40px;}
305 div.text_cell_render ol ol {list-style:upper-alpha;}
306 div.text_cell_render ol ol ol {list-style:decimal;}
307 div.text_cell_render ol ol ol ol {list-style:lower-alpha;}
308 div.text_cell_render ol ol ol ol ol {list-style:lower-roman;}
293
309
294 div.text_cell_render strong {
295 font-weight: bold;
296 }
297
310
General Comments 0
You need to be logged in to leave comments. Login now