<style title="Uniform Light" description="https://xenfocus.com/styles/uniform/" user_selectable="1" base_version_id="2010270" export_version="2">
<templates>
<template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2010270" version_string="2.2.1">
<![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"> <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}"> <div class='focus-width'><div class="p-pageWrapper" id="top"> <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"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('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"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('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 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="$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 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> <!-- Logo bar: start --> <header class="p-header" id="header"> <div class="p-header-inner"> <div class="p-header-content"> <div class="p-header-logo p-header-logo--image"> <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}"> <xf:include template="xenfocus_mini_logo" /> <span> <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 /> <span class='focus-logo'><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> </xf:if> </span> </a> </div> {$nextToLogo|raw} </div> </div> </header> <!-- Logo bar: end --> <!-- Secondary header: start --> <xf:if is="property('publicNavSticky') == 'primary'"> <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header"> {$navHtml|raw} </div> {$subNavHtml|raw} <xf:elseif is="property('publicNavSticky') == 'all'" /> <div class="p-navSticky p-navSticky--all" data-xf-init="sticky-header"> {$navHtml|raw} {$subNavHtml|raw} </div> <xf:else /> {$navHtml|raw} {$subNavHtml|raw} </xf:if> <!-- Secondary header: end --> <div class='focus-content'> <div class="p-body"> <div class="p-body-inner"> <!--XF:EXTRA_OUTPUT--> <!-- 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:')|for_attr . ' ' . 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:')|for_attr . ' ' . 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" /> <div class='focus-breadcrumb'> <xf:macro name="breadcrumbs" arg-breadcrumbs="{$breadcrumbs}" arg-navTree="{$navTree}" arg-selectedNavEntry="{$selectedNavEntry}" /> <xf:if is="property('xenfocus_socialEnable')"><xf:include template="xenfocus_social" /></xf:if> </div> <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> </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_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:js src="{{ base_url('styles/xenfocus/js/xenfocus.js') }}?v={{ property('xenfocus_cache') }}" /> <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="$selected"> <svg data-name="curve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M0,6H6V0A6,6,0,0,1,0,6Z"/></svg> <svg data-name="curve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M6,6H0V0A6,6,0,0,0,6,6Z"/></svg> </xf:if> <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" data-arrow-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" data-arrow-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"> <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> <xf:else /> <ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}" itemscope itemtype="https://schema.org/BreadcrumbList"> <xf:macro name="crumb" arg-position="{$position}" arg-href="{$rootBreadcrumb.href}" arg-value="{$rootBreadcrumb.title}" /> </ul> </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.0.12">
<![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 Profiles Sidebar Sticky Sidebar Animated snow Holidays Animated blocks onload Pagination Mobile footer bar Post thread pop up Other Bug fixes */ // 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' } html[lang="de-DE"]{ .node--unread .node-title:before{ content: 'NEU' } .focus-editor-wrap{ content: "Themeneditor" } .focus-guest .focus-guest-header:before{ content: 'Willkommen zu ' } .structItemContainer-group--sticky:before{ content: 'Wichtige Threads' } .structItemContainer-group--sticky:after{ content: 'Normale Threads' } [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-toggle-class='focus-fluid'] .focus-editor-text{ &:before{ content: 'Flexible Breite?' } &:after{ content: 'Wenn Sie dies aktivieren, wird die Breite der Website vergr&#246;&#223;ert, sodass sie die Breite Ihres Browsers einnimmt. N&#252;tzlich f&#252;r gr&#246;&#223;ere Bildschirme.' } } [data-toggle-class='focus-grid'] .focus-editor-text{ &:before{ content: 'Gitterstruktur?' } &:after{ content: 'Wenn diese Option aktiviert ist, werden die Foren als Gitter anstelle einer Tabelle angezeigt.' } } [data-toggle-class='focus-sidebar-sticky'] .focus-editor-text{ &:before{ content: 'Klebrige Seitenleiste?' } &:after{ content: 'Wenn diese Option aktiviert ist, m&#246;chte die Seitenleiste f&#252;r einen einfachen Zugriff oben auf dem Bildschirm bleiben.' } } [data-toggle-class='focus-sidebar-flip'] .focus-editor-text{ &:before{ content: 'Seitenleiste umdrehen?' } &:after{ content: 'Flip die Seitenleiste zwischen den linken und rechten Seiten.' } } .focus-timer-numbers span{ &[data-countdown-text="week,"]::before{ content: 'woche,'; } &[data-countdown-text="weeks,"]::before{ content: 'wochen,'; } &[data-countdown-text="days and"]::before{ content: 'tage und'; } &[data-countdown-text="day and"]::before{ content: 'tag und'; } } } // Body @focus-wallpaper: true; @body-padding-top: 10px; @body-padding-bottom: 10px; @focus-fluid-width: 96; // Content width @focus-width: ~"calc(100% - (@xf-pageEdgeSpacer * 2))"; // 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; // Header <xf:if is="property('publicHeader--background-color')"> @header-padding: 20px; <xf:else /> @header-padding: 0px; </xf:if> @center-mobile-logo: true; // Logo @logo-slogan-opacity: 0.75; @logo-slogan-size: 0.5em; @logo-slogan-margin: 0.9em; @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: 0px; @user-links-icon: 14px; // Search @focus-hide-search-link: true; // Deprecated @focus-show-search-bar: true; // Deprecated @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 <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> // Breadcrumb @focus-breadcrumbs: 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>; // Background Picker @hide-picker-thumbs: true; // Social icons @social-border: 1px; @social-height: @breadcrumb-height; @social-footer-basic: true; // NEW badge @new-badge-color: #fff; @new-badge-background: #ed7a16; @new-badge: true; // Nodes @node-icon-read-filter: grayscale(1); @node-icon-read-opacity: 0.4; @node-extra-padding: 4px; @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; // Sidebar @focus-sidebar-icons: true; // Topic view @focus-post-buttons: true; @editor-bg: xf-intensify(@xf-contentBg, 1.5%); @editor-text: @xf-textColor; // Footer @mega-footer-copyright: darken(@xf-publicFooter--background-color, 5%); // Pagination @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%); /* ---------------- - Global ---------------- */ .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; } } // The below code makes these classes behave the same as .focus-width @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-width, .p-header-inner, .p-nav-inner, .p-sectionLinks-inner, .p-body-inner, .p-footer-inner{ width: @focus-width; } } .focus-width{ margin: 0 auto; // Reset widths of child elements .focus-width, .p-staffBar-inner, .p-header-inner, .p-nav-inner, .p-sectionLinks-inner, .p-body-inner, .p-footer-inner{ max-width: none; width: auto; margin: 0; } // IE 11 fix .p-body-inner{ width: 100%; } // For small max-width: 100%; // For medium @media (min-width: (@xf-responsiveMedium + 1px)) and (max-width: @xf-responsiveWide){ max-width: ~"calc(100% - (@xf-pageEdgeSpacer * 2))"; } // For large @media (min-width: (@xf-responsiveWide + 1px)){ max-width: @xf-pageWidthMax; } } // Fluid toggle @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-fluid{ .focus-width, .p-staffBar-inner, .p-header-inner, .p-nav-inner, .p-sectionLinks-inner, .p-body-inner, .p-footer-inner{ max-width: @focus-fluid-width * 1%; } .focus-width{ .p-staffBar-inner, .p-header-inner, .p-nav-inner, .p-sectionLinks-inner, .p-body-inner, .p-footer-inner{ max-width: 100%; } } } } .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; } } /* ---------------- - Flexbox ---------------- */ .flex, .flex-inline{ display: flex; align-items: center; justify-content: flex-start; } .flex-inline{ display: inline-flex; } // Set defaults: elements only occupy necessary space .flex > *, .flex-inline > *{ flex: 0 0 auto; } .flex-aS{ align-items: flex-start; } .flex-aC{ align-items: center; } .flex-aE{ align-items: flex-end; } .flex-aF{ align-items: stretch; } .flex-jS{ justify-content: flex-start; } .flex-jC{ justify-content: center; } .flex-jE{ justify-content: flex-end; } .flex-jA{ justify-content: space-around; } .flex-jB{ justify-content: space-between; } .flex00{ flex: 0 0 auto; } .flex10{ flex: 1 0 auto; } .flex11{ flex: 1 1 auto; } .flex01{ flex: 0 1 auto; } .flex-column{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } @media (max-width: @xf-responsiveMedium){ .flex-aS-m{ align-items: flex-start; } .flex-aC-m{ align-items: center; } .flex-aE-m{ align-items: flex-end; } .flex-aF-m{ align-items: stretch; } .flex-jS-m{ justify-content: flex-start; } .flex-jC-m{ justify-content: center; } .flex-jE-m{ justify-content: flex-end; } .flex-jA-m{ justify-content: space-around; } .flex-jB-m{ justify-content: space-between; } .flex00-m{ flex: 0 0 auto; } .flex10-m{ flex: 1 0 auto; } .flex11-m{ flex: 1 1 auto; } .flex01-m{ flex: 0 1 auto; } .flex-column-m{ flex-direction: column; } .hide-m{ display: none; } } @media (max-width: @xf-responsiveNarrow){ .flex-aS-n{ align-items: flex-start; } .flex-aC-n{ align-items: center; } .flex-aE-n{ align-items: flex-end; } .flex-aF-n{ align-items: stretch; } .flex-jS-n{ justify-content: flex-start; } .flex-jC-n{ justify-content: center; } .flex-jE-n{ justify-content: flex-end; } .flex-jA-n{ justify-content: space-around; } .flex-jB-n{ justify-content: space-between; } .flex00-n{ flex: 0 0 auto; } .flex10-n{ flex: 1 0 auto; } .flex11-n{ flex: 1 1 auto; } .flex01-n{ flex: 0 1 auto; } .flex-column-n{ flex-direction: column; } .hide-n{ display: none; } } /* ---------------- - 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; @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-width &{ padding: 0 @header-padding; } } } /* ---------------- - Logo ---------------- */ .p-header-logo{ // Remove defaults margin: 0; max-width: none; a{ height: @xf-xenfocus_logoHeight*1px; color: xf-default(@xf-xenfocus_logoColor, inherit); display: inline-flex; align-items: center; justify-content: center; font-family: xf-default(@xf-xenfocus_logoFont, inherit); font-size: @xf-xenfocus_logoSize*1px; vertical-align: top; @media (max-width: @xf-responsiveMedium){ font-size: @xf-xenfocus_logoSizeMobile*1px; } // Mobile logo height @media (max-width: @xf-responsiveMedium){ height: @xf-xenfocus_logoHeightMobile*1px; } } // Mini logo .focus-mini-logo{ display: flex; align-items: center; justify-content: flex-start; height: @xf-xenfocus_logoHeight*1px; margin-right: 20px; // Mobile logo height @media (max-width: @xf-responsiveMedium){ height: @xf-xenfocus_logoHeightMobile*1px; } } // Text logo span{ line-height: 1; display: block; } .focus-logo-slogan{ opacity: @logo-slogan-opacity; font-size: @logo-slogan-size; margin-top: @logo-slogan-margin; white-space: nowrap; } // Restrict logo image &.p-header-logo--image img{ max-height: @xf-xenfocus_logoHeight*1px; @media (max-width: @xf-responsiveMedium){ max-width: 100vw; max-height: @xf-xenfocus_logoHeightMobile*1px; } } // Stretch so we can center logo on mobiles @media (max-width: @xf-responsiveMedium){ width: 100%; .center-mobile-logo(@debug) when (@debug = true) { text-align: center; a{ align-items: center; } } .center-mobile-logo(@center-mobile-logo); } } // Mini logo on mobiles .focus-mobile-navigation{ flex: 0 0 auto; display: flex; align-self: stretch; @media (min-width: (@xf-responsiveMedium+1px)){ display: none; } } .focus-mobile-logo{ display: none; color: @focus-mobile-logo-color; font-weight: bold; a{ display: flex; align-items: center; overflow: hidden; text-decoration: none; } img{ max-height: 44px; } } <xf:if is="!(property('xenfocus_headerOnMobile'))"> // Hide header and use mini-logo on mobiles @media (max-width: @xf-responsiveMedium){ #header{ display: none; } .focus-mobile-logo{ display: flex; max-width: ~"calc(100vw - 260px)"; } } @media (max-width: @xf-responsiveMedium){ .focus-mobile-logo{ max-width: ~"calc(100vw - 220px)"; } } </xf:if> /* ---------------- - Navigation ---------------- */ .focus-wrap-nav{ flex: 0 1 auto; } // 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; } } } // If the user links are the third last child, we can assume they should be hidden on desktops /* @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-wrap-user:nth-last-child(3){ 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(){} @media (min-width: (@xf-responsiveMedium + 1px)){ .p-nav{ .p-nav(); } } // 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{ width: 0; } &::after{ width: 0; } } // Assign font-size .p-nav-list > 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; } } // 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{ border-radius: inherit; } .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{ background: none; } // .. and reduce the opacity of the arrow 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{ &:before{ .m-faBase(); .m-faContent(@fa-var-tag); font-size: @nav-icon-size; display: inline-block; transform: translate(0,0); font-weight: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; .navigation-icons(); margin-right: 6px; } &[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{ .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); } } </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)){ /* background-color: xf-default(@xf-xenfocus_userStyles--background-color, transparent); <xf:if is="property('xenfocus_userStyles--background-image')"> background-image: @xf-xenfocus_userStyles--background-image; </xf:if> border: @user-border-width solid @user-border-color; <xf:if is="property('xenfocus_userlinksRadius') === 'parent'"> border-radius: @user-border-radius; </xf:if> <xf:if is="property('xenfocus_userStyles--border-top-width')"> border-top-width: @xf-xenfocus_userStyles--border-top-width; </xf:if> <xf:if is="property('xenfocus_userStyles--border-top-color')"> border-top-color: @xf-xenfocus_userStyles--border-top-color; </xf:if> <xf:if is="property('xenfocus_userlinksRadius') === 'parent' AND property('xenfocus_userStyles--border-top-left-radius')"> border-top-left-radius: @xf-xenfocus_userStyles--border-top-left-radius; </xf:if> <xf:if is="property('xenfocus_userStyles--border-right-width')"> border-right-width: @xf-xenfocus_userStyles--border-right-width; </xf:if> <xf:if is="property('xenfocus_userStyles--border-right-color')"> border-right-color: @xf-xenfocus_userStyles--border-right-color; </xf:if> <xf:if is="property('xenfocus_userlinksRadius') === 'parent' AND property('xenfocus_userStyles--border-top-right-radius')"> border-top-right-radius: @xf-xenfocus_userStyles--border-top-right-radius; </xf:if> <xf:if is="property('xenfocus_userStyles--border-bottom-width')"> border-bottom-width: @xf-xenfocus_userStyles--border-bottom-width; </xf:if> <xf:if is="property('xenfocus_userStyles--border-bottom-color')"> border-bottom-color: @xf-xenfocus_userStyles--border-bottom-color; </xf:if> <xf:if is="property('xenfocus_userlinksRadius') === 'parent' AND property('xenfocus_userStyles--border-bottom-right-radius')"> border-bottom-right-radius: @xf-xenfocus_userStyles--border-bottom-right-radius; </xf:if> <xf:if is="property('xenfocus_userStyles--border-left-width')"> border-left-width: @xf-xenfocus_userStyles--border-left-width; </xf:if> <xf:if is="property('xenfocus_userStyles--border-left-color')"> border-left-color: @xf-xenfocus_userStyles--border-left-color; </xf:if> <xf:if is="property('xenfocus_userlinksRadius') === 'parent' AND property('xenfocus_userStyles--border-bottom-left-radius')"> border-bottom-left-radius: @xf-xenfocus_userStyles--border-bottom-left-radius; </xf:if> <xf:if is="property('xenfocus_userStyles--color')"> color: @xf-xenfocus_userStyles--color; </xf:if> font-size: xf-default(@xf-xenfocus_userStyles--font-size, @xf-fontSizeSmall); <xf:if is="property('xenfocus_userStyles--font-weight')"> font-weight: @xf-xenfocus_userStyles--font-weight; </xf:if> */ // 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: @user-links-color-mobile; } } } // Reset default styles and inherit border-radius .p-nav-opposite{ //border-radius: inherit; @media (min-width: (@xf-responsiveMedium + 1px)){ margin: 0; } } // Set defaults .p-navgroup{ display: flex; //border-radius: inherit; #XF &{ background: transparent; } > *{ flex: 0 0 auto; } } // Overwrite xenforo default /* .p-navSticky.is-sticky .p-nav .p-account{ border-radius: inherit; }*/ .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; float: none; 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> // Add space after icon i{ margin-right: 7px; &:only-child{ margin: 0; } } // 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: @user-links-color-mobile; background-color: fade(@user-links-color-mobile, 15%); } } } // Remove default gap from user links and search link .p-navgroup.p-discovery{ margin: 0; } // Bold user links .p-navgroup-linkText{ font-weight: xf-default(@xf-xenfocus_userStyles--font-weight, normal); } // User links alignment .p-navgroup-link--user{ display: flex !important; align-items: center; > *{ flex: 0 0 auto; } @media (min-width: (@xf-responsiveWide + 1px)){ .p-navgroup-linkText{ margin-left: @xf-paddingLarge; } .avatar{ #XF &{ height: (@xf-xenfocus_userHeight * 1px - 14px); width: (@xf-xenfocus_userHeight * 1px - 14px); margin-left: -3px; } &.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; } .p-navgroup-linkText{ max-width: 150px; overflow: hidden; text-overflow: ellipsis; } } // 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); } <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; &::before{ content: ''; position: absolute; top: @register-offset; left: 3px; right: 3px; bottom: @register-offset; 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> // Remove text and use icons only <xf:if is="property('xenfocus_userIcons')"> @media (min-width: (@xf-responsiveMedium + 1px)){ .p-navgroup-link i{ font-size: @user-links-icon; margin: 0 !important; } .p-navgroup-link--conversations, .p-navgroup-link--alerts, .p-navgroup-link--search{ .p-navgroup-linkText{ display: none; } &.badgeContainer::after{ left: auto; right: 4px; } } } </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; } @media (max-width: @xf-responsiveNarrow){ .p-navgroup--member .p-navgroup-link{ margin: 0; } } // 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> /* .focus-show-search-bar(@debug) when (@debug = false) { .focus-wrap-search{ display: none; } } .focus-show-search-bar(@focus-show-search-bar); */ <xf:if is="property('xenfocus_searchBar')"> /* ---------------- - Search bar ---------------- */ //.xenfocus_searchStyles(){} .focus-wrap-search{ position: relative; flex: 0 0 auto; margin-left: 10px; } .focus-search{ width: @search-width; line-height: @search-height; /* background-color: @search-background-color; background-image: @search-background-image; color: @search-color; border: @search-border; border-radius: @search-radius; font-size: xf-default(@xf-xenfocus_searchStyles--font-size, inherit); */ //.xenfocus_searchStyles(); .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{ display: flex; align-items: center; position: relative; } .focus-search-prefix{ order: 1; flex: 0 0 auto; width: @search-height; text-align: center; opacity: 0.7; transition: opacity 0.2s linear; .focus-search input:focus ~ &{ opacity: 1; } } .focus-search input{ background: none; border: 0; outline: none; color: inherit; order: 2; flex: 1 1 auto; padding: 0; display: block; width: 100%; min-width: 0; // IE 11 line-height: @search-height; 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: space-between; align-items: center; flex-wrap: wrap; > *{ flex: 1 0 auto; margin: 3px; } } a.button{ color: @xf-buttonDefault--color; } // Button icons @focus-search-button-height: 30px; .button{ padding: 0; line-height: @focus-search-button-height; } .button-text{ display: block; position: relative; padding-left: @focus-search-button-height; } .menu-footer .button-text:before{ font-size: 14px; line-height: inherit; position: absolute; top: 0; left: 0; margin: 0; width: @focus-search-button-height; background: fade(@xf-buttonDefault--color, 20%); border-top-left-radius: @xf-borderRadiusMedium; border-bottom-left-radius: @xf-borderRadiusMedium; } .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; @focus-editor-overlay: fade(xf-intensify(@xf-contentBg, 100%), 40%); @focus-editor-transition: 0.25s; /* .p-navgroup-link[data-xenfocus-editor] span:before, .p-footer-row [data-xenfocus-editor]:before{ content: @focus-editor-icon; font-family: "FontAwesome"; transform: translate(0,0); font-weight: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0 5px; } */ <xf:if is="!property('xenfocus_userIcons')"> @media (min-width: (@xf-responsiveWide + 1px)){ .xenfocus-navgroup-icon .fa{ font-size: 14px; } } </xf:if> .xenfocus-navgroup-icon, .xenfocus-footer-icon{ .fa-toggle-on::before{ content: @focus-editor-icon; } } /* .p-navgroup-link[data-xenfocus-editor] span:before{ font-size: 14px; } @media (max-width: @xf-responsiveWide){ .p-navgroup-link[data-xenfocus-editor] span:before{ margin: 0; font-size: inherit; } } */ .p-footer .xenfocus-footer-icon{ a{ min-width: 40px; text-align: center; } i{ margin: 0; } } [data-xenfocus-editor]{ cursor: pointer; } .focus-editor-wrap{ display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; 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: @xf-contentBg; position: relative; width: 98%; max-width: @focus-editor-width; transition: all @focus-editor-transition ease-in-out; transform: translateY(-50px); .focus-editor-scroll{ max-height: ~"calc(100vh - 200px)"; overflow: auto; border-radius: inherit; } .focus-editor-open &{ transform: translateY(0); } .focus-editor-panel{ padding: 20px; display: flex; align-items: center; justify-content: flex-start; } hr{ display: none; } h4{ margin: 0; display: block; background: @xf-contentAltBg; border: 1px solid xf-intensify(@xf-contentAltBg, 10%); border-width: 1px 0; padding: 20px; &:only-child{ display: none; } } .focus-editor-scroll > div:first-of-type h4{ border-top: 0; } .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; border: 0; <xf:if is="property('styleType') == 'light'"> border: 1px solid rgba(0,0,0,0.2); </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; content: '\f00c'; 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; } } } } // Hide certain settings from mobiles @media (max-width: @xf-responsiveWide){ .focus-editor .focus-editor-panel[data-toggle-class="focus-sidebar-sticky"], .focus-editor .focus-editor-panel[data-toggle-class="focus-sidebar-flip"]{ display: none; } } @media (max-width: @xf-pageWidthMax){ .focus-editor .focus-editor-panel[data-toggle-class="focus-fluid"]{ display: none; } } @focus-toggle-height: 30px; @focus-toggle-width: 50px; @focus-toggle-transform: @focus-toggle-width - @focus-toggle-height; .focus-editor-toggle{ position: relative; flex: 0 0 auto; margin-right: 20px; i.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; /*transform: scale(0); transform-origin: 50% 50%; transition: transform 0.25s ease-in-out; */ opacity: 0; transition: opacity 0.25s linear; } i{ position: absolute; top: 0; left: 0; bottom: 0; width: @focus-toggle-height; transform: translateX(0); transition: transform 0.3s ease-in-out; border-radius: inherit; padding: 2px; <xf:if is="property('styleType') == 'dark'"> padding: 4px; </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%; } } &: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> } } input[type='radio']{ display: block; position: absolute; top: 0; left: 0; width: @focus-toggle-width; height: @focus-toggle-height; opacity: 0; z-index: 5; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; cursor: pointer; &:checked{ display: none; } &:nth-of-type(2):checked ~ .focus-toggle{ &:before{ transform: scale(1); opacity: 1; } i{ transform: translateX(@focus-toggle-transform); } } html[dir='rtl'] &:nth-of-type(2):checked ~ .focus-toggle{ i{ transform: translateX(@focus-toggle-transform * -1); } } } } .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; } } /* ---------------- - Breadcrumbs ---------------- */ // Align breadcrumbs and social icons .focus-breadcrumb{ display: flex; @media (max-width: @xf-responsiveMedium){ flex-direction: column; align-items: center; } .p-breadcrumbs{ flex: 1 1 auto; width: 100%; } } .xenfocus_breadcrumb(){} .focus-breadcrumbs(@debug) when (@debug = true) { .p-breadcrumbs{ color: @breadcrumb-color; background-color: @breadcrumb-background-hex; background-image: @breadcrumb-background-image; border-radius: @breadcrumb-radius; font-size: @xf-fontSizeSmall; overflow: hidden; line-height: @breadcrumb-height; margin-bottom: 10px; position: relative; z-index: 0; .xenfocus_breadcrumb(); &::before{ 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; } > 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){ & > li a{ padding: 0 22px; &::before, &::after { transform: skewX(-30deg); width: ~"calc(100% + 20px)"; } &::after { transform: skewX(30deg); } } } } } .focus-breadcrumbs(@focus-breadcrumbs); /* ---------------- - Social icons ---------------- */ .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; 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; height: @social-height; flex: 0 0 auto; text-align: center; font-size: 16px !important; /* -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0,0); */ 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; &:before{ content: "\f1e0"; } &[href*='discordapp.com']{ background: #7289da; &:before{ // background: url('styles/xenfocus/images/discord.png') no-repeat 50% 50%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg>'); background-size: 50% auto; background-repeat: no-repeat; background-position: 50% 50%; font-size: 0; } } &[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']{ background: #8190b1; &:before{ .m-faContent(@fa-var-teamspeak); } } &[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*='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); } /* ---------------- - Background Picker ---------------- */ // Hide thumbnails when editor is hidden to prevent the images from loading .hide-picker-thumbs(@debug) when (@debug = true) { .focus-picker:not(.focus-picker--loaded) span{ background-image: none !important; } } .hide-picker-thumbs(@hide-picker-thumbs); .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; min-height: 80px; max-height: 180px; margin: 5px; text-align: center; cursor: pointer; overflow: hidden; // Size &:before{ content: ''; display: block; padding-bottom: 56%; } // 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{ content: ''; display: flex; align-items: center; justify-content: center; .m-faBase(); .m-faContent(@fa-var-check); font-size: 72px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: -20px; left: 0; right: 0; bottom: -20px; transform: translateY(20px); transition: all 0.2s ease-in-out; opacity: 0; background: rgba(255,255,255,0.15); pointer-events: none; } } @media screen and (min-width: 980px){ &:hover i:before{ transform: translateY(0); opacity: 0.8; } } } span { .hidethumbs(@xf-xenfocus_pickerNumber + 1); .hidethumbs(@xf-xenfocus_pickerNumber + 2); .hidethumbs(@xf-xenfocus_pickerNumber + 3); .hidethumbs(@xf-xenfocus_pickerNumber + 4); } .hidethumbs(@i) { &:nth-of-type(@{i}) { display: none; } } // Apply border to selected thumbnail html[data-focus-bg="1"] & [data-focus-bg="1"]:after, html[data-focus-bg="2"] & [data-focus-bg="2"]:after, html[data-focus-bg="3"] & [data-focus-bg="3"]:after, html[data-focus-bg="4"] & [data-focus-bg="4"]:after, html[data-focus-bg="5"] & [data-focus-bg="5"]:after, html[data-focus-bg="6"] & [data-focus-bg="6"]:after{ border-width: 5px; border-color: fade(@xf-textColor, 35%); box-shadow: none; } } .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); </xf:if> <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; } .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); </xf:if> <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; } .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); </xf:if> <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; } .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); </xf:if> <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; } .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); </xf:if> <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; } .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); </xf:if> <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; } .focus-picker [data-focus-bg='1']{ .focus-background-1(); } .focus-picker [data-focus-bg='2']{ .focus-background-2(); } .focus-picker [data-focus-bg='3']{ .focus-background-3(); } .focus-picker [data-focus-bg='4']{ .focus-background-4(); } .focus-picker [data-focus-bg='5']{ .focus-background-5(); } .focus-picker [data-focus-bg='6']{ .focus-background-6(); } // Make sure thumbnail images aren't fixed .focus-picker span[data-focus-bg]{ background-attachment: scroll; } /* ---------------- - Content wrapper ---------------- */ // Wrap all content .focus-wrapper(){} .focus-wrapper{ flex: 1 1 auto; display: flex; flex-direction: column; .focus-wrapper(); @media (max-width: @xf-responsiveMedium){ border: 0; border-radius: 0; } > *{ flex: 0 0 auto; } } .focus-content(){} .focus-content{ 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')"> @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-width &{ margin-bottom: 10px; } } </xf:if> .focus-content(); @media (max-width: @xf-responsiveMedium){ border-radius: 0; } } .p-body-inner{ padding-bottom: ((@xf-elementSpacer) / 2); @media (min-width: (@xf-responsiveMedium + 1px)){ padding-left: 0; padding-right: 0; } <xf:if is="property('xenfocus_wrapperStyles--background-color')"> @media (min-width: (@xf-responsiveMedium + 1px)){ .focus-width &{ padding-left: ((@xf-elementSpacer) / 2); padding-right: ((@xf-elementSpacer) / 2); } } </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; } // Make subforum icons different for read/unread status .subNodeLink.subNodeLink--forum::before, .subNodeLink.subNodeLink--category::before{ .m-faContent(@fa-var-plus-square); font-weight: 300; } // Unread subforums .subNodeLink--unread.subNodeLink--forum::before, .subNodeLink--unread.subNodeLink--category::before{ font-weight: 900; } // 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){ html:not(.focus-grid){ .node-statsMeta 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; } // Bold topic title when unread /* .node--unread .node-extra-title{ font-weight: 600; } */ @media (min-width: (@xf-responsiveMedium + 1px)){ html:not(.focus-grid) .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 ---------------- */ html:not(.focus-grid){ .node-body{ padding: @node-extra-padding; } .node-icon{ padding-right: @node-extra-padding; } } /* ---------------- - Node icons ---------------- */ <xf:if is="property('xenfocus_iconRead--color')"> @node-icon-read-color: @xf-xenfocus_iconRead--color; <xf:elseif is="property('xenfocus_iconStyles--color')" /> @node-icon-read-color: @xf-xenfocus_iconStyles--color; <xf:else /> @node-icon-read-color: inherit; </xf:if> <xf:if is="property('xenfocus_iconRead--background-color')"> @node-icon-read-background: @xf-xenfocus_iconRead--background-color; <xf:else /> @node-icon-read-background: transparent; </xf:if> <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; & i{ <xf:if is="property('xenfocus_iconStyles--border-radius')"> border-radius: @xf-xenfocus_iconStyles--border-radius*1px; </xf:if> line-height: 1; height: @xf-xenfocus_iconHeight*1px; font-size: @xf-xenfocus_iconSize*1px; width: @xf-xenfocus_iconWidth*1px; display: flex; align-items: center; justify-content: center; /* color: @node-icon-read-color; background-color: @node-icon-read-background; */ @xf-xenfocus_iconStyles--extra; /* .node--unread &, html[data-logged-in="false"] .node--read &{ */ color: @node-icon-unread-color; background-color: @node-icon-unread-background; @xf-xenfocus_iconUnread--extra; /* } */ html[data-logged-in="true"] .node--read &, html[data-logged-in="true"] .node--link &, html[data-logged-in="true"] .node--page &{ /* If the "no new content" styles are blank, create a grayscale and faint version */ <xf:if is="!property('xenfocus_iconRead--color') AND !property('xenfocus_iconRead--background-color') AND !property('xenfocus_iconStyles--background-image')"> color: @node-icon-unread-color; background-color: @node-icon-unread-background; filter: @node-icon-read-filter; opacity: @node-icon-read-opacity; <xf:else /> color: @node-icon-read-color; background-color: @node-icon-read-background; </xf:if> @xf-xenfocus_iconRead--extra; } /* If the "no new content" styles are blank, create a grayscale and faint version */ /* <xf:if is="!property('xenfocus_iconRead--color') AND !property('xenfocus_iconRead--background-color') AND !property('xenfocus_iconStyles--background-image')"> html[data-logged-in="true"] .node--read &, .node--link &, .node--page &{ color: @node-icon-unread-color; background-color: @node-icon-unread-background; filter: @node-icon-read-filter; opacity: @node-icon-read-opacity; } </xf:if> */ .p-body &:before{ text-shadow: inherit; color: inherit; display: block; text-align: center; width: auto; line-height: inherit; } /* Assign FontAwesome icon to nodes */ &::before{ <xf:if is="property('xenfocus_iconFA')"> .node--forum &, .node--category &{ content: '\@xf-xenfocus_iconFA'; } </xf:if> <xf:if is="property('xenfocus_iconFAold')"> html[data-logged-in="true"] .node--read &{ content: '\@xf-xenfocus_iconFAold'; } </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_iconStyles--background-image')"> #XF{ .node-icon i{ background: @xf-xenfocus_iconStyles--background-image 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: @xf-xenfocus_iconRead--background-image; <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; } .new-badge(@debug) when (@debug = true) { .node-title a{ vertical-align: middle; } html[data-logged-in='true'] .node--unread .node-title:before{ content: 'NEW'; color: @new-badge-color; 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; } } .new-badge(@new-badge); /* ---------------- - 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)){ html:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent{ <xf:if is="property('xenfocus_tableLayout') == 'minimal'"> // Increase padding of index boxes .block:not([data-widget-id]) .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; } } </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; } .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(){}; .focus-guest{ border-radius: @xf-borderRadiusMedium; margin-bottom: 10px; padding: 5px; padding-bottom: 0; // Hide message on certain pages .template-login &, .template-register_form &{ display: none; } a{ color: inherit; } .focus-guest-content{ padding: 15px 10px; 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{ .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(); } .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: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(); <xf:if is="property('xenfocus_guestWallpaper--background-color')"> box-shadow: inset fade(xf-intensify(@xf-xenfocus_guestWallpaper--background-color, 40%), 15%) 0px 0px 0px 1px; </xf:if> 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; } .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; } } } } } /* ---------------- - 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-responsiveEdgeSpacerRemoval){ border-radius: 0; } } .p-footer-inner{ padding: 15px; } .p-footer-linkList > li a{ padding: 6px; border-radius: 3px; display: inline-block; } .fa, .fas, .far, .fal, .fab{ margin-right: .3em; } .p-footer-row-main, .p-footer-row-opposite{ margin-bottom: 0; } .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 ---------------- */ .focus-footer{ padding: 15px; border-bottom: 1px solid fade(@xf-publicFooter--color, 10%); .focus-footer-col{ flex: 0 0 auto; padding: 10px; width: 100%; @media (min-width: 926px){ &:nth-child(1):nth-last-of-type(4), &:nth-child(2):nth-last-of-type(3), &:nth-child(3):nth-last-of-type(2), &:nth-child(4):nth-last-of-type(1){ width: 25%; } &:nth-child(1):nth-last-of-type(3), &:nth-child(2):nth-last-of-type(2), &:nth-child(3):nth-last-of-type(1){ width: 33.333%; } &:nth-child(1):nth-last-of-type(2), &:nth-child(2):nth-last-of-type(1){ width: 50%; } } @media (min-width: 500px) and (max-width: 925px){ &:not(:only-child){ width: 50%; } } @media (max-width: 925px){ &:not(:last-of-type){ margin-bottom: 40px; } } } & 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; } /* ---------------- - Grid layout for nodes ---------------- */ // Hide the grid panel for old browsers, and show it using @supports .focus-editor-panel[data-toggle-class="focus-grid"]{ display: none; } @supports (display: grid){ .focus-editor-panel[data-toggle-class="focus-grid"]{ display: flex; } .focus-grid{ .block--category{ // Clickable grids /*.node-main, .node-subNodeMenu{ //position: relative; } */ .node a{ position: relative; z-index: 2; } .node-title a, a.node-extra-title{ position: static; &::before{ position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; } } .block-body{ display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(@grid-node-width, 1fr)); padding: 10px; @media (max-width: 415px){ grid-template-columns: 1fr; } } .node{ border: 0; } .node-body{ width: auto; height: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr minmax(57px, auto); grid-template-areas: "nodeicon nodetitle" "nodeprelatest nodelatest"; align-items: center; border-radius: @xf-blockBorderRadius; position: relative; &:before{ content: ''; display: block; align-self: stretch; grid-column-start: nodeprelatest; grid-column-end: nodelatest; grid-row-start: nodeprelatest; grid-row-end: nodeprelatest; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } &:after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; } } .node--link .node-body, .node--page .node-body{ grid-template-rows: 1fr; &:before{ display: none; } } .node-icon{ grid-area: nodeicon; padding: 15px 0px 15px 15px; <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: 15px; } .node-subNodeMenu{ display: block; margin-top: 5px; } .node-extra{ grid-area: nodelatest; width: auto; margin: 0; padding-top: 10px; padding-bottom: 10px; position: relative; display: flex; align-items: center; flex-wrap: wrap; .node-extra-row{ flex: 0 0 auto; width: 100%; white-space: normal; height: @xf-lineHeightDefault*1em; } .node-extra-row:first-child{ font-weight: bold; } .node-extra-user a{ color: inherit; } } .node-statsMeta{ display: flex; align-items: center; font-size: 0.9em; margin-top: 5px; dl{ padding: 0; width: auto; flex: 0 0 auto; } 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); } } } .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.4); } &:after{ <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 /> .block-body{ background: @xf-contentAltBg; } .node-body{ .xf-contentBase(); .xf-blockBorder(); &:before{ background: xf-intensify(@xf-contentBg, 1%); border-top: 1px solid xf-intensify(@xf-contentBg, 10%); } } </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/images/node-wallpapers/@{wallpapernode}.jpg'); } } @supports (display: grid){ .focus-grid{ .block--category{ .node-wallpapers-mixin(); } } } </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; } /* ---------------- - Mobile navigation panel ---------------- */ .offCanvasMenu--nav { .offCanvasMenu-content { background: @mobile-navigation-background; color: @mobile-navigation-color; } .offCanvasMenu-subList{ background: fade(@mobile-navigation-color, 10%); } .offCanvasMenu-linkHolder.is-selected{ color: inherit; font-weight: bold; background: fade(@mobile-navigation-color, 15%); } } /* ---------------- - Countdown ---------------- */ .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 .focus-timer-numbers span[data-countdown-text]::before{ content: attr(data-countdown-text); } /* ---------------- - Topic List ---------------- */ // Align topic avatar to middle .structItem-cell{ vertical-align: middle; } // 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; } // Align last post to left .structItem-cell.structItem-cell--latest{ text-align: inherit; } // 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; } // Remove border from post date for minimalism .message-attribution{ border-width: 0; padding-bottom: 6px; @media (min-width: (@xf-responsiveMedium + 1px)){ padding-top: 2px; } } // 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%; } .likesBar{ order: -1; } } // Style post buttons .actionBar-action{ padding: 5px; } @focus-post-button: @xf-buttonDefault--background-color; .focus-post-buttons(@debug) when (@debug = true) { .actionBar-set{ display: flex; .actionBar-action{ text-decoration: none; padding-left: 8px; padding-right: 8px; } &.actionBar-set--external{ margin-right: 0; .actionBar-action{ background: @focus-post-button; color: @xf-buttonDefault--color; border-color: xf-intensify(@focus-post-button, 9%); .m-transition(background-color); &:hover{ background-color: xf-intensify(@focus-post-button, 5%); } &: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{ a.actionBar-action{ color: @xf-linkColor; margin: 0; &:hover{ background-color: fade(@xf-linkColor, 10%); } } } } } .focus-post-buttons(@focus-post-buttons); // Like bar .likesBar{ border-width: 0; border-radius: @xf-blockBorderRadius; background-color: @xf-bbCodeBlock--background-color; .message &{ padding: 8px 12px; } } .likeIcon::before{ color: @xf-textColorDimmed; } // Reply form .fr-box.fr-basic { .fr-wrapper { background: @editor-bg; } .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; } </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; } } // Bold primary buttons .button.button--cta, .button--primary{ font-weight: bold; } // Post reply icon .button.button--icon--reply > .button-text::before, a.button.button--icon--reply > .button-text::before{ .m-faContent(@fa-var-plus-square); } // 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 margin-top from bbcode boxes if they're the first child .bbCodeBlock:first-child{ margin-top: 0; } /* ---------------- - Profiles ---------------- */ // Inherit border-radius .memberHeader, .memberHeader-main{ border-top-left-radius: inherit; border-top-right-radius: inherit; } /* ---------------- - Sidebar ---------------- */ // Sidebar icons .focus-sidebar-icons(@debug) when (@debug = true) { .block[data-widget-definition]{ .block-minorHeader::before{ .m-faBase(); .m-faContent(@fa-var-ellipsis-h); display: inline-block; transform: translate(0,0); font-weight: normal; text-rendering: auto; font-size: inherit; margin-right: 6px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 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="share_page"] &{ .m-faContent(@fa-var-share-alt); } .block[data-widget-definition="new_posts"] &{ .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); } } } .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-toggle-class="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{ flex: 1 1 auto; // IE fix display: block; width: ~"calc(100% - @xf-sidebarWidth)"; } .p-body-sideNav, .p-body-sidebar{ flex: 0 0 auto; // IE fix display: block; } } // 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: @xf-elementSpacer; } } // Sticky side blocks <xf:if is="property('xenfocus_stickyBlocks')"> @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-toggle-class="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-toggle-class='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-toggle-class='focus-confetti'], .xenfocus-confetti{ display: none; } } </xf:if> /* ---------------- - Holidays ---------------- */ // 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-mini-logo .fa-heart{ color: #FF717E; -webkit-animation: valentines 2s infinite linear; 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-mini-logo img{ max-height: 60%; -webkit-animation: halloween 3s infinite linear; animation: halloween 3s infinite linear; } </xf:if> /* ---------------- - Pagination ---------------- */ .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; } /* ---------------- - 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; } } } */ /* ---------------- - Other ---------------- */ // 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); border-color: transparent; } // Admin and moderator bar .p-staffBar-inner{ padding-left: 4px; padding-right: 4px; .hScroller-scroll{ display: flex; justify-content: space-between; } } .p-staffBar-link{ padding-left: 10px; padding-right: 10px; &:before{ .m-faBase(); .m-faContent(@fa-var-lock); display: inline-block; transform: translate(0,0); font-weight: normal; text-rendering: auto; font-size: inherit; margin-right: 6px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } &[data-xf-key="alt+m"]:before{ .m-faContent(@fa-var-check-square); } } // 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); // Staff bar .p-staffBar{ border: 0; border-radius: @xf-blockBorderRadius; margin-bottom: 10px; } // 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; } // Fix alignment in 'Edit Avatar' box &.js-avatarCropper{ top: 0 !important; left: 0 !important; } } /* ---------------- - 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; } } } /* ---------------- - Bug fixes ---------------- */ // 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%); } } .focus-m-buttonBlockColorVariationSimple(@color){ .focus-m-buttonBorderColorVariation(@color); &:not(.button--splitTrigger), &.button--splitTrigger > .button-text, &.button--splitTrigger > .button-menu{ &: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); &: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: 'Narrow'; } @media (min-width: (@xf-responsiveNarrow + 1px)) and (max-width: @xf-responsiveMedium){ --responsive: 'Medium'; } @media (min-width: (@xf-responsiveMedium + 1px)) and (max-width: @xf-responsiveWide){ --responsive: 'Wide'; } @media (min-width: (@xf-responsiveWide + 1px)){ --responsive: 'Full'; } --xenfocus-version: '2.1.2.0'; --xenfocus-date: '02-05-2019'; } ]]>
</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'>XenForo theme by xenfocus</a> </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: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> <h4 data-focus-text='Background Picker'></h4> <div class="focus-picker"> <span data-focus-bg='1'><i></i></span> <span data-focus-bg='2'><i></i></span> <span data-focus-bg='3'><i></i></span> <span data-focus-bg='4'><i></i></span> <span data-focus-bg='5'><i></i></span> <span data-focus-bg='6'><i></i></span> </div> </div> </xf:if> <xf:include template="xenfocus_editor_hook_1" /> <div> <h4 data-focus-text='Customize layout'></h4> <xf:if is="property('xenfocus_widthToggle')"> <div class='focus-editor-panel' data-toggle-class='focus-fluid' data-default='<xf:if is="property('xenfocus_widthEnable')">on<xf:else />off</xf:if>'> <div class='focus-editor-toggle'> <input type='radio' name='focus-width' id='focus-fluid-off' /> <input type='radio' name='focus-width' id='focus-fluid-on' /> <i class='focus-toggle'><i></i></i> </div> <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-toggle-class='focus-grid' data-default='<xf:if is="property('xenfocus_gridEnable')">on<xf:else />off</xf:if>'> <div class='focus-editor-toggle'> <input type='radio' name='focus-grid' id='focus-grid-off' /> <input type='radio' name='focus-grid' id='focus-grid-on' /> <i class='focus-toggle'><i></i></i> </div> <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-toggle-class='focus-sidebar-sticky' data-default='<xf:if is="property('xenfocus_stickyBlocks')">on<xf:else />off</xf:if>'> <div class='focus-editor-toggle'> <input type='radio' name='focus-sidebar-sticky' id='focus-sidebar-sticky-off' /> <input type='radio' name='focus-sidebar-sticky' id='focus-sidebar-sticky-on' /> <i class='focus-toggle'><i></i></i> </div> <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-toggle-class='focus-sidebar-flip' data-default='<xf:if is="property('xenfocus_sidebarFlip')">on<xf:else />off</xf:if>'> <div class='focus-editor-toggle'> <input type='radio' name='focus-sidebar-flip' id='focus-sidebar-flip-off' /> <input type='radio' name='focus-sidebar-flip' id='focus-sidebar-flip-on' /> <i class='focus-toggle'><i></i></i> </div> <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-toggle-class='focus-snow' data-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'> <div class='focus-editor-toggle'> <input type='radio' name='focus-snow' id='focus-snow-off' /> <input type='radio' name='focus-snow' id='focus-snow-on' /> <i class='focus-toggle'><i></i></i> </div> <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-toggle-class='focus-confetti' data-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'> <div class='focus-editor-toggle'> <input type='radio' name='focus-confetti' id='focus-confetti-off' /> <input type='radio' name='focus-confetti' id='focus-confetti-on' /> <i class='focus-toggle'><i></i></i> </div> <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-toggle-class='focus-countdown' data-default='on'> <div class='focus-editor-toggle'> <input type='radio' name='focus-countdown' id='focus-countdown-off' /> <input type='radio' name='focus-countdown' id='focus-countdown-on' /> <i class='focus-toggle'><i></i></i> </div> <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[ ]]>
</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[ ]]>
</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 flex flex-jB flex-aS flex-wrap'> <xf:if is="property('xenfocus_footer1')"><div class='focus-footer-col'>{{property('xenfocus_footer1')}}</div></xf:if> <xf:if is="property('xenfocus_footer2')"><div class='focus-footer-col'>{{property('xenfocus_footer2')}}</div></xf:if> <xf:if is="property('xenfocus_footer3')"><div class='focus-footer-col'>{{property('xenfocus_footer3')}}</div></xf:if> <xf:if is="property('xenfocus_footer4')"><div class='focus-footer-col'>{{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_mini_logo" type="public" addon_id="" version_id="0" version_string="">
<![CDATA[ <xf:if is="property('xenfocus_logoMini') OR (property('xenfocus_holiday') != 'none')"> <span class='focus-mini-logo'> <xf:if is="property('xenfocus_holiday') === 'valentines'"> <i class="fa 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:else /> <img src="{{ base_url(property('xenfocus_logoMini')) }}" alt="{$xf.options.boardTitle}" /> </xf:if> </span> </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_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[ ]]>
</template>
<template title="xenfocus_picker" type="public" addon_id="" version_id="0" version_string="">
<![CDATA[ <xf:if is="property('xenfocus_picker')"> <div class="focus-pickerWrapPull"><div class="focus-pickerWrap"> <div class="focus-picker"> <span data-focus-bg='1'></span> <span data-focus-bg='2'></span> <span data-focus-bg='3'></span> <span data-focus-bg='4'></span> <span data-focus-bg='5'></span> <span data-focus-bg='6'></span> </div> </div></div> </xf:if> ]]>
</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[ /* ---------------- - Config ---------------- */ @body-padding-top: 0px; @mobile-navigation-background: #222; @user-hover: rgba(0,0,0,0.1); @mega-footer-copyright: fade(@xf-publicFooter--background-color, 10%); @nodeHover-padding: 10px; /* ---------------- - Backgrounds ---------------- */ .focus-block-header(){ } // Background picker elements html[data-focus-bg='1'], html[data-focus-bg='1'] @{block-header}{ .focus-background-1(); } html[data-focus-bg='2'], html[data-focus-bg='2'] @{block-header}{ .focus-background-2(); } html[data-focus-bg='3'], html[data-focus-bg='3'] @{block-header}{ .focus-background-3(); } html[data-focus-bg='4'], html[data-focus-bg='4'] @{block-header}{ .focus-background-4(); } html[data-focus-bg='5'], html[data-focus-bg='5'] @{block-header}{ .focus-background-5(); } html[data-focus-bg='6'], html[data-focus-bg='6'] @{block-header}{ .focus-background-6(); } <xf:if is="property('xenfocus_bg1_attachment') === 'fixed' AND property('xenfocus_bg1_size') === 'cover'"> @media (max-width: 768px){ html[data-focus-bg='1']{ background-size: 100% auto; background-attachment: scroll; background-repeat: no-repeat; background-position: 50% 0; } } </xf:if> <xf:if is="property('xenfocus_bg2_attachment') === 'fixed' AND property('xenfocus_bg2_size') === 'cover'"> @media (max-width: 768px){ html[data-focus-bg='2']{ background-size: 100% auto; background-attachment: scroll; background-repeat: no-repeat; background-position: 50% 0; } } </xf:if> <xf:if is="property('xenfocus_bg3_attachment') === 'fixed' AND property('xenfocus_bg3_size') === 'cover'"> @media (max-width: 768px){ html[data-focus-bg='3']{ background-size: 100% auto; background-attachment: scroll; background-repeat: no-repeat; background-position: 50% 0; } } </xf:if> <xf:if is="property('xenfocus_bg4_attachment') === 'fixed' AND property('xenfocus_bg4_size') === 'cover'"> @media (max-width: 768px){ html[data-focus-bg='4']{ background-size: 100% auto; background-attachment: scroll; background-repeat: no-repeat; background-position: 50% 0; } } </xf:if> <xf:if is="property('xenfocus_bg5_attachment') === 'fixed' AND property('xenfocus_bg5_size') === 'cover'"> @media (max-width: 768px){ html[data-focus-bg='5']{ background-size: 100% auto; background-attachment: scroll; background-repeat: no-repeat; background-position: 50% 0; } } </xf:if> <xf:if is="property('xenfocus_bg6_attachment') === 'fixed' AND property('xenfocus_bg6_size') === 'cover'"> @media (max-width: 768px){ html[data-focus-bg='6']{ background-size: 100% auto; background-attachment: scroll; background-repeat: no-repeat; background-position: 50% 0; } } </xf:if> /* ---------------- - Logo ---------------- */ .p-header-logo{ text-shadow: rgba(0,0,0,0.3) 0px 1px 2px; } /* ---------------- - Navigation ---------------- */ // Second navigation bar @p-nav-padding: (@xf-xenfocus_navHeight - @xf-xenfocus_searchHeight*1px) / 2; .p-nav(){ border-radius: 3px 3px 0 0; border: 1px solid fade(@xf-publicNav--background-color, 20%); border-bottom-width: 0; padding-left: @nav-tab-radius+1; padding-right: @p-nav-padding; html[dir='rtl'] &{ padding-right: @nav-tab-radius+1; padding-left: @p-nav-padding; } } .p-nav{ -webkit-backdrop-filter: blur(8px); } .p-navSticky.is-sticky .p-nav{ background: fade(@xf-publicNav--background-color, 100%); border-radius: 0; } // Navigation links: border-radius, box-shadow, etc @nav-tab-radius: 3px; @nav-tab-radius-bottom: @nav-tab-radius+1; #XF .p-nav-list{ li{ &:last-child{ margin-right: @nav-tab-radius-bottom; } } .p-navEl{ // Active tab &.is-selected{ border-radius: @nav-tab-radius @nav-tab-radius 0 0; position: relative; svg{ position: absolute; bottom: 0; width: @nav-tab-radius-bottom; height: @nav-tab-radius-bottom; pointer-events: none; transform: translate(0,0); &:first-of-type{ left: -@nav-tab-radius-bottom; } &:last-of-type{ right: -@nav-tab-radius-bottom; } path{ fill: @xf-xenfocus_wrapperStyles--background-color; } } } // Dropdown active tab &.is-menuOpen{ } } } // User links .p-navgroup-link{ text-shadow: rgba(0,0,0,0.4) 0px 1px 1px; } /* ---------------- - Search ---------------- */ // Adjust alignment of search field due to top border on p-nav .p-nav .focus-wrap-search{ padding-bottom: 1px; } /* ---------------- - Breadcrumbs ---------------- */ .xenfocus_breadcrumb(){ box-shadow: rgba(0,0,0,0.07) 0px 1px 3px; } /* ---------------- - Content wrapper ---------------- */ // Can be either .focus-wrapper or .focus-content .focus-content(){ .xf-xenfocus_wrapperStyles(); } /* ---------------- - Blocks ---------------- */ @block-container-shift: true; .focus-block-container-shift(){ } .focus-block-header-shift(){ margin: 0; margin-bottom: 5px; } .focus-block-body-shift(){ } .focus-block-container(){ box-shadow: rgba(0,0,0,0.08) 0px 1px 4px; border-color: rgba(0,0,0,0.15); } .focus-block-header(){ padding: 15px; text-shadow: rgba(0,0,0,0.5) 0px 1px 1px, rgba(0,0,0,0.15) 0px 0px 4px; box-shadow: rgba(0,0,0,0.2) 0px 1px 4px inset; margin: 5px; border-radius: @xf-blockBorderRadius; } .focus-block-body(){ } .focus-block-minor-header(){ /* box-shadow: rgba(0,0,0,0.1) 0px 1px 3px inset; border-radius: @xf-blockBorderRadius; margin: 5px; margin-bottom: 0; */ padding: 9px; } /* ---------------- - Nodes ---------------- */ @node-background-inherit: true; .node-background-inherit(@debug) when (@debug = true) { <xf:if is="!property('xenfocus_iconStyles--background-image') AND property('xenfocus_gridWallpaper')"> .node-icon i{ html:not(.focus-grid) &{ text-shadow: rgba(0,0,0,0.5) 0px 1px 1px, rgba(0,0,0,0.15) 0px 0px 4px; box-shadow: rgba(0,0,0,0.2) 0px 1px 4px inset; } html[data-focus-bg='1']:not(.focus-grid) &{ .focus-background-1(); } html[data-focus-bg='2']:not(.focus-grid) &{ .focus-background-2(); } html[data-focus-bg='3']:not(.focus-grid) &{ .focus-background-3(); } html[data-focus-bg='4']:not(.focus-grid) &{ .focus-background-4(); } html[data-focus-bg='5']:not(.focus-grid) &{ .focus-background-5(); } html[data-focus-bg='6']:not(.focus-grid) &{ .focus-background-6(); } } </xf:if> } .node-background-inherit(@node-background-inherit); /* ---------------- - Other ---------------- */ .message-content a{ text-decoration: underline; } /* Uniform theme by xenfocus.com */ ]]>
</template>
</templates>
<properties>
<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: Theme editor" description="Enable the theme editor, which allows your users to customize the theme to their own needs." 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_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: Other" description="Customize minor areas of the theme such as zebra rows and sticky topic separation." display_order="60" addon_id=""/>
<property property_name="avatarBorderRadius" group_name="avatar" title="Avatar border radius" description="Controls the size of the rounded corners on avatars - a sufficiently large value will make avatars circular" property_type="value" value_type="unit" depends_on="" value_group="" display_order="200" addon_id="XF">
<value>"50%"</value>
</property>
<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": "@xf-paletteColor5", "border-width": "0px", "border-color": "xf-intensify(@xf-blockHeader--background-color, 5%)" }</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": "darken(@xf-contentAltBg, 6%)" }</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="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="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.5"</value>
</property>
<property property_name="linkColor" group_name="color" title="Link color" description="Basic hyperlinks on standard background colors will use this style" property_type="value" value_type="color" depends_on="" value_group="link" display_order="1000" addon_id="XF">
<value>"@xf-paletteColor5"</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="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>"#f0f2f4"</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>"#6e7c91"</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>"#4d5766"</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>"#e8ebed"</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>"#cacdcf"</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>"#878a8c"</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>"#575a5c"</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>"#383b3d"</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": "rgba(255,255,255,0.8)", "background-color": "rgba(0,0,0,0.5)", "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": "@xf-contentBg" }</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(255,255,255,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>""</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": "rgba(0, 0, 0, 0.4)" }</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-textColor", "font-weight": "@xf-fontWeightHeavy", "background-color": "@xf-xenfocus_wrapperStyles--background-color", "extra": "text-transform: uppercase;" }</value>
</property>
<property property_name="publicNavSticky" group_name="headerNav" title="Sticky navigation element" description="If you intend for some or all of your header to stick to the top of the page when it is scrolled, choose which elements should stick" property_type="value" value_type="radio" depends_on="" value_group="navigation" display_order="1200" addon_id="XF">
<value_parameters>primary={{ phrase('primary_navigation_row_only') }} all={{ phrase('primary_and_sub_navigation_rows') }} none={{ phrase('none') }}</value_parameters>
<value>"none"</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>{ "font-size": "13px", "color": "fade(@xf-publicNav--color, 70%)", "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-publicNavTab--color, 8%)" }</value>
</property>
<property property_name="publicNavTabMenuOpen" group_name="headerNav" title="Navigation row - menu open" description="Styling applied when the popup menu for the current tab is visible" property_type="css" value_type="" depends_on="" value_group="" display_order="20450" css_components="text,background,extra" addon_id="XF">
<value>{ "color": "@xf-textColor", "text-decoration": "none", "background-color": "@xf-contentBg" }</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="" value_group="bg1" display_order="260" addon_id="">
<value_parameters>fixed=fixed scroll=scroll</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="xenfocus_bg1_hex" group_name="xenfocus_picker" title="Background #1: Hex" description="The hex color for image 1" property_type="value" value_type="color" depends_on="" value_group="bg1" display_order="210" addon_id="">
<value>"#49646b"</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="" value_group="bg1" display_order="220" addon_id="">
<value>"styles/xenfocus/uniform/backgrounds/1.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="" value_group="bg1" 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="" value_group="bg1" 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="" value_group="bg1" 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="" value_group="bg2" display_order="360" addon_id="">
<value_parameters>fixed=fixed scroll=scroll</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="xenfocus_bg2_hex" group_name="xenfocus_picker" title="Background #2: Hex" description="The hex color for image 2" property_type="value" value_type="color" depends_on="" value_group="bg2" display_order="310" addon_id="">
<value>"#00687c"</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="" value_group="bg2" display_order="320" addon_id="">
<value>"styles/xenfocus/uniform/backgrounds/2.jpg"</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="" value_group="bg2" 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="" value_group="bg2" display_order="350" 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_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="" value_group="bg2" 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="" value_group="bg3" display_order="460" addon_id="">
<value_parameters>fixed=fixed scroll=scroll</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="xenfocus_bg3_hex" group_name="xenfocus_picker" title="Background #3: Hex" description="The hex color for image 3" property_type="value" value_type="color" depends_on="" value_group="bg3" display_order="410" addon_id="">
<value>"#8c6861"</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="" value_group="bg3" display_order="420" addon_id="">
<value>"styles/xenfocus/uniform/backgrounds/3.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="" value_group="bg3" 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="" value_group="bg3" 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="" value_group="bg3" display_order="430" addon_id="">
<value>"cover"</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="" value_group="bg4" display_order="560" addon_id="">
<value_parameters>fixed=fixed scroll=scroll</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="xenfocus_bg4_hex" group_name="xenfocus_picker" title="Background #4: Hex" description="The hex color for image 4" property_type="value" value_type="color" depends_on="" value_group="bg4" 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="" value_group="bg4" 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="" value_group="bg4" 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="" value_group="bg4" 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="" value_group="bg4" 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="" value_group="bg5" display_order="660" addon_id="">
<value_parameters>fixed=fixed scroll=scroll</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="xenfocus_bg5_hex" group_name="xenfocus_picker" title="Background #5: Hex" description="The hex color for image 5" property_type="value" value_type="color" depends_on="" value_group="bg5" 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="" value_group="bg5" 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="" value_group="bg5" 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="" value_group="bg5" 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="" value_group="bg5" 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="" value_group="bg6" display_order="760" addon_id="">
<value_parameters>fixed=fixed scroll=scroll</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="xenfocus_bg6_hex" group_name="xenfocus_picker" title="Background #6: Hex" description="The hex color for image 6" property_type="value" value_type="color" depends_on="" value_group="bg6" 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="" value_group="bg6" 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="" value_group="bg6" 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="" value_group="bg6" 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="" value_group="bg6" 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": "#666", "background-color": "#fdfdfd", "background-image": "linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)", "border-color": "rgba(0,0,0,0.15)", "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": "darken(@xf-xenfocus_breadcrumb--color, 10%)", "background-color": "rgba(255, 255, 255, 0.08)" }</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_themeEditor" title="Allow members to hide countdown?" description="If enabled, users will be able to hide the countdown using their theme editor. This setting only applies if you have enabled a countdown." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="150" 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>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-paletteColor5"</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 view?" description="If enabled, your forums will be placed into a grid formation. Only compatible in browsers which support css grid." property_type="value" value_type="boolean" depends_on="" value_group="xenfocus_grid" 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="" display_order="140" addon_id="">
<value>"2,3"</value>
</property>
<property property_name="xenfocus_gridToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle "Grid view"?" description="If enabled, your members will be able to toggle the forum layout between grid and table." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="100" addon_id="">
<value>1</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="" display_order="110" 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="xenfocus_logoMobile" 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_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>{ "color": "fade(@xf-xenfocus_iconStyles--color, 30%)" }</value>
</property>
<property property_name="xenfocus_iconSize" group_name="xenfocus_nodeIcons" title="Node icon font-size (px)" description="" property_type="value" value_type="number" depends_on="" value_group="IconSize" display_order="150" addon_id="">
<value>"21"</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>{ "color": "#fff", "border-radius": "3px" }</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="xenfocus_iconSize" display_order="130" addon_id="">
<value>"46"</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="" 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="xenfocus_logo" display_order="28" 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="xenfocus_logo" display_order="29" 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="xenfocus_logo" display_order="30" addon_id="">
<value>"140"</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="xenfocus_logoMobile" display_order="80" addon_id="">
<value>"60"</value>
</property>
<property property_name="xenfocus_logoMini" group_name="xenfocus_logo" title="Mini logo image" description="If you'd like to display a mini logo next to your text logo, insert the image path here." property_type="value" value_type="string" depends_on="" value_group="xenfocus_logo" display_order="27" addon_id="">
<value>""</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="xenfocus_logo" display_order="50" addon_id="">
<value>"28"</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="xenfocus_logoMobile" 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="xenfocus_logo" display_order="26" addon_id="">
<value>"A modern theme for xenforo 2!"</value>
</property>
<property property_name="xenfocus_logoText" group_name="xenfocus_logo" title="Text logo" description="If an image hasn't been uploaded as a logo, this will be used instead. If this is left blank, your board name will be displayed." property_type="value" value_type="string" depends_on="" value_group="xenfocus_logo" display_order="25" addon_id="">
<value>"Uniform"</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="xenfocus_navigation" display_order="210" addon_id="">
<value>"48"</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="xenfocus_navigation" 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="xenfocus_picker" 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="xenfocus_picker" display_order="115" addon_id="">
<value_parameters>1=1 2=2 3=3 4=4 5=5 6=6</value_parameters>
<value>"1"</value>
</property>
<property property_name="xenfocus_pickerNumber" group_name="xenfocus_picker" title="How many background choices?" description="" property_type="value" value_type="select" depends_on="xenfocus_picker" value_group="xenfocus_picker" display_order="113" addon_id="">
<value_parameters>2=2 3=3 4=4 5=5 6=6</value_parameters>
<value>"3"</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": "#eee", "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="" display_order="50" addon_id="">
<value>0</value>
</property>
<property property_name="xenfocus_sidebarFlipToggle" group_name="xenfocus_themeEditor" 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="" display_order="170" 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="" 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="" display_order="45" 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="" display_order="15" addon_id="">
<value>1</value>
</property>
<property property_name="xenfocus_stickyToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle sticky sidebars?" description="If enabled, users will be able to toggle the sticky-state of their sidebar." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="160" 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="" 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 theme editor?" description="The theme editor allows your members to modify the theme to their preference, including background images and width." 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_userIcons" group_name="xenfocus_user" title="Hide text?" description="If enabled, the text is hidden for Notifications and Alerts, leaving only the icons." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="140" addon_id="">
<value>1</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>0</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", "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_wrapper" 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="xenfocus_width" display_order="115" addon_id="">
<value>0</value>
</property>
<property property_name="xenfocus_widthToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle "Fluid width"?" description="If enabled, your members will be able to toggle "Fluid width" on and off using the theme editor." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="75" 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>{ "background-color": "xf-intensify(@xf-contentBg, 2%)", "border-radius": "0 0 @xf-blockBorderRadius @xf-blockBorderRadius", "extra": "box-shadow: rgba(0,0,0,0.06) 0px 0px 20px, rgba(0,0,0,0.08) 0px 1px 3px;" }</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="" display_order="20" addon_id="">
<value>0</value>
</property>
</properties>
</style>