use less for tooltip

pull/37/head
Matthias BUSSONNIER 13 years ago
parent 430f44dd72
commit 33cd3b7f1f

@ -3,110 +3,133 @@
*
* Author: IPython Development Team
*/
/** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
* of chance of beeing generated from the ../less/[samename].less file, you can
* try to get back the less file by reverting somme commit in history
**/
/*
* We'll try to get something pretty, so we
* have some strange css to have the scroll bar on
* the left with fix button on the top right of the tooltip
*/
// double slash comment are remove by less compilation
// **
// * Less mixins
// **/
// Four color of the background
@import "variables" ;
.dropshadow(){
-moz-box-shadow: 0px 6px 10px -1px #adadad;
-webkit-box-shadow: 0px 6px 10px -1px #adadad;
box-shadow: 0px 6px 10px -1px #adadad;
}
// smoth height adaptation
.smoothheight(@t:1s) {
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-moz-transition-property: height;
-moz-transition-duration: 1s;
transition-property: height;
transition-duration: 1s;
}
@-moz-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
from {opacity:1;}
to {opacity:0;}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
from {opacity:1;}
to {opacity:0;}
}
//@keyframes fadeOut {
// from {opacity:1;}
// to {opacity:0;}
//}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ipython_tooltip a {
float: right;
from {opacity:0;}
to {opacity:1;}
}
//@keyframes fadeIn {
// from {opacity:0;}
// to {opacity:1;}
//}
/*properties of tooltip after "expand"*/
.bigtooltip {
overflow: auto;
height: 200px;
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-moz-transition-property: height;
-moz-transition-duration: 1s;
transition-property: height;
transition-duration: 1s;
overflow: auto;
height: 200px;
.smoothheight();
}
/*properties of tooltip before "expand"*/
.smalltooltip {
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-moz-transition-property: height;
-moz-transition-duration: 1s;
transition-property: height;
transition-duration: 1s;
text-overflow: ellipsis;
overflow: hidden;
height: 80px;
.smalltooltip{
.smoothheight();
text-overflow: ellipsis;
overflow: hidden;
height:80px;
}
.tooltipbuttons {
position: absolute;
padding-right: 15px;
top: 0px;
right: 0px;
.tooltipbuttons
{
position: absolute;
padding-right : 15px;
top : 0px;
right:0px;
}
.tooltiptext {
/*avoid the button to overlap on some docstring*/
padding-right: 30px;
.tooltiptext
{
/*avoid the button to overlap on some docstring*/
padding-right:30px
}
.ipython_tooltip {
max-width: 700px;
border-radius: 4px;
-moz-box-shadow: 0px 6px 10px -1px #adadad;
-webkit-box-shadow: 0px 6px 10px -1px #adadad;
box-shadow: 0px 6px 10px -1px #adadad;
/*fade-in animation when inserted*/
-webkit-animation: fadeOut 800ms;
-moz-animation: fadeOut 800ms;
animation: fadeOut 800ms;
-webkit-animation: fadeIn 800ms;
-moz-animation: fadeIn 800ms;
animation: fadeIn 800ms;
vertical-align: middle;
background-color: #f7f7f7;
overflow: visible;
border: #bbbbbb 1px solid;
outline: none;
padding: 3px;
margin: 0px;
padding-left: 7px;
font-family: monospace;
min-height: 50px;
position: absolute;
max-width:700px;
/*fade-in animation when inserted*/
-webkit-animation: fadeOut 800ms;
-moz-animation: fadeOut 800ms;
animation: fadeOut 800ms;
-webkit-animation: fadeIn 800ms;
-moz-animation: fadeIn 800ms;
animation: fadeIn 800ms;
vertical-align: middle;
background-color: @cell_background;
overflow : visible;
border: @border_color @borderwidth solid;
outline: none;
padding: 3px;
margin: 0px;
padding-left:7px;
font-family: monospace;
min-height:50px;
position: absolute;
.dropshadow;
.corner-all;
a {
float:right;
}
}
.pretooltiparrow {
left: 0px;
margin: 0px;
@ -115,19 +138,22 @@
height: 16px;
overflow: hidden;
position: absolute;
}
.pretooltiparrow:before {
background-color: #f7f7f7;
border: 1px #bbbbbb solid;
z-index: 11;
background-color : @cell_background;
border : @borderwidth @border_color solid;
z-index:11;
content: "";
position: absolute;
left: 15px;
top: 10px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
@theta : 45deg;
-webkit-transform: rotate(@theta);
-moz-transform: rotate(@theta);
-ms-transform: rotate(@theta);
-o-transform: rotate(@theta);
}

@ -3,6 +3,7 @@
@cell_selected_background: darken(@notebook_background, 2%);
@cell_background: darken(@notebook_background, 3.2%);
@border_color: darken(@cell_selected_background, 10%);
@borderwidth : 1px;

@ -1,159 +0,0 @@
/**
* Primary styles
*
* Author: IPython Development Team
*/
/** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
* of chance of beeing generated from the ../less/[samename].less file, you can
* try to get back the less file by reverting somme commit in history
**/
/*
* We'll try to get something pretty, so we
* have some strange css to have the scroll bar on
* the left with fix button on the top right of the tooltip
*/
// double slash comment are remove by less compilation
// **
// * Less mixins
// **/
// Four color of the background
@c4 : rgb(247,247,247);
@bordercolor : #BBB;
@borderwidth : 1px;
.dropshadow(){
-moz-box-shadow: 0px 6px 10px -1px #adadad;
-webkit-box-shadow: 0px 6px 10px -1px #adadad;
box-shadow: 0px 6px 10px -1px #adadad;
}
// smoth height adaptation
.smoothheight(@t:1s) {
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-moz-transition-property: height;
-moz-transition-duration: 1s;
transition-property: height;
transition-duration: 1s;
}
@-moz-keyframes fadeOut {
from {opacity:1;}
to {opacity:0;}
}
@-webkit-keyframes fadeOut {
from {opacity:1;}
to {opacity:0;}
}
//@keyframes fadeOut {
// from {opacity:1;}
// to {opacity:0;}
//}
@-moz-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
//@keyframes fadeIn {
// from {opacity:0;}
// to {opacity:1;}
//}
.tooltip a {
float:right;
}
/*properties of tooltip after "expand"*/
.bigtooltip {
overflow: auto;
height: 200px;
.smoothheight();
}
/*properties of tooltip before "expand"*/
.smalltooltip{
.smoothheight();
text-overflow: ellipsis;
overflow: hidden;
height:80px;
}
.tooltipbuttons
{
position: absolute;
padding-right : 15px;
top : 0px;
right:0px;
}
.tooltiptext
{
/*avoid the button to overlap on some docstring*/
padding-right:30px
}
.tooltip {
max-width:700px;
border-radius: 4px;
.dropshadow;
/*fade-in animation when inserted*/
-webkit-animation: fadeOut 800ms;
-moz-animation: fadeOut 800ms;
animation: fadeOut 800ms;
-webkit-animation: fadeIn 800ms;
-moz-animation: fadeIn 800ms;
animation: fadeIn 800ms;
vertical-align: middle;
background-color: @c4;
overflow : visible;
border: @bordercolor @borderwidth solid;
outline: none;
padding: 3px;
margin: 0px;
padding-left:7px;
font-family: monospace;
min-height:50px;
position: absolute;
}
.pretooltiparrow {
left: 0px;
margin: 0px;
top: -16px;
width: 40px;
height: 16px;
overflow: hidden;
position: absolute;
}
.pretooltiparrow:before {
background-color : @c4;
border : @borderwidth @bordercolor solid;
z-index:11;
content: "";
position: absolute;
left: 15px;
top: 10px;
width: 25px;
height: 25px;
@theta : 45deg;
-webkit-transform: rotate(@theta);
-moz-transform: rotate(@theta);
-ms-transform: rotate(@theta);
-o-transform: rotate(@theta);
}

@ -174,7 +174,7 @@ data-notebook-id={{notebook_id}}
</div>
</div>
<div id='tooltip' class='ipython_tooltip corner-all' style='display:none'></div>
<div id='tooltip' class='ipython_tooltip' style='display:none'></div>
{% endblock %}

Loading…
Cancel
Save