This commit is contained in:
gorhill 2015-03-31 09:25:39 -04:00
parent 3d38285100
commit 57c177c995
2 changed files with 19 additions and 16 deletions

View File

@ -1,16 +1,16 @@
@font-face { @font-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
} }
.fa { .fa {
display: inline-block;
font-family: FontAwesome; font-family: FontAwesome;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
vertical-align: baseline; vertical-align: baseline;
display: inline-block;
} }
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */
@ -23,27 +23,29 @@ body:not(.advancedUser) [data-tip]:after {
border: 1px solid gray; border: 1px solid gray;
border-radius: 3px; border-radius: 3px;
box-shadow: 1px 1px 3px gray; box-shadow: 1px 1px 3px gray;
box-sizing: border-box;
color: black; color: black;
content: attr(data-tip); content: attr(data-tip);
display: none;
font: 12px sans-serif; font: 12px sans-serif;
left: 0; left: 0.5em;
line-height: 130%; line-height: 130%;
min-width: 55%; opacity: 0;
padding: 4px 6px; padding: 4px 6px;
position: absolute; pointer-events: none;
position: fixed;
right: 0.5em;
text-align: left; text-align: left;
top: 110%; top: 110%;
visibility: hidden;
white-space: pre-line; white-space: pre-line;
z-index: 20; z-index: 20;
pointer-events: none;
opacity: 0;
} }
body [data-tip]:hover:after { body [data-tip]:hover:after {
display: initial; opacity: 1;
opacity: 1 !important; position: absolute;
-webkit-transition: opacity 0.2s 0.4s; transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
transition: opacity 0.2s 0.4s; -webkit-transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
visibility: visible;
} }
body[dir=rtl] [data-tip]:hover:after { body[dir=rtl] [data-tip]:hover:after {
text-align: right; text-align: right;
@ -51,22 +53,23 @@ body[dir=rtl] [data-tip]:hover:after {
body [data-tip][data-tip-anchor="top"]:hover:after { body [data-tip][data-tip-anchor="top"]:hover:after {
bottom: 140%; bottom: 140%;
left: initial;
top: auto; top: auto;
width: 8.5em;
} }
body[dir=ltr] [data-tip][data-tip-anchor="top"]:hover:after { body[dir=ltr] [data-tip][data-tip-anchor="top"]:hover:after {
left: -500%;
right: 0; right: 0;
} }
body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after { body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
left: 0; left: 0;
right: -500%;
} }
body [data-tip][data-tip-anchor="topcenter"]:hover:after { body [data-tip][data-tip-anchor="topcenter"]:hover:after {
bottom: 140%; bottom: 140%;
left: -225%; left: -225%;
right: -225%; right: initial;
top: auto; top: auto;
width: 8.5em;
} }
.hiddenFileInput { .hiddenFileInput {

View File

@ -52,7 +52,7 @@ uDom('[placeholder]').forEach(function(elem) {
uDom('[data-i18n-tip]').forEach(function(elem) { uDom('[data-i18n-tip]').forEach(function(elem) {
elem.attr( elem.attr(
'data-tip', 'data-tip',
vAPI.i18n(elem.attr('data-i18n-tip')).replace(/<br>/g, '') vAPI.i18n(elem.attr('data-i18n-tip')).replace(/<br>/g, '\n').replace(/\n{3,}/g, '\n\n')
); );
}); });