<?xml version="1.0" encoding="utf-8"?> <style title="[snus-studio] Live Russia" description="" user_selectable="1" base_version_id="2021270" export_version="2"> <assets/> <templates> <template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15"><![CDATA[<!DOCTYPE html> <html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}" data-app="public" data-template="{$template}" data-container-key="{$containerKey}" data-content-key="{$contentKey}" data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}" data-cookie-prefix="{$xf.cookie.prefix}" data-style-id="{$xf.style.style_id}" class="has-no-js {{ $template ? 'template-' . $template : '' }}" {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <xf:set var="$siteName" value="{$xf.options.boardTitle}" /> <xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set> <xf:set var="$description"><xf:description /></xf:set> <title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title> <xf:foreach loop="$head" value="$headTag"> {$headTag} </xf:foreach> <xf:if is="!$head.meta_site_name && $siteName is not empty"> <xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" /> </xf:if> <xf:if is="!$head.meta_type"> <xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" /> </xf:if> <xf:if is="!$head.meta_title"> <xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" /> </xf:if> <xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta"> <xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" /> </xf:if> <xf:if is="!$head.meta_share_url"> <xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" /> </xf:if> <xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')"> <xf:macro template="metadata_macros" name="image_url" arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}" arg-output="{{ true }}" /> </xf:if> <xf:if is="property('metaThemeColor')"> <meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" /> </xf:if> <xf:if is="property('xenfocus_includeCSS')">{{ property('xenfocus_includeCSS') }}</xf:if> <xf:macro template="helper_js_global" name="head" arg-app="public" /> <xf:if is="property('publicFaviconUrl')"> <link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" /> </xf:if> <xf:if is="property('publicMetadataLogoUrl')"> <link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" /> </xf:if> <xf:include template="google_analytics" /> <xf:include template="xenfocus_onload_js" /> </head> <body data-template="{$template}"> <xf:set var="$dark-mode">Dark mode</xf:set> <xf:set var="$light-mode">Light mode</xf:set> <xf:set var="$customize">Customize</xf:set> <xf:if is="$xf.language.language_code === 'en-GB'"> <xf:set var="$customize">Customise</xf:set> <xf:elseif is="$xf.language.language_code === 'fr-FR'" /> <xf:set var="$dark-mode">Mode sombre</xf:set> <xf:set var="$light-mode">Mode lumière</xf:set> <xf:set var="$customize">Personnaliser</xf:set> <xf:elseif is="$xf.language.language_code === 'de-DE'" /> <xf:set var="$dark-mode">Dunkler Modus</xf:set> <xf:set var="$light-mode">Lichtmodus</xf:set> <xf:set var="$customize">Style anpassen</xf:set> <xf:elseif is="$xf.language.language_code === 'es-ES'" /> <xf:set var="$dark-mode">Modo oscuro</xf:set> <xf:set var="$light-mode">Modo de luz</xf:set> <xf:set var="$customize">Personalizar</xf:set> <xf:elseif is="$xf.language.language_code === 'it-IT'" /> <xf:set var="$dark-mode">Modalità oscura</xf:set> <xf:set var="$light-mode">Modalità luce</xf:set> <xf:set var="$customize">Personalizzare</xf:set> </xf:if> <xf:set var="$logo"> <!-- Logo --> <div class="p-header-logo p-header-logo--image"> <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}" class='focus-logo'> <xf:include template="xenfocus_event_logo" /> <xf:if is="property('xenfocus_logoType') != 'text'"> <span class='focus-logo--image'> <xf:if is="property('publicLogoUrl')"> <img src="{{ base_url(property('publicLogoUrl')) }}" alt="{$xf.options.boardTitle}" {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} /> </xf:if> </span> </xf:if> <xf:if is="property('xenfocus_logoType') != 'image'"> <span class='focus-logo--text'> <span class='focus-logo--name'><xf:if is="property('xenfocus_logoText')">{{property('xenfocus_logoText')}}<xf:else />{$xf.options.boardTitle}</xf:if></span> <xf:if is="property('xenfocus_logoSlogan')"><span class='focus-logo--slogan'>{{property('xenfocus_logoSlogan')}}</span></xf:if> </span> </xf:if> </a> </div> </xf:set> <xf:set var="$userHtml"> <!-- User bar --> <div class="p-nav-opposite"> <div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}"> <xf:if is="$xf.visitor.user_id"> <xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'"> <a href="{{ link('account') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user"> <xf:avatar user="$xf.visitor" size="xxs" href="" /> <span class="p-navgroup-linkText">{$xf.visitor.username}</span> </a> <a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link"> <span class="p-navgroup-linkText">{{ phrase('log_out') }}</span> </a> <xf:else /> <a href="{{ link('account') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user" data-xf-click="menu" data-xf-key="{{ phrase('shortcut.visitor_menu')|for_attr }}" data-menu-pos-ref="< .p-navgroup" aria-expanded="false" aria-haspopup="true"> <xf:avatar user="$xf.visitor" size="xxs" href="" /> <span class="p-navgroup-linkText">{$xf.visitor.username}</span> </a> <div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true" data-href="{{ link('account/visitor-menu') }}" data-load-target=".js-visitorMenuBody"> <div class="menu-content js-visitorMenuBody"> <div class="menu-row"> {{ phrase('loading...') }} </div> </div> </div> <a href="{{ link('conversations') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}" data-badge="{$xf.visitor.conversations_unread|number}" data-xf-click="menu" data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}" data-menu-pos-ref="< .p-navgroup" aria-expanded="false" aria-haspopup="true" data-xf-init="tooltip" title="{{ phrase('inbox') }}"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span> </a> <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('conversations/popup') }}" data-nocache="true" data-load-target=".js-convMenuBody"> <div class="menu-content"> <h3 class="menu-header">{{ phrase('conversations') }}</h3> <div class="js-convMenuBody"> <div class="menu-row">{{ phrase('loading...') }}</div> </div> <div class="menu-footer menu-footer--split"> <span class="menu-footer-main"> <a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a> </span> <xf:if is="$xf.visitor.canStartConversation()"> <span class="menu-footer-opposite"> <a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a> </span> </xf:if> </div> </div> </div> <a href="{{ link('account/alerts') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unread ? ' badgeContainer--highlighted' : '' }}" data-badge="{$xf.visitor.alerts_unread|number}" data-xf-click="menu" data-xf-key="{{ phrase('shortcut.alerts_menu')|for_attr }}" data-menu-pos-ref="< .p-navgroup" aria-expanded="false" aria-haspopup="true" data-xf-init="tooltip" title="{{ phrase('alerts') }}"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('nav_alerts') }}</span> </a> <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('account/alerts-popup') }}" data-nocache="true" data-load-target=".js-alertsMenuBody"> <div class="menu-content"> <h3 class="menu-header">{{ phrase('alerts') }}</h3> <div class="js-alertsMenuBody"> <div class="menu-row">{{ phrase('loading...') }}</div> </div> <div class="menu-footer menu-footer--split"> <span class="menu-footer-main"> <a href="{{ link('account/alerts') }}">{{ phrase('show_all...') }}</a> </span> <span class="menu-footer-opposite"> <a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a> </span> </div> </div> </div> </xf:if> <xf:else /> <a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="overlay" data-follow-redirects="on"> <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span> </a> <xf:if is="$xf.options.registrationSetup.enabled"> <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on"> <span class="p-navgroup-linkText">{{ phrase('register') }}</span> </a> </xf:if> </xf:if> <xf:if is="property('xenfocus_themeEditor') AND property('xenfocus_editorIcon_user')"> <a href="#" class="p-navgroup-link xenfocus-navgroup-icon" rel="nofollow" data-xf-init="tooltip" title="{$customize|raw}" data-xenfocus-editor> <xf:fa icon="fa-toggle-on" /> </a> </xf:if> <xf:if is="property('xenfocus_light_dark')"> <a href="{{ link('misc/style', null, { 'style_id': "{{ property('xenfocus_light_dark') }}", '_xfRedirect': $redirect, 't': csrf_token() }) }}" data-xf-init="tooltip" <xf:if is="property('styleType') == 'dark'">title="{$light-mode|raw}"<xf:else />title="{$dark-mode|raw}"</xf:if> class="p-navgroup-link xenfocus-navgroup-icon"> <xf:if is="property('styleType') == 'dark'"> <xf:fa icon="fa-lightbulb" /> <xf:else /> <xf:fa icon="fa-moon" /> </xf:if> </a> </xf:if> </div> <div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}"> <a href="{{ link('whats-new') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew" title="{{ phrase('whats_new')|for_attr }}"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span> </a> <xf:if is="$xf.visitor.canSearch()"> <a href="{{ link('search') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search" data-xf-click="menu" data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}" aria-label="{{ phrase('search')|for_attr }}" aria-expanded="false" aria-haspopup="true" title="{{ phrase('search')|for_attr }}"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('search') }}</span> </a> <div class="menu menu--structural menu--wide" data-menu="menu" aria-hidden="true"> <form action="{{ link('search/search') }}" method="post" class="menu-content" data-xf-init="quick-search"> <h3 class="menu-header">{{ phrase('search') }}</h3> <!--[XF:search_menu:above_input]--> <div class="menu-row"> <xf:if is="$searchConstraints"> <div class="inputGroup inputGroup--joined"> <xf:textbox name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" /> <xf:select name="constraints" class="js-quickSearch-constraint" aria-label="{{ phrase('search_within') }}"> <xf:option value="">{{ phrase('everywhere') }}</xf:option> <xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint"> <xf:option value="{$constraint|json}">{$constraintName}</xf:option> </xf:foreach> </xf:select> </div> <xf:else /> <xf:textbox name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" /> </xf:if> </div> <!--[XF:search_menu:above_title_only]--> <div class="menu-row"> <xf:checkbox standalone="true"><xf:option name="c[title_only]" label="{{ phrase('search_titles_only') }}" /></xf:checkbox> </div> <!--[XF:search_menu:above_member]--> <div class="menu-row"> <div class="inputGroup"> <span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span> <input type="text" class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member')|for_attr }}" aria-labelledby="ctrl_search_menu_by_member" /> </div> </div> <div class="menu-footer"> <span class="menu-footer-controls"> <xf:button type="submit" class="button--primary" icon="search" /> <xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button> </span> </div> <xf:csrf /> </form> </div> </xf:if> </div> </div> </xf:set> <xf:set var="$xenModPanel"><a href='https://vk.com/snus__studio' target='_blank' rel="noreferrer">Установлен с</a> Snus-Studio</xf:set> <xf:set var="$xenSearch"><xf:if is="property('xenfocus_searchBar')"> <div class='focus-wrap-search'> <xf:if is="$xf.visitor.canSearch()"> <form action="{{ link('search/search') }}" method="post"> <!-- Search --> <div class='focus-search'> <div class='focus-search-flex'> <input name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" type="text" /> <div class='focus-search-prefix'><xf:fa icon="fa-search" /></div> </div> </div> <xf:if is="property('xenfocus_searchMenu')"> <div class="focus-search-menu"> <!--[XF:search_menu:above_input]--> <xf:if is="$searchConstraints"> <div class="menu-row"> <xf:select name="constraints" class="js-quickSearch-constraint" aria-label="{{ phrase('search_within') }}"> <xf:option value="">{{ phrase('everywhere') }}</xf:option> <xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint"> <xf:option value="{$constraint|json}">{$constraintName}</xf:option> </xf:foreach> </xf:select> </div> </xf:if> <!--[XF:search_menu:above_title_only]--> <div class="menu-row"> <xf:checkbox standalone="true"><xf:option name="c[title_only]" label="{{ phrase('search_titles_only') }}" /></xf:checkbox> </div> <!--[XF:search_menu:above_member]--> <div class="menu-row"> <div class="inputGroup"> <span class="inputGroup-text">{{ phrase('by:') }}</span> <input type="text" class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member')|for_attr }}" aria-labelledby="ctrl_search_menu_by_member" /> </div> </div> <div class="menu-footer"> <span class="menu-footer-controls"> <xf:button href="{{ link('search') }}">{{ phrase('filters') }}</xf:button> <xf:button type="submit" class="button--primary" icon="search" /> </span> </div> </div> </xf:if> <xf:csrf /> </form> </xf:if> </div> </xf:if></xf:set> <xf:set var="$navLinks"> <!-- Navigation wrap --> <nav class='focus-wrap-nav'> <div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected"> <div class="hScroller-scroll"> <ul class="p-nav-list js-offCanvasNavSource"> <xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}"> <li> <xf:macro name="nav_entry" arg-navId="{$navSection}" arg-nav="{$navEntry}" arg-selected="{{ $navSection == $pageSection }}" arg-shortcut="{$i}" /> </li> </xf:foreach> </ul> </div> </div> </nav> </xf:set> <xf:set var="$nextToLogo"> <div class='focus-ad'><xf:ad position="container_header" /></div> <div class='focus-wrap-user'>{$userHtml|raw}</div> </xf:set> <xf:set var="$navHtml"> <!-- Secondary header --> <div class="p-nav"> <div class="p-nav-inner"> <div class='focus-mobile-navigation'> <a class="p-nav-menuTrigger" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0"> <i aria-hidden="true"></i> <span class="p-nav-menuText">{{ phrase('menu') }}</span> </a> <div class='focus-mobile-logo'> <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}"> <xf:if is="property('publicLogoUrl')"> <img src="{{ base_url(property('publicLogoUrl')) }}" alt="{$xf.options.boardTitle}" {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} /> <xf:else /> <xf:if is="property('xenfocus_logoText')">{{property('xenfocus_logoText')}}<xf:else />{$xf.options.boardTitle}</xf:if> </xf:if> </a> </div> </div> <div class='focus-wrap-user hide:desktop'>{$userHtml|raw}</div> {$navLinks|raw} {$xenSearch|raw} </div> </div> </xf:set> <xf:set var="$subNavHtml"> <!-- Sub navigation --> <xf:if is="$selectedNavChildren is not empty"> <div class="p-sectionLinks"> <div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller"> <div class="hScroller-scroll"> <ul class="p-sectionLinks-list"> <xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i"> <li> <xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" /> </li> </xf:foreach> </ul> </div> </div> </div> <xf:elseif is="{$selectedNavEntry}" /> <div class="p-sectionLinks p-sectionLinks--empty"></div> </xf:if> </xf:set> <div class="p-pageWrapper" id="top"> <div class='dimension-header'> <div class='dimension-header-image-wrap'> <div class='dimension-header-image'></div> </div> <!-- Logo bar: start --> <header class="p-header" id="header"> <div class="p-header-inner"> <div class="p-header-content"> {$logo|raw} {$nextToLogo|raw} </div> </div> </header> <!-- Secondary header: start --> <xf:if is="property('publicNavSticky') == 'primary'"> <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header"> <div class='dimension-nav-wrap'> <div class='dimension-nav-image'> <div class='dimension-nav-blur'></div> </div> {$navHtml|raw} </div> </div> <xf:elseif is="property('publicNavSticky') == 'all'" /> <div class="p-navSticky p-navSticky--all" data-xf-init="sticky-header"> <div class='dimension-nav-wrap'> <div class='dimension-nav-image'> <div class='dimension-nav-blur'></div> </div> {$navHtml|raw} </div> </div> <xf:else /> <div class='dimension-nav-wrap'> <div class='dimension-nav-image'> <div class='dimension-nav-blur'></div> </div> {$navHtml|raw} </div> </xf:if> <!-- Secondary header: end --> </div> <!-- Logo bar: end --> <div class='focus-width'> <div class='focus-content'> <div class="p-body"> <div class="p-body-inner"> <!--XF:EXTRA_OUTPUT--> {$subNavHtml|raw} <!-- Staff bar: start --> <xf:if contentcheck="true"> <div class="p-staffBar"> <div class="p-staffBar-inner hScroller" data-xf-init="h-scroller"> <div class="hScroller-scroll"> <xf:contentcheck> <xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total"> <a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}"> {{ phrase('approval_queue') }} </a> </xf:if> <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total"> <a href="{{ link('reports') }}" class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}" data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:') . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}"> {{ phrase('reports') }} </a> </xf:if> <xf:if contentcheck="true"> <a class="p-staffBar-link menuTrigger" data-xf-click="menu" data-xf-key="alt+m" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a> <div class="menu" data-menu="menu" aria-hidden="true"> <div class="menu-content"> <h4 class="menu-header">{{ phrase('moderator_tools') }}</h4> <xf:contentcheck> <!--[XF:mod_tools_menu:top]--> <xf:if is="$xf.visitor.is_moderator"> <a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a> </xf:if> <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId"> <a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:') . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a> </xf:if> <!--[XF:mod_tools_menu:bottom]--> </xf:contentcheck> </div> </div> </xf:if> <xf:if is="$xf.visitor.is_admin"> <a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a> </xf:if> </xf:contentcheck> </div> </div> </div> </xf:if> <xf:include template="xenfocus_guest" /> <xf:if is="$notices.block"> <xf:macro template="notice_macros" name="notice_list" arg-type="block" arg-notices="{$notices.block}" /> </xf:if> <xf:if is="$notices.scrolling"> <xf:macro template="notice_macros" name="notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" /> </xf:if> <xf:ad position="container_breadcrumb_top_above" /> <xf:if contentcheck="true"> <div class='focus-breadcrumb'> <xf:contentcheck> <xf:macro name="breadcrumbs" arg-breadcrumbs="{$breadcrumbs}" arg-navTree="{$navTree}" arg-selectedNavEntry="{$selectedNavEntry}" /> </xf:contentcheck> <xf:if is="property('xenfocus_socialEnable')"><xf:include template="xenfocus_social" /></xf:if> </div> </xf:if> <xf:include template="xenfocus_countdown" /> <xf:ad position="container_breadcrumb_top_below" /> <xf:macro template="browser_warning_macros" name="javascript" /> <xf:macro template="browser_warning_macros" name="browser" /> <xf:if is="$headerHtml is not empty"> <div class="p-body-header"> {$headerHtml|raw} </div> <xf:elseif contentcheck="true" /> <div class="p-body-header"> <xf:contentcheck> <xf:if contentcheck="true"> <div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}"> <xf:contentcheck> <xf:if is="!$noH1"> <h1 class="p-title-value">{$h1}</h1> </xf:if> <xf:if contentcheck="true"> <div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div> </xf:if> </xf:contentcheck> </div> </xf:if> <xf:if is="$description is not empty"> <div class="p-description">{$description}</div> </xf:if> </xf:contentcheck> </div> </xf:if> <div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}"> <xf:if is="$sideNav"> <div class="p-body-sideNav"> <div class="p-body-sideNavTrigger"> <xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm"> {{ $sideNavTitle ?: phrase('navigation') }} </xf:button> </div> <div class="p-body-sideNavInner" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav"> <div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div> <div data-ocm-class="offCanvasMenu-content"> <div class="p-body-sideNavContent"> <xf:ad position="container_sidenav_above" /> <xf:foreach loop="$sideNav" value="$sideNavHtml"> {$sideNavHtml} </xf:foreach> <xf:ad position="container_sidenav_below" /> </div> </div> </div> </div> </xf:if> <div class="p-body-content"> <xf:ad position="container_content_above" /> <div class="p-body-pageContent">{$content|raw}</div> <xf:ad position="container_content_below" /> </div> <xf:if is="$sidebar"> <div class="p-body-sidebar"> <xf:ad position="container_sidebar_above" /> <xf:foreach loop="$sidebar" value="$sidebarHtml"> {$sidebarHtml} </xf:foreach> <xf:ad position="container_sidebar_below" /> </div> </xf:if> </div> <xf:ad position="container_breadcrumb_bottom_above" /> <xf:macro name="breadcrumbs" arg-breadcrumbs="{$breadcrumbs}" arg-navTree="{$navTree}" arg-selectedNavEntry="{$selectedNavEntry}" arg-variant="bottom" /> <xf:ad position="container_breadcrumb_bottom_below" /> </div> </div> </div> <!-- End: focus-content --> <!-- Mobile off-canvas navigation: start --> <div class="offCanvasMenu offCanvasMenu--nav js-headerOffCanvasMenu" data-menu="menu" aria-hidden="true" data-ocm-builder="navigation"> <div class="offCanvasMenu-backdrop" data-menu-close="true"></div> <div class="offCanvasMenu-content"> <div class="offCanvasMenu-header"> {{ phrase('menu') }} <a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close')|for_attr }}"></a> </div> <xf:if is="$xf.visitor.user_id"> <div class="p-offCanvasAccountLink"> <div class="offCanvasMenu-linkHolder"> <a href="{{ link('account') }}" class="offCanvasMenu-link"> <xf:avatar user="$xf.visitor" size="xxs" href="" /> {$xf.visitor.username} </a> </div> <hr class="offCanvasMenu-separator" /> </div> <xf:else /> <div class="p-offCanvasRegisterLink"> <div class="offCanvasMenu-linkHolder"> <a href="{{ link('login') }}" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true"> {{ phrase('log_in') }} </a> </div> <hr class="offCanvasMenu-separator" /> <xf:if is="$xf.options.registrationSetup.enabled"> <div class="offCanvasMenu-linkHolder"> <a href="{{ link('register') }}" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true"> {{ phrase('register') }} </a> </div> <hr class="offCanvasMenu-separator" /> </xf:if> </div> </xf:if> <div class="js-offCanvasNavTarget"></div> </div> </div> <!-- Mobile off-canvas navigation: end --> <footer class="p-footer" id="footer"> <xf:include template="xenfocus_footer" /> <xf:if is="property('xenfocus_footerEnable')"><div class='footer-bottom-wrap'></xf:if> <div class="p-footer-inner"> <div class="p-footer-row"> <xf:if contentcheck="true"> <div class="p-footer-row-main"> <ul class="p-footer-linkList"> <xf:contentcheck> <xf:if is="$xf.visitor.canChangeStyle()"> <li><a href="{{ link('misc/style') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow"> <xf:fa icon="fa-paint-brush" /> {$xf.style.title} </a></li> </xf:if> <xf:if is="property('xenfocus_themeEditor') AND property('xenfocus_editorIcon_footer')"> <li class='xenfocus-footer-icon'><a href="#" rel="nofollow" data-xf-init="tooltip" title="{$customize|raw}" data-xenfocus-editor><xf:fa icon="fa-toggle-on" /></a></li> </xf:if> <xf:if is="property('xenfocus_light_dark')"> <li class='xenfocus-footer-icon'> <a href="{{ link('misc/style', null, { 'style_id': "{{ property('xenfocus_light_dark') }}", '_xfRedirect': $redirect, 't': csrf_token() }) }}" data-xf-init="tooltip" <xf:if is="property('styleType') == 'dark'">title="{$light-mode|raw}"<xf:else />title="{$dark-mode|raw}"</xf:if>> <xf:if is="property('styleType') == 'dark'"> <xf:fa icon="fa-lightbulb" /> <xf:else /> <xf:fa icon="fa-moon" /> </xf:if> </a> </li> </xf:if> <xf:if is="$xf.visitor.canChangeLanguage()"> <li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('language_chooser')|for_attr }}" rel="nofollow"> <xf:fa icon="fa-globe" /> {$xf.language.title}</a></li> </xf:if> </xf:contentcheck> </ul> </div> </xf:if> <div class="p-footer-row-opposite"> <ul class="p-footer-linkList"> <xf:if is="$xf.visitor.canUseContactForm()"> <xf:if is="$xf.contactUrl"> <li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li> </xf:if> </xf:if> <xf:if is="$xf.tosUrl"> <li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li> </xf:if> <xf:if is="$xf.privacyPolicyUrl"> <li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li> </xf:if> <xf:if is="$xf.helpPageCount"> <li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li> </xf:if> <xf:if is="$xf.homePageUrl"> <li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li> </xf:if> <li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><xf:fa icon="fa-rss" /><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li> </ul> </div> </div> <div class='footer-align'> <div> <xf:if contentcheck="true"> <div class="p-footer-copyright"> <xf:contentcheck> <xf:copyright /> {{ phrase('extra_copyright') }} </xf:contentcheck> <xf:include template="xenfocus_branding" /> </div> </xf:if> {$xenModPanel} </div> <div> <xf:if is="property('xenfocus_socialFooter')"><xf:include template="xenfocus_social" /></xf:if> </div> </div> <xf:if contentcheck="true"> <div class="p-footer-debug"> <xf:contentcheck> <xf:macro template="debug_macros" name="debug" arg-controller="{$controller}" arg-action="{$actionMethod}" arg-template="{$template}" /> </xf:contentcheck> </div> </xf:if> </div> <xf:if is="property('xenfocus_footerEnable')"></div></xf:if> </footer> </div></div> <!-- closing p-pageWrapper --> <xf:include template="xenfocus_mobile_navigation_bar" /> <xf:include template="xenfocus_editor" /> <div class="u-bottomFixer js-bottomFixTarget"> <xf:if is="$notices.floating"> <xf:macro template="notice_macros" name="notice_list" arg-type="floating" arg-notices="{$notices.floating}" /> </xf:if> <xf:if is="$notices.bottom_fixer"> <xf:macro template="notice_macros" name="notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" /> </xf:if> </div> <xf:if is="property('scrollJumpButtons')"> <div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}"> <xf:button href="#top" class="button--scroll" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-up" /><span class="u-srOnly">{{ phrase('top') }}</span></xf:button> <xf:if is="property('scrollJumpButtons') != 'up'"> <xf:button href="#footer" class="button--scroll" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-down" /><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button> </xf:if> </div> </xf:if> <xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" /> <xf:if is="count($xf.reactionsActive) > 1"> <script type="text/template" id="xfReactTooltipTemplate">
		<div class="tooltip-content-inner">
			<div class="reactTooltip">
				<xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction">
					<xf:reaction id="{$reactionId}" tooltip="true" />
				</xf:foreach>
			</div>
		</div>
	</script> </xf:if> <xf:include template="xenfocus_js" /> <xf:include template="xenfocus_countdown_js" /> <xf:include template="xenfocus_event_overlay" /> <xf:include template="xenfocus_extra_js" /> {$ldJsonHtml|raw} </body> </html> <xf:macro name="nav_entry" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut=""> <div class="p-navEl {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}> <xf:if is="$nav.href"> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}" arg-shortcut="{{ $nav.children ? false : $shortcut }}" /> <xf:if is="$nav.children"><a data-xf-key="{$shortcut}" data-xf-click="menu" data-menu-pos-ref="< .p-navEl" class="p-navEl-splitTrigger" role="button" tabindex="0" aria-label="{{ phrase('toggle_expanded')|for_attr }}" aria-expanded="false" aria-haspopup="true"></a></xf:if> <xf:elseif is="$nav.children" /><a data-xf-key="{$shortcut}" data-xf-click="menu" data-menu-pos-ref="< .p-navEl" class="p-navEl-linkHolder" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true"> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="p-navEl-link p-navEl-link--menuTrigger" /> </a> <xf:else /> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="p-navEl-link" arg-shortcut="{$shortcut}" /> </xf:if> <xf:if is="$nav.children"> <div class="menu menu--structural" data-menu="menu" aria-hidden="true"> <div class="menu-content">  <xf:foreach loop="$nav.children" key="$childNavId" value="$child"> <xf:macro name="nav_menu_entry" arg-navId="{$childNavId}" arg-nav="{$child}" /> </xf:foreach> </div> </div> </xf:if> </div> </xf:macro> <xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}"> <xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" /> <{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }} class="{{ trim($class) }} {$nav.attributes.class}" {{ attributes($nav.attributes, ['class']) }} {{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }} data-nav-id="{$navId}"><xf:if is="$nav.icon"><xf:fa icon="{$nav.icon}" /> </xf:if>{{ $titleHtml ? $titleHtml|raw : $nav.title }}<xf:if is="$nav.counter"> <span class="badge badge--highlighted">{$nav.counter|number}</span></xf:if></{$tag}> </xf:macro> <xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0"> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy" /> <xf:if is="$nav.children"> <xf:foreach loop="$nav.children" key="$childNavId" value="$child"> <xf:macro name="nav_menu_entry" arg-navId="{$childNavId}" arg-nav="{$child}" arg-depth="{{ $depth + 1 }}" /> </xf:foreach> <xf:if is="$depth == 0"> <hr class="menu-separator" /> </xf:if> </xf:if> </xf:macro> <xf:macro name="breadcrumbs" arg-breadcrumbs="!" arg-navTree="!" arg-selectedNavEntry="{{ null }}" arg-variant=""> <xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" /> <xf:if contentcheck="true"> <div class="p-breadcrumbs-wrap {{ $variant ? 'p-breadcrumbs-wrap--' . $variant : '' }}"> <ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}" itemscope itemtype="https://schema.org/BreadcrumbList"> <xf:contentcheck> <xf:set var="$position" value="{{ 0 }}" /> <xf:if is="$rootBreadcrumb AND $rootBreadcrumb.href != $xf.uri"> <xf:set var="$position" value="{{ $position + 1 }}" /> <xf:macro name="crumb" arg-position="{$position}" arg-href="{$rootBreadcrumb.href}" arg-value="{$rootBreadcrumb.title}" /> </xf:if> <xf:if is="$selectedNavEntry && $selectedNavEntry.href && $selectedNavEntry.href != $xf.uri && $selectedNavEntry.href != $rootBreadcrumb.href"> <xf:set var="$position" value="{{ $position + 1 }}" /> <xf:macro name="crumb" arg-position="{$position}" arg-href="{$selectedNavEntry.href}" arg-value="{$selectedNavEntry.title}" /> </xf:if> <xf:foreach loop="$breadcrumbs" value="$breadcrumb" if="$breadcrumb.href != $xf.uri"> <xf:set var="$position" value="{{ $position + 1 }}" /> <xf:macro name="crumb" arg-position="{$position}" arg-href="{$breadcrumb.href}" arg-value="{$breadcrumb.value}" /> </xf:foreach> </xf:contentcheck> </ul> </div> <xf:elseif is="property('xenfocus_socialEnable')" /> <div class="p-breadcrumbs-wrap {{ $variant ? 'p-breadcrumbs-wrap--' . $variant : '' }}"> <ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}" itemscope itemtype="https://schema.org/BreadcrumbList"> <xf:if is="$xf.options.rootBreadcrumb"> <xf:macro name="crumb" arg-position="1" arg-href="{$rootBreadcrumb.href}" arg-value="{$rootBreadcrumb.title}" /> <xf:else /> <xf:macro name="crumb" arg-position="1" arg-href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}" arg-value="{{ phrase('home') }}" /> </xf:if> </ul> </div> </xf:if> </xf:macro> <xf:macro name="crumb" arg-href="!" arg-value="!" arg-position="{{ 0 }}"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a href="{$href}" itemprop="item"> <span itemprop="name">{$value}</span> </a> <xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if> </li> </xf:macro>]]></template> <template title="extra.less" type="public" addon_id="XF" version_id="2001270" version_string="2.1.1"><![CDATA[{{ include('xenfocus_base.less') }} {{ include('xenfocus_theme.less') }} // Place your custom code below]]></template> <template title="xenfocus_base.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[ @focus-wallpaper: true; @body-padding-top: 0px; @body-padding-bottom: 0px; @focus-fluid-margin: 100px; @focus-width: ~"calc(100vw - (@xf-pageEdgeSpacer * 2))"; @content-padding: 15px; <xf:if is="property('publicHeader--background-color')"> @header-padding: 20px; <xf:else /> @header-padding: 0px; </xf:if> @p-header-content--max-width: ~"calc(100vw - 30px)"; @logo-image-height: @xf-xenfocus_logoHeight*1px; @logo-reduce-image-height-by: 0px; @mobile-logo-image-height: @xf-xenfocus_logoHeightMobile*1px; @mobile-logo-reduce-image-height-by: 0px; @focus-logo-image--margin: 20px; @logo-slogan-opacity: 0.75; @logo-slogan-size: 0.5em; @logo-slogan-margin: 0.7em; @focus-mobile-logo-color: contrast(@xf-publicNav--background-color, xf-intensify(@xf-publicNav--color, 30%), xf-diminish(@xf-publicNav--color, 20%)); @nav-icon-size: 14px; @focus-dropdown-nav: true; @navigation-arrow-size: 20px; @navigation-arrow-color: @xf-publicNavTab--color; @navigation-arrow-gradient: @xf-publicNav--background-color; <xf:if is="property('xenfocus_userStyles--background-color')"> @user-hover: fade(darken(@xf-xenfocus_userStyles--background-color, 30%), 15%); <xf:elseif is="property('xenfocus_userStyles--color')" /> @user-hover: fade(@xf-xenfocus_userStyles--color, 10%); <xf:else /> @user-hover: rgba(255,255,255,0.1); </xf:if> <xf:if is="property('xenfocus_userStyles--border-color')"> @user-border-color: @xf-xenfocus_userStyles--border-color; <xf:elseif is="property('xenfocus_userStyles--color')" /> @user-border-color: fade(@xf-xenfocus_userStyles--color, 15%); <xf:else /> @user-border-color: transparent; </xf:if> @user-border-width: <xf:if is="property('xenfocus_userStyles--border-width')">@xf-xenfocus_userStyles--border-width<xf:else />0px</xf:if>; @user-border-radius: <xf:if is="property('xenfocus_userStyles--border-radius')">@xf-xenfocus_userStyles--border-radius<xf:else />0px</xf:if>; @user-links-sep: 1px; @user-links-radius-mobile: 4px; @remove-userlink-text: false; @register-offset-v: <xf:if is="property('xenfocus_userStyles--background-color')">3px<xf:else />0px</xf:if>; @register-offset-h: <xf:if is="property('xenfocus_userSep')">3px<xf:else />0px</xf:if>; @user-links-icon: 14px; @search-width: xf-default(@xf-xenfocus_searchWidth, 240)*1px; @search-height: xf-default(@xf-xenfocus_searchHeight, 34)*1px; @search-background-color: xf-default(@xf-xenfocus_searchStyles--background-color, transparent); @search-background-image: xf-default(@xf-xenfocus_searchStyles--background-image, none); @search-color: xf-default(@xf-xenfocus_searchStyles--color, inherit); @search-border: xf-default(@xf-xenfocus_searchStyles--border-width, 0px) solid xf-default(@xf-xenfocus_searchStyles--border-color, transparent); @search-border-left: xf-default(@xf-xenfocus_searchStyles--border-width, 0px); @search-border-right: xf-default(@xf-xenfocus_searchStyles--border-width, 0px); @search-radius: xf-default(@xf-xenfocus_searchStyles--border-radius, 0); @focus-search-arrow: 7px; @focus-search-dropdown: @xf-contentBg; <xf:if is="property('styleType') == 'light'"> @focus-search-dropdown-border: rgba(0,0,0,0.1); <xf:else /> @focus-search-dropdown-border: rgba(255,255,255,0.1); </xf:if> @mobile-navigation-bar--background: @xf-publicNav--background-color; @mobile-navigation-bar--color: @xf-publicNav--color; <xf:if is="property('styleType') == 'light'"> @mobile-navigation-background: @xf-paletteColor5; @mobile-navigation-color: @xf-paletteColor1; <xf:else /> @mobile-navigation-background: @xf-paletteColor2; @mobile-navigation-color: @xf-paletteColor5; </xf:if> @mobile-sticky-top: 0px; @focus-breadcrumbs: true; @focus-breadcrumbs-mobile: true; @breadcrumb-height: xf-default(@xf-xenfocus_breadcrumbHeight, 38)*1px; @breadcrumb-border-width: <xf:if is="property('xenfocus_breadcrumb--border-color')">1px<xf:else />0px</xf:if>; @breadcrumb-border-color: xf-default(@xf-xenfocus_breadcrumb--border-color, transparent); @breadcrumb-color: xf-default(@xf-xenfocus_breadcrumb--color, transparent); @breadcrumb-background-hex: xf-default(@xf-xenfocus_breadcrumb--background-color, transparent); @breadcrumb-background-image: xf-default(@xf-xenfocus_breadcrumb--background-image, none); @breadcrumb-radius: xf-default(@xf-xenfocus_breadcrumb--border-radius, 0px); @breadcrumb-highlight: <xf:if is="property('xenfocus_breadcrumbHover--background-color')">fadein(@xf-xenfocus_breadcrumbHover--background-color, 30%)<xf:else />rgba(255,255,255,0.5)</xf:if>; @breadcrumb-shadow: <xf:if is="property('xenfocus_breadcrumb--background-color')">fade(darken(@xf-xenfocus_breadcrumb--background-color, 20%), 80%)<xf:else />rgba(0,0,0,0.2)</xf:if>; @breadcrumb-hover: xf-default(@xf-xenfocus_breadcrumbHover--background-color, rgba(255,255,255,0.3)); @breadcrumb-active: <xf:if is="property('xenfocus_breadcrumb--background-color')">fade(darken(@xf-xenfocus_breadcrumb--background-color, 20%), 15%)<xf:else />rgba(0,0,0,0.05)</xf:if>; @social-border: 1px; @social-height: @breadcrumb-height; @social-footer-basic: true; @block-container-shift: false; @block-container: ~'.block-container, .block--messages .message'; @block-header: ~'.block-header'; @block-body: ~'.block-body'; @block-minor-header: ~'#XF .block-minorHeader'; @focus-wallpaper-elements: ~'.p-body-header'; @sticky-top: @xf-xenfocus_navHeight; @new-badge-color: #fff; @new-badge-background: #ed7a16; @node-icon-read-filter: grayscale(1); @node-icon-read-opacity: 0.4; @node-extra-padding: 4px; @node-grid-padding: 15px; @node-bold-title: true; @subforum-grid: true; @node-alt-stats: true; @node-zebra: true; @node-zebra-color: xf-intensify(@xf-contentBg, 2%); @subforum-width: 150px; @grid-node-width: 380px; @grid-node-gap: 5px; @grid-node-wrapper: @xf-contentAltBg; @grid-hover-inset: 0px; @hide-node-statsMeta-mobile: true; <xf:if is="property('xenfocus_wrapperStyles--background-color')"> @reset-grid-wrapper:true; <xf:else /> @reset-grid-wrapper:false; </xf:if> @focus-sidebar-icons: true; @minorHeader-icon: '\f141'; @focus-post-buttons: true; @editor-bg: xf-intensify(@xf-contentBg, 1.5%); @editor-text: @xf-textColor; <xf:if is="property('xenfocus_postButton') == 'button'"> @reset-reaction-text: true; <xf:else /> @reset-reaction-text: false; </xf:if> @post-meta-opacity: 0.4; @mega-footer-copyright: darken(@xf-publicFooter--background-color, 5%); @focus-pagination: true; @pagination-radius: @xf-buttonBase--border-radius; @pagination-active: @xf-paletteColor4; @pagination-minor: @xf-textColorMuted; @pagination-gap: 5px; <xf:if is="property('styleType') == 'light'"> @pagination-page: @xf-contentBg; @pagination-shadow: rgba(0,0,0,0.12) 0px 1px 1px, rgba(0,0,0,0.05) 0px 1px 2px; @pagination-shadow-active: inset rgba(0,0,0,0.2) 0px 1px 3px; <xf:else /> @pagination-page: lighten(@xf-contentBg, 3.5%); @pagination-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px; @pagination-shadow-active: @pagination-shadow; </xf:if> @pagination-page-hover: lighten(@pagination-page, 3%); @input--placeholder: 0.4; @input--placeholder-active: 0.5; [data-focus-text]::after{ content: attr(data-focus-text); } .node--unread .node-title::before{ content: "NEW" } .focus-editor-wrap{ content: "Theme Editor" } .focus-guest .focus-guest-header::before{ content: "Welcome to " } .structItemContainer-group--sticky::before{ content: "Sticky threads" } .structItemContainer-group--sticky::after{ content: "Regular threads" } <xf:if is="$xf.language.language_code === 'de-DE'"> .node--unread .node-title::before{ content: "NEU" } .focus-editor-wrap{ content: "Themeneditor" } .focus-guest .focus-guest-header::before{ content: "Willkommen auf " } .structItemContainer-group--sticky::before{ content: "Wichtige Themen" } .structItemContainer-group--sticky::after{ content: "Normale Themen" } [data-focus-text="Background Picker"]::after{ content: "Hintergrundauswahl" } [data-focus-text="Customize layout"]::after{ content: "Layout anpassen" } [data-focus-text="Save"]::after{ content: "Speichern" } [data-focus-text="Choose color"]::after{ content: "Wahle eine Farbe" } [data-setting="focus-mobile-navigation-bar"] .focus-editor-text{ &::before{ content: "Mobile Navigationsleiste?" } &::after{ content: "Eine Navigationsleiste am unteren Rand der Site anzeigen, wenn Sie ein mobiles Gerät verwenden?" } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "Flexible Breite?" } &::after{ content: "Wenn Sie dies aktivieren, wird die Breite der Website angepasst, sodass sie die Breite Ihres Browsers einnimmt. Nützlich für größere Bildschirme." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Gitterstruktur?" } &::after{ content: "Wenn diese Option aktiviert ist, werden die Foren als Gitteransicht anstelle einer Listenansicht angezeigt." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Fixierte Seitenleiste?" } &::after{ content: "Wenn diese Option aktiviert ist, bewegt sich die Seitenleiste mit dem Seitenlauf mit." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Position Seitenleiste wechseln?" } &::after{ content: "Wechselt die Position der Seitenleiste zwischen den links und rechts." } } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Schnee aktivieren?" } &::after{ content: "Wenn aktiviert, fällt animierter Schnee über Ihren Browser." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Konfetti aktivieren?" } &::after{ content: "Wenn diese Option aktiviert ist, werden animierte Konfetti in Ihrem Browser angezeigt." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Countdown anzeigen?" } &::after{ content: "Wenn diese Option aktiviert ist, wird oben auf Ihrer Seite ein Countdown angezeigt." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Parallaxeffekt aktivieren?" } &::after{ content: "Wenn aktiviert, wird ein Parallax-Effekt auf den Header angewendet." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Parallaxe Hintergrund?" } &::after{ content: "Wenn aktiviert, wird das Hintergrundbild animiert und verwischt, wenn die Seite gescrollt wird." } } .focus-timer [data-countdown-text="week,"]::before{ content: "woche,"; } .focus-timer [data-countdown-text="weeks,"]::before{ content: "wochen,"; } .focus-timer [data-countdown-text="days and"]::before{ content: "tage und"; } .focus-timer [data-countdown-text="day and"]::before{ content: "tag und"; } </xf:if> <xf:if is="$xf.language.language_code === 'fr-FR'"> .node--unread .node-title::before{ content: "NOUVEAU" } .focus-editor-wrap{ content: "Éditeur de thème" } .focus-guest .focus-guest-header::before{ content: "Bienvenue sur " } .structItemContainer-group--sticky::before{ content: "Sujets importants" } .structItemContainer-group--sticky::after{ content: "Discussions" } [data-focus-text="Background Picker"]::after{ content: "Sélecteur de fond" } [data-focus-text="Customize layout"]::after{ content: "Personnaliser la mise en page" } [data-focus-text="Save"]::after{ content: "Sauvegarder" } [data-focus-text="Choose color"]::after{ content: "Choisissez la couleur" } [data-setting="focus-mobile-navigation-bar"] .focus-editor-text{ &::before{ content: "Barre de navigation mobile?" } &::after{ content: "Afficher une barre de navigation en bas du site lors de l'utilisation d'un appareil mobile?" } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "Largeur du site" } &::after{ content: "Activer cette option augmentera la largeur du site afin qu'il occupe toute la largeur de votre navigateur. Utile pour les grands écrans." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Disposition des forums" } &::after{ content: "Si activé, les forums seront affichés sous forme de grille plutôt que par rangées." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Barre latérale intelligente" } &::after{ content: "Si activé, la barre latérale défilera intelligement pour un accès facile." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Basculer la barre latérale ?" } &::after{ content: "Basculez la barre latérale entre les côtés gauche et droit de la page d'accueil." } } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Effet de neige" } &::after{ content: "Si activé, de la neige tombera sur votre écran." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Effet confettis" } &::after{ content: "Si activé, des confettis tomberont sur votre écran." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Affichage du compte à rebours" } &::after{ content: "Si activé, un compte à rebours s'affichera en haut de chaque page." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Activer l'effet de parallaxe ?" } &::after{ content: "Si activé, un effet de parallaxe sera appliqué à l'en-tête." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Fond de parallaxe ?" } &::after{ content: "Si activé, l'image d'arrière-plan s'anime et s'estompe lorsque la page défile." } } .focus-timer [data-countdown-text="week,"]::before{ content: "semaine,"; } .focus-timer [data-countdown-text="weeks,"]::before{ content: "semaines,"; } .focus-timer [data-countdown-text="days and"]::before{ content: "jours et"; } .focus-timer [data-countdown-text="day and"]::before{ content: "jour et"; } </xf:if> <xf:if is="$xf.language.language_code === 'es-ES'"> .node--unread .node-title::before{ content: "RECIENTE" } .focus-editor-wrap{ content: "Editor de temas" } .focus-guest .focus-guest-header::before{ content: "Bienvenido a " } .structItemContainer-group--sticky::before{ content: "Hilos Pegajosos" } .structItemContainer-group--sticky::after{ content: "Hilos Normales" } [data-focus-text="Background Picker"]::after{ content: "Selector de fondo" } [data-focus-text="Customize layout"]::after{ content: "Personalizar diseño" } [data-focus-text="Save"]::after{ content: "Salvar" } [data-focus-text="Choose color"]::after{ content: "Elegir color" } [data-setting="focus-mobile-navigation-bar"] .focus-editor-text{ &::before{ content: "Barra de navegación móvil?" } &::after{ content: "¿Mostrar una barra de navegación en la parte inferior del sitio al usar un dispositivo móvil?" } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "¿Ancho de fluido?" } &::after{ content: "Habilitar esto aumentará el ancho del sitio para que ocupe el ancho de su navegador. Útil para pantallas más grandes." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "¿Diseño de cuadrícula?" } &::after{ content: "Si está habilitado, los foros se mostrarán como una cuadrícula en lugar de una tabla." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Barra lateral pegajosa?" } &::after{ content: "Si está habilitado, la barra lateral se pegará a la parte superior de la pantalla para facilitar el acceso." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "¿Habilitar el efecto de paralaje?" } &::after{ content: "Si está habilitado, se aplicará un efecto de paralaje al encabezado." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Voltear la barra lateral?" } &::after{ content: "Gira la barra lateral entre los lados izquierdo y derecho." } } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "¿Habilitar efecto de nieve?" } &::after{ content: "Si está habilitado, la nieve animada caerá en tu navegador." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Habilitar confeti?" } &::after{ content: "Si está habilitado, el confeti animado caerá en tu navegador." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Mostrar cuenta regresiva?" } &::after{ content: "Si está habilitado, aparecerá una cuenta regresiva en la parte superior de la página." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Fondo de paralaje?" } &::after{ content: "Si está habilitada, la imagen de fondo se animará y se desenfocará cuando la página se desplace." } } .focus-timer [data-countdown-text="week,"]::before{ content: "semana,"; } .focus-timer [data-countdown-text="weeks,"]::before{ content: "semanas,"; } .focus-timer [data-countdown-text="days and"]::before{ content: "días y"; } .focus-timer [data-countdown-text="day and"]::before{ content: "día y"; } </xf:if> <xf:if is="$xf.language.language_code === 'it-IT' OR $xf.language.language_code === 'it'"> .node--unread .node-title::before{ content: "NUOVO" } .focus-editor-wrap{ content: "Editor di temi" } .focus-guest .focus-guest-header::before{ content: "Benvenuto a " } .structItemContainer-group--sticky::before{ content: "In Evidenza" } .structItemContainer-group--sticky::after{ content: "Discussioni normali" } [data-focus-text="Background Picker"]::after{ content: "Selezione sfondo" } [data-focus-text="Customize layout"]::after{ content: "Personalizza il layout" } [data-focus-text="Save"]::after{ content: "Salvare" } [data-focus-text="Choose color"]::after{ content: "Scegli il colore" } [data-setting="focus-mobile-navigation-bar"] .focus-editor-text{ &::before{ content: "Barra di navigazione mobile?" } &::after{ content: "Visualizzare una barra di navigazione nella parte inferiore del sito quando si utilizza un dispositivo mobile?" } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "Larghezza del fluido?" } &::after{ content: "Abilitare questo aumenterà la larghezza del sito in modo che occupi la larghezza del tuo browser. Utile per schermi più grandi." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Layout della griglia?" } &::after{ content: "Se abilitato, i forum verranno visualizzati come una griglia invece di una tabella." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Barra laterale appiccicosa?" } &::after{ content: "Se abilitato, la barra laterale resterà nella parte superiore dello schermo per un facile accesso." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Flip sidebar?" } &::after{ content: "Capovolgi la barra laterale tra i lati sinistro e destro." } } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Abilitare l'effetto neve?" } &::after{ content: "Se abilitato, la neve animata cadrà nel tuo browser." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Abilita i coriandoli?" } &::after{ content: "Se abilitato, i coriandoli animati cadranno sul tuo browser." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Mostra il conto alla rovescia?" } &::after{ content: "Se abilitato, un conto alla rovescia sarà visibile nella parte superiore della pagina." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Abilita l'effetto di parallasse?" } &::after{ content: "Se abilitato, all'intestazione verrà applicato un effetto di parallasse." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Sfondo parallasse?" } &::after{ content: "Se abilitato, l'immagine di sfondo si animerà e verrà sfocata quando si scorre la pagina." } } .focus-timer [data-countdown-text="week,"]::before{ content: "settimana,"; } .focus-timer [data-countdown-text="weeks,"]::before{ content: "settimane,"; } .focus-timer [data-countdown-text="days and"]::before{ content: "giorni e"; } .focus-timer [data-countdown-text="day and"]::before{ content: "giorno e"; } </xf:if> <xf:if is="$xf.language.language_code === 'tr-TR'"> .node--unread .node-title::before{ content: "YENİ" } .focus-editor-wrap{ content: "Tema Editörü" } .focus-guest .focus-guest-header::before{ content: "Hoşgeldiniz " } .structItemContainer-group--sticky::before{ content: "Sabit Konular" } .structItemContainer-group--sticky::after{ content: "Normal Konular" } [data-focus-text="Background Picker"]::after{ content: "Arkaplan Seçici" } [data-focus-text="Customize layout"]::after{ content: "Düzeni özelleştir" } [data-focus-text="Save"]::after{ content: "Kaydet" } [data-focus-text="Choose color"]::after{ content: "Renk seçin" } [data-setting="focus-mobile-navigation-bar"] .focus-editor-text{ &::before{ content: "Mobil gezinme çubuğu?" } &::after{ content: "Bir mobil cihaz kullanırken sitenin altında bir gezinme çubuğu görüntülensin mi?" } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "Sıvı genişliği?" } &::after{ content: "Bunu etkinleştirmek sitenin genişliğini artıracak, böylece tarayıcınızın tam genişliğini kaplayacak. Daha büyük ekranlar için kullanışlıdır." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Izgara düzeni?" } &::after{ content: "Etkinleştirilirse, forumlar tablo yerine kılavuz olarak görüntülenir." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Sabit yan çubuk?" } &::after{ content: "Etkinleştirilirse, kolay erişim için kenar çubuğu ekranın üstüne yapışır." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Yan çubuğu çevir?" } &::after{ content: "Kenar çubuğunu sol ve sağ taraf arasında değiştirin." } } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Kar efekti etkinleştirilsin mi?" } &::after{ content: "Etkinleştirilirse, hareketli kar yağışı tarayıcıda çalışır." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Konfeti etkinleştirilsin mi?" } &::after{ content: "Etkinleştirilirse, animasyonlu konfeti tarayıcınızın üst kısmından aşağı doğru iner." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Geri sayım gösterilsin mi!" } &::after{ content: "Etkinleştirilirse, sayfanızın üstünde bir geri sayım sayacı görünür." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Paralaks efektini etkinleştir?" } &::after{ content: "Etkinleştirilirse, başlık kısmına paralaks efekti uygulanır." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Arkaplan Paralaksı?" } &::after{ content: "Etkinleştirilirse, arka plan görüntüsü, sayfa kaydırıldığında hateketlenir ve bulanıklaşır." } } .focus-timer [data-countdown-text="week,"]::before{ content: "hafta,"; } .focus-timer [data-countdown-text="weeks,"]::before{ content: "haftalar,"; } .focus-timer [data-countdown-text="days and"]::before{ content: "günler ve"; } .focus-timer [data-countdown-text="day and"]::before{ content: "gün ve"; } </xf:if> <xf:if is="$xf.language.language_code === 'ru-RU'"> .node--unread .node-title::before{ content: "НОВЫЙ" } .focus-editor-wrap{ content: "Настройки темы" } .focus-guest .focus-guest-header::before{ content: "Добро пожаловать в " } .structItemContainer-group--sticky::before{ content: "Закрепленные темы" } .structItemContainer-group--sticky::after{ content: "Обычные темы" } [data-focus-text="Background Picker"]::after{ content: "Выбор фона" } [data-focus-text="Customize layout"]::after{ content: "Настройки макета" } [data-focus-text="Save"]::after{ content: "Сохранить" } [data-focus-text="Choose color"]::after{ content: "Выберите цвет" } [data-setting="focus-mobile-navigation-bar"] .focus-editor-text{ &::before{ content: "Включить панель навигации?" } &::after{ content: "Отображение панели навигации внизу сайта при использовании мобильного устройства." } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "Расширить отображение?" } &::after{ content: "Включение увеличит ширину сайта, чтобы он занимал всю ширину вашего браузера. Полезно для больших экранов." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Отображать в виде плиток?" } &::after{ content: "При включении форум будет отображаться в виде плиток, а не таблицы." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Прикрепить боковую панель?" } &::after{ content: "При включении боковая панель будет прикреплена к верхней части экрана для быстрого доступа." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Переместить боковую панель?" } &::after{ content: "Перемещение боковой панели между левой и правой сторонами." } } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Включить эффект снега?" } &::after{ content: "При включении анимированный снег будет кружиться сквозь страницы вашего браузера." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Включить эффект конфетти?" } &::after{ content: "При включении анимированные конфетти будут кружиться сквозь страницы вашего браузера." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Отображать обратный отсчет?" } &::after{ content: "При включении обратный отсчет будет виден в верхней части вашей страницы." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Включить эффект параллакса?" } &::after{ content: "При включении к шапке-заголовку будет применён эффект параллакса." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Включить эффект параллакса для фона?" } &::after{ content: "При включении и прокрутке страницы обои будут анимированы и размыты." } } .focus-timer [data-countdown-text="week,"]::before{ content: "неделя,"; } .focus-timer [data-countdown-text="weeks,"]::before{ content: "недель,"; } .focus-timer [data-countdown-text="days and"]::before{ content: "дней и"; } .focus-timer [data-countdown-text="day and"]::before{ content: "день и"; } </xf:if> <xf:if is="$xf.language.language_code === 'pl-PL'"> .node--unread .node-title::before{ content: "Nowe" } .focus-editor-wrap{ content: "Edytor stylu" } .focus-guest .focus-guest-header::before{ content: "Witamy w " } .structItemContainer-group--sticky::before{ content: "Przyklejone temat" } .structItemContainer-group--sticky::after{ content: "Normalne tematy" } [data-focus-text="Background Picker"]::after{ content: "Wybór tła" } [data-focus-text="Customize layout"]::after{ content: "Wybór układu strony " } [data-focus-text="Save"]::after{ content: "Zapisz" } [data-focus-text="Choose color"]::after{ content: "Wybierz kolor" } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "Elastyczna szerokść?" } &::after{ content: "Jeśli włączysz tą opcję, szerokość strony zostanie dopasowana do szerokości przeglądarki. Przydatne w przypadku większych ekranów." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Układ kafelkowy?" } &::after{ content: "Jeśli włączysz tą opcję, strona główna będzie ułożona w kształcie kafelkow zamiast listy tematów." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Przyklejony pasek boczny?" } &::after{ content: "Jeśli włączysz tą opcję, pasek boczny będzie przesuwał się w górę i dół wraz z przewijaniem storny." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Po której stronie pasek boczny?" } &::after{ content: "Jeśli włączysz tą opcję, pasek boczny zmieni pozycje z prawej na lewą."} } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Aktywować śnieg?" } &::after{ content: "Po aktywacji animowany śnieg spada na twoją przeglądarkę." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Aktywować konfeti?" } &::after{ content: "Jeśli ta opcja jest włączona, animowane konfetti będą wyświetlane w przeglądarce." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Pokaż odliczanie?" } &::after{ content: "Jeśli ta opcja jest włączona, odliczanie będzie wyświetlane u góry strony." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Aktywuj efekt paralaksy?" } &::after{ content: "Po włączeniu do nagłówka stosowany jest efekt paralaksy." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Tło Paralaksy?" } &::after{ content: "Po włączeniu tapeta będzie animowana i zamazana w miarę przewijania strony." } } .focus-timer [data-countdown-text="week,"]::before{ content: "tydzień,"; } .focus-timer [data-countdown-text="weeks,"]::before{ content: "tygodnie,"; } .focus-timer [data-countdown-text="days and"]::before{ content: "dni i"; } .focus-timer [data-countdown-text="day and"]::before{ content: "dzień i"; } </xf:if> :root{ --node-grid-padding: @node-grid-padding; --grid-node-width: @grid-node-width; --mobile-sticky-top: @mobile-sticky-top; } .p-pageWrapper{ z-index: 1; background: none; @media (min-width: (@xf-responsiveMedium + 1px)){ padding-top: @body-padding-top; padding-bottom: @body-padding-bottom; } } @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-width{ margin: 0 auto; width: @focus-width; max-width: @xf-pageWidthMax; } } @media (min-width: (@xf-pageWidthMax + @focus-fluid-margin + 1px)){ .focus-fluid{ .focus-width, .p-header-inner, .p-nav-inner, .p-sectionLinks-inner, .p-body-inner, .p-footer-inner{ max-width: ~"calc(100vw - @{focus-fluid-margin})"; } } } @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-width{ .focus-width, .p-header-inner, .p-staffBar-inner, .p-nav-inner, .p-sectionLinks-inner, .p-body-inner, .p-footer-inner{ max-width: none; width: 100%; } } } <xf:if is="property('xenfocus_themeEditor') OR property('xenfocus_picker')"> .focus-editor-open{ .focus-width, .p-staffBar-inner, .p-header-inner, .p-nav-inner, .p-sectionLinks-inner, .p-body-inner, .p-footer-inner{ transition: max-width 0.3s linear; } } </xf:if> .input { &::placeholder{ color: inherit; opacity: @input--placeholder; } &:focus, &.is-focused { &::placeholder{ color: inherit; opacity: @input--placeholder-active; } } } input[type="search"]{ color: inherit; } #header{ display: block; } #header .focus-ad:empty, #header .focus-ad:not(:empty) + .focus-wrap-search{ display: none; } .p-header-inner{ padding: 0; } .p-header-content{ padding: 0; flex-wrap: nowrap; max-width: @p-header-content--max-width; margin: 0 auto; } .p-header-logo{ margin: 0; max-width: none; flex: 0 1 auto; a{ height: @xf-xenfocus_logoHeight*1px; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; color: xf-default(@xf-xenfocus_logoColor, inherit); font-family: xf-default(@xf-xenfocus_logoFont, inherit); font-size: @xf-xenfocus_logoSize*1px; @media (max-width: @xf-responsiveMedium){ font-size: @xf-xenfocus_logoSizeMobile*1px; } @media (max-width: @xf-responsiveMedium){ height: @xf-xenfocus_logoHeightMobile*1px; } } .focus-logo > * + *{ margin-left: @focus-logo-image--margin; } <xf:if is="property('xenfocus_logoType') != 'image'"> .focus-logo--name, .focus-logo--slogan{ line-height: 1; display: block; } .focus-logo--slogan{ opacity: @logo-slogan-opacity; font-size: @logo-slogan-size; margin-top: @logo-slogan-margin; } </xf:if> &.p-header-logo--image img{ font-size: 1px; max-height: @logo-image-height - @logo-reduce-image-height-by; @media (max-width: @xf-responsiveMedium){ max-height: @mobile-logo-image-height - @mobile-logo-reduce-image-height-by; } } @media (max-width: @xf-responsiveMedium){ width: 100%; text-align: center; <xf:if is="property('xenfocus_logoType') != 'text'"> * ~ .focus-logo--text{ text-align: left; } </xf:if> } } .focus-mobile-navigation{ flex: 1 1 auto; display: flex; align-self: stretch; @media (min-width: (@xf-responsiveMedium+1px)){ display: none; } } <xf:if is="(property('xenfocus_headerOnMobile'))"> .focus-mobile-logo{ display: none; } <xf:else /> .focus-mobile-logo{ display: flex; flex: 1 1 auto; color: @focus-mobile-logo-color; font-weight: bold; position: relative; overflow: hidden; a{ display: flex; align-items: center; overflow: hidden; text-decoration: none; position: absolute; top: 0; left: 0; bottom: 0; } img{ max-height: 44px; } } @media (max-width: @xf-responsiveMedium){ #header{ display: none; } } </xf:if> .focus-wrap-nav{ flex: 0 2 auto; overflow: hidden; } @media (max-width: @xf-responsiveMedium){ .p-header{ .focus-wrap-nav, .focus-wrap-search, .focus-wrap-user{ display: none; } } .p-nav{ .focus-wrap-nav, .focus-wrap-search{ display: none; } } } .p-header{ .focus-wrap-nav{ margin-left: 10px; } } .p-nav{ z-index: 2; position: relative; .focus-wrap-nav{ overflow: hidden; } } .p-nav(){} .p-nav-mobile(){} @media (min-width: (@xf-responsiveMedium + 1px)){ .p-nav{ .p-nav(); } } @media (max-width: @xf-responsiveMedium){ .p-nav{ background: @mobile-navigation-bar--background; color: @mobile-navigation-bar--color; position: -webkit-sticky; position: sticky; top: @mobile-sticky-top; top: var(--mobile-sticky-top, @mobile-sticky-top); z-index: 400; .p-nav-mobile(); } .p-navSticky .p-nav{ position: relative; top: auto; } } .p-sectionLinks-list .p-navEl{ border-radius: 4px; } .p-navSticky.is-sticky{ box-shadow: none; } .p-nav-inner{ align-items: center; justify-content: space-between; &::before, &::after{ display: none; } } @media (max-width: @xf-responsiveMedium){ .has-js .p-nav-inner{ min-height: 44px; } } .p-nav-scroller{ margin: 0; } .p-nav-list{ line-height: @xf-xenfocus_navHeight*1px; .p-navEl-link, .p-navEl-splitTrigger{ padding-top: 0; padding-bottom: 0; } a{ color: inherit; } &::before, &::after{ width: 0; } > li{ font-size: xf-default(@xf-publicNavTab--font-size, @xf-fontSizeNormal); &:first-child .p-navEl{ margin-left: 0; } &:last-child .p-navEl{ margin-right: 0; } } } .p-navEl{ display: flex; &::before, &::after{ display: none; } } .p-navEl-link{ flex: 1 1 auto; } .focus-content .p-navSticky:not(.is-sticky), .focus-content .p-nav{ border-top-left-radius: inherit; border-top-right-radius: inherit; } .p-navSticky.is-sticky .p-nav .p-nav-list .p-navEl.is-selected, .p-navSticky.is-sticky .p-nav .p-account, .p-navEl, .p-navEl-link, .p-navEl-splitTrigger, .p-nav-list .p-navEl.is-menuOpen{ border-radius: inherit; } .p-navEl-splitTrigger{ border-top-left-radius: 0; border-bottom-left-radius: 0; } .p-nav-list .p-navEl, .p-navEl-link, .p-navEl-splitTrigger{ transition: none; } .p-navEl-splitTrigger{ position: relative; &::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: currentcolor; border-radius: inherit; opacity: 0; } &.is-menuOpen:before, &:hover:before{ opacity: 0.07; } } .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen){ .p-navEl-link:hover, .p-navEl-splitTrigger:hover{ background: none; } } .p-navSticky--primary.is-sticky .p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger::before{ display: none; } .p-navEl-splitTrigger{ margin-left: -((@xf-publicNavPaddingH) / 1.5); .p-nav-list .p-navEl.is-selected & { display: block; } } #XF .p-navEl-link.p-navEl-link--splitMenu{ padding-right: @xf-publicNavPaddingH; } .focus-dropdown-nav(@debug) when (@debug = true) { .p-sectionLinks{ display: none; } } .focus-dropdown-nav(@focus-dropdown-nav); .navigation-icons(){} <xf:if is="property('xenfocus_navIcons')"> .focus-wrap-nav .p-navEl-link, .offCanvasMenu-linkHolder .offCanvasMenu-link[data-nav-id]{ &::before{ .m-faBase(); .m-faContent(@fa-var-tag); font-size: @nav-icon-size; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 6px; .navigation-icons(); } &[data-nav-id="home"]::before{ .m-faContent(@fa-var-home); } &[data-nav-id="xenfocus_styles"]::before{ .m-faContent(@fa-var-th); } &[data-nav-id="forums"]::before, &[data-nav-id="siropuChat"]::before{ .m-faContent(@fa-var-comments); } &[data-nav-id="whatsNew"]::before{ .m-faContent(@fa-var-star); } &[data-nav-id="members"]::before{ .m-faContent(@fa-var-user); } &[data-nav-id="xfmg"]::before{ .m-faContent(@fa-var-image); } &[data-nav-id="xfrm"]::before{ .m-faContent(@fa-var-download); } } [data-nav-id="siropuChat"] > i{ display: none; } </xf:if> .p-nav-scroller .hScroller-action{ color: @navigation-arrow-color; padding: 0; html[dir='ltr'] &.hScroller-action--start, html[dir='rtl'] &.hScroller-action--end{ background-image: linear-gradient(to left, fade(@navigation-arrow-gradient, 0%) 0%, @navigation-arrow-gradient 60%); } html[dir='ltr'] &.hScroller-action--end, html[dir='rtl'] &.hScroller-action--start{ background-image: linear-gradient(to right, fade(@navigation-arrow-gradient, 0%) 0%, @navigation-arrow-gradient 60%); } &:hover{ color: lighten(@navigation-arrow-color, 20%); } &::after{ font-size: 10px; border-radius: 4px; background: fade(@navigation-arrow-color, 25%); width: @navigation-arrow-size; line-height: @navigation-arrow-size; text-align: center; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } &:hover:after{ background: fade(@navigation-arrow-color, 40%); } } <xf:if is="property('publicHeader--background-color')"> .p-header .p-nav-scroller .hScroller-action{ html[dir='ltr'] &.hScroller-action--start, html[dir='rtl'] &.hScroller-action--end{ background-image: linear-gradient(to left, fade(@xf-publicHeader--background-color, 0%) 0%, @xf-publicHeader--background-color 60%); } html[dir='ltr'] &.hScroller-action--end, html[dir='rtl'] &.hScroller-action--start{ background-image: linear-gradient(to right, fade(@xf-publicHeader--background-color, 0%) 0%, @xf-publicHeader--background-color 60%); } } </xf:if> .focus-nav-arrows{ .p-nav-scroller{ display: flex; align-items: center; } .hScroller-scroll{ order: 2; flex: 1 1 auto; } .hScroller-action{ position: relative; display: block; flex: 0 0 auto; } .hScroller-action:not(.is-active){ opacity: 0.5; pointer-events: none; } .hScroller-action--start{ order: 1; } .hScroller-action--end{ order: 3; } } .focus-wrap-user{ flex: 0 0 auto; @media (min-width: (@xf-responsiveMedium + 1px)){ <xf:if is="property('xenfocus_userlinksRadius') === 'parent'"> overflow: hidden; </xf:if> .xf-xenfocus_userStyles(); } @media (max-width: @xf-responsiveMedium){ .p-nav-inner &{ border-radius: 3px; color: @mobile-navigation-bar--color; } } } .p-nav-opposite{ @media (min-width: (@xf-responsiveMedium + 1px)){ margin: 0; } } .p-navgroup{ display: flex; background: transparent; > *{ flex: 0 0 auto; } } .p-navgroup-link{ align-items: center; background-clip: padding-box !important; <xf:if is="!property('xenfocus_userSep')"> border: 0; </xf:if> color: inherit; display: flex; height: @xf-xenfocus_userHeight*1px; justify-content: center; padding-top: 0; padding-bottom: 0; &.p-navgroup-link--iconic i::after{ width: auto; min-width: 0px; } @media (min-width: (@xf-responsiveMedium + 1px)){ min-width: @xf-xenfocus_userHeight*1px; #XF &{ <xf:if is="property('xenfocus_userlinksRadius') === 'children'"> border-radius: @user-border-radius; <xf:else /> border-radius: 0; </xf:if> <xf:if is="property('xenfocus_userSep')"> border-left: @user-links-sep solid @user-border-color; </xf:if> } <xf:if is="property('xenfocus_userSep')"> #XF .p-account &:first-of-type{ border-left-width: 0px; } </xf:if> &.is-menuOpen, &:hover{ <xf:if is="property('xenfocus_userStyles--color')"> color: lighten(@xf-xenfocus_userStyles--color, 5%); </xf:if> background-color: @user-hover; } } @media (max-width: @xf-responsiveMedium){ height: 40px; #XF &{ border-radius: @user-links-radius-mobile; } &.is-menuOpen, &:hover{ color: @mobile-navigation-bar--color; background-color: fade(@mobile-navigation-bar--color, 15%); } } } .p-navgroup.p-discovery{ margin: 0; } .p-navgroup-link--user{ &.p-navgroup-link{ display: flex; } > *{ flex: 0 0 auto; } @media (min-width: (@xf-responsiveWide + 1px)){ .avatar{ #XF &{ height: (@xf-xenfocus_userHeight * 1px - 14px); width: (@xf-xenfocus_userHeight * 1px - 14px); margin-left: -3px; margin-right: @xf-paddingLarge; } &.avatar--default--dynamic{ font-size: inherit; display: inline-flex; justify-content: center; align-items: center; } } } <xf:if is="property('xenfocus_userStyles--color')"> .avatar::after{ border-color: fade(@xf-xenfocus_userStyles--color, 15%); } </xf:if> &.p-navgroup-link{ max-width: none; } } .p-navgroup-link--conversations, .p-navgroup-link--alerts{ &.badgeContainer::after{ left: auto; right: 4px; } } @media (min-width: (@xf-responsiveMedium + 1px)){ .p-navgroup-link--whatsnew{ display: none; } } .p-navgroup-link--logIn, .p-navgroup-link--register{ .p-navgroup-linkText::before{ .m-faBase(); .m-faContent(@fa-var-sign-in); margin-right: 8px; } } .p-navgroup-link--register .p-navgroup-linkText::before{ .m-faContent(@fa-var-plus-square); } <xf:if is="property('xenfocus_userRegister')"> .p-navgroup--guest .p-navgroup-link--register{ position: relative; background-color: transparent !important; color: contrast(@xf-xenfocus_userRegister, rgba(0,0,0,0.7), #fff); text-shadow: none; font-weight: bold; &::before{ content: ''; position: absolute; top: @register-offset-v; left: @register-offset-h; right: @register-offset-h; bottom: @register-offset-v; background: @xf-xenfocus_userRegister; border-radius: 3px; @media (max-width: @xf-responsiveMedium){ top: 3px; bottom: 3px; } } &:hover::before{ background: lighten(@xf-xenfocus_userRegister, 5%); } .p-navgroup-linkText{ position: relative; } } </xf:if> .p-navgroup-link.p-navgroup-link--whatsnew i::after, .button.button--icon--bolt > .button-text::before, a.button.button--icon--bolt > .button-text::before{ .m-faContent(@fa-var-file-alt); } .button.button--icon--bolt > .button-text::before, a.button.button--icon--bolt > .button-text::before{ width: auto; } .p-nav-list .p-navEl.is-menuOpen, .p-navgroup-link.is-menuOpen{ box-shadow: none; } .p-navgroup-link.badgeContainer{ opacity: 1; } .js-visitorMenuBody .menu-row--highlighted{ background: @xf-contentAltBg; } <xf:if is="!property('xenfocus_searchLink')"> @media (min-width: (@xf-responsiveMedium + 1px)){ .p-discovery{ display: none; } } </xf:if> <xf:if is="property('xenfocus_searchBar')"> .focus-wrap-search{ flex: 0 0 auto; margin-left: 10px; position: relative; } .focus-search{ line-height: @search-height; width: @search-width; .xf-xenfocus_searchStyles(); border-left-width: @search-border-left; border-right-width: @search-border-right; @media (max-width: @xf-responsiveMedium){ display: none; } } .focus-search-flex{ align-items: center; display: flex; position: relative; } .focus-search-prefix{ flex: 0 0 auto; opacity: 0.7; order: 1; text-align: center; transition: opacity 0.2s linear; width: @search-height; .focus-search input:focus ~ &{ opacity: 1; } } .focus-search input{ background: none; border: 0; color: inherit; display: block; flex: 1 1 auto; min-width: 0; order: 2; outline: none; padding: 0; width: 100%; height: @search-height; line-height: @search-height; &::placeholder { color: inherit; opacity: 0.7; } } .focus-search-menu{ position: absolute; top: 100%; z-index: 200; margin-top: @focus-search-arrow+4px; left: 0; width: 100%; max-width: 300px; min-width: 200px; color: @xf-textColor; background: @focus-search-dropdown; box-shadow: 0px 10px 20px rgba(0,0,0,0.15), @focus-search-dropdown-border 0px 0px 0px 1px; border-radius: @xf-blockBorderRadius; transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden; transition: all linear 0.2s; .focus-search-menu-active &{ transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; } &::before, &::after{ content: ''; position: absolute; top: @focus-search-arrow*-2; left: 10px; width: @focus-search-arrow*2; height: @focus-search-arrow*2; border: @focus-search-arrow solid transparent; border-bottom-color: @focus-search-dropdown-border; box-sizing: border-box; } &::before{ margin-top: -1px; } &::after{ border-bottom-color: @focus-search-dropdown; } .menu-row{ padding: 10px; border-top: 1px solid fade(@xf-textColor, 8%); &:first-of-type{ border-top-width: 0; } } .menu-footer{ background: xf-intensify(@xf-contentAltBg, 3%); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; padding: 7px; } .menu-footer-controls{ float: none !important; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; > *{ flex: 0 0 auto; margin: 3px; } } a.button{ color: @xf-buttonDefault--color; } @focus-search-button-height: 30px; .button{ padding: 0 10px; line-height: @focus-search-button-height; } .button-text{ display: block; position: relative; } .menu-footer .button-text:before{ font-size: 14px; line-height: inherit; margin-right: 5px; } .menu-footer a .button-text:before{ .m-faBase(); .m-faContent(@fa-var-sliders-h); } } </xf:if> @focus-editor-icon: "\f205"; @focus-editor-save: #2aad55; @focus-editor-width: 1000px; <xf:if is="property('styleType') == 'light'"> @focus-editor-overlay: rgba(0,0,0,0.4); <xf:else /> @focus-editor-overlay: rgba(0,0,0,0.88); </xf:if> @focus-editor-transition: 0.25s; [data-xenfocus-editor] .fa-toggle-on::before{ content: @focus-editor-icon; } .p-footer .xenfocus-footer-icon{ a{ min-width: 40px; text-align: center; } i{ margin: 0; } } <xf:if is="property('xenfocus_themeEditor') OR property('xenfocus_picker')"> [data-xenfocus-editor]{ cursor: pointer; } .focus-editor-wrap{ display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 910; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: all @focus-editor-transition ease-in-out; .focus-editor-open &{ visibility: visible; opacity: 1; } } .focus-editor-overlay{ background: @focus-editor-overlay; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: auto; } .focus-editor{ box-shadow: rgba(0,0,0,0.3) 0px 10px 10px, rgba(0,0,0,0.4) 0px 15px 50px; border-radius: 4px; background: fadein(@xf-contentBg, 100%); position: relative; width: 98%; max-width: @focus-editor-width; transition: all @focus-editor-transition ease-in-out; transform: translateY(-50px); .focus-editor-open &{ transform: translateY(0); } } .focus-editor-panel{ padding: 20px; display: flex; align-items: center; justify-content: flex-start; cursor: pointer; -webkit-tap-highlight-color: transparent; @media (hover:hover){ &:hover{ background: fade(@xf-contentAltBg, 80%); } } } .focus-editor__title{ font-weight: bold; background: @xf-contentAltBg; border: 1px solid xf-intensify(@xf-contentAltBg, 10%); border-width: 1px 0; padding: 20px; position: sticky; top: 0px; z-index: 10; &:only-child{ display: none; } .focus-editor-scroll > :first-child > &{ border-top-width: 0px; } } .focus-editor-save{ padding: 20px; text-align: right; background: @xf-contentAltBg; border-top: 1px solid xf-intensify(@xf-contentAltBg, 10%); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; button{ display: inline-flex; <xf:if is="property('styleType') == 'light'"> border: 1px solid rgba(0,0,0,0.2); <xf:else /> border: 0; </xf:if> box-shadow: inset rgba(255,255,255,0.16) 0px 1px 0px; border-radius: 3px; background-color: @focus-editor-save; color: #fff; font-weight: bold; padding: 0; line-height: 44px; position: relative; transition: background-color 0.2s linear; &::before{ flex: 0 0 auto; .m-faBase(); .m-faContent(@fa-var-check); font-size: 14px; padding: 0 12px; background: rgba(255,255,255,0.18); background-clip: padding-box; border-top-left-radius: inherit; border-bottom-left-radius: inherit; border: 1px solid rgba(0,0,0,0.12); border-width: 0 1px 0 0; } &::after{ flex: 0 0 auto; padding: 0 18px; } &:hover{ background-color: lighten(@focus-editor-save, 5%); } &:active{ top: 1px; } } } .focus-editor-scroll{ max-height: ~"calc(100vh - 200px)"; overflow: auto; border-radius: inherit; > div:first-of-type h4{ border-top: 0; } } @media (max-width: @xf-responsiveWide){ .focus-editor-panel[data-setting="focus-sidebar-sticky"], .focus-editor-panel[data-setting="focus-sidebar-flip"]{ display: none; } } @media (max-width: (@xf-pageWidthMax + @focus-fluid-margin)){ .focus-editor-panel[data-setting="focus-fluid"]{ display: none; } } @focus-toggle-height: 30px; @focus-toggle-width: 50px; @focus-toggle-transform: @focus-toggle-width - @focus-toggle-height; @focus-toggle-goo: 10px; @focus-toggle-border: 2px; .focus-editor-toggle{ position: relative; flex: 0 0 auto; margin-right: 20px; } .focus-toggle{ background: xf-intensify(@xf-contentBg, 10%); display: block; border-radius: 15px; position: relative; z-index: 0; width: @focus-toggle-width; height: @focus-toggle-height; &::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: @focus-editor-save; border-radius: inherit; opacity: 0; transition: opacity 0.25s linear; } i{ position: absolute; border-radius: inherit; overflow: hidden; transform: translate3d(0,0,0); <xf:if is="property('styleType') == 'light'"> top: @focus-toggle-border; right: @focus-toggle-border; bottom: @focus-toggle-border; left: @focus-toggle-border; <xf:else /> top: @focus-toggle-border + 2px; right: @focus-toggle-border + 2px; bottom: @focus-toggle-border + 2px; left: @focus-toggle-border + 2px; </xf:if> &::before{ content: ''; <xf:if is="property('styleType') == 'dark'"> background: rgba(255,255,255,0.5); <xf:else /> background: lighten(@xf-contentBg, 20%); </xf:if> box-shadow: rgba(0,0,0,0.25) 0px 3px 6px; border-radius: inherit; display: block; height: 100%; <xf:if is="property('styleType') == 'light'"> width: @focus-toggle-height + @focus-toggle-goo - @focus-toggle-border - @focus-toggle-border; <xf:else /> width: @focus-toggle-height + @focus-toggle-goo - @focus-toggle-border - @focus-toggle-border - 4px; </xf:if> transition: transform 0.25s ease-in-out; transform: translateX(@focus-toggle-goo * -1); } } &::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; border: 2px solid rgba(0,0,0,0.15); <xf:if is="property('styleType') == 'dark'"> border-color: rgba(255,255,255,0.2); </xf:if> } [data-setting-status='on'] &{ &::before{ opacity: 1; } i::before{ transform: translateX(@focus-toggle-transform); } } } .focus-editor-text{ flex: 1 1 auto; &::before{ content: attr(data-setting-title); display: block; font-weight: bold; margin-bottom: 4px; } &::after{ content: attr(data-setting-desc); opacity: 0.6; display: block; } } </xf:if> .focus-breadcrumb{ display: flex; @media (max-width: @xf-responsiveMedium){ flex-direction: column; align-items: center; } .p-breadcrumbs-wrap{ flex: 1 1 auto; width: 100%; } } .xenfocus_breadcrumb(){} .focus-breadcrumbs(@debug) when (@debug = true) { .p-breadcrumbs-wrap{ color: @breadcrumb-color; background-color: @breadcrumb-background-hex; background-image: @breadcrumb-background-image; border-radius: @breadcrumb-radius; font-size: @xf-fontSizeSmall; line-height: @breadcrumb-height; margin-bottom: 10px; position: relative; z-index: 0; display: flex; @media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){ margin-bottom: @content-padding; } .xenfocus_breadcrumb(); &::before{ content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-width: @breadcrumb-border-width; border-style: solid; border-color: @breadcrumb-border-color; border-radius: inherit; pointer-events: none; z-index: 2; } &.p-breadcrumbs-wrap--bottom{ margin-top: @content-padding; margin-bottom: 0; } } .p-breadcrumbs.p-breadcrumbs--bottom{ margin: 0; } .p-breadcrumbs{ overflow: hidden; margin: 0; width: 100%; line-height: inherit; display: flex; &::before, &::after{ display: none; } > li{ margin: 0; font-size: inherit; padding-left: 15px; &:first-child{ border-top-left-radius: inherit; border-bottom-left-radius: inherit; } &::before, &::after{ display: none; } a{ padding: 0 15px; position: relative; z-index: 1; display: block; overflow: visible; max-width: none; text-decoration: none; color: inherit; margin-left: -15px; &:hover{ color: xf-default(@xf-xenfocus_breadcrumbHover--color, inherit); } &::before, &::after { border-style: solid; border-width: 0; border-right-width: 1px; border-color: @breadcrumb-shadow; color: @breadcrumb-highlight; box-shadow: inset currentColor -1px 0px 0px 0px; content: ''; position: absolute; height: 50%; width: 100%; right: 0; z-index: -1; box-sizing: border-box; transform-origin: 100% 50%; } html[dir='rtl'] &::before, html[dir='rtl'] &::after{ box-shadow: inset currentColor 1px 0px 0px 0px; } &::before { top: 0; transform: skewX(30deg); } &::after { top: 50%; transform: skewX(-30deg); } html[dir='rtl'] &::before{ transform: skewX(-30deg); } html[dir='rtl'] &::after{ transform: skewX(30deg); } &:hover::before, &:hover::after{ background: @breadcrumb-hover; } &:active::before, &:active::after{ background: @breadcrumb-active; color: rgba(0,0,0,0.05); box-shadow: inset currentColor -2px 1px 1px; } &:active::after{ box-shadow: inset currentColor -2px -1px 1px; } } &:first-of-type a::before, &:first-of-type a::after { width: ~"calc(100% + 20px)"; } } @media (max-width: @xf-responsiveNarrow){ .focus-breadcrumbs-mobile(@debug) when (@debug = true) { overflow: auto; > li{ display: block; } > li a{ padding: 0 11px; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; } } .focus-breadcrumbs-mobile(@focus-breadcrumbs-mobile); .focus-breadcrumbs-mobile-disabled(@debug) when (@debug = false) { > li{ a{ padding-right: 15px; &::before { transform: skewX(-30deg); } &::after { transform: skewX(30deg); } } } } .focus-breadcrumbs-mobile-disabled(@focus-breadcrumbs-mobile); } } } .focus-breadcrumbs(@focus-breadcrumbs); [data-template="forum_list"] .p-breadcrumbs-wrap--bottom{ display: none; } <xf:if is="property('xenfocus_socialEnable') OR property('xenfocus_socialFooter')"> .xenfocus-social{ color: #fff; border-radius: @xf-xenfocus_breadcrumb--border-radius; display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; margin: 0; margin-bottom: 10px; padding: 0; list-style: none; text-align: center; text-shadow: rgba(0,0,0,0.3) 0px -1px 0px; @media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){ margin-bottom: @content-padding; } li{ line-height: @social-height; display: block; flex: 0 0 auto; margin: 0; padding: 0; border-radius: inherit; list-style: none; padding-left: 4px; } a{ color: inherit; box-shadow: rgba(0,0,0,0.1) 0px 1px 3px; border-radius: inherit; display: flex; align-items: center; text-decoration: none; outline: none; position: relative; font-size: @xf-fontSizeSmall; padding-right: 12px; &:active{ box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px; top: 1px; } &::before{ .m-faBase('Brands'); .m-faContent(@fa-var-diaspora); background-color: rgba(255,255,255,0.12); border-radius: inherit; width: @social-height !important; height: @social-height; flex: 0 0 auto; text-align: center; font-size: 16px !important; pointer-events: none; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 12px; html[dir='ltr'] &{ box-shadow: inset rgba(255,255,255,0.12) -1px 0px 0px 0px, rgba(0,0,0,0.1) 1px 0px 0px 0px; } html[dir='rtl'] &{ box-shadow: inset rgba(255,255,255,0.12) 1px 0px 0px 0px, rgba(0,0,0,0.1) -1px 0px 0px 0px; } } &::after{ border: @social-border solid rgba(0,0,0,0.2); <xf:if is="property('styleType') == 'dark'"> border-width: 0px; </xf:if> box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } &:hover:after{ background: rgba(255,255,255,0.2); } &:active:after{ background: rgba(0,0,0,0.1); } #XF &:empty{ padding: 0; &::before{ border-radius: inherit; margin: 0; box-shadow: none; background-color: transparent; } } } a{ background: #999; &[href*='deviantart.com']{ background: #475c4d; &::before{ .m-faContent(@fa-var-deviantart); } } &[href*='discordapp.com'], &[href*='discord.gg']{ background: #7289da; &::before{ .m-faContent(@fa-var-discord); } } &[href*='dropbox.com']{ background: #007fe5; &::before{ .m-faContent(@fa-var-dropbox); } } &[href*='mailto:']{ background: #444444; &::before{ .m-faBase(); .m-faContent(@fa-var-envelope); } } &[href*='facebook.com']{ background: #304c87; &::before{ .m-faContent(@fa-var-facebook-f); } } &[href*='flickr.com']{ background: #fe2997; &::before{ .m-faContent(@fa-var-flickr); } } &[href*='google.com']{ background: #df6b39; &::before{ .m-faContent(@fa-var-google); } } &[href*='instagram.com']{ background: #de416a; &::before{ .m-faContent(@fa-var-instagram); } } &[href*='linkedin.com']{ background: #0073b2; &::before{ .m-faContent(@fa-var-linkedin-in); } } &[href*='paypal.com']{ background: #253b80; &::before{ .m-faContent(@fa-var-paypal);} } &[href*='pinterest.']{ background: #cd1d1f; &::before{ .m-faContent(@fa-var-pinterest-p); } } &[href*='reddit.com']{ background: #609acf; &::before{ .m-faContent(@fa-var-reddit-alien); } } &[href$='.rss']{ background: #ff9641; &::before{ .m-faBase(); .m-faContent(@fa-var-rss); } } &[href*='skype.com']{ background: #00b0f0; &::before{ .m-faContent(@fa-var-skype); } } &[href*='soundcloud.com']{ background: #ff6900; &::before{ .m-faContent(@fa-var-soundcloud); } } &[href*='spotify.com']{ background: #84b301; &::before{ .m-faContent(@fa-var-spotify); } } &[href*='steampowered.com']{ background: #457498; &::before{ .m-faContent(@fa-var-steam); } } &[href*='stripe.com']{ background: #58aada; &::before{ .m-faContent(@fa-var-stripe); } } &[href*='teamspeak.com'], &[href*='ts3server://']{ background: #8190b1; &::before{ .m-faContent(@fa-var-teamspeak); } } &[href*='/t.me/'], &[href*='telegram.org']{ background: #0d86d7; &::before{ .m-faContent(@fa-var-telegram-plane); } } &[href*='tumblr.com']{ background: #539fcc; &::before{ .m-faContent(@fa-var-tumblr); } } &[href*='twitch.tv']{ background: #6441a5; &::before{ .m-faContent(@fa-var-twitch); } } &[href*='twitter.com']{ background: #0097d3; &::before{ .m-faContent(@fa-var-twitter); } } &[href*='vimeo.com']{ background: #1bb5ea; &::before{ .m-faContent(@fa-var-vimeo-v); } } &[href*='/vk.com']{ background: #5181b8; &::before{ .m-faContent(@fa-var-vk); } } &[href*='youtube.com']{ background: #cc332d; &::before{ .m-faContent(@fa-var-youtube); } } } } #footer .xenfocus-social{ margin: 0; margin-top: 10px; li:first-child{ padding: 0; } .social-footer-basic(@debug) when (@debug = true) { color: inherit; text-shadow: none; a{ box-shadow: none; background: none; &::before{ box-shadow: none; background-color: rgba(255,255,255,0.05); } &::after{ border-width: 0; box-shadow: none; opacity: 0.2; background: currentcolor; } &:hover:after{ opacity: 0.3; } &:active:after{ opacity: 0.4; } } } .social-footer-basic(@social-footer-basic); } </xf:if> .focus-background-1(){ <xf:if is="property('xenfocus_bg1_hex')"> background-color: @xf-xenfocus_bg1_hex; </xf:if> <xf:if is="property('xenfocus_bg1_image')"> background-image: url(@xf-xenfocus_bg1_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg1_size')"> background-size: @xf-xenfocus_bg1_size; </xf:if> <xf:if is="property('xenfocus_bg1_position')"> background-position: @xf-xenfocus_bg1_position; </xf:if> background-repeat: @xf-xenfocus_bg1_repeat; background-attachment: @xf-xenfocus_bg1_attachment; </xf:if> } .focus-background-2(){ <xf:if is="property('xenfocus_bg2_hex')"> background-color: @xf-xenfocus_bg2_hex; </xf:if> <xf:if is="property('xenfocus_bg2_image')"> background-image: url(@xf-xenfocus_bg2_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg2_size')"> background-size: @xf-xenfocus_bg2_size; </xf:if> <xf:if is="property('xenfocus_bg2_position')"> background-position: @xf-xenfocus_bg2_position; </xf:if> background-repeat: @xf-xenfocus_bg2_repeat; background-attachment: @xf-xenfocus_bg2_attachment; </xf:if> } .focus-background-3(){ <xf:if is="property('xenfocus_bg3_hex')"> background-color: @xf-xenfocus_bg3_hex; </xf:if> <xf:if is="property('xenfocus_bg3_image')"> background-image: url(@xf-xenfocus_bg3_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg3_size')"> background-size: @xf-xenfocus_bg3_size; </xf:if> <xf:if is="property('xenfocus_bg3_position')"> background-position: @xf-xenfocus_bg3_position; </xf:if> background-repeat: @xf-xenfocus_bg3_repeat; background-attachment: @xf-xenfocus_bg3_attachment; </xf:if> } .focus-background-4(){ <xf:if is="property('xenfocus_bg4_hex')"> background-color: @xf-xenfocus_bg4_hex; </xf:if> <xf:if is="property('xenfocus_bg4_image')"> background-image: url(@xf-xenfocus_bg4_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg4_size')"> background-size: @xf-xenfocus_bg4_size; </xf:if> <xf:if is="property('xenfocus_bg4_position')"> background-position: @xf-xenfocus_bg4_position; </xf:if> background-repeat: @xf-xenfocus_bg4_repeat; background-attachment: @xf-xenfocus_bg4_attachment; </xf:if> } .focus-background-5(){ <xf:if is="property('xenfocus_bg5_hex')"> background-color: @xf-xenfocus_bg5_hex; </xf:if> <xf:if is="property('xenfocus_bg5_image')"> background-image: url(@xf-xenfocus_bg5_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg5_size')"> background-size: @xf-xenfocus_bg5_size; </xf:if> <xf:if is="property('xenfocus_bg5_position')"> background-position: @xf-xenfocus_bg5_position; </xf:if> background-repeat: @xf-xenfocus_bg5_repeat; background-attachment: @xf-xenfocus_bg5_attachment; </xf:if> } .focus-background-6(){ <xf:if is="property('xenfocus_bg6_hex')"> background-color: @xf-xenfocus_bg6_hex; </xf:if> <xf:if is="property('xenfocus_bg6_image')"> background-image: url(@xf-xenfocus_bg6_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg6_size')"> background-size: @xf-xenfocus_bg6_size; </xf:if> <xf:if is="property('xenfocus_bg6_position')"> background-position: @xf-xenfocus_bg6_position; </xf:if> background-repeat: @xf-xenfocus_bg6_repeat; background-attachment: @xf-xenfocus_bg6_attachment; </xf:if> } .focus-background-7(){ <xf:if is="property('xenfocus_bg7_hex')"> background-color: @xf-xenfocus_bg7_hex; </xf:if> <xf:if is="property('xenfocus_bg7_image')"> background-image: url(@xf-xenfocus_bg7_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg7_size')"> background-size: @xf-xenfocus_bg7_size; </xf:if> <xf:if is="property('xenfocus_bg7_position')"> background-position: @xf-xenfocus_bg7_position; </xf:if> background-repeat: @xf-xenfocus_bg7_repeat; background-attachment: @xf-xenfocus_bg7_attachment; </xf:if> } .focus-background-8(){ <xf:if is="property('xenfocus_bg8_hex')"> background-color: @xf-xenfocus_bg8_hex; </xf:if> <xf:if is="property('xenfocus_bg8_image')"> background-image: url(@xf-xenfocus_bg8_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg8_size')"> background-size: @xf-xenfocus_bg8_size; </xf:if> <xf:if is="property('xenfocus_bg8_position')"> background-position: @xf-xenfocus_bg8_position; </xf:if> background-repeat: @xf-xenfocus_bg8_repeat; background-attachment: @xf-xenfocus_bg8_attachment; </xf:if> } .focus-background-9(){ <xf:if is="property('xenfocus_bg9_hex')"> background-color: @xf-xenfocus_bg9_hex; </xf:if> <xf:if is="property('xenfocus_bg9_image')"> background-image: url(@xf-xenfocus_bg9_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg9_size')"> background-size: @xf-xenfocus_bg9_size; </xf:if> <xf:if is="property('xenfocus_bg9_position')"> background-position: @xf-xenfocus_bg9_position; </xf:if> background-repeat: @xf-xenfocus_bg9_repeat; background-attachment: @xf-xenfocus_bg9_attachment; </xf:if> } .focus-background-10(){ <xf:if is="property('xenfocus_bg10_hex')"> background-color: @xf-xenfocus_bg10_hex; </xf:if> <xf:if is="property('xenfocus_bg10_image')"> background-image: url(@xf-xenfocus_bg10_image?v=@xf-xenfocus_cache); <xf:if is="property('xenfocus_bg10_size')"> background-size: @xf-xenfocus_bg10_size; </xf:if> <xf:if is="property('xenfocus_bg10_position')"> background-position: @xf-xenfocus_bg10_position; </xf:if> background-repeat: @xf-xenfocus_bg10_repeat; background-attachment: @xf-xenfocus_bg10_attachment; </xf:if> } <xf:if is="property('xenfocus_picker')"> .focus-picker{ display: flex; align-items: center; justify-content: space-between; padding: 15px; span{ flex: 1 1 auto; display: block; position: relative; background-color: @xf-pageBg; background-size: cover; background-position: 50% 50% ; border-radius: 4px; box-shadow: rgba(0,0,0,0.08) 0px 5px 10px; color: #fff; font-size: 1.45rem; text-shadow: rgba(0,0,0,0.3) 0px 2px 3px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; max-height: 140px; margin: 5px; text-align: center; cursor: pointer; overflow: hidden; transition: transform 0.1s ease-in-out; &:active{ } html:not(.focus-picker--loaded) &{ background-image: none !important; } &::before{ content: ''; display: block; padding-bottom: 100%; } &::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid fade(@xf-textColor, 15%); border-radius: inherit; <xf:if is="property('styleType') == 'light'"> box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px; </xf:if> } i{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; overflow: hidden; &::before{ display: block; content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: all 0.1s ease-in-out; opacity: 0; background: rgba(255,255,255,0.2); pointer-events: none; } } @media screen and (min-width: 980px){ &:hover i::before{ opacity: 0.8; } } } <xf:if is="property('xenfocus_bg1_enable')">html[data-focus-bg="1"] & [data-focus-bg="1"]::after,</xf:if> <xf:if is="property('xenfocus_bg2_enable')">html[data-focus-bg="2"] & [data-focus-bg="2"]::after,</xf:if> <xf:if is="property('xenfocus_bg3_enable')">html[data-focus-bg="3"] & [data-focus-bg="3"]::after,</xf:if> <xf:if is="property('xenfocus_bg4_enable')">html[data-focus-bg="4"] & [data-focus-bg="4"]::after,</xf:if> <xf:if is="property('xenfocus_bg5_enable')">html[data-focus-bg="5"] & [data-focus-bg="5"]::after,</xf:if> <xf:if is="property('xenfocus_bg6_enable')">html[data-focus-bg="6"] & [data-focus-bg="6"]::after,</xf:if> <xf:if is="property('xenfocus_bg7_enable')">html[data-focus-bg="7"] & [data-focus-bg="7"]::after,</xf:if> <xf:if is="property('xenfocus_bg8_enable')">html[data-focus-bg="8"] & [data-focus-bg="8"]::after,</xf:if> <xf:if is="property('xenfocus_bg9_enable')">html[data-focus-bg="9"] & [data-focus-bg="9"]::after,</xf:if> <xf:if is="property('xenfocus_bg10_enable')">html[data-focus-bg="10"] & [data-focus-bg="10"]::after,</xf:if> .focus-null{ border-width: 7px; border-color: fade(@xf-textColor, 40%); <xf:if is="property('styleType') == 'dark'"> box-shadow: inset rgba(0,0,0,0.3) 0px 0px 0px 1px; <xf:else /> box-shadow: inset rgba(255,255,255,0.2) 0px 0px 0px 1px; </xf:if> } } @supports(display:grid){ .focus-picker{ display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); grid-gap: 10px; gap: 10px; span{ margin: 0; } } } <xf:if is="property('xenfocus_bg1_enable')"> .focus-picker [data-focus-bg='1']{ .focus-background-1(); } </xf:if> <xf:if is="property('xenfocus_bg2_enable')"> .focus-picker [data-focus-bg='2']{ .focus-background-2(); } </xf:if> <xf:if is="property('xenfocus_bg3_enable')"> .focus-picker [data-focus-bg='3']{ .focus-background-3(); } </xf:if> <xf:if is="property('xenfocus_bg4_enable')"> .focus-picker [data-focus-bg='4']{ .focus-background-4(); } </xf:if> <xf:if is="property('xenfocus_bg5_enable')"> .focus-picker [data-focus-bg='5']{ .focus-background-5(); } </xf:if> <xf:if is="property('xenfocus_bg6_enable')"> .focus-picker [data-focus-bg='6']{ .focus-background-6(); } </xf:if> <xf:if is="property('xenfocus_bg7_enable')"> .focus-picker [data-focus-bg='7']{ .focus-background-7(); } </xf:if> <xf:if is="property('xenfocus_bg8_enable')"> .focus-picker [data-focus-bg='8']{ .focus-background-8(); } </xf:if> <xf:if is="property('xenfocus_bg9_enable')"> .focus-picker [data-focus-bg='9']{ .focus-background-9(); } </xf:if> <xf:if is="property('xenfocus_bg10_enable')"> .focus-picker [data-focus-bg='10']{ .focus-background-10(); } </xf:if> .focus-picker span[data-focus-bg]{ background-attachment: scroll; } </xf:if> .focus-wrapper(){} .focus-wrapper{ @media (min-width: (@xf-responsiveMedium + 1px)){ flex: 1 1 auto; display: flex; flex-direction: column; > *{ flex: 0 0 auto; } } .focus-wrapper(); } .focus-content(){} .focus-content{ @media (min-width: (@xf-responsiveMedium + 1px)){ flex-grow: 1; display: flex; flex-direction: column; position: relative; <xf:if is="property('xenfocus_wrapperStyles--background-color')"> .focus-width &{ margin-bottom: 10px; } </xf:if> } .focus-content(); } @media (max-width: @xf-responsiveMedium){ .focus-wrapper, .focus-content{ border-radius: 0; border-width: 0; } } .p-body-inner{ padding: 10px; @media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){ padding: @content-padding 0; width: ~"calc(100vw - (@xf-pageEdgeSpacer * 2))"; <xf:if is="property('xenfocus_wrapperStyles--background-color')"> .focus-width &{ padding-left: @content-padding; padding-right: @content-padding; } </xf:if> } } .p-body, .p-body-inner{ border-radius: inherit; } .subNodeLink::before, .subNodeLink.subNodeLink--unread::before{ text-shadow: none; color: inherit; } .subNodeLink::before{ width: 1.5em; padding-right: 0px; } .subforum-grid(@debug) when (@debug = true) { @supports (display: grid){ .node-subNodeFlatList{ display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(@subforum-width, 1fr)); &::before, &::after{ display: none; } > li{ margin: 0; } a{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } } .subforum-grid(@subforum-grid); @media (max-width: 1000px){ .node-statsMeta{ margin-right: 20px; dl:not(:last-child):after{ content: '/'; margin: 0 10px; opacity: 0.2; } } } .node-title{ font-size: (@xf-fontSizeNormal+1); } .node-bold-title(@debug) when (@debug = true) { .node-title a{ font-weight: bold; } } .node-bold-title(@node-bold-title); .node-extra-title{ font-weight: 600; } .node-extra .node-extra-row .listInline{ overflow: hidden; text-overflow: ellipsis; } .node-extra-user a{ color: inherit; } @media (min-width: (@xf-responsiveMedium + 1px)){ .node-extra-row + .node-extra-row{ margin-top: 3px; } } @media (max-width: @xf-responsiveMedium){ .node-extra-row:not(:last-child){ margin-right: 4px; } } .node-alt-stats(@debug) when (@debug = true) { .node-stats .pairs{ display: flex; flex-direction: column; dd{ font-size: 16px; line-height: 1.2; } dt{ order: 2; } } } .node-alt-stats(@node-alt-stats); <xf:if is="property('xenfocus_zebra')"> .block-body > .node:nth-of-type(even), .structItemContainer-group > .structItem--thread:not(.is-highlighted):not(.is-moderated):not(.is-mod-selected):nth-of-type(even){ background-color: @node-zebra-color; } </xf:if> .structItem:last-child{ border-bottom-left-radius: @xf-blockBorderRadius; border-bottom-right-radius: @xf-blockBorderRadius; } .node-body{ padding: @node-extra-padding; } <xf:if is="property('xenfocus_iconStyles--color')"> @node-icon-unread-color: @xf-xenfocus_iconStyles--color; <xf:else /> @node-icon-unread-color: inherit; </xf:if> <xf:if is="property('xenfocus_iconStyles--background-color')"> @node-icon-unread-background: @xf-xenfocus_iconStyles--background-color; <xf:else /> @node-icon-unread-background: transparent; </xf:if> .node-icon{ width: @xf-xenfocus_iconWidth*1px; box-sizing: content-box; padding-right: @node-extra-padding; i{ line-height: 1; height: @xf-xenfocus_iconHeight*1px; width: @xf-xenfocus_iconWidth*1px; display: flex; align-items: center; justify-content: center; .xf-xenfocus_iconStyles(); html[data-logged-in="true"] .node--read &, html[data-logged-in="true"] .node--link &, html[data-logged-in="true"] .node--page &{ .xf-xenfocus_iconRead(); } .p-body &::before{ text-shadow: inherit; color: inherit; display: block; text-align: center; width: auto; line-height: inherit; } } .fa-comments::before{ <xf:if is="property('xenfocus_iconFA')"> .node--forum &, .node--category &{ content: '\@xf-xenfocus_iconFA'; font-weight: @xf-xenfocus_iconWeight; } </xf:if> <xf:if is="property('xenfocus_iconFAold')"> html[data-logged-in="true"] .node--read &{ content: '\@xf-xenfocus_iconFAold'; font-weight: @xf-xenfocus_iconWeightOld; } </xf:if> } <xf:if is="property('xenfocus_iconMobile')"> @media (max-width: @xf-responsiveNarrow){ width: @xf-xenfocus_iconWidth*@xf-xenfocus_iconMobile*1px; & i{ transform: scale(@xf-xenfocus_iconMobile); transform-origin: 0 50%; } } </xf:if> } <xf:if is="property('xenfocus_iconImage')"> #XF{ .node-icon i{ background: url('@xf-xenfocus_iconImage') no-repeat 50% 50%; background-size: contain; border-radius: 0; box-shadow: none; &::before{ display: none; } } html[data-logged-in='true']& .node--read .node-icon i{ <xf:if is="property('xenfocus_iconRead--background-image')"> background-image: url('@xf-xenfocus_iconImageOld'); <xf:else /> filter: @node-icon-read-filter; opacity: @node-icon-read-opacity; </xf:if> } } </xf:if> .node--unread .node-title::before{ display: none; } <xf:if is="property('xenfocus_new_badge')"> .node-title a{ vertical-align: middle; } html[data-logged-in='true'] .node--unread .node-title::before{ color: @new-badge-color; color: var(--new-badge-color, @new-badge-color); background: @new-badge-background; background: var(--new-badge-background, @new-badge-background); display: inline-block; font-size: 9px; line-height: 2; border-radius: 3px; padding: 0 4px; margin-right: 4px; vertical-align: middle; } </xf:if> @nodeHover-padding: 0px; @nodeHover-opacity: 0.06; @nodeHover-background: @xf-linkColor; <xf:if is="property('xenfocus_tableLayout') != 'standard'"> @media (min-width: (@xf-responsiveMedium + 1px)){ .node{ position: relative; <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> border-radius: @xf-blockBorderRadius; display: inline-block; width: 100%; vertical-align: top; & + .node{ border-width: 0; } &:first-child{ margin-top: @nodeHover-padding; } &:last-child{ margin-bottom: @nodeHover-padding; } </xf:if> &::before{ content: ''; position: absolute; top: 0; bottom: 0; <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> left: @nodeHover-padding; right: @nodeHover-padding; <xf:else /> left: 0; right: 0; </xf:if> border-radius: inherit; background: @nodeHover-background; opacity: 0; } &:hover::before{ opacity: @nodeHover-opacity; } .node-body{ position: relative; } <xf:if is="property('nodeListDescriptionDisplay') != 'tooltip'"> a{ position: relative; z-index: 2; } .node-title a{ position: static; &::after{ content: ''; top: 0; left: 0; right: 0; bottom: 0; position: absolute; z-index: 1; transform: translate(0,0); } } .iconic{ z-index: 10; } </xf:if> } <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> html .structItemContainer-group--sticky{ &::before, &::after{ margin: @nodeHover-padding -@nodeHover-padding; border-width: 1px 0; } &::before{ margin-top: -@nodeHover-padding; } &::after{ margin-bottom: -@nodeHover-padding; } } .structItemContainer-group, form.structItem{ padding: @nodeHover-padding; } </xf:if> .structItem{ <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> border-width: 0; border-radius: @xf-blockBorderRadius; </xf:if> display: flex; align-items: center; position: relative; > *{ flex: 0 0 auto; position: relative; display: block; min-width: 0; } .structItem-cell--main, .structItem-cell--newThread{ flex: 1 1 auto; } .structItemContainer-group &{ &::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background: @nodeHover-background; opacity: 0; } &:hover::before{ opacity: @nodeHover-opacity; } } } } </xf:if> .xenfocus_guestStyle(){}; .xenfocus_guestInternalStyle(){}; .xenfocus_guestWallpaper(){}; <xf:if is="property('xenfocus_guestEnable')"> .focus-guest{ border-radius: @xf-borderRadiusMedium; margin-bottom: 10px; padding: 5px; padding-bottom: 0; .template-login &, .template-register_form &, .template-lost_password{ display: none; } a{ color: inherit; } .focus-guest-content{ padding: 15px; flex: 1 1 auto; p{ margin: 0.6em 0; } & p:first-child{ margin-top: 0; } & p:last-child{ margin-bottom: 0; } } .focus-guest-buttons{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; list-style: none; font-size: @xf-fontSizeNormal; font-weight: bold; margin: 0; padding: 0; li{ flex: 0 0 auto; padding: 0; margin: 0 4px; } a{ display: flex; align-items: center; text-decoration: none; border-radius: 3px; position: relative; &:active{ top: 1px; } &::before{ .m-faBase(); .m-faContent(@fa-var-plus); font-size: 14px; border-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; } &[href$="login/"]::before{ .m-faContent(@fa-var-key); } &::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; border-radius: inherit; } } } &.focus-guest-alert{ padding: 0px; .xf-xenfocus_guestStyle(); <xf:if is="property('xenfocus_guestStyle--background-color')"> border: 1px solid xf-intensify(@xf-xenfocus_guestStyle--background-color, 20%); border-bottom-color: xf-intensify(@xf-xenfocus_guestStyle--background-color, 30%); </xf:if> .xenfocus_guestStyle(); .focus-guest-header{ display: none; } .focus-guest-align{ display: flex; align-items: center; @media (max-width: @xf-responsiveMedium){ display: block; } } .focus-guest-buttons{ line-height: 34px; padding: 10px; a{ background-color: xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color); color: xf-default(@xf-xenfocus_guestInternalStyle--color, @xf-buttonDefault--color); border: 1px solid desaturate(darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 15%), 15%); &:hover{ background-color: darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 5%); } &::before{ padding: 0 7px; background: rgba(255,255,255,0.15); } &::after{ } span{ padding: 0 12px; } } } } &.focus-guest-wallpaper{ position: relative; .xf-contentBase(); .xf-blockBorder(); .focus-block-container(); <xf:if is="property('xenfocus_guestWallpaper--background-image') AND property('xenfocus_guestWallpaperOpacity')"> &::before{ background-color: inherit; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; opacity: @xf-xenfocus_guestWallpaperOpacity; } > *{ position: relative; } </xf:if> .xf-xenfocus_guestWallpaper(); background-size: cover; background-position: 50% 50%; padding: 40px 20px; text-align: center; font-size: @xf-fontSizeLarge; .xenfocus_guestWallpaper(); .focus-guest-header{ font-size: @xf-fontSizeLargest; font-weight: bold; line-height: 1; } .focus-guest-content{ padding: 30px 0; max-width: 700px; margin: 0 auto; } .focus-guest-buttons{ line-height: 38px; font-size: @xf-fontSizeSmaller; li:first-child{ order: 1; } a{ border: 2px solid currentcolor; <xf:if is="property('xenfocus_guestWallpaper--color')"> border-color: fade(@xf-xenfocus_guestWallpaper--color, 70%); </xf:if> border-radius: 3px; padding: 0 12px; transition: all 0.1s linear; &:hover{ border-color: currentcolor; <xf:if is="property('xenfocus_guestWallpaper--color')"> background: fade(@xf-xenfocus_guestWallpaper--color, 10%); </xf:if> } &[href$="register/"]{ <xf:if is="property('xenfocus_guestWallpaper--color')"> background: @xf-xenfocus_guestWallpaper--color; border-color: transparent; <xf:if is="property('xenfocus_guestWallpaper--background-color')"> color: @xf-xenfocus_guestWallpaper--background-color; </xf:if> </xf:if> &:hover{ <xf:if is="property('xenfocus_guestWallpaper--color')"> background: lighten(@xf-xenfocus_guestWallpaper--color, 10%); </xf:if> } } span{ padding-left: 7px; } } } } } </xf:if> .p-footer{ > :first-child{ border-top-left-radius: inherit; border-top-right-radius: inherit; } > :last-child{ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } @media (max-width: @xf-responsiveMedium){ border-radius: 0; } } .p-footer-inner{ padding: 15px; } .p-footer-linkList{ display: flex; flex-wrap: wrap; justify-content: center; > li a{ padding: 6px; border-radius: 3px; display: inline-block; } .fa, .fas, .far, .fal, .fab{ margin-right: .3em; } } .p-footer-rssLink .fa-rss{ margin: 0; } .p-footer-row-main, .p-footer-row-opposite{ margin-bottom: 0; } @media (min-width: (@xf-responsiveWide + 1px)){ .p-footer-row-opposite{ margin-left: auto; } } .p-footer-row{ margin-bottom: 0; &::before, &::after{ display: none; } } .p-footer-copyright{ margin-top: 10px; text-align: center; } .footer-align, .p-footer-row{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; @media (max-width: @xf-responsiveWide){ flex-direction: column; } > div{ flex: 0 1 auto; } } .xenfocus\:branding{ white-space: nowrap; &:not(:first-child)::before, &:not(:last-child)::after{ content: ' // '; opacity: 0.35; margin: 0 8px; } a{ color: inherit; } } @media (max-width: @xf-responsiveNarrow){ .p-footer-linkList, .p-footer-copyright{ max-width: ~"calc(100vw - 18px)"; } } <xf:if is="property('xenfocus_footerEnable')"> .focus-footer{ padding: 15px; border-bottom: 1px solid fade(@xf-publicFooter--color, 10%); <xf:if is="!property('xenfocus_footerMobile')"> @media (max-width: @xf-responsiveMedium){ display: none; } </xf:if> } .focus-footer__align{ display: flex; justify-content: space-between; flex-wrap: wrap; } .focus-footer-col{ padding: 10px; @media (min-width: 926px){ flex: 1 1 10px; } @media (min-width: 500px) and (max-width: 925px){ &:not(:only-child){ width: 50%; } } @media (max-width: 925px){ &:not(:last-of-type){ margin-bottom: 40px; } } @media (max-width: 499px){ width: 100%; } h4{ color: fadein(@xf-publicFooter--color, 50%); display: block; padding: 0; margin: 0; margin-bottom: 20px; } a{ color: inherit; &:hover{ color: @xf-publicFooterLink--color; } } h4 + p{ margin-top: 0; } p:last-child{ margin-bottom: 0; } } .focus-footer-list{ list-style: none; display: block; padding: 0; margin: 0; & li{ display: block; &:not(:last-child){ padding-bottom: 5px; } } } .focus-footer + .footer-bottom-wrap{ background: @mega-footer-copyright; } </xf:if> <xf:if is="property('xenfocus_gridEnable') OR property('xenfocus_gridToggle')"> .focus-editor-panel[data-setting="focus-grid"]{ display: none; @supports (display: grid){ display: flex; } } @supports (display: grid){ .focus-grid{ --grid-node-icon-width: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*1px); @media (max-width: @xf-responsiveNarrow){ --grid-node-icon-width: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*0.7px); } <xf:if is="property('xenfocus_grid_nodes')"> @{xf-xenfocus_grid_nodes} <xf:else /> .block--category </xf:if> { .block-body{ display: flex; flex-wrap: wrap; padding: @grid-node-gap; <xf:if is="!property('xenfocus_gridWallpaper')"> background: @grid-node-wrapper; </xf:if> .reset-grid-wrapper(@debug) when (@debug = true) { background: none; border: 0; box-shadow: none; padding: 0px; margin-top: @grid-node-gap; @media (min-width: (@xf-responsiveMedium + 1px)){ margin: @grid-node-gap -@grid-node-gap -@grid-node-gap -@grid-node-gap; } } .reset-grid-wrapper(@reset-grid-wrapper); } .node{ flex: 1 0 var(--grid-node-width, @grid-node-width); margin: @grid-node-gap; max-width: 100%; border: 0; <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> display: block; width: auto; </xf:if> @media (max-width: @xf-responsiveMedium){ max-width: ~"calc(100% - @{grid-node-gap} - @{grid-node-gap})"; } &::before{ top: @grid-hover-inset; left: @grid-hover-inset; right: @grid-hover-inset; bottom: @grid-hover-inset; z-index: 5; pointer-events: none; } } .node-body{ width: auto; height: 100%; display: grid; grid-template-columns: auto 1fr; <xf:if is="property('xenfocus_grid_minimal')"> grid-template-rows: 1fr; <xf:else /> grid-template-rows: 1fr minmax(61px, auto); </xf:if> grid-template-areas: "nodeicon nodetitle" "nodelatest nodelatest"; align-items: center; border-radius: @xf-blockBorderRadius; position: relative; padding: 0; <xf:if is="!(property('xenfocus_grid_minimal'))"> &::before{ content: ''; display: block; align-self: stretch; grid-area: nodelatest; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; position: relative; z-index: 2; } </xf:if> } .node--link .node-body, .node--page .node-body{ grid-template-rows: 1fr; <xf:if is="!(property('xenfocus_grid_minimal'))"> &::before{ display: none; } </xf:if> } .node-icon{ grid-area: nodeicon; padding: @node-grid-padding; padding: var(--node-grid-padding, @node-grid-padding); padding-right: 0px; <xf:if is="!(property('xenfocus_iconStyles--background-color')) AND !(property('xenfocus_iconRead--background-color'))"> </xf:if> } .node-main{ grid-area: nodetitle; padding: @node-grid-padding; padding: var(--node-grid-padding, @node-grid-padding); } .node-subNodeMenu{ display: block; margin-top: 5px; } .node-extra{ <xf:if is="property('xenfocus_grid_minimal')"> display: none; <xf:else /> grid-area: nodelatest; width: auto; margin: 0; padding-top: 10px; padding-bottom: 10px; padding-left: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*1px); padding-left: var(--grid-node-icon-width); position: relative; display: flex; align-items: center; flex-wrap: wrap; z-index: 2; </xf:if> .node-extra-icon{ position: absolute; left: 0; width: @node-grid-padding + @node-grid-padding + (@xf-xenfocus_iconWidth*1px); width: var(--grid-node-icon-width); padding: 0; text-align: center; display: block; } .node-extra-row{ flex: 0 0 auto; width: 100%; white-space: normal; height: @xf-lineHeightDefault*1em; position: relative; } .node-extra-row:first-child{ font-weight: bold; } .node-extra-user a{ color: inherit; } .node-extra-row .node-extra-title{ position: absolute; left: 0; right: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .node-statsMeta{ <xf:if is="property('xenfocus_grid_stats')"> display: none; <xf:else /> display: flex; align-items: center; font-size: 0.9em; margin-top: 5px; dl{ padding: 0; width: auto; flex: 0 0 auto; &:not(:last-child):after{ display: none; } } dt{ display: none; } dd:before{ .m-faBase(); .m-faContent(@fa-var-comment); margin-right: 5px; } dl:last-child{ opacity: 0.4; margin-left: 15px; dd:before{ .m-faContent(@fa-var-comments); } } </xf:if> } .node-stats{ display: none; } <xf:if is="property('xenfocus_gridWallpaper')"> .node-body{ color: @xf-xenfocus_gridColor; background-color: @xf-xenfocus_gridBackground; background-size: cover; background-position: 50% 50%; &::before{ background: rgba(0,0,0,0.3); } &::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; z-index: 3; <xf:if is="property('styleType') === 'light'"> border: 1px solid rgba(0,0,0,0.2); <xf:else /> border: 1px solid rgba(255,255,255,0.2); </xf:if> } a, .node-description, .node-extra-row{ color: inherit; } .node-description, .node-extra-row:nth-of-type(2){ opacity: 0.7; } } <xf:else /> .node-body{ .xf-contentBase(); .xf-blockBorder(); .reset-grid-wrapper-2(@debug) when (@debug = true) { .focus-block-container(); } .reset-grid-wrapper-2(@reset-grid-wrapper); &::before{ background: xf-intensify(@xf-contentBg, 1%); border-top: 1px solid xf-intensify(@xf-contentBg, 7%); } } </xf:if> } } } <xf:if is="property('xenfocus_gridImage') AND property('xenfocus_gridWallpaper')"> @wallpapernodes: @xf-xenfocus_gridImage; .node-wallpapers-mixin(@i: length(@wallpapernodes)) when (@i > 0) { .node-wallpapers-mixin(@i - 1); @wallpapernode: extract(@wallpapernodes, @i); .node--id@{wallpapernode} .node-body { background-image: url('styles/xenfocus/node-wallpapers/@{wallpapernode}.jpg?v=@xf-xenfocus_cache'); } } @supports (display: grid){ .focus-grid{ .block--category{ .node-wallpapers-mixin(); } } } </xf:if> .hide-node-statsMeta-mobile(@debug) when (@debug = true) { @media (max-width: @xf-responsiveNarrow){ .node-statsMeta, .focus-grid .block--category .node-statsMeta{ display: none; } } } .hide-node-statsMeta-mobile(@hide-node-statsMeta-mobile); </xf:if> .focus-block-container(){} .focus-block-header(){} .focus-block-body(){} .focus-block-container-shift(){}; .focus-block-header-shift(){}; .focus-block-body-shift(){} .focus-block-minor-header(){} @{block-container}{ .focus-block-container(); } @{block-header}{ .focus-block-header(); @media (max-width: @xf-responsiveEdgeSpacerRemoval){ border-radius: 0; border-left-width: 0; border-right-width: 0; } } @{block-body}{ .focus-block-body(); } @{block-minor-header}{ .focus-block-minor-header(); } .blockMessage.blockMessage--none, .block--messages .block-container{ box-shadow: none; } .block-header{ .block-desc{ color: inherit; opacity: 0.7; } .button{ text-shadow: none; } } .block-container-shift(@debug) when (@debug = true) { .block--category{ .block-container{ border-width: 0; box-shadow: none; background: none; .focus-block-container-shift(); } #XF & .block-header{ .focus-block-header-shift(); } .block-body{ .xf-contentBase(); .xf-blockBorder(); border-radius: @xf-blockBorderRadius !important; .focus-block-container(); .focus-block-body-shift(); } @media (max-width: @xf-responsiveEdgeSpacerRemoval){ .block-container, #XF & .block-header, .block-body{ border-radius: 0; border-left-width: 0; border-right-width: 0; } } } } .block-container-shift(@block-container-shift); .p-body-sidebar .block-row:not(:last-child){ border-bottom: 1px solid @xf-borderColorFaint; } .block-body > .node:last-child{ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .p-body-sidebar .block-container, .p-body-sideNavContent .block-container{ padding: .01px 0; } .offCanvasMenu--nav { .offCanvasMenu-content { background: @mobile-navigation-background; color: @mobile-navigation-color; transition-duration: 0.2s; } .offCanvasMenu-subList{ background: fade(@mobile-navigation-color, 10%); <xf:if is="property('xenfocus_navIcons')"> .offCanvasMenu-link{ padding-left: 34px; } </xf:if> } .offCanvasMenu-linkHolder.is-selected{ color: inherit; font-weight: bold; background: fade(@mobile-navigation-color, 15%); text-transform: inherit; } } <xf:if is="property('xenfocus_countdownEnable')"> .focus-timer{ text-align: center; font-size: 1.2em; display: flex; flex-direction: column; justify-content: center; min-height: 140px; border-radius: @xf-blockBorderRadius; <xf:if is="property('xenfocus_countdownColor')"> color: @xf-xenfocus_countdownColor; <xf:if is="property('xenfocus_wrapperStyles--background-color')"> @media (min-width: (@xf-responsiveMedium + 1px)){ margin-left: -((@xf-elementSpacer) / 2); margin-right: -((@xf-elementSpacer) / 2); } </xf:if> <xf:else /> .xf-contentBase(); .xf-blockBorder(); .focus-block-container(); </xf:if> margin-bottom: 10px; padding: 15px; html:not(.focus-countdown) &{ display: none; } h3{ margin: 0; padding: 0; font-size: 1.3em; line-height: 1; font-weight: normal; } a{ color: inherit; text-decoration: underline; } > div{ padding-top: 12px; } .focus-timer-numbers{ line-height: 1em; min-height: 1em; opacity: 0.8; span{ opacity: 0.6; } } .focus-timer-numbers, .focus-timer-desc, .focus-timer-desc-done{ display: none; } &.focus-timer-done .focus-timer-desc-done, &.focus-timer-counting .focus-timer-desc, &.focus-timer-counting .focus-timer-numbers{ display: block; } } [data-countdown-text]::before{ content: attr(data-countdown-text); } </xf:if> .structItem-cell{ vertical-align: middle; } .structItem-cell.structItem-cell--icon.structItem-cell--iconEnd .structItem-iconContainer{ padding-top: 0; } form[data-xf-init*="quick-thread"] .structItem-cell--icon{ vertical-align: top; align-self: flex-start; } .structItem-cell--meta .pairs{ font-size: @xf-fontSizeSmaller; } .structItem-minor dd{ color: @xf-textColor; } .structItemContainer-group--sticky::before, .structItemContainer-group--sticky::after{ <xf:if is="property('xenfocus_sticky')"> display: block; padding: 9px; font-size: 10px; font-weight: bold; background: @xf-contentAltBg; text-transform: uppercase; border: @xf-borderSize solid @xf-borderColorFaint; border-width: 1px 0 0 0; <xf:else /> display: none; </xf:if> } .structItem-parts > li:nth-child(2n){ color: inherit; } <xf:if is="property('xenfocus_stickyAuthor')"> @media (min-width: (@xf-responsiveMedium + 1px)){ .message-user{ position: -webkit-sticky; position: sticky; <xf:if is="property('publicNavSticky') === 'primary' OR property('publicNavSticky') === 'all'"> top: @sticky-top * 1px + 10px; <xf:else /> top: 10px; </xf:if> } } </xf:if> .message-userArrow{ display: none; } .message-avatar-wrapper .message-avatar-online::before{ background: #fff; border-color: #fff; } .message-attribution{ border-width: 0; padding-bottom: 6px; @media (min-width: (@xf-responsiveMedium + 1px)){ padding-top: 2px; } } <xf:if is="property('faded_post_meta')"> @media (hover:hover) and (min-width: (@xf-responsiveMedium + 1px)){ [data-template="thread_view"] .message-attribution, .actionBar-set--internal{ opacity: @post-meta-opacity; transition: opacity 0.2s ease-in-out; &:hover{ opacity: 1; } } } </xf:if> <xf:if is="property('focus_post_minimal')"> @media (min-width: (@xf-responsiveMedium + 1px)){ .message-cell.message-cell--user{ background-color: transparent; border-color: transparent !important; } } </xf:if> .userBanner{ border-radius: @xf-borderRadiusMedium; padding-top: 3px; padding-bottom: 3px; .message-userBanner &{ margin-top: 5px; } } .message-body{ font-size: @xf-fontSizeNormal + 1px; line-height: 1.75; margin-top: 4px; a{ text-decoration: underline; } } .reactionsBar{ background: fade(@xf-textColor, 4%); border-width: 0px; border-radius: 4px; color: @xf-textColorMuted; a{ color: inherit; } bdi{ color: @xf-textColor; } .message &{ padding: 9px; } } .actionBar-action{ border-width: 0px; } @focus-post-button: @xf-buttonDefault--background-color; @focus-post-button--minimal--text: @xf-linkColor; @focus-post-button--minimal--background: @xf-linkColor; <xf:if is="property('xenfocus_postButton') != 'none'"> .actionBar-set{ display: flex; align-items: center; &.actionBar-set--external{ margin-right: 0; .actionBar-action{ padding: 5px 8px; text-decoration: none; <xf:if is="property('xenfocus_postButton') == 'button'"> background: @focus-post-button; color: @xf-buttonDefault--color; border-width: 1px; border-color: xf-intensify(@focus-post-button, 9%); .m-transition(background-color); &:hover{ background-color: xf-intensify(@focus-post-button, 5%); } </xf:if> <xf:if is="property('xenfocus_postButton') == 'minimal'"> color: @focus-post-button--minimal--text; background-color: fade(@focus-post-button--minimal--background, 6%); font-weight: 600; &:hover{ background-color: fade(@focus-post-button--minimal--background, 10%); } &.is-selected{ background-color: fade(@focus-post-button--minimal--background, 20%); } </xf:if> &::before{ margin-right: 7px; display: inline-block; } &.actionBar-action--like:before{ .m-faContent(@fa-var-thumbs-up); } &.actionBar-action--reply:before{ .m-faContent(@fa-var-quote-left); } } } &.actionBar-set--internal{ color: @xf-textColorMuted; a.actionBar-action{ color: inherit; text-decoration: none; margin: 0; padding-left: 8px; padding-right: 8px; &:hover{ color: @xf-textColor; background: fade(@xf-textColor, 6%); } } } .actionBar-action.actionBar-action--reaction .reaction-text{ padding-left: 5px; } } .actionBar-action.actionBar-action--inlineMod label{ color: inherit; } </xf:if> .likeIcon::before{ color: @xf-textColorDimmed; } a.reaction:hover .reaction-text, a.reaction:focus .reaction-text{ text-decoration: none; } .reset-reaction-text(@debug) when (@debug = true) { .has-reaction .reaction-text{ color: inherit; } } .reset-reaction-text(@reset-reaction-text); .tooltip--reaction .tooltip-content{ background: @xf-contentAltBg; border-width: 0; <xf:if is="property('styleType') == 'light'"> box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 2px rgba(0, 0, 0, .15); <xf:else /> box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px; </xf:if> } <xf:if is="property('styleType') == 'dark'"> .bbWrapper iframe{ background: #bbb; } </xf:if> .message--quickReply .formButtonGroup-primary, body[data-template="forum_post_thread"] .formSubmitRow-controls{ display: flex; align-items: center; .button--primary{ order: 1; margin-left: 5px; } } .pollResult-bar{ background: fade(@xf-progressBarColor, 20%); border-radius: @xf-borderRadiusMedium; &::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; border: 1px solid fade(xf-intensify(@xf-progressBarColor, 30%), 10%); pointer-events: none; } } .pollResult.pollResult--showVoters:hover{ background: @xf-contentAltBg; } @media (min-width: (@xf-responsiveWide + 1px)){ .message-name{ margin-top: 10px; } } @media (max-width: @xf-responsiveMedium){ .message:not(.message--forceColumns) .message-user{ align-items: center; } .message-avatar-wrapper{ margin-bottom: 0; } } .bbCodeBlock:first-child{ margin-top: 0; } .fr-box.fr-basic { .fr-toolbar.fr-top{ background: @editor-bg !important; } .fr-wrapper { background: @editor-bg; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .fr-element{ color: @editor-text; } } .fr-element{ font-family: @xf-fontFamilyBody; } <xf:if is="property('styleType') == 'dark'"> .fr-wrapper ::selection { background: #fff; color: #222; } </xf:if> .memberHeader, .memberHeader-main{ border-top-left-radius: inherit; border-top-right-radius: inherit; } <xf:if is="!property('xenfocus_wrapperStyles--background-color')"> @media (max-width: @xf-responsiveWide){ .p-body-sidebar{ margin-left: 0; margin-right: 0; } } </xf:if> .focus-sidebar-icons(@debug) when (@debug = true) { .block[data-widget-definition]{ .block-minorHeader::before{ .m-faBase(); content: @minorHeader-icon; display: inline-block; transform: translate(0,0); margin-right: 6px; opacity: 0.7; } } .block-minorHeader::before{ .block[data-widget-definition="members_online"] &{ .m-faContent(@fa-var-user); } .block[data-widget-section="staffMembers"] &{ .m-faContent(@fa-var-user-shield); } .block[data-widget-definition="new_profile_posts"] &{ .m-faContent(@fa-var-user-edit); } .block[data-widget-definition="forum_statistics"] &{ .m-faContent(@fa-var-chart-pie); } .block[data-widget-definition="xfmg_gallery_statistics"] &{ .m-faContent(@fa-var-file-image); } .block[data-widget-definition="share_page"] &{ .m-faContent(@fa-var-share-alt); } .block[data-widget-definition="new_posts"] &{ .m-faContent(@fa-var-comments); } .block[data-widget-definition="new_threads"] &{ .m-faContent(@fa-var-comments); } .block[data-widget-definition="find_member"] &{ .m-faContent(@fa-var-search); } .block[data-widget-definition="newest_members"] &{ .m-faContent(@fa-var-user-plus); } .block[data-widget-definition="sytrySupportUs"] &{ .m-faContent(@fa-var-shopping-cart); } .block[data-widget-definition="xfmg_media_slider"] &{ .m-faContent(@fa-var-image); } .block[data-widget-definition="calendarEvents"] &{ .m-faContent(@fa-var-calendar-alt); } .block[data-widget-definition="xfmg_media_slider"] &{ .m-faContent(@fa-var-image); } .block[data-widget-definition="at_law_widget"] &{ .m-faContent(@fa-var-comments); } .block[data-widget-definition="birthdays"] &{ .m-faContent(@fa-var-birthday-cake); } } .block[data-widget-definition="sytrySupportUs"] .block-minorHeader .fa, .block[data-widget-definition="calendarEvents"] .block-minorHeader .far{ display: none; } } .focus-sidebar-icons(@focus-sidebar-icons); @media (max-width: @xf-responsiveWide){ .p-body-sidebar > *{ margin-bottom: 10px; } } .focus-editor-panel[data-setting="focus-sidebar-sticky"]{ display: none; } @media (min-width: (@xf-responsiveWide + 1px)){ .p-body-main--withSidebar{ display: flex; align-items: flex-start; .p-body-content{ flex: 0 1 auto; display: block; width: ~"calc(100% - @xf-sidebarWidth)"; } .p-body-sideNav, .p-body-sidebar{ flex: 0 0 auto; display: block; } .p-body-contentCol, .p-body-sidebarCol{ display: none; } } .focus-sidebar-flip .p-body-sidebar{ order: -1; } .focus-sidebar-flip{ .p-body-main--withSidebar .p-body-content{ padding-right: 0; padding-left: @content-padding; } } <xf:if is="property('xenfocus_stickyBlocks') OR property('xenfocus_stickyToggle')"> @supports ((position: sticky) or (position: -webkit-sticky)){ .focus-sidebar-sticky .p-body-sidebar{ position: -webkit-sticky; position: sticky; <xf:if is="property('publicNavSticky') === 'primary' OR property('publicNavSticky') === 'all'"> top: @sticky-top * 1px + 10px; <xf:else /> top: 10px; </xf:if> } .focus-editor-panel[data-setting="focus-sidebar-sticky"]{ display: flex; } } </xf:if> } <xf:if is="property('xenfocus_eventOverlay') === 'snow'"> @-webkit-keyframes snow_1 { 0% { transform: translate(-250px, 0); } 100% { transform: translate(250px, 300vh); } } @-webkit-keyframes snow_2 { 0% { transform: translate(0, 0); } 100% { transform: translate(-100px, 300vh); } } @-webkit-keyframes snow_3 { 0% { transform: translate(-50px, 0); } 100% { transform: translate(0, 300vh); } } @keyframes snow_1 { 0% { transform: translate(-250px, 0); } 100% { transform: translate(250px, 300vh); } } @keyframes snow_2 { 0% { transform: translate(0, 0); } 100% { transform: translate(-100px, 300vh); } } @keyframes snow_3 { 0% { transform: translate(-50px, 0); } 100% { transform: translate(0, 300vh); } } .xenfocus-snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 20; pointer-events: none; } html:not(.focus-snow) .xenfocus-snow{ display: none; } .xenfocus-snow-panel{ height: 200vh; margin-top: -200vh; position: relative; will-change: transform; } .f-sF{ position: absolute; background: #fff; border-radius: 50%; box-shadow: #000 0px 1px 2px; &:nth-child(1) { left: 5%; top: 5%; width: 4px; height: 5px; } &:nth-child(2) { left: 15%; top: 10%; width: 6px; height: 5px; } &:nth-child(3) { left: 23%; top: 40%; width: 2px; height: 5px; } &:nth-child(4) { left: 36%; top: 15%; width: 3px; height: 3px; } &:nth-child(5) { left: 47%; top: 70%; width: 2px; height: 5px; } &:nth-child(6) { left: 53%; top: 50%; width: 1px; height: 2px; } &:nth-child(7) { left: 61%; top: 90%; width: 2px; height: 1px; } &:nth-child(8) { left: 78%; top: 14%; width: 6px; height: 4px; } &:nth-child(9) { left: 85%; top: 86%; width: 5px; height: 1px; } &:nth-child(10) { left: 96%; top: 59%; width: 3px; height: 1px; } &:nth-child(11) { left: 3%; top: 91%; width: 4px; height: 4px; } &:nth-child(12) { left: 18%; top: 31%; width: 3px; height: 3px; } &:nth-child(13) { left: 26%; top: 52%; width: 5px; height: 6px; } &:nth-child(14) { left: 38%; top: 36%; width: 5px; height: 3px; } &:nth-child(15) { left: 43%; top: 81%; width: 3px; height: 2px; } &:nth-child(16) { left: 54%; top: 11%; width: 2px; height: 3px; } &:nth-child(17) { left: 67%; top: 62%; width: 4px; height: 1px; } &:nth-child(18) { left: 76%; top: 9%; width: 5px; height: 5px; } &:nth-child(19) { left: 87%; top: 2%; width: 3px; height: 1px; } &:nth-child(20) { left: 98%; top: 98%; width: 4px; height: 1px; } &:nth-child(21) { left: 7%; top: 60%; width: 6px; height: 5px; } &:nth-child(22) { left: 14%; top: 45%; width: 2px; height: 5px; } &:nth-child(23) { left: 25%; top: 65%; width: 1px; height: 3px; } &:nth-child(24) { left: 36%; top: 11%; width: 3px; height: 4px; } &:nth-child(25) { left: 49%; top: 24%; width: 3px; height: 4px; } &:nth-child(26) { left: 58%; top: 37%; width: 2px; height: 5px; } &:nth-child(27) { left: 69%; top: 49%; width: 6px; height: 6px; } &:nth-child(28) { left: 75%; top: 55%; width: 6px; height: 3px; } &:nth-child(29) { left: 84%; top: 86%; width: 5px; height: 3px; } &:nth-child(30) { left: 94%; top: 90%; width: 4px; height: 1px; } &:nth-child(31) { left: 59%; top: 61%; width: 4px; height: 6px; } } .xenfocus-snow-panel-1 { -webkit-animation: snow_1 8s linear infinite; animation: snow_1 8s linear infinite; } .xenfocus-snow-panel-2 { -webkit-animation: snow_2 13s 0s linear infinite; animation: snow_2 13s 0s linear infinite; } .xenfocus-snow-panel-3 { -webkit-animation: snow_3 16s 6s linear infinite; animation: snow_3 16s 6s linear infinite; } @media screen and (max-width:979px){ .focus-editor-panel[data-setting='focus-snow'], .xenfocus-snow{ display: none; } } </xf:if> <xf:if is="property('xenfocus_eventOverlay') === 'confetti'"> @-webkit-keyframes confetti_1 { 0% { transform: translate(-250px, 0); } 100% { transform: translate(250px, 300vh); } } @-webkit-keyframes confetti_2 { 0% { transform: translate(0, 0); } 100% { transform: translate(-100px, 300vh); } } @-webkit-keyframes confetti_3 { 0% { transform: translate(-50px, 0); } 100% { transform: translate(0, 300vh); } } @keyframes confetti_1 { 0% { transform: translate(-250px, 0); } 100% { transform: translate(250px, 300vh); } } @keyframes confetti_2 { 0% { transform: translate(0, 0); } 100% { transform: translate(-100px, 300vh); } } @keyframes confetti_3 { 0% { transform: translate(-50px, 0); } 100% { transform: translate(0, 300vh); } } .xenfocus-confetti{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 20; pointer-events: none; } html:not(.focus-confetti) .xenfocus-confetti{ display: none; } .xenfocus-confetti-panel{ height: 200vh; margin-top: -200vh; position: relative; will-change: transform; } .f-con{ position: absolute; width: 9px; height: 5px; border-radius: 2px; &:nth-child(1) { left: 5%; top: 5%; } &:nth-child(2) { left: 15%; top: 10%; } &:nth-child(3) { left: 23%; top: 40%; } &:nth-child(4) { left: 36%; top: 15%; } &:nth-child(5) { left: 47%; top: 40%; } &:nth-child(6) { left: 53%; top: 50%; } &:nth-child(7) { left: 61%; top: 90%; } &:nth-child(8) { left: 78%; top: 14%; } &:nth-child(9) { left: 85%; top: 86%; } &:nth-child(10) { left: 96%; top: 59%; } &:nth-child(11) { left: 3%; top: 91%; } &:nth-child(12) { left: 18%; top: 31%; } &:nth-child(13) { left: 26%; top: 52%; } &:nth-child(14) { left: 38%; top: 36%; } &:nth-child(15) { left: 43%; top: 81%; } &:nth-child(16) { left: 54%; top: 11%; } &:nth-child(17) { left: 67%; top: 62%; } &:nth-child(18) { left: 76%; top: 9%; } &:nth-child(19) { left: 87%; top: 2%; } &:nth-child(20) { left: 98%; top: 98%; } &:nth-child(21) { left: 7%; top: 60%; } &:nth-child(22) { left: 14%; top: 45%; } &:nth-child(23) { left: 25%; top: 65%; } &:nth-child(24) { left: 36%; top: 1%; } &:nth-child(25) { left: 49%; top: 24%; } &:nth-child(26) { left: 58%; top: 32%; } &:nth-child(27) { left: 69%; top: 49%; } &:nth-child(28) { left: 75%; top: 55%; } &:nth-child(29) { left: 84%; top: 86%; } &:nth-child(30) { left: 94%; top: 90%; } &:nth-child(31) { left: 59%; top: 61%; } } .xenfocus-confetti-panel-1 { -webkit-animation: confetti_1 8s linear infinite; animation: confetti_1 8s linear infinite; .f-con{ background: fade(#e84c4c, 80%); transform: rotate(30deg); } } .xenfocus-confetti-panel-2 { -webkit-animation: confetti_2 13s 0s linear infinite; animation: confetti_2 13s 0s linear infinite; .f-con{ background: fade(#5ec745, 80%); transform: rotate(-10deg); } } .xenfocus-confetti-panel-3 { -webkit-animation: confetti_3 16s 6s linear infinite; animation: confetti_3 16s 6s linear infinite; .f-con{ background: fade(#3895e5, 80%); transform: rotate(50deg); } } @media screen and (max-width:979px){ .focus-editor-panel[data-setting='focus-confetti'], .xenfocus-confetti{ display: none; } } </xf:if> <xf:if is="property('xenfocus_holiday') != 'none'"> .focus-logo--holiday{ height: 100%; display: flex; align-items: center; } </xf:if> <xf:if is="property('xenfocus_holiday') === 'valentines'"> @-webkit-keyframes valentines{ 0%, 30%, 50%, 60%, 80%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } 70% { transform: scale(1.06); } } @keyframes valentines{ 0%, 30%, 50%, 60%, 80%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } 70% { transform: scale(1.06); } } .focus-logo--holiday .fa-heart{ color: #FF717E; animation: valentines 2s infinite linear; } </xf:if> <xf:if is="property('xenfocus_holiday') === 'halloween'"> @keyframes halloween { 0%,100%{ transform: translateY(-7%); } 50% { transform: translateY(7%); } } .p-header-logo .focus-logo--holiday img{ max-height: 60%; animation: halloween 3s infinite linear; } </xf:if> .focus-pagination(@debug) when (@debug = true) { .pageNav{ display: flex; > *{ flex: 0 0 auto; margin-right: @pagination-gap; } } .pageNav-main{ display: flex; } .pageNav-jump{ padding-left: 12px; padding-right: 12px; } .pageNav-page{ display: block; flex: 0 0 auto; border-radius: inherit; font-weight: bold; &:not(:last-child){ margin-right: @pagination-gap; } > a{ padding-left: 11px; padding-right: 11px; } } .pageNavWrapper{ border-radius: @pagination-radius; } .pageNav, .pageNav-main, .pageNavSimple, .pageNav-jump, .pageNavSimple-el, #XF .pageNav-page{ border-radius: inherit; } #XF{ .pageNav-jump, .pageNav-page, .pageNavSimple-el{ background: @pagination-page; color: contrast(@pagination-page, @xf-textColor, #fff); border-width: 0px; box-shadow: @pagination-shadow; &:hover, &:active{ background-color: @pagination-page-hover; } } .pageNav-page.pageNav-page--current, .pageNavSimple-el.pageNavSimple-el--current{ background: @pagination-active; color: contrast(@pagination-active, rgba(0,0,0,0.8), #fff); border-width: 0; box-shadow: @pagination-shadow-active; &:hover, &:active{ background-color: xf-intensify(@pagination-active, 3%); } } .pageNavSimple-el{ padding-left: 10px; padding-right: 10px; } } .pageNavSimple-el--prev i::before, .pageNav-jump.pageNav-jump--prev::before{ margin-right: 3px; width: auto; } .pageNavSimple-el--next i::before, .pageNav-jump.pageNav-jump--next::after{ margin-left: 3px; width: auto; } } .focus-pagination(@focus-pagination); <xf:if is="property('xenfocus_mobile_navigation_bar')"> .mobile-navigation-bar{ <xf:if is="property('xenfocus_mnb_scroll')"> position: fixed; <xf:else /> position: -webkit-sticky; position: sticky; </xf:if> bottom: 0; left: 0; right: 0; background: @xf-xenfocus_mnb_background; color: @xf-xenfocus_mnb_color; z-index: 490; padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); <xf:if is="property('styleType') == 'light'"> box-shadow: rgba(0,0,0,0.1) 0px -1px 0px; <xf:else /> box-shadow: rgba(255,255,255,0.1) 0px -1px 0px; </xf:if> text-align: center; transform: translateY(0); transition: transform 0.15s ease-in-out; <xf:if is="property('xenfocus_mnb_toggle')"> html:not(.focus-mobile-navigation-bar) &{ display: none; } </xf:if> .mobile-navigation-bar--hidden &{ transform: translateY(~"calc(100% + 2px)"); } } @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter:blur(10px))){ .mobile-navigation-bar{ background: fade(@xf-xenfocus_mnb_background, 80%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } @media (min-width: (@xf-responsiveMedium + 1px)){ .mobile-navigation-bar, .focus-editor-panel[data-setting='focus-mobile-navigation-bar']{ display: none; } } .mobile-navigation-bar__list{ display: flex; justify-content: space-around; padding: 0; margin: 0; list-style: none; li{ flex: 1 1 10px; } a{ display: block; padding: 6px 0; text-decoration: none; color: inherit; } } .mobile-navigation-bar__icon{ display: flex; justify-content: center; align-items: center; height: 28px; font-size: 20px; i{ font-weight: @xf-xenfocus_mnb_weight; } } .mobile-navigation-bar__text{ font-size: 10px; text-transform: capitalize; } @media (max-width: @xf-responsiveMedium){ .focus-mobile-navigation-bar.has-hiddenscroll .u-scrollButtons{ bottom: 80px; } .focus-mobile-navigation-bar .p-footer-inner{ padding-bottom: 75px; } @supports (padding-bottom: env(safe-area-inset-bottom)){ .focus-mobile-navigation-bar.has-hiddenscroll .u-scrollButtons{ --mobile-navigation-bar--padding-bottom: env(safe-area-inset-bottom); bottom: ~"calc(var(--mobile-navigation-bar--padding-bottom) + 80px)"; } } } [data-template="forum_list"] .mobile-navigation-bar--forums, [data-template="forum_view"] .mobile-navigation-bar--forums, [data-template="thread_view"] .mobile-navigation-bar--forums, [data-template="whats_new"] .mobile-navigation-bar--whatsnew, [data-template="whats_new_posts"] .mobile-navigation-bar--whatsnew, [data-template="whats_new_profile_posts"] .mobile-navigation-bar--whatsnew, [data-template="news_feed"] .mobile-navigation-bar--whatsnew, [data-template="latest_activity"] .mobile-navigation-bar--whatsnew, [data-template="forum_post_thread"] .mobile-navigation-bar--postthread, [data-template="login"] .mobile-navigation-bar--login, [data-template="register"] .mobile-navigation-bar--register, [data-template="search_form"] .mobile-navigation-bar--search, [data-template="search_results"] .mobile-navigation-bar--search{ color: @xf-xenfocus_mnb_active; font-weight: bold; } </xf:if> @media (max-width: @xf-responsiveWide) and (orientation:landscape) and (-webkit-device-pixel-ratio : 3) { .p-header, .p-nav, body .p-body-inner, .focus-width .p-body-inner, .focus-footer { padding-left: ~"max(0px, env(safe-area-inset-left))"; padding-right: ~"max(0px, env(safe-area-inset-right))"; } .p-nav-inner{ padding-left: 0; padding-right: 0; } } <xf:if is="property('styleType') == 'light'"> @treeEntryChooser-header--hover: fade(@xf-linkColor, 6%); <xf:else /> @treeEntryChooser-header--hover: fade(@xf-linkColor, 6%); </xf:if> .block--treeEntryChooser{ margin: 0; padding: 10px; &:not(:first-child){ padding-top: 0; } a:hover{ text-decoration: none; } .block-container{ border-width: 0; box-shadow: none; background: @xf-paletteNeutral1; } .block-header{ border-radius: 3px !important; padding: 12px 18px; margin: 0 0 10px 0; border-width: 1px; &::before, &::after{ display: none; } } .block-row.block-row--separated + .block-row{ border-width: 0; } &.block .block-row{ padding: 10px 18px; border-radius: 3px !important; } .block-row.block-row--clickable:hover{ background: @treeEntryChooser-header--hover; } > .block-container > .block-row:first-child{ margin-top: 30px; } } @media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){ .p-body-header{ margin-bottom: @content-padding; } } @media (min-width: (@xf-responsiveMedium + 1px)){ .hide\:desktop{ display: none !important; } } @media (max-width: @xf-responsiveMedium){ .hide\:mobile{ display: none !important; } } .itemList-itemOverlay { height: auto; bottom: -70px; } .shareButtons-button{ transition: none; } .button.button--scroll, a.button.button--scroll { box-shadow: none; border-color: transparent; } .p-staffBar{ border: 0; border-radius: @xf-blockBorderRadius; margin-bottom: 10px; } .p-staffBar-inner{ padding-left: 4px; padding-right: 4px; max-width: none; .hScroller-scroll{ display: flex; } } .p-staffBar-link{ padding-left: 10px; padding-right: 10px; &::before{ .m-faBase(); .m-faContent(@fa-var-lock); display: inline-block; margin-right: 6px; } &[data-xf-key="alt+m"]::before{ .m-faContent(@fa-var-check-square); } &[href*='/admin']{ margin-left: auto; } } .focus-wallpaper(@debug) when (@debug = true) { @{focus-wallpaper-elements}{ .xf-contentBase(); .xf-blockBorder(); border-radius: @xf-blockBorderRadius; padding: 14px; .focus-block-container(); } .p-body-header{ padding: 20px 15px; } } .focus-wallpaper(@focus-wallpaper); .node-description{ margin-top: 5px; color: @xf-textColorMuted; } .menu{ box-shadow: 0 5px 30px 0 rgba(0,0,0,0.25), rgba(0,0,0,0.15) 0px 3px 5px; } .tooltip--basic .tooltip-content{ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .avatar{ position: relative; text-shadow: none; &::after{ content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid fade(@xf-textColor, 15%); border-radius: inherit; pointer-events: none; <xf:if is="property('styleType') == 'light'"> box-shadow: inset rgba(0,0,0,0.1) 0px 1px 3px; </xf:if> } &.js-avatarCropper{ top: 0 !important; left: 0 !important; } } <xf:if is="property('styleType') == 'light'"> @bbcode-comment: #a50; @bbcode-tag: #170; @bbcode-boolean: #219; @bbcode-symbol: #708; @bbcode-selector: #05a; @bbcode-deleted: #d44; @bbcode-inserted: #292; @bbcode-string: #a11; @bbcode-number: #164; @bbcode-char: #00c; @bbcode-variable: #05a; @bbcode-class-name: #00f; @bbcode-constant: #05a; <xf:else /> @bbcode-comment: #ebe7e3; @bbcode-tag: #e8bd89; @bbcode-boolean: #e8bd89; @bbcode-symbol: #acc47e; @bbcode-selector: #7ea9c4; @bbcode-deleted: #797979; @bbcode-inserted: #292; @bbcode-string: #7ea9c4; @bbcode-number: #e8bd89; @bbcode-char: #df897a; @bbcode-variable: #df897a; @bbcode-class-name: #df897a; @bbcode-constant: #05a; </xf:if> .bbCodeCode { .prism-token { &.prism-comment, &.prism-prolog, &.prism-doctype, &.prism-cdata { color: @bbcode-comment; } &.prism-tag { color: @bbcode-tag; } &.prism-boolean { color: @bbcode-boolean; } &.prism-symbol, &.prism-atrule, &.prism-keyword { color: @bbcode-symbol; } &.prism-selector, &.prism-function { color: @bbcode-selector; } &.prism-deleted { color: @bbcode-deleted; } &.prism-inserted { color: @bbcode-inserted; } &.prism-string, &.prism-attr-value { color: @bbcode-string; } &.prism-number { color: @bbcode-number; } &.prism-attr-name, &.prism-char, &.prism-builtin { color: @bbcode-char; } &.prism-regex, &.prism-important, &.prism-variable, &.prism-package { color: @bbcode-variable; } &.prism-class-name, &.prism-important, &.prism-bold { color: @bbcode-class-name; } &.prism-italic, &.prism-constant { color: @bbcode-constant; } } } .bbCodeBlock--code .bbCodeBlock-title{ -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; } .lfs .tabGroup .structItem{ display: table; > *{ display: table-cell; } } .lfs .tabGroup .structItem-cell--secondData { display: none; } .mediaList.mediaList--buttons > .mediaList-button .mediaList-inner::before{ width: 100%; } .block-body + .block-minorHeader{ border-top-color: @xf-blockMinorHeader--border-color; } <xf:if is="property('xenfocus_tableLayout') != 'standard'"> @media (min-width: (@xf-responsiveMedium + 1px)){ .block--similarContents .structItem{ display: flex; } } </xf:if> .fr-popup .fr-input-focus { background: @xf-paletteNeutral1; } #XF .cm-s-default.CodeMirror .CodeMirror-gutters{ background: @xf-paletteColor1; color: @xf-paletteColor5; border-color: transparent; } <xf:if is="property('styleType') == 'dark'"> .notice{ border-color: transparent; border-top-color: rgba(255,255,255,0.3); } </xf:if> .bbCodeBlock-expandLink{ z-index: 1; } .overlay{ background: @xf-contentBg; } .blockMessage--iconic::before{ top: 50%; transform: translateY(-50%); } .menu.menu--wide{ max-width: ~"calc(100wv - 6px)"; } label.iconic > input + i::before, label.iconic > input + i:hover::before, label.iconic:hover > input + i::before{ color: inherit; } .p-nav-opposite{ .m-clearFix(); } .pika-prev, .pika-next{ color: inherit; } div.ribbonBox .ribbon-wrapper{ z-index: 1; } .structItem > script{ display: none; } .focus-m-buttonColorVariation(@bgColor; @textColor){ .m-buttonBorderColorVariation(@bgColor); &:hover, &:active, &:focus{ background-color: xf-intensify(@bgColor, 5%); } } .focus-m-buttonBlockColorVariationSimple(@color){ .focus-m-buttonBorderColorVariation(@color); &:not(.button--provider){ &:hover, &:focus, &:active{ background-color: xf-intensify(@color, 5%); } } } .focus-m-buttonBorderColorVariation(@borderColor){ border-color: xf-intensify(@borderColor, 9%); } .button, a.button{ .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent)); &.button--primary{ .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent)); } &.button--cta{ .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent)); } &.button--link{ .focus-m-buttonBorderColorVariation(@xf-borderColor); color: xf-intensify(@xf-borderColorHeavy, 50%); &:hover, &:active, &:focus{ background: xf-intensify(@xf-contentBg, 5%); } } &.is-disabled{ .focus-m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent)); } } .toggleButton{ > span{ .focus-m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent)); } > input:checked + span{ .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent)); } } .block-header .button.button--link{ background: fade(@xf-blockHeader--color, 10%); color: inherit; border-color: fade(@xf-blockHeader--color, 40%); &:hover{ background: fade(@xf-blockHeader--color, 20%); } } :root{ @media (max-width: @xf-responsiveNarrow){ --responsive: 'max-width responsiveNarrow'; } @media (min-width: (@xf-responsiveNarrow + 1px)) and (max-width: @xf-responsiveMedium){ --responsive: 'max-width responsiveMedium'; } @media (min-width: (@xf-responsiveMedium + 1px)) and (max-width: @xf-responsiveWide){ --responsive: 'max-width responsiveWide'; } @media (min-width: (@xf-responsiveWide + 1px)){ --responsive: 'Larger than responsiveWide'; } --xenfocus-version: '2.2.13'; --xenfocus-date: 'May 21, 2023'; }]]></template> <template title="xenfocus_branding" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<span class='xenfocus:branding'> <a href='https://xenfocus.com' target='_blank' rel="noreferrer">XenForo theme</a> by xenfocus </span>]]></template> <template title="xenfocus_countdown" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_countdownEnable')"> <div class='focus-timer'> <xf:if is="property('xenfocus_countdownTitle')"><h3>{{property('xenfocus_countdownTitle')}}</h3></xf:if> <xf:if is="property('xenfocus_countdownDesc')"><div class='focus-timer-desc'>{{property('xenfocus_countdownDesc')}}</div></xf:if> <xf:if is="property('xenfocus_countdownDone')"><div class='focus-timer-desc-done'>{{property('xenfocus_countdownDone')}}</div></xf:if> <div class='focus-timer-numbers'></div> </div> </xf:if>]]></template> <template title="xenfocus_countdown_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_countdownEnable')"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script> <xf:if is="property('xenfocus_countdownZone')"> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script> </xf:if> <script type='text/javascript'>
	$(document).ready(function(){
		
		<xf:if is="property('xenfocus_countdownZone')">
			var focusTimer = moment.tz("{{property('xenfocus_countdownDate')}}", "{{property('xenfocus_countdownZone')}}");
			var focusDate = focusTimer.toDate();
		<xf:else />
			var focusDate = "{{property('xenfocus_countdownDate')}}";
		</xf:if>

		$('.focus-timer-numbers').countdown(focusDate)
		.on('update.countdown', function(event) {
			var format = '%H:%M:%S';
			if(event.offset.totalDays > 0) {
				format = '%-d <span data-countdown-text="day%!d and"></span> ' + format;
			}
			if(event.offset.weeks > 0) {
				format = '%-w <span data-countdown-text="week%!w,"></span> ' + format;
			}
			$(this).html(event.strftime(format));
			$('.focus-timer').addClass('focus-timer-counting');
		})
		.on('finish.countdown', function(event) {
			$('.focus-timer').addClass('focus-timer-done');
		});

	});
	</script> </xf:if>]]></template> <template title="xenfocus_editor" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:set var="$toggle-icon"><div class='focus-editor-toggle'><i class='focus-toggle'><i></i></i></div></xf:set> <xf:if is="property('xenfocus_themeEditor')"> <div class='focus-editor-wrap'> <div class='focus-editor-overlay' data-xenfocus-editor></div> <div class='focus-editor'> <div class='focus-editor-scroll'> <xf:if is="property('xenfocus_picker')"> <div> <div class='focus-editor__title' data-focus-text='Background Picker'></div> <div class="focus-picker"> <xf:if is="property('xenfocus_bg1_enable')"><span data-focus-bg='1'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg2_enable')"><span data-focus-bg='2'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg3_enable')"><span data-focus-bg='3'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg4_enable')"><span data-focus-bg='4'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg5_enable')"><span data-focus-bg='5'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg6_enable')"><span data-focus-bg='6'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg7_enable')"><span data-focus-bg='7'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg8_enable')"><span data-focus-bg='8'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg9_enable')"><span data-focus-bg='9'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg10_enable')"><span data-focus-bg='10'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg11_enable')"><span data-focus-bg='11'><i></i></span></xf:if> <xf:if is="property('xenfocus_bg12_enable')"><span data-focus-bg='12'><i></i></span></xf:if> </div> </div> </xf:if> <xf:include template="xenfocus_editor_hook_1" /> <div> <div class='focus-editor__title' data-focus-text='Customize layout'></div> <xf:if is="property('xenfocus_mnb_toggle')"> <div class='focus-editor-panel' data-setting='focus-mobile-navigation-bar' data-setting-default='on'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Mobile navigation bar?' data-setting-desc='Display a navigation bar at the bottom of the site when using a mobile device?'></div> </div> </xf:if> <xf:if is="property('xenfocus_widthToggle')"> <div class='focus-editor-panel' data-setting='focus-fluid' data-setting-default='<xf:if is="property('xenfocus_widthEnable')">on<xf:else />off</xf:if>'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Fluid width?' data-setting-desc='Enabling this will increase the width of the site so it occupies the width of your browser. Useful for larger screens.'></div> </div> </xf:if> <xf:if is="property('xenfocus_gridToggle')"> <div class='focus-editor-panel' data-setting='focus-grid' data-setting-default='<xf:if is="property('xenfocus_gridEnable')">on<xf:else />off</xf:if>'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Grid layout?' data-setting-desc='If enabled, the forums will be displayed as a grid instead of a table.'></div> </div> </xf:if> <xf:if is="property('xenfocus_stickyToggle')"> <div class='focus-editor-panel' data-setting='focus-sidebar-sticky' data-setting-default='<xf:if is="property('xenfocus_stickyBlocks')">on<xf:else />off</xf:if>'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Sticky sidebar?' data-setting-desc='If enabled, the sidebar will stick to the top of the screen for easy access.'></div> </div> </xf:if> <xf:if is="property('xenfocus_sidebarFlipToggle')"> <div class='focus-editor-panel' data-setting='focus-sidebar-flip' data-setting-default='<xf:if is="property('xenfocus_sidebarFlip')">on<xf:else />off</xf:if>'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Flip sidebar?' data-setting-desc='Flip the sidebar between the left and right sides.'></div> </div> </xf:if> <xf:if is="property('xenfocus_eventOverlay') === 'snow'"> <div class='focus-editor-panel' data-setting='focus-snow' data-setting-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Enable snow effect?' data-setting-desc='If enabled, animated snow will fall across your browser.'></div> </div> </xf:if> <xf:if is="property('xenfocus_eventOverlay') === 'confetti'"> <div class='focus-editor-panel' data-setting='focus-confetti' data-setting-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Enable confetti?' data-setting-desc='If enabled, animated confetti will fall across your browser.'></div> </div> </xf:if> <xf:if is="property('xenfocus_countdownEnable') AND property('xenfocus_countdownToggle')"> <div class='focus-editor-panel' data-setting='focus-countdown' data-setting-default='on'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Show countdown?' data-setting-desc='If enabled, a countdown will be visible at the top of your page.'></div> </div> </xf:if> <xf:include template="xenfocus_editor_hook_2" /> </div> </div> <div class='focus-editor-save'> <button data-xenfocus-editor data-focus-text='Save'></button> </div> </div> </div> </xf:if>]]></template> <template title="xenfocus_editor_hook_1" type="public" addon_id="" version_id="0" version_string=""><![CDATA[]]></template> <template title="xenfocus_editor_hook_2" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_parallaxToggle')"> <div class='focus-editor-panel' data-setting='focus-dimension-parallax' data-setting-default='on'> {$toggle-icon|raw} <div class='focus-editor-text' data-setting-title='Enable parallax effect?' data-setting-desc='If enabled, a parallax effect will be applied to the header.'></div> </div> </xf:if>]]></template> <template title="xenfocus_event_logo" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_holiday') != 'none'"> <span class='focus-logo--holiday'> <xf:if is="property('xenfocus_holiday') === 'valentines'"> <i class="fas fa-heart" aria-hidden="true"></i> <xf:elseif is="property('xenfocus_holiday') === 'halloween'" /> <img src="{{ base_url('styles/xenfocus/images/holidays/halloween-ghost.png') }}" alt='' /> </xf:if> </span> </xf:if>]]></template> <template title="xenfocus_event_overlay" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_eventOverlay') === 'snow'"> <script>
