Цветовые темы в шаблонах

В данном руководстве попробуем рассмотреть создание цветовых тем для шаблонов, в основном таких как инфобоксы и навибоксы, но можно адаптировать любой шаблон.

## Общее представление

Краткое представление про темы инфобоксов можно получить из справки по инфобоксам.
Цветовые темы — это набор стилей css кода с определёнными классами в соответствии с определёнными цветовыми темами/гаммами произведения. Рассмотрим пару примеров. Во вселенной One Piece существуют разные пиратские команды, каждая из которых имеет свой флаг и цветовую гамму. Так, Пираты Соломенной шляпы имеют цветовую гамму из жёлтого и рыжего (от окраса шляпы). Или пример из фильмов. В Гарри Поттере есть четыре факультета, каждый из которых имеет свой цвет (и герб).

Таким образом, можно покрасить инфобоксы персонажей и навибоксы в разные цвета, соответствуя цветовым гаммам объектов произведения. Или можно просто задать разные цвета и/иди стили оформления инфобоксов разного типа: персонажи, эпизоды, локации и т. д..

Если произведение имеет явные элементы цветовых тем, следует заранее продумать это и подготовить разметку в шаблонах для упрощения дальнейшего оформления. Не сделав этого заранее, и указав в шаблонах в атрибуте **style** фиксированные цвета, потом придётся все их перезаписывать.

## Разметка

### Базовая

Инфобоксы
Изначально, инфобоксы представляли из себя обычную таблицу, до тех пор, пока не появились ("модульные" раннее) инфобоксы, которые имеют собственную разметку и даже конструктор. И хоть по сей день ещё встречаются табличные инфобоксы (в основном на неактивных проектах, где инфобоксы не были переписаны), везде используется инфобокс с собственной разметкой и атрибутами. Поэтому, в отличие от навибоксов, рассматривать табличные инфобоксы нет смысла (но принцип оформления они имели тот же, что у навибоксов, что описано ниже в разделе для них).

## Дополнительно

### Название строки 4

И в этой тоже

У инфобоксов имеются стандартные атрибуты, позволяющие изменять цвет фона и текста названия и заголовков разделов:

* `**accent-color-source="background"**` — далее, указав в инфобоксе графу «background = #FFF», название и заголовки станут указанного цвета;
* `**accent-color-text-source="text"**` — аналогично, только для текста, указав «text = #000», текст перекрасится в чёрный.

Таким образом, можно перекрашивать название и заголовки отдельных инфобоксов в статьях. Также можно задать цвет по умолчанию, указав параметры `**accent-color-default**` и `**accent-color-text-default**` соответственно.

Навибоксы
Навибоксы по своей сути представляют обычную таблицу, чаще всего сворачивающуюся до одного заголовка таблицы. Почитать про это можно на странице Справка: Сворачивание. В отличие от инфобоксов, для навибоксов не было создано своей разметки и пользователям приходится по сей день обходиться табличной вёрсткой. Поэтому, здесь нет никаких стандартных параметров. Обычно просто красят ячейки таблицы в нужные цвета. Тем не менее, было написано расширение (конструктор) для навибоксов, "собирающий" простую и понятную разметку для навибоксов. Но об этом позже, в разделе #Оформление через CSS.

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

Рассмотрим один из таких навибоксов Edens Zero Template:Locations. Здесь навибокс не имеет общего шаблона («конструктора») и в каждом новом навибоксе создаётся новая таблица. Но сам навибокс строится частями из отдельных подшаблонов, таких как `'''{{Navbox-Group}}'''` и `'''{{Navbox-Group}}'''`, которые создают группу строк и сами строки, а также подшаблон `'''{{Color switch}}'''` — он то и играет роль цветовых тем. Шаблон размещается в `**style="`{{Color switch|L}}`"**` (**L** — является идентификатором для определения цвета, указанного в шаблоне), а в шаблоне при помощи функции парсера `#switch` перечислены идентификаторы тем и заданные цвета. Выглядит это так:

```
{{#switch: {{{1}}}
...
...
}}

```

В данном случае «L» определяет цвет для темы Локаций.

### Продвинутая

Этот способ уже основан на CSS и более универсален и «функционален» (то есть применим к любым элементам, а не только к заголовкам в тех же инфобоксах), а при необходимых знаниях и умениях намного проще базового варианта с созданием цветовых подшаблонов. Здесь представлена разметка для данного способа, оформление описано в следующем разделе «#Оформление через CSS»

