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

Версия от 18:47, 28 августа 2026

/* ============================================================
   Шапка специализации ({{Шапка}}) — CSS-версия графических шапок.
   Геометрия и цвета сняты попиксельно с оригинальных PNG (1176×179).
   ============================================================ */
.pf-banner-wrap{container-type:inline-size;max-width:1000px;margin:0 0 1em}
.pf-banner{position:relative;width:100%;aspect-ratio:1176/179;
  display:grid;
  grid-template-columns:8.3cqw .68cqw 8.1cqw .68cqw 8.1cqw .68cqw 1fr;
  grid-template-rows:48.05% 4.47% 1fr;
  grid-template-areas:
    "sq . nm nm nm nm nm"
    ".  . .  .  .  .  . "
    "bl . lv .  gd .  sr";
  font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  background:#fff;overflow:hidden;isolation:isolate;
  /* палитра по умолчанию — Искусство (бирюза) */
  --pf-top:#22a4b5;--pf-bot:#2595a5;--pf-tl:#90d5dd;--pf-cell:#e9f4f6;
  --pf-srlab:#45474a;--pf-srval:#231f20}
.pf-banner .pf-sq,.pf-banner .pf-nm{
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 7px),
    linear-gradient(118deg, rgba(255,255,255,.10) 0 46%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--pf-top), var(--pf-bot))}
.pf-banner .pf-sq{grid-area:sq}
.pf-banner .pf-nm{grid-area:nm;display:flex;align-items:center}
.pf-banner .pf-bl{grid-area:bl;background:var(--pf-tl)}
.pf-banner .pf-name{padding-left:1.1cqw;padding-right:16cqw;color:#fff;font-weight:800;
  font-stretch:condensed;font-size:3.5cqw;letter-spacing:.005em;line-height:1.05;
  text-shadow:0 1px 1px rgba(0,0,0,.12)}
