IPython/html/static/notebook/less/tooltip.less

/**
 * 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
@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:500ms) {
    -webkit-transition-property: height;
    -webkit-transition-duration: @t;
    -moz-transition-property: height;
    -moz-transition-duration: @t;
    transition-property: height;
    transition-duration: @t;
}

@-moz-keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

@-webkit-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;}
}

/*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
}

.ipython_tooltip {
    max-width:700px;
    /*fade-in animation when inserted*/
    -webkit-animation: fadeOut 400ms;
    -moz-animation: fadeOut 400ms;
    animation: fadeOut 400ms;
    -webkit-animation: fadeIn 400ms;
    -moz-animation: fadeIn 400ms;
    animation: fadeIn 400ms;
    vertical-align: middle;
    background-color: @cell_background;

    overflow : visible;
    border: @border_color @border_width solid;
    outline: none;
    padding: 3px;
    margin: 0px;
    padding-left:7px;
    font-family: @font-family-monospace;
    min-height:50px;

    .dropshadow;
    .corner-all;

    a {
        float:right;
    };
    position: absolute;

	z-index: 1000;
	
	.tooltiptext {
		pre {
			border: 0;
			.border-radius(0);
			font-size: 100%;
			background-color: @cell_background;
		}
	}
}

.pretooltiparrow {
  left: 0px;
  margin: 0px;
  top: -16px;
  width: 40px;
  height: 16px;
  overflow: hidden;
  position: absolute;

}

.pretooltiparrow:before {
  background-color : @cell_background;
  border : @border_width @border_color 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);
}