Инфобоксы
Поскольку этот вариант основан на CSS, можно изменить окраску всего инфобокса до мельчайших элементов, при этом довести до того, что сменяться окрас будет лишь одним названием параметра, отвечающего за тему.

У инфобоксов, помимо раннее упомянутых атрибутов, также имеется ещё несколько: `**type=""**`, `**theme=""**`, `**theme-source=""**` — все три атрибута будут задавать общий класс для инфобокса. Только в отличие первых двух, которые задают классы непосредственно в самой разметке инфобокса и поменять их нельзя (они будут уникальными для данного инфобокса), `**theme-source**` задаёт название переменной шаблона, а в ней уже в шаблонах на основе инфобокса можно изменять переменную и она будет менять класс.

Рассмотрим пример инфобокса для персонажей со всеми тремя введёнными атрибутами.

```
<infobox type="Character" theme="Earth" theme-source="Race">
...

```

И шаблон к нему

```
{{Персонаж
...

```

`**theme-source**` в инфобоксе отвечает за переменную **Раса**, а в шаблоне мы укажем `**| Раса = Человек**`. В результате, мы получим инфобокс со следующими классами:

```
pi-theme-Earth pi-theme-Human type-Character

```

Далее, такой набор можно разными способами использовать в оформлении в css. Первые два можно использовать для цветовых гамм персонажей. К примеру, персонажи земляне и человеческой расы будут иметь свою расцветку; марсиане будут слегка отличаться, а раса скруллов (раса в Марвеле) будет иметь совершенно другой окрас. Что касается класса с припиской "**type**", его можно использовать для видоизменения шаблона или для шаблонов другого типа, не для персонажей. Но можно также использовать и как треть цветовую подтему, поскольку этот класс остаётся наравне с первыми двумя. Как вариант, можно просто задать цветовую гамму для всех персонажей, не имеющих своих окрасок (по умолчанию, можно сказать).

Навибоксы
Поскольку это обычные таблицы, в них мы можем задать любые классы, которые в дальнейшем будут использоваться для стилизации навибоксов, в том числе и цветового оформления. Также, как и в случае с подшаблоном `'''{{Color switch}}'''`, описанном раннее, можно создать подшаблон `'''{{theme}}'''` или просто задать переменную для шаблона `'''{{{theme|}}}'''`, и разместить его в атрибуте `**class=""**` нужных нам ячеек. Для навибоксов такими являются: название (основной заголовок), заголовки групп, названия групп, также возможны названия подгрупп, а также и в ячейку с контентом (строки инфобокса), если они не фиксированного цвета. Из примеров Template:Locations и Template:Navibox можно наблюдать следующие заданные пользовательские классы:

```
.navibox <!-- общий класс для всего навибокса -->
.navbox-title <!-- название навибокса -->
.navbox-header <!-- заголовки групп внутри навибокса -->
.navbox-group <!-- ячейки названий групп -->
.navbox-list <!-- ячейки контента -->
.navbox-odd <!-- для нечётных ячеек -->
.navbox-even <!-- для чётных ячеек -->
.theme <!-- пользовательский класс, в данном случае theme (цветовая тема) -->

```

В итоге, можно расставить классы и оформить их через css так, что они будут меняться в зависимости от указания лишь значения переменной "**theme**" в навибоксе. Для этого необходимо будет приписать класс (расставить подшаблон/переменну в шаблоне) цветовой темы к каждому составному классу навибокса. Рассмотрим на примере разметки:
Код конструктора навибокса (`'''{{Навибокс}}'''`)

```
{| class="mw-collapsible mw-collapsed navibox {{{theme|}}}"
! colspan="2" class="navbox-title {{{theme|}}}" | {{{Название|}}}

```

Код шаблона навибокса

```
{{Название навибокса
}}

```

## Оформление через CSS

### Классы

Инфобоксы
На основе разметки, составленной в прошлом разделе, можно оформить инфобокс посредством классов в css. Для этого потребуются в первую очередь классы самого инфобокса. Их и уже готовые примеры тем оформления можно найти на странице Инфобоксы#Список классов. Также составные инфобокса и их наименование посредством классов можно найти на странице Основные классы для CSS и там же "Вспомогательные классы для CSS". На основе всего раннее представленного (атрибутов инфобокса, позволяющих задать пользовательские классы, и собственных классов каждой части инфобокса) можно составить следующий код для темы:
Для примера возьмём значения атрибутов, использованные раннее.

