MediaWiki:Mobile.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.
/*
* База знаний Эскорт — тема для мобильной версии (MobileFrontend + Minerva)
* Страница: MediaWiki:Mobile.css
*
* Мобильная версия не загружает MediaWiki:Common.css, поэтому здесь продублированы
* шрифты, токены и оформление статей и шаблонов. Источник правды — Common.css:
* при правке компонентов переносите изменения сюда (или пересоберите файл
* скриптом tools/build-mobile-css.py).
*/
/* ===== 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;
}
/* ===== 2m. Каркас Minerva ================================================= */
body.skin-minerva,
.skin-minerva .mw-body,
.skin-minerva .header-container {
font-family: var( --es-font );
}
/* Шапка: тёмная, иконки и название вики белые */
.skin-minerva .header-container.header-chrome {
background: var( --es-black );
box-shadow: none;
border-bottom: 0;
}
.skin-minerva .header-container .minerva-icon,
.skin-minerva .header-container .mw-ui-icon,
.skin-minerva .header-container .cdx-button__icon {
filter: invert( 1 );
}
.skin-minerva .header-container .branding-box a,
.skin-minerva .header-container .branding-box a:visited {
color: #FFFFFF;
font-weight: 700;
}
.skin-minerva .header-container .search {
background: #2A2A2A;
border-color: #3A3A3A;
color: #FFFFFF;
}
.skin-minerva .header-container .search::placeholder {
color: #A6A8AC;
}
/* Заголовок страницы */
.skin-minerva .pre-content h1,
.skin-minerva #firstHeading {
font-family: var( --es-font );
font-weight: 800;
color: var( --es-black );
}
.skin-minerva .mw-body:has( .es-card ) #firstHeading {
font-size: 2rem;
}
.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 );
}
/* Сворачиваемые разделы: строки одинаковой высоты с линией снизу */
.skin-minerva .mw-parser-output > .section-heading {
margin: 0;
padding: 14px 0;
border-bottom: 1px solid var( --es-line );
font-size: 1.0625rem;
letter-spacing: 0.01em;
display: flex;
align-items: flex-start;
}
.skin-minerva .mw-parser-output > .section-heading > .indicator {
flex: 0 0 auto;
margin-top: 0.2em;
}
/* Перенос длинного названия — под текстом, а не под номером */
.skin-minerva .mw-parser-output > .section-heading > .mw-headline {
display: flex;
}
.skin-minerva .mw-parser-output > .section-heading > .mw-headline::before {
flex: none;
}
.skin-minerva .mw-parser-output > section.collapsible-block.open-block {
padding: 4px 0 12px;
}
/* Картинки не шире экрана. До загрузки картинка — заглушка с шириной в пикселях,
а миниатюра свёрстана таблицей и растягивается под неё; в галереях ужимается
только рамка. Миниатюра — блоком, подпись — на всю ширину */
.skin-minerva .mw-parser-output figure[ typeof^='mw:File' ] {
display: block;
max-width: 100%;
}
.skin-minerva .mw-parser-output figure[ typeof^='mw:File' ] > figcaption {
display: block;
}
.skin-minerva .mw-parser-output span[ typeof^='mw:File' ],
.skin-minerva .mw-parser-output figure[ typeof^='mw:File' ] .lazy-image-placeholder,
.skin-minerva .mw-parser-output figure[ typeof^='mw:File' ] img {
max-width: 100%;
}
/* Подвал */
.skin-minerva .minerva-footer,
.skin-minerva .post-content.footer-content {
background: var( --es-black );
color: #D0D0D0;
}
.skin-minerva .minerva-footer a {
color: #FFFFFF;
}
body.skin-minerva .vector-body,
.skin-minerva .mw-body-content {
font-size: 1rem;
line-height: 1.6;
color: var( --es-text );
}
/* ===== 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. Заглавная страница ============================================== */
/* Вводный блок */
.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;
}
}