$(document).ready(function(){
	
	$("body").append("<div class='xenfocus-snow'><div class='xenfocus-snow-panel xenfocus-snow-panel-1'><i class='f-sF'></i></div><div class='xenfocus-snow-panel xenfocus-snow-panel-2'><i class='f-sF'></i></div><div class='xenfocus-snow-panel xenfocus-snow-panel-3'><i class='f-sF'></i></div></div>");
	
	$(".xenfocus-snow-panel").each(function(){
		var snowlist = $(this);
		for ( i = 0; i < 25;i++){
		    snowlist.find('.f-sF:first').clone().appendTo(snowlist);
		}
	});
	
});
</script> </xf:if> <xf:if is="property('xenfocus_eventOverlay') === 'confetti'"> <script>
$(document).ready(function(){
	
	$("body").append("<div class='xenfocus-confetti'><div class='xenfocus-confetti-panel xenfocus-confetti-panel-1'><i class='f-con'></i></div><div class='xenfocus-confetti-panel xenfocus-confetti-panel-2'><i class='f-con'></i></div><div class='xenfocus-confetti-panel xenfocus-confetti-panel-3'><i class='f-con'></i></div></div>");
	
	$(".xenfocus-confetti-panel").each(function(){
		var confettilist = $(this);
		for ( i = 0; i < 17;i++){
		    confettilist.find('.f-con:first').clone().appendTo(confettilist);
		}
	});
	
});
</script> </xf:if>]]></template> <template title="xenfocus_extra_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<script type='text/javascript' src="{{ base_url('styles/xenfocus/dimension/js/basicScroll.min.js') }}"></script> <script>
const scrollHeader = basicScroll.create({
	from: '0',
	to: '{{ property('xenfocus_logoHeight') }}px',
	props: {
		'--translateHeader': {
			from: 0,
			to: {{ property('xenfocus_logoHeight') }}*0.5
		}
	}
})
scrollHeader.start();
</script>]]></template> <template title="xenfocus_footer" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_footerEnable')"> <div class='focus-footer'> <div class='focus-width focus-footer__align'> <xf:if is="property('xenfocus_footer1')"><div class='focus-footer-col focus-footer-col--1'>{{property('xenfocus_footer1')}}</div></xf:if> <xf:if is="property('xenfocus_footer2')"><div class='focus-footer-col focus-footer-col--2'>{{property('xenfocus_footer2')}}</div></xf:if> <xf:if is="property('xenfocus_footer3')"><div class='focus-footer-col focus-footer-col--3'>{{property('xenfocus_footer3')}}</div></xf:if> <xf:if is="property('xenfocus_footer4')"><div class='focus-footer-col focus-footer-col--4'>{{property('xenfocus_footer4')}}</div></xf:if> </div> </div> </xf:if>]]></template> <template title="xenfocus_guest" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="!$xf.visitor.user_id"> <xf:if is="property('xenfocus_guestEnable')"> <div class='focus-guest focus-guest-{{property("xenfocus_guestLayout")}}'> <div class='focus-guest-header'>{$xf.options.boardTitle}</div> <div class='focus-guest-align'> <div class='focus-guest-content'>{{property('xenfocus_guestContent')}}</div> <ul class='focus-guest-buttons'> <li><a href="{{ link('login') }}" rel="nofollow" data-xf-click="overlay"><span>{{ phrase('log_in') }}</span></a></li> <xf:if is="$xf.options.registrationSetup.enabled"><li><a href="{{ link('register') }}" rel="nofollow" data-xf-click="overlay"><span>{{ phrase('register') }}</span></a></li></xf:if> </ul> </div> </div> </xf:if> </xf:if>]]></template> <template title="xenfocus_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_searchMenu') OR property('xenfocus_themeEditor')"><script>
$(document).ready(function(){
	var html = $('#XF');
	
	<xf:if is="property('xenfocus_searchMenu')">
				$('.focus-search-advanced').on('click', function(){ html.toggleClass('focus-search-menu-active'); });
		$('.focus-search-flex input').on('focus', function(){ html.addClass('focus-search-menu-active'); });
		$(document).on('click', function() { html.removeClass('focus-search-menu-active'); });
		$('.focus-wrap-search').on('click', function(event){ event.stopPropagation(); });
	</xf:if>

	<xf:if is="property('xenfocus_themeEditor')">
		$("[data-xenfocus-editor]").hover(function() {
			html.addClass('focus-picker--loaded');
		});
				$("[data-xenfocus-editor]").on('click', function(event){
			html.toggleClass('focus-editor-open').addClass('focus-picker--loaded');
			event.preventDefault();
		});
				$(document).keyup(function(e) {
			if (e.keyCode === 27){
				html.removeClass('focus-editor-open');
			}
		});
		<xf:if is="property('xenfocus_picker')">
			$(".focus-picker span").on('click', function(){
				var styleid = html.attr('data-style-id');
				var backgroundClass = $(this).attr("data-focus-bg");
				html.attr('data-focus-bg', '' + backgroundClass + '');
				setCookie('xenfocusBackground-' + styleid + '', '' + backgroundClass + '', 365);
			});
		</xf:if>
		$('.focus-editor-panel').each(function(){
						var settingName = $(this).attr('data-setting');
			var settingDefault = $(this).attr('data-setting-default');
			var settingCookie = getCookie(settingName);
			if(settingCookie === 'on'){
				$(this).attr('data-setting-status','on');
				console.log(settingName + ': on (cookie)');
			} else if(settingCookie === 'off') {
				$(this).attr('data-setting-status','off');
				console.log(settingName + ': off (cookie)');
			} else {
				if(settingDefault === 'on'){
					$(this).attr('data-setting-status','on');
					console.log(settingName + ': on (cookie)');
				} else{
					$(this).attr('data-setting-status','off');
					console.log(settingName + ': off (cookie)');
				}
			}
		});
				$('.focus-editor-panel').on('click', function(){
			var settingName = $(this).attr('data-setting');
			var settingStatus = $(this).attr('data-setting-status');
			if(settingStatus === 'on'){
				html.removeClass(settingName);
				setCookie(settingName, 'off', 365);
				$(this).attr('data-setting-status', 'off');
			} else {
				html.addClass(settingName);
				setCookie(settingName, 'on', 365);
				$(this).attr('data-setting-status', 'on');
			}
		});
	</xf:if>
});
	
