User:JWBTH/Gadget-ReferenceTooltips.css: Difference between revisions

Content deleted Content added
No edit summary
No edit summary
Line 5:
z-index: 800; /* match z-index-tooltip in https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html */
max-width: 350px;
background: var( --background-color-base, #fff );
color: var( --color-base, #202122 );
font-size: calc( var( --font-size-medium ) * ( 13 / 14 ) );
line-height: 1.5em;
border: 1px solid var( --border-color-subtle, #c8ccd1 );
border-radius: 3px;
box-shadow: 0 15px20px 45px48px -10px0 rgba( 0, 0, 0, 0.32 );
overflow-wrap: break-word;
}
 
html.skin-theme-clientpref-night .rt-tooltip {
box-shadow: 0 15px20px 45px48px -10px0 rgba( 0, 0, 0, 1 );
}
 
Line 46:
 
.rt-tooltipTail {
background: linear-gradient( to top right, var( --border-color-subtle, #c8ccd1 ) 50%, rgba( 0, 0, 0, 0 ) 50% );
}
 
.rt-tooltipTail:after {
content: "";
background: var( --background-color-base, #fff );
bottom: 1px;
left: 1px;
Line 57:
 
.rt-tooltip-above .rt-tooltipTail {
transform: rotate( -45deg );
transform-origin: 100% 100%;
bottom: 0;
Line 64:
 
.rt-tooltip-below .rt-tooltipTail {
transform: rotate( 135deg );
transform-origin: 0 0;
top: 0;
left: calc( 18px + 12px );
}
 
Line 88:
 
.rt-settingsLink:hover {
background-color: var( --background-color-interactive, #eaecf0 );
}
 
.rt-target {
background-color: var( --background-color-progressive-subtle, #eaf3ff );
}
 
Line 128:
0% {
opacity: 0;
transform: translate( 0, 20px );
}
100% {
opacity: 1;
transform: translate( 0, 0 );
}
}
Line 139:
0% {
opacity: 0;
transform: translate( 0, -20px );
}
100% {
opacity: 1;
transform: translate( 0, 0 );
}
}
Line 150:
0% {
opacity: 1;
transform: translate( 0, 0 );
}
100% {
opacity: 0;
transform: translate( 0, 20px );
}
}
Line 161:
0% {
opacity: 1;
transform: translate( 0, 0 );
}
100% {
opacity: 0;
transform: translate( 0, -20px );
}
}
 
.rt-fade-in-up {
animation: rt-fade-in-up 0.2s ease forwards;
}
 
.rt-fade-in-down {
animation: rt-fade-in-down 0.2s ease forwards;
}
 
.rt-fade-out-down {
animation: rt-fade-out-down 0.2s ease forwards;
}
 
.rt-fade-out-up {
animation: rt-fade-out-up 0.2s ease forwards;
}