Добавление своего класса для определённого оверлея с целью его стилизации

[DimmmCom]

Как известно, в XenForo структура DOM элементов оверлея создаётся динамически с помощью атрибута data-xf-click="overlay"
И если мы изменим свойства класса overlay и его потомков, то данная стилизация коснётся всех вызываемых оверлеев на форуме. Но как быть, если необходимо изменить определённые окна оверлея?
Если мы посмотрим на функцию вызова оверлея, то увидим, что она принимает массив опций overlayConfig: {}

    // ############################### OVERLAY CLICK HANDLER ##############################################

    XF.OverlayClick = XF.Event.newHandler({
        eventNameSpace: 'XFOverlayClick',

        // NOTE: these attributes must be reflected in XF\Template\Templater::overlayClickOptions
        options: {
            cache: true,
            overlayConfig: {},
            forceFlashMessage: false,
            followRedirects: false,
            closeMenus: true
        },

Теперь смотрим на функцию создания оверлея и видим какие опции мы можем передать ей

    // ################################## OVERLAY HANDLER ###########################################

    XF.Overlay = XF.create({
        options: {
            backdropClose: true,
            escapeClose: true,
            focusShow: true,
            className: ''
        },

Нас интересует опция className
Передаются опции в функцию оверлея с помощью атрибута data-overlay-config
Синтаксис примерно такой data-overlay-config="{{ {'className': 'customClass', 'backdropClose': false, 'escapeClose': false}|json }}"
Например, если нам необходимо стилизовать форму входа на форум, то создав модификацию шаблона PAGE_CONTAINER,
мы присвоим свой класс, в этом примере dcom, данному оверлею

<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
    data-xf-click="overlay" data-overlay-config="{{ {'className':'dcom'}|json }}" data-follow-redirects="on">

Теперь мы можем в шаблоне extra.less изменить наш оверлей, обернув overlay в свой селектор.

.dcom {
    .overlay {
        // здесь добавляем необходимые селекторы и прописываем их свойства
    }
}