<xf:if is="property('xenfocus_mobile_navigation_bar') AND property('xenfocus_mnb_scroll')">
function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};
var lastScrollTop = 0;
function checkScrollDirection() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
   if ((st < lastScrollTop) || (st <= 0)){
	xfhtml.classList.remove('mobile-navigation-bar--hidden');
   } else {
     xfhtml.classList.add('mobile-navigation-bar--hidden');
   }
   lastScrollTop = st;
}
window.addEventListener("scroll", throttle(checkScrollDirection, 500));
</xf:if>
</script></xf:if>]]></template> <template title="xenfocus_mobile_navigation_bar" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_mobile_navigation_bar')"> <div class='mobile-navigation-bar'> <div class='focus-width'> <ul class='mobile-navigation-bar__list'> <li class='mobile-navigation-bar--forums'> <a href="{{ link('forums') }}"> <span class='mobile-navigation-bar__icon'><xf:fa icon="fa-comments" /></span> <span class='mobile-navigation-bar__text'>{{ phrase('forums') }}</span> </a> </li> <li class='mobile-navigation-bar--whatsnew'> <a href="{{ link('whats-new') }}"> <span class='mobile-navigation-bar__icon'><xf:fa icon="fa-file-alt" /></span> <span class='mobile-navigation-bar__text'>{{ phrase('whats_new') }}</span> </a> </li> <xf:if is="$xf.visitor.user_id"> <xf:if is="$xf.visitor.canCreateThread()"> <li class='mobile-navigation-bar--postthread'> <a href="{{ link('forums/create-thread') }}" data-xf-click="overlay"> <span class='mobile-navigation-bar__icon'><xf:fa icon="fa-edit" /></span> <span class='mobile-navigation-bar__text'>{{ phrase('post_thread') }}</span> </a> </li> </xf:if> <li class='mobile-navigation-bar--profile' style='display:none;'> <a href="{{ link('members', $xf.visitor) }}"> <span class='mobile-navigation-bar__icon'><xf:fa icon="fa-user-circle" /></span> <span class='mobile-navigation-bar__text'>{{ phrase('profile') }}</span> </a> </li> <xf:else /> <li class='mobile-navigation-bar--login'> <a href="{{ link('login') }}" rel="nofollow" data-xf-click="overlay" data-follow-redirects="on"> <span class='mobile-navigation-bar__icon'><xf:fa icon="fa-sign-in-alt" /></span> <span class='mobile-navigation-bar__text'>{{ phrase('log_in') }}</span> </a> </li> <xf:if is="$xf.options.registrationSetup.enabled"> <li class='mobile-navigation-bar--register'> <a href="{{ link('register') }}" rel="nofollow" data-xf-click="overlay" data-follow-redirects="on"> <span class='mobile-navigation-bar__icon'><xf:fa icon="fa-user-plus" /></span> <span class='mobile-navigation-bar__text'>{{ phrase('register') }}</span> </a> </li> </xf:if> </xf:if> <xf:if is="$xf.visitor.canSearch()"> <li class='mobile-navigation-bar--search'> <a href="{{ link('search') }}"> <span class='mobile-navigation-bar__icon'><xf:fa icon="fa-search" /></span> <span class='mobile-navigation-bar__text'>{{ phrase('search') }}</span> </a> </li> </xf:if> </ul> </div> </div> </xf:if>]]></template> <template title="xenfocus_onload_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<script type='text/javascript'>
var xfhtml = document.getElementById('XF');
function addClass(el, className) { if (el.classList) el.classList.add(className); else if (!hasClass(el, className)) el.className += ' ' + className; }
function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return v ? v[2] : null; }
function setCookie(name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); }
function deleteCookie(name) { setCookie(name, '', -1); }
function applySetting(settingName, settingOn, allowToggle){
	<xf:if is="property('xenfocus_themeEditor')">
			if(allowToggle === 1){	
			cookie = getCookie(settingName);
			if( (cookie === 'on') || (!cookie && (settingOn === 1)) ){
				addClass(xfhtml, settingName);
			}
		} else if(settingOn === 1){
			addClass(xfhtml, settingName);
		}
	<xf:else />
			if(settingOn === 1){
			addClass(xfhtml, settingName);
		}
	</xf:if>
}
<xf:if is="property('xenfocus_mnb_toggle')">
applySetting('focus-mobile-navigation-bar', 1, 1);
</xf:if>
<xf:if is="property('xenfocus_widthEnable') OR property('xenfocus_widthToggle')">
applySetting('focus-fluid', {{ property('xenfocus_widthEnable') }}, {{ property('xenfocus_widthToggle') }});
</xf:if>
<xf:if is="property('xenfocus_gridEnable') OR property('xenfocus_gridToggle')">
applySetting('focus-grid', {{ property('xenfocus_gridEnable') }}, {{ property('xenfocus_gridToggle') }});
</xf:if>
<xf:if is="property('xenfocus_stickyBlocks') OR property('xenfocus_stickyToggle')">
applySetting('focus-sidebar-sticky', {{ property('xenfocus_stickyBlocks') }}, {{ property('xenfocus_stickyToggle') }});
</xf:if>
<xf:if is="property('xenfocus_sidebarFlip') OR property('xenfocus_sidebarFlipToggle')">
applySetting('focus-sidebar-flip', {{ property('xenfocus_sidebarFlip') }}, {{ property('xenfocus_sidebarFlipToggle') }});
</xf:if>
<xf:if is="property('xenfocus_eventOverlay') === 'snow'">
applySetting('focus-snow', {{ property('xenfocus_eventOverlayDefault') }}, 1);
</xf:if>
<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
applySetting('focus-confetti', {{ property('xenfocus_eventOverlayDefault') }}, 1);
</xf:if>
<xf:if is="property('xenfocus_countdownEnable')">
applySetting('focus-countdown', 1, {{ property('xenfocus_countdownToggle') }});
</xf:if>
<xf:if is="property('xenfocus_picker')">
	var backgroundCookie = getCookie('xenfocusBackground-{$xf.style.style_id}');
	if(backgroundCookie){ xfhtml.setAttribute('data-focus-bg', '' + backgroundCookie + '');	} else { xfhtml.setAttribute('data-focus-bg', '{{ property("xenfocus_pickerDefault") }}'); }