```
.pi-theme-Human { <!-- тоже, что и portable-infobox, поэтому является общим классом для инфобокса -->
}
.pi-theme-Human .pi-title,
.pi-theme-Human .pi-header { <!-- название инфобокса и заголовков групп -->
}
.pi-theme-Human .pi-image-thumbnail { <!-- для ячейки с одиночным изображением -->
}
.pi-theme-Human ul.pi-image-collection-tabs li { <!-- для вкладок -->
}
.pi-theme-Human .pi-group { <!-- для всей группы -->
}
.pi-theme-Human .pi-data { <!-- для строки -->
}
.pi-theme-Human .pi-data-label { <!-- для названия строки -->
}
.pi-theme-Human .pi-data-value { <!-- для содержания строки -->
}
.pi-theme-Human .pi-navigation { <!-- для тега навигации -->
}

```

В результате, все базовые стили инфобокса будут перекрыты стилями темы "Human". Таким образом, имея в наличии два постоянных класса и один переменный (через атрибут `**theme-source=""**`), можно составить множество комбинаций тем и для разных типов шаблонов, начиная с расцветки и заканчивая его строением.

Другой пример
Рассмотрим ещё пример, в котором мы заменили все значения атрибутов, т.е. заполняем совершенно другой инфобокс с другой темой. Пусть это будет шаблон эпизода сериала N арки N сезона. Для инфобокса сериала мы укажем его тип в соответствующем атрибуте, если мы хотим, чтобы внешне инфобоксы персонажей и эпизодов отличались не только окрасом. За окрас будет отвечать следующий атрибут `**theme-source="Season"**`, а в шаблоне будем передавать значение "Season 1" и т.д.. К тому же, если в шаблоне уже есть пункт, отвечающий за отображение номера сезона, можно указать в его атрибуте такое же значение, что и у `**theme-source**`, `**source="Season"**`. Тогда, указывая номер сезона в соответствующей строке, также будет задаваться и значение `**theme-source**`. Но следует помнить, что в таком случае номер сезона должен быть строго однотипен, поскольку он же и будет являться классом для инфобокса. В итоге мы получим следующую разметку:

```
<infobox type="Serial" theme-source="Season">
 <title source="title"><default>''{{PAGENAME}}''</default></title>
 <image source="image"><caption source="caption"/></image>
 <group>
 <header>Информация</header>
 <data source="Season"><format>{{{Season|}}}</format></data>
 </group>
...

```

А в CSS `**.pi-theme-Human**` заменим на `**.type-Serial.pi-theme-Season-1**`. В качестве наглядного примера можно привести сериал «Американская история ужасов», у которого имеется цветовая тема для каждого сезона, и инфобоксы эпизодов и их персонажей имеют соответствующий стиль.

Частичный/Мульти класс
В примере, описанном выше, была упомянута сюжетная арка, но не использована в итоге. Так как же добавить внести её в конструкцию и сделать возможным ещё и оформление эпизодов по аркам? Через универсальный атрибут `**theme-source**`, который определяет пользовательский переменный класс. Запишем его значение как `**"Season 1/Arc Prologue"**`, тогда как класс сформируется как `**Season-1\_Arc-Prologue"**` *(при формировании класса пробел заменится на дефис, а любой другой символ на нижнее подчёркивание)*. Теперь, чтобы использовать часть этого класса (отдельно часть с сезоном и с аркой) используем выборочное значение класса через `**[class\*=""]**`. Таким образом можно составить следующую конструкцию `**.type-Serial[class\*='Season-1'][class\*='Arc-Prologue']**`. Следовательно, мы можем создать любой набор классов в одном значении и использовать их в CSS по частям.

Конкретный пункт
Говоря об атрибутах инфобокса, следует также упомянуть про атрибут `**name=""**` почти для каждого тега инфобокса (он же пункт/строка/ячейка) (т.е. для всех основных тегов). Подробнее о том, какие теги могут иметь атрибут `**name**` можно на странице Расширенные параметры. Как и атрибут `**source=""**`, атрибут `**name=""**` можно указать в теге, что придаст ему дополнительный идентификатор. В CSS их можно будет записать как `**.pi-item[data-source=]**` и `**.pi-item[data-item-name=]**` (значение/название атрибутов в данном случае можно указать и без кавычек).

