MediaWiki:Skeleton.css: Difference between revisions

From The Seven Sages of Rome
No edit summary
No edit summary
Line 1: Line 1:
.tabber__panel:not(.smw-loaded) {
.datatables-container:not(.smw-loaded) {
     position: relative;
     position: relative;
    margin-top: 5px;
     min-height: 200px;
     min-height: 200px;
     pointer-events: none;
     pointer-events: none;
Line 7: Line 6:
}
}


.tabber__panel:not(.smw-loaded) > * {
.datatables-container:not(.smw-loaded) > * {
     opacity: 0;
     opacity: 0;
     visibility: hidden;
     visibility: hidden;
}
}


.tabber__panel:not(.smw-loaded)::before {
.datatables-container:not(.smw-loaded)::before {
     content: '';
     content: '';
     position: absolute;
     position: absolute;
Line 21: Line 20:
}
}


.tabber__panel:not(.smw-loaded)::after {
.datatables-container:not(.smw-loaded)::after {
     content: '';
     content: '';
     position: absolute;
     position: absolute;
Line 43: Line 42:
}
}


.tabber__panel.smw-loaded > * {
.datatables-container.smw-loaded > * {
     animation: smw-fadein 0.35s ease forwards;
     animation: smw-fadein 0.35s ease forwards;
}
}

Revision as of 17:38, 24 February 2026

.datatables-container:not(.smw-loaded) {
    position: relative;
    min-height: 200px;
    pointer-events: none;
    overflow: hidden;
}

.datatables-container:not(.smw-loaded) > * {
    opacity: 0;
    visibility: hidden;
}

.datatables-container:not(.smw-loaded)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: #e0e0e0;
    border-radius: 8px;
}

.datatables-container:not(.smw-loaded)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 11;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.65) 45%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.65) 55%,
        transparent 100%
    );
    animation: smw-shimmer 1.6s infinite ease-in-out;
    transform: translateX(-100%);
}

@keyframes smw-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.datatables-container.smw-loaded > * {
    animation: smw-fadein 0.35s ease forwards;
}

@keyframes smw-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}