.pf-banner .pf-name .pf-sub{display:block;font-size:.5em;font-weight:700;margin-top:.25em}
.pf-banner .pf-field{display:flex;flex-direction:column;justify-content:center}
.pf-banner .pf-lv{grid-area:lv;align-items:center;text-align:center;background:var(--pf-cell)}
.pf-banner .pf-gd{grid-area:gd;align-items:center;text-align:center;background:var(--pf-cell)}
.pf-banner .pf-sr{grid-area:sr;padding-left:1.6cqw;background:var(--pf-tl)}
.pf-banner .pf-lab{font-size:1.15cqw;letter-spacing:.14em;text-transform:uppercase;
  color:#45474a;font-weight:700;margin-bottom:.25cqw}
.pf-banner .pf-val{font-size:2.7cqw;font-weight:800;font-stretch:condensed;color:#231f20;line-height:1}
.pf-banner .pf-sr .pf-lab{color:var(--pf-srlab)}
.pf-banner .pf-sr .pf-val{font-size:2.9cqw;color:var(--pf-srval)}
.pf-banner .pf-patch{position:absolute;right:2.4cqw;top:53%;transform:translateY(-50%);
  height:88%;z-index:3;
  filter:drop-shadow(0 0 .5cqw rgba(255,255,255,.85)) drop-shadow(.55cqw .7cqw .75cqw rgba(0,0,0,1))}
.pf-banner .pf-patch span,.pf-banner .pf-patch a{display:block;height:100%}
.pf-banner .pf-patch img{height:100% !important;width:auto !important;display:block}

/* --- палитры разделов --- */
.pf-banner--активный{--pf-top:#355c46;--pf-bot:#294436;--pf-tl:#639e7f;--pf-cell:#9ec4af}
.pf-banner--домоводство{--pf-top:#b16b29;--pf-bot:#995c26;--pf-tl:#d18332;--pf-cell:#f1b074;
  --pf-srlab:#fff;--pf-srval:#fff}
.pf-banner--духовный{--pf-top:#302f88;--pf-bot:#2b2872;--pf-tl:#47449d;--pf-cell:#94a1d3;
  --pf-srlab:#fff;--pf-srval:#fff}
.pf-banner--здоровье{--pf-top:#702d8f;--pf-bot:#5d2a78;--pf-tl:#9b659e;--pf-cell:#d69fc8;
  --pf-srlab:#fff;--pf-srval:#fff}
.pf-banner--искусство{--pf-top:#22a4b5;--pf-bot:#2595a5;--pf-tl:#90d5dd;--pf-cell:#e9f4f6}
.pf-banner--природа{--pf-top:#9f8e73;--pf-bot:#9a886a;--pf-tl:#b2a79e;--pf-cell:#dbd8d2}
.pf-banner--профессиональные{--pf-top:#992527;--pf-bot:#942324;--pf-tl:#e54d49;--pf-cell:#f7b0b1}
.pf-banner--сельхоз{--pf-top:#704120;--pf-bot:#61381e;--pf-tl:#9a5b2a;--pf-cell:#d3b89a}
.pf-banner--адра{--pf-top:#433073;--pf-bot:#312356;--pf-tl:#646d9e;--pf-cell:#a59ec5;
  --pf-srlab:#fff;--pf-srval:#2c2a56}
.pf-banner--специалист{--pf-top:#302f88;--pf-bot:#2b2872;--pf-tl:#47449d;--pf-cell:#94a1d3;
  --pf-srlab:#fff;--pf-srval:#fff}

/* --- компактный режим для узких колонок (телефон, портрет) --- */
@container (max-width:560px){
  .pf-banner{aspect-ratio:auto;
    grid-template-columns:14px 5px minmax(0,1.15fr) 5px minmax(0,1.15fr) 5px 2.2fr;
    grid-template-rows:auto 5px auto}
  .pf-banner .pf-name{font-size:17px;padding:10px 74px 10px 9px}
  .pf-banner .pf-field{padding:7px 4px 8px}
  .pf-banner .pf-sr{padding-left:9px;padding-right:56px}
  .pf-banner .pf-lab{font-size:8px;letter-spacing:.04em;margin-bottom:2px}
  .pf-banner .pf-val{font-size:13px}
  .pf-banner .pf-sr .pf-val{font-size:14px}
  .pf-banner .pf-patch{height:48px;right:5px;top:56%}
}

/* ============================================================
   Адаптивность для узких экранов (телефон, портрет)
   ============================================================ */
@media screen and (max-width:720px){
  /* Таблицы данных (таблица версий, новости) — прокрутка внутри себя.
     Без этого широкая таблица растягивает колонку контента: текст статьи
     уезжает за край, а container-запрос шапки не срабатывает. */
  .mw-parser-output table.wikitable{
    display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Сетки значков (таблицы без класса) — ужимаются под ширину экрана
     целиком, вместо горизонтальной прокрутки. */
  .mw-parser-output table:not(.wikitable){
    display:table !important;width:100%;max-width:100%;table-layout:fixed;overflow:visible}
  .mw-parser-output table:not(.wikitable) td{
    padding:2px;text-align:center;vertical-align:bottom;width:auto !important}
  .mw-parser-output table:not(.wikitable) th{
    padding:0 1px 10px;font-size:11.5px;font-weight:600;line-height:1.2;width:auto !important;
    hyphens:auto;-webkit-hyphens:auto}
  .mw-parser-output table:not(.wikitable) img{
    width:100%;height:auto;max-width:150px}

  /* Длинные названия статей и ссылки не должны распирать вёрстку */
  .mw-parser-output{overflow-wrap:break-word}
}

/* Vector 2022: при прокрутке ниже заголовка скин делает кнопку оглавления
   position:fixed (body.vector-below-page-title) — на телефоне она повисает
   поверх цветной шапки специализации. Отключаем прилипание: кнопка остаётся
   в заголовке страницы и уезжает вместе с ним при прокрутке. */
@media screen and (max-width:720px){
  body.vector-below-page-title .vector-page-titlebar-toc{
    position:relative !important;top:auto !important}
}