Со всеми атрибутами
Почему не был использован атрибут `**theme**`? Дело в том, что он не универсален/ограничен одним указанным значением. Если бы значение "Season" было указано в нём, мы бы не смогли менять номер сезона и он бы был фиксированным для данного инфобокса (только Season или только Season-1 было бы для всех эпизодов). В таком случае пришлось бы создавать новый инфобокс для каждого сезона и указывать в нём уже следующий номер.

В каком же случае получится использовать все три атрибута? Когда нам не потребуется переменный класс, а лишь определение темы для трёх разных типов инфобоксов. В качестве примера рассмотрим инфобоксы для медиа, среди которых: сериал, фильм, книга, игра. Всё это инфобоксы на проекте одного конкретного произведения (франшизы) и связаны между собой. Каждый из них может быть использован в статье определённой сюжетной арки, которая может быть не только в фильме, но и сериале и даже в игре (сюжетная арка "Гражданская война" в Marvel, одна из крупнейших и известнейших арок, фигурировавшая, наверно, везде).

В таком случае, мы сможем записать разметку одного из инфобоксов следующим образом:

```
<infobox type="Media" theme="Serial" theme-source="Arc">
...

```

Из этого мы получим инфобокс типа "Медиа" (не персонажи, локации или какие-либо другие статьи), в стиле "Сериала", в расцветке "Арки".

Навибоксы
Из разметки, полученной в разделе #Продвинутая, в CSS можно составить следующую комбинацию, если нужно менять каждый элемент в отдельности:

```
.navibox {
 border: ;
 color: ;
}
.theme.navibox {
 background: ;
 color: ;
}
.theme.navbox-title {
 background: ;
 color: ;
}
.theme.navbox-header {
 background: ;
 color: ;
}
.theme.navbox-group {
 background: ;
 color: ;
}
.theme.navbox-list {
 background: ;
 color: ;
}
.theme.navbox-odd {
 background: ;
 color: ;
}
.theme.navbox-even {
 background: ;
 color: ;
}

```

Если тема является одноцветной для всего навибокса, достаточно следующего кода:

```
.theme {background: ; color: ;}

```

*P.S. Ссылки красятся через элемент "a" (на англ., без точки, это не класс), что является тегом <a>, и с припиской !important к значению свойства color, поскольку ссылкам зачастую задан цвет системно и им нужно повысить приоритет.*

Меняя параметр theme в шаблоне, окраска навибокса также будет меняться, при условии что темы уже написаны и подобраны необходимые цвета.

Рассмотрим наглядный пример уже раннее упоминаемого навибокса One Piece Template:Navibox. В нём задан параметр `{{{colorscheme|}}}`, который определяет класс для цветовой темы, а сам параметр расставлен в нужных ячейках. А в CSS записан такой для каждого класса темы, определяющий цвет фона и текста (два основных параметра для создания цветовой темы. Можно дополнить рамкой, тенью и т.п.)

Модульный навибокс
Поскольку только инфобоксы имеют свою собственную разметку и навибоксы не имеют таковой, в процессе оптимизации шаблонов пользователи создали конструктор для навибоксов, написанный на языке Lua, Global Lua Modules/NavboxBuilder. В источнике подробно описано, как его подключить и настроить. Также можно почитать статью Модульный навибокс.

По своей сути и структуре это тот же обычный табличный навибокс, и в этом случае не нужно заново собирать шаблон, можно просто использовать уже заранее собранный макет. Рассмотрим, из чего он состоит. Как уже отмечено, это обычная таблица, местами обёрнутая в div'ы (в основном в заголовках), с заданными классами для каждого элемента. Но помимо классов, шаблоном уже предусмотрена возможность задать свои параметры как для стиля, так и указание своих классов, для каждого элемента навибокса. Рассмотрим составные:

Навибокс состоит из уже известных и некоторых новых классов:

