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);
}