MediaWiki:Tippy.css: Difference between revisions
From Elwiki
(Created page with "→Tippy.js: .tippy-loaded [data-tippy-content] { opacity: 1; pointer-events: all; } [data-tippy-content] { opacity: 0; pointer-events: none; transition: 0.3s; } td [data-tippy-content] { width: max-content; } .tippy-box { background-color: var(--theme-tone-3); border-radius: 3px; border: 1px solid var(--border-color-tone-2); box-shadow: 0 2px 0 0 rgb(0 0 0 / 15%); transition: 0.2s !important; } .tippy-box:not(.dark-mode...") |
No edit summary |
||
Line 73: | Line 73: | ||
.tippy-content hr { | .tippy-content hr { | ||
background: var(--border-color-tone-2); | background: var(--border-color-tone-2); | ||
} | |||
.dark-mode .tippy-content pre { | |||
background-color: var(--theme-tone-4); | |||
} | } |
Revision as of 18:28, 25 September 2022
/* Tippy.js */
.tippy-loaded [data-tippy-content] {
opacity: 1;
pointer-events: all;
}
[data-tippy-content] {
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
td [data-tippy-content] {
width: max-content;
}
.tippy-box {
background-color: var(--theme-tone-3);
border-radius: 3px;
border: 1px solid var(--border-color-tone-2);
box-shadow: 0 2px 0 0 rgb(0 0 0 / 15%);
transition: 0.2s !important;
}
.tippy-box:not(.dark-mode .tippy-box) {
background-color: var(--theme-tone-2);
}
.tippy-content {
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
color: var(--text-color);
}
.tippy-arrow {
color: var(--border-color-tone-2);
}
.tippy-box[data-placement^="top"] > .tippy-arrow:before {
bottom: -8px;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
top: -8px;
}
.tippy-box[data-state="hidden"] {
opacity: 0;
transform: scale(0.5);
transform-origin: bottom;
}
.tippy-box[data-placement^="bottom"][data-state="hidden"] {
transform-origin: top;
}
.tippy-box[data-placement^="left"][data-state="hidden"] {
transform-origin: left;
}
.tippy-box[data-placement^="right"][data-state="hidden"] {
transform-origin: right;
}
.tippy-btn .content {
display: none;
}
.dark-mode .tippy-btn {
border-color: var(--text-color) !important;
}
.tippy-content hr {
background: var(--border-color-tone-2);
}
.dark-mode .tippy-content pre {
background-color: var(--theme-tone-4);
}