MediaWiki:Common.css: Difference between revisions
From Ages of Conflict
Content added Content deleted
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/** |
|||
#navbar a:hover { |
|||
* CSS3 Tips |
|||
background-color: #ddd; |
|||
* |
|||
color: black; |
|||
* A stylesheet for creating tooltips without using anything other than CSS3. |
|||
* |
|||
* created by c.bavota |
|||
* released under GPL v2 |
|||
* |
|||
* November 6th, 2013 |
|||
*/ |
|||
[data-tips] { |
|||
position: relative; |
|||
text-decoration: none; |
|||
} |
|||
[data-tips]:after, |
|||
[data-tips]:before { |
|||
position: absolute; |
|||
z-index: 100; |
|||
opacity: 0; |
|||
} |
|||
[data-tips]:after { |
|||
content: attr(data-tips); |
|||
height: 25px; |
|||
line-height: 25px; |
|||
padding: 0 5px; |
|||
font-size: 12px; |
|||
text-align: center; |
|||
color: #fff; |
|||
background: #222; |
|||
border-radius: 2px; |
|||
text-shadow: 0 0 5px #000; |
|||
/* -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); */ |
|||
/* -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); */ |
|||
/* box-shadow: 0 0 5px rgba(0,0,0,0.3); */ |
|||
white-space: nowrap; |
|||
-moz-box-sizing: border-box; |
|||
-webkit-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
[data-tips]:before { |
|||
content: ""; |
|||
width: 0; |
|||
height: 0; |
|||
border-width: 6px; |
|||
border-style: solid; |
|||
} |
|||
[data-tips]:hover:after, |
|||
[data-tips]:hover:before { |
|||
opacity: 1; |
|||
} |
|||
/* Top tips */ |
|||
[data-tips].top-tip:after, |
|||
[data-tips].top-tip:before { |
|||
-webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
-moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
bottom: 90%; |
|||
left: -9999px; |
|||
margin-bottom: 12px; |
|||
} |
|||
[data-tips].top-tip:before { |
|||
border-color: #222 transparent transparent transparent; |
|||
margin-bottom: 0; |
|||
} |
|||
[data-tips].top-tip:hover:after, |
|||
[data-tips].top-tip:hover:before { |
|||
bottom: 100%; |
|||
left: 0; |
|||
} |
|||
[data-tips].top-tip:hover:before { |
|||
left: 15px; |
|||
} |
|||
/* Bottom tip */ |
|||
[data-tips].bottom-tip:after, |
|||
[data-tips].bottom-tip:before { |
|||
-webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
-moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
top: 90%; |
|||
left: -9999px; |
|||
margin-top: 12px; |
|||
} |
|||
[data-tips].bottom-tip:before { |
|||
border-color: transparent transparent #222 transparent; |
|||
margin-top: 0; |
|||
} |
|||
[data-tips].bottom-tip:hover:after, |
|||
[data-tips].bottom-tip:hover:before { |
|||
top: 100%; |
|||
left: 0; |
|||
} |
|||
[data-tips].bottom-tip:hover:before { |
|||
left: 15px; |
|||
} |
|||
/* Right tip */ |
|||
[data-tips].right-tip:after, |
|||
[data-tips].right-tip:before { |
|||
-webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
-moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
top: -9999px; |
|||
left: 96%; |
|||
margin-left: 12px; |
|||
} |
|||
[data-tips].right-tip:before { |
|||
border-color: transparent #222 transparent transparent; |
|||
margin-left: 0; |
|||
} |
|||
[data-tips].right-tip:hover:after, |
|||
[data-tips].right-tip:hover:before { |
|||
left: 100%; |
|||
top: 0; |
|||
} |
|||
[data-tips].right-tip:hover:before { |
|||
top: 7px; |
|||
} |
|||
/* Left tip */ |
|||
[data-tips].left-tip:after, |
|||
[data-tips].left-tip:before { |
|||
-webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
-moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out; |
|||
top: -9999px; |
|||
right: 96%; |
|||
margin-right: 12px; |
|||
} |
|||
[data-tips].left-tip:before { |
|||
border-color: transparent transparent transparent #222; |
|||
margin-right: 0; |
|||
} |
|||
[data-tips].left-tip:hover:after, |
|||
[data-tips].left-tip:hover:before { |
|||
right: 100%; |
|||
top: 0; |
|||
} |
|||
[data-tips].left-tip:hover:before { |
|||
top: 7px; |
|||
} |
} |
Revision as of 01:36, 18 November 2023
/**
* CSS3 Tips
*
* A stylesheet for creating tooltips without using anything other than CSS3.
*
* created by c.bavota
* released under GPL v2
*
* November 6th, 2013
*/
[data-tips] {
position: relative;
text-decoration: none;
}
[data-tips]:after,
[data-tips]:before {
position: absolute;
z-index: 100;
opacity: 0;
}
[data-tips]:after {
content: attr(data-tips);
height: 25px;
line-height: 25px;
padding: 0 5px;
font-size: 12px;
text-align: center;
color: #fff;
background: #222;
border-radius: 2px;
text-shadow: 0 0 5px #000;
/* -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); */
/* -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); */
/* box-shadow: 0 0 5px rgba(0,0,0,0.3); */
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[data-tips]:before {
content: "";
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
}
[data-tips]:hover:after,
[data-tips]:hover:before {
opacity: 1;
}
/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
-webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
bottom: 90%;
left: -9999px;
margin-bottom: 12px;
}
[data-tips].top-tip:before {
border-color: #222 transparent transparent transparent;
margin-bottom: 0;
}
[data-tips].top-tip:hover:after,
[data-tips].top-tip:hover:before {
bottom: 100%;
left: 0;
}
[data-tips].top-tip:hover:before {
left: 15px;
}
/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
-webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: 90%;
left: -9999px;
margin-top: 12px;
}
[data-tips].bottom-tip:before {
border-color: transparent transparent #222 transparent;
margin-top: 0;
}
[data-tips].bottom-tip:hover:after,
[data-tips].bottom-tip:hover:before {
top: 100%;
left: 0;
}
[data-tips].bottom-tip:hover:before {
left: 15px;
}
/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
-webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: -9999px;
left: 96%;
margin-left: 12px;
}
[data-tips].right-tip:before {
border-color: transparent #222 transparent transparent;
margin-left: 0;
}
[data-tips].right-tip:hover:after,
[data-tips].right-tip:hover:before {
left: 100%;
top: 0;
}
[data-tips].right-tip:hover:before {
top: 7px;
}
/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
-webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
-moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: -9999px;
right: 96%;
margin-right: 12px;
}
[data-tips].left-tip:before {
border-color: transparent transparent transparent #222;
margin-right: 0;
}
[data-tips].left-tip:hover:after,
[data-tips].left-tip:hover:before {
right: 100%;
top: 0;
}
[data-tips].left-tip:hover:before {
top: 7px;
}