<xf:else />
	xfhtml.setAttribute('data-focus-bg', '{{ property("xenfocus_pickerDefault") }}');
</xf:if>
</script> <xf:include template="xenfocus_onload_js_extra" />]]></template> <template title="xenfocus_onload_js_extra" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<script>
<xf:if is="property('xenfocus_parallaxToggle')">
applySetting('focus-dimension-parallax', 1, {{ property('xenfocus_parallaxToggle') }});
</xf:if>
</script>]]></template> <template title="xenfocus_social" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<ul class='xenfocus-social'> {{ property('xenfocus_social') }} </ul>]]></template> <template title="xenfocus_theme.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[@body-padding-bottom: 10px; @logo-slogan-margin: 1em; @sticky-top: @xf-xenfocus_navHeight + 16px; @nodeHover-padding: 10px; @reset-grid-wrapper: true; <xf:if is="property('styleType') === 'dark'"> @navigation-arrow-gradient: @xf-paletteColor1; @mobile-navigation-background: @xf-paletteColor2; </xf:if> <xf:if is="property('xenfocus_bg1_hex')"> html[data-focus-bg='1']{ <xf:if is="property('styleType') === 'light'">&,</xf:if> &:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent .node::before, & .structItemContainer-group .structItem::before{ background-color: @xf-xenfocus_bg1_hex; } } </xf:if> <xf:if is="property('xenfocus_bg2_hex')"> html[data-focus-bg='2']{ <xf:if is="property('styleType') === 'light'">&,</xf:if> &:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent .node::before, & .structItemContainer-group .structItem::before{ background-color: @xf-xenfocus_bg2_hex; } } </xf:if> <xf:if is="property('xenfocus_bg3_hex')"> html[data-focus-bg='3']{ <xf:if is="property('styleType') === 'light'">&,</xf:if> &:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent .node::before, & .structItemContainer-group .structItem::before{ background-color: @xf-xenfocus_bg3_hex; } } </xf:if> <xf:if is="property('xenfocus_bg4_hex')"> html[data-focus-bg='4']{ <xf:if is="property('styleType') === 'light'">&,</xf:if> &:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent .node::before, & .structItemContainer-group .structItem::before{ background-color: @xf-xenfocus_bg4_hex; } } </xf:if> <xf:if is="property('xenfocus_bg5_hex')"> html[data-focus-bg='5']{ <xf:if is="property('styleType') === 'light'">&,</xf:if> &:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent .node::before, & .structItemContainer-group .structItem::before{ background-color: @xf-xenfocus_bg5_hex; } } </xf:if> <xf:if is="property('xenfocus_bg6_hex')"> html[data-focus-bg='6']{ <xf:if is="property('styleType') === 'light'">&,</xf:if> &:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent .node::before, & .structItemContainer-group .structItem::before{ background-color: @xf-xenfocus_bg6_hex; } } </xf:if> <xf:if is="property('styleType') === 'light'"> body{ background: rgba(255,255,255,0.82); } </xf:if> :root{ --translateHeader: 0; } @supports ( transform: translateY(calc(var(--translateHeader) * 1px)) ) { .focus-dimension-parallax .dimension-header-image, .focus-dimension-parallax .dimension-nav-blur{ transform: ~"translateY(calc(var(--translateHeader) * 1px))"; will-change: transform; } } html[data-focus-bg='1']{ .dimension-header-image-wrap, .block-header, .dimension-nav-blur{ .focus-background-1(); } } html[data-focus-bg='2']{ .dimension-header-image-wrap, .block-header, .dimension-nav-blur{ .focus-background-2(); } } html[data-focus-bg='3']{ .dimension-header-image-wrap, .block-header, .dimension-nav-blur{ .focus-background-3(); } } html[data-focus-bg='4']{ .dimension-header-image-wrap, .block-header, .dimension-nav-blur{ .focus-background-4(); } } html[data-focus-bg='5']{ .dimension-header-image-wrap, .block-header, .dimension-nav-blur{ .focus-background-5(); } } html[data-focus-bg='6']{ .dimension-header-image-wrap, .block-header, .dimension-nav-blur{ .focus-background-6(); } } @dimension-header-height: 16px + @xf-xenfocus_logoHeight + @xf-xenfocus_navHeight; .dimension-header{ position: relative; box-shadow: rgba(0,0,0,0.35) 0px 1px 10px; } <xf:if is="property('publicNavSticky') == 'primary' OR property('publicNavSticky') == 'all'"> @supports ( (position:-webkit-sticky) or (position:sticky) ) { .dimension-header{ position: -webkit-sticky; position: sticky; top: @xf-xenfocus_logoHeight*-1px; z-index: 100; @media (max-width: @xf-responsiveMedium){ top: @xf-xenfocus_logoHeightMobile*-1px; } } } </xf:if> .dimension-header-image-wrap{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .dimension-header-image{ position: absolute; top: 0; right: -20px; left: -20px; height: @dimension-header-height; background: inherit; @media (max-width: @xf-responsiveMedium){ display: none; } } #header{ position: relative; } .p-header-logo a{ padding: 0 20px; } .dimension-nav-wrap{ position: relative; } .dimension-nav-image{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; transform: translate(0,0); @media (max-width: @xf-responsiveMedium){ display: none; } } .dimension-nav-blur{ position: absolute; left: -20px; right: -20px; top: @xf-xenfocus_logoHeight*-1px; height: @dimension-header-height; overflow: hidden; &::before { -webkit-filter: blur(8px); filter: blur(8px); content: ''; background: inherit; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } @supports ( (-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px)) ) { .dimension-nav-image{ display: none; } .dimension-nav-wrap, .p-header .focus-wrap-user{ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } } .p-nav(){ padding: 8px; } .p-nav{ position: relative; background: fade(@xf-publicNav--background-color, 20%); <xf:if is="property('styleType') === 'light'"> box-shadow: inset rgba(0,0,0,0.2) 0px -1px 0px, inset rgba(0,0,0,0.2) 0px 1px 0px; <xf:else /> box-shadow: inset rgba(255,255,255,0.1) 0px -1px 0px, inset rgba(255,255,255,0.1) 0px 1px 0px, rgba(0,0,0,0.3) 0px -1px 0px; </xf:if> @media (max-width: @xf-responsiveMedium){ background: fade(@xf-publicNav--background-color, 40%); } } #XF .p-nav-list{ li{ } .p-navEl{ border-radius: 3px; &.is-selected{ } &.is-menuOpen{ } } } .p-sectionLinks{ background: none; border: 0; margin-bottom: 10px; } .p-navgroup(){ box-shadow: 0px 1px 3px rgba(0,0,0,0.5) inset, 0px 1px 0px rgba(255,255,255,0.2), 0px 0px 0px 1px rgba(255,255,255,0.07), 0px 10px 10px rgba(0,0,0,0.2) inset; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .xenfocus_breadcrumb(){ } <xf:if is="property('styleType') === 'dark'"> .p-breadcrumbs::before{ border-width: 1px 0px 0px 0px; } </xf:if> .p-pageWrapper(){ } .focus-content(){ } @block-container-shift: true; .focus-block-container-shift(){ } .focus-block-header-shift(){ border-radius: @xf-blockBorderRadius; margin: 0; margin-bottom: 6px; } .focus-block-body-shift(){ } .focus-block-container(){ <xf:if is="property('styleType') === 'light'"> border-color: rgba(20,20,20,0.16); box-shadow: rgba(0,0,0,0.08) 0px 2px 2px, inset rgba(0,0,0,0.08) 0px -5px 20px; background-clip: padding-box; <xf:else /> border-color: rgba(255,255,255,0.03); border-top-color: rgba(255,255,255,0.16); box-shadow: rgba(0,0,0,0.4) 0px 2px 3px; </xf:if> } .focus-block-header(){ padding: 15px 13px; <xf:if is="property('styleType') === 'light'"> box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset fade(@xf-blockHeader--background-color, 50%) 0px 150px 0px; <xf:else /> box-shadow: inset rgba(255,255,255,0.3) 0px 1px 0px, inset rgba(200,200,200,0.4) 0px 1px 30px; border-width: 0px; </xf:if> margin: 5px 5px 0 5px; border-radius: @xf-blockBorderRadius; } .focus-block-body(){ } .focus-block-minor-header(){ padding: 9px; border-bottom-style: dashed; } .p-body-sidebar .block-row:not(:last-child){ border-bottom: 1px dashed fade(@xf-textColor, 10%); } <xf:if is="property('styleType') === 'dark'"> .p-footer{ border-top: 1px solid rgba(255,255,255,0.16); box-shadow: rgba(0,0,0,0.4) 0px 2px 3px; } </xf:if> .message-content a{ text-decoration: underline; }]]></template> </templates> <properties> <group group_name="urlforum" title="[Snus-Studio] Стиль был Установлен с Snus-Studio" description="https://vk.com/snus__studio" display_order="0" addon_id=""/> <group group_name="xenfocus_light_dark" title="Xenfocus: Light/Dark Mode" description="If you own both versions of Dimension, you can enable a dark/light toggle button." display_order="1" addon_id=""/> <group group_name="xenfocus_logo" title="Xenfocus: Logo and navigation" description="Customize the logo and navigation." display_order="2" addon_id=""/> <group group_name="xenfocus_themeEditor" title="Xenfocus: Customize Panel" description="The Customize Panel allows your visitors to enable and disable specific features throughout your theme." display_order="3" addon_id=""/> <group group_name="xenfocus_picker" title="Xenfocus: Background picker" description="Allow your members to choose their own background image from a predefined selection." display_order="4" addon_id=""/> <group group_name="xenfocus_user" title="Xenfocus: User panel" description="Adjust the colors and dimensions of the user panel (username, notifications, inbox, etc)" display_order="5" addon_id=""/> <group group_name="xenfocus_search" title="Xenfocus: Search bar" description="Adjust the dimensions and colors of the search bar" display_order="6" addon_id=""/> <group group_name="xenfocus_social" title="Xenfocus: Social icons" description="Enable and customize social links." display_order="7" addon_id=""/> <group group_name="xenfocus_wrapper" title="Xenfocus: Content wrapper" description="The wrapper wraps your content and can optionally have a background, border or box-shadow." display_order="10" addon_id=""/> <group group_name="xenfocus_breadcrumb" title="Xenfocus: Breadcrumb navigation" description="Change the colors and style of the breadcrumb bar." display_order="12" addon_id=""/> <group group_name="xenfocus_guest" title="Xenfocus: Guest message" description="Display a message to your guests, prompting them to sign in or register." display_order="15" addon_id=""/> <group group_name="xenfocus_countdown" title="Xenfocus: Countdown" description="Configure a countdown timer for local or global events, such as a sporting event or New Years." display_order="16" addon_id=""/> <group group_name="xenfocus_grid" title="Xenfocus: Grid layout" description="Enable/disable the grid layout and customize its appearance." display_order="20" addon_id=""/> <group group_name="xenfocus_nodeIcons" title="Xenfocus: Node icons" description="Change the size, FontAwesome icon and colors of your node icons." display_order="35" addon_id=""/> <group group_name="xenfocus_mobile_navigation_bar" title="Xenfocus: Mobile navigation bar" description="The mobile navigation bar sits at the bottom of your site, providing easy access to common navigation links." display_order="37" addon_id=""/> <group group_name="xenfocus_footer" title="Xenfocus: Mega footer" description="The mega footer can contain up to 4 columns and is placed at the bottom of your site." display_order="40" addon_id=""/> <group group_name="xenfocus_holidays" title="Xenfocus: Holidays and Events" description="Enable holiday effects, such as animated snow for Christmas" display_order="50" addon_id=""/> <group group_name="xenfocus_other" title="Xenfocus: Miscellaneous" description="Customize minor areas of the theme." display_order="60" addon_id=""/> <property property_name="bbCodeBlock" group_name="bbCode" title="BB code blocks" description="All BB code blocks within messages make use of these styling rules" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,border_radius,extra" addon_id="XF"> <value>{ "color": "@xf-textColorDimmed", "background-color": "@xf-contentAltBg", "border-color": "fade(@xf-textColor, 35%)", "border-radius": "@xf-blockBorderRadius", "border-left-width": "@xf-borderSizeFeature", "border-left-color": "@xf-textColorDimmed", "extra": "padding: 10px;" }</value> </property> <property property_name="bbCodeBlockTitle" group_name="bbCode" title="BB code blocks - title" description="Styles the title section of BB code blocks within messages" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColorDimmed", "font-weight": "@xf-fontWeightHeavy", "background-color": "transparent" }</value> </property> <property property_name="blockBorder" group_name="block" title="Block border framework" description="Virtually all blocks have their borders styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="border,extra" addon_id="XF"> <value>{ "border-width": "@xf-borderSize", "border-color": "@xf-borderColor" }</value> </property> <property property_name="blockFilterBar" group_name="block" title="Block filter bar" description="When the content of a block can be filtered, the controls to do so are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20800" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColorEmphasized", "background-color": "@xf-contentHighlightBg", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "xf-intensify(@xf-blockFilterBar--background-color, 4%)" }</value> </property> <property property_name="blockFooter" group_name="block" title="Block footer" description="When information needs to be conveyed in a footer element for a block, its style is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="21200" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmaller", "color": "@xf-textColorDimmed", "background-color": "@xf-contentAltBg", "border-top-width": "@xf-borderSize", "border-top-color": "@xf-borderColorLight" }</value> </property> <property property_name="blockHeader" group_name="block" title="Block header" description="Blocks often have title bars at their tops, which are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeLarge", "color": "#fff", "font-weight": "@xf-fontWeightHeavy", "background-color": "rgb(30, 30, 30)", "border-width": "@xf-borderSize", "border-color": "rgba(255,255,255,0.1)" }</value> </property> <property property_name="blockLinkSelected" group_name="misc" title="Block link - selected" description="Styling for block-type links when in their selected state" property_type="css" value_type="" depends_on="" value_group="" display_order="21000" css_components="text,background,border_width_simple,border_color_simple,extra" addon_id="XF"> <value>{ "font-weight": "@xf-fontWeightHeavy", "background-color": "fade(@xf-linkHoverColor, 8%)", "border-width": "@xf-borderSizeFeature", "border-color": "currentcolor" }</value> </property> <property property_name="blockMinorHeader" group_name="block" title="Block minor header" description="Sub-headings in blocks use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "inherit", "color": "@xf-textColor", "font-weight": "@xf-fontWeightHeavy", "border-bottom-width": "1px", "border-bottom-color": "fade(@xf-blockMinorHeader--color, 10%)" }</value> </property> <property property_name="blockPaddingV" group_name="block" title="Block padding vertical" description="The vertical space between a block's content and its edges" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="200" addon_id="XF"> <value>"@xf-paddingLarge"</value> </property> <property property_name="buttonBase" group_name="button" title="Button base" description="Defines the styling for the basic elements that are common to all text-based buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,border_radius,padding,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmall", "border-radius": "@xf-borderRadiusMedium", "padding-top": "7px", "padding-right": "10px", "padding-bottom": "7px", "padding-left": "10px", "extra": "text-align: center;" }</value> </property> <property property_name="buttonDefault" group_name="button" title="Button - default" description="Most buttons use this styling, except for primary form submit buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF"> <value>{ "color": "#fff", "background-color": "@xf-paletteColor2" }</value> </property> <property property_name="buttonPrimary" group_name="button" title="Button - primary" description="These rules are used mostly for the main submit button for forms" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF"> <value>{ "color": "contrast(@xf-paletteAccent2)", "background-color": "@xf-paletteAccent2", "extra": "min-width: 80px;" }</value> </property> <property property_name="faded_post_meta" group_name="xenfocus_other" title="Faded date and moderation links?" description="If enabled, the post date and moderation links (&quot;Edit&quot;, &quot;Delete&quot;, &quot;Report&quot;, etc) will be faded in opacity until they are hovered over." property_type="value" value_type="boolean" depends_on="" value_group="TopicLayout" display_order="96" addon_id=""> <value>1</value> </property> <property property_name="focus_post_minimal" group_name="xenfocus_other" title="Minimal user panel?" description="If enabled, the background-color and border will be removed from the user panel, resulting in a simplified design." property_type="value" value_type="boolean" depends_on="" value_group="TopicLayout" display_order="91" addon_id=""> <value>1</value> </property> <property property_name="fontFamilyBody" group_name="fonts" title="Body Text Font" description="This font is used for the text of messages etc." property_type="value" value_type="string" depends_on="" value_group="font" display_order="200" addon_id="XF"> <value>"BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif"</value> </property> <property property_name="fontFamilyUi" group_name="fonts" title="User Interface Font" description="The font list for your main text" property_type="value" value_type="string" depends_on="" value_group="font" display_order="100" addon_id="XF"> <value>"BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif"</value> </property> <property property_name="fontSizeLarge" group_name="fonts" title="Large font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1400" addon_id="XF"> <value>"14px"</value> </property> <property property_name="fontSizeLarger" group_name="fonts" title="Larger font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1500" addon_id="XF"> <value>"18px"</value> </property> <property property_name="fontSizeLargest" group_name="fonts" title="Largest font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1600" addon_id="XF"> <value>"22px"</value> </property> <property property_name="fontSizeNormal" group_name="fonts" title="Normal font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1000" addon_id="XF"> <value>"13px"</value> </property> <property property_name="fontSizeSmall" group_name="fonts" title="Small font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1100" addon_id="XF"> <value>"12px"</value> </property> <property property_name="input" group_name="input" title="Form input" description="Controls the style of most text-input boxes" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,border_radius,padding,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeNormal", "color": "@xf-textColor", "background-color": "@xf-contentAltBg", "border-width": "@xf-borderSize", "border-color": "@xf-borderColorHeavy", "border-radius": "@xf-borderRadiusMedium", "border-bottom-color": "@xf-borderColorLight", "padding": "@xf-paddingMedium" }</value> </property> <property property_name="inputDisabled" group_name="input" title="Form input - disabled" description="When text boxes are disabled, these rules are applied" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF"> <value>{ "color": "@xf-textColorMuted", "background-color": "xf-intensify(@xf-contentAltBg, 3%)" }</value> </property> <property property_name="inputFocus" group_name="input" title="Form input - focused" description="These rules are applied to text boxes when they are selected for input" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF"> <value>{ "background-color": "lighten(@xf-contentAltBg, 3%)" }</value> </property> <property property_name="lineHeightDefault" group_name="fonts" title="Line height" description="This value controls the amount of spacing between lines of text" property_type="value" value_type="number" depends_on="" value_group="spacing" display_order="3000" addon_id="XF"> <value_parameters>step=0.1 max=5</value_parameters> <value>"1.6"</value> </property> <property property_name="memberHeader" group_name="member" title="Member profile header" description="The member profile page's content header is styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF"> <value>{ "background-color": "@xf-contentAltBg", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "@xf-borderColorLight" }</value> </property> <property property_name="memberTooltipHeader" group_name="member" title="Member tooltip header" description="The member tooltip, which appears when hovering over user names, is styled with these controls" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF"> <value>{ "background-color": "@xf-contentAltBg", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "@xf-borderColorLight" }</value> </property> <property property_name="menuFooter" group_name="menu" title="Menu footer" description="When a popup menu has a bottom, footer element, it will use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20600" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmaller", "color": "@xf-textColorDimmed", "background-color": "@xf-contentAltBg", "border-top-width": "@xf-borderSize", "border-top-color": "@xf-borderColorLight" }</value> </property> <property property_name="menuHeader" group_name="menu" title="Menu header" description="Most menus identify themselves with a header just underneath their top border" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeLarge", "color": "@xf-textColor", "background-color": "@xf-contentAltBg", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "@xf-borderColorLight" }</value> </property> <property property_name="menuLinkRowSelected" group_name="menu" title="Menu link row - selected" description="Styling for link rows in menus, when selected or hovered" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,extra" addon_id="XF"> <value>{ "color": "@xf-linkHoverColor", "text-decoration": "none", "background-color": "fade(@xf-borderColorFeature, 10%)" }</value> </property> <property property_name="messageSignature" group_name="message" title="Message signature" description="Any rules used to apply styling to users' signatures in their messages are defined here" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,padding,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmaller", "color": "@xf-textColorMuted", "border-top-width": "@xf-borderSize", "border-top-color": "@xf-borderColorLight", "padding-top": "12px" }</value> </property> <property property_name="metaThemeColor" group_name="misc" title="Chrome meta theme color" description="Chrome on Android allows the address bar color to be changed to fit your site colors. If you want this to be changed, enter a color here." property_type="value" value_type="color" depends_on="" value_group="" display_order="900" addon_id="XF"> <value>"@xf-paletteColor5"</value> </property> <property property_name="nodeListDescriptionDisplay" group_name="nodeList" title="Description display style" description="To save vertical space, it is possible to hide node descriptions until the node title is hovered, at which point they are displayed in a tooltip" property_type="value" value_type="radio" depends_on="" value_group="" display_order="400" addon_id="XF"> <value_parameters>tooltip={{ phrase('tooltip') }} inline={{ phrase('inline') }} none={{ phrase('none') }}</value_parameters> <value>"inline"</value> </property> <property property_name="nodeListSubDisplay" group_name="nodeList" title="Sub-forums display style" description="Choose the style in which sub-forums will be displayed within a particular node element, according to the amount of space you want them to occupy" property_type="value" value_type="radio" depends_on="" value_group="" display_order="300" addon_id="XF"> <value_parameters>menu={{ phrase('popup_menu') }} flat={{ phrase('listed_below_node') }} none={{ phrase('none') }}</value_parameters> <value>"flat"</value> </property> <property property_name="overlayHeader" group_name="overlay" title="Overlay header" description="Overlays use a header element to identify their contents, styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,padding,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeLargest", "color": "@xf-textColorEmphasized", "background-color": "@xf-contentHighlightBg", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "@xf-borderColorLight", "padding-top": "@xf-paddingMedium", "padding-right": "@xf-paddingLarge", "padding-bottom": "@xf-paddingMedium", "padding-left": "@xf-paddingLarge" }</value> </property> <property property_name="paddingLarge" group_name="borderSpacing" title="Large padding" description="" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="2200" addon_id="XF"> <value>"12px"</value> </property> <property property_name="pageBg" group_name="color" title="Page background color" description="The background of the page itself, on which all other content rests" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2100" addon_id="XF"> <value>"#1e1f21"</value> </property> <property property_name="pageWidthMax" group_name="page" title="Maximum page width" description="As the window is resized, it will continue to grow in width until this value, after which it will remain static" property_type="value" value_type="unit" depends_on="" value_group="page" display_order="100" addon_id="XF"> <value>"1400px"</value> </property> <property property_name="paletteAccent1" group_name="palette" title="Accent 1" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2000" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#eef8ed"</value> </property> <property property_name="paletteAccent2" group_name="palette" title="Accent 2" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2100" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#63ba5f"</value> </property> <property property_name="paletteAccent3" group_name="palette" title="Accent 3" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2200" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#49873f"</value> </property> <property property_name="paletteColor1" group_name="palette" title="Color 1" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1000" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#4f5766"</value> </property> <property property_name="paletteColor2" group_name="palette" title="Color 2" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1100" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#667084"</value> </property> <property property_name="paletteColor3" group_name="palette" title="Color 3" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1200" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#919cb0"</value> </property> <property property_name="paletteColor4" group_name="palette" title="Color 4" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1300" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#d6d9e0"</value> </property> <property property_name="paletteColor5" group_name="palette" title="Color 5" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1400" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#e1e8f8"</value> </property> <property property_name="paletteNeutral1" group_name="palette" title="Neutral 1" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3000" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#2d3037"</value> </property> <property property_name="paletteNeutral2" group_name="palette" title="Neutral 2" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3100" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#7c869d"</value> </property> <property property_name="paletteNeutral3" group_name="palette" title="Neutral 3" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3200" addon_id="XF"> <value_parameters>hidePalette=true</value_parameters> <value>"#dae1f3"</value> </property> <property property_name="publicFaviconUrl" group_name="basic" title="Favicon URL (32x32)" description="Path to the small logo that is associated with bookmarks pointing to your site. This is expected to be a 32x32 PNG image." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="400" addon_id="XF"> <value_parameters>asset=logo</value_parameters> <value>"data/assets/logo/1753185044065.png"</value> </property> <property property_name="publicFooter" group_name="footer" title="Footer" description="The footer is the primary element that sits below the main content on all public pages" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColor", "background-color": "@xf-contentBg", "extra": "border-radius: @xf-blockBorderRadius;" }</value> </property> <property property_name="publicFooterLink" group_name="footer" title="Footer links" description="Controls styling for individual links within the footer" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,extra" addon_id="XF"> <value>{ "color": "fadein(@xf-publicFooter--color, 50%)" }</value> </property> <property property_name="publicHeader" group_name="headerNav" title="Header/logo row" description="The header row contains your logo and sits at the top of every public page" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF"> <value>{ "color": "#fff" }</value> </property> <property property_name="publicHeaderAdjustColor" group_name="headerNav" title="Header adjustment color" description="The color of the header background is adjusted to be used as the background for the inbox and alerts area in the header" property_type="value" value_type="color" depends_on="" value_group="header" display_order="100" addon_id="XF"> <value>"rgba(0,0,0,0.1)"</value> </property> <property property_name="publicIconUrl" group_name="basic" title="Icon URL (192x192)" description="The path to your icon image. This should be a 192x192 image and usually a PNG." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="210" addon_id="XF"> <value_parameters>asset=logo</value_parameters> <value>"data/assets/logo/1753185044065.png"</value> </property> <property property_name="publicIconUrlLarge" group_name="basic" title="Icon URL (512x512)" description="The path to your large icon image. This should be a 512x512 image and usually a PNG." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="220" addon_id="XF"> <value_parameters>asset=logo</value_parameters> <value>"data/assets/logo/1753185044065.png"</value> </property> <property property_name="publicIconsMaskable" group_name="basic" title="Icons are maskable" description="If enabled, you are indicating that the icons above respect the &lt;a href=&quot;https://web.dev/maskable-icon/&quot; target=&quot;_blank&quot;&gt;minimum safe zone&lt;/a&gt; and can be cropped to the appropriate icon size for various devices." property_type="value" value_type="boolean" depends_on="" value_group="logo" display_order="230" addon_id="XF"> <value>1</value> </property> <property property_name="publicLogoUrl" group_name="basic" title="Logo URL" description="The web path from your site's XenForo installation directory to your logo image." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="100" addon_id="XF"> <value>"https://i.postimg.cc/YS0VC9KL/55-20250726010043.png"</value> </property> <property property_name="publicLogoUrl2x" group_name="basic" title="2x logo URL" description="The path to a double-resolution / retina version of your logo image" property_type="value" value_type="string" depends_on="" value_group="logo" display_order="200" addon_id="XF"> <value_parameters>asset=logo</value_parameters> <value>"data/assets/logo/1753185044065.png"</value> </property> <property property_name="publicMetadataLogoUrl" group_name="basic" title="Metadata logo URL" description="Path to the metadata / OpenGraph logo used by your site on social media" property_type="value" value_type="string" depends_on="" value_group="logo" display_order="300" addon_id="XF"> <value_parameters>asset=logo</value_parameters> <value>"data/assets/logo/1753185044065.png"</value> </property> <property property_name="publicNav" group_name="headerNav" title="Navigation row" description="The navigation row sits below the header and contains the primary site navigation tabs and menus" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF"> <value>{ "color": "rgb(255, 255, 255)", "background-color": "@xf-paletteColor5" }</value> </property> <property property_name="publicNavPaddingH" group_name="headerNav" title="Navigation padding horizontal" description="Defines the amount of padding applied horizontally to each main navigational tab in the header" property_type="value" value_type="unit" depends_on="" value_group="navPad" display_order="4100" addon_id="XF"> <value>"20px"</value> </property> <property property_name="publicNavSelected" group_name="headerNav" title="Navigation row - selected tab" description="Additional styling to apply to navigation tabs when they are selected" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border,border_radius,extra" addon_id="XF"> <value>{ "color": "@xf-publicNav--color", "background-color": "fade(@xf-publicNav--color, 20%)" }</value> </property> <property property_name="publicNavTab" group_name="headerNav" title="Navigation row - tab" description="Controls the styling of individual tab elements within the navigation row" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF"> <value>{ "color": "fade(@xf-publicNav--color, 70%)", "font-weight": "@xf-fontWeightHeavy", "text-decoration": "none" }</value> </property> <property property_name="publicNavTabHover" group_name="headerNav" title="Navigation row - hovered tab" description="Additional styling to apply to navigation tabs when the pointer hovers over them" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF"> <value>{ "color": "@xf-publicNav--color", "text-decoration": "none", "background-color": "fade(@xf-publicNav--color, 5%)" }</value> </property> <property property_name="publicPushBadgeUrl" group_name="basic" title="Push notification badge URL" description="If you provide the URL to a single color/alpha channel logo/icon here, this will be used in place of the browser's default icon." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="500" addon_id="XF"> <value_parameters>asset=logo</value_parameters> <value>"data/assets/logo/1753185044065.png"</value> </property> <property property_name="publicStaffBar" group_name="headerNav" title="Staff tools bar" description="Visible only to staff, the staff tools bar sits above the header and contains items such as reported content, the moderation queue..." property_type="css" value_type="" depends_on="" value_group="" display_order="20700" css_components="text,background,border,extra" addon_id="XF"> <value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColor", "background-color": "@xf-contentHighlightBg", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "xf-intensify(@xf-publicStaffBar--background-color, 4%)" }</value> </property> <property property_name="styleType" group_name="palette" title="Style type" description="This defines the general type of style in use based on whether the content is placed on a light or dark background. This may change how colors are selected in certain scenarios." property_type="value" value_type="radio" depends_on="" value_group="setup" display_order="100" addon_id="XF"> <value_parameters>light={{ phrase('light') }} dark={{ phrase('dark') }}</value_parameters> <value>"dark"</value> </property> <property property_name="xenfocus_bg1_attachment" group_name="xenfocus_picker" title="Background #1: Attachment" description="" property_type="value" value_type="select" depends_on="xenfocus_bg1_enable" value_group="Background_1" display_order="260" addon_id=""> <value_parameters>fixed=fixed scroll=scroll</value_parameters> <value>"scroll"</value> </property> <property property_name="xenfocus_bg1_enable" group_name="xenfocus_picker" title="Enable Background #1?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Background_1" display_order="205" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_bg1_hex" group_name="xenfocus_picker" title="Background #1: Color" description="The background-color for image 1" property_type="value" value_type="color" depends_on="xenfocus_bg1_enable" value_group="Background_1" display_order="210" addon_id=""> <value>"#8b6e6a"</value> </property> <property property_name="xenfocus_bg1_image" group_name="xenfocus_picker" title="Background #1: Image" description="The URL of image 1" property_type="value" value_type="string" depends_on="xenfocus_bg1_enable" value_group="Background_1" display_order="220" addon_id=""> <value>"styles/xenfocus/dimension/backgrounds/mountains.jpg"</value> </property> <property property_name="xenfocus_bg1_position" group_name="xenfocus_picker" title="Background #1: Position" description="The background-position value for image 1" property_type="value" value_type="string" depends_on="xenfocus_bg1_enable" value_group="Background_1" display_order="240" addon_id=""> <value>"50% 50%"</value> </property> <property property_name="xenfocus_bg1_repeat" group_name="xenfocus_picker" title="Background #1: Repeat" description="The background-repeat value for image 1" property_type="value" value_type="select" depends_on="xenfocus_bg1_enable" value_group="Background_1" display_order="250" addon_id=""> <value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters> <value>"repeat"</value> </property> <property property_name="xenfocus_bg1_size" group_name="xenfocus_picker" title="Background #1: Size" description="The background-size value for image 1" property_type="value" value_type="string" depends_on="xenfocus_bg1_enable" value_group="Background_1" display_order="230" addon_id=""> <value>"cover"</value> </property> <property property_name="xenfocus_bg2_attachment" group_name="xenfocus_picker" title="Background #2: Attachment" description="" property_type="value" value_type="select" depends_on="xenfocus_bg2_enable" value_group="Background_2" display_order="360" addon_id=""> <value_parameters>fixed=fixed scroll=scroll</value_parameters> <value>"scroll"</value> </property> <property property_name="xenfocus_bg2_enable" group_name="xenfocus_picker" title="Enable Background #2?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Background_2" display_order="305" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_bg2_hex" group_name="xenfocus_picker" title="Background #2: Color" description="The background-color for image 2" property_type="value" value_type="color" depends_on="xenfocus_bg2_enable" value_group="Background_2" display_order="310" addon_id=""> <value>"#323d5e"</value> </property> <property property_name="xenfocus_bg2_image" group_name="xenfocus_picker" title="Background #2: Image" description="The URL of image 2" property_type="value" value_type="string" depends_on="xenfocus_bg2_enable" value_group="Background_2" display_order="320" addon_id=""> <value>"https://i.imgur.com/vtdqosm.jpg?v=1"</value> </property> <property property_name="xenfocus_bg2_position" group_name="xenfocus_picker" title="Background #2: Position" description="The background-position value for image 2" property_type="value" value_type="string" depends_on="xenfocus_bg2_enable" value_group="Background_2" display_order="340" addon_id=""> <value>"50% 50%"</value> </property> <property property_name="xenfocus_bg2_repeat" group_name="xenfocus_picker" title="Background #2: Repeat" description="The background-repeat value for image 2" property_type="value" value_type="select" depends_on="xenfocus_bg2_enable" value_group="Background_2" display_order="350" addon_id=""> <value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters> <value>"no-repeat"</value> </property> <property property_name="xenfocus_bg2_size" group_name="xenfocus_picker" title="Background #2: Size" description="The background-size value for image 2" property_type="value" value_type="string" depends_on="xenfocus_bg2_enable" value_group="Background_2" display_order="330" addon_id=""> <value>"cover"</value> </property> <property property_name="xenfocus_bg3_attachment" group_name="xenfocus_picker" title="Background #3: Attachment" description="" property_type="value" value_type="select" depends_on="xenfocus_bg3_enable" value_group="Background_3" display_order="460" addon_id=""> <value_parameters>fixed=fixed scroll=scroll</value_parameters> <value>"scroll"</value> </property> <property property_name="xenfocus_bg3_enable" group_name="xenfocus_picker" title="Enable Background #3?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Background_3" display_order="405" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_bg3_hex" group_name="xenfocus_picker" title="Background #3: Color" description="The background-color for image 3" property_type="value" value_type="color" depends_on="xenfocus_bg3_enable" value_group="Background_3" display_order="410" addon_id=""> <value>"#2b2c31"</value> </property> <property property_name="xenfocus_bg3_image" group_name="xenfocus_picker" title="Background #3: Image" description="The URL of image 3" property_type="value" value_type="string" depends_on="xenfocus_bg3_enable" value_group="Background_3" display_order="420" addon_id=""> <value>"styles/xenfocus/dimension/backgrounds/pattern.jpg"</value> </property> <property property_name="xenfocus_bg3_position" group_name="xenfocus_picker" title="Background #3: Position" description="The background-position value for image 3" property_type="value" value_type="string" depends_on="xenfocus_bg3_enable" value_group="Background_3" display_order="440" addon_id=""> <value>"50% 50%"</value> </property> <property property_name="xenfocus_bg3_repeat" group_name="xenfocus_picker" title="Background #3: Repeat" description="The background-repeat value for image 3" property_type="value" value_type="select" depends_on="xenfocus_bg3_enable" value_group="Background_3" display_order="450" addon_id=""> <value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters> <value>"repeat"</value> </property> <property property_name="xenfocus_bg3_size" group_name="xenfocus_picker" title="Background #3: Size" description="The background-size value for image 3" property_type="value" value_type="string" depends_on="xenfocus_bg3_enable" value_group="Background_3" display_order="430" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg4_attachment" group_name="xenfocus_picker" title="Background #4: Attachment" description="" property_type="value" value_type="select" depends_on="xenfocus_bg4_enable" value_group="Background_4" display_order="560" addon_id=""> <value_parameters>fixed=fixed scroll=scroll</value_parameters> <value>"scroll"</value> </property> <property property_name="xenfocus_bg4_enable" group_name="xenfocus_picker" title="Enable Background #4?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Background_4" display_order="505" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_bg4_hex" group_name="xenfocus_picker" title="Background #4: Color" description="The background-color for image 4" property_type="value" value_type="color" depends_on="xenfocus_bg4_enable" value_group="Background_4" display_order="510" addon_id=""> <value>"#888"</value> </property> <property property_name="xenfocus_bg4_image" group_name="xenfocus_picker" title="Background #4: Image" description="The URL of image 4" property_type="value" value_type="string" depends_on="xenfocus_bg4_enable" value_group="Background_4" display_order="520" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg4_position" group_name="xenfocus_picker" title="Background #4: Position" description="The background-position value for image 4" property_type="value" value_type="string" depends_on="xenfocus_bg4_enable" value_group="Background_4" display_order="540" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg4_repeat" group_name="xenfocus_picker" title="Background #4: Repeat" description="The background-repeat value for image 4" property_type="value" value_type="select" depends_on="xenfocus_bg4_enable" value_group="Background_4" display_order="550" addon_id=""> <value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters> <value>"repeat"</value> </property> <property property_name="xenfocus_bg4_size" group_name="xenfocus_picker" title="Background #4: Size" description="The background-size value for image 4" property_type="value" value_type="string" depends_on="xenfocus_bg4_enable" value_group="Background_4" display_order="530" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg5_attachment" group_name="xenfocus_picker" title="Background #5: Attachment" description="" property_type="value" value_type="select" depends_on="xenfocus_bg5_enable" value_group="Background_5" display_order="660" addon_id=""> <value_parameters>fixed=fixed scroll=scroll</value_parameters> <value>"scroll"</value> </property> <property property_name="xenfocus_bg5_enable" group_name="xenfocus_picker" title="Enable Background #5?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Background_5" display_order="605" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_bg5_hex" group_name="xenfocus_picker" title="Background #5: Color" description="The background-color for image 5" property_type="value" value_type="color" depends_on="xenfocus_bg5_enable" value_group="Background_5" display_order="610" addon_id=""> <value>"#aaa"</value> </property> <property property_name="xenfocus_bg5_image" group_name="xenfocus_picker" title="Background #5: Image" description="The URL of image 5" property_type="value" value_type="string" depends_on="xenfocus_bg5_enable" value_group="Background_5" display_order="620" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg5_position" group_name="xenfocus_picker" title="Background #5: Position" description="The background-position value for image 5" property_type="value" value_type="string" depends_on="xenfocus_bg5_enable" value_group="Background_5" display_order="640" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg5_repeat" group_name="xenfocus_picker" title="Background #5: Repeat" description="The background-repeat value for image 5" property_type="value" value_type="select" depends_on="xenfocus_bg5_enable" value_group="Background_5" display_order="650" addon_id=""> <value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters> <value>"repeat"</value> </property> <property property_name="xenfocus_bg5_size" group_name="xenfocus_picker" title="Background #5: Size" description="The background-size value for image 5" property_type="value" value_type="string" depends_on="xenfocus_bg5_enable" value_group="Background_5" display_order="630" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg6_attachment" group_name="xenfocus_picker" title="Background #6: Attachment" description="" property_type="value" value_type="select" depends_on="xenfocus_bg6_enable" value_group="Background_6" display_order="760" addon_id=""> <value_parameters>fixed=fixed scroll=scroll</value_parameters> <value>"scroll"</value> </property> <property property_name="xenfocus_bg6_enable" group_name="xenfocus_picker" title="Enable Background #6?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Background_6" display_order="705" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_bg6_hex" group_name="xenfocus_picker" title="Background #6: Color" description="The background-color for image 6" property_type="value" value_type="color" depends_on="xenfocus_bg6_enable" value_group="Background_6" display_order="710" addon_id=""> <value>"#bbb"</value> </property> <property property_name="xenfocus_bg6_image" group_name="xenfocus_picker" title="Background #6: Image" description="The URL of image 6" property_type="value" value_type="string" depends_on="xenfocus_bg6_enable" value_group="Background_6" display_order="720" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg6_position" group_name="xenfocus_picker" title="Background #6: Position" description="The background-position value for image 6" property_type="value" value_type="string" depends_on="xenfocus_bg6_enable" value_group="Background_6" display_order="740" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_bg6_repeat" group_name="xenfocus_picker" title="Background #6: Repeat" description="The background-repeat value for image 6" property_type="value" value_type="select" depends_on="xenfocus_bg6_enable" value_group="Background_6" display_order="750" addon_id=""> <value_parameters>repeat=repeat no-repeat=no-repeat repeat-x=repeat-x repeat-y=repeat-y</value_parameters> <value>"repeat"</value> </property> <property property_name="xenfocus_bg6_size" group_name="xenfocus_picker" title="Background #6: Size" description="The background-size value for image 6" property_type="value" value_type="string" depends_on="xenfocus_bg6_enable" value_group="Background_6" display_order="730" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_breadcrumb" group_name="xenfocus_breadcrumb" title="Breadcrumb styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="text,background,border_color_simple,border_radius_simple" addon_id=""> <value>{ "color": "@xf-textColor", "background-color": "@xf-contentHighlightBg", "border-color": "rgba(255,255,255,0.16)", "border-radius": "3px" }</value> </property> <property property_name="xenfocus_breadcrumbHeight" group_name="xenfocus_breadcrumb" title="Breadcrumb height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="5" addon_id=""> <value>"40"</value> </property> <property property_name="xenfocus_breadcrumbHover" group_name="xenfocus_breadcrumb" title="Breadcrumb :hover styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20" css_components="text,background" addon_id=""> <value>{ "color": "lighten(@xf-xenfocus_breadcrumb--color, 10%)", "background-color": "rgba(255, 255, 255, 0.08)" }</value> </property> <property property_name="xenfocus_cache" group_name="xenfocus_other" title="Reset cache on javascript and images" description="If you need to force-clear the cache for your javascript files or images, click the plus button to increase this value and press Save." property_type="value" value_type="number" depends_on="" value_group="Other" display_order="100" addon_id=""> <value>"1"</value> </property> <property property_name="xenfocus_countdownColor" group_name="xenfocus_countdown" title="Countdown text color" description="By default, the countdown is placed on a transparent background. This setting controls the text color. If left blank, the countdown will be wrapped with the &quot;block&quot; style." property_type="value" value_type="color" depends_on="xenfocus_countdownEnable" value_group="" display_order="70" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_countdownDate" group_name="xenfocus_countdown" title="Date and time of event" description="The format must be: YYYY-MM-DD HH:MM&lt;br /&gt;&#10;Eg: 2018-03-21 23:45" property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="20" addon_id=""> <value>"2018-10-01 23:45"</value> </property> <property property_name="xenfocus_countdownDesc" group_name="xenfocus_countdown" title="Countdown description" description="If you'd like to provide a more detailed description of the countdown, enter it here." property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="50" addon_id=""> <value_parameters>rows=3</value_parameters> <value>"This is your countdown description."</value> </property> <property property_name="xenfocus_countdownDone" group_name="xenfocus_countdown" title="Countdown description (finished)" description="Once the countdown has reached zero, this message will be displayed instead of the original description." property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="60" addon_id=""> <value_parameters>rows=3</value_parameters> <value>"The event is here!"</value> </property> <property property_name="xenfocus_countdownEnable" group_name="xenfocus_countdown" title="Enable countdown?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_countdownTitle" group_name="xenfocus_countdown" title="Countdown title" description="What event are you counting down to?" property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="40" addon_id=""> <value>"Countdown until our main event!"</value> </property> <property property_name="xenfocus_countdownToggle" group_name="xenfocus_countdown" title="Allow members to hide countdown?" description="If the &lt;em&gt;Customize Panel&lt;/em&gt; is enabled, your members will be able to hide/show the countdown." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="15" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_countdownZone" group_name="xenfocus_countdown" title="Timezone (optional)" description="If your event is occurring in a specific time zone (such as a sporting event), enter the time zone here. Please check the tutorial category on the xenfocus support forums for further instructions." property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="30" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_editorIcon_footer" group_name="xenfocus_themeEditor" title="Show icon in footer?" description="If enabled, the &lt;em&gt;Customize Panel&lt;/em&gt; icon will be shown in the footer." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="65" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_editorIcon_user" group_name="xenfocus_themeEditor" title="Show icon in user panel?" description="If enabled, the &lt;em&gt;Customize Panel&lt;/em&gt; icon will be shown in the user panel." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="60" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_eventOverlay" group_name="xenfocus_holidays" title="Full-screen effect" description="Select an animated effect to overlay your screen, such as snow for Christmas or confetti for a celebration." property_type="value" value_type="select" depends_on="" value_group="" display_order="5" addon_id=""> <value_parameters>none=None snow=Snow confetti=Confetti</value_parameters> <value>"none"</value> </property> <property property_name="xenfocus_eventOverlayDefault" group_name="xenfocus_holidays" title="Show animated effect by default?" description="If enabled, the animated effect will be shown to all users. They can optionally disable it via the theme editor." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_footer1" group_name="xenfocus_footer" title="Footer column 1" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="30" addon_id=""> <value_parameters>rows=4</value_parameters> <value>"&lt;h4&gt;Mega Footer&lt;/h4&gt;\n&lt;p&gt;These footer widgets can be used to display your own custom messages.&lt;/p&gt;"</value> </property> <property property_name="xenfocus_footer2" group_name="xenfocus_footer" title="Footer column 2" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="40" addon_id=""> <value_parameters>rows=4</value_parameters> <value>"&lt;h4&gt;Useful links&lt;/h4&gt;\n&lt;ul class='focus-footer-list'&gt;\n&lt;li&gt;&lt;a href='javascript:void();'&gt;Contact us&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href='javascript:void();'&gt;Another helpful link&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href='javascript:void();'&gt;Terms and Conditions&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;"</value> </property> <property property_name="xenfocus_footer3" group_name="xenfocus_footer" title="Footer column 3" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="50" addon_id=""> <value_parameters>rows=4</value_parameters> <value>"&lt;h4&gt;Social Links&lt;/h4&gt;\n&lt;p&gt;You could even link to your social profiles, such as:&lt;/p&gt;\n&lt;ul class='focus-footer-list'&gt;\n&lt;li&gt;&lt;a href='https://www.facebook.com/'&gt;Facebook&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href='https://twitter.com'&gt;Twitter&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href='https://youtube.com'&gt;YouTube&lt;/a&gt;&lt;/li&gt;\n&lt;/ul&gt;"</value> </property> <property property_name="xenfocus_footer4" group_name="xenfocus_footer" title="Footer column 4" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="60" addon_id=""> <value_parameters>rows=4</value_parameters> <value>"&lt;h4&gt;Footer Header&lt;/h4&gt;\n&lt;p&gt;This is some example content.&lt;/p&gt;\n&lt;p&gt;And this is another paragraph..&lt;/p&gt;"</value> </property> <property property_name="xenfocus_footerEnable" group_name="xenfocus_footer" title="Enable mega footer?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_footerMobile" group_name="xenfocus_footer" title="Show footer on mobiles?" description="" property_type="value" value_type="boolean" depends_on="xenfocus_footerEnable" value_group="" display_order="20" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_gridBackground" group_name="xenfocus_grid" title="Background color for wallpaper blocks" description="If an image isn't defined (via css), this hex color will be shown instead." property_type="value" value_type="color" depends_on="xenfocus_gridWallpaper" value_group="WallpaperEffect" display_order="130" addon_id=""> <value>"@xf-paletteColor2"</value> </property> <property property_name="xenfocus_gridColor" group_name="xenfocus_grid" title="Text color for wallpaper blocks" description="If the above setting is enabled, grid blocks will use this color for their text color." property_type="value" value_type="color" depends_on="xenfocus_gridWallpaper" value_group="WallpaperEffect" display_order="120" addon_id=""> <value>"#fff"</value> </property> <property property_name="xenfocus_gridEnable" group_name="xenfocus_grid" title="Grid layout?" description="If enabled, your nodes will be placed into a grid layout." property_type="value" value_type="boolean" depends_on="" value_group="GridLayout" display_order="101" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_gridImage" group_name="xenfocus_grid" title="Wallpaper images" description="Assign a wallpaper to node id's, separated by a comma. Node wallpapers should be .jpg, uploaded to /styles/xenfocus/images/node-wallpapers and named according to their id, eg 2.jpg&lt;br /&gt;&#10;Expected input: 2,3,7" property_type="value" value_type="string" depends_on="xenfocus_gridWallpaper" value_group="WallpaperEffect" display_order="140" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_gridToggle" group_name="xenfocus_grid" title="Allow members to toggle &quot;Grid view&quot;?" description="If the &lt;em&gt;Customize panel&lt;/em&gt; is enabled, your members will be able to toggle the grid layout." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="GridLayout" display_order="103" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_gridWallpaper" group_name="xenfocus_grid" title="Wallpaper design?" description="Enable this if you'd like to assign background images to your grid blocks. The text color is defined below." property_type="value" value_type="boolean" depends_on="" value_group="WallpaperEffect" display_order="110" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_grid_nodes" group_name="xenfocus_grid" title="Limit grid layout to specifc nodes" description="For a tutorial, please visit &lt;a href='https://xenfocus.com/community/threads/limit-grid-view-to-specific-nodes.35634/' target='_blank' rel=&quot;noreferrer&quot;&gt;the xenfocus support forums&lt;/a&gt;." property_type="value" value_type="string" depends_on="" value_group="GridLayout" display_order="105" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_grid_stats" group_name="xenfocus_grid" title="Hide node stats in grid view?" description="" property_type="value" value_type="boolean" depends_on="" value_group="GridLayout" display_order="108" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_guestContent" group_name="xenfocus_guest" title="Guest message" description="This message is shown to guests, prompting them to register or sign in." property_type="value" value_type="string" depends_on="xenfocus_guestEnable" value_group="" display_order="20" addon_id=""> <value_parameters>rows=5</value_parameters> <value>"&lt;p&gt;This is a sample guest message. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!&lt;/p&gt;"</value> </property> <property property_name="xenfocus_guestEnable" group_name="xenfocus_guest" title="Enable guest message?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_guestInternalStyle" group_name="xenfocus_guest" title="Alert style: Box header and buttons" description="These colors affect the header and buttons in the guest box." property_type="css" value_type="" depends_on="" value_group="" display_order="40" css_components="text,background" addon_id=""> <value>{ "color": "#9A6200", "font-weight": "@xf-fontWeightHeavy", "background-color": "#EDAF5D" }</value> </property> <property property_name="xenfocus_guestLayout" group_name="xenfocus_guest" title="Layout" description="&quot;Alert&quot; captures the attention of visitors using brighter colours.&lt;br /&gt;&#10;&quot;Wallpaper&quot; uses a large background image instead." property_type="value" value_type="select" depends_on="" value_group="" display_order="15" addon_id=""> <value_parameters>alert=Alert wallpaper=Wallpaper</value_parameters> <value>"wallpaper"</value> </property> <property property_name="xenfocus_guestStyle" group_name="xenfocus_guest" title="Alert style: Box colors" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="30" css_components="text,background" addon_id=""> <value>{ "color": "#9A6200", "background-color": "#fcefe0" }</value> </property> <property property_name="xenfocus_guestWallpaper" group_name="xenfocus_guest" title="Wallpaper: Image and color" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="50" css_components="text,background" addon_id=""> <value>{ "color": "@xf-paletteColor1", "background-color": "darken(@xf-paletteColor5, 15%)", "background-image": "styles/xenfocus/images/guest-message/laptop.jpg" }</value> </property> <property property_name="xenfocus_guestWallpaperOpacity" group_name="xenfocus_guest" title="Wallpaper image overlay" description="If &quot;Wallpaper&quot; is selected above, and if you've assigned a background image under &quot;Wallpaper: Image and color&quot; below, you can add a semi-transparent overlay here which may result in better contrast with your text. Enter a value between 0 and 1." property_type="value" value_type="string" depends_on="" value_group="" display_order="25" addon_id=""> <value>"0.85"</value> </property> <property property_name="xenfocus_headerOnMobile" group_name="xenfocus_logo" title="Show header on mobile?" description="If disabled, the header will be removed and a mini logo will be shown next to the mobile navigation icon." property_type="value" value_type="boolean" depends_on="" value_group="MobileLogo" display_order="70" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_holiday" group_name="xenfocus_holidays" title="Logo effect" description="Celebrate a holiday or event by enhancing your logo." property_type="value" value_type="select" depends_on="" value_group="" display_order="20" addon_id=""> <value_parameters>none=None valentines=Valentines halloween=Halloween</value_parameters> <value>"none"</value> </property> <property property_name="xenfocus_iconFA" group_name="xenfocus_nodeIcons" title="&quot;New content&quot; FA icon" description="Customize the icon for nodes with new content by entering the Font Awesome unicode value." property_type="value" value_type="string" depends_on="" value_group="NodeIcons" display_order="105" addon_id=""> <value>"f086"</value> </property> <property property_name="xenfocus_iconFAold" group_name="xenfocus_nodeIcons" title="&quot;No new content&quot; FA icon" description="Customize the icon for nodes with no new content by entering the Font Awesome unicode value." property_type="value" value_type="string" depends_on="" value_group="NodeIcons" display_order="110" addon_id=""> <value>"f086"</value> </property> <property property_name="xenfocus_iconHeight" group_name="xenfocus_nodeIcons" title="Node icon height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="IconSize" display_order="140" addon_id=""> <value>"36"</value> </property> <property property_name="xenfocus_iconImage" group_name="xenfocus_nodeIcons" title="Image Path (new content)" description="Enter a path or URL to an image which will be used as your node icon. The width and height of the image can be defined in the section below." property_type="value" value_type="string" depends_on="" value_group="ImageAsIcon" display_order="125" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_iconImageOld" group_name="xenfocus_nodeIcons" title="Image Path (no new content)" description="This image will be used on nodes which have no new content." property_type="value" value_type="string" depends_on="" value_group="ImageAsIcon" display_order="126" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_iconMobile" group_name="xenfocus_nodeIcons" title="Scale icons on mobiles" description="The icons on smaller devices will be displayed at this scale. Eg, 0.5 = half size." property_type="value" value_type="string" depends_on="" value_group="IconSize" display_order="170" addon_id=""> <value>"0.7"</value> </property> <property property_name="xenfocus_iconRead" group_name="xenfocus_nodeIcons" title="Node icon (no new content)" description="Change the icon color and background-color of the node icon when no new content exists." property_type="css" value_type="" depends_on="" value_group="" display_order="210" css_components="text,background,extra" addon_id=""> <value>{ "extra": "opacity: 0.4;" }</value> </property> <property property_name="xenfocus_iconStyles" group_name="xenfocus_nodeIcons" title="Node icon" description="Change the icon color, background-color, font-size and border-radius of the node icon. Adding a background image will remove all other styles, allowing you to use an image as the icon." property_type="css" value_type="" depends_on="" value_group="" display_order="200" css_components="text,background,border_radius_simple,extra" addon_id=""> <value>{ "font-size": "21px", "color": "@xf-textColor", "border-radius": "3px" }</value> </property> <property property_name="xenfocus_iconWeight" group_name="xenfocus_nodeIcons" title="&quot;New content&quot; icon weight" description="Change the font-weight of the &quot;New content&quot; icon." property_type="value" value_type="select" depends_on="" value_group="NodeIcons" display_order="107" addon_id=""> <value_parameters>900=Solid 400=Regular 300=Light</value_parameters> <value>"900"</value> </property> <property property_name="xenfocus_iconWeightOld" group_name="xenfocus_nodeIcons" title="&quot;No new content&quot; icon weight" description="Change the font-weight of the &quot;No new content&quot; icon." property_type="value" value_type="select" depends_on="" value_group="NodeIcons" display_order="120" addon_id=""> <value_parameters>900=Solid 400=Regular 300=Light</value_parameters> <value>"400"</value> </property> <property property_name="xenfocus_iconWidth" group_name="xenfocus_nodeIcons" title="Node icon width (px)" description="" property_type="value" value_type="number" depends_on="" value_group="IconSize" display_order="130" addon_id=""> <value>"36"</value> </property> <property property_name="xenfocus_includeCSS" group_name="xenfocus_other" title="Include CSS file" description="If required, this input can be used to add external CSS files such as Google Fonts. Format must be &amp;lt;link href=&quot;xx.css&quot; /&amp;gt;" property_type="value" value_type="string" depends_on="" value_group="Layout" display_order="10" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_light_dark" group_name="xenfocus_light_dark" title="Light/Dark Variation" description="Learn how to enable the &lt;a href=&quot;https://xenfocus.com/community/threads/light-dark-mode.35702/&quot; rel=&quot;noreferrer&quot; target=&quot;_blank&quot;&gt;Light/Dark Mode&lt;/a&gt; toggle icon." property_type="value" value_type="number" depends_on="" value_group="" display_order="10" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_logoColor" group_name="xenfocus_logo" title="Logo color" description="Color of the text logo" property_type="value" value_type="color" depends_on="" value_group="Logo" display_order="20" addon_id=""> <value>"@xf-publicHeader--color"</value> </property> <property property_name="xenfocus_logoFont" group_name="xenfocus_logo" title="Logo font-family" description="Change the font-family used by your logo." property_type="value" value_type="string" depends_on="" value_group="Logo" display_order="25" addon_id=""> <value>""</value> </property> <property property_name="xenfocus_logoHeight" group_name="xenfocus_logo" title="Logo height" description="Define the height of the logo/header area, in pixels." property_type="value" value_type="number" depends_on="" value_group="Logo" display_order="30" addon_id=""> <value>"200"</value> </property> <property property_name="xenfocus_logoHeightMobile" group_name="xenfocus_logo" title="Logo height (mobile)" description="Define the height of the logo/header area for mobiles, in pixels." property_type="value" value_type="number" depends_on="xenfocus_headerOnMobile" value_group="MobileLogo" display_order="80" addon_id=""> <value>"60"</value> </property> <property property_name="xenfocus_logoSize" group_name="xenfocus_logo" title="Logo font size" description="Font size for the text logo in pixels." property_type="value" value_type="number" depends_on="" value_group="Logo" display_order="50" addon_id=""> <value>"30"</value> </property> <property property_name="xenfocus_logoSizeMobile" group_name="xenfocus_logo" title="Logo font size (mobile)" description="Font size for the text logo in pixels, for mobiles." property_type="value" value_type="number" depends_on="xenfocus_headerOnMobile" value_group="MobileLogo" display_order="85" addon_id=""> <value>"20"</value> </property> <property property_name="xenfocus_logoSlogan" group_name="xenfocus_logo" title="Logo slogan" description="Enter a slogan to display under your text logo. Leave this field blank to disable." property_type="value" value_type="string" depends_on="" value_group="Logo" display_order="10" addon_id=""> <value>"XenForo 2 theme by xenfocus"</value> </property> <property property_name="xenfocus_logoText" group_name="xenfocus_logo" title="Text logo" description="If the above option is configured to display a text logo, this value will be used. If this is left blank, your board name will be displayed." property_type="value" value_type="string" depends_on="" value_group="Logo" display_order="5" addon_id=""> <value>"Dimension Dark"</value> </property> <property property_name="xenfocus_logoType" group_name="xenfocus_logo" title="Logo type" description="Configure the layout of your logo. &lt;a href=&quot;https://xenfocus.com/community/threads/logo-customization.35191/&quot; target=&quot;_blank&quot; rel=&quot;noreferrer&quot;&gt;Learn more&lt;/a&gt;." property_type="value" value_type="select" depends_on="" value_group="Logo" display_order="3" addon_id=""> <value_parameters>text=Text image=Image both=Image and Text</value_parameters> <value>"image"</value> </property> <property property_name="xenfocus_mnb_active" group_name="xenfocus_mobile_navigation_bar" title="Active icon color" description="" property_type="value" value_type="color" depends_on="xenfocus_mobile_navigation_bar" value_group="" display_order="50" addon_id=""> <value>"@xf-paletteColor5"</value> </property> <property property_name="xenfocus_mnb_background" group_name="xenfocus_mobile_navigation_bar" title="Background color" description="" property_type="value" value_type="color" depends_on="xenfocus_mobile_navigation_bar" value_group="" display_order="30" addon_id=""> <value>"@xf-contentAltBg"</value> </property> <property property_name="xenfocus_mnb_color" group_name="xenfocus_mobile_navigation_bar" title="Icon color" description="" property_type="value" value_type="color" depends_on="xenfocus_mobile_navigation_bar" value_group="" display_order="40" addon_id=""> <value>"@xf-textColorMuted"</value> </property> <property property_name="xenfocus_mnb_scroll" group_name="xenfocus_mobile_navigation_bar" title="Hide bar when scrolling down?" description="When enabled, the navigation bar will slide out of view when the page is scrolled down and reappear when scrolled up. This provides more space for your content." property_type="value" value_type="boolean" depends_on="xenfocus_mobile_navigation_bar" value_group="" display_order="20" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_mnb_toggle" group_name="xenfocus_mobile_navigation_bar" title="Allow members to toggle?" description="If the &lt;em&gt;Customize panel&lt;/em&gt; is enabled, your members can choose to either hide or show the mobile navigation bar on their device." property_type="value" value_type="boolean" depends_on="xenfocus_mobile_navigation_bar" value_group="" display_order="25" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_mnb_weight" group_name="xenfocus_mobile_navigation_bar" title="Icon weight" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="60" addon_id=""> <value_parameters>900=Solid 400=Regular 300=Light</value_parameters> <value>"300"</value> </property> <property property_name="xenfocus_mobile_navigation_bar" group_name="xenfocus_mobile_navigation_bar" title="Enable mobile navigation bar?" description="The mobile navigation bar sits at the bottom of your site, providing easy access to common navigation links." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_navHeight" group_name="xenfocus_logo" title="Navigation height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="NavigationBar" display_order="210" addon_id=""> <value>"40"</value> </property> <property property_name="xenfocus_navIcons" group_name="xenfocus_logo" title="Show navigation icons?" description="If enabled, each icon is assigned a FontAwesome icon which can be configured via css." property_type="value" value_type="boolean" depends_on="" value_group="NavigationBar" display_order="200" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_parallaxToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle &quot;Header parallax effect&quot;?" description="If enabled, users can disable the parallax effect in the header which can improve scroll performance under certain configurations." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="200" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_picker" group_name="xenfocus_picker" title="Enable background picker?" description="If enabled, your members will be able to select their own background/header image using the Theme Editor." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="BackgroundPicker" display_order="110" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_pickerDefault" group_name="xenfocus_picker" title="Set default image" description="This image will be used as the default background image, or if the background picker has been disabled." property_type="value" value_type="select" depends_on="" value_group="BackgroundPicker" display_order="115" addon_id=""> <value_parameters>1=1 2=2 3=3 4=4 5=5 6=6</value_parameters> <value>"2"</value> </property> <property property_name="xenfocus_postButton" group_name="xenfocus_other" title="Post button style" description="Style the Like, Quote and Reply buttons beneath each post" property_type="value" value_type="select" depends_on="" value_group="TopicLayout" display_order="93" addon_id=""> <value_parameters>none=None minimal=Minimal button=Standard button</value_parameters> <value>"minimal"</value> </property> <property property_name="xenfocus_searchBar" group_name="xenfocus_search" title="Display search bar?" description="If enabled, a search bar will be shown on your theme." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="50" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_searchHeight" group_name="xenfocus_search" title="Search height (px)" description="" property_type="value" value_type="number" depends_on="xenfocus_searchBar" value_group="" display_order="100" addon_id=""> <value>"36"</value> </property> <property property_name="xenfocus_searchLink" group_name="xenfocus_search" title="Display &quot;Search&quot; link in user panel?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="250" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_searchMenu" group_name="xenfocus_search" title="Advanced search dropdown menu?" description="If enabled, a dropdown menu will appear when your search bar is focused." property_type="value" value_type="boolean" depends_on="xenfocus_searchBar" value_group="" display_order="200" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_searchStyles" group_name="xenfocus_search" title="Search bar styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="120" css_components="text,background,border_width_simple,border_color_simple,border_radius_simple" addon_id=""> <value>{ "color": "#333", "background-color": "rgba(255,255,255,0.9)", "background-image": "linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)", "border-width": "0px", "border-color": "@xf-xenfocus_searchStyles--color", "border-radius": "3px" }</value> </property> <property property_name="xenfocus_searchWidth" group_name="xenfocus_search" title="Search width (px)" description="" property_type="value" value_type="number" depends_on="xenfocus_searchBar" value_group="" display_order="150" addon_id=""> <value>"260"</value> </property> <property property_name="xenfocus_sidebarFlip" group_name="xenfocus_other" title="Flip sidebar position?" description="Flip the position of the sidebar to the left side of your site (right for RTL languages)." property_type="value" value_type="boolean" depends_on="" value_group="Sidebars" display_order="17" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_sidebarFlipToggle" group_name="xenfocus_other" title="Allow members to toggle sidebar position?" description="If enabled, users can flip the location of their sidebar between the left and right sides." property_type="value" value_type="boolean" depends_on="" value_group="Sidebars" display_order="18" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_social" group_name="xenfocus_social" title="Social icons" description="Add your social icon code here. Format must be &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://www.site.com/username&quot;&amp;gt;(optional)&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;" property_type="value" value_type="string" depends_on="" value_group="" display_order="20" addon_id=""> <value_parameters>rows=3</value_parameters> <value>"&lt;li&gt;&lt;a href='#youtube.com' target='_blank'&gt;&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href='#facebook.com/' target='_blank'&gt;&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href='#twitter.com' target='_blank'&gt;&lt;/a&gt;&lt;/li&gt;\n&lt;li&gt;&lt;a href='#discordapp.com' target='_blank'&gt;&lt;/a&gt;&lt;/li&gt;"</value> </property> <property property_name="xenfocus_socialEnable" group_name="xenfocus_social" title="Display icons next to breadcrumb?" description="If enabled, social network icons will be placed next to your breadcrumb navigation at the top of the page." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_socialFooter" group_name="xenfocus_social" title="Display icons in footer?" description="If enabled, social network icons will be added to the bottom of your site." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="15" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_sticky" group_name="xenfocus_other" title="Separate sticky topics" description="If enabled, sticky topics will be separated with dividers." property_type="value" value_type="boolean" depends_on="" value_group="NodeAndTopicLists" display_order="30" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_stickyAuthor" group_name="xenfocus_other" title="Sticky author column?" description="If enabled, the author column in topics will stick to the top of the browser window when scrolled." property_type="value" value_type="boolean" depends_on="" value_group="TopicLayout" display_order="90" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_stickyBlocks" group_name="xenfocus_other" title="Sticky sidebar?" description="If enabled, the sidebar will become stuck to the top of the browser window when scrolled." property_type="value" value_type="boolean" depends_on="" value_group="Sidebars" display_order="15" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_stickyToggle" group_name="xenfocus_other" title="Allow members to toggle sticky sidebars?" description="If the &lt;em&gt;Customize Panel&lt;/em&gt; is enabled, your members will be able to toggle the sticky sidebar." property_type="value" value_type="boolean" depends_on="" value_group="Sidebars" display_order="16" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_tableLayout" group_name="xenfocus_other" title="Table layout" description="Change the layout of node and topic tables." property_type="value" value_type="select" depends_on="" value_group="NodeAndTopicLists" display_order="25" addon_id=""> <value_parameters>standard=Standard standardHover=Standard with hover effect minimal=Minimal</value_parameters> <value>"standardHover"</value> </property> <property property_name="xenfocus_themeEditor" group_name="xenfocus_themeEditor" title="Enable Customize Panel?" description="The &lt;em&gt;Customize Panel&lt;/em&gt; allows your visitors to enable or disable specific features throughout your theme." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="50" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_userHeight" group_name="xenfocus_user" title="User links height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="100" addon_id=""> <value>"44"</value> </property> <property property_name="xenfocus_userRegister" group_name="xenfocus_user" title="Register button" description="Make the Register button stand out with it's own background color." property_type="value" value_type="color" depends_on="" value_group="" display_order="120" addon_id=""> <value>"rgb(103, 175, 81)"</value> </property> <property property_name="xenfocus_userSep" group_name="xenfocus_user" title="Separate links with border?" description="If enabled, borders will divide each user link." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="130" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_userStyles" group_name="xenfocus_user" title="User panel styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="100" css_components="text,background,border,border_radius" addon_id=""> <value>{ "color": "rgb(255, 255, 255)", "font-weight": "@xf-fontWeightHeavy", "background-color": "fade(#1e1f21, 50%)", "border-color": "fade(@xf-xenfocus_userStyles--color, 10%)", "border-radius": "3px" }</value> </property> <property property_name="xenfocus_userlinksRadius" group_name="xenfocus_user" title="Apply border-radius to" description="Choose whether to apply the border-radius to the wrapper or individual links." property_type="value" value_type="select" depends_on="" value_group="" display_order="125" addon_id=""> <value_parameters>parent=Wrapper children=Individual links</value_parameters> <value>"parent"</value> </property> <property property_name="xenfocus_widthEnable" group_name="xenfocus_other" title="Fluid width?" description="If enabled, your site will occupy the full width of the browser." property_type="value" value_type="boolean" depends_on="" value_group="Layout" display_order="12" addon_id=""> <value>0</value> </property> <property property_name="xenfocus_widthToggle" group_name="xenfocus_other" title="Allow members to toggle &quot;Fluid width&quot;?" description="If enabled, your members will be able to toggle &quot;Fluid width&quot; on and off using the &lt;em&gt;Customize Panel&lt;/em&gt;." property_type="value" value_type="boolean" depends_on="" value_group="Layout" display_order="13" addon_id=""> <value>1</value> </property> <property property_name="xenfocus_wrapperStyles" group_name="xenfocus_wrapper" title="Wrapper styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="background,border_width_simple,border_color_simple,border_radius_simple,extra" addon_id=""> <value>[]</value> </property> <property property_name="xenfocus_zebra" group_name="xenfocus_other" title="Zebra rows" description="If enabled, alternating background colours will be used for nodes and topics." property_type="value" value_type="boolean" depends_on="" value_group="NodeAndTopicLists" display_order="20" addon_id=""> <value>0</value> </property> </properties> </style> 