MediaWiki:Common.css: различия между версиями

Материал из Ascaron Online
Перейти к навигации Перейти к поиску
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
/* Стили для скелетона */
        /* Слой для затемнения экрана */
.skeleton {
        #loading-overlay {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            position: fixed;
    background-size: 200% 100%;
            top: 0;
    animation: skeleton-loading 2s ease-in-out 0s forwards;
            left: 0;
    color: transparent;
            width: 100%;
    border-radius: 5px;
            height: 100%;
}
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 1;
            transition: opacity 2s;
        }


@keyframes skeleton-loading {
        /* Стиль для вращающегося круга */
    0% { background-position: -200% 0; }
        .spinner {
    100% { background-position: 200% 0; }
            border: 4px solid rgba(255, 255, 255, 0.3);
}
            border-top: 4px solid #fff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }


/* Применение скелетона к элементам */
        /* Анимация вращения */
.skeleton-text {
        @keyframes spin {
    height: 20px;
            0% { transform: rotate(0deg); }
    width: 100%;
            100% { transform: rotate(360deg); }
    margin-bottom: 10px;
        }
}
 
.skeleton-image {
    width: 100%;
    height: 200px;
    margin-bottom: 15px;
}

Версия от 07:34, 5 апреля 2025

        /* Слой для затемнения экрана */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 1;
            transition: opacity 2s;
        }

        /* Стиль для вращающегося круга */
        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid #fff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        /* Анимация вращения */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }