Справка:Руководство по подготовке к FandomDesktop

Новые страницы для локального CSS и JS

MediaWiki:Fandomdesktop.css и MediaWiki:Fandomdesktop.js

Изменения, которые относятся и к Фэндому, и к Gamepedia

Таббер

Класс .tabber для таббера сохранится, но другие классы будут переименованы и заменены на классы Fandom Design System: wds-tabs__tab для вкладок таббера и wds-tabs__content для содержимого вкладок.

Основной макет страницы

• Для википроектов Gamepedia
  • Блок со всем содержимым страницы (включая навигацию) #pageWrapper теперь доступен по классу .resizable-container, но с навигацией вверху страницы
  • Теперь есть отдельная оболочка для основной части страницы с классом .page. Она содержит область с контентом и правую колонку. Если правая колонка есть на странице, то оболочке добавляется класс .has-right-rail
  • Блок с заголовком страницы, её содержимым и футером имеет класс .page__main
  • К содержимому страницы (ранее #content или .mw-body) теперь доступ через ID #content или класс .page-content
  • Заголовок страницы задаётся через класс .page-header
  • Футер задаётся через .page-footer
  • Доступ к правой колонке через ID #WikiaRailWrapper или класс .WikiaRail
• Для википроектов на Фэндоме
  • Для содержимого страницы (включая навигацию) вместо .WikiaPage используйте класс .resizable-container
  • Блок с основной частью страницы и правой колонкой (ранее .WikiaPageContentWrapper) теперь доступен по классу .page. Если правая колонка есть на странице, то этот блок также получает класс .has-right-rail
  • Блок с основным содержимым вместо ID #WikiaMainContentContainer или класса .WikiaMainContentContainer теперь работает через класс .page__main. В этот блок входят заголовок страницы, содержимое страницы и футер.
  • Для блока с самим содержимым страницы вместо #content или .WikiaArticle нужно использовать ID #content или класс .page-content
  • Заголовок страницы (ранее #PageHeader или .page-header) доступен через класс .page-header
  • Футер задаётся через .page-footer
  • Правая колонка (ранее #WikiaRailWrapper или .WikiaRail) доступна через класс .right-rail-wrapper

Инфобоксы

Визуальные изменения

• Линия границы инфобокса теперь добавляется по умолчанию.

Фон для названия (.pi-title) и заголовков (.pi-header) установлен на акцентированный цвет --theme-accent-color, а цвет шрифта расчитывается динамически и задаётся через --theme-accent-label-color. Для некоторых настроек это может привести к тому, что шрифт названия или заголовков будет нечитаемым.

Рекомендуемое решение проблемы:

.portable-infobox {
  --pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR;
}

Изменения в разметке вкладок

• HTML разметка для панели вкладок и вкладок с коллекцией изображений полностью изменена. Поэтому все текущие настройки для вкладок требуют правок.

Старая разметка для коллекции изображений (упрощено):

<div class="pi-image-collection">
  <ul class="pi-image-collection-tabs">
    <li class="pi-tab-link pi-item-spacing current">
      <span class="pi-tab-label">
        ПОДПИСЬ
      </span>
    </li>
  </ul>
  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        ИЗОБРАЖЕНИЕ ИЛИ ВИДЕО
      </a>
    </figure>
  </div>
</div>

Новая разметка для коллекции изображение (упрощено):

<div class="pi-image-collection wds-tabber">
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <span class="wds-tabs__tab-label">
          ПОДПИСЬ
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        ИЗОБРАЖЕНИЕ ИЛИ ВИДЕО
      </a>
    </figure>
  </div>
</div>

Старая разметка для вкладок (упрощено):

<section class="pi-item pi-panel pi-border-color">
  ЗАГОЛОВОК
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          НАЗВАНИЕ ВКЛАДКИ
        </div>
      </li>
    </ul>
  </div>
  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      СОДЕРЖИМОЕ ВКЛАДКИ
    </div>
  </div>
</section>

Новая разметка для вкладок (упрощено):

<section class="pi-item pi-panel pi-border-color wds-tabber">
  ЗАГОЛОВОК
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <div class="wds-tabs__tab-label">
          НАЗВАНИЕ ВКЛАДКИ
        </div>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    СОДЕРЖИМОЕ ВКЛАДКИ
  </div>
</section>

Переменные CSS для настройки инфобоксов

.portable-infobox {
  --pi-background: /* цвет фона инфобокса */
  --pi-secondary-background: /* цвет фона названия и заголовков */
  --pi-secondary-background--label: /* цвет шрифта названия и заголовков */
  --pi-border-color: /* цвет границы */
}

Фоновое изображение

Новый Конструктор тем добавляет фоновое изображение только вверху страницы, так как пользователи могут использовать разную ширину страницы, в том числе, почти во весь экран монитора. Если вы не хотите создавать новое фоновое изображение и предпочитаете использовать текущее, то для CSS или JS вы можете использовать класс .fandom-community-header__background.

Изменения, которые относятся только к Фэндому

Галереи

На данный момент этот раздел неактуален, так как на сайте работает привычная разметка галерей.

Теперь галереи будут использовать «стандартную» реализацию из самого MediaWiki.

Подробнее см. https://www.mediawiki.org/wiki/Help:Images/ru#Синтаксис_галерей

Есть два важных изменений в вики-тексте по сравнению с галереями Фэндома:

• Вам нужно использовать mode вместо type. Так как на википроектах очень много галерей, type будет временно поддерживаться после релиза FandomDesktop, но мы рекомендуем все новые галереи создавать с помощью mode.
• Часть параметров галерей больше не будет поддерживаться. См. таблицу ниже, чтобы увидеть полный список параметров:

Параметры галереи

Стандартная
type	Временно поддерживается	Рекомендуем заменить на mode.
widths	Поддерживается
columns	НЕ поддерживается	Можно заменить на эквивалент perrow.
perrow	Поддерживается
position	НЕ поддерживается
spacing	НЕ поддерживается
orientation	НЕ поддерживается
captionposition	НЕ поддерживается	captionposition="within" можно заменить на похожий по работе mode="packed-overlay"
captionalign	НЕ поддерживается
captiontextcolor	НЕ поддерживается
bordersize	НЕ поддерживается
bordercolor	НЕ поддерживается
hideaddbutton	НЕ поддерживается
caption	Поддерживается
Слайдшоу
widths	Поддерживается
crop	НЕ поддерживается
showrecentuploads	НЕ поддерживается
position	НЕ поддерживается
Слайдер
orientation	Поддерживается

Примечание:

• Галереи на Фэндоме не имеют рамок вокруг изображений по умолчанию, а у галерей MediaWiki рамка присутствует. Для удаления рамки нужно создать отдельный CSS-стиль для галереи или добавить mode="nolines" в галереи.

Изменения, которые относятся к Gamepedia (Hydra/HydraDark)

Галереи

Новый вид галереи - слайдер

Участники Gamepedia теперь могут добавлять слайдеры на страницы вики. Это модуль с изображениями, который занимает ширину статьи и автоматически прокручивает свои четыре изображения.

Использование:

<gallery mode="slider">
Image.jpg
Image2.jpg
...
</gallery>

У слайдера есть параметр orientation. По умолчанию он имеет значение bottom и отображает навигацию слайдера внизу галереи. Можно переместить навигацию в правую часть слайдера, использовав значение right.

Переменные оформления для CSS

В скине FandomDesktop будут использоваться следующие переменные CSS для настройки темы вики.

В качестве цвета можно использовать

• шестнадцатеричное значение, пример: #ffffff
• RGB-цвета, пример: 0,0,0

Название переменной	Описание
--theme-accent-color	Акцентированный цвет, взятый из Конструктора тем, представлен в шестнадцатеричном формате
--theme-accent-color--hover	Акцентированный цвет, взятый из Конструктора тем, затемнение или осветление на 20% в зависимости от темы, представлен в шестнадцатеричном формате
--theme-accent-color--rgb	Акцентированный цвет, взятый из Конструктора тем, представлен в RGB-формате
--theme-accent-dynamic-color-1	Динамичный цвет 1 для акцента. См. раздел после таблицы для подробной информации
--theme-accent-dynamic-color-1--rgb	Динамичный цвет 1 в RGB-формате для акцента. См. раздел после таблицы для подробной информации
--theme-accent-dynamic-color-2	Динамичный цвет 2 для акцента. См. раздел после таблицы для подробной информации.
--theme-accent-dynamic-color-2--rgb	Динамичный цвет 2 в RGB-формате для акцента. См. раздел после таблицы для подробной информации
--theme-accent-label-color	Доступный цвет текста, который используется вместе с фоном --theme-accent-color, представлен в шестнадцатеричном формате
--theme-alert-color	Тревожный цвет (оттенок красного), всегда контрастен по сравнению с фоном страницы, представлен в шестнадцатеричном формате
--theme-alert-color--hover	Тревожный цвет (оттенок красного), всегда контрастен по сравнению с фоном страницы, затемнение или осветление на 20% в зависимости от темы, представлен в шестнадцатеричном формате
--theme-alert-color--rgb	Тревожный цвет (оттенок красного), всегда контрастен по сравнению с фоном страницы, представлен в RGB-формате
--theme-alert-label	Доступный цвет текста, который используется вместе с фоном --theme-alert-color, представлен в шестнадцатеричном формате
--theme-body-background-color	Основной фон, взятый из Конструктора тем, представлен в шестнадцатеричном формате
--theme-body-background-image	Ссылка на фоновое изображение, взятая из Конструктора тем, представлена в формате строки
--theme-body-dynamic-color-1	Динамичный цвет 1 для фона. См. раздел после таблицы для подробной информации
--theme-body-dynamic-color-1--rgb	Динамичный цвет 1 в RGB-формате для фона. См. раздел после таблицы для подробной информации
--theme-body-dynamic-color-2	Динамичный цвет 2 для фона. См. раздел после таблицы для подробной информации
--theme-body-dynamic-color-2--rgb	Динамичный цвет 2 в RGB-формате для фона. См. раздел после таблицы для подробной информации
--theme-body-text-color	Доступный цвет текста, который используется вместе с фоном --body-background-color, представлен в шестнадцатеричном формате
--theme-body-text-color--hover	Доступный цвет текста, который используется вместе с фоном --body-background-color, затемнение или осветление на 20% в зависимости от темы, зависит от темы, представлен в шестнадцатеричном формате
--theme-border-color	Доступный цвет линии границы, вычисленный на основе --theme-page-background-color, представлен в шестнадцатеричном формате
--theme-border-color--rgb	Доступный цвет линии границы, вычисленный на основе --theme-page-background-color, представлен в RGB-формате
--theme-link-color	Цвет ссылок, взятый из Конструктора тем, представлен в шестнадцатеричном формате
--theme-link-color--hover	Цвет ссылок, взятый из Конструктора тем, затемнение или осветление на 20% в зависимости от темы, зависит от темы, представлен в шестнадцатеричном формате
--theme-link-color--rgb	Цвет ссылок, взятый из Конструктора тем, представлен в RGB-формате
--theme-link-dynamic-color-1	Динамичный цвет 1 для ссылок. См. раздел после таблицы для подробной информации
--theme-link-dynamic-color-1--rgb	Динамичный цвет 1 в RGB-формате для ссылок. См. раздел после таблицы для подробной информации
--theme-link-dynamic-color-2	Динамичный цвет 2 для ссылок. См. раздел после таблицы для подробной информации
--theme-link-dynamic-color-2--rgb	Динамичный цвет 2 в RGB-формате для ссылок. См. раздел после таблицы для подробной информации.
--theme-link-label-color	Доступный цвет текста, который используется вместе с фоном --theme-link-color, представлен в шестнадцатеричном формате
--theme-message-color	Цвет сообщений (оттенок синего), всегда контрастен по сравнению с фоном страницы, представлен в шестнадцатеричном формате
--theme-message-label	Доступный цвет текста, который используется вместе с фоном --theme-message-color, представлен в шестнадцатеричном формате
--theme-page-accent-mix-color	Смесь цвета фона страницы и акцентированного цвета в соотношении 50-50
--theme-page-background-color	Цвет фона страницы (статьи), взятый из Конструктора тем, представлен в шестнадцатеричном формате
--theme-page-background-color--rgb	Цвет фона страницы (статьи), взятый из Конструктора тем, представлен в RGB-формате
--theme-page-background-color--secondary	Вторичный цвет, рассчитанный на основе --theme-page-background-color, слегка смешанный с белым или черным цветом, в зависимости от темы, представлен в шестнадцатеричном формате
--theme-page-dynamic-color-1	Динамичный цвет 1 для цвета фона страницы (статьи). См. раздел после таблицы для подробной информации
--theme-page-dynamic-color-1--rgb	Динамичный цвет 1 в RGB-формате для цвета фона страницы (статьи). См. раздел после таблицы для подробной информации
--theme-page-dynamic-color-2	Динамичный цвет 2 для цвета фона страницы (статьи). См. раздел после таблицы для подробной информации
--theme-page-dynamic-color-2--rgb	Динамичный цвет 2 в RGB-формате для цвета фона страницы (статьи). См. раздел после таблицы для подробной информации
--theme-page-text-color	Цвет текста на странице. Псевдоним для --theme-page-dynamic-color-2.
--theme-page-text-color--hover	Цвет текста на странице при наведении курсора
--theme-page-text-color--rgb	Цвет текста на странице в RGB-формате
--theme-page-text-mix-color	Смесь цвета фона страницы и динамичного цвета 2 для цвета фона страницы в соотношении 50-50
--theme-sticky-nav-background-color	Цвет фона меню навигации. Устанавливается в Конструкторе тем.
--theme-sticky-nav-dynamic-color-1	Динамичный цвет 1 для цвета фона меню навигации. См. раздел после таблицы для подробной информации.
--theme-sticky-nav-dynamic-color-1--rgb	Динамичный цвет 1 в RGB-формате для цвета фона меню навигации. См. раздел после таблицы для подробной информации.
--theme-sticky-nav-dynamic-color-2	Динамичный цвет 2 для цвета фона меню навигации. См. раздел после таблицы для подробной информации.
--theme-sticky-nav-dynamic-color-2--rgb	Динамичный цвет 2 в RGB-формате для цвета фона меню навигации. См. раздел после таблицы для подробной информации.
--theme-sticky-nav-text-color	Цвет текста меню навигации. Псевдоним для --theme-sticky-nav-dynamic-color-1
--theme-sticky-nav-text-color--hover	Цвет текста меню навигации при наведении курсора
--theme-success-color	Цвет успеха (оттенки зелёного), всегда контрастен по сравнению с фоном страницы, представлен в шестнадцатеричном формате
--theme-success-color--rgb	Цвет успеха (оттенки зелёного), всегда контрастен по сравнению с фоном страницы, представлен в RGB-формате
--theme-success-label	Доступный цвет текста для использования с фоном --theme-success-color, представлен в шестнадцатеричном формате
--theme-warning-color	Предупреждающий цвет (оттенки жёлтого), всегда контрастен по сравнению с фоном страницы, представлен в шестнадцатеричном формате
--theme-warning-label	Доступный цвет текста для использования с фоном --theme-warning-color, представлен в шестнадцатеричном формате

Динамические цвета

Динамические цвета рассчитываются на основе цвета фона. Они должны достигать наилучшего возможного коэффициента контрастности.

• dynamic-color-1 — это чёрный (#0E191A) для светлых фонов и белый (#FFFFFF) для тёмных фонов.
• dynamic-color-2 — это серый (#3A3A3A) для светлых фонов и светло-серый (#E6E6E6) для тёмных фонов