##// END OF EJS Templates
Change z-index of ipython_tooltip...
Ramiro Gómez -
Show More
@@ -1,158 +1,158
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 /** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
7 /** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
8 * of chance of beeing generated from the ../less/[samename].less file, you can
8 * of chance of beeing generated from the ../less/[samename].less file, you can
9 * try to get back the less file by reverting somme commit in history
9 * try to get back the less file by reverting somme commit in history
10 **/
10 **/
11
11
12 /*
12 /*
13 * We'll try to get something pretty, so we
13 * We'll try to get something pretty, so we
14 * have some strange css to have the scroll bar on
14 * have some strange css to have the scroll bar on
15 * the left with fix button on the top right of the tooltip
15 * the left with fix button on the top right of the tooltip
16 */
16 */
17
17
18 // double slash comment are remove by less compilation
18 // double slash comment are remove by less compilation
19 // **
19 // **
20 // * Less mixins
20 // * Less mixins
21 // **/
21 // **/
22
22
23 // Four color of the background
23 // Four color of the background
24 @import "variables" ;
24 @import "variables" ;
25
25
26 .dropshadow(){
26 .dropshadow(){
27 -moz-box-shadow: 0px 6px 10px -1px #adadad;
27 -moz-box-shadow: 0px 6px 10px -1px #adadad;
28 -webkit-box-shadow: 0px 6px 10px -1px #adadad;
28 -webkit-box-shadow: 0px 6px 10px -1px #adadad;
29 box-shadow: 0px 6px 10px -1px #adadad;
29 box-shadow: 0px 6px 10px -1px #adadad;
30 }
30 }
31
31
32 // smoth height adaptation
32 // smoth height adaptation
33 .smoothheight(@t:500ms) {
33 .smoothheight(@t:500ms) {
34 -webkit-transition-property: height;
34 -webkit-transition-property: height;
35 -webkit-transition-duration: @t;
35 -webkit-transition-duration: @t;
36 -moz-transition-property: height;
36 -moz-transition-property: height;
37 -moz-transition-duration: @t;
37 -moz-transition-duration: @t;
38 transition-property: height;
38 transition-property: height;
39 transition-duration: @t;
39 transition-duration: @t;
40 }
40 }
41
41
42 @-moz-keyframes fadeOut {
42 @-moz-keyframes fadeOut {
43 from {opacity:1;}
43 from {opacity:1;}
44 to {opacity:0;}
44 to {opacity:0;}
45 }
45 }
46
46
47 @-webkit-keyframes fadeOut {
47 @-webkit-keyframes fadeOut {
48 from {opacity:1;}
48 from {opacity:1;}
49 to {opacity:0;}
49 to {opacity:0;}
50 }
50 }
51
51
52 @-moz-keyframes fadeIn {
52 @-moz-keyframes fadeIn {
53 from {opacity:0;}
53 from {opacity:0;}
54 to {opacity:1;}
54 to {opacity:1;}
55 }
55 }
56
56
57 @-webkit-keyframes fadeIn {
57 @-webkit-keyframes fadeIn {
58 from {opacity:0;}
58 from {opacity:0;}
59 to {opacity:1;}
59 to {opacity:1;}
60 }
60 }
61
61
62 /*properties of tooltip after "expand"*/
62 /*properties of tooltip after "expand"*/
63 .bigtooltip {
63 .bigtooltip {
64 overflow: auto;
64 overflow: auto;
65 height: 200px;
65 height: 200px;
66 .smoothheight();
66 .smoothheight();
67 }
67 }
68
68
69 /*properties of tooltip before "expand"*/
69 /*properties of tooltip before "expand"*/
70 .smalltooltip{
70 .smalltooltip{
71 .smoothheight();
71 .smoothheight();
72 text-overflow: ellipsis;
72 text-overflow: ellipsis;
73 overflow: hidden;
73 overflow: hidden;
74 height:80px;
74 height:80px;
75 }
75 }
76
76
77 .tooltipbuttons
77 .tooltipbuttons
78 {
78 {
79 position: absolute;
79 position: absolute;
80 padding-right : 15px;
80 padding-right : 15px;
81 top : 0px;
81 top : 0px;
82 right:0px;
82 right:0px;
83 }
83 }
84
84
85 .tooltiptext
85 .tooltiptext
86 {
86 {
87 /*avoid the button to overlap on some docstring*/
87 /*avoid the button to overlap on some docstring*/
88 padding-right:30px
88 padding-right:30px
89 }
89 }
90
90
91 .ipython_tooltip {
91 .ipython_tooltip {
92 max-width:700px;
92 max-width:700px;
93 /*fade-in animation when inserted*/
93 /*fade-in animation when inserted*/
94 -webkit-animation: fadeOut 400ms;
94 -webkit-animation: fadeOut 400ms;
95 -moz-animation: fadeOut 400ms;
95 -moz-animation: fadeOut 400ms;
96 animation: fadeOut 400ms;
96 animation: fadeOut 400ms;
97 -webkit-animation: fadeIn 400ms;
97 -webkit-animation: fadeIn 400ms;
98 -moz-animation: fadeIn 400ms;
98 -moz-animation: fadeIn 400ms;
99 animation: fadeIn 400ms;
99 animation: fadeIn 400ms;
100 vertical-align: middle;
100 vertical-align: middle;
101 background-color: @cell_background;
101 background-color: @cell_background;
102
102
103 overflow : visible;
103 overflow : visible;
104 border: @border_color @border_width solid;
104 border: @border_color @border_width solid;
105 outline: none;
105 outline: none;
106 padding: 3px;
106 padding: 3px;
107 margin: 0px;
107 margin: 0px;
108 padding-left:7px;
108 padding-left:7px;
109 font-family: @monoFontFamily;
109 font-family: @monoFontFamily;
110 min-height:50px;
110 min-height:50px;
111
111
112 .dropshadow;
112 .dropshadow;
113 .corner-all;
113 .corner-all;
114
114
115 a {
115 a {
116 float:right;
116 float:right;
117 };
117 };
118 position: absolute;
118 position: absolute;
119
119
120 z-index: 2;
120 z-index: 1000;
121
121
122 .tooltiptext {
122 .tooltiptext {
123 pre {
123 pre {
124 border: 0;
124 border: 0;
125 .border-radius(0);
125 .border-radius(0);
126 font-size: 100%;
126 font-size: 100%;
127 background-color: @cell_background;
127 background-color: @cell_background;
128 }
128 }
129 }
129 }
130 }
130 }
131
131
132 .pretooltiparrow {
132 .pretooltiparrow {
133 left: 0px;
133 left: 0px;
134 margin: 0px;
134 margin: 0px;
135 top: -16px;
135 top: -16px;
136 width: 40px;
136 width: 40px;
137 height: 16px;
137 height: 16px;
138 overflow: hidden;
138 overflow: hidden;
139 position: absolute;
139 position: absolute;
140
140
141 }
141 }
142
142
143 .pretooltiparrow:before {
143 .pretooltiparrow:before {
144 background-color : @cell_background;
144 background-color : @cell_background;
145 border : @border_width @border_color solid;
145 border : @border_width @border_color solid;
146 z-index:11;
146 z-index:11;
147 content: "";
147 content: "";
148 position: absolute;
148 position: absolute;
149 left: 15px;
149 left: 15px;
150 top: 10px;
150 top: 10px;
151 width: 25px;
151 width: 25px;
152 height: 25px;
152 height: 25px;
153 @theta : 45deg;
153 @theta : 45deg;
154 -webkit-transform: rotate(@theta);
154 -webkit-transform: rotate(@theta);
155 -moz-transform: rotate(@theta);
155 -moz-transform: rotate(@theta);
156 -ms-transform: rotate(@theta);
156 -ms-transform: rotate(@theta);
157 -o-transform: rotate(@theta);
157 -o-transform: rotate(@theta);
158 }
158 }
General Comments 0
You need to be logged in to leave comments. Login now