MediaWiki:Common.css

Материал из CursedLands
Версия от 08:20, 19 июля 2026; Admin (обсуждение | вклад) (Боковой кино-фон: стили)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Перейти к навигации Перейти к поиску

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
/* ===== Боковой кино-фон (тип «Боковой фон») ===== */
.cl-sidebg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.cl-sidebg .cl-side{position:absolute;top:0;bottom:0;overflow:hidden;width:calc((100vw - 1000px)/2 + 60px);}
.cl-sidebg .cl-left{left:0;}
.cl-sidebg .cl-right{right:0;}
.cl-sidebg .cl-side img{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;}
.cl-sidebg .cl-left img{object-position:right center;-webkit-mask-image:linear-gradient(to right,#000 40%,transparent 94%);mask-image:linear-gradient(to right,#000 40%,transparent 94%);}
.cl-sidebg .cl-right img{object-position:left center;-webkit-mask-image:linear-gradient(to left,#000 40%,transparent 94%);mask-image:linear-gradient(to left,#000 40%,transparent 94%);}

/* страницы этого типа: центрируем контент, прячем сайдбар, освобождаем поля под арт */
body:has(.cl-sidebg) #mw-panel{display:none;}
body:has(.cl-sidebg) #content{margin-left:auto!important;margin-right:auto!important;max-width:1000px;position:relative;z-index:1;box-shadow:0 0 45px rgba(0,0,0,.28);}
body:has(.cl-sidebg) #footer{margin-left:auto;margin-right:auto;max-width:1000px;position:relative;z-index:1;}
body:has(.cl-sidebg) #left-navigation{left:auto;}

/* на узких экранах отключаем эффект, возвращаем обычную раскладку */
@media (max-width:1150px){
  .cl-sidebg{display:none!important;}
  body:has(.cl-sidebg) #mw-panel{display:block;}
  body:has(.cl-sidebg) #content{max-width:none;}
}