You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
6.0 KiB
158 lines
6.0 KiB
/*
|
|
* Copyright 2012 The Board of Regents of the University of Wisconsin System.
|
|
* Contributors: Jason Shao, James McCurdy, Enhai Xie, Adam G.W. Halstead,
|
|
* Michael H. Whitney, Nathan DiPiazza, Trey K. Sato and Yury V. Bukhman
|
|
*
|
|
* This file is part of GCAT.
|
|
*
|
|
* GCAT is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Lesser General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* GCAT is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Lesser General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Lesser General Public License
|
|
* along with GCAT. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
/*.tooltip:hover:after { content: attr(data-tooltip);
|
|
position: absolute; white-space: nowrap; background: rgba(0, 0, 0, 0.85); padding: 3px 7px; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-left: 7px; margin-top: -3px;font-size:10px;}
|
|
*/
|
|
|
|
|
|
/* Make tooltip "links" have a different pointer (as the tooltip uses the "help" cursor by default) */
|
|
a[data-tooltip]
|
|
{
|
|
cursor:pointer !important;
|
|
}
|
|
/* Styles for elements having a data-tooltip attribute - using the star selector is processor intensive
|
|
so you may wish to change this to list a known, limited set of tags instead */
|
|
*[data-tooltip]
|
|
{
|
|
/* Relativly position the tooltip to enable us to position:absolute
|
|
the generated content */
|
|
position:relative;
|
|
/* Links inherit the !important cursor rule from above */
|
|
cursor:help;
|
|
/* Moz requires the text-decoration here (as it won't allow the use of
|
|
text-decoration:none on generated content) which is why I use the bottom
|
|
border to display a more accessible underline */
|
|
text-decoration:none;
|
|
border-bottom:1px dotted #aaa;
|
|
/* Remove the styles for IE7 and below - could be passed using conditional comments */
|
|
*text-decoration:inherit;
|
|
*border-bottom-width:inherit;
|
|
*border-bottom-style:inherit;
|
|
*cursor:inherit;
|
|
*position:inherit;
|
|
}
|
|
/* Default :before & :after values */
|
|
*[data-tooltip]:after,
|
|
*[data-tooltip]:before
|
|
{
|
|
content:"";
|
|
/* Don't show tooltip by default */
|
|
opacity:0;
|
|
/* Set a high z-index */
|
|
z-index:999;
|
|
|
|
/* Animations won't (yet) work on pseudo elements - shame really as this should fade the tooltip in
|
|
after one second - but I'll leave the rules for posterity */
|
|
-moz-transition-property: opacity;
|
|
-moz-transition-duration: 2s;
|
|
-moz-transition-delay: 1s;
|
|
|
|
-webkit-transition-property: opacity;
|
|
-webkit-transition-duration: 2s;
|
|
-webkit-transition-delay: 1s;
|
|
|
|
-o-transition-property: opacity;
|
|
-o-transition-duration: 2s;
|
|
-o-transition-delay: 1s;
|
|
|
|
transition-property: opacity;
|
|
transition-duration: 2s;
|
|
transition-delay: 1s;
|
|
|
|
/* -moz won't understand the text-decoration here but inherits the parent value of "none" successfully */
|
|
text-decoration:none !important;
|
|
outline:none;
|
|
}
|
|
/* Tooltip arrow - shown on hover or focus */
|
|
*[data-tooltip]:hover:before,
|
|
*[data-tooltip]:focus:before
|
|
{
|
|
/* Slightly opaque arrow */
|
|
opacity:0.94;
|
|
outline:none;
|
|
content:"";
|
|
display:block;
|
|
position:absolute;
|
|
top:20px;
|
|
left:50%;
|
|
margin:0 0 0 -5px;
|
|
width:0;
|
|
height:0;
|
|
line-height:0px;
|
|
font-size:0px;
|
|
/* This sets the tooptip pointer color */
|
|
border-bottom:5px solid #33acfc;
|
|
border-left:5px solid transparent;
|
|
border-right:5px solid transparent;
|
|
border-top:transparent;
|
|
/* Border gradient */
|
|
-webkit-border-image:-webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#33acfc));
|
|
}
|
|
/* Tooltip body - shown on hover or focus */
|
|
*[data-tooltip]:hover:after,
|
|
*[data-tooltip]:focus:after
|
|
{
|
|
/* Slightly opaque tooltip */
|
|
opacity:0.94;
|
|
/* Set display to block (or inline-block) */
|
|
display:block;
|
|
/* Use the data-tooltip attribute to set the content*/
|
|
content:attr(data-tooltip);
|
|
/* Position the tooltip body under the arrow and in the middle of the text */
|
|
position:absolute;
|
|
top:25px;
|
|
left:50%;
|
|
margin:0 0 0 -150px;
|
|
/* Set the width */
|
|
width:290px;
|
|
/* Pad */
|
|
padding:5px;
|
|
/* Style the tooltip */
|
|
line-height:18px;
|
|
/* min-height */
|
|
min-height:18px;
|
|
/* Set font styles */
|
|
color:#fcfcfc;
|
|
font-size:16px;
|
|
font-weight:normal;
|
|
font-family:helvetica neue, calibri, verdana, arial, sans-serif;
|
|
/* Fallback background color */
|
|
background:#3198dd;
|
|
text-align:center;
|
|
outline:none;
|
|
/* Moz doesn't recognise the following... */
|
|
text-decoration:none !important;
|
|
/* Background gradient */
|
|
background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
|
|
background:-moz-linear-gradient(top,#33acfc,#3198dd);
|
|
/* Round the corners */
|
|
-moz-border-radius:10px;
|
|
-webkit-border-radius:10px;
|
|
border-radius:10px;
|
|
/* Add a drop shadow */
|
|
-moz-box-shadow:2px 2px 4px #ccc;
|
|
-webkit-box-shadow:2px 2px 4px #ccc;
|
|
box-shadow:2px 2px 4px #ccc;
|
|
/* Add a Text shadow */
|
|
text-shadow:#2187c8 0 1px 0px;
|
|
}
|