Show More
@@ -1,101 +1,102 | |||||
1 | div.cell { |
|
1 | div.cell { | |
2 | border: 1px solid transparent; |
|
2 | border: 1px solid transparent; | |
3 | .vbox(); |
|
3 | .vbox(); | |
4 | .corner-all(); |
|
4 | .corner-all(); | |
5 | .border-box-sizing(); |
|
5 | .border-box-sizing(); | |
6 | border-width: thin; |
|
6 | border-width: thin; | |
7 | border-style: solid; |
|
7 | border-style: solid; | |
8 |
|
8 | |||
9 | &.selected { |
|
9 | &.selected { | |
10 | border-color: @border_color; |
|
10 | border-color: @border_color; | |
|
11 | /* Don't border the cells when printing */ | |||
|
12 | @media print { | |||
|
13 | border-color: transparent; | |||
|
14 | } | |||
11 | } |
|
15 | } | |
12 |
|
16 | |||
13 | &.edit_mode { |
|
17 | &.edit_mode { | |
14 | border-color: green; |
|
18 | border-color: green; | |
|
19 | /* Don't border the cells when printing */ | |||
|
20 | @media print { | |||
|
21 | border-color: transparent; | |||
|
22 | } | |||
15 | } |
|
23 | } | |
16 |
|
24 | |||
17 | width: 100%; |
|
25 | width: 100%; | |
18 | padding: 5px 5px 5px 0px; |
|
26 | padding: 5px 5px 5px 0px; | |
19 | /* This acts as a spacer between cells, that is outside the border */ |
|
27 | /* This acts as a spacer between cells, that is outside the border */ | |
20 | margin: 0px; |
|
28 | margin: 0px; | |
21 | outline: none; |
|
29 | outline: none; | |
22 | } |
|
30 | } | |
23 |
|
31 | |||
24 | /* Don't border the cells when printing */ |
|
|||
25 | @media print { |
|
|||
26 | div.cell { |
|
|||
27 | border-color: transparent !important; |
|
|||
28 | } |
|
|||
29 | } |
|
|||
30 |
|
||||
31 | div.prompt { |
|
32 | div.prompt { | |
32 | /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */ |
|
33 | /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */ | |
33 | min-width: 15ex; |
|
34 | min-width: 15ex; | |
34 | /* This padding is tuned to match the padding on the CodeMirror editor. */ |
|
35 | /* This padding is tuned to match the padding on the CodeMirror editor. */ | |
35 | padding: @code_padding; |
|
36 | padding: @code_padding; | |
36 | margin: 0px; |
|
37 | margin: 0px; | |
37 | font-family: @font-family-monospace; |
|
38 | font-family: @font-family-monospace; | |
38 | text-align: right; |
|
39 | text-align: right; | |
39 | /* This has to match that of the the CodeMirror class line-height below */ |
|
40 | /* This has to match that of the the CodeMirror class line-height below */ | |
40 | line-height: @code_line_height; |
|
41 | line-height: @code_line_height; | |
41 | } |
|
42 | } | |
42 |
|
43 | |||
43 | @media (max-width: 480px) { |
|
44 | @media (max-width: 480px) { | |
44 | // prompts are in the main column on small screens, |
|
45 | // prompts are in the main column on small screens, | |
45 | // so text should be left-aligned |
|
46 | // so text should be left-aligned | |
46 | div.prompt { |
|
47 | div.prompt { | |
47 | text-align: left; |
|
48 | text-align: left; | |
48 | } |
|
49 | } | |
49 | } |
|
50 | } | |
50 |
|
51 | |||
51 | div.inner_cell { |
|
52 | div.inner_cell { | |
52 | .vbox(); |
|
53 | .vbox(); | |
53 | .box-flex1(); |
|
54 | .box-flex1(); | |
54 | } |
|
55 | } | |
55 |
|
56 | |||
56 | /* input_area and input_prompt must match in top border and margin for alignment */ |
|
57 | /* input_area and input_prompt must match in top border and margin for alignment */ | |
57 | div.input_area { |
|
58 | div.input_area { | |
58 | border: 1px solid @light_border_color; |
|
59 | border: 1px solid @light_border_color; | |
59 | .corner-all; |
|
60 | .corner-all; | |
60 | background: @cell_background; |
|
61 | background: @cell_background; | |
61 | line-height: @code_line_height; |
|
62 | line-height: @code_line_height; | |
62 | } |
|
63 | } | |
63 |
|
64 | |||
64 | /* This is needed so that empty prompt areas can collapse to zero height when there |
|
65 | /* This is needed so that empty prompt areas can collapse to zero height when there | |
65 | is no content in the output_subarea and the prompt. The main purpose of this is |
|
66 | is no content in the output_subarea and the prompt. The main purpose of this is | |
66 | to make sure that empty JavaScript output_subareas have no height. */ |
|
67 | to make sure that empty JavaScript output_subareas have no height. */ | |
67 | div.prompt:empty { |
|
68 | div.prompt:empty { | |
68 | padding-top: 0; |
|
69 | padding-top: 0; | |
69 | padding-bottom: 0; |
|
70 | padding-bottom: 0; | |
70 | } |
|
71 | } | |
71 |
|
72 | |||
72 | div.unrecognized_cell { |
|
73 | div.unrecognized_cell { | |
73 | // from text_cell |
|
74 | // from text_cell | |
74 | padding: 5px 5px 5px 0px; |
|
75 | padding: 5px 5px 5px 0px; | |
75 | .hbox(); |
|
76 | .hbox(); | |
76 |
|
77 | |||
77 | .inner_cell { |
|
78 | .inner_cell { | |
78 | .border-radius(@border-radius-base); |
|
79 | .border-radius(@border-radius-base); | |
79 | padding: 5px; |
|
80 | padding: 5px; | |
80 | font-weight: bold; |
|
81 | font-weight: bold; | |
81 | color: red; |
|
82 | color: red; | |
82 | border: 1px solid @light_border_color; |
|
83 | border: 1px solid @light_border_color; | |
83 | background: darken(@cell_background, 5%); |
|
84 | background: darken(@cell_background, 5%); | |
84 | // remove decoration from link |
|
85 | // remove decoration from link | |
85 | a { |
|
86 | a { | |
86 | color: inherit; |
|
87 | color: inherit; | |
87 | text-decoration: none; |
|
88 | text-decoration: none; | |
88 |
|
89 | |||
89 | &:hover { |
|
90 | &:hover { | |
90 | color: inherit; |
|
91 | color: inherit; | |
91 | text-decoration: none; |
|
92 | text-decoration: none; | |
92 | } |
|
93 | } | |
93 | } |
|
94 | } | |
94 | } |
|
95 | } | |
95 | } |
|
96 | } | |
96 | @media (max-width: 480px) { |
|
97 | @media (max-width: 480px) { | |
97 | // remove prompt indentation on small screens |
|
98 | // remove prompt indentation on small screens | |
98 | div.unrecognized_cell > div.prompt { |
|
99 | div.unrecognized_cell > div.prompt { | |
99 | display: none; |
|
100 | display: none; | |
100 | } |
|
101 | } | |
101 | } |
|
102 | } |
@@ -1,48 +1,48 | |||||
|
1 | div.code_cell { | |||
1 | /* avoid page breaking on code cells when printing */ |
|
2 | /* avoid page breaking on code cells when printing */ | |
2 | @media print { |
|
3 | @media print { | |
3 | div.code_cell { |
|
|||
4 | page-break-inside: avoid; |
|
4 | page-break-inside: avoid; | |
5 | } |
|
5 | } | |
6 | } |
|
6 | } | |
7 |
|
7 | |||
8 | /* any special styling for code cells that are currently running goes here */ |
|
8 | /* any special styling for code cells that are currently running goes here */ | |
9 | div.code_cell.running { |
|
9 | div.code_cell.running { | |
10 | } |
|
10 | } | |
11 |
|
11 | |||
12 | div.input { |
|
12 | div.input { | |
13 | page-break-inside: avoid; |
|
13 | page-break-inside: avoid; | |
14 | .hbox(); |
|
14 | .hbox(); | |
15 | } |
|
15 | } | |
16 |
|
16 | |||
17 | @media (max-width: 480px) { |
|
17 | @media (max-width: 480px) { | |
18 | // move prompts above code on small screens |
|
18 | // move prompts above code on small screens | |
19 | div.input { |
|
19 | div.input { | |
20 | .vbox(); |
|
20 | .vbox(); | |
21 | } |
|
21 | } | |
22 | } |
|
22 | } | |
23 |
|
23 | |||
24 | /* input_area and input_prompt must match in top border and margin for alignment */ |
|
24 | /* input_area and input_prompt must match in top border and margin for alignment */ | |
25 | div.input_prompt { |
|
25 | div.input_prompt { | |
26 | color: @input_prompt_color; |
|
26 | color: @input_prompt_color; | |
27 | border-top: 1px solid transparent; |
|
27 | border-top: 1px solid transparent; | |
28 | } |
|
28 | } | |
29 |
|
29 | |||
30 | // The styles related to div.highlight are for nbconvert HTML output only. This works |
|
30 | // The styles related to div.highlight are for nbconvert HTML output only. This works | |
31 | // because the .highlight div isn't present in the live notebook. We could put this into |
|
31 | // because the .highlight div isn't present in the live notebook. We could put this into | |
32 | // nbconvert, but it easily falls out of sync, can't use our less variables and doesn't |
|
32 | // nbconvert, but it easily falls out of sync, can't use our less variables and doesn't | |
33 | // help the basic template when paired with our CSS. |
|
33 | // help the basic template when paired with our CSS. | |
34 |
|
34 | |||
35 | div.input_area > div.highlight { |
|
35 | div.input_area > div.highlight { | |
36 | margin: @code_padding; |
|
36 | margin: @code_padding; | |
37 | border: none; |
|
37 | border: none; | |
38 | padding: 0px; |
|
38 | padding: 0px; | |
39 | background-color: transparent; |
|
39 | background-color: transparent; | |
40 | } |
|
40 | } | |
41 |
|
41 | |||
42 | div.input_area > div.highlight > pre { |
|
42 | div.input_area > div.highlight > pre { | |
43 | margin: 0px; |
|
43 | margin: 0px; | |
44 | border: none; |
|
44 | border: none; | |
45 | padding: 0px; |
|
45 | padding: 0px; | |
46 | background-color: transparent; |
|
46 | background-color: transparent; | |
47 | } |
|
47 | } | |
48 |
|
48 |
@@ -1,100 +1,103 | |||||
1 |
|
1 | |||
2 | body { |
|
2 | body { | |
3 | background-color: @body-bg; |
|
3 | background-color: @body-bg; | |
4 | } |
|
4 | } | |
5 |
|
5 | |||
6 | @media (max-width: 767px) { |
|
6 | @media (max-width: 767px) { | |
7 | // remove bootstrap-responsive's body padding on small screens |
|
7 | // remove bootstrap-responsive's body padding on small screens | |
8 | body.notebook_app { |
|
8 | body.notebook_app { | |
9 | padding-left: 0px; |
|
9 | padding-left: 0px; | |
10 | padding-right: 0px; |
|
10 | padding-right: 0px; | |
11 | } |
|
11 | } | |
12 | } |
|
12 | } | |
13 |
|
13 | |||
14 | #ipython-main-app { |
|
14 | #ipython-main-app { | |
15 | .border-box-sizing(); |
|
15 | .border-box-sizing(); | |
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 | &:hover{ |
|
24 | &:hover{ | |
25 | // ensure body is lighter on dark palette, |
|
25 | // ensure body is lighter on dark palette, | |
26 | // and vice versa |
|
26 | // and vice versa | |
27 | background-color:contrast(@body-bg, lighten(@body-bg,30%), darken(@body-bg,10%)); |
|
27 | background-color:contrast(@body-bg, lighten(@body-bg,30%), darken(@body-bg,10%)); | |
28 | } |
|
28 | } | |
29 | .corner-all; |
|
29 | .corner-all; | |
30 | } |
|
30 | } | |
31 |
|
31 | |||
32 | div#notebook_panel { |
|
32 | div#notebook_panel { | |
33 | margin: 0px 0px 0px 0px; |
|
33 | margin: 0px 0px 0px 0px; | |
34 | padding: 0px; |
|
34 | padding: 0px; | |
35 | .border-box-sizing(); |
|
35 | .border-box-sizing(); | |
36 | } |
|
36 | } | |
37 | div#notebook { |
|
37 | div#notebook { | |
38 | font-size: @notebook_font_size; |
|
38 | font-size: @notebook_font_size; | |
39 | line-height: @notebook_line_height; |
|
39 | line-height: @notebook_line_height; | |
40 | overflow-y: hidden; |
|
40 | overflow-y: hidden; | |
41 | overflow-x: auto; |
|
41 | overflow-x: auto; | |
42 | width: 100%; |
|
42 | width: 100%; | |
43 | /* This spaces the cell away from the edge of the notebook area */ |
|
43 | /* This spaces the cell away from the edge of the notebook area */ | |
44 | padding: 2em 0 2em 0; |
|
44 | padding: 2em 0 2em 0; | |
45 | margin: 0px; |
|
45 | margin: 0px; | |
46 | outline: none; |
|
46 | outline: none; | |
47 | .border-box-sizing(); |
|
47 | .border-box-sizing(); | |
48 | } |
|
48 | } | |
49 |
|
49 | |||
50 | div.ui-widget-content { |
|
50 | div.ui-widget-content { | |
51 | border: 1px solid @border_color; |
|
51 | border: 1px solid @border_color; | |
52 | outline: none; |
|
52 | outline: none; | |
53 | } |
|
53 | } | |
54 |
|
54 | |||
55 | pre.dialog { |
|
55 | pre.dialog { | |
56 | background-color: @cell_background; |
|
56 | background-color: @cell_background; | |
57 | border: 1px solid #ddd; |
|
57 | border: 1px solid #ddd; | |
58 | .corner-all; |
|
58 | .corner-all; | |
59 | padding: 0.4em; |
|
59 | padding: 0.4em; | |
60 | padding-left: 2em; |
|
60 | padding-left: 2em; | |
61 | } |
|
61 | } | |
62 |
|
62 | |||
63 | p.dialog { |
|
63 | p.dialog { | |
64 | padding : 0.2em; |
|
64 | padding : 0.2em; | |
65 | } |
|
65 | } | |
66 |
|
66 | |||
67 | /* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems |
|
67 | /* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems | |
68 | to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do. |
|
68 | to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do. | |
69 | */ |
|
69 | */ | |
70 | pre, code, kbd, samp { white-space: pre-wrap; } |
|
70 | pre, code, kbd, samp { white-space: pre-wrap; } | |
71 |
|
71 | |||
72 | #fonttest { |
|
72 | #fonttest { | |
73 | font-family: @font-family-monospace; |
|
73 | font-family: @font-family-monospace; | |
74 | } |
|
74 | } | |
75 |
|
75 | |||
76 | p { |
|
76 | p { | |
77 | margin-bottom:0; |
|
77 | margin-bottom:0; | |
78 | } |
|
78 | } | |
79 |
|
79 | |||
80 | .end_space { |
|
80 | .end_space { | |
81 | height: 200px; |
|
81 | height: 200px; | |
82 | } |
|
82 | } | |
83 |
|
83 | |||
84 | .lower-header-bar { |
|
84 | .lower-header-bar { | |
85 | width: 100%; |
|
85 | width: 100%; | |
86 | height: 0px; |
|
86 | height: 0px; | |
87 | border-bottom: 1px solid @navbar-default-border; |
|
87 | border-bottom: 1px solid @navbar-default-border; | |
88 | margin-bottom: -1px; |
|
88 | margin-bottom: -1px; | |
89 | } |
|
89 | } | |
90 |
|
90 | |||
91 | .notebook_app #header { |
|
91 | .notebook_app #header { | |
92 | .box-shadow(@notebook-shadow); |
|
92 | .box-shadow(@notebook-shadow); | |
|
93 | @media print { | |||
|
94 | display: none; | |||
|
95 | } | |||
93 | } |
|
96 | } | |
94 |
|
97 | |||
95 | /* Hide the header when printing */ |
|
98 | /* Hide the header when printing */ | |
96 | @media print { |
|
99 | @media print { | |
97 |
|
|
100 | #header-spacer { | |
98 |
display: none |
|
101 | display: none; | |
99 | } |
|
102 | } | |
100 | } |
|
103 | } |
General Comments 0
You need to be logged in to leave comments.
Login now