MediaWiki:Vector.css: различия между версиями
Wikiroot (обсуждение | вклад) Нет описания правки Метка: отменено |
Wikiroot (обсуждение | вклад) Нет описания правки Метка: отменено |
||
Строка 1: | Строка 1: | ||
.categorytree-frame { | .categorytree-frame { | ||
border: none; /* Удаляет рамку */ | border: none; /* Удаляет рамку */ | ||
padding: 1em; /* Отступы внутри рамки | padding: 1em; /* Отступы внутри рамки */ | ||
margin: | margin: 0; /* Убираем отступы вокруг рамки */ | ||
position: fixed; /* Фиксированное позиционирование */ | position: fixed; /* Фиксированное позиционирование */ | ||
left: 0; /* Позиция слева */ | left: 0; /* Позиция слева */ | ||
top: | top: 5vh; /* Позиция сверху в единицах высоты экрана */ | ||
width: | width: 20vw; /* Ширина блока в единицах ширины экрана */ | ||
z-index: 0; /* Уровень наложения */ | z-index: 0; /* Уровень наложения */ | ||
background-color: transparent; /* Прозрачный фон */ | background-color: transparent; /* Прозрачный фон */ | ||
overflow: auto; /* Прокрутка внутри рамки, если содержимое выходит за пределы */ | overflow: auto; /* Прокрутка внутри рамки, если содержимое выходит за пределы */ | ||
transform-origin: 0 0; /* Точка, относительно которой происходит масштабирование */ | |||
transform: scale(1); /* Начальное масштабирование */ | |||
transition: transform 0.3s ease; /* Анимация при изменении масштаба */ | |||
} | |||
body { | |||
transform-origin: 0 0; /* Установка точки масштабирования */ | |||
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:22, 26 августа 2024
.categorytree-frame { border: none; /* Удаляет рамку */ padding: 1em; /* Отступы внутри рамки */ margin: 0; /* Убираем отступы вокруг рамки */ position: fixed; /* Фиксированное позиционирование */ left: 0; /* Позиция слева */ top: 5vh; /* Позиция сверху в единицах высоты экрана */ width: 20vw; /* Ширина блока в единицах ширины экрана */ z-index: 0; /* Уровень наложения */ background-color: transparent; /* Прозрачный фон */ overflow: auto; /* Прокрутка внутри рамки, если содержимое выходит за пределы */ transform-origin: 0 0; /* Точка, относительно которой происходит масштабирование */ transform: scale(1); /* Начальное масштабирование */ transition: transform 0.3s ease; /* Анимация при изменении масштаба */ } body { transform-origin: 0 0; /* Установка точки масштабирования */ 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; /* Уменьшение отступа сверху на больших экранах */ } }