```
.navbox <!-- общий класс для всего навибокса (здесь он задан как navbox, а не navibox) -->
.navbox-title <!-- название навибокса -->
.navbox-header <!-- заголовки групп внутри навибокса -->
.navbox-content <!-- весь контент навибокса -->
.navbox-section <!-- секции навибокса (группы) (тоже что и navbox-group) -->
.navbox-list <!-- ячейки контента -->
.navbox-odd <!-- для нечётных ячеек -->
.navbox-even <!-- для чётных ячеек -->
а также дополнительные
.navbox-table-wrapper
.navbox-table
.navbox-padding

```

Стиль по умолчанию можно заменить, просто указав название необходимого элемента, к примеру:
`| Название стиль = background: yellow; color: pink;`
перекрасит название инфобокса по заданным параметрам пользователем, обходя css и стили по умолчанию.

Аналогично изменить можно и классы, просто указав название необходимого элемента, к примеру:
`| Название класс = serial-navbox-header`
при этом классы дополнятся к стандартным классам навибокса и указать их можно любое количество через пробел.

В итоге мы получаем тот же навибокс, что и в случае, если бы создавали для него разметку сами, но с уже готовыми и довольно гибкими параметрами. Прибегнув к созданию переменных вроде `{{{colorscheme|}}}` в графах под класс, можно использовать уже прописанные в CSS классы тем, как это было разобрано в примере с обычным навибоксом раннее.

### Переменные

Инфобокс
С появлением переменных, код для тем стал значительно короче и проще. Буквально одной строкой можно менять тему. Правда, для этого потребуется предварительно настроить (переписать код) для оформления инфобокса. Рассмотрим пример уже оформленного инфобокса через переменные, Шаблон:Персонажи и CSS к нему MediaWiki:Themes.css, а также CSS базового оформления инфобокса, MediaWiki:Infoboxes.css, где и задано, что оформляться он будет через переменные, которые в свою очередь записаны на отдельной странице Themes.css.

Для начала следует заменить все значения параметров, которые мы хотим менять в теме, на переменные. Вот пара примеров:

```
.portable-infobox {
 ...
 border: 2px solid var(--EZW-accent);
 box-shadow: 0px 0px 10px 0px var(--EZW-accent);
}
.portable-infobox .pi-title {
 ...
 background-color: var(--EZW-accent);
 color: var(--theme-header-text-color);
}

```

Не обязательно менять только цвет. Через переменные можно передавать разные значения.

Теперь, когда инфобокс подготовлен, остаётся только записать новые значения для разных тем и переназначить их.

Создадим свои переменные и запишем для них значения. Для примера возьмём одну из тем:

```
:root {
 --edens-zero: #191970; <!-- основной цвет -->
 --edens-zero-rgb: #191970aa; <!-- полупрозрачный -->
 --edens-zero--rgb: 25,25,112; <!-- rgb значение для возможности регулировки "на месте" -->
 --edens-zero-txt: #0D0D3D; <!-- для текста -->
 --edens-zero-bd: #0D0D3D; <!-- для рамки -->

```

В ней записаны переменные для нескольких элементов инфобокса: основной цвет (фон), текста, рамки. И теперь переназначим их для темы:

```
.pi-theme-edens-zero,
.edens-zero {
 --EZW-accent: var(--edens-zero);
 --EZW-accent-rgb: var(--edens-zero-rgb);
 --EZW-accent--rgb: var(--edens-zero--rgb);
 --EZW-txt: var(--edens-zero-txt);
 --EZW-bd: var(--edens-zero-bd);
}

```

Теперь, если указать в инфобоксе в графе "Тема" "edens-zero", которая передаётся в атрибут `theme-source=""`, тема, соответственно, поменяется.

В данном примере видно, что созданы свои дополнительные переменные. Но если в них нет необходимости и разные темы различаются лишь одним цветом, количество переменных можно сократить до одной строки, как и упоминалось изначально.

Также можно заметить записанный отдельно класс `.edens-zero`. Таким образом мы задали для этого класса определённые цветовые параметры и можем использовать его в других шаблонах, в частности, для навибокса.

Следует ещё отметить, что запись кода выше также может быть записана вместе, без вынесения переменных в локальные для всей вики. Выглядеть это будет так (без дополнительных переменных):

```
.pi-theme-edens-zero {
 --EZW-accent: #191970;
}

```

