Вики Сообщества
Advertisement
Вики Сообщества

Новые страницы для локального 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) для тёмных фонов
Advertisement