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

Материал из Radix-IT
Нет описания правки
Метка: отменено
Нет описания правки
Метка: отменено
Строка 1: Строка 1:
.categorytree-frame {
.categorytree-frame {
     border: none; /* Удаляет рамку */
     border: none; /* Удаляет рамку */
     padding: 1em; /* Отступы внутри рамки */
     padding: 10px; /* Отступы внутри рамки */
     margin: 0; /* Убираем отступы вокруг рамки */
     margin: 20px; /* Отступы вокруг рамки */
     position: fixed; /* Фиксированное позиционирование */
     position: absolute; /* Абсолютное позиционирование */
     left: 0; /* Позиция слева */
     left: 0; /* Позиция слева */
     top: 5vh; /* Позиция сверху в единицах высоты экрана */
     top: 20px; /* Позиция сверху */
     width: 20vw; /* Ширина блока в единицах ширины экрана */
     width: 300px; /* Ширина блока */
     z-index: 0; /* Уровень наложения */
     z-index: 0; /* Уровень наложения */
     background-color: transparent; /* Прозрачный фон */
     background-color: transparent; /* Прозрачный фон */
     overflow: auto; /* Прокрутка внутри рамки, если содержимое выходит за пределы */
     overflow: auto; /* Прокрутка внутри рамки, если содержимое выходит за пределы */
     transform-origin: 0 0; /* Точка, относительно которой происходит масштабирование */
     max-width: 100%; /* Максимальная ширина не превышает ширину страницы */
     transform: scale(1); /* Начальное масштабирование */
     transform: scale(1); /* Масштабирование */
     transition: transform 0.3s ease; /* Анимация при изменении масштаба */
     transition: transform 0.3s ease; /* Плавное изменение масштаба */
}
}


body {
body {
     transform-origin: 0 0; /* Установка точки масштабирования */
     position: relative; /* Относительное позиционирование, чтобы `.categorytree-frame` была привязана к странице */
    transform: scale(1); /* Начальное масштабирование */
    transition: transform 0.3s ease; /* Плавное изменение масштаба */
}
 
/* Медиа-запросы для адаптации под разные экраны */
@media (max-width: 768px) {
    .categorytree-frame {
        width: 40vw; /* Увеличение ширины на узких экранах */
        top: 10vh; /* Увеличение отступа сверху на узких экранах */
    }
}
 
@media (min-width: 1200px) {
    .categorytree-frame {
        width: 15vw; /* Уменьшение ширины на больших экранах */
        top: 2vh; /* Уменьшение отступа сверху на больших экранах */
    }
}
}

Версия от 12:25, 26 августа 2024

.categorytree-frame {
    border: none; /* Удаляет рамку */
    padding: 10px; /* Отступы внутри рамки */
    margin: 20px; /* Отступы вокруг рамки */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Позиция слева */
    top: 20px; /* Позиция сверху */
    width: 300px; /* Ширина блока */
    z-index: 0; /* Уровень наложения */
    background-color: transparent; /* Прозрачный фон */
    overflow: auto; /* Прокрутка внутри рамки, если содержимое выходит за пределы */
    max-width: 100%; /* Максимальная ширина не превышает ширину страницы */
    transform: scale(1); /* Масштабирование */
    transition: transform 0.3s ease; /* Плавное изменение масштаба */
}

body {
    position: relative; /* Относительное позиционирование, чтобы `.categorytree-frame` была привязана к странице */
}