В этом случае переменные будут работать только в инфобоксе и нигде больше (так как они были переназначены только для .pi-theme). Конечно, если вы не собираетесь использовать эти переменные нигде, кроме инфобоксов, и в перспективе они также нигде не понадобятся, тогда можно оставить и такую запись. Как вариант, можно использовать полный класс темы инфобокса в других шаблонах, т.е. `.pi-theme-edens-zero`.

Также можно дополнить тему следующим кодом, сразу после/перед переменными:

```
.edens-zero {
 background: var(--EZW-accent); color: var(--EZW-txt);
}

```

Это позволит использовать темы в любых элементах и не присваивать им свои собственные классы и потом дописывать их в темах. Просто добавляем класс темы в ячейку таблицы или любой другой шаблон (к примеру, в заголовок галереи / рамки персонажа) и поскольку у нас уже заданы background и color, применится тема без лишних настроек CSS.

Навибокс
Как и для инфобоксов, меняем для базового стиля нужные значения параметров на переменные. В примере Нулевой Эдем Вики используются модульные инфобоксы, у которого свои классы.

```
.navbox {
 border: 1px solid var(--EZW-bd);
}
.navbox-title,
.navbox-header {
 background-color: var(--EZW-accent) !important;
 color: var(--EZW-txt);
}
.navbox-group a,
.navbox-subgroup a,
.navbox-title a,
.navbox-header a {
 color: var(--EZW-txt) !important;
}
.navbox-header {
 background-color: var(--EZW-accent-rgb) !important;
}
.navbox-group,
.navbox-subgroup {
 background-color: rgb(var(--EZW-accent--rgb),.5) !important;
 color: var(--EZW-txt);
}

```

Здесь заменены все элементы инфобокса (кроме списков с контентом, они зачастую остаются по умолчанию с белым фоном и локальным цветом ссылок/текста).

Ну а поскольку у нас уже заданы значения для темы через класс `.edens-zero`, нам остаётся только в самом навибоксе указать данный класс. Вспомним, как это делается.

Так как в разметке для каждого элемента навибокса задана переменная `{{{colorscheme|}}}` для ввода класса темы, укажем:

`{{Навибокс

## Другие шаблоны

Инфобоксы и навибоксы являются самыми используемыми из шаблонов. Темы для других шаблонов можно сделать аналогично этим двум, в частности аналогично навибоксам, через определённый класс. Обернём шаблон в div с классом темы, а дальше просто оформим нужный шаблон как хочется.

К примеру, на каждой вики используется тег `<tabber>`, которому чаще всего базовое оформление изменяют. Иногда его используют и в инфобоксах, особенно если он табличный, а значит не поддерживает тег `<gallery>`. Поэтому, чтобы оформить таббер для статей одним образом (или разными), а для инфобокса сделать оформление подобно `<gallery>`, его нужно обернуть в div со своим классом и прописать оформление для таббера только этого класса. Вот пример таббера в инфобокса, оформленного аналогично вкладкам инфобокса:

```
/* Оформление таббера в инфобоксе */
.portable-infobox .tabberlive {
 margin-bottom: -10px !important;
 padding: 0 !important;
 margin-left: -7px !important;
 margin-right: -6px !important;
 text-align: center;
}
/** параметры для всего тела таббера **/
.portable-infobox .tabberlive .tabbertab {
 border: none !important;
 margin: 0 !important;
 padding: 0 !important;
}

.portable-infobox ul.tabbernav {
 border: none !important;
 line-height: 15px !important;
 margin-top: 2px !important;
 margin-bottom: -0px !important;
 margin-left: -2px !important;
}
/** поле закладок **/
.portable-infobox ul.tabbernav li a {
 margin: 2px;
 border: 1px solid var(--EZW-accent);
}
/** цвет текста на закладках **/
.portable-infobox ul.tabbernav li a:link {
 padding: 0 10px;
 border: none;
 border-bottom: 2px solid transparent;
 transition: border-color .3s;
}
/** при наведении на неактивную закладку **/
.portable-infobox ul.tabbernav li a:hover {
 border-bottom: 2px solid var(--EZW-accent);
}
/** активная закладка **/
.portable-infobox ul.tabbernav li.tabberactive a {
 border-bottom: 2px solid var(--EZW-accent);
 background-color: transparent;
}
/** при наведении на активную закладку **/
.portable-infobox ul.tabbernav li.tabberactive a:hover {
 border-bottom: 2px solid var(--EZW-accent);
}

```