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

Материал из CursedLands
Перейти к навигации Перейти к поиску
Боковой фон: выравнивание шапки по ширине контента + рефактор в min-width
Боковой фон: одна картинка → контент прижат к противоположному краю
Строка 1: Строка 1:
/* ===== Боковой кино-фон (тип «Боковой фон») ===== */
/* ===== Боковой кино-фон (тип «Боковой фон») ===== */
/* по умолчанию скрыт (узкие экраны / нет поддержки) */
.cl-sidebg{display:none;}
.cl-sidebg{display:none;}


@media (min-width:1151px){
@media (min-width:1151px){
   .cl-sidebg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
   .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-side{position:absolute;top:0;bottom:0;overflow:hidden;}
   .cl-sidebg .cl-left{left:0;}
   .cl-sidebg .cl-left{left:0;}
   .cl-sidebg .cl-right{right:0;}
   .cl-sidebg .cl-right{right:0;}
Строка 12: Строка 11:
   .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%);}
   .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) #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) #content{position:relative;z-index:1;max-width:1000px;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) #footer{position:relative;z-index:1;max-width:1000px;}
 
   body:has(.cl-sidebg) #mw-head{width:1050px;max-width:1050px;}
  /* ШАПКА — выровнять по ширине контента */
   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) #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-head-base{max-width:1050px;}
   body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;}
   body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;}
  /* ОБЕ картинки → контент по центру */
  body:has(.cl-left):has(.cl-right) #content,
  body:has(.cl-left):has(.cl-right) #footer,
  body:has(.cl-left):has(.cl-right) #mw-head-base{margin-left:auto!important;margin-right:auto!important;}
  body:has(.cl-left):has(.cl-right) #mw-head{left:50%!important;right:auto!important;transform:translateX(-50%);}
  body:has(.cl-left):has(.cl-right) .cl-side{width:calc((100vw - 1000px)/2 + 60px);}
  /* ТОЛЬКО ЛЕВАЯ → контент прижат ВПРАВО, арт на всё левое поле */
  body:has(.cl-left):not(:has(.cl-right)) #content,
  body:has(.cl-left):not(:has(.cl-right)) #footer,
  body:has(.cl-left):not(:has(.cl-right)) #mw-head-base{margin-left:auto!important;margin-right:0!important;}
  body:has(.cl-left):not(:has(.cl-right)) #mw-head{left:auto!important;right:0!important;transform:none;}
  body:has(.cl-left):not(:has(.cl-right)) .cl-left{width:calc(100vw - 1000px + 60px);}
  /* ТОЛЬКО ПРАВАЯ → контент прижат ВЛЕВО, арт на всё правое поле */
  body:has(.cl-right):not(:has(.cl-left)) #content,
  body:has(.cl-right):not(:has(.cl-left)) #footer,
  body:has(.cl-right):not(:has(.cl-left)) #mw-head-base{margin-left:0!important;margin-right:auto!important;}
  body:has(.cl-right):not(:has(.cl-left)) #mw-head{left:0!important;right:auto!important;transform:none;}
  body:has(.cl-right):not(:has(.cl-left)) .cl-right{width:calc(100vw - 1000px + 60px);}
}
}

Версия от 08:44, 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;}
  .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{position:relative;z-index:1;max-width:1000px;box-shadow:0 0 45px rgba(0,0,0,.28);}
  body:has(.cl-sidebg) #footer{position:relative;z-index:1;max-width:1000px;}
  body:has(.cl-sidebg) #mw-head{width:1050px;max-width:1050px;}
  body:has(.cl-sidebg) #left-navigation{margin-left:0!important;}
  body:has(.cl-sidebg) #mw-head-base{max-width:1050px;}
  body:has(.cl-sidebg) #mw-page-base{background:none!important;box-shadow:none!important;}

  /* ОБЕ картинки → контент по центру */
  body:has(.cl-left):has(.cl-right) #content,
  body:has(.cl-left):has(.cl-right) #footer,
  body:has(.cl-left):has(.cl-right) #mw-head-base{margin-left:auto!important;margin-right:auto!important;}
  body:has(.cl-left):has(.cl-right) #mw-head{left:50%!important;right:auto!important;transform:translateX(-50%);}
  body:has(.cl-left):has(.cl-right) .cl-side{width:calc((100vw - 1000px)/2 + 60px);}

  /* ТОЛЬКО ЛЕВАЯ → контент прижат ВПРАВО, арт на всё левое поле */
  body:has(.cl-left):not(:has(.cl-right)) #content,
  body:has(.cl-left):not(:has(.cl-right)) #footer,
  body:has(.cl-left):not(:has(.cl-right)) #mw-head-base{margin-left:auto!important;margin-right:0!important;}
  body:has(.cl-left):not(:has(.cl-right)) #mw-head{left:auto!important;right:0!important;transform:none;}
  body:has(.cl-left):not(:has(.cl-right)) .cl-left{width:calc(100vw - 1000px + 60px);}

  /* ТОЛЬКО ПРАВАЯ → контент прижат ВЛЕВО, арт на всё правое поле */
  body:has(.cl-right):not(:has(.cl-left)) #content,
  body:has(.cl-right):not(:has(.cl-left)) #footer,
  body:has(.cl-right):not(:has(.cl-left)) #mw-head-base{margin-left:0!important;margin-right:auto!important;}
  body:has(.cl-right):not(:has(.cl-left)) #mw-head{left:0!important;right:auto!important;transform:none;}
  body:has(.cl-right):not(:has(.cl-left)) .cl-right{width:calc(100vw - 1000px + 60px);}
}