##// END OF EJS Templates
Avoid using important
Jonathan Frederic -
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 #header, #header-spacer {
100 #header-spacer {
98 display: none !important;
101 display: none;
99 }
102 }
100 }
103 }
General Comments 0
You need to be logged in to leave comments. Login now