MediaWiki:Common.css

De Base de datos Escort

Nota: Después de publicar, quizás necesite actualizar la caché de su navegador para ver los cambios.

  • Firefox/Safari: Mantenga presionada la tecla Shift mientras pulsa el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
  • Google Chrome: presione Ctrl+Shift+R (⌘+Shift+R en Mac)
  • Internet Explorer/Edge: mantenga presionada Ctrl mientras pulsa Actualizar, o presione Ctrl+F5
  • Opera: Presiona 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: 'Base de conocimientos';
	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: 'Modelo siguiente';
	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: 'Modelo anterior';
}
.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;
	}
}
Obtenido de «https://wikiesp.escortsensors.com/index.php?title=MediaWiki:Common.css&oldid=1584»