MediaWiki:Common.css: различия между версиями
Перейти к навигации
Перейти к поиску
Admin (обсуждение | вклад) Боковой кино-фон: стили |
Admin (обсуждение | вклад) Боковой фон: выравнивание шапки по ширине контента + рефактор в min-width |
||
| Строка 1: | Строка 1: | ||
/* ===== Боковой кино-фон (тип «Боковой фон») ===== */ | /* ===== Боковой кино-фон (тип «Боковой фон») ===== */ | ||
/* по умолчанию скрыт (узкие экраны / нет поддержки) */ | |||
.cl-sidebg{display:none;} | |||
.cl-sidebg | |||
@media (min-width:1151px){ | |||
.cl-sidebg{display:block;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;} | |||
.cl-sidebg{ | 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) # | body:has(.cl-sidebg) #footer{margin-left:auto;margin-right:auto;max-width:1000px;position:relative;z-index:1;} | ||
body:has(.cl-sidebg) # | |||
/* ШАПКА — выровнять по ширине контента */ | |||
body:has(.cl-sidebg) #mw-head{left:50%!important;right:auto!important;transform:translateX(-50%);width:1050px;max-width:1050px;} | |||
body:has(.cl-sidebg) #left-navigation{margin-left:0!important;} | |||
body:has(.cl-sidebg) #mw-head-base{margin-left:auto!important;margin-right:auto!important;max-width:1050px;} | |||
body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;} | |||
} | } | ||
Версия от 08:38, 19 июля 2026
/* ===== Боковой кино-фон (тип «Боковой фон») ===== */
/* по умолчанию скрыт (узкие экраны / нет поддержки) */
.cl-sidebg{display:none;}
@media (min-width:1151px){
.cl-sidebg{display:block;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) #mw-head{left:50%!important;right:auto!important;transform:translateX(-50%);width:1050px;max-width:1050px;}
body:has(.cl-sidebg) #left-navigation{margin-left:0!important;}
body:has(.cl-sidebg) #mw-head-base{margin-left:auto!important;margin-right:auto!important;max-width:1050px;}
body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;}
}