MediaWiki:Common.css
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/*
* База знаний Эскорт — тема для Vector 2022 (MediaWiki 1.41)
* Страница: MediaWiki:Common.css
*
* Фирменные цвета и шрифты — по escortsensors.com.
* Разделы:
* 0. Шрифты
* 1. Токены (CSS-переменные)
* 2. Каркас Vector: шапка, вкладки, меню, оглавление, подвал
* 3. Типографика статьи
* 4. Приведение старой разметки (<big>, <u>, <blockquote>, жирные заголовки)
* 5. Таблицы, изображения, списки определений, код
* 6. Компоненты шаблонов (es-*)
* 7. Заглавная страница
* 8. Печать
*/
/* ===== 0. Шрифты ==========================================================
* Файлы лежат на сервере вики: /escort-assets/fonts/ (см. README).
* Лицензия шрифтов — SIL OFL 1.1.
*/
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url( /escort-assets/fonts/manrope-cyrillic-wght-normal.woff2 ) format( 'woff2' );
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url( /escort-assets/fonts/manrope-cyrillic-ext-wght-normal.woff2 ) format( 'woff2' );
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url( /escort-assets/fonts/manrope-latin-wght-normal.woff2 ) format( 'woff2' );
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url( /escort-assets/fonts/manrope-latin-ext-wght-normal.woff2 ) format( 'woff2' );
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url( /escort-assets/fonts/jetbrains-mono-cyrillic-wght-normal.woff2 ) format( 'woff2' );
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url( /escort-assets/fonts/jetbrains-mono-latin-wght-normal.woff2 ) format( 'woff2' );
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== 1. Токены ========================================================== */
:root {
--es-red: #DC2B1C; /* акцент: кнопки, маркеры */
--es-red-text: #B3200F; /* ссылки в тексте (контраст 6,4:1) */
--es-black: #181818; /* шапка, заголовки */
--es-text: #3E4044; /* основной текст */
--es-muted: #585A5E; /* подписи (контраст 6,9:1) */
--es-surface: #F2F2F2; /* фоны блоков */
--es-zebra: #FAFAFA;
--es-line: #E2E2E2; /* рамки */
--es-line-soft: #EDEDED;
--es-field: #CDCDCD; /* поля, вторичные кнопки */
--es-warn-bg: #FDEDEB;
--es-warn-line: #F2C3BD;
--es-warn-title: #8E1A0C;
--es-radius: 8px;
--es-radius-s: 6px;
--es-font: 'Manrope', 'Segoe UI', Roboto, Arial, sans-serif;
--es-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}
/* ===== 2. Каркас Vector 2022 ============================================== */
body,
body.skin-vector-2022 .vector-body,
body.skin-vector-2022 .mw-body,
body.skin-vector-2022 .vector-header,
body.skin-vector-2022 .vector-main-menu,
body.skin-vector-2022 .vector-toc,
body.skin-vector-2022 .mw-footer,
body.skin-vector-2022 .cdx-text-input__input,
body.skin-vector-2022 .cdx-button {
font-family: var( --es-font );
}
/* — Шапка: тёмная полоса во всю ширину —
* Префикс body.skin-vector-2022 нужен, чтобы перебить фон, который Vector задаёт
* селекторами из двух классов. */
body.skin-vector-2022 .vector-header-start {
flex: 0 0 auto;
min-width: max-content;
}
body.skin-vector-2022 .vector-header-end {
flex: 1 1 auto;
margin-left: 48px;
}
body.skin-vector-2022 .vector-header-container {
background: var( --es-black );
box-shadow: 0 0 0 100vmax var( --es-black );
clip-path: inset( 0 -100vmax );
}
body.skin-vector-2022 .vector-header-container .mw-header {
min-height: 64px;
}
body.skin-vector-2022 .vector-header .vector-icon {
filter: invert( 1 );
}
body.skin-vector-2022 .vector-header .cdx-button,
body.skin-vector-2022 .vector-header .vector-dropdown-label {
color: #FFFFFF;
}
body.skin-vector-2022 .vector-header .cdx-button:hover,
body.skin-vector-2022 .vector-header .vector-dropdown-label:hover {
background-color: rgba( 255, 255, 255, 0.1 );
}
body.skin-vector-2022 .vector-user-links .vector-menu-content-list > li > a,
body.skin-vector-2022 .vector-user-links #p-vector-user-menu-overflow a,
body.skin-vector-2022 .vector-user-links .mw-list-item > a {
color: #FFFFFF;
}
/* выпадающие меню внутри шапки остаются светлыми */
body.skin-vector-2022 .vector-header .vector-dropdown-content,
body.skin-vector-2022 .vector-header .vector-dropdown-content a {
color: var( --es-black );
}
body.skin-vector-2022 .vector-header .vector-dropdown-content .vector-icon {
filter: none;
}
/* Логотип: белый вордмарк из $wgLogos + подпись */
/* Текстовое название вики (пока не задан логотип-надпись в LocalSettings) */
body.skin-vector-2022 .mw-logo-wordmark {
color: #FFFFFF;
}
body.skin-vector-2022 .mw-logo {
gap: 16px;
align-items: center;
}
body.skin-vector-2022 .mw-logo::after {
content: 'База знаний';
padding-left: 16px;
border-left: 1px solid #4A4A4A;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 28px;
white-space: nowrap;
}
/* Подпись помещается рядом с полным полем поиска только на широком экране:
«Base de conocimientos» (ES) на 1024 px выдавливала кнопки входа за край */
@media ( max-width: 1119px ) {
body.skin-vector-2022 .mw-logo::after {
display: none;
}
}
/* На широком экране шапка Vector — сетка с колонкой под боковое меню (≈248 px).
Логотип с подписью шире, поэтому первая колонка — по содержимому */
@media ( min-width: 1120px ) {
body.skin-vector-2022 .vector-header-container .mw-header {
grid-template-columns: max-content minmax( 0, 1fr );
}
body.skin-vector-2022 .vector-header-end {
margin-left: 12px;
}
}
/* Правая часть шапки сжимается за счёт поля поиска: у вошедших в учётку больше иконок,
и на 1000–1150 px она выходила за край */
body.skin-vector-2022 .vector-header-end,
body.skin-vector-2022 .vector-header-end #p-search,
body.skin-vector-2022 .vector-header-end #p-search .cdx-search-input,
body.skin-vector-2022 .vector-header-end #p-search .cdx-text-input {
min-width: 0;
}
/* Поиск */
body.skin-vector-2022 .vector-header .cdx-text-input__input {
background: #2A2A2A;
border-color: #3A3A3A;
border-radius: var( --es-radius-s ) 0 0 var( --es-radius-s );
color: #FFFFFF;
}
body.skin-vector-2022 .vector-header .cdx-text-input__input::placeholder {
color: #A6A8AC;
}
body.skin-vector-2022 .vector-header .cdx-text-input__input:focus {
border-color: var( --es-red );
box-shadow: inset 0 0 0 1px var( --es-red );
}
body.skin-vector-2022 .vector-header .cdx-search-input__end-button {
background: var( --es-red );
border-color: var( --es-red );
color: #FFFFFF;
border-radius: 0 var( --es-radius-s ) var( --es-radius-s ) 0;
font-weight: 700;
}
body.skin-vector-2022 .vector-header .cdx-search-input__end-button:hover {
background: #C02414;
border-color: #C02414;
}
body.skin-vector-2022 .vector-header .cdx-text-input__start-icon {
filter: invert( 1 );
opacity: 0.7;
}
body.skin-vector-2022 .vector-header .cdx-menu {
font-family: var( --es-font );
}
/* — Заголовок страницы и вкладки — */
body.skin-vector-2022 #firstHeading,
body.skin-vector-2022 .mw-body h1.firstHeading {
font-family: var( --es-font );
font-weight: 800;
font-size: 2.25rem;
line-height: 1.15;
letter-spacing: -0.01em;
color: var( --es-black );
border-bottom: 0;
}
body.skin-vector-2022 .vector-page-titlebar {
box-shadow: none;
border-bottom: 0;
}
body.skin-vector-2022 .vector-page-toolbar-container {
border-bottom: 1px solid var( --es-line );
}
body.skin-vector-2022 .vector-menu-tabs .mw-list-item a,
body.skin-vector-2022 .vector-menu-tabs .mw-list-item a:visited {
color: var( --es-text );
}
body.skin-vector-2022 .vector-menu-tabs .mw-list-item.selected a,
body.skin-vector-2022 .vector-menu-tabs .mw-list-item.selected a:visited {
color: var( --es-black );
font-weight: 700;
border-bottom: 2px solid var( --es-red );
}
body.skin-vector-2022 #siteSub,
body.skin-vector-2022 #contentSub {
color: var( --es-muted );
}
/* — Главное меню и инструменты — */
body.skin-vector-2022 .vector-main-menu a,
body.skin-vector-2022 .vector-page-tools a,
body.skin-vector-2022 .vector-main-menu a:visited,
body.skin-vector-2022 .vector-page-tools a:visited {
color: var( --es-black );
}
body.skin-vector-2022 .vector-pinnable-header-label,
body.skin-vector-2022 .vector-menu-heading {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --es-muted );
}
/* — Оглавление — */
body.skin-vector-2022 .vector-toc .vector-toc-link,
body.skin-vector-2022 .vector-toc .vector-toc-link:visited {
color: var( --es-text );
}
body.skin-vector-2022 .vector-toc .vector-toc-list-item-active > .vector-toc-link,
body.skin-vector-2022 .vector-toc .vector-toc-level-1-active:not( .vector-toc-list-item-expanded ) > .vector-toc-link,
body.skin-vector-2022 .vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link {
color: var( --es-black );
font-weight: 700;
}
body.skin-vector-2022 .vector-toc .vector-toc-list-item-active > .vector-toc-link .vector-toc-text {
box-shadow: -10px 0 0 -8px var( --es-red );
}
body.skin-vector-2022 .vector-toc .vector-toc-numb {
display: inline;
margin-right: 6px;
font-family: var( --es-mono );
font-size: 0.8em;
color: var( --es-muted );
}
body.skin-vector-2022 .vector-toc #toc-mw-content-text .vector-toc-numb {
display: none;
}
/* — Подвал: тёмная полоса — */
body.skin-vector-2022 .mw-footer-container {
margin-top: 48px;
background: var( --es-black );
box-shadow: 0 0 0 100vmax var( --es-black );
clip-path: inset( 0 -100vmax );
}
body.skin-vector-2022 .mw-footer {
border-top: 0;
padding: 32px 0;
color: #D0D0D0;
font-size: 13px;
}
body.skin-vector-2022 .mw-footer a,
body.skin-vector-2022 .mw-footer a:visited {
color: #FFFFFF;
}
body.skin-vector-2022 .mw-footer #footer-places-privacy:has( a[ href='' ] ) {
display: none;
}
body.skin-vector-2022 .mw-footer #footer-icons img {
filter: grayscale( 1 ) invert( 1 ) brightness( 1.6 );
opacity: 0.7;
}
/* ===== 3. Типографика статьи ============================================== */
body.skin-vector-2022 .vector-body {
font-size: 1rem;
line-height: 1.6;
color: var( --es-text );
}
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
font-family: var( --es-font );
color: var( --es-black );
border-bottom: 0;
line-height: 1.25;
}
/* «= Раздел =» на старых страницах даёт h1 внутри статьи — оформляем как раздел */
.mw-parser-output h1,
.mw-parser-output h2 {
margin: 2.2em 0 0.6em;
font-size: 1.375rem;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.mw-parser-output h3 {
margin: 1.8em 0 0.5em;
font-size: 1.125rem;
font-weight: 800;
}
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
margin: 1.4em 0 0.4em;
font-size: 1rem;
font-weight: 700;
}
.mw-parser-output p {
margin: 0.5em 0 0.9em;
}
.mw-parser-output a:not( .new ),
.mw-parser-output a:not( .new ):visited {
color: var( --es-red-text );
}
.mw-parser-output a:not( .new ):hover {
color: var( --es-black );
}
.mw-parser-output a.new,
.mw-parser-output a.new:visited {
color: var( --es-muted );
text-decoration: underline dotted;
}
.mw-editsection,
.mw-parser-output .mw-editsection a,
.mw-parser-output .mw-editsection a:visited {
color: var( --es-muted );
font-family: var( --es-font );
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
/* Автонумерация разделов «01, 02 …» на страницах, оформленных по шаблону {{Карточка датчика}} */
.mw-parser-output:has( .es-card ) {
counter-reset: es-sec;
}
.mw-parser-output:has( .es-card ) > h2 {
counter-increment: es-sec;
}
.mw-parser-output:has( .es-card ) > h2 .mw-headline::before {
content: counter( es-sec, decimal-leading-zero );
margin-right: 0.6em;
font-family: var( --es-mono );
font-weight: 700;
color: var( --es-red );
}
.mw-body:has( .es-card ) #firstHeading {
font-family: var( --es-mono );
font-weight: 700;
font-size: 2.75rem;
letter-spacing: -0.02em;
}
/* ===== 4. Приведение старой разметки ====================================== */
/* <big> в тексте и заголовках больше не увеличивает шрифт — размер задаёт тема */
.mw-parser-output big {
font-size: inherit;
}
/* лишний жирный и подчёркивание внутри заголовков */
.mw-parser-output :is( h1, h2, h3, h4, h5, h6 ) b,
.mw-parser-output :is( h1, h2, h3, h4, h5, h6 ) strong {
font-weight: inherit;
}
.mw-parser-output :is( h1, h2, h3, h4, h5, h6 ) u {
text-decoration: none;
}
/* <blockquote> на старых страницах использовался как предупреждение */
.mw-parser-output blockquote {
margin: 1.2em 0;
padding: 14px 20px 14px 52px;
position: relative;
border: 1px solid var( --es-warn-line );
border-radius: var( --es-radius );
background: var( --es-warn-bg );
color: #3A1410;
/* Minerva задаёт цитатам шрифт с засечками и увеличенный кегль */
font-family: var( --es-font );
font-size: inherit;
font-style: normal;
line-height: 1.55;
}
.mw-parser-output blockquote::before {
content: '';
position: absolute;
left: 18px;
top: 16px;
width: 22px;
height: 22px;
background: #B3200F;
-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E" ) center / contain no-repeat;
mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E" ) center / contain no-repeat;
}
.mw-parser-output blockquote u {
text-decoration: none;
}
.mw-parser-output blockquote p:last-child {
margin-bottom: 0;
}
/* ===== 5. Таблицы, изображения, определения, код ========================= */
.mw-parser-output .wikitable {
margin: 1.2em 0;
border: 1px solid var( --es-line );
border-collapse: collapse;
background: #FFFFFF;
color: var( --es-text );
font-size: 0.9375rem;
}
.mw-parser-output .wikitable > * > tr > th,
.mw-parser-output .wikitable > * > tr > td {
border: 1px solid var( --es-line-soft );
padding: 10px 14px;
vertical-align: top;
}
.mw-parser-output .wikitable > * > tr:first-child > th {
background: var( --es-black );
border-color: var( --es-black );
color: #FFFFFF;
font-weight: 700;
text-align: left;
}
.mw-parser-output .wikitable > * > tr:not( :first-child ) > th {
background: var( --es-surface );
color: var( --es-black );
text-align: left;
}
.mw-parser-output .wikitable > * > tr:nth-child( even ) > td {
background: var( --es-zebra );
}
.mw-parser-output .wikitable > caption {
padding: 0 0 8px;
text-align: left;
font-weight: 800;
color: var( --es-black );
}
.mw-parser-output .wikitable > * > tr:first-child > th a {
color: #FFFFFF;
}
/* Картинки не шире колонки: на старых страницах скриншоты по 800+ px */
.mw-parser-output img.mw-file-element {
max-width: 100%;
height: auto;
}
.mw-parser-output figure[ typeof^='mw:File' ] {
max-width: 100%;
}
/* Миниатюры */
.mw-parser-output figure[ typeof~='mw:File/Thumb' ],
.mw-parser-output figure[ typeof~='mw:File/Frame' ] {
border: 1px solid var( --es-line );
border-radius: var( --es-radius );
background: #FFFFFF;
padding: 8px;
}
.mw-parser-output figure[ typeof~='mw:File/Thumb' ] > :not( figcaption ) .mw-file-element,
.mw-parser-output figure[ typeof~='mw:File/Frame' ] > :not( figcaption ) .mw-file-element {
border: 0;
background: #FFFFFF;
}
.mw-parser-output figure[ typeof~='mw:File/Thumb' ] > figcaption,
.mw-parser-output figure[ typeof~='mw:File/Frame' ] > figcaption {
border: 0;
background: transparent;
padding: 8px 4px 2px;
font-size: 13px;
line-height: 1.4;
color: var( --es-muted );
}
.mw-parser-output ul.gallery {
margin: 1em 0;
}
.mw-parser-output li.gallerybox .thumb {
border-radius: var( --es-radius );
border-color: var( --es-line );
background: #FFFFFF;
}
.mw-parser-output li.gallerybox .gallerytext {
font-size: 13px;
color: var( --es-muted );
}
/* Галереи со скриншотами по 730–900 px: на узком экране — не шире колонки */
.mw-parser-output li.gallerybox,
.mw-parser-output li.gallerybox .thumb {
max-width: 100%;
}
.mw-parser-output li.gallerybox .thumb {
height: auto !important;
padding: 8px 0;
}
.mw-parser-output li.gallerybox .thumb > * {
margin: 0 auto !important;
}
/* Список определений «; термин : значение» */
.mw-parser-output dl:has( > dt ) {
margin: 1em 0;
border-top: 1px solid var( --es-line );
}
.mw-parser-output dl:has( > dt ) > dt {
margin-top: 0;
padding-top: 12px;
font-weight: 800;
color: var( --es-black );
}
.mw-parser-output dl:has( > dt ) > dd {
margin: 2px 0 0;
padding-bottom: 12px;
border-bottom: 1px solid var( --es-line );
}
/* Код и значения */
.mw-parser-output code,
.mw-parser-output kbd,
.mw-parser-output pre,
.es-mono {
font-family: var( --es-mono );
}
.mw-parser-output code {
padding: 1px 5px;
border: 0;
border-radius: 4px;
background: var( --es-surface );
color: var( --es-black );
font-size: 0.875em;
}
.mw-parser-output pre {
border: 1px solid var( --es-line );
border-radius: var( --es-radius );
background: var( --es-zebra );
}
/* ===== 6. Компоненты шаблонов ============================================= */
/* Все компоненты считают размеры с учётом рамок и отступов */
[ class^='es-' ],
[ class*=' es-' ] {
box-sizing: border-box;
}
/* Метка над заголовком */
.es-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --es-red );
}
/* Кнопки: <span class="es-btn es-btn--primary">[[ссылка|текст]]</span> */
.mw-parser-output .es-btn {
display: inline-flex;
}
.mw-parser-output .es-btn > a,
.mw-parser-output .es-btn > a:visited {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 18px;
border-radius: var( --es-radius-s );
font-weight: 700;
font-size: 15px;
text-decoration: none;
box-sizing: border-box;
}
.mw-parser-output .es-btn--primary > a,
.mw-parser-output .es-btn--primary > a:visited {
background: var( --es-red );
color: #FFFFFF;
}
.mw-parser-output .es-btn--primary > a:hover {
background: #C02414;
color: #FFFFFF;
}
.mw-parser-output .es-btn--secondary > a,
.mw-parser-output .es-btn--secondary > a:visited {
background: #FFFFFF;
border: 1px solid var( --es-field );
color: var( --es-black );
}
.mw-parser-output .es-btn--secondary > a:hover {
border-color: var( --es-black );
color: var( --es-black );
}
.mw-parser-output .es-btn > a.external {
background-image: none;
padding-right: 18px;
}
.mw-parser-output .es-btn > a.external::after {
content: '↗';
font-weight: 700;
}
.es-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Предупреждения: {{Внимание}}, {{Примечание}} */
.es-callout {
position: relative;
margin: 1.2em 0;
padding: 14px 20px 14px 52px;
border-radius: var( --es-radius );
border: 1px solid var( --es-line );
background: var( --es-surface );
color: var( --es-text );
}
.es-callout::before {
content: '';
position: absolute;
left: 18px;
top: 16px;
width: 22px;
height: 22px;
background: var( --es-text );
-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E" ) center / contain no-repeat;
mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E" ) center / contain no-repeat;
}
.es-callout__title {
font-weight: 800;
color: var( --es-black );
}
.es-callout__text > p:first-child {
margin-top: 2px;
}
.es-callout__text > p:last-child {
margin-bottom: 0;
}
.es-callout--warn {
border-color: var( --es-warn-line );
background: var( --es-warn-bg );
color: #3A1410;
}
.es-callout--warn::before {
background: #B3200F;
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E" );
}
.es-callout--warn .es-callout__title {
color: var( --es-warn-title );
}
/* Шаги: {{Шаг}} */
.es-step {
display: flex;
gap: 16px;
margin: 12px 0;
padding: 16px 20px;
border: 1px solid var( --es-line );
border-radius: var( --es-radius );
background: #FFFFFF;
}
.es-step__n {
flex: 0 0 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var( --es-radius-s );
background: var( --es-black );
color: #FFFFFF;
font-family: var( --es-mono );
font-size: 14px;
font-weight: 700;
}
.es-step__body {
flex: 1;
min-width: 0;
}
.es-step__title {
font-weight: 800;
color: var( --es-black );
}
.es-step__text > p:first-child {
margin-top: 4px;
}
.es-step__text > p:last-child {
margin-bottom: 0;
}
/* Переключатель способа настройки: {{Способы настройки}} */
.es-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
margin: 4px 0 20px;
padding: 4px;
border-radius: var( --es-radius );
background: var( --es-surface );
}
.mw-parser-output .es-tabs > span > a,
.mw-parser-output .es-tabs > span > a:visited,
.mw-parser-output .es-tabs > span > .mw-selflink {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 16px;
border-radius: var( --es-radius-s );
font-size: 14px;
font-weight: 600;
color: var( --es-text );
text-decoration: none;
}
.mw-parser-output .es-tabs > span > a:hover {
color: var( --es-black );
background: rgba( 255, 255, 255, 0.6 );
}
.mw-parser-output .es-tabs > span > .mw-selflink {
background: #FFFFFF;
color: var( --es-black );
font-weight: 700;
box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
}
/* Карточка датчика: {{Карточка датчика}} */
.es-card-type {
margin: 0 0 12px;
}
.es-card {
display: flex;
flex-wrap: wrap;
margin: 0 0 1.5em;
border: 1px solid var( --es-line );
border-radius: var( --es-radius );
overflow: hidden;
background: #FFFFFF;
}
.es-card__img {
flex: 1 1 200px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border-right: 1px solid var( --es-line-soft );
}
.es-card__img img {
max-width: 100%;
height: auto;
}
.es-card__main {
flex: 999 1 340px;
min-width: 0;
}
.mw-parser-output .es-facts {
display: grid;
grid-template-columns: minmax( 140px, auto ) 1fr;
margin: 0;
border: 0;
font-size: 14px;
}
.mw-parser-output .es-facts > dt,
.mw-parser-output .es-facts > dd {
margin: 0;
padding: 10px 20px;
border-bottom: 1px solid var( --es-line-soft );
}
.mw-parser-output .es-facts > dt {
font-weight: 400;
color: var( --es-muted );
}
.mw-parser-output .es-facts > dd {
font-family: var( --es-mono );
font-size: 13px;
color: var( --es-black );
}
.es-card__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 16px 20px;
}
.mw-parser-output .es-card__actions .es-btn > a {
min-height: 40px;
font-size: 14px;
padding: 0 14px;
}
.es-card__apps {
padding: 0 20px 16px;
font-size: 14px;
color: var( --es-muted );
}
/* Навигация «Следующая модель»: {{Далее}} */
.es-next {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
margin-top: 3em;
padding-top: 20px;
border-top: 1px solid var( --es-line );
font-size: 14px;
}
.es-next__mail {
display: inline-flex;
align-items: center;
gap: 0.35em;
color: var( --es-muted );
}
.mw-parser-output .es-next__mail a.external {
background-image: none;
padding-right: 0;
}
.mw-parser-output .es-next__item > a,
.mw-parser-output .es-next__item > a:visited {
display: inline-flex;
flex-direction: column;
padding: 8px 16px;
border: 1px solid var( --es-field );
border-radius: var( --es-radius );
color: var( --es-black );
text-decoration: none;
font-family: var( --es-mono );
font-weight: 700;
}
.mw-parser-output .es-next__item > a::before {
content: 'Следующая модель';
font-family: var( --es-font );
font-size: 12px;
font-weight: 500;
color: var( --es-muted );
}
.mw-parser-output .es-next__item--prev > a::before {
content: 'Предыдущая модель';
}
.mw-parser-output .es-next__item > a:hover {
border-color: var( --es-black );
}
/* Метки-теги */
.es-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.es-tag {
padding: 2px 6px;
border-radius: 4px;
background: var( --es-surface );
color: var( --es-text );
font-family: var( --es-mono );
font-size: 11px;
font-weight: 700;
line-height: 1.5;
}
/* ===== 7. Заглавная страница ============================================== */
.page-Заглавная_страница #firstHeading,
.page-Main_Page #firstHeading,
.page-Página_principal #firstHeading {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
}
.page-Заглавная_страница .mw-body-header,
.page-Main_Page .mw-body-header,
.page-Página_principal .mw-body-header {
min-height: 0;
}
/* Вводный блок */
.es-hero {
display: flex;
flex-wrap: wrap;
gap: 32px 56px;
align-items: flex-end;
justify-content: space-between;
margin: 8px 0 8px;
padding: 48px 40px 40px;
border-radius: var( --es-radius );
background: var( --es-surface );
}
.es-hero__text {
flex: 999 1 460px;
min-width: 0;
}
.mw-parser-output .es-hero__title {
margin: 10px 0 0;
font-size: 2.75rem;
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.01em;
text-transform: none;
}
.es-hero__lead {
max-width: 620px;
margin: 14px 0 24px;
font-size: 1.125rem;
line-height: 1.55;
color: var( --es-text );
}
/* Карточка поддержки: {{Поддержка}} */
.es-support {
flex: 1 1 320px;
max-width: 420px;
padding: 20px 24px;
border: 1px solid var( --es-line );
border-radius: var( --es-radius );
background: #FFFFFF;
}
.es-support__title {
margin-bottom: 6px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var( --es-muted );
}
.es-support__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
border-top: 1px solid var( --es-line-soft );
font-weight: 600;
}
.es-support__title + .es-support__row {
border-top: 0;
}
.mw-parser-output .es-support__row a,
.mw-parser-output .es-support__row a:visited {
color: var( --es-black );
background-image: none;
padding-right: 0;
}
.mw-parser-output .es-support__row a:hover {
color: var( --es-red-text );
}
.es-support__kind {
font-size: 13px;
font-weight: 500;
color: var( --es-muted );
}
/* Каталог */
.es-catalog {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
gap: 18px;
margin: 20px 0 8px;
}
.es-tile {
display: flex;
flex-direction: column;
border: 1px solid var( --es-line );
border-radius: var( --es-radius );
overflow: hidden;
background: #FFFFFF;
transition: border-color 0.15s;
}
.es-tile:hover {
border-color: var( --es-field );
}
.es-tile[ hidden ] {
display: none;
}
.es-tile__img {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var( --es-line-soft );
background: #FFFFFF;
}
.es-tile__img img {
max-width: 136px;
max-height: 128px;
width: auto;
height: auto;
object-fit: contain;
}
.es-tile__body {
flex: 1;
display: flex;
flex-direction: column;
padding: 14px 18px 16px;
}
.es-tile__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.mw-parser-output .es-tile__name a,
.mw-parser-output .es-tile__name a:visited {
color: var( --es-black );
font-family: var( --es-mono );
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
}
.mw-parser-output .es-tile__name a:hover {
color: var( --es-red-text );
}
.es-tile__cat {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var( --es-muted );
}
.es-tile__type {
margin: 4px 0 0;
font-size: 14px;
line-height: 1.45;
color: var( --es-text );
}
.es-tile .es-tags {
margin-top: 10px;
}
.es-tile__body > :nth-last-child( 2 ) {
margin-bottom: 14px;
}
.es-tile__links {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var( --es-line-soft );
font-size: 14px;
font-weight: 600;
}
.mw-parser-output .es-tile__links a,
.mw-parser-output .es-tile__links a:visited {
color: var( --es-black );
}
.mw-parser-output .es-tile__links a.external {
background-image: none;
padding-right: 0;
}
.mw-parser-output .es-tile__links a.external::after {
content: ' ↗';
}
.mw-parser-output .es-tile__links .es-tile__primary a,
.mw-parser-output .es-tile__links .es-tile__primary a:visited {
color: var( --es-red-text );
font-weight: 800;
}
/* Панель фильтра (строится в MediaWiki:Common.js) */
.es-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding-bottom: 20px;
border-bottom: 1px solid var( --es-line );
}
/* Обёртка кнопок: на широком экране не влияет на раскладку, на узком — строка с прокруткой */
.es-filter__chips {
display: contents;
}
.es-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 14px;
border: 1px solid var( --es-field );
border-radius: var( --es-radius-s );
background: #FFFFFF;
color: var( --es-black );
font: 700 14px/1 var( --es-font );
cursor: pointer;
}
.es-chip:hover {
border-color: var( --es-black );
}
.es-chip:focus-visible,
.es-filter__search:focus-visible {
outline: 2px solid var( --es-red );
outline-offset: 2px;
}
.es-chip[ aria-pressed='true' ] {
background: var( --es-black );
border-color: var( --es-black );
color: #FFFFFF;
}
.es-chip__count {
font-family: var( --es-mono );
font-size: 12px;
color: var( --es-muted );
}
.es-chip[ aria-pressed='true' ] .es-chip__count {
color: #FF8A80;
}
.es-filter__search {
flex: 1 1 220px;
max-width: 320px;
min-height: 40px;
margin-left: auto;
padding: 0 12px;
border: 1px solid var( --es-field );
border-radius: var( --es-radius-s );
font: 500 14px var( --es-font );
color: var( --es-black );
box-sizing: border-box;
}
.es-filter__empty {
margin: 20px 0;
padding: 32px;
border: 1px dashed var( --es-field );
border-radius: var( --es-radius );
text-align: center;
color: var( --es-muted );
}
/* Список ПО и интеграций: {{Строка ПО}} */
.es-softlist {
margin: 20px 0;
border: 1px solid var( --es-line );
border-radius: var( --es-radius );
overflow: hidden;
}
.es-softrow {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 24px;
min-height: 60px;
padding: 10px 44px 10px 22px;
border-top: 1px solid var( --es-line-soft );
background: #FFFFFF;
}
.es-softrow:first-child {
border-top: 0;
}
.es-softrow:nth-child( even ) {
background: var( --es-zebra );
}
.es-softrow:hover {
background: var( --es-surface );
}
.es-softrow::after {
content: '›';
position: absolute;
right: 20px;
top: 50%;
transform: translateY( -52% );
font-size: 24px;
font-weight: 700;
color: var( --es-red );
}
.es-softrow__name {
flex: 0 0 210px;
font-weight: 800;
}
.mw-parser-output .es-softrow__name a,
.mw-parser-output .es-softrow__name a:visited {
color: var( --es-black );
background-image: none;
padding-right: 0;
}
.mw-parser-output .es-softrow__name a::before {
content: '';
position: absolute;
inset: 0;
}
.es-softrow__kind {
flex: 0 0 140px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var( --es-muted );
}
.es-softrow__desc {
flex: 1 1 300px;
min-width: 0;
font-size: 15px;
}
/* Полезные ссылки внизу главной */
.es-links {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
margin: 28px 0 0;
padding-top: 20px;
border-top: 1px solid var( --es-line );
font-weight: 600;
}
.mw-parser-output .es-links a.external {
background-image: none;
padding-right: 0;
}
.mw-parser-output .es-links a.external::after {
content: ' ↗';
}
@media ( max-width: 719px ) {
.es-hero {
padding: 28px 20px;
}
.mw-parser-output .es-hero__title {
font-size: 2rem;
}
.es-filter__search {
max-width: none;
margin-left: 0;
}
.es-card__img {
border-right: 0;
border-bottom: 1px solid var( --es-line-soft );
}
.mw-parser-output .es-facts {
grid-template-columns: 1fr;
}
.mw-parser-output .es-facts > dt {
padding: 10px 16px 0;
border-bottom: 0;
}
.mw-parser-output .es-facts > dd {
padding: 2px 16px 10px;
}
.es-card__img {
padding: 16px;
}
.es-card__actions {
padding: 14px 16px;
}
.es-card__apps {
padding: 0 16px 14px;
}
.es-hero__lead {
font-size: 1rem;
}
/* Переключатель инструкций — во всю ширину, кнопки поровну */
.es-tabs {
display: flex;
width: 100%;
}
.es-tabs > span {
display: flex;
flex: 1 1 0;
min-width: 0;
}
.mw-parser-output .es-tabs > span > a,
.mw-parser-output .es-tabs > span > a:visited,
.mw-parser-output .es-tabs > span > .mw-selflink {
flex: 1;
justify-content: center;
padding: 6px 10px;
line-height: 1.25;
text-align: center;
}
/* Блоки предупреждений компактнее */
.es-callout,
.mw-parser-output blockquote {
padding: 12px 14px 12px 44px;
}
.es-callout::before,
.mw-parser-output blockquote::before {
left: 14px;
top: 14px;
width: 20px;
height: 20px;
}
/* Фильтр каталога: категории в одну строку с прокруткой, поиск под ними */
.es-filter {
padding-bottom: 16px;
}
.es-filter__chips {
display: flex;
flex: 1 1 100%;
gap: 8px;
min-width: 0;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.es-filter__chips::-webkit-scrollbar {
display: none;
}
.es-chip {
flex: 0 0 auto;
}
.es-filter__search {
flex: 1 1 100%;
}
/* Плитки каталога — горизонтальные: фото слева */
.es-catalog {
gap: 12px;
margin-top: 16px;
}
.es-tile {
flex-direction: row;
}
.es-tile__img {
flex: 0 0 92px;
height: auto;
padding: 10px;
border-bottom: 0;
border-right: 1px solid var( --es-line-soft );
}
.es-tile__img img {
max-width: 72px;
max-height: 96px;
}
.es-tile__body {
min-width: 0;
padding: 12px 14px 12px;
}
.es-tile__body > :nth-last-child( 2 ) {
margin-bottom: 10px;
}
.es-tile__links {
gap: 2px 14px;
padding-top: 8px;
}
}
/* ===== 8. Печать ========================================================== */
@media print {
.es-filter,
.es-tabs,
.es-next,
.es-card__actions {
display: none !important;
}
.es-tile,
.es-step,
.es-callout,
.es-card {
break-inside: avoid;
}
}