This XML file does not appear to have any style information associated with it. The document tree is shown below.
<style title="[Kolpak] Live Russia" description="https://pawno-help.ru" user_selectable="1" base_version_id="2021570" 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&#232;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&#224; oscura</xf:set> <xf:set var="$light-mode">Modalit&#224; 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://pawno-help.ru' target='_blank' rel="noreferrer">Скачено с</a> pawno-help.ru</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"> <!--<h4 class="menu-header">{$nav.title}</h4>--> <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[ /* ---------------- xenfocus styles ---------------- */ /* Global Flexbox Header Logo Navigation User links Search bar xenfocus Editor Breadcrumbs Social icons Background picker Content wrapper Nodes Node icons Node NEW badge Guest message Footer Mega footer Grid layout for nodes Blocks Topic List Topic View Editor Profiles Sidebar Sticky Sidebar Animated snow Holidays Animated blocks onload Pagination Mobile footer bar Post thread pop up Other Bug fixes */ // Body @focus-wallpaper: true; @body-padding-top: 0px; @body-padding-bottom: 0px; //@focus-fluid-width: 96; @focus-fluid-margin: 100px; // Content width @focus-width: ~"calc(100vw - (@xf-pageEdgeSpacer * 2))"; @content-padding: 15px; // Header <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 @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%)); // Navigation @nav-icon-size: 14px; // Dropdown menus @focus-dropdown-nav: true; // Navigation scrollers @navigation-arrow-size: 20px; @navigation-arrow-color: @xf-publicNavTab--color; @navigation-arrow-gradient: @xf-publicNav--background-color; // User links <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-color-mobile: @xf-publicNav--color; @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 @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 menu @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; // Breadcrumb @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 icons @social-border: 1px; @social-height: @breadcrumb-height; @social-footer-basic: true; // Blocks // Move the block wrap from the container to the body @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'; // When a wallpaper design is used, these blocks will be wrapped with the normal block styles @focus-wallpaper-elements: ~'.p-body-header'; @sticky-top: @xf-xenfocus_navHeight; // NEW badge @new-badge-color: #fff; @new-badge-background: #ed7a16; // Nodes @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; // Assign a background and border to grid wrapper? <xf:if is="property('xenfocus_wrapperStyles--background-color')"> @reset-grid-wrapper:true; <xf:else /> @reset-grid-wrapper:false; </xf:if> // Sidebar @focus-sidebar-icons: true; @minorHeader-icon: '\f141'; // Topic view @focus-post-buttons: true; @editor-bg: xf-intensify(@xf-contentBg, 1.5%); @editor-text: @xf-textColor; // This resets coloured reaction text to inherit when button style is enabled <xf:if is="property('xenfocus_postButton') == 'button'"> @reset-reaction-text: true; <xf:else /> @reset-reaction-text: false; </xf:if> @post-meta-opacity: 0.4; // Footer @mega-footer-copyright: darken(@xf-publicFooter--background-color, 5%); // Pagination @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%); // Inputs @input--placeholder: 0.4; @input--placeholder-active: 0.5; /* ---------------- - Translate ---------------- */ [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" } // German <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&#228;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&#252;tzlich f&#252;r gr&#246;&#223;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&#228;llt animierter Schnee &#252;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> // French <xf:if is="$xf.language.language_code === 'fr-FR'"> .node--unread .node-title::before{ content: "NOUVEAU" } .focus-editor-wrap{ content: "&#201;diteur de th&#232;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&#233;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 &#233;crans." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Disposition des forums" } &::after{ content: "Si activ&#233;, les forums seront affich&#233;s sous forme de grille plut&#244;t que par rang&#233;es." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Barre lat&#233;rale intelligente" } &::after{ content: "Si activ&#233;, la barre lat&#233;rale d&#233;filera intelligement pour un acc&#232;s facile." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Basculer la barre lat&#233;rale ?" } &::after{ content: "Basculez la barre lat&#233;rale entre les c&#244;t&#233;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&#233;, de la neige tombera sur votre &#233;cran." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Effet confettis" } &::after{ content: "Si activ&#233;, des confettis tomberont sur votre &#233;cran." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Affichage du compte &#224; rebours" } &::after{ content: "Si activ&#233;, un compte &#224; 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&#233;, un effet de parallaxe sera appliqu&#233; &#224; l'en-t&#234;te." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Fond de parallaxe ?" } &::after{ content: "Si activ&#233;, l'image d'arri&#232;re-plan s'anime et s'estompe lorsque la page d&#233;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> // Spanish <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&#241;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&#243;n m&#243;vil?" } &::after{ content: "&#191;Mostrar una barra de navegaci&#243;n en la parte inferior del sitio al usar un dispositivo m&#243;vil?" } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "&#191;Ancho de fluido?" } &::after{ content: "Habilitar esto aumentar&#225; el ancho del sitio para que ocupe el ancho de su navegador. &#218;til para pantallas m&#225;s grandes." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "&#191;Dise&#241;o de cuadr&#237;cula?" } &::after{ content: "Si est&#225; habilitado, los foros se mostrar&#225;n como una cuadr&#237;cula en lugar de una tabla." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Barra lateral pegajosa?" } &::after{ content: "Si est&#225; habilitado, la barra lateral se pegar&#225; a la parte superior de la pantalla para facilitar el acceso." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "&#191;Habilitar el efecto de paralaje?" } &::after{ content: "Si est&#225; habilitado, se aplicar&#225; 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: "&#191;Habilitar efecto de nieve?" } &::after{ content: "Si est&#225; habilitado, la nieve animada caer&#225; en tu navegador." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Habilitar confeti?" } &::after{ content: "Si est&#225; habilitado, el confeti animado caer&#225; en tu navegador." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Mostrar cuenta regresiva?" } &::after{ content: "Si est&#225; habilitado, aparecer&#225; una cuenta regresiva en la parte superior de la p&#225;gina." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Fondo de paralaje?" } &::after{ content: "Si est&#225; habilitada, la imagen de fondo se animar&#225; y se desenfocar&#225; cuando la p&#225;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&#237;as y"; } .focus-timer [data-countdown-text="day and"]::before{ content: "d&#237;a y"; } </xf:if> // Italian <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&#224; la larghezza del sito in modo che occupi la larghezza del tuo browser. Utile per schermi pi&#249; 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&#224; 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&#224; 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&#224; 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&#224; 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&#224; e verr&#224; 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> // Turkish <xf:if is="$xf.language.language_code === 'tr-TR'"> .node--unread .node-title::before{ content: "YEN&#304;" } .focus-editor-wrap{ content: "Tema Edit&#246;r&#252;" } .focus-guest .focus-guest-header::before{ content: "Ho&#351;geldiniz " } .structItemContainer-group--sticky::before{ content: "Sabit Konular" } .structItemContainer-group--sticky::after{ content: "Normal Konular" } [data-focus-text="Background Picker"]::after{ content: "Arkaplan Se&#231;ici" } [data-focus-text="Customize layout"]::after{ content: "D&#252;zeni &#246;zelle&#351;tir" } [data-focus-text="Save"]::after{ content: "Kaydet" } [data-focus-text="Choose color"]::after{ content: "Renk se&#231;in" } [data-setting="focus-mobile-navigation-bar"] .focus-editor-text{ &::before{ content: "Mobil gezinme &#231;ubu&#287;u?" } &::after{ content: "Bir mobil cihaz kullan&#305;rken sitenin alt&#305;nda bir gezinme &#231;ubu&#287;u g&#246;r&#252;nt&#252;lensin mi?" } } [data-setting="focus-fluid"] .focus-editor-text{ &::before{ content: "S&#305;v&#305; geni&#351;li&#287;i?" } &::after{ content: "Bunu etkinle&#351;tirmek sitenin geni&#351;li&#287;ini art&#305;racak, b&#246;ylece taray&#305;c&#305;n&#305;z&#305;n tam geni&#351;li&#287;ini kaplayacak. Daha b&#252;y&#252;k ekranlar i&#231;in kullan&#305;&#351;l&#305;d&#305;r." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Izgara d&#252;zeni?" } &::after{ content: "Etkinle&#351;tirilirse, forumlar tablo yerine k&#305;lavuz olarak g&#246;r&#252;nt&#252;lenir." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Sabit yan &#231;ubuk?" } &::after{ content: "Etkinle&#351;tirilirse, kolay eri&#351;im i&#231;in kenar &#231;ubu&#287;u ekran&#305;n &#252;st&#252;ne yap&#305;&#351;&#305;r." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Yan &#231;ubu&#287;u &#231;evir?" } &::after{ content: "Kenar &#231;ubu&#287;unu sol ve sa&#287; taraf aras&#305;nda de&#287;i&#351;tirin." } } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Kar efekti etkinle&#351;tirilsin mi?" } &::after{ content: "Etkinle&#351;tirilirse, hareketli kar ya&#287;&#305;&#351;&#305; taray&#305;c&#305;da &#231;al&#305;&#351;&#305;r." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Konfeti etkinle&#351;tirilsin mi?" } &::after{ content: "Etkinle&#351;tirilirse, animasyonlu konfeti taray&#305;c&#305;n&#305;z&#305;n &#252;st k&#305;sm&#305;ndan a&#351;a&#287;&#305; do&#287;ru iner." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Geri say&#305;m g&#246;sterilsin mi!" } &::after{ content: "Etkinle&#351;tirilirse, sayfan&#305;z&#305;n &#252;st&#252;nde bir geri say&#305;m sayac&#305; g&#246;r&#252;n&#252;r." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Paralaks efektini etkinle&#351;tir?" } &::after{ content: "Etkinle&#351;tirilirse, ba&#351;l&#305;k k&#305;sm&#305;na paralaks efekti uygulan&#305;r." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "Arkaplan Paralaks&#305;?" } &::after{ content: "Etkinle&#351;tirilirse, arka plan g&#246;r&#252;nt&#252;s&#252;, sayfa kayd&#305;r&#305;ld&#305;&#287;&#305;nda hateketlenir ve bulan&#305;kla&#351;&#305;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&#252;nler ve"; } .focus-timer [data-countdown-text="day and"]::before{ content: "g&#252;n ve"; } </xf:if> // Russian <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> // Polish <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&#243;r t&#322;a" } [data-focus-text="Customize layout"]::after{ content: "Wyb&#243;r uk&#322;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&#347;&#263;?" } &::after{ content: "Je&#347;li w&#322;&#261;czysz t&#261; opcj&#281;, szeroko&#347;&#263; strony zostanie dopasowana do szeroko&#347;ci przegl&#261;darki. Przydatne w przypadku wi&#281;kszych ekran&#243;w." } } [data-setting="focus-grid"] .focus-editor-text{ &::before{ content: "Uk&#322;ad kafelkowy?" } &::after{ content: "Je&#347;li w&#322;&#261;czysz t&#261; opcj&#281;, strona g&#322;&#243;wna b&#281;dzie u&#322;o&#380;ona w kszta&#322;cie kafelkow zamiast listy temat&#243;w." } } [data-setting="focus-sidebar-sticky"] .focus-editor-text{ &::before{ content: "Przyklejony pasek boczny?" } &::after{ content: "Je&#347;li w&#322;&#261;czysz t&#261; opcj&#281;, pasek boczny b&#281;dzie przesuwa&#322; si&#281; w g&#243;r&#281; i d&#243;&#322; wraz z przewijaniem storny." } } [data-setting="focus-sidebar-flip"] .focus-editor-text{ &::before{ content: "Po kt&#243;rej stronie pasek boczny?" } &::after{ content: "Je&#347;li w&#322;&#261;czysz t&#261; opcj&#281;, pasek boczny zmieni pozycje z prawej na lew&#261;."} } [data-setting="focus-snow"] .focus-editor-text{ &::before{ content: "Aktywowa&#263; &#347;nieg?" } &::after{ content: "Po aktywacji animowany &#347;nieg spada na twoj&#261; przegl&#261;dark&#281;." } } [data-setting="focus-confetti"] .focus-editor-text{ &::before{ content: "Aktywowa&#263; konfeti?" } &::after{ content: "Je&#347;li ta opcja jest w&#322;&#261;czona, animowane konfetti b&#281;d&#261; wy&#347;wietlane w przegl&#261;darce." } } [data-setting="focus-countdown"] .focus-editor-text{ &::before{ content: "Poka&#380; odliczanie?" } &::after{ content: "Je&#347;li ta opcja jest w&#322;&#261;czona, odliczanie b&#281;dzie wy&#347;wietlane u g&#243;ry strony." } } [data-setting="focus-dimension-parallax"] .focus-editor-text{ &::before{ content: "Aktywuj efekt paralaksy?" } &::after{ content: "Po w&#322;&#261;czeniu do nag&#322;&#243;wka stosowany jest efekt paralaksy." } } [data-setting="focus-aperture-background"] .focus-editor-text{ &::before{ content: "T&#322;o Paralaksy?" } &::after{ content: "Po w&#322;&#261;czeniu tapeta b&#281;dzie animowana i zamazana w miar&#281; przewijania strony." } } .focus-timer [data-countdown-text="week,"]::before{ content: "tydzie&#324;,"; } .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&#324; i"; } </xf:if> /* ---------------- - Global ---------------- */ // Set variables to allow easier debugging :root{ --node-grid-padding: @node-grid-padding; --grid-node-width: @grid-node-width; --mobile-sticky-top: @mobile-sticky-top; } .p-pageWrapper{ // Localize z-index z-index: 1; // Remove default 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; // 100vw - 20px max-width: @xf-pageWidthMax; } } // Apply fluid width to screen sizes only when the fluid width will actually be wider than the fixed width @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)){ // Reset widths of elements if they're wrapped with focus-width .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; // 100% is used instead of auto to fix an IE 11 bug 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> // Make placeholder text more visible .input { &::placeholder{ color: inherit; opacity: @input--placeholder; } &:focus, &.is-focused { &::placeholder{ color: inherit; opacity: @input--placeholder-active; } } } // Make sure search fields aren't black input[type="search"]{ color: inherit; } /* ---------------- - Header ---------------- */ // Make header show on all devices #header{ display: block; } // If a header ad exists, hide the search bar #header .focus-ad:empty, #header .focus-ad:not(:empty) + .focus-wrap-search{ display: none; } // Remove default .p-header-inner{ padding: 0; } .p-header-content{ padding: 0; flex-wrap: nowrap; max-width: @p-header-content--max-width; margin: 0 auto; } /* ---------------- - Logo ---------------- */ .p-header-logo{ // Remove defaults 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; } // Mobile logo height @media (max-width: @xf-responsiveMedium){ height: @xf-xenfocus_logoHeightMobile*1px; } } // Space out images and text .focus-logo > * + *{ margin-left: @focus-logo-image--margin; } <xf:if is="property('xenfocus_logoType') != 'image'"> // Text logo .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> // Restrict logo image &.p-header-logo--image img{ font-size: 1px; max-height: @logo-image-height - @logo-reduce-image-height-by; @media (max-width: @xf-responsiveMedium){ // max-width: ~"calc(100vw - (@xf-pageEdgeSpacer * 2))"; max-height: @mobile-logo-image-height - @mobile-logo-reduce-image-height-by; } } // Stretch so we can center logo on mobiles @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> } } // Mini logo on mobiles .focus-mobile-navigation{ flex: 1 1 auto; display: flex; align-self: stretch; @media (min-width: (@xf-responsiveMedium+1px)){ display: none; } } // Show header on mobile, otherwise hide it and use inline logo <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> /* ---------------- - Navigation ---------------- */ // The logo shrink value is set to 1 .focus-wrap-nav{ flex: 0 2 auto; overflow: hidden; } // Hide header elements on mobiles depending on location @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; } } } // Make sure the logo and navigation don't squash into each other .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; } } // Secondary navigation bar .p-sectionLinks-list .p-navEl{ border-radius: 4px; } // Remove box-shadow from sticky nav .p-navSticky.is-sticky{ box-shadow: none; } // Align items into presumably intended layout .p-nav-inner{ align-items: center; justify-content: space-between; // Not necessary for flex layout &::before, &::after{ display: none; } } @media (max-width: @xf-responsiveMedium){ .has-js .p-nav-inner{ min-height: 44px; } } // Remove default .p-nav-scroller{ margin: 0; } .p-nav-list{ // Set navigation height using line-height instead of padding line-height: @xf-xenfocus_navHeight*1px; .p-navEl-link, .p-navEl-splitTrigger{ padding-top: 0; padding-bottom: 0; } // Inherit link colour a{ color: inherit; } // Remove spacers at start and end. Testing required &::before, &::after{ width: 0; } // Assign font-size > li{ font-size: xf-default(@xf-publicNavTab--font-size, @xf-fontSizeNormal); // If margins exists, remove them from the first and last children since they're likely unnecessary &:first-child .p-navEl{ margin-left: 0; } &:last-child .p-navEl{ margin-right: 0; } } } // Flex layout for links instead of floats .p-navEl{ display: flex; &::before, &::after{ display: none; } } .p-navEl-link{ flex: 1 1 auto; } // Inherit border-radius .focus-content .p-navSticky:not(.is-sticky), .focus-content .p-nav{ border-top-left-radius: inherit; border-top-right-radius: inherit; } // Ensure border-radius works even after the sticky class is applied .p-navSticky.is-sticky .p-nav .p-nav-list .p-navEl.is-selected, .p-navSticky.is-sticky .p-nav .p-account, // Remove defaults .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; } // Remove transition effect .p-nav-list .p-navEl, .p-navEl-link, .p-navEl-splitTrigger{ transition: none; } // Assign tab trigger background to a pseudo element for easy inherit .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; } } // Remove hover effect from link sections .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen){ .p-navEl-link:hover, .p-navEl-splitTrigger:hover{ background: none; } } // Remove the line which separates the text and arrow, when the menu is sticky .p-navSticky--primary.is-sticky .p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger::before{ display: none; } // Always show the dropdown arrow, which also prevents the jolt after scrolling .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; } // Remove sub-navigation menu .focus-dropdown-nav(@debug) when (@debug = true) { .p-sectionLinks{ display: none; } } .focus-dropdown-nav(@focus-dropdown-nav); // Navigation icons .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); } } // Remove icon added by 3rd party addon [data-nav-id="siropuChat"] > i{ display: none; } </xf:if> // Navigation scrollers: Force the buttons to use the same colours as navigation links .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%); } } // If the navigation is placed inside the header, change the fade gradient of the navigation scrollers <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> // Place the scroller arrows outside of the navigation .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; } } /* ---------------- - User links ---------------- */ .focus-wrap-user{ flex: 0 0 auto; // Style the user links wrapper on desktop @media (min-width: (@xf-responsiveMedium + 1px)){ // Possibly helpful when assigning border-radius since the search link may be shown <xf:if is="property('xenfocus_userlinksRadius') === 'parent'"> overflow: hidden; </xf:if> .xf-xenfocus_userStyles(); } // Change colour and radius for mobile user links @media (max-width: @xf-responsiveMedium){ .p-nav-inner &{ border-radius: 3px; color: @mobile-navigation-bar--color; } } } // Reset default styles and inherit border-radius .p-nav-opposite{ @media (min-width: (@xf-responsiveMedium + 1px)){ margin: 0; } } // Set defaults .p-navgroup{ display: flex; background: transparent; > *{ flex: 0 0 auto; } } .p-navgroup-link{ align-items: center; background-clip: padding-box !important; // Remove borders from default code if they aren't removed in the next code block <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; // Remove width restriction on icons &.p-navgroup-link--iconic i::after{ width: auto; min-width: 0px; } @media (min-width: (@xf-responsiveMedium + 1px)){ // Keep a neat ratio with links min-width: @xf-xenfocus_userHeight*1px; #XF &{ // Assign border-radius based on parent/children setting <xf:if is="property('xenfocus_userlinksRadius') === 'children'"> border-radius: @user-border-radius; <xf:else /> border-radius: 0; </xf:if> // Add border separator to user links <xf:if is="property('xenfocus_userSep')"> border-left: @user-links-sep solid @user-border-color; </xf:if> } // Make sure first account link has no left border <xf:if is="property('xenfocus_userSep')"> #XF .p-account &:first-of-type{ border-left-width: 0px; } </xf:if> // Desktops: Hover and active effects &.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){ // Set height to 40px on mobiles to match hamburger height: 40px; #XF &{ border-radius: @user-links-radius-mobile; } // Mobiles: Hover and active effects &.is-menuOpen, &:hover{ color: @mobile-navigation-bar--color; background-color: fade(@mobile-navigation-bar--color, 15%); } } } // Remove default gap from user links and search link .p-navgroup.p-discovery{ margin: 0; } // User links alignment .p-navgroup-link--user{ // Required to make sure avatar shows on mobiles &.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> // Rearrange coding for truncated usernames &.p-navgroup-link{ max-width: none; } } // Notifications alignment .p-navgroup-link--conversations, .p-navgroup-link--alerts{ &.badgeContainer::after{ left: auto; right: 4px; } } // Hide whats new link since the flex property shows it @media (min-width: (@xf-responsiveMedium + 1px)){ .p-navgroup-link--whatsnew{ display: none; } } // Add icons to guest links .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); } // Register button <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> // Change icon of New Content .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; } // Remove box-shadow from active links .p-nav-list .p-navEl.is-menuOpen, .p-navgroup-link.is-menuOpen{ box-shadow: none; } // Bug fix: Restore full opacity since separator borders are also faint .p-navgroup-link.badgeContainer{ opacity: 1; } // Alter colours of user drop-down menu .js-visitorMenuBody .menu-row--highlighted{ background: @xf-contentAltBg; } // Hide search link <xf:if is="!property('xenfocus_searchLink')"> @media (min-width: (@xf-responsiveMedium + 1px)){ .p-discovery{ display: none; } } </xf:if> <xf:if is="property('xenfocus_searchBar')"> /* ---------------- - Search bar ---------------- */ .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; // Hide search on medium width @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%; // IE 11 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; } // Button icons @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> /* ---------------- - xenfocus Editor ---------------- */ @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; // Remove tap background from iOS -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; } } // Hide certain settings from mobiles @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; // Background &::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; // Fix iOS glitchy animation 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> /* ---------------- - Breadcrumbs ---------------- */ // Align breadcrumbs and social icons .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; } } // Remove default margins .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 */ &:hover::before, &:hover::after{ background: @breadcrumb-hover; } /* Active */ &: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); // Remove the bottom breadcrumb bar on the forum index [data-template="forum_list"] .p-breadcrumbs-wrap--bottom{ display: none; } /* ---------------- - Social icons ---------------- */ <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; } // Icon &::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; } } // Border and hover &::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); } // Icon only #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> /* ---------------- - Background Picker ---------------- */ .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{ //transform:scale(0.95); //transform-origin: 50% 50%; //transform: translateY(2px); } // Hide thumbnails when editor is hidden to prevent the images from loading html:not(.focus-picker--loaded) &{ background-image: none !important; } // Size &::before{ content: ''; display: block; padding-bottom: 100%; } // Border &::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; /* display: flex; align-items: center; justify-content: center; .m-faBase(); .m-faContent(@fa-var-check); font-size: 36px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; // top: -20px; bottom: -20px; // transform: translateY(20px); 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{ // transform: translateY(0); opacity: 0.8; } } } // Apply border to selected thumbnail <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> // Make sure thumbnail images aren't fixed .focus-picker span[data-focus-bg]{ background-attachment: scroll; } </xf:if> /* ---------------- - Content wrapper ---------------- */ // Wrap all content .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; // If the content is wrapped, a margin is presumably required <xf:if is="property('xenfocus_wrapperStyles--background-color')"> .focus-width &{ margin-bottom: 10px; } </xf:if> } .focus-content(); } // Remove borders and border-radius for mobiles @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; // Ensure content doesn't touch the edges of the browser when in desktop view 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> } } // Inherit border-radius on child elements, just because.. .p-body, .p-body-inner{ border-radius: inherit; } /* ---------------- - Nodes ---------------- */ // Make subforum icons inherit link colour when they're displayed in a list .subNodeLink::before, .subNodeLink.subNodeLink--unread::before{ text-shadow: none; color: inherit; } .subNodeLink::before{ width: 1.5em; padding-right: 0px; } // Subforum grid .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); // Add spacer between stats on smaller screens, when not using 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); // Bold topic title .node-extra-title{ font-weight: 600; } //@media (min-width: (@xf-responsiveMedium + 1px)){ .node-extra .node-extra-row .listInline{ overflow: hidden; text-overflow: ellipsis; } //} // Inherit colour for latest username .node-extra-user a{ color: inherit; } // Add small margin between last topic title and username @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; } } // Larger topic and post stats .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> // Round off last topic to prevent square corner. Visible when zebra striping is enabled. .structItem:last-child{ border-bottom-left-radius: @xf-blockBorderRadius; border-bottom-right-radius: @xf-blockBorderRadius; } /* ---------------- - Node cell spacing ---------------- */ .node-body{ padding: @node-extra-padding; } /* ---------------- - Node icons ---------------- */ <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; } } /* Assign FontAwesome icon to nodes */ .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> } /* On mobiles.. */ <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> } /* If an image is uploaded, apply it and remove potential other styles */ <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 NEW badge ---------------- */ .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> /* ---------------- - Minimal nodes and topic lists, with hover ---------------- */ // Minimal layout with hover rows @nodeHover-padding: 0px; @nodeHover-opacity: 0.06; @nodeHover-background: @xf-linkColor; <xf:if is="property('xenfocus_tableLayout') != 'standard'"> @media (min-width: (@xf-responsiveMedium + 1px)){ /* .block--category{ <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> // Increase padding of index boxes .block-body{ padding: @nodeHover-padding 0; } </xf:if> // Add background hover effect .node{ position: relative; <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> border-radius: @xf-blockBorderRadius; border: 0; </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; } // Clickable rows <xf:if is="property('nodeListDescriptionDisplay') != 'tooltip'"> .node 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; // Potentially helps with Safari bug but not sure transform: translate(0,0); } } </xf:if> } */ .node{ position: relative; <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> border-radius: @xf-blockBorderRadius; // The inline-block style prevents margins from collapsing 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; } // Clickable rows <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; // Potentially helps with Safari bug but not sure 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> /* ---------------- - Guest message ---------------- */ .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; // Hide message on certain pages .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; //text-transform: uppercase; 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{ /* .xf-xenfocus_guestInternalStyle(); <xf:if is="property('xenfocus_guestInternalStyle--background-color')"> background-image: linear-gradient(to top, lighten(@xf-xenfocus_guestInternalStyle--background-color, 7%) 0%, @xf-xenfocus_guestInternalStyle--background-color 100%); box-shadow: inset xf-intensify(@xf-xenfocus_guestInternalStyle--background-color, 20%) 0px 1px 4px; </xf:if> border-radius: inherit; padding: 14px; .xenfocus_guestInternalStyle(); */ 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); //border-right: 1px solid fade(desaturate(darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 15%), 15%), 80%); } &::after{ //background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%); //box-shadow: inset rgba(255,255,255,0.13) 0px 1px 0px; } 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> /* ---------------- - Footer ---------------- */ // Footer .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; } } // Remove margin on RSS icon .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; } } // IE11 bug: Make sure footer links don't cause horizontal scrollbar @media (max-width: @xf-responsiveNarrow){ .p-footer-linkList, .p-footer-copyright{ max-width: ~"calc(100vw - 18px)"; } } /* ---------------- - Mega footer ---------------- */ <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> /* ---------------- - Grid layout for nodes ---------------- */ <xf:if is="property('xenfocus_gridEnable') OR property('xenfocus_gridToggle')"> // Hide the grid panel for old browsers, and show it using @supports .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; // Add a background and padding to the grid wrapper if no background exists on the main content wrapper <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; // Overwrite the inline-styles from the minimal layout <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'))"> /* i{ color: inherit !important; } */ </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; // Ensure the avatar is shown on mobiles 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; } // Truncate long topic titles using ellipsis .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')"> // Hide the node stats in grid view if setting is enabled 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; } // Colour scheme: normal or wallpaper <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> } } } // Assign node wallpapers <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 stats on smaller screens for a cleaner look .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> /* ---------------- - Blocks ---------------- */ .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(); } // If shadows are added to blocks, remove them from ones which don't need them .blockMessage.blockMessage--none, .block--messages .block-container{ box-shadow: none; } .block-header{ .block-desc{ color: inherit; opacity: 0.7; } .button{ text-shadow: none; } } // Move block wrap from container to body .block-container-shift(@debug) when (@debug = true) { .block--category{ .block-container{ border-width: 0; box-shadow: none; background: none; .focus-block-container-shift(); } // The #XF is required to overwrite the border-radius defined by: .block-container:not(.block-container--noStripRadius) > :first-child #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; } // Inherit border-radius for last forum in each category .block-body > .node:last-child{ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } // Fix collapsed margins on sidebar block headers .p-body-sidebar .block-container, .p-body-sideNavContent .block-container{ padding: .01px 0; } /* ---------------- - Mobile navigation panel ---------------- */ .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; } } /* ---------------- - Countdown ---------------- */ <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; } // Hide text depending on countdown state &.focus-timer-done .focus-timer-desc-done, &.focus-timer-counting .focus-timer-desc, &.focus-timer-counting .focus-timer-numbers{ display: block; } } // Text for Weeks, days, etc [data-countdown-text]::before{ content: attr(data-countdown-text); } </xf:if> /* ---------------- - Topic List ---------------- */ // Align topic avatar to middle .structItem-cell{ vertical-align: middle; } // Remove padding from end avatar since its parent alignment is set to center .structItem-cell.structItem-cell--icon.structItem-cell--iconEnd .structItem-iconContainer{ padding-top: 0; } // Restore top alignment for quick topic form form[data-xf-init*="quick-thread"] .structItem-cell--icon{ vertical-align: top; align-self: flex-start; } // Sync Replies and Views text .structItem-cell--meta .pairs{ font-size: @xf-fontSizeSmaller; } .structItem-minor dd{ color: @xf-textColor; } // Sticky thread separator .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> } // Make topic start date light in colour .structItem-parts > li:nth-child(2n){ color: inherit; } /* ---------------- - Topic View ---------------- */ // Sticky author <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> // Remove arrow, just because.. .message-userArrow{ display: none; } // Online icon .message-avatar-wrapper .message-avatar-online::before{ background: #fff; border-color: #fff; } // Remove border from post date for minimalism .message-attribution{ border-width: 0; padding-bottom: 6px; @media (min-width: (@xf-responsiveMedium + 1px)){ padding-top: 2px; } } // Fade the date and moderation links in an attempt to reduce clutter in posts <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> // Remove user panel background and border <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; // padding-right: 0; } } </xf:if> // User badge .userBanner{ border-radius: @xf-borderRadiusMedium; padding-top: 3px; padding-bottom: 3px; .message-userBanner &{ margin-top: 5px; } } // Post font-size .message-body{ font-size: @xf-fontSizeNormal + 1px; line-height: 1.75; // Reduce margins above posts because the line separator no longer exists (configured above) margin-top: 4px; // Make sure links are easy to recognise a{ text-decoration: underline; } } // Place like bar above buttons /* .message-footer{ display: flex; flex-direction: column; > *{ flex: 0 0 auto; width: 100%; } .reactionsBar{ order: -1; } } */ // Restyle reactions bar .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; } } // Style post buttons .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%); } } } // Add padding to Like button .actionBar-action.actionBar-action--reaction .reaction-text{ padding-left: 5px; } } .actionBar-action.actionBar-action--inlineMod label{ color: inherit; } </xf:if> // Like bar .likeIcon::before{ color: @xf-textColorDimmed; } // Remove underline from Like button a.reaction:hover .reaction-text, a.reaction:focus .reaction-text{ text-decoration: none; } // Force normal text color on active reactions to prevent poor contrast .reset-reaction-text(@debug) when (@debug = true) { .has-reaction .reaction-text{ color: inherit; } } .reset-reaction-text(@reset-reaction-text); // Reaction popup box .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'"> // Add background to embeds such as facebook .bbWrapper iframe{ background: #bbb; } </xf:if> // Swap Preview and Post buttons .message--quickReply .formButtonGroup-primary, body[data-template="forum_post_thread"] .formSubmitRow-controls{ display: flex; align-items: center; .button--primary{ order: 1; margin-left: 5px; } } // Polls .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; } // Space out username in left column @media (min-width: (@xf-responsiveWide + 1px)){ .message-name{ margin-top: 10px; } } @media (max-width: @xf-responsiveMedium){ // Align username vertically with avatar on mobiles .message:not(.message--forceColumns) .message-user{ align-items: center; } // Remove bottom margin to ensure avatar is aligned correctly .message-avatar-wrapper{ margin-bottom: 0; } } // Remove margin-top from bbcode boxes if they're the first child .bbCodeBlock:first-child{ margin-top: 0; } /* ---------------- - Editor ---------------- */ .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'"> // Fix webkit browser selection .fr-wrapper ::selection { background: #fff; color: #222; } </xf:if> /* ---------------- - Profiles ---------------- */ // Inherit border-radius .memberHeader, .memberHeader-main{ border-top-left-radius: inherit; border-top-right-radius: inherit; } /* ---------------- - Sidebar ---------------- */ // Prevent horizontal scrollbar on themes with no background on the content wrapper <xf:if is="!property('xenfocus_wrapperStyles--background-color')"> @media (max-width: @xf-responsiveWide){ .p-body-sidebar{ margin-left: 0; margin-right: 0; } } </xf:if> // Sidebar icons, widget icons .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); } } // Remove icons from 3rd party widget headers and use pseudo elements for consistency .block[data-widget-definition="sytrySupportUs"] .block-minorHeader .fa, .block[data-widget-definition="calendarEvents"] .block-minorHeader .far{ display: none; } } .focus-sidebar-icons(@focus-sidebar-icons); // Neaten spacing of blocks on mobiles @media (max-width: @xf-responsiveWide){ .p-body-sidebar > *{ margin-bottom: 10px; } } /* ---------------- - Sticky sidebar ---------------- */ .focus-editor-panel[data-setting="focus-sidebar-sticky"]{ display: none; } // Recode sidebar into flex layout @media (min-width: (@xf-responsiveWide + 1px)){ .p-body-main--withSidebar{ display: flex; align-items: flex-start; .p-body-content{ // These values are all necessary to ensure the media slider works. Do not change flex: 0 1 auto; display: block; width: ~"calc(100% - @xf-sidebarWidth)"; } .p-body-sideNav, .p-body-sidebar{ flex: 0 0 auto; // IE fix display: block; } // Remove the table-column elements .p-body-contentCol, .p-body-sidebarCol{ display: none; } } // Switch sidebar to left side if enabled .focus-sidebar-flip .p-body-sidebar{ order: -1; } // And adjust padding .focus-sidebar-flip{ .p-body-main--withSidebar .p-body-content{ padding-right: 0; padding-left: @content-padding; } } // Sticky side blocks <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'"> /* ---------------- - Animated 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; } /* Hide snow on tablets and mobiles */ @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'"> /* ---------------- - Animated 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); } } /* Hide snow on tablets and mobiles */ @media screen and (max-width:979px){ .focus-editor-panel[data-setting='focus-confetti'], .xenfocus-confetti{ display: none; } } </xf:if> /* ---------------- - Holidays ---------------- */ <xf:if is="property('xenfocus_holiday') != 'none'"> .focus-logo--holiday{ height: 100%; display: flex; align-items: center; } </xf:if> // Valentines <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> // Halloween <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> /* ---------------- - Pagination ---------------- */ .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; } } // Make border-radius inherit from parent .pageNavWrapper{ border-radius: @pagination-radius; } .pageNav, .pageNav-main, .pageNavSimple, .pageNav-jump, .pageNavSimple-el, #XF .pageNav-page{ border-radius: inherit; } // Style pagination buttons #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; //color: contrast(@pagination-page, rgba(0,0,0,0.8), #fff); } } // Active page .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%); } } // First and Last buttons on mobiles .pageNavSimple-el{ padding-left: 10px; padding-right: 10px; } } // Add space around prev/next arrow .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); /* ---------------- - Mobile footer bar ---------------- */ <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')"> // If toggling is allowed, hide the mobile footer if it has been disabled 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); } } // Hide the footer bar and its toggle on desktops @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; } // Adjust elements to accommodate for the bottom bar @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)"; } } } // Active icons [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> /* ---------------- - Animated blocks onload ---------------- */ /* @keyframes loading-blocks{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: translateY(0px); } } @supports (animation-name: name){ .block--category, .p-body-sidebar .block{ opacity: 0; transform: translateY(30px); animation-name: loading-blocks; animation-duration: 0.4s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-delay: 0s; &:nth-child(2){ animation-delay: 0.1s; } &:nth-child(3){ animation-delay: 0.2s; } &:nth-child(4){ animation-delay: 0.3s; } } } */ /* ---------------- - iPhoneX Landscape ---------------- */ // iPhoneX landscape padding @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))"; } // Remove default .p-nav-inner{ padding-left: 0; padding-right: 0; } } /* ---------------- - Post thread pop up ---------------- */ <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; } // Hover .block-row.block-row--clickable:hover{ background: @treeEntryChooser-header--hover; } // Forums without a category > .block-container > .block-row:first-child{ margin-top: 30px; } } /* ---------------- - Other ---------------- */ // Ensure bottom margin is the same size as content padding @media (min-width: (@xf-responsiveEdgeSpacerRemoval + 1px)){ .p-body-header{ margin-bottom: @content-padding; } } // Hide elements based on desktop or mobile @media (min-width: (@xf-responsiveMedium + 1px)){ .hide\:desktop{ display: none !important; } } @media (max-width: @xf-responsiveMedium){ .hide\:mobile{ display: none !important; } } // Media gallery .itemList-itemOverlay { height: auto; bottom: -70px; } // Remove transition from social links .shareButtons-button{ transition: none; } // Scroll buttons .button.button--scroll, a.button.button--scroll { //box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.25); box-shadow: none; border-color: transparent; } // Staff bar .p-staffBar{ border: 0; border-radius: @xf-blockBorderRadius; margin-bottom: 10px; } // Admin and moderator bar .p-staffBar-inner{ padding-left: 4px; padding-right: 4px; // Reset default 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; } } // Add a background to certain boxes if a wallpaper design is used .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 .node-description{ margin-top: 5px; color: @xf-textColorMuted; } // Soften shadows on menus .menu{ box-shadow: 0 5px 30px 0 rgba(0,0,0,0.25), rgba(0,0,0,0.15) 0px 3px 5px; } // Tooltip blur .tooltip--basic .tooltip-content{ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } // Avatars .avatar{ position: relative; //box-shadow: rgba(0,0,0,0.1) 0px 3px 10px; 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> } // Fix alignment in 'Edit Avatar' box &.js-avatarCropper{ top: 0 !important; left: 0 !important; } } /* ---------------- - Tooltips: Minimal layout for user popups, topic previews, etc ---------------- */ /* body{ .tooltip--bookmark .tooltip-content, .tooltip--member .tooltip-content, .tooltip--share .tooltip-content { border-width: 0px; box-shadow: 0 10px 15px 0 rgba(0,0,0,0.15), rgba(0,0,0,0.08) 0px 0px 0px 1px; } .tooltip--member.tooltip--top .tooltip-arrow{ border-top-color: rgba(0,0,0,0.1); } .memberTooltip-header{ background-color: transparent; } .memberTooltip-header, .memberTooltip-info, .memberTooltip-actions{ padding: 15px; } } */ /* ---------------- - BB code tag ---------------- */ <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; } } } // Prevent code block titles from being copied .bbCodeBlock--code .bbCodeBlock-title{ -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; } /* ---------------- - Bug fixes ---------------- */ // [BS] Live forum statistics .lfs .tabGroup .structItem{ display: table; > *{ display: table-cell; } } .lfs .tabGroup .structItem-cell--secondData { display: none; } // Fix alignment of icons on Media Upload page .mediaList.mediaList--buttons > .mediaList-button .mediaList-inner::before{ width: 100%; } // Fix border color on consecutive blocks (such as profiles) .block-body + .block-minorHeader{ border-top-color: @xf-blockMinorHeader--border-color; } // Fix 3rd party addon: similar threads <xf:if is="property('xenfocus_tableLayout') != 'standard'"> @media (min-width: (@xf-responsiveMedium + 1px)){ .block--similarContents .structItem{ display: flex; } } </xf:if> // Attach image popup box in editor .fr-popup .fr-input-focus { background: @xf-paletteNeutral1; } // Insert code #XF .cm-s-default.CodeMirror .CodeMirror-gutters{ background: @xf-paletteColor1; color: @xf-paletteColor5; border-color: transparent; } // Remove the border on the notice system in dark themes <xf:if is="property('styleType') == 'dark'"> .notice{ border-color: transparent; border-top-color: rgba(255,255,255,0.3); } </xf:if> // Reduce z-index to prevent "Click to expand" quotes from overlapping fixed headers .bbCodeBlock-expandLink{ z-index: 1; } // Assign a more appropriate background to overlays since they currently use the page background .overlay{ background: @xf-contentBg; } // Correctly align icon in "incorrect password" message .blockMessage--iconic::before{ top: 50%; transform: translateY(-50%); } // Prevent wide menu's from spilling over mobiles: This occurred with the search menu .menu.menu--wide{ max-width: ~"calc(100wv - 6px)"; } // Make the css-checkbox inherit colours of surrounding text label.iconic > input + i::before, label.iconic > input + i:hover::before, label.iconic:hover > input + i::before{ color: inherit; } // Clear floated user links .p-nav-opposite{ .m-clearFix(); } // Correctly colour the arrows in the date picker .pika-prev, .pika-next{ color: inherit; } // [AL] Original Poster Highlight div.ribbonBox .ribbon-wrapper{ z-index: 1; } // Fix anti-spam plugin on Quick Thread .structItem > script{ display: none; } // Modify borders and hover color of buttons by using modified mixins .focus-m-buttonColorVariation(@bgColor; @textColor){ .m-buttonBorderColorVariation(@bgColor); &:hover, &:active, &:focus{ background-color: xf-intensify(@bgColor, 5%); } } // button--splitTrigger has been removed since it doesnt appear in any HTML template. Maybe redundant? .focus-m-buttonBlockColorVariationSimple(@color){ .focus-m-buttonBorderColorVariation(@color); /* &:not(.button--splitTrigger):not(.button--provider), &.button--splitTrigger:not(.button--provider) > .button-text, &.button--splitTrigger:not(.button--provider) > .button-menu{ &:hover, &:focus, &:active{ background-color: xf-intensify(@color, 5%); } } */ // Instead of the above, use this... &:not(.button--provider){ &:hover, &:focus, &:active{ background-color: xf-intensify(@color, 5%); } } } .focus-m-buttonBorderColorVariation(@borderColor){ border-color: xf-intensify(@borderColor, 9%); /* &.button--splitTrigger{ > .button-text { border-right-color: xf-intensify(@borderColor, 9%); } > .button-menu { border-left-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)); } } // Buttons in block-header .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')"> // Advanced search menu $('.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'); }); // xenfocus editor: open and close with data-xenfocus-editor $("[data-xenfocus-editor]").on('click', function(event){ html.toggleClass('focus-editor-open').addClass('focus-picker--loaded'); event.preventDefault(); }); // ..and close by pressing ESC $(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(){ // This value is used for cookie names and class names. 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)'); } } }); // Change the class and cookie when the toggle is clicked $('.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')"> // Theme editor is enabled. Check for selected toggle, otherwise apply default if(allowToggle === 1){ cookie = getCookie(settingName); if( (cookie === 'on') || (!cookie && (settingOn === 1)) ){ addClass(xfhtml, settingName); } } else if(settingOn === 1){ addClass(xfhtml, settingName); } <xf:else /> // Theme editor is disabled, so simply apply the setting if enabled in ACP 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> /* ---------------- - Global ---------------- */ <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; } } /* ---------------- - Backgrounds ---------------- */ // Background picker elements 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(); } } /* ---------------- - Header ---------------- */ @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; } /* ---------------- - Navigation ---------------- */ .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); } } // Second navigation bar .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%); } } // Navigation links: border-radius, box-shadow, etc #XF .p-nav-list{ li{ // border } .p-navEl{ border-radius: 3px; // Active tab &.is-selected{ } // Dropdown active tab &.is-menuOpen{ } } } // Style the sub-navigation bar, if enabled .p-sectionLinks{ background: none; border: 0; margin-bottom: 10px; } /* ---------------- - User panel ---------------- */ .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); } /* ---------------- - Breadcrumbs ---------------- */ .xenfocus_breadcrumb(){ } <xf:if is="property('styleType') === 'dark'"> .p-breadcrumbs::before{ border-width: 1px 0px 0px 0px; } </xf:if> /* ---------------- - Content wrapper ---------------- */ .p-pageWrapper(){ } .focus-content(){ } /* ---------------- - Blocks ---------------- */ @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); //border-width: 1px 0px 0px 0px; 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%); } /* ---------------- - Footer ---------------- */ <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> /* ---------------- - Other ---------------- */ .message-content a{ text-decoration: underline; } ]]>
</template>
</templates>
<properties>
<group group_name="urlforum" title="[Kolpak] Стиль был скачан с pawno-help.ru" description="pawno-help.ru" 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 ("Edit", "Delete", "Report", 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="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="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>"styles/xenfocus/LiveRussia/head-logo.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="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 "block" 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<br /> 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 <em>Customize Panel</em> 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 <em>Customize Panel</em> 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 <em>Customize Panel</em> 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>"<h4>Mega Footer</h4>\n<p>These footer widgets can be used to display your own custom messages.</p>"</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>"<h4>Useful links</h4>\n<ul class='focus-footer-list'>\n<li><a href='javascript:void();'>Contact us</a></li>\n<li><a href='javascript:void();'>Another helpful link</a></li>\n<li><a href='javascript:void();'>Terms and Conditions</a></li>\n</ul>"</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>"<h4>Social Links</h4>\n<p>You could even link to your social profiles, such as:</p>\n<ul class='focus-footer-list'>\n<li><a href='https://www.facebook.com/'>Facebook</a></li>\n<li><a href='https://twitter.com'>Twitter</a></li>\n<li><a href='https://youtube.com'>YouTube</a></li>\n</ul>"</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>"<h4>Footer Header</h4>\n<p>This is some example content.</p>\n<p>And this is another paragraph..</p>"</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<br /> 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 "Grid view"?" description="If the <em>Customize panel</em> 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 <a href='https://xenfocus.com/community/threads/limit-grid-view-to-specific-nodes.35634/' target='_blank' rel="noreferrer">the xenfocus support forums</a>." 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>"<p>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!</p>"</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=""Alert" captures the attention of visitors using brighter colours.<br /> "Wallpaper" 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 "Wallpaper" is selected above, and if you've assigned a background image under "Wallpaper: Image and color" 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=""New content" 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=""No new content" 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=""New content" icon weight" description="Change the font-weight of the "New content" 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=""No new content" icon weight" description="Change the font-weight of the "No new content" 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 &lt;link href="xx.css" /&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 <a href="https://xenfocus.com/community/threads/light-dark-mode.35702/" rel="noreferrer" target="_blank">Light/Dark Mode</a> 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. <a href="https://xenfocus.com/community/threads/logo-customization.35191/" target="_blank" rel="noreferrer">Learn more</a>." 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 <em>Customize panel</em> 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 "Header parallax effect"?" 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 "Search" 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 &lt;li&gt;&lt;a href="https://www.site.com/username"&gt;(optional)&lt;/a&gt;&lt;/li&gt;" property_type="value" value_type="string" depends_on="" value_group="" display_order="20" addon_id="">
<value_parameters>rows=3</value_parameters>
<value>"<li><a href='#youtube.com' target='_blank'></a></li>\n<li><a href='#facebook.com/' target='_blank'></a></li>\n<li><a href='#twitter.com' target='_blank'></a></li>\n<li><a href='#discordapp.com' target='_blank'></a></li>"</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 <em>Customize Panel</em> 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 <em>Customize Panel</em> 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 "Fluid width"?" description="If enabled, your members will be able to toggle "Fluid width" on and off using the <em>Customize Panel</em>." 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>