Team:UCL/Template:SCJtooltip.css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
#tooltip
+
/*
-
{
+
Required Styles
-
    text-align: center;
+
*/
-
    color: #fff;
+
#aToolTip {
-
    background: #111;
+
position: absolute;
-
    position: absolute;
+
display: none;
-
    z-index: 100;
+
z-index: 50000;
-
    padding: 15px;
+
}
}
-
+
 
-
    #tooltip:after /* triangle decoration */
+
#aToolTip .aToolTipContent {
-
    {
+
position:relative;
-
        width: 0;
+
margin:0;
-
        height: 0;
+
padding:0;
-
        border-left: 10px solid transparent;
+
}
-
        border-right: 10px solid transparent;
+
/*
-
        border-top: 10px solid #111;
+
END: Required Styles
-
        content: '';
+
*/
-
        position: absolute;
+
/**
-
        left: 50%;
+
Default Theme
-
        bottom: -10px;
+
*/
-
        margin-left: -10px;
+
.defaultTheme {
-
    }
+
border:2px solid #444;
-
+
background:#555;
-
        #tooltip.top:after
+
color:#fff;
-
        {
+
margin:0;
-
            border-top-color: transparent;
+
padding:6px 12px;
-
            border-bottom: 10px solid #111;
+
-
            top: -20px;
+
-moz-border-radius: 12px 12px 12px 0;
-
            bottom: auto;
+
-webkit-border-radius: 12px 12px 12px 0;
-
        }
+
-khtml-border-radius: 12px 12px 12px 0;
-
+
border-radius: 12px 12px 12px 0;
-
        #tooltip.left:after
+
-
        {
+
-moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
-
            left: 10px;
+
-webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
-
            margin: 0;
+
box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
-
        }
+
}
-
+
-
        #tooltip.right:after
+
.defaultTheme #aToolTipCloseBtn {
-
        {
+
display:block;
-
            right: 10px;
+
height:18px;
-
            left: auto;
+
width:18px;
-
            margin: 0;
+
background:url(../images/closeBtn.png) no-repeat;
-
        }
+
text-indent:-9999px;
 +
outline:none;
 +
position:absolute;
 +
top:-20px;
 +
right:-30px;
 +
margin:2px;
 +
padding:4px;
 +
}

Revision as of 21:40, 9 October 2014

/* Required Styles

  • /
  1. aToolTip {

position: absolute; display: none; z-index: 50000; }

#aToolTip .aToolTipContent { position:relative; margin:0; padding:0; } /* END: Required Styles

  • /

/** Default Theme

  • /

.defaultTheme { border:2px solid #444; background:#555; color:#fff; margin:0; padding:6px 12px;

-moz-border-radius: 12px 12px 12px 0; -webkit-border-radius: 12px 12px 12px 0; -khtml-border-radius: 12px 12px 12px 0; border-radius: 12px 12px 12px 0;

-moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */ -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */ box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */ }

.defaultTheme #aToolTipCloseBtn { display:block; height:18px; width:18px; background:url(../images/closeBtn.png) no-repeat; text-indent:-9999px; outline:none; position:absolute; top:-20px; right:-30px; margin:2px; padding:4px; }

Retrieved from "http://2014.igem.org/Team:UCL/Template:SCJtooltip.css"