##// END OF EJS Templates
Add LESS that enables meta-p printing
Jonathan Frederic -
Show More
@@ -1,94 +1,101 b''
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 }
11 }
12
12
13 &.edit_mode {
13 &.edit_mode {
14 border-color: green;
14 border-color: green;
15 }
15 }
16
16
17 width: 100%;
17 width: 100%;
18 padding: 5px 5px 5px 0px;
18 padding: 5px 5px 5px 0px;
19 /* This acts as a spacer between cells, that is outside the border */
19 /* This acts as a spacer between cells, that is outside the border */
20 margin: 0px;
20 margin: 0px;
21 outline: none;
21 outline: none;
22 }
22 }
23
23
24 /* Don't border the cells when printing */
25 @media print {
26 div.cell {
27 border-color: transparent !important;
28 }
29 }
30
24 div.prompt {
31 div.prompt {
25 /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
32 /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
26 min-width: 15ex;
33 min-width: 15ex;
27 /* This padding is tuned to match the padding on the CodeMirror editor. */
34 /* This padding is tuned to match the padding on the CodeMirror editor. */
28 padding: @code_padding;
35 padding: @code_padding;
29 margin: 0px;
36 margin: 0px;
30 font-family: @font-family-monospace;
37 font-family: @font-family-monospace;
31 text-align: right;
38 text-align: right;
32 /* This has to match that of the the CodeMirror class line-height below */
39 /* This has to match that of the the CodeMirror class line-height below */
33 line-height: @code_line_height;
40 line-height: @code_line_height;
34 }
41 }
35
42
36 @media (max-width: 480px) {
43 @media (max-width: 480px) {
37 // prompts are in the main column on small screens,
44 // prompts are in the main column on small screens,
38 // so text should be left-aligned
45 // so text should be left-aligned
39 div.prompt {
46 div.prompt {
40 text-align: left;
47 text-align: left;
41 }
48 }
42 }
49 }
43
50
44 div.inner_cell {
51 div.inner_cell {
45 .vbox();
52 .vbox();
46 .box-flex1();
53 .box-flex1();
47 }
54 }
48
55
49 /* input_area and input_prompt must match in top border and margin for alignment */
56 /* input_area and input_prompt must match in top border and margin for alignment */
50 div.input_area {
57 div.input_area {
51 border: 1px solid @light_border_color;
58 border: 1px solid @light_border_color;
52 .corner-all;
59 .corner-all;
53 background: @cell_background;
60 background: @cell_background;
54 line-height: @code_line_height;
61 line-height: @code_line_height;
55 }
62 }
56
63
57 /* This is needed so that empty prompt areas can collapse to zero height when there
64 /* This is needed so that empty prompt areas can collapse to zero height when there
58 is no content in the output_subarea and the prompt. The main purpose of this is
65 is no content in the output_subarea and the prompt. The main purpose of this is
59 to make sure that empty JavaScript output_subareas have no height. */
66 to make sure that empty JavaScript output_subareas have no height. */
60 div.prompt:empty {
67 div.prompt:empty {
61 padding-top: 0;
68 padding-top: 0;
62 padding-bottom: 0;
69 padding-bottom: 0;
63 }
70 }
64
71
65 div.unrecognized_cell {
72 div.unrecognized_cell {
66 // from text_cell
73 // from text_cell
67 padding: 5px 5px 5px 0px;
74 padding: 5px 5px 5px 0px;
68 .hbox();
75 .hbox();
69
76
70 .inner_cell {
77 .inner_cell {
71 .border-radius(@border-radius-base);
78 .border-radius(@border-radius-base);
72 padding: 5px;
79 padding: 5px;
73 font-weight: bold;
80 font-weight: bold;
74 color: red;
81 color: red;
75 border: 1px solid @light_border_color;
82 border: 1px solid @light_border_color;
76 background: darken(@cell_background, 5%);
83 background: darken(@cell_background, 5%);
77 // remove decoration from link
84 // remove decoration from link
78 a {
85 a {
79 color: inherit;
86 color: inherit;
80 text-decoration: none;
87 text-decoration: none;
81
88
82 &:hover {
89 &:hover {
83 color: inherit;
90 color: inherit;
84 text-decoration: none;
91 text-decoration: none;
85 }
92 }
86 }
93 }
87 }
94 }
88 }
95 }
89 @media (max-width: 480px) {
96 @media (max-width: 480px) {
90 // remove prompt indentation on small screens
97 // remove prompt indentation on small screens
91 div.unrecognized_cell > div.prompt {
98 div.unrecognized_cell > div.prompt {
92 display: none;
99 display: none;
93 }
100 }
94 }
101 }
@@ -1,44 +1,48 b''
1 div.code_cell {
1 /* avoid page breaking on code cells when printing */
2 @media print {
3 div.code_cell {
4 page-break-inside: avoid;
5 }
2 }
6 }
3
7
4 /* 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 */
5 div.code_cell.running {
9 div.code_cell.running {
6 }
10 }
7
11
8 div.input {
12 div.input {
9 page-break-inside: avoid;
13 page-break-inside: avoid;
10 .hbox();
14 .hbox();
11 }
15 }
12
16
13 @media (max-width: 480px) {
17 @media (max-width: 480px) {
14 // move prompts above code on small screens
18 // move prompts above code on small screens
15 div.input {
19 div.input {
16 .vbox();
20 .vbox();
17 }
21 }
18 }
22 }
19
23
20 /* 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 */
21 div.input_prompt {
25 div.input_prompt {
22 color: @input_prompt_color;
26 color: @input_prompt_color;
23 border-top: 1px solid transparent;
27 border-top: 1px solid transparent;
24 }
28 }
25
29
26 // 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
27 // 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
28 // 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
29 // help the basic template when paired with our CSS.
33 // help the basic template when paired with our CSS.
30
34
31 div.input_area > div.highlight {
35 div.input_area > div.highlight {
32 margin: @code_padding;
36 margin: @code_padding;
33 border: none;
37 border: none;
34 padding: 0px;
38 padding: 0px;
35 background-color: transparent;
39 background-color: transparent;
36 }
40 }
37
41
38 div.input_area > div.highlight > pre {
42 div.input_area > div.highlight > pre {
39 margin: 0px;
43 margin: 0px;
40 border: none;
44 border: none;
41 padding: 0px;
45 padding: 0px;
42 background-color: transparent;
46 background-color: transparent;
43 }
47 }
44
48
@@ -1,93 +1,100 b''
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 }
93 }
94
95 /* Hide the header when printing */
96 @media print {
97 #header, #header-spacer {
98 display: none !important;
99 }
100 }
General Comments 0
You need to be logged in to leave comments. Login now