<?xml version="1.0" encoding="utf-8"?>
<style title="Class" description="Pure class, full control" user_selectable="1" export_version="2">
<templates>
<template title="EWRporta_articles.less" type="public" addon_id="EWR/Porta" version_id="2022" version_string="2.0.2.2"><![CDATA[.porta-article-pager { margin-top: -(@xf-elementSpacer); }
.porta-article-loader { display: none; text-align: center; }
.porta-article-item
{
margin-bottom: @xf-elementSpacer;
.porta-article-header
{
display: block;
overflow: hidden;
position: relative;
.porta-header-image
{
background-position: center;
background-size: cover;
height: @xf-EWRporta_header_height;
}
.porta-header-medio
{
background-position: center;
background-size: cover;
height: @xf-EWRporta_medio_height;
}
.porta-header-text
{
position: absolute; bottom: 0; left: 0; right: 0;
.xf-EWRporta_header_title;
>span
{
position: absolute; bottom: 0; left: 0; right: 0;
padding: 0 @xf-elementSpacer;
}
}
.porta-header-play
{
position: absolute;
top: 0; bottom: 20px; left: 0; right: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.fa
{
color: @xf-textColorAttention;
font-size: 100px;
text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000;
}
}
}
.porta-article-date
{
float: left;
padding: @xf-paddingLarge 0;
margin-left: @xf-EWRporta_dateblock_margin;
.porta-date-block
{
.xf-messageUserBlock;
width: 50px;
padding: 10px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
b { display: block; font-size: 1.5em; }
}
}
.message-inner { display: block; }
.message-body .bbWrapper { display: inline; }
.block-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.porta-masonry
{
margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
.porta-article-item
{
display: inline-block;
width: ~"calc(100% / @xf-EWRporta_masonry_columns)";
.porta-article-container
{
margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
}
}
}
.porta-article-status
{
display: none;
.porta-article-ellipse
{
font-size: 20px;
position: relative;
width: 4em;
height: 1em;
margin: 10px auto;
.loader-ellipse-dot
{
display: block;
width: 1em;
height: 1em;
border-radius: 0.5em;
background: @xf-textColor;
position: absolute;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.loader-ellipse-dot:nth-child(1),
.loader-ellipse-dot:nth-child(2) { left: 0; }
.loader-ellipse-dot:nth-child(3) { left: 1.5em; }
.loader-ellipse-dot:nth-child(4) { left: 3em; }
@keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } }
@keyframes slide { to { transform: translateX(1.5em) } }
.loader-ellipse-dot:nth-child(1) { animation-name: reveal; }
.loader-ellipse-dot:nth-child(2),
.loader-ellipse-dot:nth-child(3) { animation-name: slide; }
.loader-ellipse-dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; }
}
}
@media (max-width: @xf-responsiveWide)
{
.porta-masonry
{
.porta-article-item
{
width: ~"calc(100% / @xf-EWRporta_masonry_wide)";
}
}
}
@media (max-width: @xf-responsiveMedium)
{
.porta-masonry
{
margin: 0 (-@xf-pageEdgeSpacer / 2);
.porta-article-item
{
width: ~"calc(100% / @xf-EWRporta_masonry_medium)";
.porta-article-date
{
margin-left: -10px;
.porta-date-block
{
width: auto;
padding: 10px 5px;
transform: rotate(180deg);
writing-mode: vertical-rl;
b { display: inline; font-size: initial; }
}
}
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.porta-masonry
{
.porta-article-item
{
display: block;
width: 100%;
.porta-article-container
{
margin: 0;
}
.porta-article-date
{
display: none;
}
}
}
}]]></template>
<template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[<!DOCTYPE html>
<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>
<xf:set var="$uix_htmlClasses"></xf:set>
<xf:if is="property('uix_pageWidthToggle') != 'disabled'">
<xf:comment> UI.X width toggle class</xf:comment>
<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_page--{{$uix_pageWidth}}</xf:set>
</xf:if>
<xf:if is="property('uix_navigationType') == 'sidebarNav'">
<xf:comment> UI.X sidebar navigation toggle class</xf:comment>
<xf:if is="!$uix_sidebarNavCollapsed">
<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} sidebarNav--active</xf:set>
</xf:if>
</xf:if>
<xf:if is="property('uix_collapsibleSidebar')">
<xf:comment> UI.X sidebar toggle class</xf:comment>
<xf:if is="$uix_sidebarCollapsed">
<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_sidebarCollapsed</xf:set>
</xf:if>
</xf:if>
<xf:if is="{$uix_showWelcomeSection}">
<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasWelcomeSection</xf:set>
</xf:if>
<xf:comment>SectionLinks Breakpoints</xf:comment>
<xf:set var="$uix_subNavContentStatic" value="0" />
<xf:comment>--------- COMPONENT MARKUP MACROS ---------
Markup for components can/should be added here in an XF:set if
we want the components to have variably set locations
</xf:comment>
<xf:comment> --- main page tab bar --- </xf:comment>
<xf:set var="$uix_mainTabComponent">
<xf:if contentcheck="true">
<div class="block uix_mainTabBar">
<div class="block-tabHeader tabs hScroller" data-xf-init="h-scroller">
<span class="hScroller-scroll">
<xf:contentcheck>
<xf:if is="{$uix_mainTabSets}">
<xf:macro template="uix_mainTabSets" name="{$uix_mainTabSets}" arg-activeTab="{$uix_mainTabActive}" />
</xf:if>
</xf:contentcheck>
</span>
</div>
</div>
</xf:if>
</xf:set>
<xf:macro name="uix_mainTabComponent" arg-content="!" arg-location="!">
<xf:if is="property('uix_tabBarLocation') === {$location} && property('uix_enableMainTabs')">
{{$content}}
</xf:if>
</xf:macro>
<xf:comment> --- Sidebar trigger --- </xf:comment>
<xf:set var="$uix_sidebarTrigger__content">
<xf:if is="{$sidebar}">
<xf:if is="property('uix_collapsibleSidebar') && {$uix_canCollapseSidebar}">
<a class="uix_sidebarTrigger__component uix_sidebarTrigger {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
<i class="mdi mdi-dots-vertical"></i>
<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
</a>
</xf:if>
<xf:if is="property('uix_sidebarMobileCanvas')">
<a class="uix_sidebarCanvasTrigger uix_sidebarTrigger__component {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
<i class="mdi mdi-dots-vertical"></i>
<span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
</a>
</xf:if>
</xf:if>
</xf:set>
<xf:macro name="uix_sidebarTrigger__component" arg-location="" arg-content="">
<xf:if is="({$location} == property('uix_sidebarTriggerPosition')) || ({$location} == 'navigation')">
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- Search bar --- </xf:comment>
<xf:if is="!{$uix_hideNavigation}">
<xf:set var="$uix_search__component">
<xf:if is="$xf.visitor.canSearch()">
<div class="uix_searchBar">
<div class="uix_searchBarInner">
<form action="{{ link('search/search') }}" method="post" class="uix_searchForm" data-xf-init="quick-search">
<a class="uix_search--close">
<xf:macro name="icon" template="uix_icons.less" arg-icon="close" />
</a>
<xf:textbox autocomplete="off" class="js-uix_syncValue uix_searchInput uix_searchDropdown__trigger" data-uixsync="search" name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" />
<a href="{{ link('search') }}"
class="uix_search--settings u-ripple"
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 }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="settings" />
</a>
<span class="<xf:if is="property('uix_searchButton')">uix_search--submit</xf:if> uix_searchIcon">
<xf:macro name="icon" template="uix_icons.less" arg-icon="search" />
</span>
<xf:csrf />
</form>
</div>
<xf:if is="property('uix_searchIconBehavior') != 'dropdown'">
<a class="uix_searchIconTrigger p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple"
aria-label="{{ phrase('search') }}"
aria-expanded="false"
aria-haspopup="true"
title="{{ phrase('search') }}">
<i aria-hidden="true"></i>
</a>
</xf:if>
<xf:if is="property('uix_searchIconBehavior') != 'expand'">
<a href="{{ link('search') }}"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search u-ripple js-uix_minimalSearch__target"
data-xf-click="menu"
aria-label="{{ phrase('search') }}"
aria-expanded="false"
aria-haspopup="true"
title="{{ phrase('search') }}">
<i aria-hidden="true"></i>
</a>
</xf:if>
<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"
class="js-uix_syncValue"
data-uixsync="search"
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"
class="js-uix_syncValue"
data-uixsync="search"
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>
<div class="menu menu--structural menu--wide uix_searchDropdown__menu" aria-hidden="true">
<form action="{{ link('search/search') }}" method="post"
class="menu-content"
data-xf-init="quick-search">
<!--[XF:search_menu:above_input]-->
<xf:if is="$searchConstraints">
<div class="menu-row">
<div class="inputGroup">
<input name="keywords"
class="js-uix_syncValue"
data-uixsync="search"
placeholder="{{ phrase('search...') }}"
aria-label="{{ phrase('search') }}"
type="hidden" />
<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>
</div>
<xf:else />
<input name="keywords"
class="js-uix_syncValue"
data-uixsync="search"
placeholder="{{ phrase('search...') }}"
aria-label="{{ phrase('search') }}"
type="hidden" />
</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') }}" />
</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') }}" rel="nofollow">{{ phrase('th_advanced_uix...') }}</xf:button>
</span>
</div>
<xf:csrf />
</form>
</div>
</div>
</xf:if>
</xf:set>
</xf:if>
<xf:macro name="uix_search__component" arg-content="!" arg-location="!">
<xf:if is="(property('uix_searchPosition') == {$location}) || ({$location} == 'navigation')">
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- whats new --- </xf:comment>
<xf:if is="!property('uix_removeWhatsNewButtons')">
<xf:set var="$uix_whatsNew__component">
<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:set>
</xf:if>
<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
<xf:if is="({$xf.visitor.user_id} && property('uix_userTabsPosition') == {$location}) || ({$location} == 'navigation')">
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- login tabs --- </xf:comment>
<xf:set var="$uix_loginTabs__component">
<xf:if is="{$template} != 'login'">
<xf:if is="property('uix_loginStyle') == 'dropdown'">
<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="menu">
<i></i>
<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
</a>
<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('login') }}"></div>
<xf:elseif is="property('uix_loginStyle') == 'modal'" />
<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="overlay" data-follow-redirects="on">
<i></i>
<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
</a>
<xf:elseif is="property('uix_loginStyle') == 'link'" />
<a href="{{ link('login') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" data-follow-redirects="on">
<i></i>
<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
</a>
<xf:elseif is="property('uix_loginStyle') == 'slidingPanel'" />
<a href="{{ link('login') }}" id="uix_loginPanel--trigger" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--logIn" rel="nofollow" data-follow-redirects="on">
<i></i>
<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
</a>
</xf:if>
</xf:if>
<xf:if is="{$template} != 'register_form'">
<xf:if is="property('uix_loginStyle') == 'modal'">
<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on">
<i></i>
<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
</a>
<xf:else />
<a href="{{ link('register') }}" class="p-navgroup-link u-ripple p-navgroup-link--textual p-navgroup-link--register" data-follow-redirects="on">
<i></i>
<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
</a>
</xf:if>
</xf:if>
</xf:set>
<xf:macro name="uix_loginTabs__component" arg-content="!" arg-location="!">
<xf:if is="property('uix_loginTriggerPosition') == {$location} || ({$location} == 'navigation')">
<xf:if is="{$location} == 'tablinks'">
</xf:if>
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- user tabs --- </xf:comment>
<xf:if is="!{$uix_hideNavigation}">
<xf:set var="$uix_userTabs__component">
<xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'">
<a href="{{ link('account') }}"
class="p-navgroup-link u-ripple 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 u-ripple 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 u-ripple 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 u-ripple 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:set>
</xf:if>
<xf:macro name="uix_userTabs__component" arg-content="!" arg-location="!">
<xf:if is="property('uix_userTabsPosition') == {$location} || ({$location} == 'navigation')">
<xf:if is="{$location} == 'tablinks'">
</xf:if>
{$content}
</xf:if>
</xf:macro>
<xf:set var="$uix_socialMediaContent">
<xf:include template="uix_socialMedia" />
</xf:set>
<xf:macro name="uix_socialMedia__component" arg-content="" arg-location="">
<xf:if is="(property('uix_socialMediaPosition') == {$location}) || ({$location} == 'copyright')">
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- Visitor tabs --- </xf:comment>
<xf:if is="!{$uix_hideNavigation}">
<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="" arg-searchContent="!" arg-location="!" arg-whatsNewContent="!" arg-visitorContent="!" arg-loginTabsContent="!">
<xf:if contentcheck="true">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
<xf:contentcheck>
<xf:if is="$xf.visitor.user_id">
<xf:macro name="uix_userTabs__component" arg-content="{$visitorContent}" arg-location="{$location}" />
<xf:else />
<xf:macro name="uix_loginTabs__component" arg-content="{$loginTabsContent}" arg-location="{$location}" />
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
<xf:contentcheck>
<xf:macro name="uix_whatsNew__component" arg-content="{$whatsNewContent}" arg-location="{$location}" />
<xf:macro name="uix_search__component" arg-content="{$searchContent}" arg-location="{$location}" />
</xf:contentcheck>
</div>
</xf:if>
<xf:macro name="uix_socialMedia__component" arg-content="{$socialMediaContent}" arg-location="{$location}" />
</xf:contentcheck>
</xf:if>
</xf:macro>
</xf:if>
<xf:comment> --- Titlebar --- </xf:comment>
<xf:set var="$uix_titlebar__component">
<xf:if is="!{$uix_hidePageTitle} || ( {$pageAction} && !property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || {{ !in_array({$template}, ['forum_list', 'forum_new_posts', 'thtopics_forum_newest_posts', 'thtrending_trending_view', 'thtopics_forum_latest_threads', 'thtopics_topic_list']) }} )
)">
<xf:if is="$headerHtml is not empty">
<div class="p-body-header">
<div class="pageContent">
{$headerHtml|raw}
</div>
</div>
<xf:elseif contentcheck="true" />
<div class="p-body-header">
<div class="pageContent">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="uix_headerInner">
<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:contentcheck>
</div>
</xf:if>
<xf:if is="$description is not empty">
<div class="p-description">{$description}</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="uix_headerInner--opposite">
<xf:contentcheck>
<xf:if is="!property('uix_pageActionBreadcrumb') && (!property('uix_removePageAction') || ({$template} != 'forum_list') )">
<xf:if contentcheck="true">
<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
</xf:if>
</xf:if>
<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="titlebar" />
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:if>
</xf:set>
<xf:macro name="uix_titlebar__component" arg-location="!" arg-content="!">
<xf:if is="property('uix_titlebarLocation') === {$location}">
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- Sidebar --- </xf:comment>
<xf:set var="$uix_sidebar__component">
<xf:if is="$sidebar">
<div uix_component="MainSidebar" class="p-body-sidebar">
<div data-ocm-class="offCanvasMenu-backdrop"></div>
<div class="uix_sidebarInner{{ property('uix_stickySidebar') ? ' uix_stickyBodyElement' : '' }}">
<div class="uix_sidebar--scroller">
<xf:ad position="container_sidebar_above" />
<xf:foreach loop="$sidebar" value="$sidebarHtml">
{$sidebarHtml}
</xf:foreach>
<xf:ad position="container_sidebar_below" />
</div>
</div>
</div>
</xf:if>
</xf:set>
<xf:macro name="uix_sidebar__component" arg-location="!" arg-content="!">
<xf:if is="property('uix_sidebarLocation') === {$location}">
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- Logo --- </xf:comment>
<xf:set var="$uix_logo__component">
<div class="p-header-logo p-header-logo--image">
<a class="uix_logo" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
<xf:if is="property('publicLogoUrl') || property('publicLogoUrl2x')">
<img src="{{ base_url(property('publicLogoUrl')) }}"
alt="{$xf.options.boardTitle}"
{{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
<xf:else />
<h2 class="uix_logo--text"><xf:if is="{{ property('uix_logoIcon') }}"><i class="{{ property('uix_logoIcon') }} uix_logoIcon"></i></xf:if>{{ property('uix_logoText') }}</h2>
</xf:if>
</a>
<xf:if is="property('uix_logoSmall')">
<a class="uix_logoSmall" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
<img src="{{ base_url(property('uix_logoSmall')) }}"
alt="{$xf.options.boardTitle}"
/>
</a>
</xf:if>
</div>
</xf:set>
<xf:macro name="uix_logo__component" arg-content="!">
{$content}
</xf:macro>
<xf:comment> --- staff bar --- </xf:comment>
<xf:set var="$uix_staffbar__component">
<xf:if contentcheck="true">
<div class="p-staffBar <xf:if is="property('uix_stickyStaffBar')">uix_stickyBar</xf:if>">
<div class="pageContent">
<xf:contentcheck>
<xf:if contentcheck="true">
<xf:comment> --- add primary side staff bar content here ---</xf:comment>
<xf:set var="$uix_alwaysStaffBar" value="1" />
<div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
<div class="hScroller-scroll">
<xf:contentcheck>
<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
<a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
{{ phrase('approval_queue') }}
</a>
</xf:if>
<xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
<a href="{{ link('reports') }}"
class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:') . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
{{ phrase('reports') }}
</a>
</xf:if>
<xf:if contentcheck="true">
<a class="p-staffBar-link menuTrigger" data-xf-key="alt+m" data-xf-click="menu" 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 ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
</xf:if>
<!--[XF:mod_tools_menu:bottom]-->
</xf:contentcheck>
</div>
</div>
</xf:if>
<xf:if is="$xf.visitor.is_admin">
<a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
</xf:if>
<xf:if contentcheck="true">
<a href="{{ base_url('admin.php') }}" target="_blank" class="p-staffBar-link menuTrigger uix_adminTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">
<xf:if is="$xf.visitor.is_admin">
{{ phrase('admin') }}
<xf:else />
{{ phrase('moderator') }}
</xf:if>
</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_admin">
<a href="{{ base_url('admin.php') }}" target="_blank" class="menu-linkRow">{{ phrase('admin') }}</a>
</xf:if>
<!--[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 ? 'Last report update: ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a>
</xf:if>
<xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
<a href="{{ link('approval-queue') }}" class="menu-linkRow 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="menu-linkRow badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}"
data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update') . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
{{ phrase('reports') }}
</a>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="p-nav-opposite">
<xf:if is="property('uix_staffBarBreakpoint') != '100%'">
<xf:set var="$uix_responsiveStaffBar" value="1" />
<xf:else />
<xf:set var="$uix_alwaysStaffBar" value="1" />
</xf:if>
<xf:contentcheck>
<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="staffBar" />
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:set>
<xf:if is="!{$uix_alwaysStaffBar} && {$uix_responsiveStaffBar}">
<xf:set var="$uix_htmlClasses">{$uix_htmlClasses} uix_responsiveStaffBar</xf:set>
</xf:if>
<xf:macro name="uix_staffbar__component" arg-content="!">
{$content}
</xf:macro>
<xf:comment> --- section links --- </xf:comment>
<xf:if is="!{$uix_hideNavigation}">
<xf:set var="$subNavHtml">
<xf:if contentcheck="true">
<div class="p-sectionLinks">
<div class="pageContent">
<xf:contentcheck>
<xf:if is="$selectedNavChildren is not empty && (property('uix_viewportWidthRemoveSubNav') != '100%')">
<xf:set var="$uix_subNavContentStatic" value="1" />
<xf:set var="$uix_htmlClasses">{{$uix_htmlClasses}} uix_hasSectionLinks</xf:set>
<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>
</xf:if>
<xf:if contentcheck="true">
<div class="p-nav-opposite">
<xf:contentcheck>
<xf:if contentcheck="true">
<xf:set var="$uix_subNavContentStatic" value="1" />
<xf:contentcheck>
<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="tablinks" />
</xf:contentcheck>
</xf:if>
<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="sectionLinks" />
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</div>
<xf:elseif is="{$selectedNavEntry}" />
<div class="p-sectionLinks p-sectionLinks--empty"></div>
</xf:if>
</xf:set>
</xf:if>
<xf:comment> --- UIX sidebar navigation --- </xf:comment>
<xf:set var="$uix_sidebarNav__component">
<div class="uix_sidebarNav">
<div class="uix_sidebarNav__inner <xf:if is="property('uix_stickySidebar')"> uix_stickyBodyElement</xf:if>">
<div class="uix_sidebar--scroller">
<xf:if contentcheck="true">
<ul class="uix_sidebarNavList js-offCanvasNavSource">
<xf:contentcheck>
<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
<li class="uix_sidebarNavList__listItem">
<xf:macro name="nav_entry"
arg-sidebarNav="1"
arg-navId="{$navSection}"
arg-nav="{$navEntry}"
arg-selected="{{ $navSection == $pageSection }}"
arg-shortcut="{$i}"/>
</li>
</xf:foreach>
</xf:contentcheck>
</ul>
</xf:if>
<xf:comment>
<xf:if is="{{ is_addon_active('ThemeHouse/Bookmarks') }}">
<xf:if contentcheck="true">
<ul class="uix_sidebarNavList">
<xf:contentcheck>
<xf:if is="{$xf.visitor.getLatestThreadBookmarks()} is not empty">
<li class="uix_sidebarNavList__title">Bookmarked threads</li>
</xf:if>
<xf:foreach loop="$xf.visitor.getLatestThreadBookmarks()" value="$thread">
<li><div class="p-navEl u-ripple">
<div class="p-navEl__inner"><a data-nav-id="forums" href="{{ $thread.link }}" class="p-navEl-link"><span>{{ $thread.title }}</span></a></div>
</div></li>
</xf:foreach>
</xf:contentcheck>
</ul>
</xf:if>
<xf:if contentcheck="true">
<ul class="uix_sidebarNavList uix_bookmarkedNodesList">
<xf:contentcheck>
<xf:if is="{$xf.visitor.getLatestNodeBookmarks()} is not empty">
<li class="uix_sidebarNavList__title">Bookmarked nodes</li>
</xf:if>
<xf:foreach loop="$xf.visitor.getLatestNodeBookmarks()" value="$node">
<li><div class="p-navEl u-ripple">
<div class="p-navEl__inner">
<a data-nav-id="forums" href="{{ $node.link }}" class="p-navEl-link">{$node.renderIcon()|raw}<span>{{ $node.title}}</span></a></div>
</div></li>
</xf:foreach>
</xf:contentcheck>
</ul>
</xf:if>
</xf:if>
</xf:comment>
<xf:if is="$xf.visitor.user_id">
<ul class="uix_sidebarNavList">
<li><div class="p-navEl u-ripple {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="p-navEl-link">{{ phrase('th_profile_uix') }}</a></div></div></li>
<li><div class="p-navEl u-ripple {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="p-navEl-link">{{ phrase('alerts')}}</a></div></div></li>
<li><div class="p-navEl u-ripple {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="p-navEl-link">{{ phrase('settings')}}</a></div></div></li>
</ul>
</xf:if>
<xf:if contentcheck="true">
<div class="uix_sidebarNav__inner__widgets">
<xf:contentcheck>
{$uix_sidebarNavWidgets|raw}
</xf:contentcheck>
</div>
</xf:if>
</div>
</div>
</div>
</xf:set>
<xf:macro name="uix_sidebarNav__component" arg-content="!">
{$content}
</xf:macro>
<xf:comment> --- Canvases --- </xf:comment>
<xf:macro name="uix_canvasTab" arg-icon="!" arg-location="!" arg-canvas="!" arg-type="!">
<xf:if is="{$location} == {$canvas}">
<div class="uix_canvasTab uix_canvasTab__{{$type}}" data-target="uix_canvasPanel__{{$type}}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="{{$icon}}" />
</div>
</xf:if>
</xf:macro>
<xf:macro name="uix_canvasTabs" arg-location="!">
<div class="uix_canvas__tabs">
<xf:macro name="uix_canvasTab" arg-icon="list" arg-type="navigation" arg-location="{{property('uix_canvas_location_navigation')}}" arg-canvas="{$location}"/>
<xf:macro name="uix_canvasTab" arg-icon="grid" arg-type="sidebar" arg-location="{{property('uix_canvas_location_sidebar')}}" arg-canvas="{$location}"/>
<xf:macro name="uix_canvasTab" arg-icon="user" arg-type="account" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
<xf:macro name="uix_canvasTab" arg-icon="email" arg-type="conversations" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
<xf:macro name="uix_canvasTab" arg-icon="alert" arg-type="alerts" arg-location="{{property('uix_canvas_location_visitorTabs')}}" arg-canvas="{$location}"/>
<xf:macro name="uix_canvasTab" arg-icon="star" arg-type="custom" arg-location="{{property('uix_canvas_location_custom')}}" arg-canvas="{$location}"/>
</div>
</xf:macro>
<xf:comment>
<xf:set var="$uix_whatsNew__component">
<a href="{{ link('whats-new') }}"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
title="{{ phrase('whats_new') }}">
<i aria-hidden="true"></i>
<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
</a>
</xf:set>
<xf:macro name="uix_whatsNew__component" arg-content="!" arg-location="!">
<xf:if is="property('uix_userTabsPosition') == {$location}">
{$content}
</xf:if>
</xf:macro>
</xf:comment>
<xf:comment> --- breadcrumb --- </xf:comment>
<xf:if is="!{$uix_hideBreadcrumb}">
<xf:set var="$uix_breadcrumbCrumbContent">
<xf:set var="$position" value="{{ 0 }}" />
<xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
<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:set>
</xf:if>
<xf:set var="$breadcrumbCount">{{ count($breadcrumbs)|default(0) }}</xf:set>
<xf:set var="$navEntryCount">{{ $selectedNavEntry == null ? 0 : 1 }}</xf:set>
<xf:if is="{$uix_breadcrumbCrumbContent} && ({{ ($navEntryCount|escape + $breadcrumbCount|escape) != 1 }} || !property('uix_hideSingleCrumb'))">
<xf:set var="$uix_breadcrumbHasCrumbs" value="1" />
</xf:if>
<xf:macro name="breadcrumbs" arg-breadcrumbHasCrumbs="!" arg-crumbContent="!" arg-variant="">
<xf:if contentcheck="true">
<div class="breadcrumb block {{ $variant ? 'p-breadcrumb--' . $variant : '' }}">
<div class="pageContent">
<xf:contentcheck>
<xf:if is="{$breadcrumbHasCrumbs}">
<xf:if contentcheck="true">
<ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}"
itemscope itemtype="https://schema.org/BreadcrumbList">
<xf:contentcheck>
{{ $crumbContent }}
</xf:contentcheck>
</ul>
</xf:if>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:macro>
<xf:macro name="crumb" arg-href="!" arg-value="!" arg-position="{{ 0 }}">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="{$href}" itemprop="item">
<xf:if is="{$href} == {$xf.homePageUrl} && property('uix_homeCrumbIcon')">
<xf:macro name="icon" template="uix_icons.less" arg-icon="home" />
<xf:else />
<span itemprop="name">{$value}</span>
</xf:if>
</a>
<xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if>
</li>
</xf:macro>
<xf:comment> --- Top breadcrumb ---</xf:comment>
<xf:set var="$uix_topBreadcrumb__component">
<xf:ad position="container_breadcrumb_top_above" />
<xf:macro name="breadcrumbs"
arg-crumbContent="{$uix_breadcrumbCrumbContent}"
arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}" />
<xf:ad position="container_breadcrumb_top_below" />
</xf:set>
<xf:macro name="uix_topBreadcrumb__component" arg-location="" arg-content="!">
<xf:if is="property('uix_topBreadcrumbLocation') === {$location}">
{$content}
</xf:if>
</xf:macro>
<xf:comment> --- bottom breadcrumb --- </xf:comment>
<xf:set var="$uix_bottomBreadcrumb__component">
<xf:if is="!property('uix_removeBottomBreadcrumb')">
<xf:ad position="container_breadcrumb_bottom_above" />
<xf:macro name="breadcrumbs"
arg-crumbContent="{$uix_breadcrumbCrumbContent}"
arg-breadcrumbHasCrumbs="{$uix_breadcrumbHasCrumbs}"
arg-variant="bottom" />
<xf:ad position="container_breadcrumb_bottom_below" />
</xf:if>
</xf:set>
<xf:macro name="uix_bottomBreadcrumb__component" arg-content="!" arg-location="!">
<xf:if is="property('uix_bottomBreadcrumbLocation') == {$location}">
{$content}
</xf:if>
</xf:macro>
<xf:comment>------ NOTICES ---------</xf:comment>
<xf:set var="$uix_notices">
<xf:if is="!{$uix_hideNotices}">
<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:if>
</xf:set>
<xf:macro name="uix_notices" arg-location="!" arg-content="!">
<xf:if is="{$location} == property('uix_noticeLocation')">
{{$content}}
</xf:if>
</xf:macro>
<xf:comment>------ FOOTER ---------</xf:comment>
<xf:set var="$uix_footer">
<footer class="p-footer" id="footer">
<xf:if is="!{$uix_hideExtendedFooter} && property('uix_enableExtendedFooter')">
<xf:include template="uix_extendedFooter" />
</xf:if>
<div class="p-footer-inner">
<div class="pageContent">
<div class="p-footer-row">
<xf:if contentcheck="true">
<div class="p-footer-row-main">
<ul class="p-footer-linkList p-footer-choosers">
<xf:contentcheck>
<xf:if is="(property('uix_pageWidthToggle') != 'disabled') && $uix_canTogglePageWidth">
<li><a id="uix_widthToggle--trigger" data-xf-init="tooltip" title="{{ phrase('th_toggle_width_uix') }}" ><xf:macro name="icon" template="uix_icons.less" arg-icon="collapse" /></a></li>
</xf:if>
<xf:if is="$xf.visitor.canChangeStyle() && !{{ property('uix_hideStyleChoose') }}">
<li><a href="{{ link('misc/style') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('style_chooser') }}" rel="nofollow">{$xf.style.title}</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') }}" rel="nofollow"><i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
</xf:if>
</xf:contentcheck>
</ul>
</div>
</xf:if>
</div>
<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="#top" title="{{ phrase('top') }}" data-xf-click="scroll-to"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>
<li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
</ul>
</div>
</div>
</div>
<div class="p-footer-copyrightRow">
<div class="pageContent">
<div class="uix_copyrightBlock">
<xf:if contentcheck="true">
<div class="p-footer-copyright">
<xf:contentcheck>
<xf:copyright />
<xf:callback class="ThemeHouse\Core\Branding" method="renderStyleBranding" /><xf:set var="$thBrandingDisplayed" value="1" />
{{ phrase('extra_copyright') }}
</xf:contentcheck>
</div>
</xf:if>
<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:comment>
<xf:macro name="uix_socialMedia" arg-location="copyright" template="uix_socialMedia" />
</xf:comment>
<xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="copyright" />
</div>
</div>
</footer>
</xf:set>
<xf:macro name="uix_footer" arg-insideContent="!" arg-location="!" arg-content="!">
<xf:if is="($insideContent && {$location} == 'insideContent') || ($location == 'bottom' && !$insideContent)">
{{$content}}
</xf:if>
</xf:macro>
<xf:comment>------ END COMPONENT MARKUP MACROS ---------</xf:comment>
<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}"
class="has-no-js{{ $template ? ' template-' . $template : '' }} {$uix_htmlClasses} {$uix_additionalHtmlClasses}"
{{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<xf:comment> -- moved to top to use in macros
<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$title"><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>
</xf:comment>
<title>{$title}</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')) }}" />
<meta name="msapplication-TileColor" content="{{ property('metaThemeColor') }}">
</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:set var="$uix_stickyStaffBarHeight" value="0" />
<xf:if is="property('uix_stickyStaffBar') && ({$uix_responsiveStaffBar} || {$uix_alwaysStaffBar})">
<xf:set var="$uix_stickyStaffBarHeight" value="{{property('uix_stickyStaffBarHeight')}}" />
</xf:if>
<xf:include template="page_style" />
</head>
<body data-template="{$template}">
<div id="jumpToTop"></div>
<xf:comment> -- Not currently supporting Sidebar navigation when page style is not covered ---
<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') != 'covered'">
<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
</xf:if>
</xf:comment>
<div class="uix_pageWrapper--fixed">
<div class="p-pageWrapper" id="top">
<div class="uix_headerContainer">
<div class="uix_headerContainer--stickyFix"></div>
<xf:macro name="uix_staffbar__component" arg-content="{$uix_staffbar__component}" />
<xf:set var="$uix_headerContent">
<xf:if contentcheck="true">
<div class="p-header-content">
<xf:contentcheck>
<xf:if is="property('uix_viewportShowLogoBlock') != '0'">
<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />
</xf:if>
<xf:if contentcheck="true">
<div class="p-nav-opposite">
<xf:contentcheck>
<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="header" />
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:set>
<xf:macro name="uix_logoBlock" arg-content="">
<xf:if contentcheck="true">
<header class="p-header p-header--hasExtraContent" id="header">
<div class="p-header-inner">
{$content}
<xf:contentcheck>
<xf:ad position="container_header" />
</xf:contentcheck>
</div>
</header>
<xf:else />
<header class="p-header" id="header">
<div class="p-header-inner">
{$content}
</div>
</header>
</xf:if>
</xf:macro>
<xf:if is="{{ !property('uix_navAboveHeader') }}">
<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
</xf:if>
<xf:set var="$navHtml">
<nav class="p-nav">
<div class="p-nav-inner">
<xf:if is="!{$uix_hideNavigation}">
<xf:set var="$uix_badgeCounter" value="{{$xf.visitor.conversations_unread + $xf.visitor.alerts_unread}}" />
<xf:if is="{{ property('uix_visitorTabsMobile') == 'canvas' }}">
<xf:set var="$uix_visitorTabCanvas" value="1" />
<xf:else />
<xf:set var="$uix_visitorTabCanvas" value="0" />
</xf:if>
<a class="p-nav-menuTrigger badgeContainer{{ ($uix_visitorTabCanvas && ($xf.visitor.alerts_unread || $xf.visitor.conversations_unread)) ? ' badgeContainer--highlighted' : '' }}" data-badge="{$uix_badgeCounter|number}" 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>
<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
<a class="p-nav-menuTrigger uix_sidebarNav--trigger" id="uix_sidebarNav--trigger">
<i aria-hidden="true"></i>
<span class="p-nav-menuText">{{ phrase('menu') }}</span>
</a>
</xf:if>
</xf:if>
<xf:macro name="uix_logo__component" arg-content="{$uix_logo__component}" />
<xf:if is="!{$uix_hideNavigation}">
<xf:if is="property('uix_navigationType') != 'sidebarNav' || property('uix_pageStyle') != 'covered'">
<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>
</xf:if>
<xf:if is="property('uix_activeNavTitle')">
<div class="uix_activeNavTitle">
<span>
<xf:if is="{$uix_mobileActiveNav}">
{{ $uix_mobileActiveNav }}
<xf:elseif is="{$selectedNavEntry.href}" />
{$selectedNavEntry.title}
<xf:else />
</xf:if>
</span>
</div>
</xf:if>
</xf:if>
<xf:macro name="uix_search__component" arg-location="navigationLeft" arg-content="{$uix_search__component}" />
<xf:if contentcheck="true">
<div class="p-nav-opposite">
<xf:contentcheck>
<xf:macro name="uix_visitorTabs__component" arg-socialMediaContent="{$uix_socialMediaContent}" arg-whatsNewContent="{$uix_whatsNew__component}" arg-searchContent="{$uix_search__component}" arg-loginTabsContent="{$uix_loginTabs__component}" arg-visitorContent="{$uix_userTabs__component}" arg-location="navigation" />
<xf:macro name="uix_sidebarTrigger__component" arg-content="{$uix_sidebarTrigger__content}" arg-location="navigation" />
</xf:contentcheck>
</div>
</xf:if>
</div>
</nav>
</xf:set>
<xf:if is="property('publicNavSticky') == 'primary'">
<div class="p-navSticky p-navSticky--primary <xf:if is="property('publicNavSticky') !== 'none'">uix_stickyBar</xf:if>" data-top-offset-min="{{$uix_stickyStaffBarHeight}}" data-top-offset-max="{{$uix_stickyStaffBarHeight}}" data-top-offset-breakpoint="{{property('uix_viewportShowLogoBlock')}}">
{$navHtml|raw}
</div>
{$subNavHtml|raw}
<xf:elseif is="property('publicNavSticky') == 'all'" />
<div class="p-navSticky p-navSticky--all <xf:if is="property('publicNavSticky') !== 'none'">uix_stickyBar</xf:if>" data-top-offset-min="{{$uix_stickyStaffBarHeight}}" data-top-offset-max="{{$uix_stickyStaffBarHeight}}" data-top-offset-breakpoint="{{property('uix_viewportShowLogoBlock')}}">
{$navHtml|raw}
{$subNavHtml|raw}
</div>
<xf:else />
{$navHtml|raw}
{$subNavHtml|raw}
</xf:if>
<xf:if is="{{ property('uix_navAboveHeader') }}">
<xf:macro name="uix_logoBlock" arg-content="{$uix_headerContent}" />
</xf:if>
<xf:macro name="welcomeSection" arg-contentTemplate="{$template}" template="uix_welcomeSection" arg-location="header" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
<xf:macro name="uix_topBreadcrumb__component" arg-location="header" arg-content="{$uix_topBreadcrumb__component}" />
<xf:macro name="uix_mainTabComponent" arg-location="header" arg-content="{$uix_mainTabComponent}" />
<xf:macro name="uix_titlebar__component" arg-location="header" arg-content="{$uix_titlebar__component}" />
{{$uix_headerExtra|raw }}
</div>
<xf:comment> --- UI.X off canvas start ---</xf:comment>
<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">
<xf:include template="uix_canvasTabs" />
<xf:include template="uix_canvasPanels" />
<xf:macro name="canvasNavPanel" arg-widgets="">
<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">
<a href="{{ link('account') }}" class="offCanvasMenu-link">
<xf:avatar user="$xf.visitor" size="xxs" href="" />
{$xf.visitor.username}
</a>
<hr class="offCanvasMenu-separator" />
</div>
</xf:if>
<div class="js-offCanvasNavTarget"></div>
<xf:if is="$xf.visitor.user_id">
<div class="offCanvasMenu-linkHolder u-ripple {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="offCanvasMenu-link">{{ phrase('th_profile_uix') }}</a></div></div>
<div class="offCanvasMenu-linkHolder u-ripple {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="offCanvasMenu-link">{{ phrase('alerts')}}</a></div></div>
<div class="offCanvasMenu-linkHolder u-ripple {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner"><a data-nav-id="settings" href="{{ link('account/preferences') }}" class="offCanvasMenu-link">{{ phrase('settings')}}</a></div></div>
</xf:if>
<xf:if contentcheck="true">
<div class="uix_sidebarNav__inner__widgets">
<xf:contentcheck>
{$widgets|raw}
</xf:contentcheck>
</div>
</xf:if>
</xf:macro>
</div>
</div>
<xf:comment>
<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>
</xf:comment>
<xf:macro name="uix_titlebar__component" arg-location="belowHeader" arg-content="{$uix_titlebar__component}" />
<div class="p-body">
<xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'">
<xf:macro name="uix_sidebarNav__component" arg-content="{$uix_sidebarNav__component}" />
</xf:if>
<div class="p-body-inner">
<xf:if is="!is_addon_active('ThemeHouse/UIX') && $xf.visitor.is_admin">
<div class="blockMessage blockMessage--error blockMessage--errorUixAddon">
<h2 style="margin: 0 0 .5em 0">UI.X Error</h2>
<p>
It appears that you do not have the UI.X Add-on installed. Please install this add-on to ensure your style works as expected. You can download the UI.X add-on <a href="https://www.themehouse.com/xenforo/2/addons/uix-addon">here</a>.
</p>
<xf:button href="https://www.themehouse.com/help/documentation/uix2" class="button--primary">
<xf:macro template="uix_icons.less" name="icon" arg-icon="warning" /> View Documentation
</xf:button>
</div>
</xf:if>
<!--XF:EXTRA_OUTPUT-->
<xf:macro name="uix_notices" arg-location="aboveMainContainer" arg-content="{$uix_notices}" />
<xf:macro name="uix_titlebar__component" arg-location="aboveMainContainer" arg-content="{$uix_titlebar__component}" />
<xf:macro name="welcomeSection" arg-contentTemplate="{$template}" template="uix_welcomeSection" arg-location="aboveMainContainer" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContainer" arg-content="{$uix_topBreadcrumb__component}" />
<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContainer" arg-content="{$uix_mainTabComponent}" />
<xf:macro template="browser_warning_macros" name="javascript" />
<xf:macro template="browser_warning_macros" name="browser" />
<div uix_component="MainContainer" class="uix_contentWrapper">
<xf:macro name="uix_notices" arg-location="mainContainerTop" arg-content="{$uix_notices}" />
<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContainerTop" arg-content="{$uix_topBreadcrumb__component}" />
<xf:ad position="container_content_above" />
<xf:macro name="welcomeSection" arg-contentTemplate="{$template}" template="uix_welcomeSection" arg-location="mainContainerTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
<xf:macro name="uix_titlebar__component" arg-location="mainContainerTop" arg-content="{$uix_titlebar__component}" />
<xf:macro name="uix_mainTabComponent" arg-location="mainContainerTop" arg-content="{$uix_mainTabComponent}" />
<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<xf:if is="property('uix_stickySidebar')"> uix_stickyBodyElement</xf:if>" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
<div class="uix_sidebar--scroller">
<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>
</div>
</xf:if>
<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="left" />
<div uix_component="MainContent" class="p-body-content">
<!-- ABOVE MAIN CONTENT -->
<xf:macro name="uix_notices" arg-location="aboveMainContent" arg-content="{$uix_notices}" />
<xf:macro name="uix_topBreadcrumb__component" arg-location="aboveMainContent" arg-content="{$uix_topBreadcrumb__component}" />
<xf:macro name="welcomeSection" arg-contentTemplate="{$template}" template="uix_welcomeSection" arg-location="aboveMainContent" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
<xf:macro name="uix_titlebar__component" arg-location="aboveMainContent" arg-content="{$uix_titlebar__component}" />
<xf:macro name="uix_mainTabComponent" arg-location="aboveMainContent" arg-content="{$uix_mainTabComponent}" />
<div class="p-body-pageContent">
<xf:macro name="uix_notices" arg-location="mainContentTop" arg-content="{$uix_notices}" />
<xf:macro name="welcomeSection" arg-contentTemplate="{$template}" template="uix_welcomeSection" arg-location="mainContentTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" />
<xf:macro name="uix_topBreadcrumb__component" arg-location="mainContentTop" arg-content="{$uix_topBreadcrumb__component}" />
<xf:macro name="uix_titlebar__component" arg-location="mainContentTop" arg-content="{$uix_titlebar__component}" />
<xf:macro name="uix_mainTabComponent" arg-location="mainContentTop" arg-content="{$uix_mainTabComponent}" />
{$content|raw}
<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContentBottom" />
</div>
<!-- BELOW MAIN CONTENT -->
<xf:ad position="container_content_below" />
<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContent" />
</div>
<xf:macro name="uix_sidebar__component" arg-content="{$uix_sidebar__component}" arg-location="right" />
</div>
<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="mainContainerBottom" />
</div>
<xf:macro name="uix_bottomBreadcrumb__component" arg-content="{$uix_bottomBreadcrumb__component}" arg-location="belowMainContainer" />
<xf:macro name="uix_footer" arg-location="insideContent" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />
</div>
</div>
<xf:macro name="uix_footer" arg-location="bottom" arg-content="{$uix_footer}" arg-insideContent="{{ property('uix_footerInsideContent')}}" />
<xf:if contentcheck="true">
<div class="uix_fabBar uix_fabBar--active">
<xf:contentcheck>
<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"><i class="fa fa-arrow-up"></i><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"><i class="fa fa-arrow-down"></i><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button>
</xf:if>
</div>
</xf:if>
<xf:if is="property('uix_fab') != 'never'">
<xf:if contentcheck="true">
<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
</xf:if>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if is="(property('uix_fab') != 'never') && !property('uix_fabScroll')">
<xf:if contentcheck="true">
<div class="uix_fabBar uix_fabBar--mirror">
<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
</div>
</xf:if>
</xf:if>
<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
<xf:macro name="uix_tabBar" template="uix_tabBar" />
</xf:if>
</div>
</div>
<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:include template="uix_config" />
<xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />
<xf:if is="property('uix_loginStyle') == 'slidingPanel'">
<div class="uix__loginForm uix__loginForm--login">
<div class="uix__loginForm--panel">
<xf:include template="login">
<xf:set var="$uix_loginPreventAutoFocus" value="1" />
</xf:include>
</div>
<div class="uix__loginForm--mask"></div>
</div>
</xf:if>
{$ldJsonHtml|raw}
</body>
</html>
<xf:macro name="nav_entry" arg-sidebarNav="" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
<div class="p-navEl u-ripple {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
<xf:if is="$sidebarNav">
<div class="p-navEl__inner">
</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}"
class="p-navEl-linkHolder"
data-menu-pos-ref="< .p-navEl"
data-arrow-pos-ref="< .p-navEl"
data-xf-click="menu"
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">
<xf:if is="!{$sidebarNav}">
<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>
</xf:if>
<xf:if is="{$sidebarNav} && $nav.children && property('uix_tablinksInSideNav')">
<a class="uix_sidebarNav--trigger"><xf:macro name="icon" template="uix_icons.less" arg-icon="chevron-down" /></a>
</xf:if>
<xf:if is="$sidebarNav">
</div>
</xf:if>
<xf:if is="property('uix_tablinksInSideNav')">
<xf:if is="{$sidebarNav}">
<div <xf:if is="$nav.children">data-menu="false"</xf:if> class="uix_sidebarNav__subNav <xf:if is="!property('uix_sideNavCollapsed') && $selected">subNav--expand</xf:if>">
<div class="uix_sidebarNav__subNavInner">
<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>
</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="{$class} {$nav.attributes.class}"
{{ attributes($nav.attributes, ['class']) }}
{{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
data-nav-id="{$navId}"><xf:if is="$nav.icon"><i class="fa {$nav.icon}" aria-hidden="true"></i> </xf:if><span>{{ $titleHtml ? $titleHtml|raw : $nav.title }}</span><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>]]></template>
<template title="account_alerts" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:title>{{ phrase('alerts') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="alerts" />
<xf:wrap template="account_wrapper" />
<div class="block">
<div class="block-container">
<div class="block-body">
<xf:if is="$alerts is not empty">
<ol class="listPlain">
<xf:foreach loop="$alerts" value="$alert">
<li data-alert-id="{$alert.alert_id}"
class="block-row block-row--separated{{ $alert.isUnviewed() ? ' block-row--highlighted' : ($alert.isRecentlyViewed() ? '' : ' block-row--alt') }}">
<xf:macro template="alert_macros" name="row" arg-alert="{$alert}" />
</li>
</xf:foreach>
</ol>
<xf:elseif is="$page <= 1" />
<div class="block-row">{{ phrase('you_do_not_have_any_recent_alerts') }}</div>
<xf:else />
<div class="block-row">{{ phrase('no_alerts_can_be_shown') }}</div>
</xf:if>
</div>
</div>
<xf:pagenav link="account/alerts" page="{$page}" perpage="{$perPage}" total="{$totalAlerts}"
wrapperclass="block-outer block-outer--after" />
</div>]]></template>
<template title="account_preferences" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:title>{{ phrase('preferences') }}</xf:title>
<xf:page option="uix_myAccountLinks" value="settings" />
<xf:wrap template="account_wrapper" />
<xf:form action="{{ link('account/preferences') }}" ajax="true" class="block" data-force-flash-message="true">
<div class="block-container">
<div class="block-body">
<xf:if is="$xf.visitor.canChangeStyle()">
<xf:selectrow name="user[style_id]" value="{$xf.visitor.style_id}"
label="{{ phrase('style') }}">
<xf:option value="0">{{ phrase('use_default_style:') }} {$defaultStyle.title}</xf:option>
<xf:optgroup label="{{ phrase('styles:') }}">
<xf:foreach loop="$styles" value="$style">
<xf:option value="{$style.style_id}">{{ repeat('--', $style.depth) }} {$style.title}{{ !$style.user_selectable ? ' *' : '' }}</xf:option>
</xf:foreach>
</xf:optgroup>
</xf:selectrow>
<xf:else />
<xf:hiddenval name="user[style_id]">{$xf.visitor.style_id}</xf:hiddenval>
</xf:if>
<xf:if is="$xf.visitor.canChangeLanguage()">
<xf:selectrow name="user[language_id]" value="{$xf.visitor.language_id}"
label="{{ phrase('language') }}">
<xf:foreach loop="$languageTree.getFlattened(0)" value="$treeEntry">
<xf:option value="{$treeEntry.record.language_id}">{{ repeat('--', $treeEntry.depth) }} {$treeEntry.record.title}</xf:option>
</xf:foreach>
</xf:selectrow>
<xf:else />
<xf:hiddenval name="user[language_id]">{{ $xf.visitor.language_id ? $xf.visitor.language_id : $xf.options.defaultLanguageId }}</xf:hiddenval>
</xf:if>
<xf:selectrow name="user[timezone]" value="{$xf.visitor.timezone}"
label="{{ phrase('time_zone') }}">
<xf:options source="$timeZones" />
</xf:selectrow>
<xf:macro template="helper_account" name="email_options_row" arg-showConversationOption="{{ true }}" />
<xf:checkboxrow label="{{ phrase('content_options') }}">
<xf:option value="watch_no_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state ? true : false }}"
label="{{ phrase('automatically_watch_content_you_create...') }}">
<xf:checkbox>
<xf:option value="watch_email" name="option[creation_watch_state]" checked="{{ $xf.visitor.Option.creation_watch_state == 'watch_email' }}"
label="{{ phrase('and_receive_email_notifications') }}" />
</xf:checkbox>
</xf:option>
<xf:option value="watch_no_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state ? true : false }}"
label="{{ phrase('automatically_watch_content_you_interact_with...') }}">
<xf:checkbox>
<xf:option value="watch_email" name="option[interaction_watch_state]" checked="{{ $xf.visitor.Option.interaction_watch_state == 'watch_email' }}"
label="{{ phrase('and_receive_email_notifications') }}" />
</xf:checkbox>
</xf:option>
<xf:option name="option[content_show_signature]" checked="{$xf.visitor.Option.content_show_signature}"
label="{{ phrase('show_peoples_signatures_with_their_messages') }}" />
</xf:checkboxrow>
<xf:macro template="helper_account" name="activity_privacy_row" />
<xf:macro template="custom_fields_macros" name="custom_fields_edit" arg-type="users" arg-group="preferences" arg-set="{$xf.visitor.Profile.custom_fields}" />
<xf:if is="$xf.options.enableNotices && (count($xf.session.dismissedNotices) > 0)">
<hr class="formRowSep" />
<xf:checkboxrow>
<xf:option name="restore_notices"
label="{{ phrase('restore_dismissed_notices') }}"
hint="{{ phrase('restore_dismissed_notices_hint') }}" />
</xf:checkboxrow>
</xf:if>
</div>
<h2 class="block-formSectionHeader"><span class="block-formSectionHeader-aligner">{{ phrase('alert_preferences') }}</span></h2>
<div class="block-body">
<xf:set var="$showLabel" value="{{ true }}" />
<xf:foreach loop="$alertOptOuts" key="$contentType" value="$options">
<xf:checkboxrow rowtype="noColon"
label="{{ $showLabel ? phrase('receive_alert_when_someone...') : '' }}">
<xf:foreach loop="$options" key="$action" value="$label">
<xf:option name="alert[{$contentType}_{$action}]" checked="{{ $xf.visitor.Option.doesReceiveAlert($contentType, $action) }}">
{$label}
</xf:option>
</xf:foreach>
</xf:checkboxrow>
<xf:set var="$showLabel" value="{{ false }}" />
</xf:foreach>
</div>
<xf:submitrow icon="save" sticky="true" />
</div>
</xf:form>]]></template>
<template title="account_visitor_menu" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[<div class="menu-row menu-row--highlighted">
<xf:macro name="visitor_panel_row" />
</div>
<xf:macro name="visitor_panel_row">
<div class="contentRow contentRow--alignMiddle">
<div class="contentRow-figure">
<xf:avatar user="{$xf.visitor}" size="s" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />
</div>
<div class="contentRow-main">
<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
<div class="contentRow-lesser">
<xf:usertitle user="$xf.visitor" />
</div>
</div>
</div>
<div class="contentRow-minor">
<!--[XF:stats_pairs:above_messages]-->
<dl class="pairs pairs--justified fauxBlockLink">
<xf:if is="property('uix_visitorPanelIcons')">
<xf:macro template="uix_icons.less" name="icon" arg-icon="messages" />
<xf:else />
<dt>{{ phrase('messages') }}</dt>
</xf:if>
<dd>
<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.message_count|number}
</a>
</dd>
</dl>
<!--[XF:stats_pairs:above_likes]-->
<dl class="pairs pairs--justified fauxBlockLink">
<xf:if is="property('uix_visitorPanelIcons')">
<xf:macro template="uix_icons.less" name="icon" arg-icon="like" />
<xf:else />
<dt>{{ phrase('likes') }}</dt>
</xf:if>
<dd>
<a href="{{ link('account/likes') }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.like_count|number}
</a>
</dd>
</dl>
<!--[XF:stats_pairs:above_points]-->
<xf:if is="$xf.options.enableTrophies">
<dl class="pairs pairs--justified fauxBlockLink">
<xf:if is="property('uix_visitorPanelIcons')">
<xf:macro template="uix_icons.less" name="icon" arg-icon="trophy" />
<xf:else />
<dt>{{ phrase('trophy_points') }}</dt>
</xf:if>
<dd>
<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.trophy_points|number}
</a>
</dd>
</dl>
</xf:if>
</div>
</xf:macro>
<!--[XF:menu_separator:below_visitor_panel]-->
<hr class="menu-separator menu-separator--hard" />
<ul class="listPlain listColumns listColumns--narrow listColumns--together">
<!--[XF:content_links:top]-->
<xf:if is="$xf.options.enableNewsFeed">
<li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
</xf:if>
<li><a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="menu-linkRow">{{ phrase('your_content') }}</a></li>
<li><a href="{{ link('account/likes') }}" class="menu-linkRow">{{ phrase('likes_received') }}</a></li>
<li><a href="{{ link('conversations') }}" class="menu-linkRow">{{ phrase('conversations') }}</a></li>
<li><a href="{{ link('account/alerts') }}" class="menu-linkRow">{{ phrase('alerts') }}</a></li>
<!--[XF:content_links:bottom]-->
</ul>
<!--[XF:menu_separator:below_content_links]-->
<hr class="menu-separator" />
<ul class="listPlain listColumns listColumns--narrow listColumns--together">
<!--[XF:account_links:top]-->
<li><a href="{{ link('account/account-details') }}" class="menu-linkRow">{{ phrase('account_details') }}</a></li>
<li><a href="{{ link('account/security') }}" class="menu-linkRow">{{ phrase('password_and_security') }}</a></li>
<li><a href="{{ link('account/privacy') }}" class="menu-linkRow">{{ phrase('privacy') }}</a></li>
<li><a href="{{ link('account/preferences') }}" class="menu-linkRow">{{ phrase('preferences') }}</a></li>
<xf:if is="$xf.visitor.canEditSignature()">
<li><a href="{{ link('account/signature') }}" class="menu-linkRow">{{ phrase('signature') }}</a></li>
</xf:if>
<xf:if is="$xf.app.userUpgradeCount">
<li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
</xf:if>
<xf:if is="$xf.app.connectedAccountCount">
<li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
</xf:if>
<li><a href="{{ link('account/following') }}" class="menu-linkRow">{{ phrase('following') }}</a></li>
<li><a href="{{ link('account/ignored') }}" class="menu-linkRow">{{ phrase('ignoring') }}</a></li>
<!--[XF:account_links:bottom]-->
</ul>
<!--[XF:menu_separator:below_account_links]-->
<hr class="menu-separator" />
<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>
<xf:if is="$xf.visitor.canPostOnProfile()">
<xf:form action="{{ link('members/post', $xf.visitor) }}" ajax="true"
data-redirect="off"
data-reset-complete="true"
data-no-auto-focus="true"
class="menu-footer">
<span class="u-srOnly" id="ctrl_message">{{ phrase('update_your_status:') }}</span>
<xf:textarea name="message" rows="1" autosize="true"
maxlength="{$xf.options.profilePostMaxLength}"
placeholder="{{ phrase('update_your_status...') }}"
data-xf-init="focus-trigger user-mentioner" data-display="< :next" aria-labelledby="ctrl_message" />
<div class="u-hidden u-hidden--transition u-inputSpacer">
<xf:button type="submit" class="button--primary">{{ phrase('post_verb') }}</xf:button>
</div>
</xf:form>
</xf:if>]]></template>
<template title="account_wrapper" type="public" addon_id="XF" version_id="2000170" version_string="2.0.1"><![CDATA[<xf:sidenav>
<div class="block">
<div class="block-container">
<h3 class="block-header">{{ phrase('your_account') }}</h3>
<div class="block-body">
<!--[XF:profile_links:top]-->
<a class="blockLink" href="{{ link('members', $xf.visitor) }}">{{ phrase('your_profile') }}</a>
<a class="blockLink {{ $pageSelected == 'alerts' ? 'is-selected' : '' }}" href="{{ link('account/alerts') }}">
{{ phrase('alerts') }}
</a>
<a class="blockLink {{ $pageSelected == 'likes' ? 'is-selected' : '' }}" href="{{ link('account/likes') }}">
{{ phrase('likes_received') }}
</a>
<!--[XF:profile_links:bottom]-->
</div>
<h3 class="block-minorHeader">{{ phrase('settings') }}</h3>
<div class="block-body">
<!--[XF:settings_links:top]-->
<a class="blockLink {{ $pageSelected == 'account_details' ? 'is-selected' : '' }}" href="{{ link('account/account-details') }}">
{{ phrase('account_details') }}
</a>
<a class="blockLink {{ $pageSelected == 'security' ? 'is-selected' : '' }}" href="{{ link('account/security') }}">
{{ phrase('password_and_security') }}
</a>
<a class="blockLink {{ $pageSelected == 'privacy' ? 'is-selected' : '' }}" href="{{ link('account/privacy') }}">
{{ phrase('privacy') }}
</a>
<a class="blockLink {{ $pageSelected == 'preferences' ? 'is-selected' : '' }}" href="{{ link('account/preferences') }}">
{{ phrase('preferences') }}
</a>
<xf:if is="$xf.visitor.canEditSignature()">
<a class="blockLink {{ $pageSelected == 'signature' ? 'is-selected' : '' }}" href="{{ link('account/signature') }}">
{{ phrase('signature') }}
</a>
</xf:if>
<xf:if is="$xf.app.userUpgradeCount">
<a class="blockLink {{ $pageSelected == 'upgrades' ? 'is-selected' : '' }}" href="{{ link('account/upgrades') }}">
{{ phrase('account_upgrades') }}
</a>
</xf:if>
<xf:if is="$xf.app.connectedAccountCount">
<a class="blockLink {{ $pageSelected == 'connected_account' ? 'is-selected' : '' }}" href="{{ link('account/connected-accounts') }}">
{{ phrase('connected_accounts') }}
</a>
</xf:if>
<a class="blockLink {{ $pageSelected == 'following' ? 'is-selected' : '' }}" href="{{ link('account/following') }}">
{{ phrase('following') }}
</a>
<a class="blockLink {{ $pageSelected == 'ignored' ? 'is-selected' : '' }}" href="{{ link('account/ignored') }}">
{{ phrase('ignoring') }}
</a>
<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="blockLink">{{ phrase('log_out') }}</a>
<!--[XF:settings_links:bottom]-->
</div>
</div>
</div>
</xf:sidenav>
<xf:page option="sideNavTitle">{{ phrase('your_account') }}</xf:page>
<xf:breadcrumb href="{{ link('account') }}">{{ phrase('your_account') }}</xf:breadcrumb>
{$innerContent|raw}]]></template>
<template title="app.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[@_nav-elTransitionSpeed: @xf-animationSpeed;
@_navAccount-hPadding: @xf-paddingLarge;
@uix_sidebarNavBreakpoint: {{ property('pageWidthMax') + 1 + ( 2 * (property('uix_sidebarNavWidth') + property('elementSpacer')) ) }}px;
.u-anchorTarget
{
.m-stickyHeaderConfig(@xf-publicNavSticky);
height: (@_stickyHeader-height + @_stickyHeader-offset);
margin-top: -(@_stickyHeader-height + @_stickyHeader-offset);
}
.uix_pageWidth--wrapped {
width: 100%;
<xf:if is="property('uix_pageStyle') == 'wrapped'">
.m-pageWidth();
</xf:if>
}
.p-pageWrapper
{
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
flex-grow: 1;
<xf:if is="property('uix_pageStyle') == 'wrapped'">
.xf-uix_pageWrapper();
@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px) {
margin-top: @xf-pageEdgeSpacer;
margin-bottom: @xf-pageEdgeSpacer;
padding: @xf-pageEdgeSpacer;
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
border: none;
box-shadow: none;
}
</xf:if>
}
.uix_headerContainer {
.xf-uix_headerWrapper();
}
// RESPONSIVE HEADER
.p-offCanvasAccountLink
{
display: none;
.avatar {margin-right: 24px;}
}
@media (max-width: @xf-responsiveNarrow)
{
.p-offCanvasAccountLink
{
display: block;
}
}
@media (max-width: 359px)
{
.p-offCanvasRegisterLink
{
display: block;
}
}
@media (max-width: @xf-pageWidthMax) {
#uix_widthToggle--trigger {display: none;}
}
#uix_widthToggle--trigger:hover {cursor: pointer;}
.uix_page--fixed #uix_widthToggle--trigger .uix_icon:before {<xf:macro name="content" template="uix_icons.less" arg-icon="expand" />}
{{ include('app_staffbar.less') }}
{{ include('app_header.less') }}
{{ include('app_stickynav.less') }}
{{ include('app_nav.less') }}
{{ include('app_sectionlinks.less') }}
{{ include('app_body.less') }}
{{ include('app_breadcrumbs.less') }}
{{ include('app_title.less') }}
{{ include('app_footer.less') }}
{{ include('app_inlinemod.less') }}
{{ include('app_ignored.less') }}
{{ include('app_username_styles.less') }}
{{ include('app_user_banners.less') }}
{{ include('uix.less') }}]]></template>
<template title="app_body.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ######################################### MAIN BODY #################################
.p-body
{
display: flex;
align-items: stretch;
flex-grow: 1;
min-height: 1px; // IE11 workaround - related to #139187
position: relative;
}
.p-body-inner
{
width: 100%;
<xf:if is="property('uix_pageStyle') != 'wrapped'">
.m-pageWidth();
<xf:else />
@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px ) {
flex-grow: 1;
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
.m-pageWidth();
}
</xf:if>
transition: ease-in max-width .2s, ease-in left .2s, ease-in width .2s;
display: flex;
flex-direction: column;
.m-clearFix();
position: relative;
left: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: @xf-elementSpacer;
/*
> * {
margin-bottom: 20px;
&:last-child {margin-bottom: 0;}
}
*/
.p-body-header
{
margin-bottom: @xf-elementSpacer;
}
}
.uix_contentWrapper {
margin-bottom: @xf-elementSpacer;
flex-grow: 1;
<xf:if is="property('uix_contentWrapper') == 1">
padding: @xf-pageEdgeSpacer;
.xf-uix_contentWrapperStyle();
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
padding: {{ property('pageEdgeSpacer') / 2 }}px;
margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}
.p-body-main
{
// display: table;
table-layout: fixed;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
max-width: 100%;
margin-bottom: auto;
min-height: 1px; // IE11 workaround - related to #139187
}
.p-body-content
{
// display: table-cell;
vertical-align: top;
@media ( min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
<xf:if is="{{ property('uix_sidebarLocation') == 'right' }}">
transition: ease-in width 0.2s, ease-in max-width 0.2s;
.uix_sidebarCollapsed & {
transition: ease-in width 0.2s 0.2s, ease-in max-width 0.2s 0.2s;
}
<xf:else />
transition: ease-in width 0.2s, ease-in max-width 0.2s;
.uix_sidebarCollapsed & {
transition: ease-in width 0.2s 0.2s, ease-in max-width 0.2s 0.2s;
}
</xf:if>
}
flex-grow: 1;
max-width: 100%;
width: 100%;
.p-body-main--withSidebar &,
.p-body-main--withSideNav &
{
// don't let the ad overflow the sidebar area -- this can happen due to how the Adsense JS works
ins.adsbygoogle
{
// -10px gives a little buffer or helps account for no scrollbar being considered
max-width: ~"calc(100vw - 10px - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer})";
@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px )
{
// window wider than the max width, so limit to the display area without the sidebar
max-width: ~"calc(@{xf-pageWidthMax} - @{xf-pageEdgeSpacer} - @{xf-pageEdgeSpacer} - @{xf-sidebarWidth} - @{xf-sidebarSpacer})";
}
@media (max-width: @xf-uix_sidebarBreakpoint)
{
// sidebar/sidenav have been moved/hidden
max-width: 100vw;
}
}
}
.p-body-main--withSideNav &
{
@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
display: inline-block;
}
}
.p-body-main--withSidebar &
{
@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
display: inline-block;
}
}
@media (min-width: {{ property('uix_sidebarBreakpoint') + 1 }}px ) {
.p-body-main--withSidebar.p-body-main--withSideNav & {
width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
max-width: calc(~"100% - {{ (property('sidebarWidth') + property('elementSpacer')) * 2 }}px");
display: inline-block;
}
}
}
.p-body-pageContent
{
> .tabs--standalone:first-child
{
margin-bottom: (@xf-elementSpacer) / 2;
}
}
.p-body-pageContent {
<xf:if is="property('uix_contentWrapper') == 2">
.xf-uix_contentWrapperStyle();
padding: @xf-pageEdgeSpacer;
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
padding: {{ property('pageEdgeSpacer') / 2 }}px;
margin-left: -{{ property('pageEdgeSpacer') / 2 }}px;
margin-right: -{{ property('pageEdgeSpacer') / 2 }}px;
border: none;
box-shadow: none;
}
</xf:if>
}
.p-body-sideNav
{
display: table-cell;
vertical-align: top;
width: @xf-sidebarWidth;
float: left;
}
.p-body-sideNavTrigger
{
display: none;
}
.p-body-sidebar
{
// display: table-cell;
display: inline-block;
vertical-align: top;
width: @xf-sidebarWidth;
}
.block[data-widget-id],
.p-body-sideNav,
.p-body-sidebar,
.uix_extendedFooterRow,
.columnContainer-sidebar {
.block-container {
.xf-uix_sidebarWidgetWrapper();
}
.block-minorHeader,
.block-header
{
display: flex;
align-items: center;
padding: @xf-uix_widgetPadding;
.xf-uix_sidebarWidgetHeading();
}
.block-minorHeader:before,
.block-header:before {
.m-faBase();
font-size: @xf-uix_iconSize !important;
padding-right: @xf-paddingMedium;
color: @xf-textColorMuted;
}
.block-footer {
padding: @xf-uix_widgetPadding;
.xf-uix_sidebarWidgetFooter();
}
.block-row {padding: @xf-uix_widgetPadding;}
}
// ---- Widget icons -----
.block[data-widget-definition],
.block[data-widget-key], .p-body-sideNav, .p-body-sidebar {
<xf:if is="{{ property('uix_defaultSidebarIcon') }}">
.block-minorHeader:before,
.block-header:before, {<xf:macro template="uix_icons.less" name="content" arg-icon="article" />}
</xf:if>
}
.block[data-widget-definition="th_userNavigation"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="user" />}
.block[data-widget-definition="members_online"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="user-multiple" />}
.block[data-widget-definition="board_totals"] .block-minorHeader:before,
.block[data-widget-definition="online_statistics"] .block-minorHeader:before,
.block[data-widget-definition="forum_statistics"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="statistics" />}
.block[data-widget-definition="share_page"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="share" />}
.block[data-widget-definition="most_messages"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="messages" />}
.block[data-widget-definition="find_member"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="search-member" />}
.block[data-widget-definition="new_threads"] .block-minorHeader:before,
.block[data-widget-definition="new_profile_posts"] .block-minorHeader:before,
.block[data-widget-definition="new_posts"] .block-minorHeader:before{<xf:macro template="uix_icons.less" name="content" arg-icon="post" />}
.block[data-widget-definition="birthdays"] .block-minorHeader:before{<xf:macro template="uix_icons.less" name="content" arg-icon="birthday" />}
.block[data-widget-definition="th_navigation"] .block-minorHeader:before{<xf:macro template="uix_icons.less" name="content" arg-icon="list" />}
.block[data-widget-key="thuix_footer_facebookWidget"] .block-minorHeader:before{<xf:macro template="uix_icons.less" name="content" arg-icon="facebook" />}
.block[data-widget-definition="thuix_footer_twitterWidget"] .block-minorHeader:before{<xf:macro template="uix_icons.less" name="content" arg-icon="twitter" />}
form[data-xf-init*="poll-block"] .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="poll" />}
// xpress WP widget support
.p-body-sidebar .block-xpress {
.block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="article" />}
&.widget_media_gallery .block-minorHeader:before,
&.widget_media_audio .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="media" />}
&.widget_calendar .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="\f0ed" />}
&.widget_recent_comments .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="comment-multiple" />}
&.widget_search .block-minorHeader:before {<xf:macro template="uix_icons.less" name="content" arg-icon="search" />}
}
<xf:if is="!property('uix_sidebarIcons')">
.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before,
.p-body-pageContent .block .block-minorHeader:before,
.p-body-sidebar .block .block-header:before,
.p-body-sideNavContent .block .block-header:before,
.p-body-pageContent .block .block-header:before {display: none !important;}
</xf:if>
<xf:if is="!property('uix_footerIcons')">
.uix_extendedFooterRow .block .block-minorHeader:before {display: none !important;}
</xf:if>
.uix_extendedFooterRow .block-minorHeader:before {
.m-faBase();
font-size: @xf-uix_iconSize !important;
padding-right: @xf-paddingMedium;
}
<xf:if is="property('uix_visitorPanelIcons')">
.block[data-widget-definition="visitor_panel"]
.pairs {
dt:after {display: none;}
}
</xf:if>
.p-body-content,
.p-body-sideNav,
.p-body-sideNavContent,
.uix_sidebarInner
{
> :first-child
{
margin-top: 0;
}
> :last-child
{
margin-bottom: 0;
}
}
@media (max-width: @xf-uix_sidebarBreakpoint )
{
/*
.p-body-main,
.p-body-content
{
display: block;
}
*/
.p-body-content {flex-grow: 1; width: 100%;}
.p-body-sideNav
{
display: block;
width: 100%;
}
.p-body-sideNavTrigger
{
margin-bottom: ((@xf-elementSpacer) / 2);
text-align: center;
.button:before
{
.m-faBase();
font-size: 120%;
vertical-align: middle;
display: inline-block;
margin: -4px 6px -4px 0;
.m-faContent(@fa-var-bars, .86em);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu" />
}
.has-js &
{
display: block;
}
}
.has-js .p-body-sideNavInner:not(.offCanvasMenu)
{
display: none;
.m-transitionFadeDown();
}
.has-no-js .p-body-sideNavInner
{
margin-bottom: @xf-elementSpacer;
}
.p-body-sidebar
{
width: 100%;
float: none;
order: 1;
flex-grow: 1;
display: block;
margin-top: @xf-elementSpacer;
.uix_sidebarInner {
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-grow: 1;
margin: 0 -((@xf-pageEdgeSpacer) / 2);
}
.uix_sidebarInner > *
{
margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
min-width: @xf-sidebarWidth;
flex: 1 1 @xf-sidebarWidth;
.block-container {
margin-left: 0;
margin-right: 0;
}
&:last-child
{
margin-bottom: @xf-elementSpacer;
}
}
// add an invisible block to ensure that the last row has the correct widths
&:after
{
display: block;
content: '';
height: 0;
margin: 0 ((@xf-pageEdgeSpacer) / 2);
min-width: @xf-sidebarWidth;
flex: 1 1 @xf-sidebarWidth;
}
.block-container
{
display: flex;
flex-direction: column;
height: 100%;
.block-footer
{
margin-top: auto;
}
}
}
.p-body-main--withSideNav,
.p-body-main--withSidebar
{
.p-body-content { padding: 0; }
}
}
.uix_sidebarCollapsed .uix_sidebarInner {
overflow: hidden;
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.p-body-sideNavContent
{
// this is likely to contain blocks that overflow the container so account for that
margin: 0 -@xf-pageEdgeSpacer;
padding: 0 @xf-pageEdgeSpacer;
.offCanvasMenu &
{
margin: 0;
padding: 0;
}
}
.p-body-sidebar
{
display: block;
margin-left: 0;
margin-right: 0;
.uix_sidebarInner > *
{
// margin-left: 0;
// margin-right: 0;
min-width: 0;
}
}
}]]></template>
<template title="app_breadcrumbs.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[.uix_headerContainer {
.breadcrumb {
<xf:if is="property('uix_pageStyle') == 'fixed'">
.m-pageWidth();
</xf:if>
.pageContent {
<xf:if is="property('uix_pageStyle') != 'fixed'">
.m-pageWidth();
</xf:if>
}
}
}
.breadcrumb {
@media (min-width: @xf-responsiveNarrow) {
.xf-uix_breadcrumbWrapper();
}
&.p-breadcrumb--bottom {
.xf-uix_breadcrumbWrapperBottom();
}
.pageContent {
display: flex;
align-items: center;
> *:not(:last-child) {margin-right: @xf-paddingMedium;}
}
.uix_breadcrumb--opposite {
margin-left: auto;
display: inline-flex;
align-items: center;
> *:not(:last-child) {margin-right: 5px;}
}
}
.uix_headerContainer .breadcrumb .pageContent {
<xf:if is="property('uix_pageStyle') != 'fixed'">
.m-pageWidth();
</xf:if>
}
.p-breadcrumbs
{
.m-listPlain();
.m-clearFix();
// margin-bottom: 5px;
// line-height: 1.5;
display: flex;
align-items: center;
flex-grow: 1;
@media (min-width: @xf-responsiveNarrow) {
.xf-uix_breadcrumbStyle();
}
i {font-size: @xf-uix_iconSize;}
&.p-breadcrumbs--bottom
{
// margin-top: @xf-elementSpacer;
margin-bottom: 0;
}
> li
{
float: left;
margin-right: .5em;
font-size: @xf-fontSizeSmall;
display: flex;
align-items: center;
font-size: inherit;
a
{
display: inline-block;
vertical-align: bottom;
max-width: 300px;
.m-overflowEllipsis();
.xf-uix_breadcrumbItem();
}
&:after,
&:before
{
.m-faBase();
// font-size: 90%;
// color: @xf-textColorMuted;
}
&:after
{
.m-faContent(@fa-var-angle-right, .36em, ltr);
.m-faContent(@fa-var-angle-left, .36em, rtl);
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-right" />
font-size: @xf-uix_iconSize;
margin-left: .5em;
}
&:first-child {
padding-left: 0;
}
&:last-child
{
margin-right: 0;
&:after {display: none;}
a
{
font-weight: @xf-fontWeightHeavy;
.xf-uix_breadcrumbItem__active();
}
}
}
}
@media (max-width: @xf-responsiveMedium)
{
.p-breadcrumbs > li a
{
max-width: 200px;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.p-breadcrumbs
{
> li
{
font-size: @xf-fontSizeSmallest;
display: none;
padding-left: 0;
a {
display: inline-flex;
align-items: center;
}
&:last-child
{
// display: block;
display: flex;
}
a
{
max-width: 90vw;
color: inherit !important;
}
&:after
{
display: none;
}
a:before
{
// .m-faContent(@fa-var-chevron-left, .72em, ltr);
// .m-faContent(@fa-var-chevron-right, .72em, rtl);
// margin-right: .5em;
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-left" />
font-size: @xf-uix_iconSizeLarge !important;
color: inherit;
}
}
}
}]]></template>
<template title="app_footer.less" type="public" addon_id="XF" version_id="2000570" version_string="2.0.5"><![CDATA[// ######################################### FOOTER #################################
<xf:comment> may have been removed at xf2 beta
.p-footer-debug-list
{
// color: xf-default(@xf-publicFooterLink--color, inherit);
.pairs--debug
{
display: inline;
padding-right: 4px;
> dt,
> dd
{
display: inline;
color: inherit;
a {padding: 0;}
}
}
}
</xf:comment>
.p-footer
{
display: flex;
flex-direction: column;
.xf-publicFooter();
// a {.xf-publicFooterLink();}
}
.p-footer-inner
{
order: @xf-uix_footerMenuOrder;
padding-top: @xf-paddingMedium;
padding-bottom: @xf-paddingMedium;
.xf-uix_footerMenu();
<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverFooterMenu')">
.m-pageWidth();
</xf:if>
.pageContent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverFooterMenu')">
.m-pageWidth();
<xf:if is="(property('uix_pageStyle') != 'wrapped')">
padding:0;
</xf:if>
</xf:if>
}
a {
.xf-publicFooterLink();
}
}
.p-footer-copyrightRow {
order: @xf-uix_copyrightOrder;
.xf-uix_footerCopyrightRow();
<xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverCopyright')">
.m-pageWidth();
</xf:if>
.pageContent {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
<xf:if is="property('uix_pageStyle') == 'covered' || property('uix_forceCoverCopyright')">
.m-pageWidth();
<xf:if is="(property('uix_pageStyle') != 'wrapped')">
padding:0;
</xf:if>
</xf:if>
}
.p-footer-debug-list li a {
color: inherit;
&:hover {color: inherit; text-decoration: underline;}
}
}
/* commented out in beta 1 (Ian)
.p-footer-row
{
.m-clearFix();
margin-bottom: -@xf-paddingLarge;
}
.p-footer-row-main
{
float: left;
margin-bottom: @xf-paddingLarge;
}
.p-footer-row-opposite
{
float: right;
margin-bottom: @xf-paddingLarge;
}
*/
.p-footer-linkList
{
.m-listPlain();
// .m-clearFix();
display: inline-flex;
flex-wrap: wrap;
align-items: center;
> li
{
/* commented out in beta 1 (Ian)
float: left;
margin-right: .5em;
margin: @xf-paddingMedium;
*/
&:last-child
{
margin-right: 0;
}
a
{
padding: 6px;
border-radius: @xf-borderRadiusSmall;
display: inline-block;
&:hover
{
.xf-uix_footerLinkHover();
text-decoration: none;
// background-color: fade(@xf-publicFooterLink--color, 10%);
}
}
}
&.p-footer-choosers {
margin: -6px;
a {
margin: 6px;
.xf-uix_footerChooser();
&:hover {.xf-uix_footerChooserHover();}
// i {display: none;}
}
}
}
.p-footer-rssLink
{
> span
{
position: relative;
top: -1px;
display: inline-block;
width: 1.44em;
height: 1.44em;
line-height: 1.44em;
text-align: center;
font-size: .8em;
background-color: #FFA500;
border-radius: 2px;
}
.fa-rss
{
color: white;
}
}
/*
.p-footer-copyright
{
margin-top: @xf-elementSpacer;
text-align: center;
font-size: @xf-fontSizeSmallest;
}
.p-footer-debug
{
margin-top: @xf-paddingLarge;
text-align: right;
font-size: @xf-fontSizeSmallest;
}
*/
@media (max-width: @xf-responsiveMedium)
{
.p-footer-row-main,
.p-footer-row-opposite
{
float: none;
}
.p-footer-copyright
{
text-align: left;
padding: 0 4px; // aligns with other links
}
}]]></template>
<template title="app_header.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// MAIN HEADER ROW
.p-header
{
.xf-publicHeader();
<xf:if is="property('uix_pageStyle') == 'fixed'">
.m-pageWidth();
</xf:if>
.p-header-logo img {max-width: @xf-uix_logoWidth;}
a
{
color: inherit;
}
.p-header-logo img {width: 100%;}
}
.p-header-inner
{
<xf:if is="property('uix_pageStyle') != 'fixed'">
.m-pageWidth();
</xf:if>
position: relative;
}
.p-header-content
{
// padding: @xf-paddingMedium 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 100%;
.has-no-flexbox &
{
display: table;
width: 100%;
}
<xf:if is="property('uix_viewportCenterLogo') == '100%'">
justify-content: center;
flex-direction: column;
.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
.p-header-logo {margin-right: 0;}
</xf:if>
@media (max-width: @xf-uix_viewportCenterLogo) {
justify-content: center;
flex-direction: column;
.p-nav-opposite {margin-top: @xf-paddingLarge; margin-left: 0;}
.p-header-logo {margin-right: 0;}
}
}
.p-header-logo
{
.has-no-flexbox &
{
display: table-cell;
}
vertical-align: middle;
// margin-right: auto;
a
{
color: inherit;
text-decoration: none;
}
&.p-header-logo--text
{
font-size: @xf-fontSizeLargest;
}
&.p-header-logo--image
{
img
{
// vertical-align: bottom;
// max-width: 100%;
// max-height: 200px;
}
}
.uix_logoIcon {.xf-uix_logoIconStyle();}
}
@media (max-width: @xf-responsiveNarrow)
{
.p-header-logo
{
// max-width: 100px;
&.p-header-logo--text
{
font-size: @xf-fontSizeLarge;
font-weight: @xf-fontWeightNormal;
.m-overflowEllipsis();
}
}
.p-navgroup-link
{
.p-navGroup--member &
{
margin-left: 5px;
&:first-of-type
{
margin-left: 0;
}
}
}
}
<xf:if is="property('uix_rightAlignNavigation')">
@media (min-width: @xf-publicNavCollapseWidth) {
.p-nav-inner .p-nav-opposite,
.p-sectionLinks .p-nav-opposite {margin-left: 0;}
.p-nav-inner .p-nav-scroller,
.p-sectionLinks .p-sectionLinks-inner {margin-right: 0; margin-left: auto;}
}
</xf:if>]]></template>
<template title="app_ignored.less" type="public" addon_id="XF" version_id="2000033" version_string="2.0.0 Beta 3"><![CDATA[// ################## IGNORED USERS / CONTENT ##########################
.is-ignored
{
display: none !important;
}
.showIgnoredLink
{
&.is-hidden
{
display: none !important;
}
}
.block-outer .showIgnoredLink,
.showIgnoredLink.showIgnoredLink--subtle
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
&:hover
{
color: @xf-textColorDimmed;
}
}]]></template>
<template title="app_inlinemod.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// #################################### INLINE MOD BUTTON ################
.inlineModButton
{
display: inline-block;
position: relative;
i:before
{
display: inline-block;
.m-faBase();
.m-faContent(@fa-var-check-square-o, .97em);
vertical-align: middle;
font-size: 18px !important;
margin: -.10em 0;
}
&.inlineModButton--noIcon i
{
display: none;
}
&.is-mod-active
{
color: @xf-textColorAttention;
.inlineModButton-count
{
display: inline;
}
}
&:not(.inlineModButton--withLabel)
{
.inlineModButton-label
{
.m-visuallyHidden();
}
}
}
.inlineModButton-count
{
display: none;
position: absolute;
top: -3px;
left: -6px;
.xf-contentHighlightBase();
border: @xf-borderSize solid @xf-borderColorAccentContent;
border-radius: @xf-borderRadiusSmall;
padding: 1px 2px;
font-size: 9px;
line-height: 1;
.inlineModButton--noIcon &
{
position: static;
font-size: 80%;
padding-top: 0;
padding-bottom: 0;
}
}
// #################################### INLINE MOD BAR ################
.inlineModBar
{
.xf-inlineModBar();
.m-transitionFadeDown();
.m-clearFix();
.input,
.button
{
padding-top: @xf-paddingSmall;
padding-bottom: @xf-paddingSmall;
height: auto;
line-height: inherit;
}
&.is-active:first-of-type
{
.m-dropShadow(0, 0, 8px, 3px, 0.3);
}
}
.inlineModBar-inner
{
.m-pageWidth();
display: flex;
align-items: center;
}
.inlineModBar-controls
{
.m-listPlain();
margin-right: auto;
display: flex;
align-items: center;
flex-wrap: wrap;
min-height: 35px;
max-width: 100%;
> li
{
float: left;
display: inline-block;
margin-right: 1em;
&:last-child
{
margin-right: 0;
}
}
}
.inlineModBar-close
{
float: right;
margin-left: 1em;
order: 2;
}
.inlineModBar-title
{
font-weight: @xf-fontWeightHeavy;
}
.button.inlineModBar-goButton
{
font-size: @xf-fontSizeNormal;
line-height: 1.5; // matches select
min-width: 0;
}
.inlineModBarCover
{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
cursor: pointer;
}]]></template>
<template title="app_nav.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// navEl / Navigation Elements for header navigation
.m-navElHPadding(@padding)
{
.p-navEl-link
{
padding: 0 @padding;
&.p-navEl-link--splitMenu
{
padding-right: ((@padding) / 4);
}
&.p-navEl-link--menuTrigger
{
padding-right: ((@padding) / 3); // equal to splitTrigger padding-right
&:after
{
padding-left: ((@padding) / 4 + (@padding) / 3); // equal to splitMenu padding-right + splitTrigger padding-left
}
}
}
.p-navEl .p-navEl-splitTrigger
{
padding: 0 ((@padding) / 3);
font-size: @xf-uix_iconSize;
// margin-right: @xf-paddingMedium;
}
}
.p-navEl
{
.m-clearFix();
display: inline-flex;
align-items: center;
}
.p-navEl-linkHolder
{
float: left;
}
a.p-navEl-link
{
float: left;
// .m-transition(all, @_nav-elTransitionSpeed);
//.m-transitionProperty(opacity, background;);
text-decoration: none;
max-height: 100%;
&.p-navEl-link--menuTrigger
{
cursor: pointer;
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, .58em);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-down" />
opacity: .5;
.m-transition(opacity, @_nav-elTransitionSpeed);
unicode-bidi: isolate; // try to keep this in the right position in RTL with LTR text
}
&:hover:after
{
opacity: 1;
}
}
}
.p-navEl-splitTrigger
{
float: left;
opacity: .5;
cursor: pointer;
text-decoration: none;
.m-transition(all, @_nav-elTransitionSpeed);
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, .58em);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-down" />
}
&:hover
{
opacity: 1;
text-decoration: none;
}
}
// HEADER NAV ROW
.p-nav
{
.xf-publicNav();
<xf:if is="property('uix_pageStyle') == 'fixed'">
.m-pageWidth();
</xf:if>
transition: ease-in .15s all;
a:not(.button)
{
color: inherit;
}
.p-navSticky.is-sticky &
{
.p-nav-list .p-navEl.is-selected,
.p-account
{
border-radius: 0;
}
}
}
.p-nav-inner
{
<xf:if is="property('uix_pageStyle') == 'covered'">
.m-pageWidth();
</xf:if>
position: relative;
<xf:if is="property('uix_navigationBarHeight')">
height: @xf-uix_navigationBarHeight;
</xf:if>
.p-header-logo {
display: inline-flex;
align-items: center;
margin-right: @xf-paddingLarge;
&.p-header-logo--image img {
max-height: calc(@xf-uix_navigationBarHeight - (@xf-uix_navLogoVertSpacing * 2));
.is-sticky & {
max-height: calc(@xf-uix_stickyNavHeight - (@xf-uix_navLogoVertSpacing * 2));
}
}
}
.m-clearFix();
display: flex;
align-items: center;
}
.p-nav .uix_activeNavTitle {
.xf-uix_activeNavTitleStyle();
display: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: @xf-publicNavCollapseWidth) and (min-width: @xf-responsiveNarrow) {
display: inline-block;
}
}
.p-nav .p-nav-menuTrigger
{
display: none;
vertical-align: middle;
align-self: center;
// margin-left: max(0px, @xf-pageEdgeSpacer - 6px);
margin-right: 5px;
padding: 0 8px;
&:hover
{
text-decoration: none;
cursor: pointer;
}
i:after
{
.m-faBase();
font-size: @xf-fontSizeLargest;
.m-faContent(@fa-var-navicon, .86em);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu" />
vertical-align: bottom;
font-size: @xf-uix_iconSizeLarge;
}
.p-nav-menuText
{
display: none;
}
}
<xf:if is="property('uix_logoSmall')">
.uix_logoSmall
{
<xf:if is="property('uix_brandmarkImage__breakpoint') != '100%'">
display: none;
</xf:if>
// max-width: 100px;
align-self: center;
img
{
display: block;
max-height: @header-navHeight;
}
}
<xf:if is="property('uix_brandmarkImage__breakpoint') == '100%'">
.p-header-logo.p-header-logo--image .uix_logo {display: none;}
</xf:if>
@media (max-width: {{ property('uix_brandmarkImage__breakpoint') - 1 }}px) {
.uix_logoSmall {display: inline-block;}
.p-header-logo.p-header-logo--image .uix_logo {display: none;}
}
</xf:if>
.uix_logo--text {
display: flex;
align-items: center;
.xf-uix_logoText__style();
}
<xf:if is="property('uix_logoTextBreakpoint')">
@media (max-width: @xf-uix_logoTextBreakpoint) {
.uix_logo--text {font-size: @xf-uix_responsiveLogoFontSize;}
}
</xf:if>
.p-nav-scroller
{
margin-right: auto;
max-width: 100%;
.has-no-flexbox &
{
float: left;
}
.hScroller-scroll:not(.is-calculated)
{
// IE11 seems to want to flash a vertical scrollbar without this here
overflow: hidden;
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-publicNav--background-color, transparent),
@xf-publicNav--color,
xf-intensify(@xf-publicNav--color, 10%)
);
}
}
.p-nav-list
{
.m-listPlain();
.m-clearFix();
display: flex;
align-items: center;
font-size: 0;
// this applies padding that will be contained within the scroller.
// it needs font-size 0 to not create extra space though
/*
&:before,
&:after
{
display: inline-block;
width: @xf-pageEdgeSpacer;
content: '';
}
*/
> li
{
display: inline-block;
vertical-align: bottom;
font-size: @xf-fontSizeNormal;
&:first-child
{
margin-left: 0;
}
}
.badgeContainer:after {margin-left: 4px;}
.m-navElHPadding(@xf-publicNavPaddingH);
.p-navEl
{
.xf-publicNavTab();
.m-transition(all, @_nav-elTransitionSpeed);
&.is-selected
{
.xf-publicNavSelected();
.p-navEl-link
{
<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
padding-right: @xf-publicNavPaddingH; // since the split trigger is hidden
}
</xf:if>
&:hover
{
background: none;
text-decoration: none;
color: inherit;
}
}
.p-navEl-splitTrigger
{
<xf:if is="{{ property('uix_viewportWidthRemoveSubNav') }} != '100%'">
@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
display: none;
}
</xf:if>
}
}
&:not(.is-selected):not(.is-menuOpen)
{
&:hover,
// .p-navEl-link:hover,
// .p-navEl-splitTrigger:hover
{
.xf-publicNavTabHover();
}
.p-navEl-link:hover,
.p-navEl-splitTrigger:hover {
text-decoration: none;
color: inherit;
}
}
&.is-menuOpen
{
.xf-publicNavTabMenuOpen();
border-top-left-radius: xf-default(@xf-publicNavSelected--border-top-left-radius, 0);
border-top-right-radius: xf-default(@xf-publicNavSelected--border-top-right-radius, 0);
// .m-dropShadow(0, 5px, 10px, 0, .35);
a
{
// text-decoration: none;
// opacity: 1;
}
}
}
.p-navEl-link,
.p-navEl-splitTrigger
{
padding-top: @xf-publicNavPaddingV;
padding-bottom: @xf-publicNavPaddingV;
display: inline-flex;
align-items: center;
&:hover {background: none !important;}
}
}
.p-navSticky--primary.is-sticky
{
.p-nav-list
{
.p-navEl-link.p-navEl-link--splitMenu
{
padding-right: ((@xf-publicNavPaddingH) / 4);
}
.p-navEl.is-selected .p-navEl-splitTrigger
{
display: inline;
position: relative;
&:before
{
content: '';
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 0;
border-left: @xf-borderSize solid fade(xf-default(@xf-publicNavSelected--color, transparent), 35%);
}
}
}
}
@media (max-width: @xf-publicNavCollapseWidth)
{
.has-js
{
.p-nav-inner
{
// min-height: 45px;
}
.p-nav .p-nav-menuTrigger
{
display: inline-flex;
}
.p-sectionLinks .p-sectionLinks--group {
display: none;
}
.p-nav-scroller
{
display: none;
}
}
}
// ACCOUNT/VISITOR/SEARCH SECTION
.p-nav-opposite
{
margin-left: auto;
// margin-right: @xf-pageEdgeSpacer;
text-align: right;
flex-shrink: 0;
display: inline-flex;
align-items: center;
.has-no-flexbox &
{
float: right;
}
}
.p-navgroup
{
float: left;
.m-clearFix();
// background: @xf-publicHeaderAdjustColor;
border-top-left-radius: @xf-borderRadiusMedium;
border-top-right-radius: @xf-borderRadiusMedium;
display: inline-flex;
&.p-discovery
{
// margin-left: .5em;
&.p-discovery--noSearch
{
margin-left: 0;
}
i {line-height: 1;}
}
.p-navgroup-linkText {padding-left: @xf-paddingSmall;}
}
<xf:if is="property('uix_removeVisitorTabsText')">
@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
.p-navgroup.p-navgroup--member .p-navgroup-linkText, .p-discovery .p-navgroup-linkText {display: none;}
.p-navgroup.p-navgroup--member .p-navgroup-link i,
.p-navgroup.p-discovery .p-navgroup-link i {
&:after, &:before {
font-size: @xf-uix_iconSizeLarge;
}
}
}
</xf:if>
<xf:if is="property('uix_removeRegisterText')">
@media (max-width: @xf-uix_viewportRemoveRegisterText) {
.p-navgroup--guest .p-navgroup-linkText {display: none;}
.p-navgroup.p-navgroup--guest .p-navgroup-link i {
&:after, &:before {
font-size: @xf-uix_iconSizeLarge;
}
}
}
</xf:if>
<xf:if is="property('uix_condenseVisitorTabs')">
@media (max-width: @xf-uix_viewportCondenseVisitorTabs) {
.p-account.p-navgroup--member {
.p-navgroup-link--conversations {display: none;}
.p-navgroup-link--alerts {display: none;}
}
}
</xf:if>
.p-navgroup-link
{
float: left;
padding: (@xf-publicNavPaddingV / 2);
// border-left: 1px solid @xf-publicHeaderAdjustColor;
display: inline-flex;
align-items: center;
<xf:if is="property('uix_removeVisitorTabsText')">
@media (max-width: @xf-uix_viewportRemoveVisitorTabsText) {
padding: @xf-paddingSmall;
}
</xf:if>
&:first-of-type
{
border-top-left-radius: @xf-borderRadiusMedium;
border-left: none;
}
&:last-of-type
{
border-top-right-radius: @xf-borderRadiusMedium;
}
&:hover
{
text-decoration: none;
// background: xf-intensify(@xf-publicHeaderAdjustColor, 5%);
}
&.p-navgroup-link--user
{
.m-overflowEllipsis();
max-width: 150px;
.avatar
{
// .m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
.m-avatarSize(@xf-uix_iconSizeLarge);
margin: 1px 0;
@media (min-width: @xf-uix_removeVisitorTabsText) {
.m-avatarSize(@xf-uix_iconSize);
font-size: 11px;
}
}
}
&.badgeContainer
{
// opacity: .6;
position: relative;
&:after
{
position: absolute;
// left: (@_navAccount-hPadding - 6px);
// top: (@xf-publicNavPaddingV - 2px);
right: 2px;
top: 3px;
padding: 1px 3px;
margin: 0;
font-size: 10px;
line-height: 11px;
}
&:hover,
&.badgeContainer--highlighted
{
// opacity: 1;
}
}
&.is-menuOpen
{
.xf-publicNavTabMenuOpen();
// .m-dropShadow(0, 5px, 10px, 0, .35);
opacity: 1;
}
/*
&.p-navgroup-link--iconic
{
i:after
{
.m-faBase();
display: inline-block;
min-width: 1em;
}
}
*/
&.p-navgroup-link--conversations
{
i:after
{
.m-faBase();
display: inline-block;
min-width: 1em;
.m-faContent(@fa-var-envelope, 1em);
<xf:macro template="uix_icons.less" name="content" arg-icon="email" />
}
}
&.p-navgroup-link--alerts
{
i:after
{
.m-faBase();
display: inline-block;
min-width: 1em;
.m-faContent(@fa-var-bell, 1em);
<xf:macro template="uix_icons.less" name="content" arg-icon="alert" />
}
}
&.p-navgroup-link--whatsnew i:after
{
.m-faBase();
.m-faContent(@fa-var-bolt, .5em);
<xf:macro template="uix_icons.less" name="content" arg-icon="comment-alert" />
font-size: @xf-uix_iconSizeLarge;
width: auto;
}
&.p-navgroup-link--search i:after
{
.m-faBase();
.m-faContent(@fa-var-search, .93em);
<xf:macro template="uix_icons.less" name="content" arg-icon="search" />
font-size: @xf-uix_iconSizeLarge !important;
}
&.p-navgroup-link--logIn
{
i:after
{
.m-faBase();
display: inline-block;
min-width: 1em;
content: "\f0f3";
<xf:macro template="uix_icons.less" name="content" arg-icon="login" />
}
}
&.p-navgroup-link--register
{
i:after
{
.m-faBase();
display: inline-block;
min-width: 1em;
content: "\f0f3";
<xf:macro template="uix_icons.less" name="content" arg-icon="register" />
}
}
}
.p-navgroup-link--whatsnew
{
display: none;
.p-navgroup-link:first-of-type& + .p-navgroup-link
{
border-top-left-radius: @xf-borderRadiusMedium;
border-left: none;
}
}
<xf:if is="property('uix_visitorTabsMobile') != 'initial'">
@media (max-width: @xf-responsiveNarrow) {
.p-navgroup.p-account {
.p-navgroup-link--user {display: none;}
.p-navgroup-link--conversations {display: none;}
.p-navgroup-link--alerts {display: none;}
}
<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
.p-navgroup.p-discovery {
.p-navgroup-link--whatsnew {display: none;}
}
</xf:if>
}
</xf:if>
@media (max-width: @xf-responsiveWide)
{
/*
.p-navgroup-link
{
&.p-navgroup-link--iconic .p-navgroup-linkText,
&.p-navgroup-link--textual i
{
display: none;
}
&.p-navgroup-link--textual
{
.m-overflowEllipsis();
max-width: 110px;
}
&.p-navgroup-link--iconic i:after
{
text-align: center;
}
}
*/
}
@media (max-width: @xf-publicNavCollapseWidth)
{
.p-navgroup-link--whatsnew
{
display: inline-flex;
.p-navgroup-link:first-of-type& + .p-navgroup-link
{
// border-top-left-radius: 0;
// border-left: 1px solid @xf-publicHeaderAdjustColor;
}
}
.has-js
{
.p-nav-opposite
{
align-self: center;
// margin-right: max(0px, @xf-pageEdgeSpacer - @_navAccount-hPadding);
.p-navgroup
{
background: none;
}
.p-navgroup-link
{
border: none;
border-radius: @xf-borderRadiusMedium;
&.is-menuOpen
{
.m-borderBottomRadius(0);
}
}
}
}
}
/*
@media (max-width: 359px)
{
.p-navgroup-link&.p-navgroup-link--user
{
display: none;
}
}
@media (max-width: 374px)
{
.p-navgroup-link.p-navgroup-link--register
{
display: none;
}
}
*/
.p-navgroup .p-navgroup-link i {
&:after, &:before {
@media (min-width: @xf-uix_viewportRemoveRegisterText) {
font-size: @xf-uix_iconSize;
// padding-right: @xf-paddingMedium;
}
}
}]]></template>
<template title="app_sectionlinks.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// SUB SECTION LINKS
.p-sectionLinks
{
.xf-publicSubNav();
<xf:if is="property('uix_pageStyle') == 'fixed'">
.m-pageWidth();
</xf:if>
transition: ease-in .15s all;
.p-sectionLinks--group {
display: flex;
align-items: center;
<xf:if is="property('uix_rightAlignNavigation')">
&:first-child {
margin-left: auto;
}
</xf:if>
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-publicSubNav--background-color, transparent),
@xf-publicSubNav--color,
@xf-publicSubNavElHover--color
);
}
.p-nav-opposite a:not(.button)
{
color: inherit;
&:hover {
.xf-publicSubNavElHover();
}
}
&.p-sectionLinks--empty
{
height: 10px;
<xf:if is="!property('publicNavSelected--background-color')">
display: none;
</xf:if>
}
.pageContent {
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
<xf:if is="property('publicNavSticky')">
min-height: @xf-uix_stickySectionLinkHeight;
height: @xf-uix_stickySectionLinkHeight;
</xf:if>
<xf:if is="property('uix_pageStyle') == 'covered'">
.m-pageWidth();
</xf:if>
}
.p-navgroup .p-navgroup-link i:after,
.p-navSearch-trigger i:after {font-size: @xf-uix_iconFont;}
.p-navgroup-link.p-navgroup-link--user .avatar {
.m-avatarSize(@xf-uix_iconSize);
font-size: @xf-uix_iconSizeLarge;
}
.p-navSearch-trigger,
.p-navgroup .p-navgroup-link {padding: @xf-paddingSmall @xf-paddingLarge;}
}
.p-sectionLinks-inner
{
// .m-clearFix();
// .m-pageWidth();
// padding-left: max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
// padding-right: max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
margin-right: auto;
}
.p-sectionLinks-list
{
.m-listPlain();
font-size: 0;
a
{
color: inherit;
}
> li
{
display: inline-block;
}
.m-navElHPadding(@xf-publicSubNavPaddingH);
.p-navEl
{
font-size: @xf-publicSubNav--font-size;
// padding-top: @xf-paddingMedium;
// padding-bottom: @xf-paddingMedium;
&:hover
{
.xf-publicSubNavElHover();
a
{
text-decoration: @xf-publicSubNavElHover--text-decoration;
}
}
<xf:comment>
&.is-menuOpen
{
.xf-publicSubNavElMenuOpen();
.m-borderBottomRadius(0);
.m-dropShadow(0, 5px, 10px, 0, .35);
}
</xf:comment>
}
.p-navEl-link,
.p-navEl-splitTrigger
{
padding-top: @xf-publicSubNavPaddingV;
padding-bottom: @xf-publicSubNavPaddingV;
}
}
<xf:if is="(property('uix_searchPosition') != 'tablinks') &&
(property('uix_loginTriggerPosition ') != 'tablinks') &&
(property('uix_userTabsPosition ') != 'tablinks')">
@media (max-width: @xf-publicNavCollapseWidth) {
.has-js .p-sectionLinks-inner
{
display: none;
}
}
</xf:if>]]></template>
<template title="app_staffbar.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[// ######################################### STAFF BAR #################################
.p-staffBar
{
.xf-publicStaffBar();
<xf:if is="property('uix_pageStyle') == 'fixed'">
.m-pageWidth();
</xf:if>
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-publicStaffBar--background-color, transparent),
@xf-publicStaffBar--color,
xf-intensify(@xf-publicStaffBar--color, 10%)
);
}
.pageContent {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
<xf:if is="property('uix_pageStyle') == 'covered'">
.m-pageWidth();
</xf:if>
<xf:if is="property('uix_stickyStaffBar')">
min-height: @xf-uix_stickyStaffBarHeight;
</xf:if>
.p-nav-opposite a:not(.button)
{
color: inherit;
&:hover {.xf-uix_staffBarTabHover();}
}
a {
.xf-uix_staffBarTab();
&:hover {.xf-uix_staffBarTabHover();}
}
}
}
.p-staffBar-inner
{
.m-clearFix();
// padding-top: @xf-paddingMedium;
//padding-bottom: @xf-paddingMedium;
}
.p-staffBar-link
{
display: inline-block;
vertical-align: top;
color: inherit;
padding: 4px @xf-paddingMedium;
margin-right: .35em;
.xf-uix_staffBarTab();
&:last-child
{
margin-right: 0;
}
&:hover
{
text-decoration: none;
// background: xf-diminish(@xf-publicStaffBar--background-color, 6%);
border-radius: @xf-borderRadiusSmall;
.xf-uix_staffBarTabHover();
}
}]]></template>
<template title="app_stickynav.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// STICKY NAV SETUP
.uix_headerContainer .p-navSticky
{
z-index: @zIndex-1;
&.is-sticky
{
z-index: @zIndex-4;
// .m-dropShadow(0, 2px, 5px, 0px, .26);
position: fixed !important;
top: 0;
bottom: auto !important;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
> * {box-shadow: @xf-uix_elevation1; border-radius: 0 !important;}
.p-nav {.xf-uix_stickyNavigationStyle();}
.p-sectionLinks {.xf-uix_sectionLinksStickyStyle();}
<xf:if is="property('uix_pageStyle') != 'covered'">
// .m-pageWidth();
padding: 0 !important;
</xf:if>
<xf:if is="property('uix_pageStyle') == 'fluid'">
> * {
max-width: 100%;
}
</xf:if>
.p-nav-inner {
height: @xf-uix_stickyNavHeight;
// .p-header-logo {display: inline-flex;}
.p-navEl,
.p-navEl-link {max-height: @xf-uix_stickyNavHeight;}
<xf:comment>
.uix_searchForm .input,
.uix_searchForm .uix_searchIcon,
.uix_searchForm .uix_searchIcon i,
.p-header-logo--image img,
.p-navgroup-link {max-height: calc(@xf-uix_stickyNavHeight - (@uix_navigationPaddingV * 2));}
// *:not(.hScroller-scroll) {max-height: @xf-uix_stickyNavHeight;}
</xf:comment>
}
<xf:if is="property('publicNavSticky')">
.p-sectionLinks {
border-bottom: 0;
.pageContent {
height: @xf-uix_stickySectionLinkHeight;
// *:not(.hScroller-scroll) {max-height: @xf-uix_stickySectionLinkHeight;}
}
}
</xf:if>
}
}
<xf:if is="property('uix_stickyStaffBar')">
.p-staffBar.is-sticky {
position: fixed !important;
bottom: auto !important;
top: 0 !important;
left: 0;
right: 0;
z-index: 500;
margin: 0 auto;
border-radius: 0 !important;
.xf-uix_stickyStaffbarStyle();
height: @xf-uix_stickyStaffBarHeight;
<xf:if is="property('publicNavSticky') == 'none'">
box-shadow: @xf-uix_elevation1;
</xf:if>
// *:not(.hScroller-scroll) {max-height: @xf-uix_stickyStaffBarHeight;}
}
</xf:if>
@supports (position: sticky) or (position: -webkit-sticky)
{
.p-navSticky
{
// position: -webkit-sticky;
// position: sticky;
top: 0;
&.is-sticky-broken,
&.is-sticky-disabled
{
position: static;
top: auto;
}
}
}]]></template>
<template title="app_title.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[.uix_headerContainer {
.p-body-header {
<xf:if is="property('uix_pageStyle') == 'fixed'">
.m-pageWidth();
</xf:if>
.pageContent {
<xf:if is="property('uix_pageStyle') != 'fixed'">
.m-pageWidth();
</xf:if>
}
}
}
.p-pageWrapper > .p-body-header .pageContent {
.m-pageWidth();
min-height: 36px;
}
.p-body-header {
.xf-uix_titlebar();
.pageContent {
display: flex;
align-items: center;
// max-width: 100%;
.p-title-pageAction {margin-top: 0;}
@media(max-width: @xf-responsiveMedium) {
flex-wrap: wrap;
/* -- commented out as fix for mobile page action button --
.uix_headerInner--opposite {
flex-grow: 1;
width: 100%;
}
*/
}
}
.contentRow {flex-grow: 1;}
.uix_headerInner {
margin: 5px;
margin-left: 0;
// margin-right: auto; -- commented out as fix for mobile page action button --
flex-grow: 1;
}
.uix_headerInner--opposite {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;
margin-right: 0;
}
.uix_headerInner + .uix_headerInner--opposite {
margin: 5px auto;
}
.p-title
{
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
&.p-title--noH1
{
flex-direction: row-reverse;
}
.has-no-flexbox &
{
.m-clearFix();
}
.p-title-pageAction {
margin: 5px 0;
}
}
.p-title-value
{
padding: 0;
margin: 0 0 3px 0;
font-size: @xf-fontSizeLargest;
font-weight: @xf-fontWeightNormal;
margin-right: auto;
min-width: 0;
.xf-uix_pageTitle();
.has-no-flexbox &
{
float: left;
}
}
.p-title-pageAction
{
margin-left: @xf-paddingLarge;
@media(max-width: @xf-responsiveNarrow) {
margin-left: 0;
margin-top: @xf-paddingLarge;
}
.has-no-flexbox &
{
float: right;
}
}
.p-description
{
margin: 0;
padding: 0;
font-size: inherit;
color: inherit;
}
}
.p-title-pageAction .button + .button {margin-left: @xf-paddingMedium;}
@media (max-width: @xf-responsiveNarrow)
{
.p-title-value
{
font-size: @xf-fontSizeLarger;
}
}]]></template>
<template title="app_user_banners.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[.m-userBannerVariation(@color; @bg; @border: false)
{
color: @color;
background: @bg;
border-color: xf-intensify(@bg, 10%);
border-radius: @xf-borderRadiusMedium;
& when (iscolor(@border))
{
border-color: @border;
}
}
.userBanner
{
font-size: 75%;
font-size: 11px;
font-weight: @xf-fontWeightNormal;
font-style: normal;
padding: 1px @xf-paddingMedium;
padding: 1px 3px;
border: 1px solid transparent;
border-radius: @xf-borderRadiusSmall;
text-align: center;
display: inline-block;
strong
{
font-weight: inherit;
}
// variations
&.userBanner--hidden
{
background: none;
border: none;
box-shadow: none;
}
&.userBanner--staff,
&.userBanner--primary
{
.m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
.m-userBannerVariation(#fff, @xf-uix_primaryColor, @xf-uix_primaryColor);
}
&.userBanner--accent
{
.m-userBannerVariation(#fff, @xf-uix_secondaryColor, @xf-uix_secondaryColor);
}
&.userBanner--red { .m-userBannerVariation(white, #d80000); }
&.userBanner--green { .m-userBannerVariation(white, green); }
&.userBanner--olive { .m-userBannerVariation(white, olive); }
&.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
&.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
&.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
&.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
&.userBanner--gray { .m-userBannerVariation(white, gray); }
&.userBanner--silver { .m-userBannerVariation(black, silver); }
&.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
&.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}]]></template>
<template title="bb_code.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[@_bbCodeBlock-spacing: .75em;
@_bbCodeBlock-paddingV: @xf-paddingMedium;
@_bbCodeBlock-paddingH: @xf-paddingLarge;
@_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2;
.bbCodeBlock
{
margin: @_bbCodeBlock-spacing 0;
.xf-bbCodeBlock();
&.bbCodeBlock--quote
{
.bbCodeBlock-content
{
font-size: @xf-fontSizeSmall;
}
}
}
.bbCodeBlock-title
{
padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
.xf-bbCodeBlockTitle();
.m-clearFix();
}
a.bbCodeBlock-sourceJump
{
color: inherit;
text-decoration: none;
&:hover
{
text-decoration: underline;
}
&:after
{
.m-faBase();
.m-faContent(@fa-var-arrow-circle-up, .86em);
display: inline-block;
margin-left: 5px;
}
}
.bbCodeBlock-content
{
position: relative;
padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
}
.bbCodeBlock--code .bbCodeBlock-content {background-color: @xf-contentBg; color: @xf-textColor;}
.bbCodeBlock-expandLink
{
display: none;
position: absolute;
top: (@xf-bbCodeBlockExpandHeight) + (@_bbCodeBlock-paddingV * 2) - (@_bbCodeBlock-expandTriggerHeight);
left: 0;
right: 0;
height: @_bbCodeBlock-expandTriggerHeight;
cursor: pointer;
.m-gradient(
fade(@xf-bbCodeBlock--background-color, 0%),
xf-default(@xf-bbCodeBlock--background-color, transparent),
transparent,
0%,
60%
);
a
{
position: absolute;
bottom: @_bbCodeBlock-paddingV;
left: 0;
right: 0;
text-align: center;
font-size: @xf-fontSizeSmall;
color: @xf-textColorAttention;
text-decoration: none;
}
}
.bbCodeBlock--screenLimited
{
.bbCodeBlock-content
{
max-height: 300px;
max-height: 70vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
.bbCodeBlock--expandable
{
overflow: hidden;
.m-transition();
.m-transitionProperty(-xf-height, height, padding, margin, border;);
.bbCodeBlock-content
{
overflow: hidden;
.bbCodeBlock:not(.bbCodeBlock--expandable) .bbCodeBlock-content
{
overflow: visible;
}
.bbCodeBlock.bbCodeBlock--screenLimited .bbCodeBlock-content
{
overflow: auto;
}
}
.bbCodeBlock-expandContent
{
max-height: @xf-bbCodeBlockExpandHeight;
overflow: hidden;
}
&.is-expandable
{
.bbCodeBlock-expandLink
{
display: block;
}
}
&.is-expanded
{
.bbCodeBlock-expandContent
{
max-height: none;
}
.bbCodeBlock-expandLink
{
display: none;
}
}
}
.bbCodeCode
{
margin: 0;
padding: 0;
font-family: @xf-fontFamilyCode;
font-size: @xf-fontSizeSmall;
line-height: @xf-lineHeightDefault;
-ltr-rtl-text-align: left;
direction: ltr;
white-space: pre;
position: relative;
.m-tabSize();
code
{
font-family: inherit;
}
.prism-token
{
&.prism-comment,
&.prism-prolog,
&.prism-doctype,
&.prism-cdata
{
color: #a50;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#a50, 40%);
</xf:if>
}
&.prism-constant
{
color: #05a;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#05a, 40%);
</xf:if>
}
&.prism-tag
{
color: #170;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#170, 40%);
</xf:if>
}
&.prism-boolean
{
color: #219;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#219, 40%);
</xf:if>
}
&.prism-symbol,
&.prism-atrule,
&.prism-keyword
{
color: #708;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#708, 40%);
</xf:if>
}
&.prism-selector,
&.prism-function
{
color: #05a;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#05a, 40%);
</xf:if>
}
&.prism-deleted
{
color: #d44;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#d44, 40%);
</xf:if>
}
&.prism-inserted
{
color: #292;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#292, 40%);
</xf:if>
}
&.prism-string,
&.prism-attr-value
{
color: #a11;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#a11, 40%);
</xf:if>
}
&.prism-number
{
color: #164;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#164, 40%);
</xf:if>
}
&.prism-attr-name,
&.prism-char,
&.prism-builtin
{
color: #00c;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#00c, 40%);
</xf:if>
}
&.prism-regex,
&.prism-important,
&.prism-variable,
&.prism-package
{
color: #05a;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#05a, 40%);
</xf:if>
}
&.prism-class-name,
&.prism-important,
&.prism-bold
{
color: #00f;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#00f, 40%);
</xf:if>
}
&.prism-bold
{
font-weight: bold;
}
&.prism-italic,
&.prism-constant
{
color: #05a;
<xf:if is="{{ property('styleType') == 'dark'}}">
color: lighten(#05a, 40%);
</xf:if>
font-style: italic;
}
&.prism-entity
{
cursor: help;
}
}
}
.bbCodeInline
{
margin: 0;
.xf-bbCodeInlineCode();
font-family: @xf-fontFamilyCode;
line-height: @xf-lineHeightDefault;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.bbCodeSpoiler
{
margin: @_bbCodeBlock-spacing 0;
}
.bbCodeSpoiler-button
{
.has-no-js & { display: none; }
}
.bbCodeSpoiler-content
{
.m-hiddenEl(true);
.has-no-js & { display: block !important; }
> .bbCodeBlock--spoiler
{
margin: .2em 0 0;
}
}]]></template>
<template title="category_view" type="public" addon_id="XF" version_id="2000070" version_string="2.0.0"><![CDATA[<xf:title>{$category.title}</xf:title>
<xf:description>{$category.description|raw}</xf:description>
<xf:macro template="metadata_macros" name="canonical_url" arg-canonicalUrl="{{ link('canonical:categories', $category) }}" />
<xf:breadcrumb source="$category.getBreadcrumbs(false)" />
<xf:if is="$nodeTree">
<div class="block uix_nodeList block">
<div class="block-outer"><xf:trim>
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$xf.visitor.user_id && $hasForumDescendents">
<xf:button href="{{ link('categories/mark-read', $category, {'date': $xf.time}) }}"
class="button--link" overlay="true">
{{ phrase('mark_read') }}
</xf:button>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:trim></div>
<div class="block-container">
<div class="block-body">
<xf:macro template="forum_list" name="node_list"
arg-children="{$nodeTree}"
arg-extras="{$nodeExtras}"
arg-depth="2" />
</div>
</div>
</div>
<xf:else />
<div class="blockMessage">{{ phrase('there_is_nothing_to_display') }}</div>
</xf:if>
<xf:widgetpos id="category_view_sidebar" context-category="{$category}" position="sidebar" />
]]></template>
<template title="class.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[.p-navgroup--member .p-navgroup-link:not(:last-child) {margin-right: 4px;}
.p-header-logo a {display: inline-flex; align-items: center;}
.p-header {
padding-left: 0;
padding-right: 0;
}
@media (min-width: @xf-uix_viewportWidthRemoveSubNav){
.uix_hasSectionLinks .p-navEl.u-ripple.is-selected:after {
display: block;
content: "";
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -8px;
border-style: solid;
border-width: 0px 8px 8px;
border-color: transparent transparent rgb(0,0,0);
border-color: transparent transparent rgba(0,0,0, .3);
}
}
.uix_headerContainer .p-nav {padding: 0 @xf-paddingMedium 0 0;}
.p-staffBar {
padding: 0;
height: @xf-uix_stickyStaffBarHeight;
}
.button.uix_sidebarTrigger {
color: inherit;
background: none;
box-shadow: none;
height: 30px;
line-height: 30px;
}
.uix_searchBar .uix_searchBarInner .uix_searchForm .input {background: transparent;}
.p-sectionLinks-list .p-navEl {padding-top: 5px; padding-bottom: 5px;}
.avatar {
border: 2px solid #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.4);
}
@media (min-width: @xf-messageSingleColumnWidth) {
.message:not(.message--simple) .message-cell--user .message-avatar-wrapper {
background-image: url({{property('uix_imagePath')}}/class/images/avatar-shadow.png);
background-repeat: no-repeat;
background-position: 50% 100%;
padding: 10px 10px 20px;
}
}
.message .thpostcomments_commentsContainer .message-cell--user .message-avatar-wrapper,
.message.message--deleted .message-cell--user .message-avatar-wrapper {
padding: 0;
background: none;
}
.message {
&:first-child {
border-top: 1px solid @xf-borderColor !important;
border-top-left-radius: @xf-borderRadiusMedium !important;
border-top-right-radius: @xf-borderRadiusMedium !important;
}
&:last-child {
border-bottom-left-radius: @xf-borderRadiusMedium !important;
border-bottom-right-radius: @xf-borderRadiusMedium !important;
}
}
.p-footer-copyrightRow {
a {
color: rgba(255,255,255,.7);
&:hover {color: #fff;}
}
}
.block--messages .message:nth-child(even),
.js-quickReply .message:nth-child(even),
.block--messages .block-row:nth-child(even), .js-quickReply .block-row:nth-child(even) {
background-image: url({{ property('uix_imagePath') }}/class/images/primary-content-bg-alt.gif);
}
.button.button--link, a.button.button--link {
&:hover, &:active, &:focus {
background-color: xf-intensify(@xf-uix_buttonLink--background-color, 10%);
}
}
@media (max-width: @xf-responsiveWide) {
.uix_contentWrapper {border-radius: 0;}
.p-body-inner {padding-top: 0;}
}
.pageNav-jump, .pageNav-page {background: #fff;}]]></template>
<template title="code_editor.less" type="public" addon_id="XF" version_id="2000370" version_string="2.0.3"><![CDATA[.codeEditor
{
// standard editor with fixed-width font and 55% screen height, used when the code editor is the primary
// editable element on screen
&.CodeMirror
{
height: 55vh;
direction: ltr;
border: @xf-borderSize solid;
-ltr-rtl-border-color: @xf-borderColorHeavy @xf-borderColorLight @xf-borderColorLight @xf-borderColorHeavy;
border-radius: @xf-borderRadiusMedium;
font-family: @xf-fontFamilyCode;
.m-inputZoomFix();
background: mix(@xf-contentBg, @xf-paletteColor1, 60%);
&.CodeMirror-focused
{
.xf-inputFocus();
}
&.CodeMirror-simplescroll
{
.CodeMirror-sizer
{
// Bit hacky but solves issue with the simplescroll bars overlapping the content
padding-right: 30px !important;
}
}
}
// short editor, taking only 30% of the vertical height
&.codeEditor--short
{
height: 30vh;
}
// show an editor that shrinks to a very small height for very little content
&.codeEditor--autoSize
{
height: auto;
.CodeMirror-lines
{
min-height: (@xf-fontSizeNormal * @xf-lineHeightDefault * 2) + 8px; // 2 lines, 4px padding from .CodeMirror-lines
}
}
// like --autoSize, but shrinks to a single line when empty
&.codeEditor--oneLine
{
min-height: auto;
}
// use proportional font - use this when syntax highlighting is useful, but not imperative, like HTML-enabled descriptions
&.codeEditor--proportional
{
font-family: @xf-fontFamilyUi;
}
}
[disabled] + .codeEditor,
[disabled] + .codeEditor.CodeMirror-focused
{
.xf-inputDisabled();
}
[readonly] + .codeEditor,
[readonly] + .codeEditor.CodeMirror-focused
{
background: mix(xf-default(@xf-input--background-color, @xf-contentBg), xf-default(@xf-inputDisabled--background-color, @xf-paletteNeutral1));
}
/* XF-RTL:disable */
/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
color: black;
}
/* PADDING */
.CodeMirror-lines {
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
white-space: nowrap;
}
.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }
/* CURSOR */
.CodeMirror-cursor {
border-left: 1px solid black;
border-right: none;
width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
width: auto;
border: 0 !important;
background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
z-index: 1;
}
.cm-animate-fat-cursor {
width: auto;
border: 0;
-webkit-animation: blink 1.06s steps(1) infinite;
-moz-animation: blink 1.06s steps(1) infinite;
animation: blink 1.06s steps(1) infinite;
background-color: #7e7;
}
@-moz-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@-webkit-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-rulers {
position: absolute;
left: 0; right: 0; top: -50px; bottom: -20px;
overflow: hidden;
}
.CodeMirror-ruler {
border-left: 1px solid #ccc;
top: 0; bottom: 0;
position: absolute;
}
/* DEFAULT THEME */
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}
.CodeMirror-composing { border-bottom: 2px solid; }
/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
position: relative;
overflow: hidden;
background: white;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -30px; margin-right: -30px;
padding-bottom: 30px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
background-color: #fff;
}
.CodeMirror-sizer {
position: relative;
border-right: 30px solid transparent;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actual scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
left: 0; bottom: 0;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
min-height: 100%;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: -30px;
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: none !important;
border: none !important;
}
.CodeMirror-gutter-background {
position: absolute;
top: 0; bottom: 0;
z-index: 4;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-gutter-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.CodeMirror-lines {
cursor: text;
min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
/* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
-webkit-tap-highlight-color: transparent;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-widget {}
.CodeMirror-code {
outline: none;
}
/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-cursor {
position: absolute;
pointer-events: none;
}
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors {
visibility: hidden;
position: relative;
z-index: 3;
}
div.CodeMirror-dragcursors {
visibility: visible;
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; .xf-uix_textSelection();}
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; .xf-uix_textSelection();}
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursors {
visibility: hidden;
}
}
/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }
/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
/* Simple scrollbars */
.CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div {
position: absolute;
background: #ccc;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #bbb;
border-radius: 2px;
}
.CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
position: absolute;
z-index: 6;
background: #eee;
}
.CodeMirror-simplescroll-horizontal {
bottom: 0; left: 0;
height: 8px;
}
.CodeMirror-simplescroll-horizontal div {
bottom: 0;
height: 100%;
}
.CodeMirror-simplescroll-vertical {
right: 0; top: 0;
width: 8px;
}
.CodeMirror-simplescroll-vertical div {
right: 0;
width: 100%;
}
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler, .CodeMirror-overlayscroll .CodeMirror-gutter-filler {
display: none;
}
.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
position: absolute;
background: #bcd;
border-radius: 3px;
}
.CodeMirror-overlayscroll-horizontal, .CodeMirror-overlayscroll-vertical {
position: absolute;
z-index: 6;
}
.CodeMirror-overlayscroll-horizontal {
bottom: 0; left: 0;
height: 6px;
}
.CodeMirror-overlayscroll-horizontal div {
bottom: 0;
height: 100%;
}
.CodeMirror-overlayscroll-vertical {
right: 0; top: 0;
width: 6px;
}
.CodeMirror-overlayscroll-vertical div {
right: 0;
width: 100%;
}
/* Dialog add-on */
.CodeMirror-dialog {
position: absolute;
left: 0; right: 0;
background: inherit;
z-index: 15;
padding: .1em .8em;
overflow: hidden;
color: inherit;
}
.CodeMirror-dialog-top {
border-bottom: 1px solid #eee;
top: 0;
}
.CodeMirror-dialog-bottom {
border-top: 1px solid #eee;
bottom: 0;
}
.CodeMirror-dialog input {
border: none;
outline: none;
background: transparent;
width: 20em;
color: inherit;
}
.CodeMirror-dialog button {
font-size: 70%;
}
.CodeMirror-fullscreen {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
height: auto;
z-index: @zIndex-9;
}
/* XF-RTL:enable */]]></template>
<template title="conversation_list_macros" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="item"
arg-userConv="!"
arg-allowInlineMod="{{ true }}">
<xf:css src="structured_list.less" />
<div class="structItem structItem--conversation {{ $userConv.isUnread() ? 'is-unread' : '' }} js-inlineModContainer" data-author="{{ $userConv.Master.Starter.username ?: $userConv.Master.username }}">
<div class="structItem-cell structItem-cell--icon">
<div class="structItem-iconContainer">
<xf:avatar user="$userConv.Master.Starter" size="s" defaultname="{$userConv.Master.username}" />
</div>
</div>
<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">
<xf:if contentcheck="true">
<ul class="structItem-statuses">
<xf:contentcheck>
<xf:if is="$userConv.is_starred">
<li>
<i class="structItem-status structItem-status--starred" aria-hidden="true" title="{{ phrase('starred')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('starred') }}</span>
</li>
</xf:if>
<xf:if is="!$userConv.Master.conversation_open">
<li>
<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('locked') }}</span>
</li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<a href="{{ link('conversations' . ($userConv.isUnread() ? '/unread' : ''), $userConv) }}" class="structItem-title" data-tp-primary="on">{$userConv.title}</a>
<div class="structItem-minor">
<xf:if contentcheck="true">
<ul class="structItem-extraInfo">
<xf:contentcheck>
<xf:if is="$allowInlineMod">
<li><xf:checkbox standalone="true">
<xf:option value="{$userConv.conversation_id}" class="js-inlineModToggle" />
</xf:checkbox></li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<ul class="structItem-parts">
<li>
<ul class="listInline listInline--comma listInline--selfInline">
<li><xf:username user="$userConv.Master.Starter" defaultname="{$userConv.Master.username}" title="{{ phrase('conversation_starter') }}" /></li><xf:trim>
</xf:trim><xf:foreach loop="$userConv.Master.recipients" value="$recipient" if="{$recipient.user_id} != {$userConv.Master.user_id}"><xf:trim>
<li><xf:username user="{$recipient}" defaultname="{{ phrase('unknown_member') }}" /></li>
</xf:trim></xf:foreach>
</ul>
</li>
<li class="structItem-startDate"><a href="{{ link('conversations', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.Master.start_date}" /></a></li>
<xf:if is="$userConv.reply_count >= $xf.options.messagesPerPage">
<span class="structItem-pageJump">
<xf:foreach loop="{{ last_pages($userConv.reply_count + 1, $xf.options.messagesPerPage) }}" value="$p">
<a href="{{ link('conversations', $userConv, {'page': $p}) }}">{$p}</a>
</xf:foreach>
</span>
</xf:if>
</ul>
</div>
</div>
<div class="structItem-cell structItem-cell--meta">
<dl class="pairs pairs--justified">
<dt>{{ phrase('replies') }}</dt>
<dd>{$userConv.reply_count|number}</dd>
</dl>
<dl class="pairs pairs--justified structItem-minor">
<dt>{{ phrase('participants') }}</dt>
<dd>{$userConv.Master.recipient_count|number}</dd>
</dl>
</div>
<div class="structItem-cell structItem-cell--latest">
<a href="{{ link('conversations/latest', $userConv) }}" rel="nofollow"><xf:date time="{$userConv.last_message_date}" class="structItem-latestDate" /></a>
<div class="structItem-minor"><xf:username user="{$userConv.Master.last_message_cache}" /></div>
</div>
</div>
</xf:macro>]]></template>
<template title="core.less" type="email" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[// NOTE: THIS DOES NOT HAVE ACCESS TO public:setup.less automatically!
// THE LESS HERE SHOULD BE KEPT AS SIMPLE AS POSSIBLE
body
{
margin: 0;
padding: 0;
word-wrap: break-word;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: @xf-emailBg;
font-size: @xf-fontSizeNormal;
font-family: @xf-emailFont;
line-height: @xf-lineHeightDefault;
color: @xf-emailTextColor;
}
table
{
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table,
td
{
border-collapse: collapse;
}
a
{
color: @xf-emailLinkColor;
text-decoration: none;
}
#bodyTable
{
height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
background-color: @xf-emailBg;
}
#bodyTableContainer
{
background-color: @xf-emailBg;
}
.container
{
width: 100%;
max-width: 600px;
}
.header
{
color: @xf-emailHeaderColor;
padding: @xf-paddingMedium @xf-paddingLarge;
border-top-left-radius: @xf-borderRadiusMedium;
border-top-right-radius: @xf-borderRadiusMedium;
font-family: @xf-emailFont;
font-size: @xf-fontSizeLargest;
line-height: @xf-lineHeightDefault;
}
.header a
{
color: @xf-emailHeaderColor;
}
.content
{
background-color: @xf-emailContentBg;
border-radius: @xf-borderRadiusSmall;
color: @xf-emailTextColor;
padding: @xf-paddingLarge;
font-size: @xf-fontSizeNormal;
font-family: @xf-emailFont;
line-height: @xf-lineHeightDefault;
}
.content .bbImage
{
max-width: 100%;
}
.content > p:first-child
{
margin-top: 0;
}
.content > p:last-child
{
margin-bottom: 0;
}
.footer
{
padding: @xf-paddingMedium @xf-paddingLarge;
text-align: center;
color: @xf-emailTextColorMuted;
font-size: @xf-fontSizeSmall;
font-family: @xf-emailFont;
line-height: @xf-lineHeightDefault;
}
.footer a
{
color: @xf-emailTextColorMuted;
text-decoration: underline;
}
.footerExtra
{
margin-top: 1em;
}
h2
{
font-size: @xf-fontSizeLargest;
font-weight: normal;
margin: @xf-paddingLarge 0;
padding: 0;
}
hr
{
border: 0;
border-bottom: @xf-borderSize solid @xf-emailBorderColor;
}
div.message
{
border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
margin: @xf-paddingLarge 0;
padding: @xf-paddingLarge;
}
div.quote
{
border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
border-top: @xf-borderSize solid @xf-emailBorderColor;
border-bottom: @xf-borderSize solid @xf-emailBorderColor;
border-right: @xf-borderSize solid @xf-emailBorderColor;
background: @xf-emailContentAltBg;
margin: @xf-paddingLarge 0;
padding: @xf-paddingLarge;
}
.quote-name
{
color: @xf-textColorAttention;
font-size: @xf-fontSizeSmall;
margin-bottom: @xf-paddingMedium;
}
pre.code
{
margin: @xf-paddingLarge 0;
padding: @xf-paddingLarge;
border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
border-top: @xf-borderSize solid @xf-emailBorderColor;
border-bottom: @xf-borderSize solid @xf-emailBorderColor;
border-right: @xf-borderSize solid @xf-emailBorderColor;
background: @xf-emailContentAltBg;
max-width: 600px;
overflow: auto;
}
.textLink
{
color: @xf-emailTextColor;
text-decoration: none;
}
.linkBar
{
padding: @xf-paddingMedium;
background-color: @xf-emailContentAltBg;
border-top: @xf-borderSize solid @xf-emailBorderColor;
}
.button
{
display: inline-block;
padding: 5px 10px;
background-color: @xf-paletteColor4;
border: none;
border-radius: @xf-borderRadiusMedium;
font-size: @xf-fontSizeSmall;
color: @xf-paletteColor1;
text-decoration: none;
.xf-buttonBase();
.xf-buttonDefault();
.xf-buttonPrimary();
}
.buttonFake
{
display: inline-block;
padding: 5px 10px;
font-size: @xf-fontSizeSmall;
}
.minorText,
.unsubscribeLink
{
font-size: @xf-fontSizeSmall;
color: @xf-emailTextColorMuted;
}
.minorText a,
.unsubscribeLink a
{
color: @xf-emailTextColorMuted;
text-decoration: underline;
}
.unsubscribeLink
{
margin-top: 1em;
text-align: center;
}
.mediaPlaceholder,
.spoilerPlaceholder
{
border-radius: @xf-borderRadiusSmall;
margin: @xf-paddingMedium 0;
padding: @xf-paddingMedium;
font-size: @xf-fontSizeLargest;
line-height: 3;
text-align: center;
border: @xf-borderSize solid @xf-emailBorderColor;
background-color: @xf-emailContentAltBg;
}]]></template>
<template title="core.less" type="public" addon_id="XF" version_id="2000270" version_string="2.0.2"><![CDATA[// ########################## GLOBAL BASE SETUP #######################
html
{
font: @xf-fontSizeNormal / @xf-lineHeightDefault sans-serif;
font-family: @xf-fontFamilyUi;
font-weight: @xf-fontWeightNormal;
color: @xf-textColor;
margin: 0;
padding: 0;
word-wrap: break-word;
background-color: @xf-pageBg;
/* // just a reminder that we *might* want this at some point
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;*/
}
button, input, optgroup, select, textarea
{
font-family: @xf-fontFamilyUi;
line-height: @xf-lineHeightDefault;
}
img
{
max-width: 100%;
height: auto;
}
b, strong
{
font-weight: @xf-fontWeightHeavy;
}
a
{
.xf-link();
&:hover
{
.xf-linkHover();
}
}
{{ include('core_action_bar.less')}}
{{ include('core_setup.less') }}
{{ include('core_utilities.less') }}
{{ include('core_list.less') }}
{{ include('core_categorylist.less') }}
{{ include('core_block.less') }}
{{ include('core_blockmessage.less') }}
{{ include('core_blockstatus.less') }}
{{ include('core_blocklink.less') }}
{{ include('core_blockend.less') }}
{{ include('core_fixedmessage.less') }}
{{ include('core_button.less') }}
// ################################# INPUTS & FORMS #####################
.m-formElementExplain()
{
display: block;
font-style: normal;
.xf-formExplain();
.m-textColoredLinks();
}
{{ include('core_input.less') }}
{{ include('core_formrow.less') }}
{{ include('core_collapse.less') }}
{{ include('core_badge.less') }}
{{ include('core_tooltip.less') }}
{{ include('core_menu.less') }}
{{ include('core_offcanvas.less') }}
{{ include('core_tab.less') }}
{{ include('core_overlay.less') }}
{{ include('core_globalaction.less') }}
{{ include('core_avatar.less') }}
{{ include('core_datalist.less') }}
{{ include('core_filter.less') }}
{{ include('core_contentrow.less') }}
{{ include('core_pagenav.less') }}
{{ include('core_hscroller.less') }}
// FLASH MESSAGES
.flashMessage
{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: @xf-paddingLargest;
font-size: @xf-fontSizeLargest;
text-align: center;
z-index: @zIndex-9;
background: #e2e2e2;
color: #202020;
.m-dropShadow(0, 5px, 5px);
.m-transitionFadeDown(@xf-animationSpeed);
}
// AUTOCOMPLETE
.autoCompleteList
{
.m-autoCompleteList();
margin-top: 2px;
}
// #################################### TAGS ##############################
// note that while this is related to tags, it's commonly used so just include it
.tagItem
{
display: inline-block;
max-width: 100%;
padding: 0 6px 1px;
margin: 0 0 2px;
border-radius: @xf-borderRadiusMedium;
font-size: @xf-fontSizeSmaller;
.xf-chip();
.xf-uix_tag();
&:hover
{
text-decoration: none;
color: @xf-chip--color;
.xf-chipHover();
.xf-uix_tagHover();
}
}
// ############################# MISC #########################
.recaptcha
{
&.input
{
box-sizing: content-box;
max-width: 100%;
}
img
{
max-width: 100%;
}
}
.likesBar
{
.m-transitionFadeDown();
.xf-minorBlockContent();
border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
padding: @xf-paddingMedium;
font-size: @xf-fontSizeSmaller;
margin-top: @xf-paddingMedium;
.xf-uix_messageLikes();
}
.likeIcon
{
&:before
{
.m-faBase();
.m-faContent(@fa-var-thumbs-o-up, 0.86em);
<xf:macro template="uix_icons.less" name="content" arg-icon="like" />
color: @xf-textColorFeature;
margin-right: .2em;
}
}
// these are BB code rendering related, but they're very core and basic styles that may be used elsewhere.
.bbImage
{
max-width: 100%;
}
.bbMediaWrapper
{
width: 500px;
max-width: 100%;
margin: 0;
}
.bbMediaWrapper-inner
{
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
&.bbMediaWrapper-inner--4to3
{
padding-bottom: 75%; /* 4:3 ratio */
}
&.bbMediaWrapper-inner--104px
{
padding-bottom: 104px;
}
&.bbMediaWrapper-inner--110px
{
padding-bottom: 110px;
}
&.bbMediaWrapper-inner--500px
{
padding-bottom: 500px;
}
iframe,
object,
embed,
.bbMediaWrapper-fallback
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.bbMediaWrapper-fallback
{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
.xf-minorBlockContent();
}
.bbOembed
{
margin: 0;
max-width: 500px;
&.bbOembed--loaded
{
display: block;
}
> :not(.embedly-card),
.embedly-card-hug
{
/*width: auto !important;
max-width: 500px !important;
margin-left: 0 !important;
margin-right: 0 !important;*/
}
.reddit-card
{
margin: 0;
}
}
.colorChip
{
display: inline-block;
border: @xf-borderSize solid @xf-borderColor;
border-radius: @xf-borderRadiusMedium;
padding: 1px;
width: 100px;
}
.colorChip-inner
{
display: block;
background-color: transparent;
border-radius: @xf-borderRadiusSmall;
height: 1em;
}
.colorChip-value
{
display: none;
}
pre.sf-dump
{
// not ideal, but then again neither is the default of 99999...
z-index: @zIndex-1 !important;
}
.grecaptcha-badge
{
z-index: @zIndex-5;
}
{{ include('core_action_bar.less') }}
{{ include('core_labels.less') }}
{{ include('core_pikaday.less') }}
{{ include('core_smilie.less') }}
{{ include('core_bbcode.less') }}
{{ include('core_fawidths.less') }}
// RESOLUTION OUTPUT
.debugResolution
{
font-size: @xf-fontSizeSmallest;
.debugResolution-output:before
{
content: "Full @{xf-responsiveWide} - @{xf-pageWidthMax}";
@media (min-width: @xf-pageWidthMax) { content: "Max > @{xf-pageWidthMax}"; }
@media (max-width: @xf-responsiveWide) { content: "Wide < @{xf-responsiveWide}"; }
@media (max-width: @xf-responsiveMedium) { content: "Medium < @{xf-responsiveMedium}"; }
@media (max-width: @xf-responsiveNarrow) { content: "Narrow < @{xf-responsiveNarrow}"; }
}
}]]></template>
<template title="core_action_bar.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[.actionBar
{
.m-clearFix();
}
.actionBar-set
{
&.actionBar-set--internal
{
float: left;
// margin-left: -3px;
> .actionBar-action:first-child
{
margin-left: 0;
}
}
&.actionBar-set--external
{
float: right;
// margin-right: -3px;
> .actionBar-action:last-child
{
margin-right: 0;
}
}
}
.actionBar .actionBar-action
{
padding: 3px;
border: 1px solid transparent;
border-radius: @xf-borderRadiusMedium;
margin-left: 5px;
.xf-uix_messageControl();
&:hover {
.xf-uix_messageControlHover();
}
&:before
{
.m-faBase();
font-size: 12px;
padding-right: 2px;
}
&.actionBar-action--menuTrigger
{
display: none;
&:after
{
.m-faBase();
.m-faContent(" @{fa-var-caret-down}");
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-down" />
}
}
&.actionBar-action--inlineMod input
{
.m-checkboxAligner();
margin: 0;
}
&.actionBar-action--mq
{
&:before { .m-faContent("@{fa-var-plus}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="quote" /> } // plus
&.is-selected
{
background-color: @xf-contentHighlightBg;
border-color: @xf-borderColorHighlight;
&:before { .m-faContent("@{fa-var-minus}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="quote" />} // minus
}
}
&.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="reply" />} // reply
&.actionBar-action--comment:before { .m-faContent("@{fa-var-reply}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="post" />} // reply
&.actionBar-action--like:before { .m-faContent("@{fa-var-thumbs-o-up}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="like" />}
&.actionBar-action--like.unlike:before { .m-faContent("@{fa-var-thumbs-o-down}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="unlike" />}// thumbs up
&.actionBar-action--report:before { .m-faContent("@{fa-var-exclamation-circle}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="report" />}
&.actionBar-action--delete:before { .m-faContent("@{fa-var-trash-o}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="delete" />}
&.actionBar-action--edit:before { .m-faContent("@{fa-var-edit}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="edit" />}
&.actionBar-action--ip:before { .m-faContent("@{fa-var-globe}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="ipaddress" />}
&.actionBar-action--history:before { .m-faContent("@{fa-var-history}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="history" />}
&.actionBar-action--warn:before { .m-faContent("@{fa-var-warning}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="warn" />}
&.actionBar-action--spam:before { .m-faContent("@{fa-var-warning}\20"); <xf:macro template="uix_icons.less" name="content" arg-icon="spam" />}
}
@media (max-width: @xf-responsiveNarrow)
{
.actionBar .actionBar-action
{
&.actionBar-action--menuItem
{
display: none !important;
}
&.actionBar-action--menuTrigger
{
display: inline;
}
}
}]]></template>
<template title="core_avatar.less" type="public" addon_id="XF" version_id="2000970" version_string="2.0.9"><![CDATA[// ################################### AVATARS #############################
.m-uix_avatarShape() {
<xf:if is="property('uix_avatarShape') == 1">
border-radius: 100%;
<xf:elseif is="property('uix_avatarShape') == 2" />
border-radius: 0;
<xf:elseif is="property('uix_avatarShape') == 3" />
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
<xf:elseif is="property('uix_avatarShape') == 4" />
-webkit-clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%);
<xf:elseif is="property('uix_avatarShape') == 5" />
-webkit-clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
<xf:elseif is="property('uix_avatarShape') == 6" />
-webkit-clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
clip-path: polygon(0 50%, 15% 15%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%);
</xf:if>
}
.avatar
{
// display: inline-block;
border-radius: @xf-avatarBorderRadius;
vertical-align: top;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
.m-uix_avatarShape();
img { background-color: @xf-avatarBg; }
&.avatar--default
{
&.avatar--default--dynamic,
&.avatar--default--text
{
font-family: @xf-avatarDynamicFont;
font-weight: normal;
text-align: center;
text-decoration: none !important;
// converts our avatar sized LH to a font sized version which adapts based solely on font-size
line-height: (@xf-avatarDynamicLineHeight) / ((@xf-avatarDynamicTextPercent) / 100);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&.avatar--default--text
{
color: @xf-textColorMuted !important;
background: mix(@xf-textColorMuted, @xf-avatarBg, 25%) !important;
> span:before { content: ~"'@{xf-avatarDefaultTextContent}'"; }
}
&.avatar--default--image
{
background-color: @xf-avatarBg;
background-image: url(@xf-avatarDefaultImage);
background-size: cover;
> span { display: none; }
}
}
&:hover
{
text-decoration: none;
}
&.avatar--updateLink
{
position: relative;
}
&.avatar--separated
{
border: 1px solid @xf-avatarBg;
}
&.avatar--xxs
{
.m-avatarSize(@avatar-xxs);
}
&.avatar--xs
{
.m-avatarSize(@avatar-xs);
}
&.avatar--s
{
.m-avatarSize(@avatar-s);
}
&.avatar--m
{
.m-avatarSize(@avatar-m);
}
&.avatar--l
{
.m-avatarSize(@avatar-l);
}
&.avatar--o
{
.m-avatarSize(@avatar-o);
}
img:not(.cropImage)
{
.m-hideText;
display: block;
border-radius: inherit;
width: 100%;
height: 100%;
}
&:not(a)
{
cursor: inherit;
}
}
.memberHeader-avatar .avatar {border-radius: @xf-avatarBorderRadius;}
.avatar-update
{
width: 100%;
height: 30px;
bottom: -30px;
position: absolute;
.m-hiddenLinks();
.m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
.m-transition();
padding: @xf-paddingSmall;
overflow: hidden;
font-family: @xf-fontFamilyUi;
font-size: @xf-fontSizeSmaller;
line-height: @xf-lineHeightDefault;
display: none;
align-items: center;
justify-content: center;
.avatar--updateLink &
{
display: flex;
}
.has-no-flexbox &
{
display: table;
width: 100%;
}
.has-touchevents &,
.avatar:hover &
{
bottom: 0;
}
a
{
text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
color: #fff;
&:hover
{
text-decoration: none;
}
}
}]]></template>
<template title="core_badge.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// #################################################### BADGES ###########################
.badge,
.badgeContainer:after
{
display: inline-block;
padding: 2px 4px 1px;
margin: -2px 0 -2px 4px;
font-size: 80%;
line-height: 1;
font-weight: @xf-fontWeightNormal;
.xf-badge();
}
.badgeContainer
{
&:after
{
content: attr(data-badge);
display: none;
}
&.badgeContainer--visible:after
{
display: inline-block;
}
}
.badge.badge--highlighted,
.badgeContainer.badgeContainer--highlighted:after
{
display: inline-block;
.xf-badgeHighlighted();
}]]></template>
<template title="core_block.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ################################# BLOCKS ##################
.blocks
{
margin-bottom: @xf-elementSpacer;
&:last-child
{
margin-bottom: 0;
}
.block
{
margin-bottom: (@xf-elementSpacer / 2);
&:last-child
{
margin-bottom: 0;
}
}
}
.blocks-header
{
font-size: @xf-fontSizeLarger;
font-weight: @xf-fontWeightNormal;
color: @xf-textColorMuted;
margin-bottom: 5px;
}
.blocks-textJoiner
{
display: table;
width: 100%;
margin-bottom: (@xf-elementSpacer / 2);
padding: 0 @xf-paddingMedium;
> span
{
display: table-cell;
position: relative;
&:before
{
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: @xf-borderSize solid @xf-borderColor;
}
}
> em
{
display: table-cell;
padding: 0 @xf-paddingLarge;
width: 1%;
white-space: nowrap;
// font-size: @xf-fontSizeLargest;
line-height: 1;
font-style: normal;
text-align: center;
font-weight: 400;
color: @xf-textColorMuted;
text-transform: lowercase;
}
}
.block
{
margin-bottom: @xf-elementSpacer;
&:last-child {margin-bottom: 0;}
&.block--close
{
margin: 5px;
}
&.block--treeEntryChooser
{
.block-header
{
font-size: @xf-fontSizeLarge;
.block-desc
{
font-size: @xf-fontSizeSmallest;
}
}
.block-row
{
padding-top: 6px;
padding-bottom: 6px;
}
.contentRow
{
&.is-disabled
{
opacity: 0.5;
}
}
.contentRow-title
{
font-size: @xf-fontSizeNormal;
}
.contentRow-minor
{
font-size: @xf-fontSizeSmaller;
}
.contentRow-suffix
{
font-size: @xf-fontSizeSmall;
}
}
}
.block-outer
{
padding-bottom: @xf-blockPaddingV;
.m-clearFix();
.xf-uix_blockOuter();
&:empty
{
display: none;
}
&.block-outer--after
{
padding-top: @xf-blockPaddingV;
padding-bottom: 0;
}
.block-outer-hint
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
}
}
.block-outer-main { float: left; }
.block-outer-opposite { float: right; }
.block-outer-middle { text-align: center; }
.block-container
{
.xf-contentBase();
.xf-blockBorder()
border-radius: @xf-blockBorderRadius;
.m-transition(); .m-transitionProperty(border margin); // edgeSpacerRemoval
.xf-uix_blockContainer();
}
@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
@{block-noStripSel} > :first-child,
.block-topRadiusContent,
@{block-noStripSel} > .block-body:first-child > .blockLink:first-child
{
border-top-left-radius: @block-borderRadius-inner;
border-top-right-radius: @block-borderRadius-inner;
}
@{block-noStripSel} > :last-child,
.block-bottomRadiusContent,
@{block-noStripSel} > .block-body:last-child > .blockLink:last-child
{
border-bottom-left-radius: @block-borderRadius-inner;
border-bottom-right-radius: @block-borderRadius-inner;
}
@{block-noStripSel} > .block-body:first-child > .dataList:first-child,
.block-topRadiusContent.dataList,
.block-topRadiusContent > .dataList:first-child
{
tbody:first-child .dataList-row:first-child,
thead:first-child .dataList-row:first-child
{
> .dataList-cell:first-child { border-top-left-radius: @block-borderRadius-inner; }
> .dataList-cell:last-child { border-top-right-radius: @block-borderRadius-inner; }
}
}
@{block-noStripSel} > .block-body:first-child > .formRow:first-child,
.block-topRadiusContent.formRow,
.block-topRadiusContent > .formRow:first-child
{
> dt { border-top-left-radius: @block-borderRadius-inner; }
> dd { border-top-right-radius: @block-borderRadius-inner; }
}
@{block-noStripSel} > .block-body:last-child > .dataList:last-child,
.block-bottomRadiusContent.dataList,
.block-bottomRadiusContent > .dataList:last-child
{
tbody:last-child .dataList-row:last-child
{
> .dataList-cell:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
> .dataList-cell:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
}
}
@{block-noStripSel} > .block-body:last-child > .formRow:last-child,
.block-bottomRadiusContent.formRow,
.block-bottomRadiusContent > .formRow:last-child
{
> dt { border-bottom-left-radius: @block-borderRadius-inner; }
> dd { border-bottom-right-radius: @block-borderRadius-inner; }
}
@{block-noStripSel} > .block-body:last-child .formSubmitRow:not(.is-sticky),
@{block-noStripSel} > .formSubmitRow:not(.is-sticky):last-child,
.block-bottomRadiusContent > .formSubmitRow:not(.is-sticky)
{
> dt { border-bottom-left-radius: @block-borderRadius-inner; }
> dd { border-bottom-right-radius: @block-borderRadius-inner; }
.formSubmitRow-bar
{
border-bottom-left-radius: @block-borderRadius-inner;
border-bottom-right-radius: @block-borderRadius-inner;
}
}
}
.block-header
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-blockHeader();
.m-clearFix();
.m-hiddenLinks();
&.block-header--separated
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
.block-desc
{
color: fade(@xf-blockHeader--color, 70);
.m-textColoredLinks();
}
}
.block-minorHeader
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-blockMinorHeader();
.m-clearFix();
.m-hiddenLinks();
.block-body + &
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
.block-desc
{
.m-textColoredLinks();
}
&--small
{
font-size: @xf-fontSizeSmall;
}
}
.block-tabHeader
{
padding: 0;
margin: 0;
font-weight: @xf-fontWeightNormal;
.xf-blockTabHeader();
.m-tabsTogether(xf-default(@xf-blockTabHeader--font-size, @xf-fontSizeNormal));
.tabs-tab
{
padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
.xf-uix_blockTabHeaderTab();
&:hover
{
color: @xf-blockTabHeaderSelected--color;
background: fade(@xf-blockTabHeaderSelected--color, 10%);
}
&.is-active
{
background: none;
.xf-blockTabHeaderSelected();
}
}
.block-tabHeader-extra
{
float: right;
color: inherit;
font-size: @xf-blockTabHeader--font-size;
padding: @xf-blockPaddingV @xf-blockPaddingH;
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-blockTabHeader--background-color, transparent),
@xf-blockTabHeader--color,
@xf-blockTabHeaderSelected--color
);
}
}
.block-minorTabHeader
{
padding: 0;
margin: 0;
font-weight: @xf-fontWeightNormal;
.xf-blockMinorTabHeader();
.m-tabsTogether(xf-default(@xf-blockMinorTabHeader--font-size, @xf-fontSizeNormal));
.tabs-tab
{
padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
&:hover
{
color: @xf-blockMinorTabHeaderSelected--color;
}
&.is-active
{
background: none;
.xf-blockMinorTabHeaderSelected();
}
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-blockMinorTabHeader--background-color, transparent),
@xf-blockMinorTabHeader--color,
@xf-blockMinorTabHeaderSelected--color
);
}
}
.block-filterBar
{
padding: (@xf-blockPaddingH / 2) (@xf-blockPaddingH / 2);
.xf-blockFilterBar();
.filterBar-filterToggle
{
background: mix(
xf-default(@xf-blockFilterBar--color, @xf-linkColor),
xf-default(@xf-blockFilterBar--background-color, transparent),
8%
);
}
.filterBar-filterToggle,
.filterBar-menuTrigger
{
&:hover
{
text-decoration: none;
background: mix(
xf-default(@xf-blockFilterBar--color, @xf-linkColor),
xf-default(@xf-blockFilterBar--background-color, transparent),
16%
);
}
}
}
.block-textHeader
{
margin: @xf-blockPaddingV/2 0;
padding: 0;
font-weight: @xf-fontWeightNormal;
.xf-blockTextHeader();
.m-clearFix();
.m-hiddenLinks();
&.block-textHeader--scaled
{
font-size: inherit;
}
.block-textHeader-highlight
{
color: @xf-textColor;
}
.block-desc
{
.m-textColoredLinks();
}
&:first-child
{
margin-top: 0;
}
}
.block-formSectionHeader
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-formSectionHeader();
.m-clearFix();
.m-hiddenLinks();
.block-desc
{
.m-textColoredLinks();
}
.block-container > &:first-child
{
border-top: none;
}
.block-formSectionHeader-aligner
{
@_blockPaddingShift: (unit(@xf-formLabelWidth) / 100) * (@xf-blockPaddingH);
display: inline-block;
text-align: right;
min-width: @xf-formLabelWidth;
min-width: ~"calc((@{xf-formLabelWidth}) - (@{_blockPaddingShift}) - (@{xf-formRowPaddingHInner}) - (@{xf-borderSize}))";
max-width: 100%;
.menu & {
display: inline;
text-align: left;
min-width: 0;
padding-left: 0;
}
@media (max-width: @xf-formResponsive)
{
display: inline;
text-align: left;
min-width: 0;
padding-left: 0;
}
}
.menu & {padding-left: @xf-formRowPaddingHOuter;}
@media (max-width: @xf-formResponsive)
{
padding-left: @xf-formRowPaddingHOuter;
}
.block-formSectionHeader-multiChecker
{
float: right;
}
}
.block-desc
{
display: block;
// font-size: @xf-fontSizeSmaller;
// font-weight: @xf-fontWeightNormal;
.xf-uix_categoryDescription();
}
.block-body
{
.m-listPlain();
.xf-uix_blockBody();
&.block-body--collapsible
{
.has-no-js & { display: block; }
.m-transitionFadeDown();
}
&.block-body--contained
{
overflow: auto;
max-height: 300px;
max-height: 70vh;
}
}
.block-row
{
margin: 0;
padding: @xf-blockPaddingV @xf-blockPaddingH;
.m-clearFix();
&.block-row--alt
{
.xf-contentAltBase();
}
&.block-row--minor
{
font-size: @xf-fontSizeSmall;
}
&.block-row--separated
{
// padding-top: (@xf-blockPaddingV) * 2;
// padding-bottom: (@xf-blockPaddingV) * 2;
padding-bottom: @xf-blockPaddingV;
padding-top: @xf-blockPaddingV;
+ .block-row
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
}
&.block-row--connectAbove
{
padding-bottom: (@xf-blockPaddingV) * 2;
.block-body > &:last-child
{
padding-bottom: @xf-blockPaddingV;
}
}
&.block-row--highlighted
{
.xf-contentHighlightBase();
}
&.block-row--clickable:hover
{
.xf-contentHighlightBase();
}
&.is-mod-selected
{
background: @xf-inlineModHighlightColor;
}
> pre
{
&:first-child { margin-top: 0; }
&:last-child { margin-bottom: 0; }
}
}
.block-separator
{
margin: 0;
padding: 0;
border: none;
border-top: @xf-borderSize solid @xf-borderColorLight;
}
.block-footer
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
.xf-blockFooter();
.m-clearFix();
&:first-child
{
border: none;
}
[data-app=admin] &
{
.block-footer-counter,
.block-footer-select
{
line-height: 30px;
}
}
&:not(.block-footer--split)
{
.block-footer-counter
{
float: left;
}
.block-footer-controls
{
float: right;
}
}
.block-footer-controls .button,
.block-footer-counter .button {
.xf-uix_buttonSmall();
}
&.block-footer--split
{
display: flex;
align-items: center;
.block-footer-main,
.block-footer-counter
{
flex-grow: 1;
.has-no-flexbox &
{
float: left;
}
}
.block-footer-select:not(:last-child)
{
margin: 0 1em;
}
.block-footer-opposite,
.block-footer-controls
{
margin-left: auto;
.has-no-flexbox &
{
float: right;
}
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.block-outer
{
text-align: center;
}
.block-outer-main,
.block-outer-opposite
{
float: none;
text-align: center;
}
.block-outer-main + .block-outer-opposite
{
margin-top: @xf-paddingMedium;
}
}]]></template>
<template title="core_blockend.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// This contains rules that apply to various block and block-related systems. This file should be included
// after all of the primary definitions to ensure the rules override.
.blockMessage,
.blockStatus,
.block-row
{
p:first-child
{
margin-top: 0;
}
p:last-child
{
margin-bottom: 0;
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.block-container,
.blockMessage
{
margin-left: -@xf-pageEdgeSpacer * .5;
margin-right: -@xf-pageEdgeSpacer * .5;
border-radius: 0;
border-left: none;
border-right: none;
}
.blockStatus
{
margin-left: -@xf-pageEdgeSpacer * .5;
margin-right: -@xf-pageEdgeSpacer * .5;
border-radius: 0;
border-right: none;
}
.blockMessage.blockMessage--none
{
margin-left: 0;
margin-right: 0;
}
}]]></template>
<template title="core_blocklink.less" type="public" addon_id="XF" version_id="2000170" version_string="2.0.1"><![CDATA[// ############################ BLOCK LINKS ##################
.blockLink
{
display: block;
padding: (@xf-blockPaddingV / 2) @xf-blockPaddingH;
.xf-blockLink();
&.is-selected
{
.xf-blockLinkSelected(no-border);
border-left: @xf-blockLinkSelected--border-width solid @xf-blockLinkSelected--border-color;
padding-left: (@xf-blockPaddingH - xf-default(@xf-blockLinkSelected--border-width, 0));
}
&:hover
{
.xf-blockLinkSelected(background);
text-decoration: inherit;
color: inherit;
}
}
.blockLink-desc
{
display: block;
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmaller;
font-weight: @xf-fontWeightNormal;
}
.blockLinkSplitToggle
{
display: flex;
padding: 0;
text-decoration: none;
cursor: pointer;
.has-no-flexbox &
{
display: table;
table-layout: fixed;
width: 100%;
}
&.is-selected
{
.xf-blockLinkSelected(no-border);
}
&:hover
{
.xf-blockLinkSelected(background);
text-decoration: inherit;
}
}
.blockLinkSplitToggle-link
{
display: block;
padding: @xf-blockPaddingV @xf-blockPaddingH;
text-decoration: none;
flex-grow: 1;
.has-no-flexbox &
{
display: table-cell;
}
&:hover
{
text-decoration: none;
}
.blockLinkSplitToggle.is-selected &
{
border-left: @xf-blockLinkSelected--border-width solid @xf-blockLinkSelected--border-color;
padding-left: (@xf-blockPaddingH - xf-default(@xf-blockLinkSelected--border-width, 0));
}
}
.blockLinkSplitToggle-toggle
{
display: inline-block;
padding: @xf-blockPaddingV @xf-blockPaddingH;
text-decoration: none;
flex-grow: 0;
line-height: 1;
.has-no-flexbox &
{
display: table-cell;
width: ((@xf-blockPaddingH) * 2 + 14px);
}
&:hover
{
text-decoration: none;
}
&:after
{
.m-faBase();
font-size: 80%;
.m-faContent(@fa-var-chevron-down, 1em);
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-down" />
}
&.is-active:after
{
.m-faContent(@fa-var-chevron-up, 1em);
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-up" />
}
}
.blockLink--iconic
{
i:after
{
.m-faBase();
display: inline-block;
min-width: 1em;
position: absolute;
left: @xf-blockPaddingH;
top: 8px;
display: none !important;
}
&--started i:after
{
.m-faContent(@fa-var-file-text, 0.86em);
<xf:macro template="uix_icons.less" name="content" arg-icon="file-document" />
}
&--contributed i:after
{
.m-faContent(@fa-var-comments-o, 1em);
<xf:macro template="uix_icons.less" name="content" arg-icon="comment-multiple" />
}
&--watched i:after
{
.m-faContent(@fa-var-bookmark, 0.72em);
<xf:macro template="uix_icons.less" name="content" arg-icon="bookmark" />
}
&--unanswered i:after
{
.m-faContent(@fa-var-question-circle-o, 0.86em);
<xf:macro template="uix_icons.less" name="content" arg-icon="help" />
}
}
// ################################ FAUX BLOCK LINKS #######################
// concept from https://codepen.io/BPScott/pen/Erwan and http://codepen.io/IschaGast/pen/Qjxpxo
// z-indexes are bumped to have the link sit on top of positioned elements (without z-index)
.fauxBlockLink
{
position: relative;
a,
.fauxBlockLink-link
{
position: relative;
z-index: 2;
}
.fauxBlockLink-blockLink
{
position: static;
&:before
{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
}
&.fauxBlockLink--noHover
{
.fauxBlockLink-blockLink:hover
{
text-decoration: none;
}
}
}]]></template>
<template title="core_blockmessage.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ############################ BLOCK MESSAGE ###################
.block-rowMessage
{
margin: @xf-blockPaddingV 0;
padding: @xf-blockPaddingV @xf-blockPaddingH;
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
.m-clearFix();
&:first-child
{
margin-top: 0;
}
&:last-child
{
margin-bottom: 0;
}
&.block-rowMessage--small
{
font-size: @xf-fontSizeSmall;
padding: @xf-blockPaddingV/2 @xf-blockPaddingH/2;
}
&.block-rowMessage--center
{
text-align: center;
}
.m-blockMessageVariants();
}
.blockMessage
{
margin-bottom: @xf-elementSpacer;
padding: @xf-blockPaddingV @xf-blockPaddingH;
.xf-contentBase();
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
.xf-uix_blockMessage();
.m-clearFix();
.m-transition(); .m-transitionProperty(border margin); // edgeSpacerRemoval
&.blockMessage--none
{
background: none;
border: none;
color: @xf-textColor;
padding: 0;
box-shadow: none;
}
&.blockMessage--close
{
margin-top: 5px;
margin-bottom: 5px;
}
&.blockMessage--small
{
font-size: @xf-fontSizeSmall;
padding: @xf-blockPaddingV/2 @xf-blockPaddingH/2;
}
&.blockMessage--center
{
text-align: center;
}
.m-blockMessageVariants();
}
.blockMessage--iconic,
.block-rowMessage--iconic
{
text-align: left;
position: relative;
// padding-left: 4em;
min-height: 3.5em;
display: flex;
align-items: center;
&:before
{
.m-faBase();
// font-size: 280%; // 2 x line height
// position: absolute;
// left: @xf-blockPaddingH;
font-size: @xf-uix_iconSizeLarge !important;
padding-right: @xf-paddingLarge;
}
}
.m-blockMessageVariants()
{
// note: the double && is correct here -- it enforces output like ".x.x--variant". The extra specificity helps
// prevent issues from things like media query overrides.
&&--highlight
{
.xf-contentHighlightBase();
}
&--highlight&--iconic:before
{
.m-faContent(@fa-var-info-circle);
<xf:macro name="content" template="uix_icons.less" arg-icon="info" />
}
@important-featureColor: @xf-borderColorAttention;
&&--important
{
.xf-contentAccentBase();
border-left: @xf-borderSizeFeature solid @important-featureColor;
padding: @xf-paddingMedium;
a { .xf-contentAccentLink(); }
}
&--important&--iconic:before
{
.m-faContent(@fa-var-exclamation-circle);
<xf:macro name="content" template="uix_icons.less" arg-icon="warning" />
color: @important-featureColor;
}
@success-featureColor: #63b265;
&&--success
{
border-left: @xf-borderSizeFeature solid @success-featureColor;
background: #daf3d8;
color: #3d793f;
.m-textColoredLinks();
}
&--success&--iconic:before
{
.m-faContent(@fa-var-check-circle);
<xf:macro name="content" template="uix_icons.less" arg-icon="check" />
color: @success-featureColor;
}
@warning-featureColor: #dcda54;
&&--warning
{
border-left: @xf-borderSizeFeature solid @warning-featureColor;
background: #fbf7e2;
color: #84653d;
.m-textColoredLinks();
}
&--warning&--iconic:before
{
.m-faContent(@fa-var-warning);
<xf:macro name="content" template="uix_icons.less" arg-icon="warning" />
color: @warning-featureColor;
}
@error-featureColor: #c84448;
&&--error
{
border-left: @xf-borderSizeFeature solid @error-featureColor;
background: #fde9e9;
color: @error-featureColor;
.m-textColoredLinks();
}
&--error&--iconic:before
{
.m-faContent(@fa-var-times-circle);
<xf:macro name="content" template="uix_icons.less" arg-icon="warning" />
color: @error-featureColor;
}
}]]></template>
<template title="core_blockstatus.less" type="public" addon_id="XF" version_id="2000031" version_string="2.0.0 Beta 1"><![CDATA[// ################################## BLOCK STATUS MESSAGES ##############################
.blockStatus
{
.xf-contentAltBase();
.xf-blockBorder();
border-left: @xf-borderSizeFeature solid @xf-borderColorAttention;
border-radius: @xf-blockBorderRadius;
margin: 0;
padding: @xf-paddingMedium 0;
font-size: @xf-fontSizeSmall;
text-align: left;
.m-transition(); .m-transitionProperty(border margin); // edgeSpacerRemoval
> dt
{
display: none;
}
&.blockStatus--info
{
border-left-color: @xf-borderColorFeature;
}
&.blockStatus--simple
{
.xf-blockBorder();
}
&.blockStatus--standalone
{
margin-bottom: (@xf-elementSpacer) / 2;
}
}
.blockStatus-message
{
display: block;
padding: 0 @xf-paddingMedium;
margin: .2em 0 0;
&:first-of-type
{
margin-top: 0;
}
&:before
{
.m-faBase();
display: inline-block;
min-width: .8em;
color: @xf-textColorAttention;
}
&--deleted::before { .m-faContent("@{fa-var-trash-o}\20"); }
&--locked::before { .m-faContent("@{fa-var-lock}\20"); }
&--moderated::before { .m-faContent("@{fa-var-shield}\20"); }
&--warning:before { .m-faContent("@{fa-var-warning}\20"); }
&--ignored:before { .m-faContent("@{fa-var-microphone-slash}\20"); }
&--deleted::before { <xf:macro template="uix_icons.less" name="content" arg-icon="delete" /> }
&--locked::before { <xf:macro template="uix_icons.less" name="content" arg-icon="lock" /> }
&--moderated::before { <xf:macro template="uix_icons.less" name="content" arg-icon="moderate" /> }
&--warning:before { <xf:macro template="uix_icons.less" name="content" arg-icon="warning" /> }
&--ignored:before { <xf:macro template="uix_icons.less" name="content" arg-icon="ignore" /> }
}]]></template>
<template title="core_button.less" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[// ############################ BUTTONS #################
.button,
a.button // needed for specificity over a:link
{
.m-buttonBase();
.button-text {display: inline-flex; align-items: center;}
a
{
color: inherit;
text-decoration: none;
}
&:hover,
&:focus {
.xf-uix_buttonHover();
}
&:active {
.xf-uix_buttonActive();
}
.xf-buttonDefault();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
&.button--primary
{
.xf-buttonPrimary();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));
&:hover,
&:focus {.xf-uix_buttonPrimaryHover();}
&:active {.xf-uix_buttonPrimaryActive();}
}
&.button--cta
{
.xf-buttonCta();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));
&:hover,
&:focus {.xf-uix_buttonCtaHover();}
&:active {.xf-uix_buttonCtaActive();}
}
&.button--link
{
// block colors
// background: @xf-contentBg;
// color: @xf-linkColor;
// .m-buttonBorderColorVariation(@xf-borderColor);
.xf-uix_buttonSmall();
.xf-uix_buttonLink();
&:hover,
&:focus
{
text-decoration: none;
// background: @xf-contentHighlightBg;
.xf-uix_buttonHover();
}
&:active {
.xf-uix_buttonActive();
}
}
&.button--longText
{
white-space: normal;
text-align: left;
}
&.is-disabled
{
.xf-buttonDisabled();
// .m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
&:hover,
&:active,
&:focus
{
.xf-buttonDisabled();
// background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
}
}
&.button--scroll
{
// background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 75%);
.xf-buttonPrimary();
padding: 5px 8px;
.m-dropShadow();
&:hover,
&:focus {.xf-uix_buttonPrimaryHover();}
&:active {.xf-uix_buttonPrimaryActive();}
}
&.button--small
{
font-size: @xf-fontSizeSmaller;
padding: 3px 6px;
.xf-uix_buttonSmall();
}
&.button--fullWidth
{
display: block;
}
&.button--icon
{
> .button-text:before
{
.m-faBase();
// font-size: 120%;
font-size: @xf-uix_iconSize;
vertical-align: middle;
display: inline-block;
// margin: -.255em 6px -.255em 0;
margin-right: .2em;
}
&.button--iconOnly > .button-text
{
&:before
{
margin: 0;
}
}
/*
&--add { .m-buttonIcon(@fa-var-plus-square, .79em) }
&--confirm { .m-buttonIcon(@fa-var-check, 1em); }
&--write { .m-buttonIcon(@fa-var-pencil-square-o, 1em); }
&--import { .m-buttonIcon(@fa-var-upload, .93em); }
&--export { .m-buttonIcon(@fa-var-download, .93em); }
&--download { .m-buttonIcon(@fa-var-download, .93em); }
&--disable { .m-buttonIcon(@fa-var-power-off); }
&--edit { .m-buttonIcon(@fa-var-pencil, .86em); }
&--save { .m-buttonIcon(@fa-var-save, .86em); }
&--reply { .m-buttonIcon(@fa-var-mail-reply, 1em); }
&--quote { .m-buttonIcon(@fa-var-quote-left, .93em); }
&--purchase { .m-buttonIcon(@fa-var-credit-card, 1.11em); }
&--payment { .m-buttonIcon(@fa-var-credit-card, 1.08em); }
&--convert { .m-buttonIcon(@fa-var-flash, .5em); }
&--search { .m-buttonIcon(@fa-var-search, .93em); }
&--sort { .m-buttonIcon(@fa-var-sort, .58em); }
&--upload { .m-buttonIcon(@fa-var-upload, .93em); }
&--attach { .m-buttonIcon(@fa-var-paperclip, .79em); }
&--login { .m-buttonIcon(@fa-var-lock, .65em); }
&--rate { .m-buttonIcon(@fa-var-star-half-empty, .93em); }
&--config { .m-buttonIcon(@fa-var-cog, .86em); }
&--refresh { .m-buttonIcon(@fa-var-refresh, .86em); }
&--translate { .m-buttonIcon(@fa-var-globe, .86em); }
&--vote { .m-buttonIcon(@fa-var-check-circle-o, .86em); }
&--result { .m-buttonIcon(@fa-var-bar-chart-o, 1.15em); }
&--history { .m-buttonIcon(@fa-var-history, .86em); }
&--cancel { .m-buttonIcon(@fa-var-remove, .86em); }
&--preview { .m-buttonIcon(@fa-var-eye, 1em); }
&--conversation { .m-buttonIcon(@fa-var-comments-o, 1em); }
&--bolt { .m-buttonIcon(@fa-var-bolt, .5em); }
&--list { .m-buttonIcon(@fa-var-list, .86em); }
&--markRead { .m-buttonIcon(@fa-var-check-square-o, .93em); }
&--user { .m-buttonIcon(@fa-var-user, .72em); }
&--userCircle { .m-buttonIcon(@fa-var-user-circle, 1em); }
&--notificationsOn { .m-buttonIcon(@fa-var-bell-o, 1em); }
&--notificationsOff { .m-buttonIcon(@fa-var-bell-slash-o, 1.15em); }
// for inline mod confirmations
&--merge { .m-buttonIcon(@fa-var-compress, .86em); }
&--move { .m-buttonIcon(@fa-var-share, 1em); }
&--copy { .m-buttonIcon(@fa-var-clone, 1em); }
&--approve, &--unapprove { .m-buttonIcon(@fa-var-shield, .72em); }
&--delete, &--undelete { .m-buttonIcon(@fa-var-trash-o, .79em); }
&--stick, &--unstick { .m-buttonIcon(@fa-var-thumb-tack, .65em); }
&--lock { .m-buttonIcon(@fa-var-lock, .65em); }
&--unlock { .m-buttonIcon(@fa-var-unlock, .93em); }
*/
&--add .button-text:before { .m-buttonIcon(@fa-var-plus-square, 0.79em); <xf:macro template="uix_icons.less" name="content" arg-icon="plus" />} // fa-plus-square
&--import .button-text:before { .m-buttonIcon(@fa-var-upload, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="import" /> } // fa-upload
&--export .button-text:before { .m-buttonIcon(@fa-var-download); <xf:macro template="uix_icons.less" name="content" arg-icon="export" /> } // fa-download
&--edit .button-text:before { .m-buttonIcon(@fa-var-pencil, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="edit" />} // fa-pencil
&--save .button-text:before { .m-buttonIcon(@fa-var-save, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="save" /> } // fa-floppy-o
&--delete .button-text:before { .m-buttonIcon(@fa-var-trash-o, 0.79em); <xf:macro template="uix_icons.less" name="content" arg-icon="delete" /> } // fa-trash-o
&--reply .button-text:before { .m-buttonIcon(@fa-var-mail-reply, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="reply" />} // fa-reply
&--quote .button-text:before { .m-buttonIcon(@fa-var-quote-left, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="quote" />} // fa-quote-left
&--purchase .button-text:before { .m-buttonIcon(@fa-var-shopping-basket, 1.15em); <xf:macro template="uix_icons.less" name="content" arg-icon="shopping-cart" />} // fa-shopping-cart
&--payment .button-text:before { .m-buttonIcon(@fa-var-credit-card, 1.08em); <xf:macro template="uix_icons.less" name="content" arg-icon="payment" />} // fa-credit-card
&--convert .button-text:before { .m-buttonIcon(@fa-var-flash, 0.5em); <xf:macro template="uix_icons.less" name="content" arg-icon="convert" />} // fa-bolt
&--search .button-text:before { .m-buttonIcon(@fa-var-search, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="search" />} // fa-search
&--sort .button-text:before { .m-buttonIcon(@fa-var-sort, 0.58em); <xf:macro template="uix_icons.less" name="content" arg-icon="sort" /> } // fa-sort
&--upload .button-text:before { .m-buttonIcon(@fa-var-upload, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="upload" />} // fa-upload
&--attach .button-text:before { .m-buttonIcon(@fa-var-paperclip, 0.79em); <xf:macro template="uix_icons.less" name="content" arg-icon="attachment" />} // fa-attachment
&--login .button-text:before { .m-buttonIcon(@fa-var-lock, 0.65em); <xf:macro template="uix_icons.less" name="content" arg-icon="login" />} // fa-lock
&--rate .button-text:before { .m-buttonIcon(@fa-var-star-half-empty, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="rate" />} // fa-star-half-o
&--config.button-text:before { .m-buttonIcon(@fa-var-cog, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="settings" />} // fa-cog
&--refresh .button-text:before { .m-buttonIcon(@fa-var-refresh, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="refresh" />}
&--translate .button-text:before { .m-buttonIcon(@fa-var-globe, .86em); <xf:macro template="uix_icons.less" name="content" arg-icon="translate" /> }
&--vote .button-text:before { .m-buttonIcon(@fa-var-check-circle-o, .86em); <xf:macro template="uix_icons.less" name="content" arg-icon="poll" />}
&--result .button-text:before { .m-buttonIcon(@fa-var-bar-chart-o, 1.15em); <xf:macro template="uix_icons.less" name="content" arg-icon="graph" />}
&--history.button-text:before { .m-buttonIcon(@fa-var-history, .86em); <xf:macro template="uix_icons.less" name="content" arg-icon="history" />}
&--cancel .button-text:before { .m-buttonIcon(@fa-var-ban, .86em); <xf:macro template="uix_icons.less" name="content" arg-icon="close" /> }
&--preview .button-text:before { .m-buttonIcon(@fa-var-eye, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="watched" />}
&--conversation .button-text:before { .m-buttonIcon(@fa-var-comments-o, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="messages" />}
&--write .button-text:before { .m-buttonIcon(@fa-var-pencil-square-o, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="edit" /> }
&--download .button-text:before { .m-buttonIcon(@fa-var-download, .93em); <xf:macro template="uix_icons.less" name="content" arg-icon="download" />}
&--bolt .button-text:before { .m-buttonIcon(@fa-var-bolt, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="comment-alert" /> }
&--list .button-text:before { .m-buttonIcon(@fa-var-list, .93em); <xf:macro template="uix_icons.less" name="content" arg-icon="list" />}
&--confirm .button-text:before { .m-buttonIcon(@fa-var-check, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="check" />}
&--disable .button-text:before { .m-buttonIcon(@fa-var-power-off); <xf:macro template="uix_icons.less" name="content" arg-icon="disable" />}
&--markRead .button-text:before { .m-buttonIcon(@fa-var-check-square-o, .93em); <xf:macro template="uix_icons.less" name="content" arg-icon="check" />}
&--notificationsOn .button-text:before { .m-buttonIcon(@fa-var-bell-o, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="alert" />}
&--notificationsOff .button-text:before { .m-buttonIcon(@fa-var-bell-slash-o, 1.15em); <xf:macro template="uix_icons.less" name="content" arg-icon="alert-off" />}
&--merge .button-text:before { .m-buttonIcon(@fa-var-compress, .86em); <xf:macro template="uix_icons.less" name="content" arg-icon="merge" />}
&--move .button-text:before { .m-buttonIcon(@fa-var-share, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="move" />}
&--copy .button-text:before { .m-buttonIcon(@fa-var-clone, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="clone" />}
&--approve, &--unapprove .button-text:before { .m-buttonIcon(@fa-var-shield, .72em); <xf:macro template="uix_icons.less" name="content" arg-icon="moderate" />}
&--delete .button-text:before, &--undelete .button-text:before { .m-buttonIcon(@fa-var-trash-o, .79em); <xf:macro template="uix_icons.less" name="content" arg-icon="delete" />}
&--stick .button-text:before, &--unstick .button-text:before { .m-buttonIcon(@fa-var-thumb-tack, .65em); <xf:macro template="uix_icons.less" name="content" arg-icon="sticky" />}
&--lock .button-text:before { .m-buttonIcon(@fa-var-lock, .65em); <xf:macro template="uix_icons.less" name="content" arg-icon="lock" />}
&--unlock .button-text:before { .m-buttonIcon(@fa-var-unlock, .93em); <xf:macro template="uix_icons.less" name="content" arg-icon="unlock" />}
/*
&--login:hover::before,
&--login:active::before
{
.m-faContent(@fa-var-unlock-alt, 0.65em);
<xf:macro template="uix_icons.less" name="content" arg-icon="unlock" />
}
*/
}
&.button--provider
{
> .button-text:before
{
.m-faBase();
font-size: 18px !important;
vertical-align: middle;
display: inline-block;
margin: -4px 5px -4px 0;
width: auto;
}
&--facebook
{
.m-buttonColorVariation(#3B5998, white);
> .button-text:before { .m-faContent(@fa-var-facebook, 0.58em); <xf:macro template="uix_icons.less" name="content" arg-icon="facebook" />}
}
&--twitter
{
.m-buttonColorVariation(#1DA1F3, white);
> .button-text:before { .m-faContent(@fa-var-twitter, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="twitter" />}
}
&--google
{
.m-buttonColorVariation(#4285F4, white);
> .button-text:before { .m-faContent(@fa-var-google, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="google-plus" />}
}
&--github
{
.m-buttonColorVariation(#666666, white);
> .button-text:before { .m-faContent(@fa-var-github, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="github" />}
}
&--linkedin
{
.m-buttonColorVariation(#0077b5, white);
> .button-text:before { .m-faContent(@fa-var-linkedin, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="linkedin" />}
}
&--microsoft
{
.m-buttonColorVariation(#00bcf2, white);
> .button-text:before { .m-faContent(@fa-var-windows, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="microsoft" />}
}
&--yahoo
{
.m-buttonColorVariation(#410093, white);
> .button-text:before { .m-faContent(@fa-var-yahoo, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="\fb2a" />}
}
}
// button-text and button-menu are always children of button--splitTrigger
// but are defined here for reasons of specificity, as these border colors
// are overwritten by .m-buttonBorderColorVariation()
> .button-text { border-right: @xf-borderSize solid transparent; }
> .button-menu { border-left: @xf-borderSize solid transparent; }
&.button--splitTrigger
{
.m-clearFix();
padding: 0;
font-size: 0;
button.button-text
{
background: transparent;
border: none;
border-right: @xf-borderSize solid transparent;
color: inherit;
}
> .button-text,
> .button-menu
{
.xf-buttonBase();
display: inline-block;
&:hover
{
&:after
{
opacity: 1;
}
}
}
> .button-text
{
.m-borderRightRadius(0);
}
> .button-menu
{
.m-borderLeftRadius(0);
padding-right: xf-default(@xf-buttonBase--padding-right, 0);// * (2/3);
padding-left: xf-default(@xf-buttonBase--padding-left, 0);// * (2/3);
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, .58em);
<xf:macro name="content" template="uix_icons.less" arg-icon="menu-down" />
unicode-bidi: isolate;
opacity: .5;
}
}
}
}
.buttonGroup
{
display: inline-block;
vertical-align: top;
.m-clearFix();
&.buttonGroup--aligned
{
vertical-align: middle;
}
> .button
{
float: left;
&:not(:first-child)
{
border-left: none;
}
&:not(:first-child):not(:last-child)
{
border-radius: 0;
}
&:first-child:not(:last-child)
{
.m-borderRightRadius(0);
}
&:last-child:not(:first-child)
{
.m-borderLeftRadius(0);
}
}
> .buttonGroup-buttonWrapper
{
float: left;
&:not(:first-child) > .button
{
border-left: none;
}
&:not(:first-child):not(:last-child) > .button
{
border-radius: 0;
}
&:first-child:not(:last-child) > .button
{
.m-borderRightRadius(0);
}
&:last-child:not(:first-child) > .button
{
.m-borderLeftRadius(0);
}
}
}
.toggleButton
{
> input
{
display: none;
}
> span
{
.xf-buttonDisabled();
.m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
}
&.toggleButton--small > span
{
font-size: @xf-fontSizeSmaller;
padding: @xf-paddingSmall;
}
> input:checked + span
{
.xf-buttonDefault();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
}
}
.u-scrollButtons
{
position: fixed;
bottom: 30px;
<xf:if is="property('uix_fab') == 'always'">
bottom: 100px;
<xf:elseif is="property('uix_fab') == 'mobile'" />
@media(max-width: {{ property('uix_fabVw') - 1 }}px ) {
bottom: 100px;
}
</xf:if>
<xf:if is="(property('uix_visitorTabsMobile') == 'tabbar') && ( property('uix_fab') != 'never' )">
@media (max-width: @xf-responsiveNarrow) {
bottom: {{ property('paddingLarge') + 23 + 100 }}px;
}
</xf:if>
right: (@xf-pageEdgeSpacer) / 2;
.has-hiddenscroll &
{
right: 20px;
}
z-index: @zIndex-9;
.m-transition(opacity, @xf-animationSpeed);
opacity: 0;
display: none;
&.is-transitioning
{
display: flex;
}
&.is-active
{
display: flex;
opacity: 1;
}
.button
{
font-size: 14px;
display: flex;
height: 24px;
line-height: 24px;
+ .button
{
margin-left: @xf-paddingMedium;
}
}
}
.block-outer-opposite .button {
.xf-uix_buttonSmall();
}]]></template>
<template title="core_categorylist.less" type="public" addon_id="XF" version_id="2000053" version_string="2.0.0 Release Candidate 3"><![CDATA[// ################################ CATEGORY LIST #######################
@_categoryListTogglerWidth: 1em;
@_categoryListTogglerPaddingH: (@xf-blockPaddingH / 2);
.categoryList
{
display: none;
.m-listPlain();
&.is-active
{
display: block;
}
}
.categoryList-item
{
padding: 0;
text-decoration: none;
font-size: @xf-fontSizeNormal;
&.categoryList-item--small
{
font-size: @xf-fontSizeSmall;
}
.categoryList
{
padding-left: @xf-paddingLarge;
}
}
.categoryList-itemDesc
{
display: block;
font-size: @xf-fontSizeSmaller;
font-weight: @xf-fontWeightNormal;
color: @xf-textColorMuted;
margin-top: -@xf-blockPaddingV;
.m-overflowEllipsis();
}
.categoryList-header
{
padding: @xf-blockPaddingV 0;
margin: 0;
color: @xf-textColorFeature;
text-decoration: none;
font-weight: @xf-fontWeightHeavy;
&.categoryList-header--muted
{
color: @xf-textColorMuted;
}
.m-clearFix();
.m-hiddenLinks();
}
.categoryList-itemRow
{
display: flex;
min-width: 0;
}
.categoryList-link
{
display: block;
flex-grow: 1;
padding: (@xf-blockPaddingV / 2) @xf-blockPaddingH;
text-decoration: none;
.m-overflowEllipsis();
&:hover
{
text-decoration: none;
}
&.is-selected
{
font-weight: @xf-fontWeightHeavy;
}
.categoryList-toggler + &,
.categoryList-togglerSpacer + &
{
padding-left: 0;
}
}
.categoryList-label
{
margin-left: auto;
align-self: center;
padding-right: @_categoryListTogglerPaddingH;
}
.categoryList-toggler
{
display: inline-block;
padding: @xf-blockPaddingV @_categoryListTogglerPaddingH;
text-decoration: none;
flex-grow: 0;
line-height: 1;
&:hover
{
text-decoration: none;
}
&:after
{
.m-faBase();
// font-size: 80%;
.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
<xf:macro name="content" template="uix_icons.less" arg-icon="chevron-down" />
}
&.is-active:after
{
.m-faContent(@fa-var-chevron-up, @_categoryListTogglerWidth);
<xf:macro name="content" template="uix_icons.less" arg-icon="chevron-up" />
}
}
.categoryList-togglerSpacer
{
display: inline-block;
visibility: hidden;
padding: (@xf-blockPaddingV / 2) (@xf-blockPaddingH / 2);
&:after
{
.m-faBase();
// font-size: 80%;
.m-faContent(@fa-var-chevron-down, @_categoryListTogglerWidth);
<xf:macro name="content" template="uix_icons.less" arg-icon="chevron-down" />
}
}]]></template>
<template title="core_contentrow.less" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[// ########################################### CONTENT ROWS ############################
@_contentRow-faderHeight: 150px;
@_contentRow-faderCoverHeight: (@_contentRow-faderHeight) / 2;
.contentRow
{
display: flex;
&.contentRow--alignMiddle
{
align-items: center;
}
.has-no-flexbox &
{
display: table;
width: 100%;
}
&.is-deleted
{
opacity: .7;
.contentRow-header,
.contentRow-title
{
text-decoration: line-through;
}
}
}
.contentRow-figure
{
vertical-align: top;
white-space: nowrap;
word-wrap: normal;
text-align: center;
.has-no-flexbox &
{
display: table-cell;
width: 1%;
}
img,
i.fa,
.avatar
{
vertical-align: bottom;
}
&.contentRow-figure--fixedSmall
{
width: 60px;
img,
i.fa,
.avatar
{
max-height: 60px;
}
}
&.contentRow-figure--fixedMedium
{
width: 100px;
img,
i.fa,
.avatar
{
max-height: 100px;
}
}
&.contentRow-figure--fixedLarge
{
width: 200px;
img,
i.fa,
.avatar
{
max-height: 200px;
}
}
&.contentRow-figure--text
{
font-size: @xf-fontSizeLargest;
}
}
.contentRow-figureIcon
{
text-align: center;
color: @xf-textColorFeature;
img,
i.fa
{
width: 64px;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
border-radius: @xf-borderRadiusMedium;
}
}
.contentRow-main
{
flex: 1;
min-width: 0;
vertical-align: top;
padding-left: @xf-paddingLarge;
.has-no-flexbox &
{
display: table-cell;
}
&:before
{
// because of line height, there appears to be extra space at the top of this
content: '';
display: block;
margin-top: -.18em;
}
&.contentRow-main--close
{
padding-left: @xf-paddingMedium;
}
&:first-child
{
padding-left: 0;
}
}
.contentRow-header
{
margin: 0;
padding: 0;
font-weight: @xf-fontWeightHeavy;
font-size: @xf-fontSizeLarge;
}
.contentRow-title
{
margin: 0;
padding: 0;
font-weight: @xf-fontWeightNormal;
font-size: @xf-fontSizeLarge;
}
.contentRow-snippet
{
font-size: @xf-fontSizeSmall;
font-style: italic;
margin: .25em 0;
}
.contentRow-muted
{
color: @xf-textColorMuted;
}
.contentRow-lesser
{
font-size: @xf-fontSizeSmall;
}
.contentRow-suffix
{
padding-left: @xf-paddingMedium;
white-space: nowrap;
word-wrap: normal;
.has-no-flexbox &
{
display: table-cell;
width: 1%;
}
}
.contentRow-faderContainer
{
position: relative;
overflow: hidden;
}
.contentRow-faderContent
{
max-height: 150px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
mask-image: linear-gradient(to bottom, #000 100px, transparent 150px);
}
.contentRow-fader
{
position: absolute;
top: (@_contentRow-faderHeight) + ((@xf-paddingMedium) * 2) - (@_contentRow-faderCoverHeight);
left: 0;
right: 0;
height: @_contentRow-faderCoverHeight;
@supports not (-webkit-mask-image) or not (mask-image) {
.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, transparent, 0%, 80%);
}
}
.contentRow-minor
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
time {color: @xf-textColorDimmed;}
&.contentRow-minor--hideLinks
{
.m-hiddenLinks();
a {text-decoration: underline;}
}
&.contentRow-minor--smaller
{
font-size: @xf-fontSizeSmaller;
}
&.contentRow-minor--singleLine
{
.m-overflowEllipsis();
}
}
.contentRow-spaced
{
margin: .5em 0;
&:last-child
{
margin-bottom: 0;
}
}
.contentRow-extra
{
float: right;
padding-left: @xf-paddingMedium;
font-size: @xf-fontSizeSmallest;
&.contentRow-extra--small
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
}
&.contentRow-extra--normal
{
font-size: @xf-fontSizeNormal;
color: @xf-textColorMuted;
}
&.contentRow-extra--large
{
font-size: @xf-fontSizeLarge;
color: @xf-textColorMuted;
}
&.contentRow-extra--larger
{
font-size: @xf-fontSizeLarger;
color: @xf-textColorMuted;
}
&.contentRow-extra--largest
{
font-size: @xf-fontSizeLargest;
color: @xf-textColorMuted;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.contentRow-figure .avatar--s
{
.m-avatarSize(@avatar-xs);
}
.contentRow--hideFigureNarrow
{
.contentRow-figure
{
display: none;
}
.contentRow-main
{
padding-left: 0;
}
}
}]]></template>
<template title="core_datalist.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ################################# DATA LISTS ###################
.dataList
{
max-width: 100%;
&.dataList--separated
{
border-top: @xf-borderSize solid @xf-borderColorLight;
border-bottom: @xf-borderSize solid @xf-borderColorLight;
}
&.dataList--separatedTop
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
&.dataList--separatedBottom
{
border-bottom: @xf-borderSize solid @xf-borderColorLight;
}
&.dataList--contained
{
overflow-x: auto;
max-height: 85vh;
}
@media (max-width: @xf-responsiveMedium)
{
overflow-x: auto;
}
}
.dataList-table
{
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.dataList-rowGroup
{
&.is-hidden
{
display: none;
}
}
.m-adjustDataListCellPadding(@paddingV; @paddingH)
{
padding: @paddingV @paddingH;
&.dataList-cell--action,
&.dataList-cell--link
{
padding: 0;
a,
label,
.dataList-blockLink
{
padding: @paddingV @paddingH;
}
}
}
.dataList-row
{
&:hover:not(.dataList-row--noHover):not(.dataList-row--header)
{
background: fade(@xf-contentHighlightBg, 50%);
}
&.dataList-row--header
{
.dataList-cell
{
.xf-dataListHeader();
// .m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);
.m-textColoredLinks();
text-align: left;
&.dataList-cell--min
{
text-align: center;
}
}
}
&.dataList-row--subSection
{
.dataList-cell
{
.xf-dataListSection();
.m-adjustDataListCellPadding(@xf-dataListPaddingV/2, @xf-dataListPaddingH);
a { color: inherit; }
}
&:hover:not(.dataList-row--noHover) .dataList-cell
{
.xf-dataListSection(background);
}
}
&.dataList-row--note
{
.dataList-cell
{
text-align: center;
font-style: italic;
}
}
&.dataList-row--deleted
{
.dataList-cell
{
opacity: .5;
}
}
&.dataList-row--highlighted
{
font-weight: @xf-fontWeightHeavy;
}
&.dataList-row--custom
{
> .dataList-cell:first-child
{
border-left: @xf-borderSizeFeature solid red;
}
.dataList-cell--link a
{
color: red;
}
}
&.dataList-row--parentCustom
{
> .dataList-cell:first-child
{
border-left: @xf-borderSizeFeature solid orange;
}
.dataList-cell--link a
{
color: orange;
}
}
&.dataList-row--protected
{
> .dataList-cell:first-child
{
border-left: @xf-borderSizeFeature solid @xf-borderColorFeature;
}
}
&.is-hidden
{
display: none;
}
&.dataList-row--disabled
{
.dataList-cell--link a
{
color: @xf-textColorMuted;
.m-transition();
}
}
tbody:last-child &:last-child .dataList-cell
{
border-bottom: none;
}
}
.dataList-cell
{
vertical-align: middle;
padding: @xf-dataListPaddingV @xf-dataListPaddingH;
border-bottom: @xf-borderSize solid @xf-borderColorFaint;
&.dataList-cell--main
{
min-width: 180px;
}
&.dataList-cell--link,
&.dataList-cell--action
{
padding: 0;
}
&.dataList-cell--alt,
&.dataList-cell--action
{
background: @xf-contentAltBg;
}
&.dataList-cell--separated
{
border-left: @xf-borderSize solid @xf-borderColorFaint;
}
&.dataList-cell--min,
&.dataList-cell--action
{
width: 1%;
white-space: nowrap;
word-wrap: normal;
text-align: center;
}
&.dataList-cell--action
{
font-size: @xf-fontSizeSmaller;
}
&.dataList-cell--action,
&.dataList-cell--link
{
cursor: pointer;
text-decoration: none;
&.dataList-cell--alt:hover,
&.dataList-cell--action:hover
{
background: @xf-contentHighlightBg;
}
a,
label,
.dataList-blockLink
{
padding: @xf-dataListPaddingV @xf-dataListPaddingH;
display: block;
height: 100%;
text-decoration: none;
cursor: pointer;
}
&.dataList-cell--iconic
{
a,
label.iconic,
.dataList-blockLink
{
padding: ((@xf-dataListPaddingV) / 2) @xf-dataListPaddingH;
}
}
input
{
cursor: pointer;
}
}
&.dataList-cell--highlighted
{
background: @xf-contentHighlightBg;
}
&.dataList-cell--image
{
padding: 0;
a
{
padding: 0;
}
img,
.dataList-imagePlaceholder
{
display: block;
margin: auto;
font-size: 30px;
}
}
&.dataList-cell--imageSmall
{
img,
.dataList-imagePlaceholder
{
height: 41px;
max-width: 41px;
line-height: 41px;
}
.avatar
{
.m-avatarSize(41px);
border-radius: 2px;
}
}
&.dataList-cell--imageSmallWide
{
img,
.dataList-imagePlaceholder
{
height: 41px;
max-width: 82px;
line-height: 41px;
}
.avatar
{
.m-avatarSize(41px);
border-radius: 0;
}
}
&.dataList-cell--imageMedium
{
img,
.dataList-imagePlaceholder
{
height: 54px;
max-width: 54px;
line-height: 54px;
}
.avatar
{
.m-avatarSize(54px);
border-radius: 0;
}
}
&.dataList-cell--imageMediumWide
{
img,
.dataList-imagePlaceholder
{
height: 54px;
max-width: 108px;
line-height: 54px;
}
.avatar
{
.m-avatarSize(54px);
border-radius: 0;
}
}
&.dataList-cell--responsiveMenuTrigger,
&.dataList-cell--fauxResponsiveMenuTrigger
{
display: none;
}
&.dataList-cell--breakWord
{
word-break: break-word;
}
&.dataList-cell--hint,
.dataList-row--subSection &.dataList-cell--hint
{
text-align: right;
font-size: @xf-fontSizeSmaller;
color: @xf-textColorMuted;
}
// create ten depth classes for the appearance of nested items
.depthLoop(@i) when (@i <= 10)
{
&.dataList-cell--d@{i} { text-indent: (@i - 1) * 25px; }
.depthLoop(@i + 1);
}
.depthLoop(1);
.is-match
{
text-decoration: underline;
color: red;
}
@media (max-width: @xf-responsiveMedium)
{
&.dataList-cell--responsiveMenuItem,
&.dataList-cell--fauxResponsiveMenuItem
{
display: none !important;
}
&.dataList-cell--responsiveMenuTrigger,
&.dataList-cell--fauxResponsiveMenuTrigger
{
display: table-cell;
}
}
}
.dataList-imagePlaceholder
{
&:after
{
content: '?';
}
}
.dataList-mainRow,
.dataList-textRow,
.dataList-subRow
{
width: 0;
min-width: 100%;
line-height: 1.4;
max-height: 1.4em;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
&:empty { display: none; }
}
.dataList-mainRow
{
font-weight: @xf-fontWeightHeavy;
.dataList-row--subSection &
{
font-weight: @xf-fontWeightNormal;
}
}
.dataList-secondRow
{
display: block;
font-size: @xf-fontSizeSmallest;
}
.dataList-hint,
.dataList-subRow
{
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmaller;
font-weight: @xf-fontWeightNormal;
}
.dataList-hint
{
display: inline;
}
.dataList-delete
{
&:after
{
.m-faBase();
.m-faContent(@fa-var-trash-o, .79em);
<xf:macro template="uix_icons.less" name="content" arg-icon="close" />
}
}
.dataList-row--footer .dataList-cell
{
// note that this is applied as a cell style which has higher priority than the row styles normally applied
padding: @xf-dataListPaddingV/2 @xf-dataListPaddingH;
border-bottom: none;
.xf-dataListFooter();
}
.dataList--responsive
{
.dataList-table,
tbody,
thead,
tfoot
{
display: block;
}
.dataList-row
{
display: block;
&.dataList-row--headerResponsive
{
display: none;
}
}
.dataList-cell
{
display: block;
width: auto;
&[data-cell-label]
{
display: flex;
align-items: center;
text-align: right;
> *
{
min-width: 0;
}
&:before
{
content: attr(data-cell-label) ":";
padding-right: @xf-dataListPaddingH;
margin-right: auto;
word-break: normal;
}
> .input:first-child:last-child
{
display: inline;
}
a
{
// commonly a URL, but needed to prevent a potential overflow
min-width: 0;
}
}
&.dataList-cell--link,
&.dataList-cell--action
{
&[data-cell-label]:before
{
padding: @xf-dataListPaddingV @xf-dataListPaddingH;
}
}
}
.dataList-row:not(.dataList-row--header):not(.dataList-row--subSection)
{
border-bottom: @xf-borderSize solid @xf-borderColorLight;
.dataList-cell
{
border-bottom: none;
}
}
tbody:last-child .dataList-row:not(.dataList-row--header):not(.dataList-row--subSection):last-child
{
border-bottom: none;
}
.dataList-mainRow,
.dataList-textRow,
.dataList-subRow
{
width: auto;
min-width: 0;
}
}]]></template>
<template title="core_fawidths.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[// FONT AWESOME WIDTHS
// these are icons that we reference directly using .fa-{icon} classes in our CSS
// so these definitions allow us to specify min-widths to avoid flicker / stutter
html {
.fa-angle-down:before { .m-faContent(@fa-var-angle-down, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="chevron-down" />;}
.fa-angle-up:before { .m-faContent(@fa-var-angle-up, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="chevron-up" /> ;}
.fa-arrow-up:before { .m-faContent(@fa-var-arrow-up, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="arrow-up" />;}
.fa-arrow-down:before { .m-faContent(@fa-var-arrow-down, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="arrow-down" />;}
.fa-bar-chart:before { .m-faContent(@fa-var-bar-chart, 1.15em); <xf:macro template="uix_icons.less" name="content" arg-icon="poll" />;}
.fa-bars:before { .m-faContent(@fa-var-bars, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="menu" />;}
.fa-caret-left:before { .m-faContent(@fa-var-caret-left, 0.36em); <xf:macro template="uix_icons.less" name="content" arg-icon="menu-left" />;}
.fa-caret-right:before { .m-faContent(@fa-var-caret-right, 0.36em); <xf:macro template="uix_icons.less" name="content" arg-icon="menu-right" />;}
.fa-clock-o:before { .m-faContent(@fa-var-clock-o, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="clock" />}
.fa-cog:before { .m-faContent(@fa-var-cog, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="settings" />;}
.fa-cogs:before { .m-faContent(@fa-var-cogs, 1.08em); <xf:macro template="uix_icons.less" name="content" arg-icon="settings" />;}
.fa-comments:before { .m-faContent(@fa-var-comments, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="comment-multiple" />;}
.fa-file-o:before { .m-faContent(@fa-var-file-o, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="file" />;}
.fa-globe:before { .m-faContent(@fa-var-globe, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="earth" />;}
.fa-home:before { .m-faContent(@fa-var-home, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="home" />;}
.fa-key:before { .m-faContent(@fa-var-key, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="login" />;}
.fa-paint-brush:before { .m-faContent(@fa-var-paint-brush, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="brush" />;}
.fa-pencil:before { .m-faContent(@fa-var-pencil, 0.86em); <xf:macro template="uix_icons.less" name="content" arg-icon="edit" /> ;}
.fa-rss:before { .m-faContent(@fa-var-rss, 0.79em); <xf:macro template="uix_icons.less" name="content" arg-icon="rss" />;}
.fa-search:before { .m-faContent(@fa-var-search, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="search" />;}
.fa-tags:before { .m-faContent(@fa-var-tags, 1.08em); <xf:macro template="uix_icons.less" name="content" arg-icon="tag-multiple" />;}
.fa-th:before { .m-faContent(@fa-var-th, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="tag-multiple" />;}
.fa-thumbs-up:before { .m-faContent(@fa-var-thumbs-up, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="like" />;}
.fa-user:before { .m-faContent(@fa-var-user, 0.72em); <xf:macro template="uix_icons.less" name="content" arg-icon="user" />;}
.fa-warning:before { .m-faContent(@fa-var-warning, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="warning" />;}
}]]></template>
<template title="core_filter.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// ##################### FILTERING #####################
.filterBlock
{
padding: @xf-paddingMedium;
font-size: @xf-fontSizeSmaller;
float: right;
.xf-contentBase();
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
.m-clearFix();
.filterBlock-input
{
width: 150px;
display: inline;
font-size: @xf-fontSizeSmaller;
&.filterBlock-input--small
{
width: 100px;
}
}
select.filterBlock-input
{
width: auto;
}
}
.quickFilter
{
position: relative;
.input
{
width: 180px;
font-size: @xf-fontSizeSmaller;
}
label
{
font-size: @xf-fontSizeSmaller;
}
input[type=checkbox]
{
.m-checkboxAligner();
}
.js-filterClear
{
color: @controlColor;
&:hover
{
color: @controlColor--hover;
}
&:before
{
.m-faBase();
.m-faContent(@fa-var-remove);
}
}
}
.filterBar
{
.m-clearFix();
}
.filterBar-filters
{
.m-listPlain();
display: inline;
> li
{
display: inline;
}
}
.filterBar-filterToggle
{
display: inline-block;
text-decoration: none;
color: inherit;
padding: 1px 8px;
border-radius: @xf-borderRadiusMedium;
.m-transition();
&:after
{
.m-faBase();
font-size: 80%;
.m-faContent(" @{fa-var-close}");
<xf:macro template="uix_icons.less" name="content" arg-icon="close" />
opacity: .5;
.m-transition(opacity);
}
&:hover
{
text-decoration: none;
&:after
{
opacity: 1;
}
}
}
.filterBar-filterToggle-label
{
opacity: .75;
}
.filterBar-menuTrigger
{
float: right;
white-space: nowrap;
border-radius: @xf-borderRadiusMedium;
text-decoration: none;
padding: 1px 5px;
.xf-uix_buttonSmall();
&:after
{
.m-faBase();
.m-faContent(" @{fa-var-caret-down}");
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-down" />
}
}
@media (max-width: @xf-responsiveMedium)
{
.filterBar-filterToggle-label
{
display: none;
}
}]]></template>
<template title="core_formrow.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ########################################### FORM ROWS #################################
@_form-labelShiftInput: @xf-input--padding + @xf-borderSize; // technically input border-top-width + padding-top
@_form-labelButtonInput: 5px; // technically button border-top-width + padding-top, adjusted for text size differences
@_form-elementSpacer: @xf-paddingMedium;
.m-formRowBlockStyle()
{
display: block;
> dt,
> dd
{
width: auto;
display: block;
padding: ((@xf-formRowPaddingV) / 2) @xf-formRowPaddingHOuter @xf-formRowPaddingV;
}
> dt
{
background: none;
border: none;
text-align: left;
padding-bottom: 0;
.formRow-hint
{
display: inline;
}
}
&.formRow--input,
&.formRow--button
{
> dt
{
padding-top: ((@xf-formRowPaddingV) / 2);
}
}
> dd
{
padding-top: ((@xf-formRowPaddingV) / 2);
}
> dd > .inputChoices:first-child
{
padding-top: 0;
}
}
.formRow--button li:not(:last-child) {margin-right: 8px;}
.formRow
{
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
position: relative;
> dt,
> dd
{
display: table-cell;
vertical-align: top;
margin: 0;
}
> dt
{
border-right: @xf-borderSize solid transparent;
.xf-formLabel();
width: @xf-formLabelWidth;
padding: @xf-formRowPaddingV @xf-formRowPaddingHInner @xf-formRowPaddingV @xf-formRowPaddingHOuter;
}
> dd
{
width: (100% - @xf-formLabelWidth);
padding: @xf-formRowPaddingV @xf-formRowPaddingHOuter @xf-formRowPaddingV @xf-formRowPaddingHInner;
}
&.formRow--input > dt
{
padding-top: (@xf-formRowPaddingV + @_form-labelShiftInput);
}
&.formRow--button > dt
{
padding-top: (@xf-formRowPaddingV + @_form-labelButtonInput);
}
&.formRow--inputLabelPair > dt
{
padding-top: (@xf-formRowPaddingV * 2);
}
&.formRow--valueToEdge > dd
{
padding-left: 0;
padding-right: 0;
}
&.formRow--limited
{
display: none;
}
&.formRow--fullWidth
{
.m-formRowBlockStyle();
& + .formRow,
.formRow + &,
& + * > .formRow:first-of-type, // allows formRows to be wrapped
.formRow + * > &:first-of-type // in a single-depth grouping element
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
&.formRow--noLabel
{
> dt
{
display: none;
}
> dd
{
padding-top: @xf-formRowPaddingV;
}
}
& + .formRow--mergePrev,
& + * > .formRow:first-of-type.formRow--mergePrev,
&.formRow--mergeNext + &,
&.formRow--mergeNext + * > &:first-of-type
{
border-top: 0;
> dt
{
padding-top: 0;
}
}
&.formRow--noGutter
{
> dt,
> dd
{
padding-left: 0;
padding-right: 0;
}
}
&.formRow--noPadding
{
> dt,
> dd
{
padding: 0;
}
}
&.formRow--noPadding + &,
&.formRow--noPadding + * > &:first-of-type
{
> dt
{
padding-top: @xf-formRowPaddingV;
}
}
}
.formRow-label
{
.m-appendColon();
}
&.formRow--noColon .formRow-label:after
{
content: "";
}
.formRow-explain
{
margin: @_form-elementSpacer 0 0;
.m-formElementExplain();
}
&.formRow--explainOffset .formRow-explain
{
margin-top: (@_form-elementSpacer) * 2;
}
.formRow-hint
{
display: block;
font-style: normal;
.xf-formHint();
.m-textColoredLinks();
.formRow-hint-featured
{
display: block;
//font-weight: @xf-fontWeightHeavy;
color: @xf-textColorFeature;
}
}
+ .formInfoRow
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
@media (max-width: @xf-formResponsive)
{
.m-formRowBlockStyle();
}
.menu & {.m-formRowBlockStyle();}
}
.formButtonGroup
{
display: flex;
flex-wrap: wrap;
margin-top: @xf-paddingLarge;
margin-bottom: -5px;
.has-no-flexbox
{
.m-clearFix();
}
}
.formButtonGroup-primary
{
order: 2;
margin-left: auto;
margin-bottom: 5px;
.has-no-flexbox
{
float: right;
}
}
.formButtonGroup-extra
{
order: 1;
margin-bottom: 5px;
.has-no-flexbox
{
float: left;
}
}
.formInfoRow
{
padding: @xf-formRowPaddingV @xf-formRowPaddingHOuter;
&.formInfoRow--close
{
padding-top: ((@xf-formRowPaddingV) / 2);
padding-bottom: ((@xf-formRowPaddingV) / 2);
}
&.formInfoRow--noPadding
{
padding: 0;
}
&.formInfoRow--confirm
{
text-align: center;
strong
{
display: block;
margin: .5em 0;
font-size: @xf-fontSizeLarger;
&:last-child
{
margin-bottom: 0;
}
}
}
+ .formRow
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
&.u-hidden:not(.is-active)
{
+ .formRow
{
border-top: none;
}
}
> .blockMessage
{
&:first-child { margin-top: 0; }
&:last-child { margin-bottom: 0; }
}
}
.formSubmitRow
{
position: relative;
> dt
{
display: none;
}
> dd
{
width: 100%;
padding: 0;
}
&.formSubmitRow--sticky.is-sticky
{
.formSubmitRow-main
{
position: fixed;
bottom: 0;
z-index: @zIndex-2;
}
.formSubmitRow-bar
{
box-shadow: 0px -5px 15px fade(black, 15%);
}
}
&.formSubmitRow--simple
{
> dt
{
visibility: hidden;
}
.formSubmitRow-controls
{
text-align: center;
padding-left: 0;
margin-left: 0;
}
}
.block-body--collapsible:not(.is-active) + &:not(.formSubmitRow--simple)
{
> dt
{
visibility: hidden;
}
}
}
.formSubmitRow-main
{
position: relative;
}
.formSubmitRow-bar
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.xf-formSubmitRow();
}
.formSubmitRow-controls
{
position: relative;
padding-left: @xf-formLabelWidth;
padding-top: @xf-paddingMedium;
padding-bottom: @xf-paddingMedium;
margin-left: @xf-formRowPaddingHInner;
margin-right: @xf-formRowPaddingHOuter;
> .button:first-child:last-child
{
min-width: 120px;
}
}
@media (max-width: @xf-formResponsive)
{
.formSubmitRow-controls
{
padding-left: 0;
text-align: center;
}
}
.formRowSep
{
margin: -1px @xf-formRowPaddingHOuter 0;
border: none;
border-top: @xf-borderSize solid @xf-borderColor;
+ .formRowSep,
&:last-child
{
display: none;
}
}
/* -- adds styling to fix forms in modals/dropdowns, such as login -- Added by Ian */
.menu .blocks .block:last-child {margin-bottom: (@xf-elementSpacer / 2);}
.menu.menu--structural {
.formSubmitRow {
dt, dd {padding: 0;}
.formSubmitRow-bar {display: none;}
.formSubmitRow-controls {
padding: 0;
display: flex;
.button {flex-grow: 1;}
}
}
dl.formRow {
padding: @xf-formRowPaddingV @xf-formRowPaddingH;
padding-top: 0;
&:first-child {padding-top: @xf-formRowPaddingV;}
dd, dt {padding: 0;}
}
.uix_login__registerLink {padding: 0;}
.formRow-label {padding-bottom: 5px; display: inline-block;}
.blocks-textJoiner {margin: 0;}
.menu-footer {
border-bottom-left-radius: @xf-menuBorderRadius;
border-bottom-right-radius: @xf-menuBorderRadius;
}
}]]></template>
<template title="core_hscroller.less" type="public" addon_id="XF" version_id="2000270" version_string="2.0.2"><![CDATA[// ##################################### HORIZONTAL SCROLLER ###################
.hScroller
{
overflow-y: hidden;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-overflow-scrolling: touch;
&.hScroller--scrollHidden
{
.hScroller-action
{
opacity: 0;
.m-transition();
}
.has-no-touchevents &:hover .hScroller-action
{
opacity: 1;
}
}
}
.hScroller-scroll
{
display: block;
white-space: nowrap;
word-wrap: normal;
overflow-x: hidden;
&.is-calculated
{
overflow-x: scroll;
padding-bottom: 30px;
margin-bottom: -30px;
// pushes the scrollbar out of view
}
}
.hScroller-action
{
position: absolute;
top: 0;
bottom: 0;
width: 40px;
padding: 0 5px;
display: none;
cursor: pointer;
&.is-active
{
display: block;
display: flex;
align-items: center;
}
&:after
{
.m-faBase();
font-size: 120%;
}
&.hScroller-action--start
{
left: 0;
justify-content: flex-start;
text-align: left;
&:after
{
.m-faContent(@fa-var-chevron-left, 0.72em, ltr);
.m-faContent(@fa-var-chevron-right, 0.72em, rtl);
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-left" />
}
}
&.hScroller-action--end
{
right: 0;
justify-content: flex-end;
text-align: right;
&:after
{
.m-faContent(@fa-var-chevron-right, 0.72em, ltr);
.m-faContent(@fa-var-chevron-left, 0.72em, rtl);
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-right" />
}
}
}
.scrollMeasure
{
position: absolute;
top: -1000px;
width: 100px;
height: 100px;
overflow: scroll;
visibility: hidden;
}]]></template>
<template title="core_input.less" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[// ###################################### INPUTS ##########################
@_input-numberWidth: 150px;
@_input-numberNarrowWidth: 90px;
@_input-textColor: xf-default(@xf-input--color, @xf-textColor);
@_input-elementSpacer: @xf-paddingMedium;
@_input-checkBoxSpacer: 1.5em;
.m-inputReadOnly()
{
color: mix(xf-default(@xf-input--color, @xf-textColor), xf-default(@xf-inputDisabled--color, @xf-textColorMuted));
background: mix(xf-default(@xf-input--background-color, @xf-contentBg), xf-default(@xf-inputDisabled--background-color, @xf-paletteNeutral1));
}
.input
{
.xf-input();
display: block;
width: 100%;
line-height: @xf-lineHeightDefault;
text-align: left; // this will be flipped in RTL
word-wrap: break-word;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
.m-transition();
.m-placeholder({color: fade(@_input-textColor, 40%); });
&:focus,
&.is-focused
{
outline: 0;
.xf-inputFocus();
.m-placeholder({color: fade(@_input-textColor, 50%); });
}
&[readonly],
&.is-readonly
{
.m-inputReadOnly();
}
&[disabled]
{
.xf-inputDisabled();
}
&[type=number],
&[type=tel],
&.input--number
{
text-align: right;
max-width: @_input-numberWidth;
&.input--numberNarrow
{
width: @_input-numberNarrowWidth;
}
}
&.input--date
{
max-width: @_input-numberWidth;
}
textarea&
{
min-height: 0;
max-height: 400px;
max-height: 75vh;
resize: vertical;
padding-top: 8px;
padding-bottom: 8px;
&.input--fitHeight
{
resize: none;
&.input--fitHeight--short
{
max-height: 200px;
max-height: 35vh;
}
}
&.input--code
{
overflow-x: auto;
-ltr-rtl-text-align: left; // force blocks of code back to left align
}
&.input--maxHeight-300px
{
max-height: 300px;
}
.has-js &[rows="1"][data-single-line]
{
overflow: hidden;
resize: none;
}
.has-js &[rows="1"][data-single-line]
{
overflow: hidden;
resize: none;
}
}
// this makes select inputs consistent across all browsers and OSes
select&,
&.input--select
{
padding-right: 1em !important;
.m-selectGadgetColor(@_input-textColor);
background-size: 1em !important;
background-repeat: no-repeat !important;
-ltr-background-position: 100% !important;
white-space: nowrap;
word-wrap: normal;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
overflow-x: hidden; // iOS seems to require this to prevent overflow with long options...
overflow-y: auto; // ...and Firefox seems to require this to prevent the above from breaking vertical scroll...
&[disabled]
{
.m-selectGadgetColor(xf-default(@xf-inputDisabled--color, @xf-textColor));
}
&[size],
&[multiple]
{
background-image: none !important;
padding-right: xf-default(@xf-input--padding, 5px) !important;
height: auto;
}
}
&.input--autoSize
{
width: auto;
}
&.input--inline
{
display: inline;
width: auto;
}
&.input--code
{
font-family: @xf-fontFamilyCode;
direction: ltr;
//white-space: nowrap;
word-wrap: normal;
}
&.input--title
{
font-size: @xf-fontSizeLargest;
}
&.input--avatarSizeS
{
min-height: @avatar-s;
}
.m-inputZoomFix();
}
@controlColor: xf-default(@xf-buttonPrimary--background-color, @xf-paletteColor4);
@controlColor--hover: xf-intensify(@controlColor, 25%);
label.iconic
{
&:hover > input + i:before
{
color: @controlColor--hover;
}
> input
{
.m-visuallyHidden();
width: auto;
height: auto;
opacity: 0;
+ i:before
{
.m-faBase();
font-size: 18px !important;
height: .9em; // this prevents some zoom related issues
color: @controlColor;
vertical-align: -.1em;
visibility: visible;
-ltr-rtl-text-align: left;
}
&:focus + i:before
{
outline: Highlight solid 2px;
-moz-outline-radius: 5px;
@media (-webkit-min-device-pixel-ratio: 0)
{
outline: -webkit-focus-ring-color auto 5px;
}
}
&[readonly] + i:before,
&[disabled]:not(.js-disablerExemption) + i:before
{
color: @xf-textColorMuted;
}
&[type="checkbox"]
{
+ i:before { .m-faContent(@fa-var-square-o, .93em);
<xf:macro name="content" template="uix_icons.less" arg-icon="checkbox" />
}
&:checked + i:before { .m-faContent(@fa-var-check-square-o, .93em);
<xf:macro name="content" template="uix_icons.less" arg-icon="checkbox-checked" />
}
}
&[type="radio"]
{
+ i:before { .m-faContent(@fa-var-circle-o, .86em);
<xf:macro name="content" template="uix_icons.less" arg-icon="radio" />
}
&:checked + i:before { .m-faContent(@fa-var-check-circle, .86em);
<xf:macro name="content" template="uix_icons.less" arg-icon="radio-selected" />
}
}
}
&.iconic--toggle > input
{
+ i:before
{
color: fade(@controlColor, 50%);
}
&:checked + i:before
{
color: @controlColor;
}
&:hover + i:before
{
color: @controlColor--hover;
}
&[type="radio"] + i
{
width: .86em;
}
&[type="checkbox"]
{
+ i:before
{
.m-faContent(@fa-var-toggle-off, 1.15em);
<xf:macro template="uix_icons.less" name="content" arg-icon="toggle-off" />
}
&:checked + i:before
{
.m-faContent(@fa-var-toggle-on, 1.15em);
<xf:macro template="uix_icons.less" name="content" arg-icon="toggle-on" />
}
}
}
&:not(.inputGroup-text) > input + i
{
display: inline-block;
text-align: left;
}
&.iconic--labelled > input + i
{
width: @_input-checkBoxSpacer;
}
.inputChoices &
{
> input,
> input + i
{
position: absolute;
left: 0;
}
&:not(.iconic--labelled)
{
> input,
> input + i
{
top: .4em; // vertical center aligning for the control
}
}
}
.formRow-hint &,
&.cssCustomHighlight,
&.iconic--inherit-color
{
> input + i:before
{
color: inherit;
}
}
}
.dataList-cell.dataList-cell--iconic
{
> label.iconic,
> a.dataList-delete
{
color: @controlColor;
&.dataList-delete,
> i
{
font-size: 20px;
}
> input + i:before,
&:after
{
}
&:not(.iconic--toggle) > input[type="checkbox"] + i:before
{
font-size: 16px;
}
&:hover
{
color: @controlColor--hover;
}
}
.fa
{
font-size: 16px;
}
}
.u-inputSpacer
{
margin-top: @_input-elementSpacer;
}
.inputGroup
{
display: flex;
align-items: stretch;
max-width: 100%;
.has-no-flexbox &
{
display: table;
width: 100%;
}
.inputGroup-text
{
flex-grow: 0;
display: flex;
align-items: center;
.has-no-flexbox &
{
display: table-cell;
width: 1%;
}
white-space: nowrap;
vertical-align: middle;
padding: 0 @xf-paddingMedium;
&:first-child { padding-left: 0; }
&:last-child { padding-right: 0; }
}
.inputGroup-splitter
{
display: inline-block;
width: 5px;
flex-shrink: 0;
.has-no-flexbox &
{
display: table-cell;
}
}
.input
{
flex-shrink: 1;
min-width: 0; // firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1021913
.has-no-flexbox &
{
display: table-cell;
width: 100%;
}
}
.button
{
flex-shrink: 0;
.has-no-flexbox &
{
display: table-cell;
}
}
.inputGroup-label
{
flex-shrink: 1;
width: 100%;
padding: 0 0 @xf-paddingMedium;
.m-appendColon();
.has-no-flexbox &
{
display: table-cell;
width: 100%;
}
}
@media (max-width: @xf-formResponsive)
{
.input:not(.input--autoSize):not(.input--numberNarrow)
{
width: 100%;
min-width: 100px;
}
}
.input:not(.input--autoSize):not(.input--numberNarrow)
{
.menu & {width: 100%;}
}
&.inputGroup--inline
{
display: inline-flex;
.has-no-flexbox &
{
display: inline-table;
width: auto;
}
}
&.inputGroup--auto
{
.input
{
width: auto;
}
}
&.inputGroup--joined
{
.input
{
border-radius: 0;
&:first-child
{
border-top-left-radius: @xf-borderRadiusMedium;
border-bottom-left-radius: @xf-borderRadiusMedium;
border-right: none;
}
&:last-child
{
border-top-right-radius: @xf-borderRadiusMedium;
border-bottom-right-radius: @xf-borderRadiusMedium;
border-left: none;
}
}
.inputGroup-text
{
.xf-input(border);
.xf-inputFocus(background);
text-align: center;
padding: @xf-paddingSmall @xf-paddingMedium;
&.inputGroup-text--disabled,
&.is-disabled,
&[disabled]
{
.xf-inputDisabled();
a { text-decoration: none; }
}
&:first-child
{
border-right: 0;
border-top-left-radius: @xf-borderRadiusMedium;
border-bottom-left-radius: @xf-borderRadiusMedium;
}
&:last-child
{
border-left: 0;
border-top-right-radius: @xf-borderRadiusMedium;
border-bottom-right-radius: @xf-borderRadiusMedium;
}
}
.input + .inputGroup-text,
.input + .input,
.inputGroup-text + .input
{
border-left: @xf-borderSize solid @xf-borderColorLight;
}
.inputGroup-text + .inputGroup-text,
.inputGroup-text + select.input
{
border-left: 0;
}
}
}
.inputGroup-container > .inputGroup
{
margin-top: @xf-paddingMedium;
&:first-child
{
margin-top: 0;
}
}
.inputNumber
{
.input--number
{
-moz-appearance: textfield !important;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button
{
margin: 0 !important;
-webkit-appearance: none !important;
}
@media (max-width: @xf-formResponsive)
{
width: 120px;
}
.menu & {width: 120px;}
}
}
.inputNumber-button
{
position: relative;
.m-faBase();
color: @controlColor;
font-size: 1.0em;
font-style: normal !important;
line-height: .75em;
vertical-align: -15%;
width: 45px;
justify-content: center;
text-align: center;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&.inputNumber-button--smaller
{
vertical-align: 0;
width: 35px;
}
.menu & {
vertical-align: 0;
width: 25px;
}
&--up::before
{
.m-faContent(@fa-var-plus, .79em);
<xf:macro template="uix_icons.less" name="content" arg-icon="plus" />
}
&--down::before
{
.m-faContent(@fa-var-minus, .79em);
<xf:macro template="uix_icons.less" name="content" arg-icon="minus" />
}
.inputGroup.inputGroup--joined &
{
&:hover,
&:active,
&:focus
{
background-color: saturate(xf-intensify(@xf-paletteColor1, 4%), 12%);
color: @controlColor--hover;
}
}
.input.input--number[readonly] ~ &
{
.m-inputReadOnly();
}
.input.input--number[disabled] ~ &
{
cursor: default;
.xf-inputDisabled();
}
}
.inputDate
{
.inputDate-icon
{
position: relative;
.m-faBase();
color: @xf-linkColor;
font-size: 1.0em;
font-style: normal !important;
line-height: .75em;
vertical-align: -15%;
width: 45px;
justify-content: center;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
@media (max-width: @xf-formResponsive)
{
vertical-align: 0;
width: 25px;
}
.menu & {
vertical-align: 0;
width: 25px;
}
&::before
{
.m-faContent(@fa-var-calendar, .79em);
};
}
}
.inputList
{
.m-listPlain();
> li
{
margin-top: @xf-paddingMedium;
&:first-child
{
margin-top: 0;
}
}
}
.inputPair
{
.m-clearFix();
> .input,
.inputPair-input
{
float: right;
width: 49%; // fallback
width: ~"calc(50% - 2px)";
&:first-child
{
float: left;
}
}
}
.inputPair-container > .inputPair
{
margin-top: @xf-paddingMedium;
&:first-child
{
margin-top: 0;
}
}
.inputLabelPair
{
.m-clearFix();
margin: @xf-paddingMedium 0;
padding: 0;
> dt,
> dd
{
float: left;
margin: 0;
padding: 0;
}
> dt
{
width: 65%;
padding-right: @xf-paddingMedium;
padding-top: .6em;
> label
{
.m-appendColon();
}
}
> dd
{
width: 35%;
text-align: right;
.input
{
width: 100%;
max-width: none;
}
}
@media (max-width: @xf-responsiveNarrow)
{
> dt,
> dd
{
width: 50%;
}
}
}
.inputChoices
{
list-style: none;
padding: 0;
margin: 0;
> .inputChoices-choice
{
margin-bottom: @_input-elementSpacer;
padding-left: @_input-checkBoxSpacer;
position: relative;
&:last-child
{
margin-bottom: 0;
}
> .inputChoices,
.inputChoices-spacer
{
margin-top: @_input-elementSpacer;
}
}
&.inputChoices--noChoice > .inputChoices-choice,
.inputChoices-plainChoice
{
padding-left: 0;
}
&.inputChoices--inline > .inputChoices-choice
{
display: inline-block;
margin-right: @_input-elementSpacer;
margin-bottom: 0;
&:last-child
{
margin-right: 0;
}
}
.inputChoices-label
{
padding-left: 0;
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
}
+ .inputChoices:not(.inputChoices--inline)
{
margin-top: @_input-elementSpacer;
}
}
.inputChoices-group + .inputChoices-group,
.inputChoices-choice + .inputChoices-group
{
margin-top: (@xf-paddingMedium) * 2;
}
.inputChoices-spacer + .inputChoices
{
margin-top: @_input-elementSpacer;
}
.inputChoices-heading
{
color: @xf-textColorMuted;
padding-bottom: (@xf-paddingMedium) / 2;
border-bottom: @xf-borderSize solid @xf-borderColorFaint;
margin-bottom: @xf-paddingMedium;
position: relative;
label.iconic.inputChoices-heading-checkAll
{
margin-left: 0;
& > input + i
{
position: absolute;
right: 0;
left: auto;
width: auto;
}
}
}
.inputChoices-explain
{
.m-formElementExplain();
&.inputChoices-explain--after
{
margin-top: @_input-elementSpacer;
}
}
.inputChoices-dependencies
{
list-style: none;
padding: 0;
margin: 0;
> li
{
margin-top: @_input-elementSpacer;
> label
{
display: block;
padding: @xf-paddingSmall 0;
&.iconic--labelled > input + i
{
margin-left: 0;
}
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.input.input--title
{
font-size: @xf-fontSizeLarge;
}
}]]></template>
<template title="core_labels.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[.label
{
display: inline-block;
padding: 1px .35em;
border: 1px solid transparent;
border-radius: @xf-borderRadiusMedium;
font-size: 80%;
line-height: ((@xf-lineHeightDefault) * .9);
text-decoration: none;
&:hover,
a:hover &
{
text-decoration: none;
}
&.label--fullSize
{
font-size: 100%;
}
&.label--small
{
font-size: @xf-fontSizeSmall;
}
&.label--smallest
{
font-size: @xf-fontSizeSmallest;
}
// Label variations
&.label--hidden
{
// this has to essentially undo all the adjustments made by .label
padding: inherit;
border: none;
font-size: inherit;
line-height: inherit;
text-decoration: inherit;
&:hover
{
text-decoration: underline;
}
}
&.label--subtle
{
.m-labelVariation(@xf-textColorMuted, @xf-contentAltBg);
}
&.label--primary
{
.m-labelVariation(white, @xf-uix_prefixPrimary);
}
&.label--accent
{
.m-labelVariation(white, @xf-uix_prefixAccent);
}
&.label--red { .m-labelVariation(white, @xf-uix_prefixRed); }
&.label--green { .m-labelVariation(white, @xf-uix_prefixGreen); }
&.label--olive { .m-labelVariation(white, @xf-uix_prefixOlive); }
&.label--lightGreen { .m-labelVariation(white, @xf-uix_prefixLightGreen); }
&.label--blue { .m-labelVariation(black, @xf-uix_prefixBlue); }
&.label--royalBlue { .m-labelVariation(white, @xf-uix_prefixRoyalBlue); }
&.label--skyBlue { .m-labelVariation(white, @xf-uix_prefixRedSkyBlue); }
&.label--gray { .m-labelVariation(white, @xf-uix_prefixGray); }
&.label--silver { .m-labelVariation(black, @xf-uix_prefixSilver); }
&.label--yellow { .m-labelVariation(black, @xf-uix_prefixYellow); }
&.label--orange { .m-labelVariation(black, @xf-uix_prefixOrange); }
&.label--error { .m-labelVariation(#c84448, #fde9e9, #c84448); }
}
.label-append
{
display: inline-block;
}
.labelLink,
.labelLink:hover
{
text-decoration: none;
}]]></template>
<template title="core_list.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ##################################### LISTS ##################
.pairs
{
padding: 0;
margin: 0;
overflow: hidden;
line-height: 1.7;
&.pairs--plainLabel
{
> dt
{
color: inherit;
}
}
&.pairs--spaced + .pairs
{
margin-top: @xf-paddingMedium;
}
&.pairs--noColon
{
> dt
{
&:after
{
content: "";
}
}
}
> dt
{
padding: 0;
margin: 0;
color: @xf-textColorMuted;
.m-appendColon();
}
> dd
{
padding: 0;
margin: 0;
}
&.pairs--inline
{
display: inline;
> dt,
> dd
{
display: inline;
}
}
&.pairs--columns
{
display: table;
table-layout: fixed;
width: 100%;
> dt,
> dd
{
display: table-cell;
}
> dt
{
width: 50%;
padding-right: @xf-paddingMedium;
}
&.pairs--fixedSmall > dt
{
width: 200px;
}
&.pairs--fluidSmall > dt
{
width: 25%;
}
&.pairs--fluidHuge > dt
{
width: 70%;
}
@media (max-width: 500px)
{
display: block;
> dt,
> dd
{
display: block;
}
&.pairs > dt // the .pairs repetition is to increase specificity to override all fixed/fluid options
{
width: auto;
padding-right: 0;
}
& + .pairs
{
margin-top: @xf-paddingMedium;
}
}
}
&.pairs--justified
{
// .m-clearFix();
display: flex;
justify-content: space-between;
> dt
{
float: left;
max-width: 100%;
margin-right: @xf-paddingMedium;
flex-shrink: 0;
}
> dd
{
float: right;
text-align: right;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.pairs--rows
{
display: inline-table;
margin-right: @xf-paddingMedium;
&.pairs--rows--centered
{
> dt,
> dd
{
text-align: center;
}
}
&:last-of-type
{
margin-right: 0;
}
> dt
{
display: table-row;
font-size: 80%;
&:after
{
content: '';
// display: none;
}
}
> dd
{
display: table-row;
}
}
}
.pairJustifier
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-right: -5px;
margin-bottom: -5px;
.pairs.pairs--rows
{
margin-right: 5px;
margin-bottom: 5px;
}
}
.listPlain
{
.m-listPlain();
}
.listInline
{
.m-listPlain();
&.listInline--selfInline
{
display: inline;
}
> li
{
display: inline;
margin: 0;
padding: 0;
}
&.listInline--block
{
> li
{
display: inline-block;
}
}
&.listInline--comma
{
> li:after
{
content: "{$xf.language.comma_separator}";
}
> li:last-child:after
{
content: "";
display: none;
}
}
&.listInline--bullet
{
> li:before
{
content: "\00B7\20";
}
> li:first-child:before
{
content: "";
display: none;
}
}
}
.listHeap
{
.m-listPlain();
margin: -4px;
> li
{
margin: 0;
padding: 0;
display: inline-block;
margin: 4px;
&:last-child
{
margin-right: 0;
}
}
}
.listColumns
{
.m-columns(2, @xf-responsiveNarrow);
> li
{
.m-columnBreakAvoid();
position: relative; // workaround Chrome quirk with hover triggers in visitor menu
}
&.listColumns--spaced
{
> li
{
margin-bottom: .5em;
}
}
&.listColumns--narrow
{
.m-columns(2);
}
&.listColumns--together
{
-moz-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
}
&.listColumns--collapsed
{
display: inline-block;
}
}
.textHighlight
{
font-style: normal;
font-weight: @xf-fontWeightHeavy;
&.textHighlight--attention
{
color: @xf-textColorAttention;
}
}]]></template>
<template title="core_menu.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ###################################### MENUS ######################
@_menu-arrowSize: 8px;
@_menu-edgePadding: @xf-pageEdgeSpacer;
@_menu-paddingH: 8px;
@_menu-paddingV: 8px;
.menuTrigger
{
cursor: pointer;
&:after
{
.m-faBase();
.m-faContent(" @{fa-var-caret-down}");
unicode-bidi: isolate; // this is needed to ensure correct positioning in RTL with LTR text
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-down" />
}
}
.menuOutsideClicker
{
position: fixed;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2; // above non set stuff but below anything intentionally set
&.is-active
{
display: block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
}
.menu
{
.m-transitionFade();
@media (max-width: @xf-responsiveNarrow) {
width: 90% !important;
max-width: 90% !important;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
position: absolute;
z-index: @zIndex-2;
margin: @_menu-arrowSize 0 0;
min-width: 240px;
max-width: 320px;
border-radius: @xf-menuBorderRadius;
// .m-dropShadow(0, 5px, 10px, 0, .35);
box-shadow: @xf-uix_elevation2;
.xf-contentBase();
.block-container {
box-shadow: none;
// border-radius: 0;
margin: 0;
border: none;
padding: 0;
}
&.menu--structural
{
margin-top: 0;
// when menus nudge up against structure, the joined corner should not be radiused
&.menu--left
{
// border-top-left-radius: 0;
}
&.menu--right
{
// border-top-right-radius: 0;
}
}
&.menu--veryWide
{
width: 500px;
max-width: 100%;
}
&.menu--wide
{
width: 350px;
max-width: 100%;
}
&.menu--medium
{
width: 300px;
max-width: 100%;
}
&.menu--potentialFixed
{
z-index: @zIndex-4;
}
.menu-minorHeader--small {
padding: @_menu-paddingV @_menu-paddingH;
font-size: calc(@xf-menu--font-size + 1);
}
}
.menu-arrow
{
position: absolute;
top: 0;
width: 0;
height: 0;
border: 0 solid transparent;
display: none;
top: -@_menu-arrowSize;
-ltr-rtl-left: 50%;
-ltr-rtl-margin-left: -@_menu-arrowSize;
.m-triangleUp(@xf-menuFeatureBorderColor, @_menu-arrowSize);
.menu--structural &
{
top: -@_menu-arrowSize;
}
.menu--up &
{
display: none;
}
}
.menu-content
{
margin: 0;
padding: 0;
list-style: none;
text-align: left;
.xf-menu();
border-radius: @xf-menuBorderRadius;
// border-top: @xf-borderSizeFeature solid @xf-menuFeatureBorderColor;
// when menus nudge up against structure, the joined corner should not be radiused
.menu--structural.menu--left &
{
// border-top-left-radius: 0;
}
.menu--structural.menu--right &
{
// border-top-right-radius: 0;
}
// potentially fixed menus
.menu--potentialFixed &
{
overflow: auto;
max-height: 450px;
max-height: 80vh;
}
> :last-child
{
border-bottom-left-radius: @xf-menuBorderRadius;
border-bottom-right-radius: @xf-menuBorderRadius;
}
}
.menu--pageJump
{
width: auto;
min-width: 0;
}
.menu-header
{
padding: @_menu-paddingH;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-menuHeader();
.m-clearFix();
.m-hiddenLinks();
}
.menu-tabHeader
{
padding: 0;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-menuTabHeader();
.m-tabsTogether(xf-default(@xf-menuTabHeader--font-size, @xf-fontSizeNormal));
.tabs-tab
{
padding: @xf-blockPaddingV @_menu-paddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
&:hover
{
color: @xf-blockMinorTabHeaderSelected--color;
}
&.is-active
{
.xf-menuTabHeaderSelected();
}
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-menuTabHeader--background-color, transparent),
@xf-menuTabHeader--color,
@xf-blockMinorTabHeaderSelected--color
);
}
}
.menu-scroller
{
overflow: auto;
max-height: 300px;
max-height: 60vh;
}
.menu-row
{
margin: 0;
padding: @_menu-paddingH;
.m-clearFix();
// causing issues when menu-row is not the first item
// &:not(:first-of-type):not(.menu-row--separated) {padding-top: 0;}
&.menu-row--alt
{
.xf-contentAltBase();
}
&.menu-row--highlighted
{
.xf-contentHighlightBase();
}
&.menu-row--separated
{
+ .menu-row
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
}
&.menu-row--clickable:hover
{
background: @xf-contentHighlightBg;
}
&:empty
{
padding: 0;
}
}
.menu-linkRow
{
display: block;
padding: @_menu-paddingV @_menu-paddingH;
// text-indent: @_menu-paddingH;
border-left: @xf-borderSizeFeature solid transparent;
.xf-menuLinkRow();
&.menu-linkRow--alt
{
.xf-contentAltBase();
}
&.is-selected,
&:hover,
&:focus
{
.xf-menuLinkRowSelected();
// border-left-color: fade(@xf-borderColorFeature, 50%);
&:focus
{
outline: 0;
}
&.is-selected
{
border-left-color: @xf-borderColorFeature;
}
}
i[aria-hidden=true]
{
font-size: @xf-fontSizeSmall;
display: inline-block;
width: 23px; // about 1.75em at this font size
&:after
{
.m-faBase();
color: @xf-textColorMuted;
left: @xf-blockPaddingH;
}
& ~ .menu-linkRow-hint
{
padding-left: 23px;
}
}
&:hover i[aria-hidden=true]:after
{
color: @xf-linkHoverColor;
}
}
.menu-linkRow-hint
{
font-style: inherit;
font-size: @xf-fontSizeSmallest;
color: @xf-textColorMuted;
display: block;
}
.menu-separator
{
margin: 0 (@_menu-paddingH) / 2;
padding: 0;
border: none;
border-top: @xf-borderSize solid @xf-borderColorLight;
&.menu-separator--hard
{
margin: 0;
}
& + .menu-separator,
&:last-child
{
display: none;
}
}
.menu-footer
{
padding: @_menu-paddingV @_menu-paddingH;
.xf-menuFooter();
.m-clearFix();
&:not(.menu-footer--split)
{
.menu-footer-counter
{
float: left;
}
.menu-footer-controls
{
float: right;
.button {.xf-uix_buttonSmall();}
}
}
&.menu-footer--split
{
display: flex;
align-items: center;
.menu-footer-main,
.menu-footer-counter
{
flex-grow: 1;
.has-no-flexbox &
{
float: left;
}
}
.menu-footer-select:not(:last-child)
{
margin: 0 1em;
}
.menu-footer-opposite,
.menu-footer-controls
{
margin-left: auto;
.has-no-flexbox &
{
float: right;
}
}
}
}]]></template>
<template title="core_offcanvas.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ################################## OFF CANVAS MENU #########################
@_offCanvas-animationLength: @xf-animationSpeed;
.offCanvasMenu
{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: @zIndex-5;
.m-transition(none, @_offCanvas-animationLength); // needed to keep the children displayed through animation
.m-transform(scale(1)); // forces instant repaint in iOS
// every tap on iOS causes a brief highlight, disable it for off canvas menu
// then restore it for some tappable elements to retain it
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
a
{
-webkit-tap-highlight-color: initial;
}
&.is-transitioning
{
display: block;
}
&.is-active
{
display: block;
}
.offCanvasMenu-hidden
{
display: none;
}
.offCanvasMenu-shown
{
display: block;
}
.offCanvasMenu-closer
{
float: right;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: initial;
padding: @xf-paddingLarge;
margin: -@xf-paddingLarge;
&:hover
{
text-decoration: none;
}
&:after
{
.m-faBase();
.m-faContent(@fa-var-remove, .79em);
<xf:macro template="uix_icons.less" name="content" arg-icon="close" />
}
}
.block-container,
.blockMessage
{
margin-left: 0;
margin-right: 0;
border-radius: 0;
border-left: none;
border-right: none;
}
}
.offCanvasMenu-shown
{
display: none;
}
.offCanvasMenu-backdrop
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .25);
opacity: 0;
.m-transition(all, @_offCanvas-animationLength, ease-in-out);
.is-active &
{
opacity: 1;
}
}
.offCanvasMenu-content
{
position: relative;
width: 280px;
max-width: 85%;
height: 100%;
padding-bottom: 44px;
overflow: auto;
.m-transition(all, @_offCanvas-animationLength, ease-in-out);
-webkit-overflow-scrolling: touch;
.xf-uix_canvas();
& when(@ltr)
{
.m-dropShadow(2px, 0, 5px, 0, .25);
.m-transform(translateX(-280px));
}
& when(@rtl)
{
.m-dropShadow(-2px, 0, 5px, 0, .25);
.m-transform(translateX(280px));
}
.is-active &
{
.m-transform(translateX(0));
}
}
.offCanvasMenu-header
{
padding: @xf-paddingLarge;
margin: 0;
font-size: @xf-fontSizeLarge;
font-weight: @xf-fontWeightNormal;
.m-clearFix();
.m-hiddenLinks();
&.offCanvasMenu-header--separated
{
margin-bottom: @xf-paddingLarge;
}
}
.offCanvasMenu-row
{
padding: @xf-paddingLarge;
}
.offCanvasMenu-separator
{
padding: 0;
margin: 0;
border: none;
border-top: 1px solid transparent;
}
.offCanvasMenu-link
{
display: block;
padding: @xf-paddingLarge;
font-size: @xf-fontSizeLarge;
text-decoration: inherit;
&:hover
{
text-decoration: inherit;
}
&.offCanvasMenu-link--splitToggle
{
position: relative;
text-decoration: inherit;
&:before
{
content: '';
position: absolute;
left: 0;
top: (@xf-paddingLarge - 4px);
bottom: (@xf-paddingLarge - 4px);
width: 0;
border-left: 1px solid currentColor;
}
&:after
{
.m-faBase();
.m-faContent(@fa-var-chevron-down, 1em);
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-down" />
}
&.is-active:after
{
.m-faContent(@fa-var-chevron-up, 1em);
<xf:macro template="uix_icons.less" name="content" arg-icon="chevron-up" />
}
}
}
.offCanvasMenu-linkHolder
{
display: flex;
&.is-selected
{
a
{
color: inherit;
}
.offCanvasMenu-link:first-child
{
padding-left: @xf-paddingLarge;
}
}
.offCanvasMenu-link
{
flex-grow: 1;
&.offCanvasMenu-link--splitToggle
{
flex-grow: 0;
}
&:hover
{
background: none;
}
}
}
.offCanvasMenu-list
{
.m-listPlain();
> li
{
border-top: @xf-borderSize solid transparent;
}
&:first-child > li:first-child
{
border-top: none;
}
}
.offCanvasMenu-subList
{
.m-listPlain();
.m-transitionFadeDown();
padding-bottom: @xf-paddingLargest;
.offCanvasMenu-link
{
padding-left: @xf-paddingLarge;
padding-top: @xf-paddingMedium;
padding-bottom: @xf-paddingMedium;
font-size: @xf-fontSizeSmall;
}
}
.offCanvasMenu--blocks
{
.offCanvasMenu-content
{
// .xf-pageBackground();
// color: @xf-textColor;
}
.offCanvasMenu-header
{
color: @xf-textColorEmphasized;
background: @xf-contentHighlightBg;
border-bottom: @xf-borderSize solid @xf-borderColorHeavy;
}
.offCanvasMenu-separator
{
border-top-color: @xf-borderColor;
}
.offCanvasMenu-list > li
{
border-top-color: @xf-borderColor;
}
}
.offCanvasMenu--nav
{
.offCanvasMenu-content
{
// .xf-publicNav();
font-size: @xf-fontSizeSmall;
a
{
color: inherit;
}
}
.offCanvasMenu-header
{
background: @xf-publicHeaderAdjustColor;
border-bottom: @xf-borderSize solid fadein(@xf-publicHeaderAdjustColor, 10%);
.xf-uix_canvasHeader();
}
.offCanvasMenu-list
{
border-bottom: @xf-borderSize solid fadein(@xf-publicHeaderAdjustColor, 10%);
a {
.xf-uix_canvasNavItem();
&:hover {.xf-uix_canvasNavItemHoverColor();}
}
}
.offCanvasMenu-separator
{
border-top-color: fadein(@xf-publicHeaderAdjustColor, 10%);
}
.offCanvasMenu-link.offCanvasMenu-link--splitToggle:before
{
border-left-color: fadein(@xf-publicHeaderAdjustColor, 1%);
}
.offCanvasMenu-linkHolder
{
text-decoration: none;
&:hover
{
// background: fadeout(@xf-publicHeaderAdjustColor, 6%);
}
&.is-selected
{
// .xf-publicNavSelected(no-border, no-border-radius);
a {.xf-uix_canvasNavItemActive();}
.offCanvasMenu-link.offCanvasMenu-link--splitToggle:before
{
// border-left-color: fade(xf-default(@xf-publicNavSelected--color, transparent), 20%);
}
}
}
.offCanvasMenu-subList
{
background: @xf-publicHeaderAdjustColor;
a {
.xf-uix_canvasNavSubItem();
&:hover {.xf-uix_canvasNavItemHoverColor();}
}
.offCanvasMenu-link:hover
{
text-decoration: none;
// background: @xf-publicHeaderAdjustColor;
}
}
.offCanvasMenu-list > li
{
border-top-color: @xf-publicHeaderAdjustColor;
}
}]]></template>
<template title="core_overlay.less" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[// #################################### OVERLAYS ################################
.overlay-container
{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: @zIndex-6;
background: @xf-overlayMaskColor;
-webkit-overflow-scrolling: touch;
opacity: 0;
.m-transition(opacity);
@media (max-width: @xf-responsiveNarrow) {
transition: transform ease-in .25s;
transform: translatey(100%);
display: block;
opacity: 1;
.overlay-title {
position: sticky;
top: 0;
}
}
&.is-transitioning
{
display: block;
}
&.is-active
{
display: block;
opacity: 1;
@media (max-width: @xf-responsiveNarrow) {
transform: translatey(0);
}
}
}
.overlay
{
position: relative;
margin: 40px auto 10px;
margin-top: @xf-overlayTopMargin;
width: 100%;
max-width: 800px;
background: @xf-contentBg;
color: @xf-textColor;
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
.m-dropShadow(0, 5px, 15px, 0, .5);
outline: none;
> .overlay-title:first-child,
.overlay-firstChild
{
border-top-left-radius: @xf-blockBorderRadius;
border-top-right-radius: @xf-blockBorderRadius;
}
> .overlay-content > *:last-child,
.overlay-lastChild
{
border-bottom-left-radius: @xf-blockBorderRadius;
border-bottom-right-radius: @xf-blockBorderRadius;
}
.block-container {box-shadow: none;}
}
@media (max-width: @xf-responsiveWide)
{
.overlay
{
max-width: ~"calc(100% - 20px)";
max-width: ~"calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right))";
}
}
@media (max-width: @xf-responsiveNarrow) {
.overlay {
max-width: 100%;
margin: 0;
height: 100vh;
border-radius: 0;
overflow-y: scroll;
.overlay-title {z-index: 1;}
}
}
.overlay-title
{
.m-clearFix();
display: none;
margin: 0;
font-weight: @xf-fontWeightNormal;
.xf-overlayHeader();
.overlay &
{
display: block;
}
}
.overlay-titleCloser
{
float: right;
cursor: pointer;
margin-left: 5px;
text-decoration: none;
// opacity: .5;
.m-transition();
&:after
{
.m-faBase();
.m-faContent(@fa-var-close, 0.79em);
<xf:macro template="uix_icons.less" name="content" arg-icon="close" />
}
&:hover
{
text-decoration: none;
opacity: 1;
}
}
.overlay-content
{
.m-clearFix();
}
// when displaying a modal, prevent scrolling on the main content but allow it on the overlay
body.is-modalOpen
{
overflow: hidden !important;
.overlay-container,
.offCanvasMenu
{
overflow-y: scroll !important;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.overlay-title
{
font-size: @xf-fontSizeLarger;
}
}
// ############################### OVERLAY/BLOCK NESTING ##############################
.block-container > .tabPanes > li,
.block-container > .block-body,
.block-container > .block-body > .block-row,
.overlay-content
{
> .blocks > .block > .block-container,
> .block > .block-container,
> .blockMessage
{
margin-left: 0;
margin-right: 0;
border-left: none;
border-right: none;
}
> .blocks > .block:first-child,
> .block:first-child,
> .blockMessage:first-child
{
margin-top: 0;
.block-outer:not(.block-outer--after)
{
border-bottom: @xf-borderSize solid @xf-borderColorLight;
padding: @xf-blockPaddingV;
}
}
> .blocks > .block:last-child,
> .block:last-child,
> .blockMessage:last-child
{
margin-bottom: 0;
.block-outer.block-outer--after
{
border-top: @xf-borderSize solid @xf-borderColorLight;
padding: @xf-blockPaddingV;
}
}
> .blocks > .block:first-child > .block-container,
> .block:first-child > .block-container,
> .blockMessage:first-child
{
border-top: none;
}
> .blocks > .block:last-child > .block-container,
> .block:last-child > .block-container,
> .blockMessage:last-child
{
border-bottom: none;
}
> .block:not(:first-child) > .block-container,
> .blockMessage:not(:first-child)
{
.m-borderTopRadius(0);
}
> .blocks > .block:not(:last-child) > .block-container,
> .block:not(:last-child) > .block-container,
> .blockMessage:not(:last-child)
{
.m-borderBottomRadius(0);
}
}
.overlay {
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.26s transform;
transform: translateY(20px);
.is-active & {
transform: translateY(0px);
}
}
.overlay-content
{
> .blocks > .block > .block-container,
> .block > .block-container,
> .blockMessage
{
.m-borderTopRadius(0);
}
> .blocks > .block > .block-container,
> .block > .block-container
{
> :first-child
{
.m-borderTopRadius(0);
}
> .block-body:first-child > .formRow:first-child
{
> dt { border-top-left-radius: 0; }
> dd { border-top-right-radius: 0; }
}
> .dataList:first-child
{
tbody:first-child .dataList-row:first-child,
thead:first-child .dataList-row:first-child
{
> .dataList-cell:first-child { border-top-left-radius: 0; }
> .dataList-cell:last-child { border-top-right-radius: 0; }
}
}
}
}]]></template>
<template title="core_pagenav.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// ####################################### PAGE NAVIGATION ########################
@_page-paddingV: xf-default(@xf-buttonBase--padding-top, 6px);
@_page-paddingH: 8px;
@_page-paddingHSimple: 10px;
.pageNavWrapper {}
.pageNav {display: flex;}
.pageNav-jump--next {margin-left: 6px;}
.pageNav-jump--prev {margin-right: 6px;}
.m-pageNavElCore()
{
background: @xf-contentBg;
color: @xf-textColorMuted;
.xf-blockBorder();
// font-size: @xf-fontSizeSmall;
border-radius: 0;
border: 1px solid @xf-borderColor;
white-space: nowrap;
height: 24px;
line-height: 24px;
&:hover,
&:active
{
// background: xf-intensify(@xf-contentHighlightBg, 3%);
text-decoration: none;
color: @xf-textColor;
}
}
.pageNav-jump
{
display: inline-block;
.m-pageNavElCore();
// border-radius: @xf-borderRadiusSmall;
padding: @_page-paddingV @_page-paddingH;
height: 26px;
line-height: 26px;
&.pageNav-jump--prev:before,
&.pageNav-jump--next:after
{
.m-faBase();
font-size: 80%;
word-wrap: normal;
unicode-bidi: isolate; // maintain position in RTL with LTR text
}
&.pageNav-jump--prev:before
{
.m-faContent("@{fa-var-caret-left}\00a0", 0.61em, ltr);
.m-faContent("@{fa-var-caret-right}\00a0", 0.61em, rtl);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-left" />
}
&.pageNav-jump--next:after
{
.m-faContent("\00a0@{fa-var-caret-right}", 0.61em, ltr);
.m-faContent("\00a0@{fa-var-caret-left}", 0.61em, rtl);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-right" />
}
}
.pageNav-main
{
.m-listPlain();
display: inline-table;
}
.pageNav-page
{
display: table-cell;
.m-pageNavElCore();
&:not(:last-child)
{
border-right: none;
}
&:not(:first-child)
{
border-left-color: @xf-borderColorLight;
}
<xf:comment>
&:first-child
{
.m-borderLeftRadius(@xf-borderRadiusSmall);
}
&:last-child
{
.m-borderRightRadius(@xf-borderRadiusSmall);
}
</xf:comment>
> a
{
display: block;
padding: @_page-paddingV @_page-paddingH;
text-decoration: none;
color: inherit;
}
&.pageNav-page--current
{
// background: @xf-contentAccentBg;
color: @xf-uix_secondaryColor;
box-shadow: 0 -2px @xf-uix_secondaryColor inset;
// border: @xf-borderSize solid @xf-borderColorAccentContent;
cursor: pointer;
&:hover,
&:active
{
// background: xf-intensify(@xf-contentAccentBg, 3%);
}
<xf:comment>
+ .pageNav-page
{
border-left: none;
}
</xf:comment>
}
}
// Hide relative page numbers on narrow devices when we have a skip entry as we don't necessarily have space.
@media (max-width: @xf-responsiveNarrow)
{
.pageNav--skipStart
{
.pageNav-page.pageNav-page--earlier
{
display: none;
}
}
.pageNav--skipEnd
{
.pageNav-page.pageNav-page--later
{
display: none;
}
.pageNav-page.pageNav-page--skipEnd
{
border-left: none;
}
}
}
// ########################### SIMPLE PAGE NAV VARIANT ########################
.pageNavSimple
{
display: inline-flex;
height: 24px;
line-height: 24px;
}
.pageNavSimple-el
{
display: inline-block;
.xf-blockBorder();
border-radius: @xf-borderRadiusSmall;
padding: @_page-paddingV @_page-paddingHSimple;
font-size: @xf-fontSizeSmall;
text-align: center;
white-space: nowrap;
margin-right: 4px;
&:last-child
{
margin-right: 0;
}
&.pageNavSimple-el--current
{
// .xf-contentAccentBase();
color: @xf-uix_primaryColor;
background-color: none;
&:hover,
&:active
{
background: xf-intensify(@xf-contentAccentBg, 3%);
text-decoration: none;
}
}
&.pageNavSimple-el--prev,
&.pageNavSimple-el--next
{
background: @xf-uix_primaryColor;
color: #fff;
min-width: 75px;
@media (max-width: 350px)
{
min-width: 0;
}
&:hover,
&:active
{
background: xf-intensify(@xf-uix_primaryColor, 5%);
text-decoration: none;
}
i:before
{
.m-faBase();
}
}
&.pageNavSimple-el--prev i:before
{
.m-faContent(@fa-var-caret-left, .37em, ltr);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-left" />
.m-faContent(@fa-var-caret-right, .37em, rtl);
}
&.pageNavSimple-el--next i:before
{
.m-faContent(@fa-var-caret-right, .37em, ltr);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-right" />
.m-faContent(@fa-var-caret-left, .37em, rtl);
}
&.pageNavSimple-el--first,
&.pageNavSimple-el--last
{
border-color: transparent;
padding-left: (@_page-paddingHSimple / 2);
padding-right: (@_page-paddingHSimple / 2);
color: @xf-uix_primaryColor;
&:hover,
&:active
{
.xf-blockBorder();
background: xf-intensify(@xf-contentHighlightBg, 3%);
color: @xf-linkColor;
text-decoration: none;
}
i:before
{
.m-faBase();
}
}
&.pageNavSimple-el--first i:before
{
.m-faContent(@fa-var-backward, .93em, ltr);
<xf:macro template="uix_icons.less" name="content" arg-icon="arrow-left" />
.m-faContent(@fa-var-forward, .93em, rtl);
width: auto;
font-size: 18px;
line-height: inherit;
}
&.pageNavSimple-el--last i:before
{
.m-faContent(@fa-var-forward, .93em, ltr);
<xf:macro template="uix_icons.less" name="content" arg-icon="arrow-right" />
.m-faContent(@fa-var-backward, .93em, rtl);
width: auto;
font-size: 18px;
line-height: inherit;
}
&.is-disabled
{
border-color: transparent;
background: none;
color: @xf-textColorMuted;
text-decoration: none;
pointer-events: none;
&:hover
{
background: none;
color: @xf-textColorMuted;
}
}
}
// #################### DISPLAY VARIANTS #########################
.pageNavWrapper--simple
{
.pageNav
{
display: none;
}
}
.pageNavWrapper--full
{
.pageNavSimple
{
display: none;
}
}
.pageNavWrapper--mixed
{
.pageNavSimple
{
display: none;
}
@media (max-width: @xf-responsiveMedium)
{
.pageNav
{
display: none;
}
.pageNavSimple
{
display: inline-flex;
}
}
}
// Hide any block page nav that goes before the block as we will be wasting vertical space.
@media (max-width: @xf-responsiveNarrow)
{
.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow)
{
display: none;
}
// this is a sanity check in case .block-outer--after is forgotten
.block-container + .block-outer .pageNavWrapper
{
display: block;
}
}]]></template>
<template title="core_pikaday.less" type="public" addon_id="XF" version_id="2000470" version_string="2.0.4"><![CDATA[@pd-text-color: @xf-textColor;
@pd-title-color: @xf-textColorEmphasized;
@pd-title-bg: @xf-contentBg;
@pd-picker-bg: @xf-contentBg;
@pd-picker-border: @xf-borderColorHeavy;
@pd-picker-border-radius: @xf-borderRadiusMedium;
@pd-th-color: @xf-textColorEmphasized;
@pd-day-color: @xf-textColor;
@pd-day-bg: @xf-contentHighlightBg;
@pd-day-hover-color: @xf-textColor;
@pd-day-hover-bg: xf-intensify(@pd-day-bg, 5%);
@pd-day-today-color: @xf-textColorFeature;
@pd-day-selected-color: contrast(@xf-textColorFeature);
@pd-day-selected-bg: @xf-textColorFeature;
@pd-day-selected-shadow: transparent;
@pd-day-disabled-color: @xf-textColor;
@pd-week-color: @xf-textColorEmphasized;
.pika-single {
z-index: 9999;
display: block;
position: relative;
color: @pd-text-color;
background: @pd-picker-bg;
border: 1px solid;
border-color: @pd-picker-border;
border-radius: @pd-picker-border-radius;
&.is-hidden {
display: none;
}
&.is-bound {
position: absolute;
.m-dropShadow(0, 5px, 10px, 0, .25);
}
}
// clear child float (pika-lendar), using the famous micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.pika-single {
*zoom: 1;
&:before,
&:after {
content: " ";
display: table;
}
&:after { clear: both }
}
.pika-lendar {
float: left;
width: 240px;
margin: 8px;
}
.pika-title {
position: relative;
text-align: center;
select {
cursor: pointer;
position: absolute;
z-index: 9998;
margin: 0;
left: 0;
top: 5px;
filter: alpha(opacity=0);
opacity: 0;
}
}
.pika-label {
display: inline-block;
*display: inline;
position: relative;
z-index: 9999;
overflow: hidden;
margin: 0;
padding: 5px 3px;
font-size: 14px;
line-height: 20px;
font-weight: bold;
color: @pd-title-color;
background-color: @pd-title-bg;
}
.pika-prev,
.pika-next
{
display: block;
cursor: pointer;
position: relative;
outline: none;
background: none;
border: 0;
padding: 0;
width: 20px;
height: 30px;
white-space: nowrap;
overflow: hidden;
opacity: .5;
font-size: 24px;
&::before
{
.m-faBase();
font-size: @xf-fontSizeLarge;
vertical-align: middle;
display: inline-block;
margin: -4px 6px -4px 0;
}
&:hover {
opacity: 1;
}
&.is-disabled {
cursor: default;
opacity: .2;
}
}
.pika-prev
{
&::before
{
.m-faContent(@fa-var-caret-left, .36em);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-left" />
}
}
.pika-next
{
&::before
{
.m-faContent(@fa-var-caret-right, .36em);
<xf:macro template="uix_icons.less" name="content" arg-icon="menu-right" />
}
}
.pika-prev,
.is-rtl .pika-next {
float: left;
*left: 0;
}
.pika-next,
.is-rtl .pika-prev {
float: right;
*right: 0;
}
.pika-select {
display: inline-block;
*display: inline;
}
.pika-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 0;
th,
td {
width: 14.285714285714286%;
padding: 0;
}
th {
color: @pd-th-color;
font-size: 12px;
line-height: 25px;
font-weight: bold;
text-align: center;
}
abbr {
border-bottom: none;
}
}
.pika-button {
cursor: pointer;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
border: 0;
margin: 0;
width: 100%;
padding: 5px;
color: @pd-day-color;
font-size: 12px;
line-height: 15px;
text-align: right;
background: @pd-day-bg;
.is-today & {
color: @pd-day-today-color;
font-weight: bold;
}
.is-selected & {
color: @pd-day-selected-color;
font-weight: bold;
background: @pd-day-selected-bg;
box-shadow: inset 0 1px 3px @pd-day-selected-shadow;
border-radius: 3px;
}
.is-disabled &,
.is-outside-current-month & {
pointer-events: none;
cursor: default;
color: @pd-day-disabled-color;
opacity: .3;
}
&:hover {
color: @pd-day-hover-color;
background: @pd-day-hover-bg;
box-shadow: none;
border-radius: 3px;
}
}
.pika-week {
font-size: 11px;
color: @pd-week-color;
}
.is-inrange .pika-button {
background: #D5E9F7;
}
.is-startrange .pika-button {
color: #fff;
background: #6CB31D;
box-shadow: none;
border-radius: 3px;
}
.is-endrange .pika-button {
color: #fff;
background: #33aaff;
box-shadow: none;
border-radius: 3px;
}
.pika-time-container {
clear: both;
}
.pika-time {
margin: 7px auto 7px;
}]]></template>
<template title="core_setup.less" type="public" addon_id="XF" version_id="2000170" version_string="2.0.1"><![CDATA[// Vital base setup, don't change these!
html {.xf-pageBackground();}
html:after
{
content: 'full';
display: none;
@media (max-width: @xf-responsiveWide) { content: 'wide'; }
@media (max-width: @xf-responsiveMedium) { content: 'medium'; }
@media (max-width: @xf-responsiveNarrow) { content: 'narrow'; }
}
*
{
// global sizing calculations expect border-box
box-sizing: border-box;
}
body
{
// don't hide the vertical scrollbar
overflow-y: scroll !important;
}
[data-xf-click], a[tabindex]
{
// iOS doesn't bubble clicks up to the body where we have a listener, so we need to force that
cursor: pointer;
}
[dir=auto]
{
// this will get flipped in RT
text-align: left;
}
pre, textarea
{
// soft line wraps
word-wrap: normal;
}
img
{
// without specifying this, resized images look worse
-ms-interpolation-mode: bicubic;
}
// #################################################
// Focus handlers, set by XF.NavDeviceWatcher (core.js)
.has-pointer-nav
{
:focus
{
outline: 0
}
::-moz-focus-inner
{
border: 0;
}
label.iconic > input:focus + i:before
{
outline: 0;
}
}]]></template>
<template title="core_tab.less" type="public" addon_id="XF" version_id="2000051" version_string="2.0.0 Release Candidate 1"><![CDATA[// ################################## TABS ####################################
.tabs
{
display: flex;
&.tabs--wrappable
{
flex-wrap: wrap;
}
}
.tabs-tab
{
display: inline-block;
cursor: pointer;
white-space: nowrap;
color: inherit;
font-weight: inherit;
text-decoration: none;
.m-transition();
&:hover
{
text-decoration: none;
}
}
.tabs-extra
{
float: right;
position: relative;
margin-left: auto;
padding: 0 0 0 @xf-paddingMedium;
align-self: center;
white-space: nowrap;
a
{
color: inherit;
text-decoration: none;
display: block;
padding: @xf-paddingMedium;
}
}
.tabPanes
{
.m-listPlain();
> li
{
display: none;
&.is-active
{
display: block;
}
}
}
// ################################# OUTER TABS #########################
.tabs--standalone
{
padding: 0;
margin-bottom: @xf-elementSpacer;
font-weight: @xf-fontWeightNormal;
.xf-blockBorder();
.xf-standaloneTab();
.m-tabsTogether(xf-default(@xf-standaloneTab--font-size, @xf-fontSizeNormal));
.tabs-tab
{
padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
&:hover
{
color: @xf-standaloneTabSelected--color;
}
&.is-active
{
.xf-standaloneTabSelected();
}
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-standaloneTab--background-color, transparent),
@xf-standaloneTab--color,
@xf-standaloneTabSelected--color
);
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.tabs--standalone
{
// margin-left: -@xf-pageEdgeSpacer;
// margin-right: -@xf-pageEdgeSpacer;
border-radius: 0;
border-left: none;
border-right: none;
}
}]]></template>
<template title="core_tooltip.less" type="public" addon_id="XF" version_id="2000631" version_string="2.0.6 Beta 1"><![CDATA[// ######################################### TOOLTIPS #######################################
@_tooltip-arrowSize: 5px;
@_tooltip-zIndex: @zIndex-3;
@_tooltip-previewArrowSize: 10px;
@_tooltip-memberArrowSize: 10px;
.tooltip
{
position: absolute;
z-index: @_tooltip-zIndex;
line-height: @xf-lineHeightDefault;
padding: 0 5px;
padding-left: env(safe-area-inset-left) !important;
padding-right: env(safe-area-inset-right) !important;
display: none;
&.tooltip--basic
{
max-width: 300px;
// Tooltip positioning is literal.
&.tooltip--top
{
margin-bottom: 3px;
padding-bottom: @_tooltip-arrowSize;
}
&.tooltip--right
{
-ltr-rtl-margin-left: 3px;
-ltr-rtl-padding-left: @_tooltip-arrowSize;
}
&.tooltip--bottom
{
margin-top: 3px;
padding-top: @_tooltip-arrowSize;
.has-touchevents &.tooltip--selectToQuote
{
margin-top: .75em;
}
}
&.tooltip--left
{
-ltr-rtl-margin-right: 3px;
-ltr-rtl-padding-right: @_tooltip-arrowSize;
}
.m-textColoredLinks();
}
&.tooltip--description
{
max-width: 350px;
}
&.tooltip--selectToQuote
{
.m-hiddenLinks();
}
&.tooltip--preview
{
max-width: 100%;
width: 400px;
// Tooltip positioning is literal.
&.tooltip--top { padding-bottom: @_tooltip-previewArrowSize; }
&.tooltip--right { -ltr-rtl-padding-left: @_tooltip-previewArrowSize; }
&.tooltip--bottom { padding-top: @_tooltip-previewArrowSize; }
&.tooltip--left { -ltr-rtl-padding-right: @_tooltip-previewArrowSize; }
}
&.tooltip--member
{
max-width: 100%;
width: 430px;
padding: 0 15px;
// Tooltip positioning is literal.
&.tooltip--top { padding-bottom: @_tooltip-memberArrowSize; }
&.tooltip--right { -ltr-rtl-padding-left: @_tooltip-memberArrowSize; }
&.tooltip--bottom { padding-top: @_tooltip-memberArrowSize; }
&.tooltip--left { -ltr-rtl-padding-right: @_tooltip-memberArrowSize; }
}
}
.tooltip-content
{
.tooltip--basic &
{
text-align: center;
.xf-tooltip();
}
.tooltip--description &
{
text-align: left;
}
.tooltip--preview &
{
.xf-contentBase();
padding: @xf-paddingMedium;
text-align: left;
border: 1px solid @xf-borderColor;
.m-dropShadow(0, 5px, 10px, 0, .35);
}
.tooltip--member &
{
.xf-contentBase();
padding: 0;
text-align: left;
border: 1px solid @xf-borderColor;
.m-dropShadow(0, 5px, 10px, 0, .35);
}
}
.tooltip-content-inner
{
position: relative;
.tooltip--basic &
{
max-height: 200px;
overflow: hidden;
}
.tooltip--preview &
{
max-height: 200px;
overflow: hidden;
.tooltip-content-cover
{
.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, transparent, 160px, 200px);
}
}
.tooltip-content-cover
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
// Tooltip side positioning is literal.
/* XF-RTL:disable */
.tooltip-arrow
{
position: absolute;
width: 0;
height: 0;
border: 0 solid transparent;
.m-tooltipArrow(
xf-default(@xf-tooltip--background-color, transparent),
@_tooltip-arrowSize,
~'.tooltip--basic'
);
.m-tooltipArrow(@xf-borderColor, @_tooltip-previewArrowSize + 1px, ~'.tooltip--preview', @xf-contentBg);
.m-tooltipArrow(@xf-borderColor, @_tooltip-memberArrowSize + 1px, ~'.tooltip--member', @xf-contentBg);
.tooltip--member.tooltip--bottom &:after
{
.m-triangleUp(xf-default(@xf-memberTooltipHeader--background-color, transparent), @_tooltip-memberArrowSize);
}
}
/* XF-RTL:enable */
.tooltipCover
{
display: none;
position: absolute;
opacity: 0;
z-index: (@_tooltip-zIndex - 1);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&.is-active
{
display: block;
}
}]]></template>
<template title="core_xfmg.less" type="public" addon_id="XFMG" version_id="902000470" version_string="2.0.4"><![CDATA[.xfmgThumbnail
{
display: flex;
position: relative;
width: 100px;
vertical-align: top;
white-space: nowrap;
word-wrap: normal;
text-align: center;
&&.is-selected // increase specificity to ensure overriding of noThumb border
{
border: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
}
&.xfmgThumbnail--fluid
{
width: inherit;
}
&.xfmgThumbnail--smallest
{
width: 50px;
}
&.xfmgThumbnail--small
{
width: 60px;
}
&.xfmgThumbnail--noThumb
{
.xf-contentAltBase();
.xf-blockBorder();
.xfmgThumbnail-icon
{
&::before
{
.m-faContent(@fa-var-ellipsis-h);
}
.xfmgThumbnail--upload&
{
&::before
{
.m-faContent(@fa-var-upload) !important; // has to override the default no thumbnail icon
<xf:macro name="content" template="uix_icons.less" arg-icon="upload" />
}
}
.xfmgThumbnail--audio&
{
&::before
{
.m-faContent(@fa-var-music);
<xf:macro name="content" template="uix_icons.less" arg-icon="audio" />
}
}
.xfmgThumbnail--image&
{
&::before
{
.m-faContent(@fa-var-image);
<xf:macro name="content" template="uix_icons.less" arg-icon="media" />
}
}
.xfmgThumbnail--video&
{
&::before
{
.m-faContent(@fa-var-video-camera);
<xf:macro name="content" template="uix_icons.less" arg-icon="video" />
}
}
.xfmgThumbnail--embed&
{
&::before
{
.m-faContent(@fa-var-youtube-play);
<xf:macro name="content" template="uix_icons.less" arg-icon="youtube" />
}
}
.xfmgThumbnail--album&
{
&::before
{
.m-faContent(@fa-var-folder-open);
<xf:macro name="content" template="uix_icons.less" arg-icon="folder" />
}
}
}
}
&.xfmgThumbnail--notVisible
{
.xfmgThumbnail-image
{
opacity: 0.3;
z-index: @zIndex-2;
}
&.xfmgThumbnail--notVisible--deleted
{
.xfmgThumbnail-icon
{
&::before
{
.m-faContent(@fa-var-trash-o, .79em);
<xf:macro name="content" template="uix_icons.less" arg-icon="delete" />
}
}
}
&.xfmgThumbnail--notVisible--moderated
{
.xfmgThumbnail-icon
{
&::before
{
.m-faContent(@fa-var-shield, .72em);
<xf:macro name="content" template="uix_icons.less" arg-icon="moderate" />
}
}
}
}
}
.xfmgThumbnail-image
{
width: 100%;
height: 100%;
vertical-align: top;
}
.xfmgThumbnail-icon
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: @xf-textColorMuted;
.m-textOutline(@xf-textColorMuted, xf-intensify(@xf-textColorMuted, 20%));
.m-faBase();
font-size: 60px;
.xfmgThumbnail--smallest &,
.xfmgThumbnail--iconSmallest &
{
font-size: 25px;
}
.xfmgThumbnail--small &,
.xfmgThumbnail--iconSmall &
{
font-size: 30px;
}
@media (max-width: @xf-responsiveMedium)
{
font-size: 50px;
}
@media (max-width: @xf-responsiveNarrow)
{
font-size: 30px;
}
}]]></template>
<template title="core_xfrm.less" type="public" addon_id="XFRM" version_id="2000370" version_string="2.0.3"><![CDATA[.avatar.avatar--resourceIconDefault
{
color: @xf-textColorMuted !important;
background: mix(@xf-textColorMuted, @xf-avatarBg, 25%) !important;
text-align: center;
line-height: 1.5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
> span:before
{
.m-faBase();
.m-faContent(@fa-var-cog, .86em);
<xf:macro name="content" template="uix_icons.less" arg-icon="settings" />
vertical-align: -0.03em;
}
}]]></template>
<template title="deletion_macros" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="notice" arg-log="!" arg-message="">
<ul class="listInline listInline--bullet listInline--selfInline">
<xf:if is="$message is not empty">
<li>{$message}</li>
</xf:if>
<li>{{ phrase('deleted_by_x', {'name': $log.delete_username ?: phrase('n_a')}) }}</li>
<xf:if is="{$log}">
<li><xf:date time="{$log.delete_date}" /></li>
<xf:if is="{$log.delete_reason}">
<li>{{ phrase('reason:') }} {$log.delete_reason}</li>
</xf:if>
</xf:if>
</ul>
</xf:macro>]]></template>
<template title="editor.less" type="public" addon_id="XF" version_id="2000970" version_string="2.0.9"><![CDATA[/* XF-RTL:disable */
{{ include('editor_base.less') }}
/* XF-RTL:enable */
// this allows us to ensure that when we scroll the editor into view, this goes below the fixed header
.fr-box.is-scrolling-to:before
{
display: block;
content: '';
.m-stickyHeaderConfig(@xf-publicNavSticky);
height: (@_stickyHeader-height + @_stickyHeader-offset);
margin-top: -(@_stickyHeader-height + @_stickyHeader-offset);
@media (max-height: 360px)
{
display: none;
}
}
.fr-view
{
.m-inputZoomFix();
img.fr-draggable:not(.smilie),
.bbImage
{
max-width: 100%;
height: auto;
}
p
{
margin-bottom: 0;
margin-top: 0;
}
&.fr-element.fr-disabled
{
.xf-inputDisabled() !important;
}
}
.fr-command.fr-btn + .fr-dropdown-menu
{
display: none;
.fr-dropdown-wrapper
{
background: @xf-contentBg;
border: @xf-borderSize solid @xf-borderColor;
}
}
.fr-toolbar .fr-btn.fr-active[data-cmd="xfBbCode"]
{
color: @xf-textColorAttention;
}
.fr-popup
{
background: @xf-contentBg;
}
.fr-popup .fr-input-line
{
padding: 16px 0 8px;
input[type="text"],
textarea
{
.xf-input();
margin: 0;
line-height: @xf-lineHeightDefault;
.m-transition();
.m-transitionProperty(background, color;);
&:focus
{
.xf-input(border);
.xf-inputFocus();
}
.m-inputZoomFix();
}
input + label,
textarea + label
{
line-height: 1.2;
font-size: 12px;
background: transparent;
}
input.fr-not-empty:focus + label,
textarea.fr-not-empty:focus + label
{
color: @xf-textColorMuted;
}
}
.fr-popup .fr-color-hex-layer
{
.fr-input-line
{
padding-top: 16px;
width: 150px;
}
.fr-action-buttons
{
margin-top: 18px;
}
}
.fr-popup .fr-action-buttons
{
height: auto;
button.fr-command
{
.m-buttonBase();
.xf-buttonPrimary();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));
height: auto;
min-width: 0;
line-height: @xf-lineHeightDefault;
&:hover,
&:active,
&:focus
{
// overriding Froala's hover
color: @xf-buttonPrimary--color;
background-color: @xf-uix_buttonPrimaryHover--background-color;
}
}
}
// RTE disabled case
.fr-box textarea.input
{
border-top: none;
.border-radius(0 0 @border-radius @border-radius);
}
.editorDraftIndicator
{
.m-transition();
opacity: 0;
position: absolute;
bottom: 7px;
right: 12px;
width: 7px;
height: 7px;
border-radius: 3.5px;
background: rgb(127, 185, 0);
&.is-active
{
opacity: 1;
}
}
@editorSmiliesBg: xf-intensify(@xf-contentBg, 1%);
.editorSmilies
{
display: none;
border: @xf-borderSize solid @xf-borderColorHeavy;
border-top: none;
background: @xf-editorToolbarBg;
overflow: hidden;
.m-transition();
.m-transitionProperty(all, -xf-height;);
height: 0;
&.is-active
{
display: block;
height: auto;
}
&.is-transitioning
{
display: block;
}
.smilie
{
cursor: pointer;
}
.tabPanes > li
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
}
}
.tabs--editor // takes some hints from .tabs--standalone
{
color: @xf-textColorMuted;
background: @editorSmiliesBg;
font-weight: @xf-fontWeightNormal;
border-bottom: @xf-borderSize solid @xf-borderColor;
.m-tabsTogether(@xf-fontSizeSmall);
.tabs-tab
{
padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
&:hover
{
color: @xf-standaloneTab--color;
}
&.is-active
{
color: @xf-textColorFeature;
border-color: @xf-borderColorFeature;
}
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
@editorSmiliesBg,
@xf-standaloneTab--color,
@xf-standaloneTabSelected--color
);
}
}]]></template>
<template title="editor_base.less" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[/***** froala.less *****/
/***** variables.less *****/
// Theme Name.
@theme: 'theme';
// UI colors
@ui-color: #1E88E5;
@ui-text: #222222;
@ui-hover-light-color: mix(@white, #999, 90%);
@ui-hover-color: mix(@white, #999, 80%);
@ui-focused-color: mix(@white, #999, 60%);
@ui-disabled-color: mix(@white, #000, 74%);
@ui-bg: @white;
@ui-font-size: 14px;
@ui-border-color: #222222;
@ui-border-top: 5px solid @ui-border-color;
// Separator
@separator-size: 1px;
@separator-color: mix(@white, #999, 80%);
// Generic.
@white: #FFF;
@black: #000;
@gray: #CCCCCC;
@font-family: Arial, Helvetica, sans-serif;
@border-radius: 2px;
@arrow-size: 5px;
@transition-timing: 0.2s ease 0s;
// Screen sizes.
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
@screen-lg-max: 'auto';
// Tooltip
@tooltip-bg: #222222;
@tooltip-text: #FFFFFF;
@tooltip-font-size: 11px;
@tooltip-line-height: 22px;
// Editor properties.
@editor-padding: 16px;
@editor-bg: #FFF;
@editor-text: #000;
@editor-shadow-level: 1;
@editor-border: 0px;
// Text selection colors.
@selection-bg: #b5d6fd;
@selection-text: #000;
// Placeholder properties.
@placeholder-size: 12px;
@placeholder-color: #AAA;
// Button colors.
@btn-text: #222222;
@btn-hover-text: #222222;
@btn-hover-bg: @ui-hover-color;
@btn-active-text: @xf-uix_primaryColor;
@btn-active-bg: transparent;
@btn-active-hover-text: @xf-uix_primaryColor;
@btn-active-hover-bg: @btn-hover-bg;
@btn-selected-text: @btn-text;
@btn-selected-bg: @ui-focused-color;
@btn-active-selected-text: @xf-uix_primaryColor;
@btn-active-selected-bg: @btn-selected-bg;
@btn-disabled-color: @ui-disabled-color;
// Button size.
@btn-width: 38px;
@btn-height: 38px;
@btn-margin: 2px;
@btn-font-size: 14px;
// Image.
@image-margin: 5px;
// Image and Video
@handler-size: 12px;
@handler-size-lg: 10px;
// Code View
@code-view-bg: #FFF;
@code-view-text: #000;
// Table properties.
@table-border: 1px solid #DDD;
@table-resizer: 1px solid @ui-color;
// Insert table grid.
@insert-table-grid: @table-border;
// Quick insert.
@floating-btn-bg: #FFF;
@floating-btn-text: @ui-color;
@floating-btn-hover-bg: @ui-hover-color;
@floating-btn-hover-text: @ui-color;
@floating-btn-size: 32px;
@floating-btn-font-size: 14px;
@floating-btn-border: none;
// List menu.
@dropdown-arrow-width: 4px;
@dropdown-item-active-bg: @ui-focused-color;
@dropdown-max-height: 275px;
@dropdown-options-width: 16px;
@dropdown-options-margin-left: -5px;
@dropdown-options-border-left: solid 1px #FAFAFA;
// Image manager.
@modal-bg: @white;
@modal-overlay-color: #000;
// Destroy buttons (delete in image manager).
@modal-destroy-btn-bg: #B8312F;
@modal-destroy-btn-text: @white;
@modal-destroy-btn-hover-bg: mix(contrast(@modal-destroy-btn-bg, @black, @white, 50%), @modal-destroy-btn-bg, 10%);
@modal-destroy-btn-hover-text: @white;
// Popups.
@popup-layer-width: 300px;
// Inputs.
@input-border-color: mix(@white, #000, 74%);
@input-label-color: mix(@white, #000, 50%);
// Quote.
@blockquote-level1-color: #5E35B1;
@blockquote-level2-color: #00BCD4;
@blockquote-level3-color: #43A047;
// Char counter.
@char-counter-border: solid 1px mix(@white, #999, 80%);
@drag-helper-border: solid 1px @ui-color;
@drag-helper-bg: @ui-color;
// ################# CUSTOM OVERRIDES ################
{{ include('editor_override.less') }}
/***** mixins.less *****/
.resize(@val) {
resize: @val;
-moz-resize: @val;
-webkit-resize: @val;
}
.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
}
.transform(@string){
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
}
.box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.border-radius (@radius: 0) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.user-select(@select) {
user-select: @select;
-o-user-select:@select;
-moz-user-select: @select;
-khtml-user-select: @select;
-webkit-user-select: @select;
-ms-user-select: @select;
}
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 0) {
.box-shadow(none);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 1) {
@shadow: 0 (@direction * 1px) 3px rgba(0,0,0,0.12), 0 (@direction * 1px) 1px 1px rgba(0,0,0,0.16);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 2) {
@shadow: 0 (@direction * 3px) 6px rgba(0,0,0,0.16), 0 (@direction * 2px) 2px 1px rgba(0,0,0,0.14);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 3) {
@shadow: 0 (@direction * 5px) 8px rgba(0,0,0,0.19), 0 (@direction * 4px) 3px 1px rgba(0,0,0,0.14);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 4) {
@shadow: 0 (@direction * 8px) 12px rgba(0,0,0,0.25), 0 (@direction * 6px) 3px 1px rgba(0,0,0,0.12);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level >= 5) {
@shadow: 0 (@direction * 10px) 16px rgba(0,0,0,0.30), 0 (@direction * 6px) 8px rgba(0,0,0,0.22);
.box-shadow(@shadow);
}
.clearfix {
&::after {
clear: both;
display: block;
content: "";
height: 0;
}
}
.column-count(@count) {
column-count: @count;
-moz-column-count: @count;
-webkit-column-count: @count;
}
.column-gap(@gap) {
column-gap: @gap;
-moz-column-gap: @gap;
-webkit-column-gap: @gap;
}
.animation (@val) {
-webkit-animation: @val;
-moz-animation: @val;
-o-animation: @val;
animation: @val;
}
.handler-size(@size) {
.fr-handler {
width: @size;
height: @size;
&.fr-hnw {
left: (-@size / 2);
top: (-@size / 2);
}
&.fr-hne {
right: (-@size / 2);
top: (-@size / 2);
}
&.fr-hsw {
left: (-@size / 2);
bottom: (-@size / 2);
}
&.fr-hse {
right: (-@size / 2);
bottom: (-@size / 2);
}
}
}
.font-smoothing() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hide-by-clipping {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.display-inline-flex() {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
/***** core/element.less *****/
.fr-element, .fr-element:focus {
outline: 0px solid transparent;
}
.fr-box.fr-basic {
.fr-element {
color: @editor-text;
padding: @editor-padding;
.box-sizing(border-box);
overflow-x: auto;
min-height: (20px + (2 * @editor-padding));
}
&.fr-rtl {
.fr-element {
text-align: right;
}
}
}
.fr-element {
background: transparent;
position: relative;
z-index: 2;
// CSS rule for iPad not being able to select sometimes.
-webkit-user-select: auto;
// Fix bootstrap select.
a {
.user-select(auto);
}
&.fr-disabled {
.user-select(none);
}
[contenteditable="true"] {
outline: 0px solid transparent;
}
}
.fr-box {
a.fr-floating-btn {
.material-box-shadow (@editor-shadow-level);
.border-radius(100%);
height: @floating-btn-size;
width: @floating-btn-size;
text-align: center;
background: @floating-btn-bg;
color: @floating-btn-text;
.transition(background @transition-timing, color @transition-timing, transform @transition-timing;);
outline: none;
left: 0;
top: 0;
line-height: (@floating-btn-size);
.transform(scale(0));
text-align: center;
display: block;
.box-sizing(border-box);
border: @floating-btn-border;
svg {
.transition(transform @transition-timing;);
fill: @floating-btn-text;
}
i, svg {
font-size: @floating-btn-font-size;
line-height: @floating-btn-size;
}
&.fr-btn + .fr-btn {
margin-left: 10px;
}
&:hover {
background: @floating-btn-hover-bg;
cursor: pointer;
svg {
fill: @floating-btn-hover-text;
}
}
}
.fr-visible {
a.fr-floating-btn {
.transform(scale(1));
}
}
}
/***** core/iframe.less *****/
iframe.fr-iframe {
width: 100%;
border: none;
position: relative;
display: block;
z-index: 2;
.box-sizing(border-box);
}
/***** core/wrapper.less *****/
.fr-wrapper {
position: relative;
z-index: 1;
.clearfix();
.fr-placeholder {
position: absolute;
font-size: @placeholder-size;
color: @placeholder-color;
z-index: 1;
display: none;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
&.show-placeholder {
.fr-placeholder {
display: block;
}
}
::selection {
// background: @selection-bg;
// color: @selection-text;
.xf-uix_textSelection();
}
::-moz-selection {
// background: @selection-bg;
// color: @selection-text;
.xf-uix_textSelection();
}
}
.fr-box.fr-basic {
.fr-wrapper {
background: @editor-bg;
border: @editor-border;
border-top: 0;
top: 0;
left: 0;
}
}
.fr-box.fr-basic {
&.fr-top .fr-wrapper {
border-top: 0;
.border-radius(0 0 @border-radius @border-radius);
.material-box-shadow(@editor-shadow-level);
}
&.fr-bottom .fr-wrapper {
border-bottom: 0;
.border-radius(@border-radius @border-radius 0 0);
.material-box-shadow(@editor-shadow-level, -1);
}
}
@media (min-width: @screen-md) {
.fr-box.fr-document {
min-width: 21cm;
.fr-wrapper {
text-align: center;
padding: 30px;
min-width: 21cm;
background: #EFEFEF;
.fr-element {
text-align: left;
background: #FFF;
width: 21cm;
margin: auto;
min-height: 26cm !important;
padding: 1cm 2cm;
.material-box-shadow(@editor-shadow-level);
overflow: visible;
hr {
margin-left: -2cm;
margin-right: -2cm;
background: #EFEFEF;
height: 1cm;
outline: none;
border: none;
}
}
}
}
}
/***** tooltip.less *****/
.fr-tooltip {
position: absolute;
top: 0;
left: 0;
padding: 0 8px;
.border-radius(@border-radius);
.material-box-shadow(((@editor-shadow-level + 1) * min(@editor-shadow-level, 1)));
background: @tooltip-bg;
color: @tooltip-text;
font-size: @tooltip-font-size;
line-height: @tooltip-line-height;
font-family: @font-family;
.transition(opacity @transition-timing);
.opacity(0);
left: -3000px;
.user-select(none);
z-index: 2147483647;
text-rendering: optimizelegibility;
.font-smoothing();
&.fr-visible {
.opacity(1);
}
}
/***** ui/buttons.less *****/
// Command button.
.fr-toolbar, .fr-popup {
.fr-btn-wrap {
float: left;
white-space: nowrap;
position: relative;
&.fr-hidden {
display: none;
}
}
.fr-command.fr-btn {
background: transparent;
color: @btn-text;
-moz-outline: 0;
outline: 0;
border: 0;
line-height: 1;
cursor: pointer;
text-align: left;
margin: 0px @btn-margin;
.transition(background @transition-timing);
.border-radius(0);
z-index: 2;
position: relative;
.box-sizing(border-box);
text-decoration: none;
.user-select(none);
float: left;
padding: 0;
width: @btn-width;
height: @btn-height;
&::-moz-focus-inner {
border: 0;
padding: 0
}
&.fr-btn-text {
width: auto;
}
i, svg {
display: block;
font-size: @btn-font-size;
width: @btn-font-size;
margin: ((@btn-height - @btn-font-size) / 2) ((@btn-width - @btn-font-size) / 2);
text-align: center;
float: none;
}
// Used for accessibility instead of aria-label.
span.fr-sr-only {
.hide-by-clipping();
}
span {
font-size: @ui-font-size;
display: block;
line-height: (@ui-font-size + 3px);
min-width: (@btn-width - 2 * @btn-margin);
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: (@btn-font-size + 3px);
font-weight: bold;
padding: 0 @btn-margin;
}
img {
margin: ((@btn-height - @btn-font-size) / 2) ((@btn-width - @btn-font-size) / 2);
width: @btn-font-size;
}
// Button is active.
&.fr-active {
color: @btn-active-text;
background: @btn-active-bg;
}
&.fr-dropdown {
&.fr-selection {
width: auto;
span {
font-weight: normal;
}
}
i, span, img, svg {
margin-left: (((@btn-width - @btn-font-size) / 2) - @dropdown-arrow-width);
margin-right: (((@btn-width - @btn-font-size) / 2) + @dropdown-arrow-width);
}
// Dropdown is visible.
&.fr-active {
color: @btn-text;
background: @btn-selected-bg;
&:hover, &:focus {
background: @btn-selected-bg !important;
color: @btn-selected-text !important;
&::after {
border-top-color: @btn-selected-text !important;
}
}
}
&::after {
position: absolute;
width: 0;
height: 0;
border-left: @dropdown-arrow-width solid transparent;
border-right: @dropdown-arrow-width solid transparent;
border-top: @dropdown-arrow-width solid @btn-text;
right: (((@btn-width - @btn-font-size) / 2 - @dropdown-arrow-width) / 2);
top: ((@btn-height - @dropdown-arrow-width) / 2);
content: "";
}
}
&.fr-disabled {
color: @btn-disabled-color;
cursor: default;
&::after {
border-top-color: @btn-disabled-color !important;
}
}
&.fr-hidden {
display: none;
}
}
&.fr-disabled {
.fr-btn, .fr-btn.fr-active {
color: @btn-disabled-color;
&.fr-dropdown::after {
border-top-color: @btn-disabled-color;
}
}
}
&.fr-rtl {
.fr-command.fr-btn {
float: right;
}
}
}
.fr-toolbar.fr-inline {
> .fr-command.fr-btn:not(.fr-hidden), > .fr-btn-wrap:not(.fr-hidden) {
.display-inline-flex();
float: none;
}
}
.fr-desktop {
.fr-command {
// Hover.
&:hover, &:focus, &.fr-btn-hover, &.fr-expanded {
outline: 0;
color: @btn-hover-text;
background: @btn-hover-bg;
&::after {
border-top-color: @btn-hover-text !important;
}
}
// Button is selected.
&.fr-selected {
color: @btn-selected-text;
background: @btn-selected-bg;
}
&.fr-active {
&:hover, &:focus, &.fr-btn-hover, &.fr-expanded {
color: @btn-active-hover-text;
background: @btn-active-hover-bg;
}
&.fr-selected {
color: @btn-active-selected-text;
background: @btn-active-selected-bg;
}
}
&.fr-disabled {
&:hover, &:focus, &.fr-selected {
background: transparent;
}
}
}
&.fr-disabled {
.fr-command {
&:hover, &:focus, &.fr-selected {
background: transparent;
}
}
}
}
.fr-toolbar.fr-mobile, .fr-popup.fr-mobile {
.fr-command.fr-blink {
background: @btn-active-bg;
}
}
/***** ui/dropdown.less *****/
.fr-command.fr-btn {
&.fr-options {
width: @dropdown-options-width;
margin-left: @dropdown-options-margin-left;
&.fr-btn-hover, &:hover, &:focus {
border-left: @dropdown-options-border-left;
}
}
+ .fr-dropdown-menu {
display: inline-block;
position: absolute;
right: auto;
bottom: auto;
height: auto;
z-index: 4;
-webkit-overflow-scrolling: touch;
overflow: hidden;
zoom: 1;
.border-radius(0 0 @border-radius @border-radius);
&.test-height {
.fr-dropdown-wrapper {
.transition(none);
height: auto;
max-height: @dropdown-max-height;
}
}
.fr-dropdown-wrapper {
background: @ui-bg;
padding: 0;
margin: auto;
display: inline-block;
text-align: left;
position: relative;
.box-sizing(border-box);
.transition(max-height @transition-timing);
margin-top: 0;
float: left;
max-height: 0;
height: 0;
margin-top: 0 !important;
.fr-dropdown-content {
overflow: auto;
position: relative;
max-height: @dropdown-max-height;
ul.fr-dropdown-list {
list-style-type: none;
margin: 0;
padding: 0;
li {
padding: 0;
margin: 0;
font-size: 15px;
a {
padding: 0 24px;
line-height: 200%;
display: block;
cursor: pointer;
white-space: nowrap;
color: inherit;
text-decoration: none;
&.fr-active {
background: @dropdown-item-active-bg;
}
&.fr-disabled {
color: @btn-disabled-color;
cursor: default;
}
}
}
}
}
}
}
&:not(.fr-active) {
+ .fr-dropdown-menu {
left: -3000px !important;
}
}
&.fr-active {
+ .fr-dropdown-menu {
display: inline-block;
.material-box-shadow(((@editor-shadow-level + 1) * min(@editor-shadow-level, 1)));
.fr-dropdown-wrapper {
height: auto;
max-height: @dropdown-max-height;
}
}
}
}
.fr-bottom > .fr-command.fr-btn {
+ .fr-dropdown-menu {
.border-radius(@border-radius @border-radius 0 0);
.material-box-shadow((@editor-shadow-level + 1) * min(@editor-shadow-level, 1), -1);
}
}
.fr-toolbar, .fr-popup {
&.fr-rtl {
.fr-dropdown-wrapper {
text-align: right !important;
}
}
}
/***** ui/modal.less *****/
body.prevent-scroll {
overflow: hidden;
&.fr-mobile {
position: fixed;
-webkit-overflow-scrolling: touch;
}
}
.fr-modal {
color: @ui-text;
font-family: @font-family;
position: fixed;
overflow-x: auto;
overflow-y: scroll;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
z-index: 2147483640;
text-rendering: optimizelegibility;
.font-smoothing();
text-align: center;
line-height: 1.2;
&.fr-middle {
.fr-modal-wrapper {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
top: 50%;
left: 50%;
.transform(translate(-50%, -50%));
position: absolute;
}
}
.fr-modal-wrapper {
.border-radius(@border-radius);
margin: 20px auto;
display: inline-block;
background: @modal-bg;
min-width: 300px;
.material-box-shadow(((@editor-shadow-level + 2) * min(@editor-shadow-level, 1)));
border: @editor-border;
border-top: @ui-border-top;
overflow: hidden;
width: 90%;
position: relative;
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
margin: 30px auto;
width: 70%;
}
@media (min-width: @screen-md) {
margin: 50px auto;
width: 960px;
}
.fr-modal-head {
background: @ui-bg;
.material-box-shadow(((@editor-shadow-level + 1) * min(@editor-shadow-level, 1)));
border-bottom: @editor-border;
overflow: hidden;
position: absolute;
width: 100%;
min-height: 42px;
z-index: 3;
.transition(height @transition-timing);
.fr-modal-close {
padding: 12px;
width: 20px;
font-size: 16px;
cursor: pointer;
line-height: 18px;
color: @ui-text;
.box-sizing(content-box);
position: absolute;
top: 0;
right: 0;
.transition(color @transition-timing);
}
h4 {
font-size: 18px;
padding: 12px 10px;
margin: 0;
font-weight: 400;
line-height: 18px;
display: inline-block;
float: left;
}
}
div.fr-modal-body {
height: 100%;
min-height: 150px;
overflow-y: scroll;
padding-bottom: 10px;
&:focus {
outline: 0;
}
button.fr-command {
height: 36px;
line-height: 1;
color: @ui-color;
padding: 10px;
cursor: pointer;
text-decoration: none;
border: none;
background: none;
font-size: 16px;
outline: none;
.transition(background @transition-timing);
.border-radius(@border-radius);
+ button {
margin-left: 24px;
}
&:hover, &:focus {
background: @ui-hover-color;
color: @ui-color;
}
&:active {
background: @ui-focused-color;
color: @ui-color;
}
}
button::-moz-focus-inner {
border: 0;
}
}
}
}
&.fr-desktop .fr-modal-wrapper {
.fr-modal-head {
i:hover {
background: @ui-hover-color;
}
}
}
// Overlay that appears with modal.
.fr-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: @modal-overlay-color;
.opacity(0.5);
z-index: 2147483639;
}
/***** ui/popup.less *****/
.fr-popup {
position: absolute;
display: none;
color: @ui-text;
background: @ui-bg;
.material-box-shadow(@editor-shadow-level);
.border-radius(@border-radius);
font-family: @font-family;
.box-sizing(border-box);
.user-select(none);
margin-top: 10px;
z-index: 2147483635;
text-align: left;
border: @editor-border;
border-top: @ui-border-top;
text-rendering: optimizelegibility;
.font-smoothing();
line-height: 1.2;
.fr-input-focus {
background: @ui-hover-light-color;
}
&.fr-above {
margin-top: -10px;
border-top: 0;
border-bottom: @ui-border-top;
.material-box-shadow(@editor-shadow-level, -1);
}
&.fr-active {
display: block;
}
&.fr-hidden {
.opacity(0);
}
&.fr-empty {
display: none !important;
}
.fr-hs {
display: block !important;
&.fr-hidden {
display: none !important;
}
}
.fr-input-line {
position: relative;
padding: 8px 0;
input[type="text"], textarea {
width: 100%;
margin: 0px 0 1px 0;
border: none;
border-bottom: solid 1px @input-border-color;
color: @ui-text;
font-size: 14px;
padding: 6px 0 2px;
background: rgba(0, 0, 0, 0);
position: relative;
z-index: 2;
.box-sizing(border-box);
&:focus {
border-bottom: solid 2px @ui-color;
margin-bottom: 0px;
}
}
input + label, textarea + label {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: rgba(0, 0, 0, 0);
.transition(color @transition-timing);
z-index: 3;
width: 100%;
display: block;
background: @ui-bg;
}
input.fr-not-empty:focus + label, textarea.fr-not-empty:focus + label {
color: @ui-color;
}
input.fr-not-empty + label, textarea.fr-not-empty + label {
color: @input-label-color;
}
}
input, textarea {
.user-select(text);
.border-radius(0);
outline: none;
}
textarea {
resize: none;
}
.fr-buttons {
.clearfix();
.material-box-shadow(@editor-shadow-level);
padding: 0 @btn-margin;
white-space: nowrap;
line-height: 0;
border-bottom: @editor-border;
.fr-btn {
display: inline-block;
float: none;
i {
float: left;
}
}
.fr-separator {
display: inline-block;
float: none;
}
}
.fr-layer {
width: (@popup-layer-width * 0.75);
@media (min-width: @screen-sm) {
width: @popup-layer-width;
}
.box-sizing(border-box);
margin: 10px;
display: none;
&.fr-active {
display: inline-block;
}
}
.fr-action-buttons {
z-index: 7;
height: 36px;
text-align: right;
button.fr-command {
height: 36px;
line-height: 1;
color: @ui-color;
padding: 10px;
cursor: pointer;
text-decoration: none;
border: none;
background: none;
font-size: 16px;
outline: none;
.transition(background @transition-timing);
.border-radius(@border-radius);
+ button {
margin-left: 24px;
}
&:hover, &:focus {
background: @ui-hover-color;
color: @ui-color;
}
&:active {
background: @ui-focused-color;
color: @ui-color;
}
}
button::-moz-focus-inner {
border: 0;
}
}
.fr-checkbox {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
line-height: 1;
.box-sizing(content-box);
vertical-align: middle;
svg {
margin-left: 2px;
margin-top: 2px;
display: none;
width: 10px;
height: 10px;
}
span {
border: solid 1px @ui-text;
.border-radius(@border-radius);
width: 16px;
height: 16px;
display: inline-block;
position: relative;
z-index: 1;
.box-sizing(border-box);
.transition(background @transition-timing, border-color @transition-timing;);
}
input {
position: absolute;
z-index: 2;
.opacity(0);
border: 0 none;
cursor: pointer;
height: 16px;
margin: 0;
padding: 0;
width: 16px;
top: 1px;
left: 1px;
&:checked + span {
background: @ui-color;
border-color: @ui-color;
svg {
display: block;
}
}
&:focus + span {
border-color: @ui-color;
}
}
}
.fr-checkbox-line {
font-size: 14px;
line-height: 1.4px;
margin-top: 10px;
label {
cursor: pointer;
margin: 0 5px;
vertical-align: middle;
}
}
&.fr-rtl {
direction: rtl;
text-align: right;
.fr-action-buttons {
text-align: left;
}
.fr-input-line {
input + label, textarea + label {
left: auto;
right: 0;
}
}
.fr-buttons .fr-separator.fr-vs {
float: right;
}
}
.fr-arrow {
width: 0;
height: 0;
border-left: @arrow-size solid transparent;
border-right: @arrow-size solid transparent;
border-bottom: @arrow-size solid @ui-border-color;
position: absolute;
top: ((-@arrow-size * 2) + 1);
left: 50%;
margin-left: (-@arrow-size);
display: inline-block;
}
&.fr-above {
.fr-arrow {
top: auto;
bottom: ((-@arrow-size * 2) + 1);
border-bottom: 0;
border-top: @arrow-size solid @ui-border-color;
}
}
}
/***** ui/text_edit.less *****/
.fr-text-edit-layer {
width: 250px;
.box-sizing(border-box);
display: block !important;
}
/***** ui/toolbar.less *****/
.fr-toolbar {
color: @ui-text;
background: @ui-bg;
position: relative;
z-index: 4;
font-family: @font-family;
.clearfix();
.box-sizing(border-box);
.user-select(none);
padding: 0 @btn-margin;
.border-radius(@border-radius);
.material-box-shadow(@editor-shadow-level);
text-align: left;
border: @editor-border;
border-top: @ui-border-top;
text-rendering: optimizelegibility;
.font-smoothing();
line-height: 1.2;
&.fr-rtl {
text-align: right;
}
&.fr-inline {
display: none;
white-space: nowrap;
position: absolute;
margin-top: 10px;
.fr-arrow {
width: 0;
height: 0;
border-left: @arrow-size solid transparent;
border-right: @arrow-size solid transparent;
border-bottom: @arrow-size solid @ui-border-color;
position: absolute;
top: ((-@arrow-size * 2) + 1);
left: 50%;
margin-left: (-@arrow-size);
display: inline-block;
}
&.fr-above {
margin-top: -10px;
.material-box-shadow(@editor-shadow-level, -1);
border-bottom: @ui-border-top;
border-top: 0;
.fr-arrow {
top: auto;
bottom: ((-@arrow-size * 2) + 1);
border-bottom: 0;
border-top-color: inherit;
border-top-style: solid;
border-top-width: @arrow-size;
}
}
}
&.fr-top {
top: 0;
.border-radius(@border-radius @border-radius 0 0);
.material-box-shadow(@editor-shadow-level);
}
&.fr-bottom {
bottom: 0;
.border-radius(0 0 @border-radius @border-radius);
.material-box-shadow(@editor-shadow-level);
}
}
.fr-separator {
background: @separator-color;
display: block;
vertical-align: top;
float: left;
+ .fr-separator {
display: none;
}
&.fr-vs {
height: (@btn-height - 2 * @btn-margin);
width: @separator-size;
margin: @btn-margin;
}
&.fr-hs {
clear: both;
height: @separator-size;
width: calc(100% - (2 * @btn-margin));
margin: 0 @btn-margin;
}
&.fr-hidden {
display: none !important;
}
}
.fr-rtl .fr-separator {
float: right;
}
.fr-toolbar.fr-inline .fr-separator.fr-hs {
float: none;
}
.fr-toolbar.fr-inline .fr-separator.fr-vs {
float: none;
display: inline-block;
}
/***** helpers.less *****/
.fr-visibility-helper {
display: none;
margin-left: 0px !important;
@media (min-width: @screen-sm) {
margin-left: 1px !important;
}
@media (min-width: @screen-md) {
margin-left: 2px !important;
}
@media (min-width: @screen-lg) {
margin-left: 3px !important;
}
}
.fr-opacity-0 {
.opacity(0);
}
.fr-box {
position: relative;
}
/**
* Postion sticky hacks.
*/
.fr-sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}
.fr-sticky-off {
position: relative;
}
.fr-sticky-on {
position: fixed;
&.fr-sticky-ios {
position: absolute;
left: 0;
right: 0;
width: auto !important;
}
}
.fr-sticky-dummy {
display: none;
}
.fr-sticky-on + .fr-sticky-dummy, .fr-sticky-box > .fr-sticky-dummy {
display: block;
}
// Used for accessibility instead of aria-label.
span.fr-sr-only {
.hide-by-clipping();
}
/***** plugins/colors.less *****/
.fr-popup {
.fr-colors-tabs {
.material-box-shadow(@editor-shadow-level);
margin-bottom: 5px;
line-height: 16px;
margin-left: -2px;
margin-right: -2px;
.fr-colors-tab {
display: inline-block;
width: 50%;
cursor: pointer;
text-align: center;
color: @ui-text;
font-size: 13px;
padding: 8px 0;
position: relative;
&:hover, &:focus {
color: @ui-color;
}
&[data-param1="background"]::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: @ui-color;
content: '';
.transition(transform @transition-timing);
}
&.fr-selected-tab {
color: @ui-color;
&[data-param1="text"] ~ [data-param1="background"]::after {
.transform(translate3d(-100%,0,0));
}
}
}
}
.fr-color-hex-layer {
width: 100%;
margin: 0px;
padding: 10px;
.fr-input-line {
float: left;
width: calc(100% - 50px);
padding: 8px 0 0;
}
.fr-action-buttons {
float: right;
width: 50px;
}
.fr-action-buttons {
button {
background-color: @ui-color;
color: #FFF;
.border-radius(@border-radius);
font-size: 13px;
height: 32px;
&:hover {
background-color: darken(@ui-color, 10%);
color: #FFF;
}
}
}
}
.fr-separator + .fr-colors-tabs {
.material-box-shadow(0, 0);
margin-left: 2px;
margin-right: 2px;
}
.fr-color-set {
line-height: 0;
display: none;
&.fr-selected-set {
display: block;
}
> span {
display: inline-block;
width: 32px;
height: 32px;
position: relative;
z-index: 1;
> i, > svg {
text-align: center;
line-height: 32px;
height: 32px;
width: 32px;
font-size: 13px;
position: absolute;
bottom: 0;
cursor: default;
left: 0;
}
.fr-selected-color {
color: @white;
font-family: FontAwesome;
font-size: 13px;
font-weight: 400;
line-height: 32px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
text-align: center;
cursor: default;
}
&:hover, &:focus {
outline: 1px solid @ui-text;
z-index: 2;
}
}
}
}
.fr-rtl .fr-popup {
.fr-colors-tabs {
.fr-colors-tab {
&.fr-selected-tab {
&[data-param1="text"] ~ [data-param1="background"]::after {
.transform(translate3d(100%,0,0));
}
}
}
}
}
/***** plugins/draggable.less *****/
.fr-drag-helper {
background: @drag-helper-bg;
height: 2px;
margin-top: -1px;
.opacity(0.2);
position: absolute;
z-index: 2147483640;
display: none;
&.fr-visible {
display: block;
}
}
.fr-dragging {
.opacity(0.4);
}
/***** plugins/file.less *****/
.fr-popup {
.fr-file-upload-layer {
border: dashed 2px @ui-disabled-color;
padding: 25px 0;
position: relative;
font-size: 14px;
letter-spacing: 1px;
line-height: 140%;
.box-sizing(border-box);
text-align: center;
&:hover {
background: @ui-hover-color;
}
&.fr-drop {
background: @ui-hover-color;
border-color: @ui-color;
}
.fr-form {
.opacity(0);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483640;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
input {
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 500%;
height: 100%;
margin: 0px;
font-size: 400px;
}
}
}
.fr-file-progress-bar-layer {
.box-sizing(border-box);
> h3 {
font-size: 16px;
margin: 10px 0;
font-weight: normal;
}
> div.fr-action-buttons {
display: none;
}
> div.fr-loader {
background: mix(@white, @ui-color, 70%);
height: 10px;
width: 100%;
margin-top: 20px;
overflow: hidden;
position: relative;
span {
display: block;
height: 100%;
width: 0%;
background: @ui-color;
.transition(width @transition-timing);
}
&.fr-indeterminate {
span {
width: 30% !important;
position: absolute;
top: 0;
.animation(loading 2s linear infinite);
}
}
}
&.fr-error {
> div.fr-loader {
display: none;
}
> div.fr-action-buttons {
display: block;
}
}
}
}
@keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-webkit-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-moz-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-o-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
/***** plugins/image.less *****/
.fr-element img {
cursor: pointer;
}
.fr-image-resizer {
position: absolute;
border: solid 1px @ui-color;
display: none;
.user-select(none);
.box-sizing(content-box);
z-index: 2;
&.fr-active {
display: block;
}
.fr-handler {
display: block;
position: absolute;
background: @ui-color;
border: solid 1px @white;
z-index: 4;
.box-sizing(border-box);
&.fr-hnw {
cursor: nw-resize;
}
&.fr-hne {
cursor: ne-resize;
}
&.fr-hsw {
cursor: sw-resize;
}
&.fr-hse {
cursor: se-resize;
}
}
.handler-size(@handler-size);
@media(min-width: @screen-lg) {
.handler-size(@handler-size-lg);
}
}
.fr-image-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2147483640;
display: none;
}
.fr-popup {
.fr-image-upload-layer {
border: dashed 2px @ui-disabled-color;
padding: 25px 0;
position: relative;
font-size: 14px;
letter-spacing: 1px;
line-height: 140%;
text-align: center;
&:hover {
background: @ui-hover-color;
}
&.fr-drop {
background: @ui-hover-color;
border-color: @ui-color;
}
.fr-form {
.opacity(0);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483640;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
input {
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 500%;
height: 100%;
margin: 0px;
font-size: 400px;
}
}
}
.fr-image-progress-bar-layer {
> h3 {
font-size: 16px;
margin: 10px 0;
font-weight: normal;
}
> div.fr-action-buttons {
display: none;
}
> div.fr-loader {
background: mix(@white, @ui-color, 70%);
height: 10px;
width: 100%;
margin-top: 20px;
overflow: hidden;
position: relative;
span {
display: block;
height: 100%;
width: 0%;
background: @ui-color;
.transition(width @transition-timing);
}
&.fr-indeterminate {
span {
width: 30% !important;
position: absolute;
top: 0;
.animation(loading 2s linear infinite);
}
}
}
&.fr-error {
> div.fr-loader {
display: none;
}
> div.fr-action-buttons {
display: block;
}
}
}
}
.fr-image-size-layer {
.fr-image-group {
.fr-input-line {
width: calc(50% - 5px);
display: inline-block;
+ .fr-input-line {
margin-left: 10px;
}
}
}
}
.fr-uploading {
.opacity(0.4);
}
@keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-webkit-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-moz-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-o-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
/* Files: froala.less, plugins/colors.less, plugins/draggable.less, plugins/file.less, plugins/image.less */]]></template>
<template title="find_threads_list" type="public" addon_id="XF" version_id="2000053" version_string="2.0.0 Release Candidate 3"><![CDATA[<xf:if is="$pageSelected == 'started'">
<xf:title page="{$page}">{{ phrase('threads_started_by_x', {'username': $user.username}) }}</xf:title>
<xf:elseif is="$pageSelected == 'contributed'" />
<xf:title page="{$page}">{{ phrase('threads_with_posts_by_x', {'username': $user.username}) }}</xf:title>
<xf:else />
<xf:title page="{$page}">{{ phrase('threads_with_no_replies') }}</xf:title>
<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
</xf:if>
<xf:macro name="navigation" arg-pageSelected="{$pageSelected}" />
<xf:if is="$threads is not empty">
<xf:if is="$canInlineMod">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<div class="block" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="thread" data-href="{{ link('inline-mod') }}">
<xf:if contentcheck="true">
<div class="block-outer">
<xf:contentcheck>
<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
link="find-threads/{$pageSelected}"
wrapperclass="block-outer-main" />
<xf:if is="$canInlineMod">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:macro template="inline_mod_macros" name="button" />
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<div class="block-container">
<div class="block-body">
<div class="structItemContainer">
<xf:foreach loop="$threads" value="$thread">
<xf:set var="$extra" value=""/>
<xf:macro template="thread_list_macros" name="item"
arg-thread="{$thread}"
arg-allowEdit_xxx="{{ false }}" />
</xf:foreach>
</div>
</div>
</div>
<xf:if contentcheck="true">
<xf:contentcheck>
<xf:pagenav link="find-threads/{$pageSelected}" page="{$page}" perpage="{$perPage}" total="{$total}"
wrapperclass="block-outer block-outer--after" />
</xf:contentcheck>
</xf:if>
</div>
<xf:else />
<div class="blockMessage">{{ phrase('there_no_threads_to_display') }}</div>
</xf:if>
<xf:macro name="navigation" arg-pageSelected="!">
<xf:if is="property('findThreadsNavStyle') == 'tabs'">
<div class="tabs tabs--standalone">
<div class="hScroller" data-xf-init="h-scroller">
<span class="hScroller-scroll">
<xf:macro name="links"
arg-pageSelected="{$pageSelected}"
arg-baseClass="tabs-tab"
arg-selectedClass="is-active" />
</span>
</div>
</div>
<xf:else />
<xf:sidenav>
<div class="block">
<div class="block-container">
<h3 class="block-header">{{ phrase('thread_lists') }}</h3>
<div class="block-body">
<xf:macro name="links"
arg-pageSelected="{$pageSelected}"
arg-baseClass="blockLink"
arg-selectedClass="is-selected" />
</div>
</div>
</div>
<xf:widgetpos id="find_threads_sidebar" />
</xf:sidenav>
<xf:page option="sideNavTitle">{{ phrase('thread_lists') }}</xf:page>
</xf:if>
</xf:macro>
<xf:macro name="links" arg-pageSelected="!" arg-baseClass="!" arg-selectedClass="!">
<a class="{$baseClass} {{ $pageSelected == 'started' ? {$selectedClass} : '' }}"
href="{{ link('find-threads/started') }}" rel="nofollow">{{ phrase('your_threads') }}</a>
<a class="{$baseClass} {{ $pageSelected == 'contributed' ? {$selectedClass} : '' }}"
href="{{ link('find-threads/contributed') }}" rel="nofollow">{{ phrase('threads_with_your_posts') }}</a>
<a class="{$baseClass} {{ $pageSelected == 'unanswered' ? {$selectedClass} : '' }}"
href="{{ link('find-threads/unanswered') }}" rel="nofollow">{{ phrase('unanswered_threads') }}</a>
<a class="{$baseClass} {{ $pageSelected == 'watched' ? {$selectedClass} : '' }}"
href="{{ link('watched/threads') }}" rel="nofollow">{{ phrase('watched_threads') }}</a>
</xf:macro>]]></template>
<template title="forum_list" type="public" addon_id="XF" version_id="2000970" version_string="2.0.9"><![CDATA[<xf:h1>{{ phrase('forum_list') }}</xf:h1>
<xf:if is="{$xf.options.forumsDefaultPage} != 'forums'">
<xf:title>{{ phrase('forum_list') }}</xf:title>
</xf:if>
<xf:page option="uix_mainTabSets" value="forum" />
<xf:page option="uix_mainTabActive" value="forum_list" />
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$xf.options.boardDescription}"
arg-canonicalUrl="{{ link('canonical:' . $selfRoute) }}" />
<xf:wrap template="forum_overview_wrapper">
<xf:set var="$pageSelected">forums</xf:set>
</xf:wrap>
<xf:widgetpos id="forum_list_sidebar" position="sidebar" />
<xf:widgetpos id="forum_list_above_nodes" />
<div class="uix_nodeList block">
<xf:macro name="node_list" arg-children="{$nodeTree}" arg-extras="{$nodeExtras}" />
</div>
<xf:widgetpos id="forum_list_below_nodes" />
<xf:head option="rss_forum"><link rel="alternate" type="application/rss+xml" title="{{ phrase('rss_feed_for_x', {'title': $xf.options.boardTitle})|for_attr }}" href="{{ link('forums/index.rss', '-') }}" /></xf:head>
<xf:macro name="node_list_entry" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<xf:css src="node_list.less" />
<xf:set var="$nodeTemplate" value="{{ $node.getNodeTemplateRenderer($depth) }}" />
<xf:if is="$nodeTemplate.macro">
<xf:macro template="{$nodeTemplate.template}" name="{$nodeTemplate.macro}"
arg-node="{$node}"
arg-extras="{$extras}"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{$depth}" />
<xf:elseif is="{$nodeTemplate.template}" />
<xf:include template="{$nodeTemplate.template}" />
</xf:if>
</xf:macro>
<xf:macro name="node_list" arg-children="!" arg-extras="!" arg-depth="1">
<xf:css src="node_list.less" />
<xf:foreach loop="$children" key="$id" value="$child">
<xf:macro name="node_list_entry"
arg-node="{$child.record}" arg-extras="{$extras.{$id}}"
arg-children="{$child.children}" arg-childExtras="{$extras}"
arg-depth="{$depth}"
/>
</xf:foreach>
</xf:macro>
<xf:macro name="sub_node_list" arg-children="!" arg-childExtras="!" arg-depth="3">
<xf:if contentcheck="true">
<ol>
<xf:contentcheck>
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}" arg-extras="{$childExtras}" arg-depth="{{ $depth + 1 }}"
/>
</xf:contentcheck>
</ol>
</xf:if>
</xf:macro>
<xf:macro name="sub_nodes_flat" arg-children="!" arg-childExtras="!" arg-depth="3">
<xf:css src="node_list.less" />
<xf:if contentcheck="true">
<div class="node-subNodesFlat">
<span class="node-subNodesLabel">{{ phrase('sub_forums:') }}</span>
<ol class="node-subNodeFlatList">
<xf:contentcheck>
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}" arg-extras="{$childExtras}" arg-depth="{{ $depth + 1 }}"
/>
</xf:contentcheck>
</ol>
</div>
</xf:if>
</xf:macro>
<xf:macro name="sub_nodes_menu" arg-children="!" arg-childExtras="!" arg-depth="3">
<xf:css src="node_list.less" />
<xf:if contentcheck="true">
<div class="node-subNodeMenu">
<a class="menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">
<span>{{ phrase('sub_forums') }}</span>
<xf:macro name="icon" template="uix_icons.less" arg-icon="folder" />
</a>
<div class="menu" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('sub_forums') }}</h4>
<ol class="subNodeMenu">
<xf:contentcheck>
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}" arg-extras="{$childExtras}" arg-depth="{{ $depth + 1 }}"
/>
</xf:contentcheck>
</ol>
</div>
</div>
</div>
</xf:if>
</xf:macro>]]></template>
<template title="forum_new_posts" type="public" addon_id="XF" version_id="2000670" version_string="2.0.6"><![CDATA[<xf:h1>{{ phrase('new_posts') }}</xf:h1>
<xf:if is="{$xf.options.forumsDefaultPage} != 'new_posts'">
<xf:title page="{$page}">{{ phrase('new_posts') }}</xf:title>
</xf:if>
<xf:page option="uix_mainTabSets" value="forum" />
<xf:page option="uix_mainTabActive" value="new_posts" />
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$xf.options.boardDescription}" />
<xf:if is="$page > 1 OR $originalFindNewId">
<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
</xf:if>
<xf:if is="$page <= 1">
<xf:macro template="metadata_macros" name="canonical_url" arg-canonicalUrl="{{ link('canonical:' . $selfRoute) }}" />
</xf:if>
<xf:wrap template="forum_overview_wrapper">
<xf:set var="$pageSelected">new_posts</xf:set>
</xf:wrap>
<xf:widgetpos id="forum_new_posts_sidebar" position="sidebar" />
<xf:if is="$canInlineMod">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<div class="block" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="thread" data-href="{{ link('inline-mod') }}">
<xf:comment>
<xf:if is="$findNew.result_count">
<div class="block-outer"><xf:trim>
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$findNew.result_count}"
link="forums/new-posts" params="{{ {'f': $findNew.find_new_id} }}"
wrapperclass="block-outer-main" />
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:contentcheck>
<xf:macro template="whats_new_posts" name="buttons"
arg-findNew="{$findNew}"
arg-canInlineMod="{$canInlineMod}" />
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:trim></div>
</xf:if>
</xf:comment>
<div class="block-container">
<xf:macro template="whats_new_posts" name="filter_bar"
arg-findNew="{$findNew}"
arg-rerunRoute="forums/new-posts"
arg-rerunQuery="{{ {'f': $findNew.find_new_id} }}"
arg-filterRoute="forums/new-posts" />
<xf:macro template="whats_new_posts" name="results"
arg-findNew="{$findNew}"
arg-threads="{$threads}"
arg-latestRoute="forums/new-posts" />
</div>
<xf:if is="$findNew.result_count">
<div class="block-outer block-outer--after">
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$findNew.result_count}"
link="forums/new-posts" params="{{ {'f': $findNew.find_new_id} }}"
wrapperclass="block-outer-main" />
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:contentcheck>
<xf:macro template="whats_new_posts" name="buttons"
arg-findNew="{$findNew}"
arg-canInlineMod="{$canInlineMod}" />
</xf:contentcheck>
</div>
</div>
</xf:if>
<xf:showignored wrapperclass="block-outer-opposite" />
</div>
</xf:if>
</div>]]></template>
<template title="forum_overview_wrapper" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:ad position="forum_overview_top" />
<xf:widgetpos id="forum_overview_top" />
<xf:if is="{{ property('uix_removeIndexPageTitle')}}">
<xf:page option="uix_hidePageTitle">1</xf:page>
</xf:if>
<xf:pageaction>
<xf:if is="!property('uix_removeWhatsNewButtons')">
<xf:if is="$pageSelected == 'new_posts' ">
<xf:button href="{{ link('forums/list') }}" icon="list">
{{ phrase('forum_list') }}
</xf:button>
<xf:else />
<xf:button href="{{ $xf.options.forumsDefaultPage == 'new_posts' ? link('forums/new-posts') : link('whats-new/posts') }}" icon="bolt">
{{ phrase('new_posts') }}
</xf:button>
</xf:if>
</xf:if>
<xf:if is="$xf.visitor.canCreateThread()">
<xf:button href="{{ link('forums/create-thread') }}" class="button--cta" icon="write" overlay="true">
{{ phrase('post_thread...') }}
</xf:button>
</xf:if>
</xf:pageaction>
{$innerContent|raw}
<xf:ad position="forum_overview_bottom" />
<xf:widgetpos id="forum_overview_bottom" />]]></template>
<template title="forum_view" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[<xf:title page="{$page}">{$forum.Node.title}</xf:title>
<xf:description>{$forum.Node.description|raw}</xf:description>
<xf:page option="uix_mainTabSets" value="forum" />
<xf:page option="uix_mainTabActive" value="forum_list" />
<xf:macro template="metadata_macros" name="canonical_url"
arg-canonicalUrl="{{ link('canonical:forums', $forum, $canonicalFilters + {'page': $page}) }}" />
<xf:head option="rss_forum"><link rel="alternate" type="application/rss+xml" title="{{ phrase('rss_feed_for_x', {'title': $forum.title})|for_attr }}" href="{{ link('forums/index.rss', $forum) }}" /></xf:head>
<xf:macro template="forum_macros" name="forum_page_options" arg-forum="{$forum}" />
<xf:breadcrumb source="$forum.getBreadcrumbs(false)" />
<xf:pageaction if="$forum.canCreateThread()">
<xf:button href="{{ link('forums/post-thread', $forum) }}" class="button--cta uix_quickPost--button" icon="write">
{{ phrase('post_thread') }}
</xf:button>
</xf:pageaction>
<xf:if is="$pendingApproval">
<div class="blockMessage blockMessage--important">{{ phrase('content_submitted_displayed_pending_approval') }}</div>
</xf:if>
<xf:if is="$nodeTree">
<xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" />
<div class="block uix_nodeList block">
<div class="block-container">
<div class="block-body">
<xf:macro template="forum_list" name="node_list"
arg-children="{$nodeTree}"
arg-extras="{$nodeExtras}"
arg-depth="2" />
</div>
</div>
</div>
<xf:ad position="forum_view_below_node_list" arg-forum="{$forum}" />
</xf:if>
<xf:if is="$canInlineMod">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<xf:ad position="forum_view_above_thread_list" arg-forum="{$forum}" />
<div class="block" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="thread" data-href="{{ link('inline-mod') }}">
<div class="block-outer"><xf:trim>
<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}"
link="forums" data="{$forum}" params="{$filters}"
wrapperclass="block-outer-main" />
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$canInlineMod">
<xf:macro template="inline_mod_macros" name="button" />
</xf:if>
<xf:if is="$xf.visitor.user_id">
<xf:button href="{{ link('forums/mark-read', $forum, {'date': $xf.time}) }}"
class="button--link" overlay="true">
{{ phrase('mark_read') }}
</xf:button>
</xf:if>
<xf:if is="$forum.canWatch()">
<xf:button href="{{ link('forums/watch', $forum) }}" class="button--link"
data-xf-click="switch-overlay"
data-sk-watch="{{ phrase('watch') }}"
data-sk-unwatch="{{ phrase('unwatch') }}">
<xf:if is="{$forum.Watch.{$xf.visitor.user_id}}">{{ phrase('unwatch') }}<xf:else />{{ phrase('watch') }}</xf:if>
</xf:button>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:trim></div>
<xf:set var="$dateLimits" value="{{ {
'-1': phrase('any_time'),
'7': phrase('x_days', {'days': '7'}),
'14': phrase('x_days', {'days': '14'}),
'30': phrase('x_days', {'days': '30'}),
'60': phrase('x_months', {'months': '2'}),
'90': phrase('x_months', {'months': '3'}),
'182': phrase('x_months', {'months': '6'}),
'365': phrase('1_year')
} }}" />
<xf:set var="$sortOrders" value="{{ {
'last_post_date': phrase('last_message'),
'post_date': phrase('first_message'),
'title': phrase('title'),
'reply_count': phrase('replies'),
'view_count': phrase('views'),
'first_post_likes': phrase('first_message_likes')
} }}" />
<div class="block-container uix_discussionList">
<div class="block-filterBar">
<div class="filterBar">
<xf:if contentcheck="true">
<ul class="filterBar-filters">
<xf:contentcheck>
<xf:if is="$filters.prefix_id">
<li><a href="{{ link('forums', $forum, $filters|replace('prefix_id', null)) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('prefix:') }}</span>
{{ prefix_title('thread', $filters.prefix_id) }}</a></li>
</xf:if>
<xf:if is="$filters.starter_id AND $starterFilter">
<li><a href="{{ link('forums', $forum, $filters|replace('starter_id', null)) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('started_by:') }}</span>
{$starterFilter.username}</a></li>
</xf:if>
<xf:if is="$filters.last_days AND {$dateLimits.{$filters.last_days}}">
<li><a href="{{ link('forums', $forum, $filters|replace('last_days', null)) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('last_updated:') }}</span>
{$dateLimits.{$filters.last_days}}</a></li>
</xf:if>
<xf:if is="$filters.order AND {$sortOrders.{$filters.order}}">
<li><a href="{{ link('forums', $forum, $filters|replace({'order': null, 'direction': null})) }}"
class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('return_to_default_order')|for_attr }}">
<span class="filterBar-filterToggle-label">{{ phrase('sort_by:') }}</span>
{$sortOrders.{$filters.order}}
<i class="fa {{ $filters.direction == 'asc' ? 'fa-angle-up' : 'fa-angle-down' }}" aria-hidden="true"></i>
<span class="u-srOnly"><xf:if is="$filters.direction == 'asc'">{{ phrase('ascending') }}<xf:else />{{ phrase('descending') }}</xf:if></span>
</a></li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a>
<div class="menu menu--wide" data-menu="menu" aria-hidden="true"
data-href="{{ link('forums/filters', $forum, $filters) }}"
data-load-target=".js-filterMenuBody">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('show_only:') }}</h4>
<div class="js-filterMenuBody">
<div class="menu-row">{{ phrase('loading...') }}</div>
</div>
</div>
</div>
</div>
</div>
<xf:set var="$qtPos">{{ ($sortInfo.order == 'last_post_date' && $sortInfo.direction == 'asc') ? 'bottom' : 'top' }}</xf:set>
<div class="block-body">
<div class="structItemContainer">
<xf:macro template="thread_list_macros" name="quick_thread"
arg-forum="{$forum}"
arg-page="{$page}"
arg-order="{$sortInfo.order}"
arg-direction="{$sortInfo.direction}" />
<xf:if is="$stickyThreads is not empty OR $threads is not empty">
<xf:if is="$stickyThreads is not empty">
<xf:if is="{{ property('uix_separateThreads') }} && $stickyThreads is not empty AND $threads is not empty">
<h3 class="block-minorHeader uix_threadListSeparator">
{{ phrase('th_sticky_threads') }}
<xf:if is="{{ property('uix_collapsibleStickyThreads') }}">
<a href="#" class="uix_threadCollapseTrigger"><i class="mdi mdi-chevron-down"></i></a>
</xf:if>
</h3>
</xf:if>
<div class="uix_stickyContainerOuter">
<div class="structItemContainer-group structItemContainer-group--sticky">
<xf:foreach loop="$stickyThreads" value="$thread">
<xf:macro template="thread_list_macros" name="item" arg-thread="{$thread}" arg-forum="{$forum}" />
</xf:foreach>
</div>
</div>
<xf:ad position="forum_view_below_stickies" arg-forum="{$forum}" />
</xf:if>
<div class="structItemContainer-group js-threadList">
<xf:if is="$threads is not empty">
<xf:if is="{{ property('uix_separateThreads') }} && $stickyThreads is not empty AND $threads is not empty">
<h3 class="block-minorHeader uix_threadListSeparator">{{ phrase('th_normal_threads') }}</h3>
</xf:if>
<xf:foreach loop="$threads" value="$thread">
<xf:macro template="thread_list_macros" name="item" arg-thread="{$thread}" arg-forum="{$forum}" />
</xf:foreach>
<xf:if is="$showDateLimitDisabler">
<div class="structItem structItem--note">
<div class="structItem-cell">
<a href="{{ link('forums', $forum, $filters + {'page': $page, 'no_date_limit': 1}) }}">
{{ phrase('show_older_items') }}
</a>
</div>
</div>
</xf:if>
</xf:if>
</div>
<xf:elseif is="$filters" />
<div class="structItemContainer-group js-threadList">
<div class="structItem js-emptyThreadList">
<div class="structItem-cell">{{ phrase('there_no_threads_matching_your_filters') }}</div>
</div>
</div>
<xf:else />
<div class="structItemContainer-group js-threadList">
<div class="structItem js-emptyThreadList">
<div class="structItem-cell">{{ phrase('there_no_threads_in_this_forum') }}</div>
</div>
</div>
</xf:if>
</div>
</div>
</div>
<div class="block-outer block-outer--after">
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$total}"
link="forums" data="{$forum}" params="{$filters}"
wrapperclass="block-outer-main" />
<xf:showignored wrapperclass="block-outer-opposite" />
<xf:if is="!$forum.canCreateThread()">
<div class="block-outer-opposite">
<xf:if is="$xf.visitor.user_id">
<span class="button is-disabled">
{{ phrase('no_permission_to_post') }}
<!-- this is not interactive so shouldn't be a button element -->
</span>
<xf:else />
<xf:button href="{{ link('login') }}" class="button--link" overlay="true">
{{ phrase('log_in_or_register_to_post') }}
</xf:button>
</xf:if>
</div>
</xf:if>
</div>
</div>
<xf:ad position="forum_view_below_thread_list" arg-forum="{$forum}" />
<xf:widgetpos id="forum_view_sidebar" context-forum="{$forum}" position="sidebar" />]]></template>
<template title="helper_js_global" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="head" arg-app="!">
<xf:set var="$faVer">4.7.0</xf:set>
<xf:set var="$cssUrls" value="{{ ['public:normalize.css', 'public:core.less', $app . ':app.less'] }}" />
<xf:if is="$xf.options.fontAwesomeSource == 'local'">
<xf:set var="$cssUrls" value="{{ array_merge($cssUrls, ['public:font_awesome.css']) }}" />
<link rel="preload" href="{{ base_url('styles/fonts/fa/fontawesome-webfont.woff2?v=' . $faVer) }}" as="font" type="font/woff2" crossorigin="anonymous" />
</xf:if>
<xf:if is="is_addon_active('ThemeHouse/UIX') && is_addon_active('ThemeHouse/UIX') >= 2000490">
<xf:set var="$cssUrls" value="{{ uix_extra_css_urls($cssUrls) }}" />
</xf:if>
<link rel="stylesheet" href="{{ css_url($cssUrls) }}" />
<xf:if is="$xf.options.fontAwesomeSource != 'local'">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/{$faVer}/css/font-awesome.min.css" />
</xf:if>
<xf:if is="{{ property('uix_localMaterialIcons')}}">
<link rel="stylesheet" href="{{ base_url(property('uix_imagePath')) }}/fonts/icons/material-icons/css/materialdesignicons.min.css" />
<xf:else />
<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css">
</xf:if>
<!--XF:CSS-->
<xf:if is="property('uix_googleFonts')">
<link href='//fonts.googleapis.com/css?family={{ property('uix_googleFonts') }}' rel='stylesheet' type='text/css'>
</xf:if>
<xf:if is="$xf.fullJs">
<script src="{{ js_url('vendor/modernizr/modernizr.min.js') }}"></script>
<script src="{{ js_url('xf/preamble.js') }}"></script>
<xf:else />
<script src="{{ js_url('xf/preamble-compiled.js') }}"></script>
</xf:if>
<meta name="apple-mobile-web-app-capable" content="yes">
</xf:macro>
<xf:macro name="body" arg-app="!" arg-jsState="{{ null }}">
<xf:corejs />
<!--XF:JS-->
<xf:if is="property('uix_buttonRipple')"><xf:js src="themehouse/{{property('uix_jsPath')}}/ripple.js" min="themehouse/{{property('uix_jsPath')}}/ripple.min.js" /></xf:if>
<xf:include template="uix_js" />
<xf:if is="property('uix_parallax')">
<xf:js src="themehouse/{{property('uix_jsPath')}}/vendor/parallax/parallax.js" min="themehouse/uix/vendor/parallax/parallax.min.js" />
</xf:if>
<xf:if is="property('uix_backstretch')">
<xf:js src="themehouse/{{property('uix_jsPath')}}/vendor/backstretch/jquery.backstretch.js" min="themehouse/uix/vendor/backstretch/jquery.backstretch.min.js" />
</xf:if>
<script>
jQuery.extend(true, XF.config, {
// <!--[XF:js_global:xf_extend_start]-->
userId: {$xf.visitor.user_id},
url: {
fullBase: '{{ base_url(null, true)|escape("js") }}',
basePath: '{{ base_url(null, false)|escape("js") }}',
css: '{{ css_url(["__SENTINEL__"], false)|escape("js") }}',
keepAlive: '{{ link_type($app, "login/keep-alive")|escape("js") }}'
},
cookie: {
path: '{{ $xf.cookie.path|escape("js") }}',
domain: '{{ $xf.cookie.domain|escape("js") }}',
prefix: '{{ $xf.cookie.prefix|escape("js") }}',
secure: {{ $xf.cookie.secure ? 'true' : 'false' }}
},
csrf: '{{ csrf_token()|escape("js") }}',
js: {'<!--XF:JS:JSON-->'},
css: {'<!--XF:CSS:JSON-->'},
time: {
now: {$xf.time},
today: {$xf.timeDetails.today},
todayDow: {$xf.timeDetails.todayDow}
},
borderSizeFeature: '{{ property('borderSizeFeature') }}',
enableRtnProtect: {{ $xf.enableRtnProtect ? 'true' : 'false' }},
enableFormSubmitSticky: {{ property('formSubmitSticky') ? 'true' : 'false' }},
uploadMaxFilesize: {$xf.uploadMaxFilesize},
visitorCounts: {
conversations_unread: '{$xf.visitor.conversations_unread|number}',
alerts_unread: '{$xf.visitor.alerts_unread|number}',
total_unread: '{{ ($xf.visitor.conversations_unread + $xf.visitor.alerts_unread)|number }}',
title_count: {{ in_array($xf.options.displayVisitorCount, ['title_count', 'title_and_icon']) ? 'true' : 'false' }},
icon_indicator: {{ in_array($xf.options.displayVisitorCount, ['icon_indicator', 'title_and_icon']) ? 'true' : 'false' }}
},
jsState: {{ $jsState ? $jsState|json|raw : '{}' }}
});
jQuery.extend(XF.phrases, {
// <!--[XF:js_global:xf_phrase_start]-->
date_x_at_time_y: "{{ phrase('date_x_at_time_y')|escape('js') }}",
day_x_at_time_y: "{{ phrase('day_x_at_time_y')|escape('js') }}",
yesterday_at_x: "{{ phrase('yesterday_at_x')|escape('js') }}",
x_minutes_ago: "{{ phrase('x_minutes_ago')|escape('js') }}",
one_minute_ago: "{{ phrase('one_minute_ago')|escape('js') }}",
a_moment_ago: "{{ phrase('a_moment_ago')|escape('js') }}",
today_at_x: "{{ phrase('today_at_x')|escape('js') }}",
in_a_moment: "{{ phrase('in_a_moment')|escape('js') }}",
in_a_minute: "{{ phrase('in_a_minute')|escape('js') }}",
in_x_minutes: "{{ phrase('in_x_minutes')|escape('js') }}",
later_today_at_x: "{{ phrase('later_today_at_x')|escape('js') }}",
tomorrow_at_x: "{{ phrase('tomorrow_at_x')|escape('js') }}",
day0: "{{ phrase('day_sunday')|escape('js') }}",
day1: "{{ phrase('day_monday')|escape('js') }}",
day2: "{{ phrase('day_tuesday')|escape('js') }}",
day3: "{{ phrase('day_wednesday')|escape('js') }}",
day4: "{{ phrase('day_thursday')|escape('js') }}",
day5: "{{ phrase('day_friday')|escape('js') }}",
day6: "{{ phrase('day_saturday')|escape('js') }}",
dayShort0: "{{ phrase('day_sunday_short')|escape('js') }}",
dayShort1: "{{ phrase('day_monday_short')|escape('js') }}",
dayShort2: "{{ phrase('day_tuesday_short')|escape('js') }}",
dayShort3: "{{ phrase('day_wednesday_short')|escape('js') }}",
dayShort4: "{{ phrase('day_thursday_short')|escape('js') }}",
dayShort5: "{{ phrase('day_friday_short')|escape('js') }}",
dayShort6: "{{ phrase('day_saturday_short')|escape('js') }}",
month0: "{{ phrase('month_1')|escape('js') }}",
month1: "{{ phrase('month_2')|escape('js') }}",
month2: "{{ phrase('month_3')|escape('js') }}",
month3: "{{ phrase('month_4')|escape('js') }}",
month4: "{{ phrase('month_5')|escape('js') }}",
month5: "{{ phrase('month_6')|escape('js') }}",
month6: "{{ phrase('month_7')|escape('js') }}",
month7: "{{ phrase('month_8')|escape('js') }}",
month8: "{{ phrase('month_9')|escape('js') }}",
month9: "{{ phrase('month_10')|escape('js') }}",
month10: "{{ phrase('month_11')|escape('js') }}",
month11: "{{ phrase('month_12')|escape('js') }}",
active_user_changed_reload_page: "{{ phrase('active_user_changed_reload_page')|escape('js') }}",
server_did_not_respond_in_time_try_again: "{{ phrase('server_did_not_respond_in_time_try_again')|escape('js') }}",
oops_we_ran_into_some_problems: "{{ phrase('oops_we_ran_into_some_problems')|escape('js') }}",
oops_we_ran_into_some_problems_more_details_console: "{{ phrase('oops_we_ran_into_some_problems_more_details_console')|escape('js') }}",
file_too_large_to_upload: "{{ phrase('file_too_large_to_upload')|escape('js') }}",
uploaded_file_is_too_large_for_server_to_process: "{{ phrase('uploaded_file_is_too_large_for_server_to_process')|escape('js') }}",
files_being_uploaded_are_you_sure: "{{ phrase('files_being_uploaded_are_you_sure')|escape('js') }}",
attach: "{{ phrase('button.attach')|escape('js') }}",
rich_text_box: "{{ phrase('rich_text_box')|escape('js') }}",
close: "{{ phrase('close')|escape('js') }}",
showing_x_of_y_items: "{{ phrase('showing_x_of_y_items')|escape('js') }}",
showing_all_items: "{{ phrase('showing_all_items')|escape('js') }}",
no_items_to_display: "{{ phrase('no_items_to_display')|escape('js') }}"
});
</script>
<form style="display:none" hidden="hidden">
<input type="text" name="_xfClientLoadTime" value="" id="_xfClientLoadTime" title="_xfClientLoadTime" tabindex="-1" />
</form>
<xf:if is="$xf.visitor.canSearch() && $xf.request.getFullRequestUri() === link('full:index')">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "{{ link('canonical:index')|escape('js') }}",
"potentialAction": {
"@type": "SearchAction",
"target": "{{ link('canonical:search/search')|escape('js') . ($xf.options.useFriendlyUrls ? '?' : '&') . 'keywords={search_keywords}' }}",
"query-input": "required name=search_keywords"
}
}
</script>
</xf:if>
</xf:macro>]]></template>
<template title="login" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:js src="xf/login_signup.js" min="1" />
<xf:page option="uix_hideExtendedFooter" value="1" />
<xf:page option="uix_hideNotices" value="1" />
<xf:page option="uix_hideBreadcrumb" value="1" />
<xf:comment><xf:page option="uix_hideNavigation" value="1" /></xf:comment>
<xf:title>{{ phrase('log_in') }}</xf:title>
<xf:if contentcheck="true">
<div class="blockMessage blockMessage--error blockMessage--iconic">
<xf:contentcheck>{$error}</xf:contentcheck>
</div>
</xf:if>
<div class="blocks">
<xf:form action="{{ link('login/login') }}" class="block">
<div class="block-container">
<div class="block-body">
<xf:if is="$uix_loginPreventAutoFocus">
<xf:textboxrow name="login" value="{$login}" autocomplete="username"
label="{{ phrase('your_name_or_email_address') }}" />
<xf:else/>
<xf:textboxrow name="login" value="{$login}" autofocus="autofocus" autocomplete="username"
label="{{ phrase('your_name_or_email_address') }}" />
</xf:if>
<xf:textboxrow name="password" type="password" autocomplete="current-password"
label="{{ phrase('password') }}">
<xf:html>
<a class="uix_forgotPassWord__link" href="{{ link('lost-password') }}" data-xf-click="overlay">{{ phrase('forgot_your_password') }}</a>
</xf:html>
</xf:textboxrow>
<xf:if is="$captcha">
<xf:captcharow label="{{ phrase('verification') }}" force="true" />
</xf:if>
<xf:checkboxrow>
<xf:option name="remember" selected="true">{{ phrase('stay_logged_in') }}</xf:option>
</xf:checkboxrow>
<xf:hiddenval name="_xfRedirect">{$redirect}</xf:hiddenval>
</div>
<xf:submitrow icon="login" />
</div>
<xf:if is="$xf.options.registrationSetup.enabled">
<div class="block-outer block-outer--after uix_login__registerLink">
<div class="block-outer-middle">
{{ phrase('dont_have_account_question') }} <a href="{{ link('register') }}">{{ phrase('register_now') }}</a>
</div>
</div>
</xf:if>
</xf:form>
<xf:if is="$providers is not empty">
<div class="blocks-textJoiner"><span></span><em>{{ phrase('or_separator') }} {{ phrase('log_in_using') }}</em><span></span></div>
<div class="block uix_loginProvider__row">
<div class="block-container">
<div class="block-body">
<xf:formrow rowtype="button">
<ul class="listHeap">
<xf:foreach loop="$providers" value="$provider">
<li>
<xf:button href="{{ link('register/connected-accounts', $provider, {'setup': true}) }}"
class="button--provider button--provider--{$provider.provider_id}">
{$provider.title}
</xf:button>
</li>
</xf:foreach>
</ul>
</xf:formrow>
</div>
</div>
</div>
</xf:if>
</div>]]></template>
<template title="member.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[@_memberHeader-padding: @xf-paddingLarge;
@_memberHeader-avatarSize: @avatar-l;
@_memberHeader-avatarSizeShrunk: @avatar-m;
.uix_memberHeader__extra {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.memberHeader
{
.m-clearFix();
}
.memberHeader-main
{
.xf-memberHeader();
}
.memberHeader-avatar
{
float: left;
padding: @_memberHeader-padding;
img,
.avatar
{
display: block;
}
}
.memberHeader-content
{
padding: @_memberHeader-padding;
padding-left: ((@_memberHeader-padding) * 2 + (@_memberHeader-avatarSize));
}
.memberHeader-actionTop
{
float: right;
}
.memberHeader-name
{
margin: 0;
margin-top: -.15em;
padding: 0;
font-weight: @xf-fontWeightNormal;
.xf-memberHeaderName();
}
.memberHeader-banners,
.memberHeader-blurb
{
margin-top: @xf-paddingSmall;
}
.memberHeader-separator
{
margin: @_memberHeader-padding 0;
border: none;
border-top: @xf-borderSize solid @xf-borderColorLight;
}
.memberHeader-stats
{
font-size: @xf-fontSizeLarge;
.pairs.pairs--row
{
min-width: 100px;
}
}
@media (max-width: @xf-responsiveMedium)
{
.memberHeader-avatar .avatar
{
.m-avatarSize(@_memberHeader-avatarSizeShrunk);
}
.memberHeader-content
{
padding-left: ((@_memberHeader-padding) * 2 + (@_memberHeader-avatarSizeShrunk));
}
}
@media (max-width: @xf-responsiveNarrow)
{
.memberHeader-avatar
{
display: block;
float: none;
padding-bottom: 0;
text-align: center;
.avatar
{
display: inline-block;
}
}
.memberHeader-content
{
padding-left: @_memberHeader-padding;
}
.memberHeader-main .memberHeader-content
{
display: flex;
flex-direction: column;
padding-top: 0;
min-height: 0;
text-align: center;
}
.memberHeader-name
{
text-align: center;
margin-top: 0;
}
.memberHeader-actionTop
{
float: none;
order: 2;
margin-top: @xf-paddingSmall;
}
.memberHeader-buttons
{
text-align: center;
}
.memberHeader-banners,
.memberHeader-blurb
{
text-align: inherit;
}
}
.block-tabHeader.block-tabHeader--memberTabs
{
border-bottom: none;
}
.memberOverviewBlocks
{
.m-listPlain();
display: flex;
flex-wrap: wrap;
align-items: stretch;
> li
{
.has-no-flexbox &
{
display: inline-block;
vertical-align: top;
}
width: 33.3%;
max-width: 100%;
padding: @xf-blockPaddingV @xf-blockPaddingH;
@media (max-width: 1150px)
{
width: 50%;
}
@media (max-width: 580px)
{
width: 100%;
}
}
}
.memberOverviewBlock
{
display: flex;
flex-direction: column;
}
.memberOverviewBlock-list
{
.m-listPlain();
> li
{
margin: @xf-paddingMedium 0;
}
}
.memberOverviewBlock-seeMore
{
.xf-minorBlockContent();
padding: @xf-paddingSmall;
text-align: center;
// pushes this to the bottom with flex box
margin-top: auto;
}]]></template>
<template title="member_notable" type="public" addon_id="XF" version_id="2000170" version_string="2.0.1"><![CDATA[<xf:title>{{ $active ? $active.title : phrase('notable_members') }}</xf:title>
<xf:wrap template="member_wrapper">
<xf:set var="$pageSelected" value="{{ $active ? $active.member_stat_key : 'overview' }}" />
</xf:wrap>
<xf:macro template="metadata_macros" name="canonical_url" arg-canonicalUrl="{{ link('canonical:members') }}" />
<xf:css src="member.less" />
<xf:if is="$userNotFound">
<div class="blockMessage blockMessage--error blockMessage--iconic">{{ phrase('specified_member_cannot_be_found_enter_entire_name') }}</div>
</xf:if>
<xf:if is="$memberStats is empty">
<div class="blockMessage">{{ phrase('no_notable_members_can_currently_be_shown') }}</div>
<xf:else />
<section class="block">
<div class="block-container">
<xf:if is="$active">
<ol class="block-body">
<xf:foreach loop="{$resultsData.{$active.member_stat_key}}" key="$userId" value="$data">
<li class="block-row block-row--separated">
<xf:macro template="member_list_macros" name="item"
arg-user="{$data.user}"
arg-extraData="{$data.value}"
arg-extraDataBig="{{ true }}" />
</li>
<xf:else />
<li class="block-row">{{ phrase('no_users_match_specified_criteria') }}</li>
</xf:foreach>
</ol>
<xf:else />
<div class="block-body">
<ol class="memberOverviewBlocks">
<xf:foreach loop="$memberStats" key="$key" value="$memberStat">
<xf:macro name="overview_block"
arg-memberStat="{$memberStat}"
arg-results="{$resultsData.{$key}}" />
</xf:foreach>
</ol>
</div>
</xf:if>
</div>
</section>
</xf:if>
<xf:macro name="overview_block"
arg-memberStat="!"
arg-results="!"
arg-showTitle="{{ true }}"
arg-showFooter="{{ true }}">
<xf:if contentcheck="true">
<li class="memberOverviewBlock">
<div class="uix_memberOverviewBlockContent">
<xf:if is="$showTitle">
<h3 class="block-textHeader">
<a href="{{ link('members', null, {'key': $memberStat.member_stat_key}) }}"
class="memberOverViewBlock-title">{$memberStat.title}</a>
</h3>
</xf:if>
<ol class="memberOverviewBlock-list">
<xf:contentcheck>
<xf:foreach loop="$results" key="$userId" value="$data">
<li>
<xf:macro name="overview_row" arg-data="{$data}" />
</li>
</xf:foreach>
</xf:contentcheck>
</ol>
<xf:if is="$showFooter">
<div class="memberOverviewBlock-seeMore">
<a href="{{ link('members', null, {'key': $memberStat.member_stat_key}) }}">{{ phrase('see_more...') }}</a>
</div>
</xf:if>
</div>
</li>
</xf:if>
</xf:macro>
<xf:macro name="overview_row" arg-data="!">
<div class="contentRow contentRow--alignMiddle">
<div class="contentRow-figure">
<xf:avatar user="$data.user" size="xs" />
</div>
<div class="contentRow-main">
<xf:if is="$data.value">
<div class="contentRow-extra contentRow-extra--large">{$data.value}</div>
</xf:if>
<h3 class="contentRow-title"><xf:username user="$data.user" rich="true" /></h3>
</div>
</div>
</xf:macro>]]></template>
<template title="member_recent_content" type="public" addon_id="XF" version_id="2000053" version_string="2.0.0 Release Candidate 3"><![CDATA[<xf:title>{{ phrase('recent_content_by_x', {'name': $user.username}) }}</xf:title>
<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
<xf:breadcrumb href="{{ link('members', $user) }}">{$user.username}</xf:breadcrumb>
<xf:css src="search_results.less" />
<xf:if is="$resultCount">
<div class="block">
<div class="block-container">
<ol class="block-body">
<xf:foreach loop="$results" value="$result">
{{ $result.render()|raw }}
</xf:foreach>
</ol>
<div class="block-footer">
<span class="block-footer-controls"><xf:button href="{{ link('search/member', null, {'user_id': $user.user_id}) }}" rel="nofollow">
{{ phrase('see_more') }}
</xf:button></span>
</div>
</div>
</div>
<xf:else />
<div class="block-container">
<div class="block-row">{{ phrase('x_has_not_posted_any_content_recently', {'name': $user.username}) }}</div>
</div>
</xf:if>]]></template>
<template title="member_tooltip.less" type="public" addon_id="XF" version_id="2000270" version_string="2.0.2"><![CDATA[@_memberTooltip-padding: @xf-paddingMedium;
@_memberTooltip-avatarSize: @avatar-s;
.memberTooltip-header
{
display: table;
table-layout: fixed;
width: 100%;
padding: @_memberTooltip-padding;
.xf-memberTooltipHeader();
}
.memberTooltip-avatar
{
// display: table-cell;
// width: ((@_memberTooltip-padding) * 2 + (@_memberTooltip-avatarSize));
vertical-align: top;
padding-right: @_memberTooltip-padding;
}
.memberTooltip-headerInfo
{
// display: table-cell;
vertical-align: top;
flex-grow: 1;
}
.memberTooltip-name
{
margin: 0;
margin-top: -.15em;
padding: 0;
font-weight: @xf-fontWeightNormal;
line-height: .8 * (@xf-lineHeightDefault);
.xf-memberTooltipName();
.m-hiddenLinks();
}
.memberTooltip-headerAction
{
float: right;
}
.memberTooltip-banners {
margin: -2px;
.userBanner {margin: 2px;}
}
.memberTooltip-banners,
.memberTooltip-blurb
{
margin-top: .25em;
}
.memberTooltip-blurb
{
font-size: @xf-fontSizeSmall;
}
.memberTooltip-stats
{
font-size: @xf-fontSizeSmall;
dl.pairs.pairs--rows > dt
{
font-size: @xf-fontSizeSmaller;
}
}
.memberTooltip-info,
.memberTooltip-actions
{
padding: @_memberTooltip-padding;
.button {
.xf-uix_buttonSmall;
}
}
.memberTooltip-separator
{
margin: -@xf-borderSize @_memberTooltip-padding 0;
border: none;
border-top: @xf-borderSize solid @xf-borderColorLight;
}]]></template>
<template title="member_view" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:title page="{$page}">{$user.username}</xf:title>
<xf:h1 hidden="true" />
<xf:if is="$xf.visitor.user_id == $user.user_id">
<xf:page option="uix_myAccountLinks" value="profile" />
</xf:if>
<xf:macro template="metadata_macros" name="metadata"
arg-shareUrl="{{ link('canonical:members', $user) }}"
arg-canonicalUrl="{{ link('canonical:members', $user, {'page': $page}) }}"
arg-imageUrl="{$user.getAvatarUrl('o', null, true)}" />
<xf:page option="ldJsonHtml">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "{$user.username|escape('json')}",
"image": "{$user.getAvatarUrl('o', null, true)|escape('json')}"
}
</script>
</xf:page>
<xf:css src="member.less" />
<div class="block">
<div class="block-container">
<div class="block-body">
<div class="memberHeader">
<div class="memberHeader-main">
<span class="memberHeader-avatar">
<xf:avatar user="{$user}" size="l" href="" update="{{ link('account/avatar', $user) }}" />
</span>
<div class="memberHeader-content memberHeader-content--info">
<xf:if contentcheck="true">
<div class="memberHeader-actionTop">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$user.canBeReported()">
<xf:button href="{{ link('members/report', $user) }}"
class="button--link" overlay="true">
{{ phrase('report') }}
</xf:button>
</xf:if>
<xf:if contentcheck="true">
<div class="buttonGroup-buttonWrapper">
<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator_tools') }}</xf:button>
<div class="menu" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<h3 class="menu-header">{{ phrase('moderator_tools') }}</h3>
<xf:contentcheck>
<xf:macro template="member_macros" name="moderator_menu_actions"
arg-user="{$user}"
arg-context="profile" />
</xf:contentcheck>
</div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
<h1 class="memberHeader-name"><xf:username user="{$user}" rich="true" href="" /></h1>
<xf:if contentcheck="true">
<div class="memberHeader-banners">
<xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>
</div>
</xf:if>
<xf:userblurb user="$user" tag="div" class="memberHeader-blurb" />
</div>
</div>
<div class="memberHeader-content">
<div class="memberHeader-stats">
<div class="pairJustifier">
<xf:macro template="member_macros" name="member_stat_pairs"
arg-user="{$user}"
arg-context="profile" />
</div>
</div>
<xf:if contentcheck="true">
<hr class="memberHeader-separator" />
<div class="uix_memberHeader__extra">
<xf:if contentcheck="true">
<dl class="pairs pairs--inline memberHeader-blurb">
<dt>{{ phrase('last_seen') }}</dt>
<dd dir="auto">
<xf:contentcheck><xf:useractivity user="$user" class="pairs--plainLabel" /></xf:contentcheck>
</dd>
</dl>
</xf:if>
<div class="memberHeader-buttons">
<xf:contentcheck>
<xf:macro template="member_macros" name="member_action_buttons"
arg-user="{$user}"
arg-context="profile" />
</xf:contentcheck>
</div>
</div>
</xf:if>
</div>
</div>
</div>
</div>
</div>
<xf:ad position="member_view_below_tabs" arg-user="{$user}" />
<h2 class="block-tabHeader block-tabHeader--memberTabs tabs hScroller"
data-xf-init="tabs h-scroller"
data-panes=".js-memberTabPanes"
data-state="replace"
role="tablist">
<span class="hScroller-scroll">
<!--[XF:tabs:start]-->
<xf:if is="$user.canViewPostsOnProfile()">
<a href="{{ link('members', $user) }}"
class="tabs-tab is-active"
role="tab"
aria-controls="profile-posts">{{ phrase('profile_posts') }}</a>
</xf:if>
<xf:if is="$user.canViewLatestActivity()">
<a href="{{ link('members/latest-activity', $user) }}"
rel="nofollow"
class="tabs-tab"
id="latest-activity"
role="tab">{{ phrase('latest_activity') }}</a>
</xf:if>
<a href="{{ link('members/recent-content', $user) }}"
rel="nofollow"
class="tabs-tab"
id="recent-content"
role="tab">{{ phrase('postings') }}</a>
<!--[XF:tabs:after_recent_content]-->
<a href="{{ link('members/about', $user) }}"
class="tabs-tab"
id="about"
role="tab">{{ phrase('about') }}</a>
<xf:if is="$xf.visitor.canViewWarnings() && $user.warning_count">
<a href="{{ link('members/warnings', $user) }}"
class="tabs-tab"
id="warnings"
role="tab">{{ phrase('warnings') }}</a>
</xf:if>
<!--[XF:tabs:end]-->
</span>
</h2>
<ul class="tabPanes js-memberTabPanes">
<!--[XF:tab_panes:start]-->
<xf:if is="$user.canViewPostsOnProfile()">
<li class="is-active" role="tabpanel" id="profile-posts">
<xf:js src="xf/inline_mod.js" min="1" />
<div class="block block--messages" data-xf-init="inline-mod" data-type="profile_post" data-href="{{ link('inline-mod') }}">
<div class="block-container">
<div class="block-body js-replyNewMessageContainer">
<xf:if is="$user.canPostOnProfile()">
<xf:set var="$firstProfilePost" value="{$profilePosts|first}" />
<xf:macro template="profile_post_macros" name="submit"
arg-user="{$user}"
arg-lastDate="{{ $firstProfilePost.post_date ?: 0 }}"
arg-containerSelector="< .js-replyNewMessageContainer" />
</xf:if>
<xf:if is="$profilePosts is not empty">
<xf:foreach loop="$profilePosts" value="$profilePost">
<xf:macro template="profile_post_macros"
name="{{ $profilePost.message_state == 'deleted' ? 'profile_post_deleted' : 'profile_post' }}"
arg-profilePost="{$profilePost}" />
</xf:foreach>
<xf:else />
<div class="block-row js-replyNoMessages">{{ phrase('there_no_messages_on_xs_profile_yet', {'name': $user.username}) }}</div>
</xf:if>
</div>
</div>
<div class="block-outer block-outer--after">
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$total}"
link="members" data="{$user}"
wrapperclass="block-outer-main" />
<div class="block-outer-opposite">
<xf:showignored />
<xf:if is="$canInlineMod">
<xf:macro template="inline_mod_macros" name="button" />
</xf:if>
</div>
</div>
</div>
</li>
</xf:if>
<xf:if is="$user.canViewLatestActivity()">
<li data-href="{{ link('members/latest-activity', $user) }}" role="tabpanel" aria-labelledby="latest-activity">
<div class="blockMessage">{{ phrase('loading...') }}</div>
</li>
</xf:if>
<li data-href="{{ link('members/recent-content', $user) }}" role="tabpanel" aria-labelledby="recent-content">
<div class="blockMessage">{{ phrase('loading...') }}</div>
</li>
<!--[XF:tab_panes:after_recent_content]-->
<li data-href="{{ link('members/about', $user) }}" role="tabpanel" aria-labelledby="about">
<div class="blockMessage">{{ phrase('loading...') }}</div>
</li>
<xf:if is="$xf.visitor.canViewWarnings() && $user.warning_count">
<li data-href="{{ link('members/warnings', $user) }}" role="tabpanel" aria-labelledby="warnings">
<div class="blockMessage">{{ phrase('loading...') }}</div>
</li>
</xf:if>
<!--[XF:tab_panes:end]-->
</ul>
<xf:widgetpos id="member_view_sidebar" context-user="{$user}" position="sidebar" />]]></template>
<template title="message.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[@_message-actionColumnWidth: 40px;
@_messageSimple-userColumnWidth: 70px;
.message
{
+ .message,
&.message--bordered
{
border-top: @xf-borderSize solid @xf-borderColor;
}
}
.message,
.block--messages .message
{
&.is-mod-selected
{
background: @xf-inlineModHighlightColor;
.message-userArrow:after
{
border-right-color: @xf-messageUserBlock--backgorund-color;
}
}
}
.message-inner
{
display: flex;
.has-no-flexbox &
{
display: table;
table-layout: fixed;
width: 100%;
}
}
.message-cell
{
display: block;
vertical-align: top;
padding: @xf-messagePadding;
.has-no-flexbox &
{
display: table-cell;
}
.message--quickReply &
{
//padding-bottom: 35px; // for the submit row
> .formRow:last-child
{
> dd
{
padding-bottom: 0;
}
}
}
&.message-cell--closer
{
padding: @xf-messagePaddingSmall;
&.message-cell--main
{
padding-left: ((@xf-messagePaddingSmall) * 1.5);
}
&.message-cell--user
{
.m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePaddingSmall));
.message--simple &
{
.m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * (@xf-messagePaddingSmall));
}
}
&.message-cell--action
{
.m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePaddingSmall));
}
}
&.message-cell--user,
&.message-cell--action
{
position: relative;
.xf-messageUserBlock(no-border);
border-right: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
min-width: 0;
}
&.message-cell--user
{
.m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePadding));
.message--simple &
{
.m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * @xf-messagePaddingSmall);
// width: auto;
// min-width: auto;
// background: none;
// border: none;
padding-right: 0;
}
}
&.message-cell--action
{
.m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePadding));
}
&.message-cell--main
{
// padding-left: (@xf-messagePadding * 1.5);
flex: 1 1 auto;
width: 100%;
// display: flex;
min-width: 0;
.xf-uix_messageMain();
&.is-editing
{
padding: 0;
}
.block
{
margin: 0;
}
.block-container
{
margin: 0;
border: none;
}
}
&.message-cell--alert
{
font-size: @xf-fontSizeSmall;
flex: 1 1 auto;
width: 100%;
min-width: 0;
.xf-contentAccentBase();
a
{
.xf-contentAccentLink();
}
}
}
.message-main
{
height: 100%;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
}
.message-content
{
flex: 1 1 auto;
// IE11 flex bug
min-height: 1px;
max-width: 100%;
}
.message-footer
{
margin-top: auto;
}
form.message--simple .message-cell--main {
flex-direction: column;
padding: @xf-paddingLarge;
}
.message--quickReply .message-cell--main {
flex-direction: column;
padding: @xf-messagePadding;
}
@media (max-width: @xf-messageSingleColumnWidth)
{
.message:not(.message--forceColumns)
{
.message-inner
{
display: block;
}
.message-cell
{
display: block;
.m-clearFix();
&.message-cell--user
{
width: auto;
border-right: none;
border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
}
&.message-cell--main
{
// padding-left: @xf-messagePadding;
}
}
}
.message--simple:not(.message--forceColumns),
.message--quickReply:not(.message--forceColumns)
{
.message-cell.message-cell--user
{
display: none;
}
}
}
// ######################## USER COLUMN #########################
.message-userArrow
{
position: absolute;
top: (@xf-messagePadding) * 2;
right: -1px;
.m-triangleLeft(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);
<xf:if is="property('uix_removeMessageArrow')">
display: none;
</xf:if>
&:after
{
position: absolute;
top: -(@xf-messagePadding - 1px);
right: -@xf-messagePadding;
content: "";
.m-triangleLeft(@xf-contentBg, @xf-messagePadding - 1px);
}
}
.message-avatar
{
text-align: center;
margin-bottom: 3px;
.avatar
{
vertical-align: bottom;
max-width: @xf-messageUserBlockWidth;
max-height: @xf-messageUserBlockWidth;
}
}
.message-avatar-wrapper
{
position: relative;
display: inline-block;
vertical-align: bottom;
.message-avatar-online
{
position: absolute;
top: -3px;
left: -3px;
// border: 7px solid transparent;
// border-left-color: rgb(127, 185, 0);
// border-top-color: rgb(127, 185, 0);
// border-radius: (@xf-avatarBorderRadius + 1) max(0px, @xf-avatarBorderRadius - 1px) 0 max(0px, @xf-avatarBorderRadius - 1);
height: 10px;
width: 10px;
background: rgb(127, 185, 0);
border-radius: 100%;
}
}
.message-name
{
font-weight: @xf-fontWeightHeavy;
font-size: inherit;
text-align: center;
margin: 0;
}
.message-userTitle
{
font-size: @xf-fontSizeSmaller;
font-weight: normal;
text-align: center;
margin: 0;
}
.message-userBanner.userBanner
{
@media (min-width: @xf-messageSingleColumnWidth) {
display: block;
}
margin-top: 3px;
}
.message-userExtras
{
// margin-top: 3px;
font-size: @xf-fontSizeSmaller;
<xf:if is="property('uix_postBitIcons')">
dl.pairs dt:after {content:'';}
.pairs {
display: flex;
align-items: center;
i {font-size: 18px;}
dd {
min-width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
}
</xf:if>
}
.message--deleted
{
.message-userDetails
{
display: none;
}
.message-avatar .avatar
{
.m-avatarSize(@avatar-s);
}
}
.message-cell--user
{
.message-date,
.message-permalink
{
display: none;
}
}
@media (min-width: @xf-messageSingleColumnWidth) {
.message-userDetails {text-align: center;}
}
@media (max-width: @xf-messageSingleColumnWidth)
{
.uix_messagePostBitWrapper {
display: flex;
flex-grow: 1;
flex-direction: column;
min-width: 0;
max-width: 100%;
}
.message:not(.message--forceColumns)
{
.message-userArrow
{
top: auto;
right: auto;
bottom: -1px;
left: ((@avatar-s) / 2);
border: none;
.m-triangleUp(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding);
&:after
{
top: auto;
right: auto;
left: -(@xf-messagePadding - 1px);
bottom: -@xf-messagePadding;
border: none;
.m-triangleUp(@xf-contentBg, @xf-messagePadding - 1px);
}
}
&.is-mod-selected
{
.message-userArrow:after
{
border-color: transparent;
border-bottom-color: @xf-inlineModHighlightColor;
}
}
.message-user
{
display: flex;
.has-no-flexbox &
{
display: table;
width: 100%;
}
}
.message-avatar
{
margin-bottom: 0;
.has-no-flexbox &
{
display: table-cell;
width: 1%;
}
.avatar
{
.m-avatarSize(@avatar-s);
}
}
.message-userDetails
{
flex: 1;
min-width: 0;
padding-left: @xf-messagePadding;
width: 100%;
.has-no-flexbox &
{
display: table-cell;
}
}
.message-userExtras {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: @xf-messagePadding;
padding-top: @xf-paddingSmall;
.pairs {
margin-right: @xf-paddingMedium;
line-height: 1.3;
}
}
.message-name
{
text-align: left;
}
.message-userTitle,
.message-userBanner.userBanner
{
display: inline-block;
text-align: left;
margin: 0;
}
.message--deleted
{
.message-userDetails
{
display: block;
}
}
}
}
// ####################### MAIN COLUMN ####################
.message-content
{
position: relative;
.js-selectToQuoteEnd
{
height: 0;
font-size: 0;
overflow: hidden;
}
.message--multiQuoteList &
{
min-height: 80px;
max-height: 120px;
overflow: hidden;
.message-body
{
pointer-events: none;
}
}
}
.message-attribution
{
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmaller;
border-bottom: @xf-borderSize solid @xf-borderColorFaint;
padding-bottom: 3px;
// .m-clearFix();
.xf-uix_messageMeta;
&.message-attribution--plain
{
border-bottom: none;
font-size: inherit;
padding-bottom: 0;
}
}
.message-attribution-main { float: left; }
.message-attribution-opposite { float: right; }
.message-attribution-source
{
font-size: @xf-fontSizeSmaller;
margin-bottom: @xf-paddingSmall;
}
.message-attribution-user
{
font-weight: @xf-fontWeightHeavy;
.avatar
{
display: none;
}
.attribution
{
display: inline;
font-size: inherit;
font-weight: inherit;
margin: 0;
}
}
.message-newIndicator
{
.xf-messageNewIndicator();
}
.message-minorHighlight
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorFeature;
padding-left: @xf-messagePadding;
padding-right: @xf-messagePadding;
}
.message-fields
{
margin: @xf-messagePadding 0;
.xf-uix_threadField();
}
.message-body
{
margin: @xf-messagePadding 0;
font-family: @xf-fontFamilyBody;
.xf-uix_messageBody();
.message--simple &
{
margin-top: @xf-messagePaddingSmall;
margin-bottom: @xf-messagePaddingSmall;
}
&:last-child
{
margin-bottom: 0;
}
}
.message-attachments
{
margin: .5em 0;
.xf-uix_messageAttachments();
}
.message-attachments-list
{
.m-listPlain();
}
.message-lastEdit
{
margin-top: .5em;
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmallest;
text-align: right;
padding: 0 @xf-messagePadding @xf-messagePadding;
}
.message-signature
{
margin-top: @xf-messagePadding;
.xf-messageSignature();
}
.message-actionBar .actionBar-set
{
// margin-top: @xf-messagePadding;
font-size: @xf-fontSizeSmall;
// padding: calc( @xf-messagePadding / 2 );
.message--simple &
{
// margin-top: @xf-messagePaddingSmall;
}
}
.message .likesBar
{
// .xf-minorBlockContent();
// font-size: @xf-fontSizeSmaller;
margin-top: @xf-messagePadding;
padding: @xf-messagePaddingSmall;
.xf-uix_messageLikes();
}
.message-historyTarget
{
margin-top: @xf-messagePadding;
}
.message-gradient
{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, @xf-contentBg, 0%, 90%);
}
.message-responses
{
margin-top: @xf-messagePaddingSmall;
font-size: @xf-fontSizeSmall;
}
.message-responseRow
{
margin-top: -@xf-minorBlockContent--border-width;
.xf-minorBlockContent();
padding: @xf-messagePadding;
// note that border radiuses are very difficult to do here due to a lot of dynamic showing/hiding
&.message-responseRow--likes
{
.m-transitionFadeDown();
}
}
@media (max-width: @xf-messageSingleColumnWidth)
{
.message:not(.message--forceColumns)
{
.message-attribution-user .avatar
{
display: inline-block;
.m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
}
.message-content
{
// this is 1px to workaround an IE11 issue - see #139187
min-height: 1px;
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.message-signature
{
display: none;
}
}
// MESSAGE MENU
.message-menuGroup
{
display: inline-block;
}
.message-menuTrigger
{
display: inline-block;
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, 1em);
//font-size: 120%;
text-align: right;
}
&:hover:after
{
color: black;
}
}
.message-menu-section
{
&--editDelete
{
.menu-linkRow
{
font-weight: @xf-fontWeightHeavy;
font-size: @xf-fontSizeNormal;
}
}
}
.message-menu-link
{
&--delete i:after
{
.m-faContent(@fa-var-trash-o);
}
&--edit i:after
{
.m-faContent(@fa-var-edit);
}
&--report i:after
{
.m-faContent(@fa-var-frown-o);
}
&--warn i:after
{
.m-faContent(@fa-var-warning);
}
&--spam i:after
{
.m-faContent(@fa-var-ban);
}
&--ip i:after
{
.m-faContent(@fa-var-sitemap);
}
&--history i:after
{
.m-faContent(@fa-var-history);
}
&--follow i:after
{
.m-faContent(@fa-var-user-plus);
}
&--ignore i:after
{
.m-faContent(@fa-var-user-times);
}
&--share i:after
{
.m-faContent(@fa-var-share-alt);
}
}
// ############################# COMMENTS ###############
.comment
{
}
.comment-inner
{
display: table;
table-layout: fixed;
width: 100%;
}
.comment-avatar
{
display: table-cell;
width: 24px;
vertical-align: top;
.avatar,
img
{
vertical-align: bottom;
}
}
.comment-main
{
display: table-cell;
padding-left: @xf-messagePadding;
vertical-align: top;
}
.comment-contentWrapper
{
margin-bottom: @xf-messagePaddingSmall;
}
.message-responses .comment-actionBar.actionBar {padding: 0;}
.message-responses .comment-actionBar .actionBar-set.actionBar-set--internal {padding: 0;}
.comment-user
{
font-weight: @xf-fontWeightHeavy;
}
.comment-body
{
display: inline;
}
.comment-input
{
display: block;
height: 2.34em;
margin-bottom: @xf-messagePaddingSmall;
}
.comment-actionBar .actionBar-set
{
// margin-top: @xf-messagePaddingSmall;
color: @xf-textColorMuted;
}
.comment-likes
{
.m-transitionFadeDown();
margin-top: @xf-messagePaddingSmall;
font-size: @xf-fontSizeSmaller;
}
// ######################### ACTION BAR #######################
.actionBar
{
.m-clearFix();
.xf-uix_messageActionBar();
}
.actionBar-set
{
&.actionBar-set--internal
{
float: left;
margin-left: -3px;
> .actionBar-action:first-child
{
margin-left: 0;
}
}
&.actionBar-set--external
{
float: right;
margin-right: -3px;
> .actionBar-action:last-child
{
margin-right: 0;
}
}
}
// ################################## MESSAGE QUICK REPLY ADDITIONS #############
.formSubmitRow.formSubmitRow--messageQr
{
.formSubmitRow-controls
{
text-align: center;
padding-left: 0;
padding-right: 0;
margin-left: @xf-messagePadding;
margin-right: @xf-messagePadding;
@media (max-width: @xf-formResponsive)
{
text-align: right;
}
.menu & {text-align: right;}
}
}
// ################################## MESSAGE NOTICES #############################
.messageNotice
{
margin: @xf-messagePaddingSmall 0;
padding: @xf-messagePaddingSmall @xf-messagePadding;
.xf-contentAccentBase();
font-size: @xf-fontSizeSmaller;
border-left: @xf-borderSizeMinorFeature solid @xf-borderColorAttention;
.xf-uix_messageNotice();
a,
a:hover
{
.xf-contentAccentLink();
}
&:first-child
{
margin-top: 0;
}
&:before
{
display: inline-block;
.m-faBase();
padding-right: .2em;
font-size: 125%;
color: @xf-textColorAttention;
vertical-align: middle;
font-size: @xf-uix_iconSize !important;
}
&.messageNotice--deleted:before { .m-faContent(@fa-var-trash, .79em); <xf:macro template="uix_icons.less" name="content" arg-icon="delete" />}
&.messageNotice--moderated:before { .m-faContent(@fa-var-shield, .72em); <xf:macro template="uix_icons.less" name="content" arg-icon="moderate" />}
&.messageNotice--warning:before { .m-faContent(@fa-var-warning, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="warning" />}
&.messageNotice--ignored:before { .m-faContent(@fa-var-microphone-slash, .79em); <xf:macro template="uix_icons.less" name="content" arg-icon="ignored" />}
}
// ##################### MESSAGE VARIANTS/RESPONSIVE ##################
@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
.block:not(.block--messages)
{
@{block-noStripSel} > .block-body:first-child > .message:first-child,
.block-topRadiusContent.message,
.block-topRadiusContent > .message:first-child
{
.message-cell:first-child { border-top-left-radius: @block-borderRadius-inner; }
.message-cell:last-child { border-top-right-radius: @block-borderRadius-inner; }
}
@{block-noStripSel} > .block-body:last-child > .message:last-child,
.block-bottomRadiusContent.message,
.block-bottomRadiusContent > .message:last-child
{
.message-cell:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
.message-cell:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
}
}
}
.block--messages, .js-quickReply
{
.block-container
{
background: none;
border: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.message,
.block-row
{
.xf-contentBase();
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
.xf-uix_message();
+ .message,
+ .block-row
{
margin-top: @xf-blockPaddingV;
}
}
.message-cell
{
&:first-child
{
border-radius: 0;
border-top-left-radius: @block-borderRadius-inner;
border-bottom-left-radius: @block-borderRadius-inner;
}
&:last-child
{
border-radius: 0;
border-top-right-radius: @block-borderRadius-inner;
border-bottom-right-radius: @block-borderRadius-inner;
}
&:first-child:last-child
{
border-radius: @block-borderRadius-inner;
}
}
@media (max-width: @xf-messageSingleColumnWidth)
{
.message:not(.message--forceColumns)
{
.message-cell
{
&:first-child
{
border-radius: 0;
border-top-left-radius: @block-borderRadius-inner;
border-top-right-radius: @block-borderRadius-inner;
}
&:last-child
{
border-radius: 0;
border-bottom-left-radius: @block-borderRadius-inner;
border-bottom-right-radius: @block-borderRadius-inner;
}
&:first-child:last-child
{
border-radius: @block-borderRadius-inner;
}
}
}
.message--simple:not(.message--forceColumns) .message-cell--user + .message-cell
{
border-radius: 0;
border-top-left-radius: @block-borderRadius-inner;
border-top-right-radius: @block-borderRadius-inner;
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.message,
.block-row
{
border-left: none;
border-right: none;
border-radius: 0;
}
.message-cell
{
border-radius: 0;
&:first-child,
&:last-child
{
border-radius: 0;
}
}
.message--simple .message-cell--user + .message-cell
{
border-radius: 0;
}
}
}]]></template>
<template title="message_macros" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="user_info"
arg-user="!"
arg-fallbackName=""
arg-dateHtml=""
arg-linkHtml="">
<span class="message-userArrow"></span>
<section itemscope itemtype="https://schema.org/Person" class="message-user">
<div class="message-avatar {{ ($xf.options.showMessageOnlineStatus && $user && $user.isOnline()) ? 'message-avatar--online' : '' }}">
<div class="message-avatar-wrapper">
<xf:if is="property('uix_postBitAvatarSize') == 'small'">
<xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
<xf:elseif is="property('uix_postBitAvatarSize') == 'medium'" />
<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
<xf:elseif is="property('uix_postBitAvatarSize') == 'large'" />
<xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />
</xf:if>
<xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
<span class="message-avatar-online" data-xf-init="tooltip" title="{{ phrase('online_now')|for_attr }}"></span>
</xf:if>
</div>
</div>
<div class="uix_messagePostBitWrapper">
<div class="message-userDetails">
<h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
<xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
<xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
<xf:if is="{$dateHtml}"><div class="message-date">{$dateHtml}</div></xf:if>
</div>
<xf:if is="{$linkHtml}"><div class="message-permalink">{$linkHtml}</div></xf:if>
<xf:if is="$user.user_id">
<xf:set var="$extras" value="{{ property('messageUserElements') }}" />
<xf:if contentcheck="true">
<xf:if is="property('uix_collapseExtraInfo')">
<div class="thThreads__message-userExtras">
</xf:if>
<div class="message-userExtras">
<xf:contentcheck>
<xf:if is="$extras.register_date">
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('joined') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="user" />
</span>
<xf:else />
{{ phrase('joined') }}
</xf:if>
</dt>
<dd>{{ date($user.register_date) }}</dd>
</dl>
</xf:if>
<xf:if is="$extras.message_count">
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('messages') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="messages" />
</span>
<xf:else />
{{ phrase('messages') }}
</xf:if>
</dt>
<dd>{$user.message_count|number}</dd>
</dl>
</xf:if>
<xf:if is="$extras.like_count">
<xf:if is="{{ is_addon_active('ThemeHouse/Reactions') }}">
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('threact_reactions') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="like" />
</span>
<xf:else />
{{ phrase('threact_reactions') }}
</xf:if>
</dt>
<dd>{$user.getReactTotalCount()|number}</dd>
</dl>
<xf:else />
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('likes') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="like" />
</span>
<xf:else />
{{ phrase('likes') }}
</xf:if>
</dt>
<dd>{$user.like_count|number}</dd>
</dl>
</xf:if>
</xf:if>
<xf:if is="$extras.trophy_points && $xf.options.enableTrophies">
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('points') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="trophy" />
</span>
<xf:else />
{{ phrase('points') }}
</xf:if>
</dt>
<dd>{$user.trophy_points|number}</dd>
</dl>
</xf:if>
<xf:if is="$extras.age && $user.Profile.age">
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('age') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="birthday" />
</span>
<xf:else />
{{ phrase('age') }}
</xf:if>
</dt>
<dd>{$user.Profile.age}</dd>
</dl>
</xf:if>
<xf:if is="$extras.location && $user.Profile.location">
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('location') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="location" />
</span>
<xf:else />
{{ phrase('location') }}
</xf:if>
</dt>
<dd>
<xf:if is="$xf.options.geoLocationUrl">
<a href="{{ link('misc/location-info', '', {'location': $user.Profile.location}) }}" rel="nofollow noreferrer" target="_blank" class="u-concealed">{$user.Profile.location}</a>
<xf:else />
{$user.Profile.location}
</xf:if>
</dd>
</dl>
</xf:if>
<xf:if is="$extras.website && $user.Profile.website">
<dl class="pairs pairs--justified">
<dt>
<xf:if is="property('uix_postBitIcons')">
<span data-xf-init="tooltip" title="{{ phrase('website') }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="web" />
</span>
<xf:else />
{{ phrase('website') }}
</xf:if>
</dt>
<dd><a href="{$user.Profile.website}" rel="nofollow" target="_blank">{$user.Profile.website|url('host', phrase('visit_site'))}</a></dd>
</dl>
</xf:if>
<xf:if is="$extras.custom_fields">
<xf:macro template="custom_fields_macros" name="custom_fields_values"
arg-type="users"
arg-group="personal"
arg-set="{$user.Profile.custom_fields}"
arg-additionalFilters="{{ ['message'] }}"
arg-valueClass="pairs pairs--justified"
/>
<xf:if is="$user.canViewIdentities()">
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="users"
arg-group="contact"
arg-set="{$user.Profile.custom_fields}"
arg-additionalFilters="{{ ['message'] }}"
arg-valueClass="pairs pairs--justified"
/>
</xf:if>
</xf:if>
</xf:contentcheck>
</div>
<xf:if is="property('uix_collapseExtraInfo')">
</div>
<div class="thThreads__userExtra--toggle">
<span class="thThreads__userExtra--trigger"></span>
</div>
</xf:if>
</xf:if>
</xf:if>
</div>
<span class="message-userArrow"></span>
</section>
</xf:macro>
<xf:macro name="user_info_simple" arg-user="!" arg-fallbackName="">
<header itemscope itemtype="https://schema.org/Person" class="message-user">
<meta itemprop="name" content="{{ $user.username ?: $fallbackName }}">
<div class="message-avatar">
<div class="message-avatar-wrapper">
<xf:avatar user="$user" size="s" defaultname="{$fallbackName}" itemprop="image" />
</div>
</div>
<span class="message-userArrow"></span>
</header>
</xf:macro>
<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
<xf:if contentcheck="true">
<xf:css src="attachments.less" />
<section class="message-attachments">
<h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
<ul class="attachmentList">
<xf:contentcheck>
<xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment)">
<xf:macro template="attachment_macros" name="attachment_list_item"
arg-attachment="{$attachment}"
arg-canView="{$canView}" />
</xf:foreach>
</xf:contentcheck>
</ul>
</section>
</xf:if>
</xf:macro>
<xf:macro name="signature" arg-user="!">
<xf:if is="$xf.visitor.Option.content_show_signature AND $user.Profile.signature">
<xf:if contentcheck="true">
<aside class="message-signature">
<xf:contentcheck>
{{ bb_code($user.Profile.signature, 'user:signature', $user) }}
</xf:contentcheck>
</aside>
</xf:if>
</xf:if>
</xf:macro>]]></template>
<template title="node_list.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[@_nodeList-statsCellBreakpoint: @xf-uix_viewportCollapseStats;
@_iconWidth: {{ property('uix_nodeIconWidth') + property('paddingLarge') }}px;
.block--category {
.block-header {
display: flex;
align-items: center;
.xf-uix_categoryStrip();
<xf:if is="property('uix_categoryStripOutsideWrapper')">
.m-uix_removePageSpacer();
</xf:if>
&.uix_stickyCategoryStrips {position: sticky;}
.uix_categoryStrip__icon {
align-self: flex-start;
i {
.xf-uix_categoryIconStyle();
vertical-align: middle;
}
}
.node-description {
.xf-uix_categoryDescription();
}
.categoryCollapse--trigger {
font-size: @xf-uix_iconSizeLarge;
// padding-right: @xf-paddingMedium;
margin-left: auto;
}
}
}
.uix_nodeList {
.block-container {.xf-uix_nodeContainer();}
.block-body {.xf-uix_nodeBlockBody();}
}
.block-body {
.node {
&:first-child .node-body {
border-top-left-radius: @xf-uix_nodeBlockBody--border-radius;
border-top-right-radius: @xf-uix_nodeBlockBody--border-radius;
}
&:last-child .node-body {
border-bottom-left-radius: @xf-uix_nodeBlockBody--border-radius;
border-bottom-right-radius: @xf-uix_nodeBlockBody--border-radius;
}
}
}
.node
{
& + .node
{
border-top: @xf-borderSize solid @xf-borderColorFaint;
}
}
.node-body
{
display: table;
table-layout: fixed;
width: 100%;
transition: all ease-in .15s;
.xf-uix_nodeBody();
&:hover {
.xf-uix_nodeBodyHover;
<xf:if is="property('uix_nodeClickable')">
cursor: pointer;
</xf:if>
}
<xf:if is="property('uix_nodeStatsHover')">
.node-meta,
.node-stats {
opacity: 0;
transition: ease all .2s;
left: -6px;
position: relative;
}
&:hover {
.node-meta,
.node-stats {
opacity: 1;
left: 0;
}
}
</xf:if>
}
.node--depth2:nth-child(even) .node-body{
background-color: @xf-uix_nodeBodyEven;
&:hover {
.xf-uix_nodeBodyHover;
}
}
.has-flexbox .node-body {
display: flex;
.node-icon,
.node-main {display: inline-block;}
.node-main {
flex-grow: 1;
width: calc(~"100% - {{ property('uix_nodeIconWidth') + property('uix_nodePadding') }}px");
}
@media (max-width: @xf-responsiveMedium) {
flex-wrap: wrap;
.node-extra {
width: 100%;
padding-left: {{ property('uix_nodeIconWidth') + property('uix_nodePadding') }}px;
}
}
}
.node-icon
{
display: table-cell;
vertical-align: top;
text-align: center;
width: 46px;
width: @xf-uix_nodeIconWidth;
padding: @xf-uix_nodePadding 0 @xf-uix_nodePadding @xf-uix_nodePadding;
flex-shrink: 0;
i
{
display: block;
line-height: 1;
font-size: 32px;
.xf-uix_nodeIconStyle();
&:before
{
.m-faBase();
.xf-uix_iconFont();
color: @xf-nodeIconReadColor;
// text-shadow: 1px 1px .5px fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
.node--unread &
{
opacity: 1;
color: @xf-nodeIconUnreadColor;
// text-shadow: 1px 1px .5px fade(xf-intensify(@xf-nodeIconUnreadColor, 50%), 50%);
}
}
.node--category &:before,
.node--forum &:before {
content: '@xf-uix_glyphForumIcon';
}
.node--page &:before
{
.m-faContent(@fa-var-file-text, .86em);
content: '@xf-uix_glyphPageIcon';
}
.node--link &:before
{
.m-faContent(@fa-var-link, .93em);
content: '@xf-uix_glyphLinkIcon';
}
<xf:if is="property('uix_nodeIconImages')">
.xf-uix_imageIcon();
&:before {display: none !important;}
</xf:if>
}
}
<xf:if is="property('uix_nodeIconImages')">
.node--category .node-icon i,
.node--forum .node-icon i {.xf-uix_imageForumIcon();}
.node--forum.node--unread .node-icon i {.xf-uix_imageForumUnreadIcon();}
.node--link .node-icon i {.xf-uix_imageLinkIcon();}
.node--page .node-icon i {.xf-uix_imagePageIcon();}
</xf:if>
/*
.node--forum &:before
{
.m-faContent(@fa-var-comments, 1em);
content: '@xf-uix_glyphForumIcon';
}
.node--page &:before
{
.m-faContent(@fa-var-file-text, .86em);
content: '@xf-uix_glyphPageIcon';
}
.node--link &:before
{
.m-faContent(@fa-var-link, .93em);
content: '@xf-uix_glyphLinkIcon';
}
*/
.node-main
{
display: table-cell;
vertical-align: middle;
padding: @xf-uix_nodePadding;
}
.node-stats
{
// display: table-cell;
display: flex;
align-items: center;
width: 170px;
min-width: 170px;
vertical-align: middle;
text-align: center;
padding: @xf-uix_nodePadding 0;
.pairs {line-height: 1.5;}
> dl.pairs.pairs--rows
{
width: 50%;
float: left;
margin: 0;
padding: 0 @xf-paddingMedium/2;
border-right: 1px solid @xf-borderColor;
&:first-child
{
padding-left: 0;
}
&:last-child
{
padding-right: 0;
border-right: 0;
}
}
&.node-stats--single
{
width: 100px;
> dl.pairs.pairs--rows
{
width: 100%;
float: none;
}
}
&.node-stats--triple
{
width: 240px;
> dl.pairs.pairs--rows
{
width: 33.333%;
}
}
@media (max-width: @_nodeList-statsCellBreakpoint)
{
display: none;
}
}
.node-extra
{
// display: table-cell;
display: flex;
vertical-align: middle;
width: 230px;
min-width: 230px;
padding: @xf-uix_nodePadding;
display: inline-flex;
//flex-direction: column;
//justify-content: center;
align-items: center;
font-size: @xf-fontSizeSmall;
a:not(:hover) {color: inherit;}
.node-extra-title:not(:hover) {color: @xf-textColor;}
.uix_nodeExtra__rows {
display: flex;
flex-wrap: wrap;
min-width: 0;
max-width: 100%;
flex-direction: column;
width: 100%;
}
}
.node-extra-row
{
.m-overflowEllipsis();
color: @xf-textColorMuted;
max-width: 100%;
.listInline {.m-overflowEllipsis();}
}
.node-extra-title {
padding-right: .5em;
font-weight: @xf-fontWeightHeavy;
}
.node-extra-placeholder
{
font-style: italic;
}
.node-title
{
/* -- Changed to Style Property -- Ian --
margin: 0;
padding: 0;
font-size: @xf-fontSizeLarge;
font-weight: @xf-fontWeightNormal;
*/
.xf-uix_nodeTitle();
a {color: inherit;}
.node--unread &
{
font-weight: @xf-fontWeightHeavy;
.xf-uix_nodeTitle__unread();
}
}
.node-description
{
/* UI.X Style property -- Ian
font-size: @xf-fontSizeSmall;
color: @xf-textColorDimmed;
*/
.xf-uix_nodeDescription();
&.node-description--tooltip
{
.has-js.has-no-touchevents &
{
display: none;
}
}
}
.node-meta
{
display: inline;
}
.node-statsMeta
{
display: none;
.pairs {padding-right: .4em;}
<xf:if is="property('uix_nodeStatsIcons')">
dt,
dt:after {display: none;}
</xf:if>
@media (max-width: @_nodeList-statsCellBreakpoint)
{
display: inline;
}
}
.node-bonus
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
text-align: right;
}
.node-subNodesFlat
{
font-size: @xf-fontSizeSmall;
margin-top: .3em;
.node-subNodesLabel
{
display: none;
}
}
.node-subNodeMenu
{
display: inline;
i {display: none;}
@media (max-width: @xf-uix_viewportCollapseStats) {
i {display: inline-block;}
span {display: none;}
}
.menuTrigger
{
color: @xf-textColorMuted;
}
}
@media (max-width: @xf-responsiveMedium)
{
.node-main
{
display: block;
width: auto;
}
.node-extra
{
display: flex;
// align-items: center;
width: auto;
// this gives an equivalent of medium padding between main and extra, with main still having large
margin-top: (@xf-paddingMedium - @xf-paddingLarge);
padding-top: 0;
}
.node-extra-row
{
display: inline-block;
vertical-align: top;
max-width: 100%;
}
.node-description,
.node-subNodesFlat
{
display: none;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.node-subNodeMenu
{
// display: none;
}
}
.subNodeLink
{
&:before
{
display: inline-block;
.m-faBase();
width: 1em;
padding-right: .3em;
text-decoration: none;
color: @xf-textColorMuted;
// text-shadow: 1px 1px 0 fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
}
&:hover:before
{
text-decoration: none;
}
&.subNodeLink--unread
{
font-weight: @xf-fontWeightHeavy;
&:before
{
color: @xf-nodeIconUnreadColor;
// text-shadow: 1px 1px 0 fade(xf-intensify(@xf-nodeIconUnreadColor, 50%), 50%);
}
}
&.subNodeLink--forum:before,
&.subNodeLink--category:before
{
.m-faContent(@fa-var-comments);
<xf:macro template="uix_icons.less" name="content" arg-icon="forum" />
}
&.subNodeLink--page:before
{
.m-faContent(@fa-var-file-text);
<xf:macro template="uix_icons.less" name="content" arg-icon="page" />
}
&.subNodeLink--link:before
{
.m-faContent(@fa-var-link);
<xf:macro template="uix_icons.less" name="content" arg-icon="link" />
}
}
.node-subNodeFlatList
{
.m-listPlain();
.m-clearFix();
> li
{
display: inline-block;
margin-right: 1em;
&:last-child
{
margin-right: 0;
}
a {
.xf-uix_subForumTitle();
}
}
ol,
ul,
.node-subNodes
{
display: none;
}
}
.subNodeMenu
{
.m-listPlain();
ol,
ul
{
.m-listPlain();
}
.subNodeLink
{
display: block;
padding: (@xf-blockPaddingV / 2) @xf-blockPaddingH;
text-decoration: none;
cursor: pointer;
&:hover
{
text-decoration: none;
background: @xf-contentHighlightBg;
}
}
li li .subNodeLink { padding-left: 1.5em; }
li li li .subNodeLink { padding-left: 3em; }
li li li li .subNodeLink { padding-left: 4.5em; }
li li li li li .subNodeLink { padding-left: 6em; }
li li li li li li .subNodeLink { padding-left: 7.5em; }
}]]></template>
<template title="node_list_category" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<div class="block block--category block--category{$node.node_id} <xf:if is="$node.isCollapsed_uix()">category--collapsed</xf:if>">
<span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
<xf:if is="property('uix_categoryStripOutsideWrapper')">
<h2 class="block-header js-nodeMain{{ property('uix_stickyCategoryStrips') ? ' uix_stickyCategoryStrips' : '' }}">
<xf:if is="property('uix_categoryStripIcons')">
<div class="uix_categoryStrip__icon">
<xf:macro template="uix_icons.less" name="icon" arg-icon="folder" />
</div>
</xf:if>
<div class="uix_categoryStrip-content">
<xf:comment><a href="{{ link('categories', $node) }}">{$node.title}</a></xf:comment>
<xf:comment><xf:if is="{$node.description}"><div class="block-desc">{$node.description|raw}</div></xf:if></xf:comment>
<xf:set var="$uix_categoryDescriptionDisplay" value="{{ property('uix_categoryDescriptionDisplay') }}" />
<a href="{{ link('categories', $node) }}" class="uix_categoryTitle" data-xf-init="{{ $uix_categoryDescriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
<xf:if is="$uix_categoryDescriptionDisplay != 'none' && $node.description">
<div class="node-description {{ $uix_categoryDescriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
</xf:if>
</div>
<xf:if is="{{ property('uix_categoryCollapse') && $xf.visitor->hasPermission('th_uix', 'collapseCategories') }}">
<a class="u-ripple categoryCollapse--trigger"><xf:macro name="icon" template="uix_icons.less" arg-icon="chevron-up" /></a>
</xf:if>
</h2>
</xf:if>
<div class="block-container">
<xf:if is="!property('uix_categoryStripOutsideWrapper')">
<h2 class="block-header js-nodeMain {{ property('uix_stickyCategoryStrips') ? ' uix_stickyCategoryStrips' : '' }}">
<xf:if is="property('uix_categoryStripIcons')">
<div class="uix_categoryStrip__icon">
<xf:macro template="uix_icons.less" name="icon" arg-icon="folder" />
</div>
</xf:if>
<div class="uix_categoryStrip-content">
<xf:comment><a href="{{ link('categories', $node) }}">{$node.title}</a></xf:comment>
<xf:comment><xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if></xf:comment>
<xf:set var="$uix_categoryDescriptionDisplay" value="{{ property('uix_categoryDescriptionDisplay') }}" />
<a href="{{ link('categories', $node) }}" class="uix_categoryTitle" data-xf-init="{{ $uix_categoryDescriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
<xf:if is="$uix_categoryDescriptionDisplay != 'none' && $node.description">
<div class="node-description {{ $uix_categoryDescriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
</xf:if>
</div>
<xf:if is="{{ property('uix_categoryCollapse') && $xf.visitor->hasPermission('th_uix', 'collapseCategories') }}">
<a class="u-ripple categoryCollapse--trigger"><xf:macro name="icon" template="uix_icons.less" arg-icon="chevron-up" /></a>
</xf:if>
</h2>
</xf:if>
<div class="uix_block-body--outer">
<div class="block-body">
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}"
arg-extras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</div>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<div class="node below--xl node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
<div class="node-body">
<span class="node-icon" aria-hidden="true"><i></i></span>
<div class="node-main js-nodeMain">
<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
<h3 class="node-title">
<a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
<xf:if is="{$extras.hasNew} && property('uix_newNodeMarker')"><span class="uix_newIndicator">{{ phrase('new') }}</span></xf:if>
</h3>
<xf:if is="$descriptionDisplay != 'none' && $node.description">
<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
</xf:if>
<xf:if is="!property('uix_hideNodeStats')">
<div class="node-meta">
<xf:if is="!{$extras.privateInfo}">
<div class="node-statsMeta">
<dl class="pairs pairs--inline">
<xf:if is="property('uix_nodeStatsIcons')">
<dt><xf:macro template="uix_icons.less" name="icon" arg-icon="post" /></dt>
<xf:else />
<dt>{{ phrase('threads') }}</dt>
</xf:if>
<dd>{$extras.discussion_count|number}</dd>
</dl>
<dl class="pairs pairs--inline">
<xf:if is="property('uix_nodeStatsIcons')">
<dt><xf:macro template="uix_icons.less" name="icon" arg-icon="messages" /></dt>
<xf:else />
<dt>{{ phrase('messages') }}</dt>
</xf:if>
<dd>{$extras.message_count|number}</dd>
</dl>
</div>
</xf:if>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
<xf:macro template="forum_list" name="sub_nodes_menu"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</div>
</xf:if>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
<xf:macro template="forum_list" name="sub_nodes_flat"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</div>
<xf:if is="!{$extras.privateInfo} && !property('uix_hideNodeStats')">
<div class="node-stats">
<dl class="pairs pairs--rows">
<dt>{{ phrase('threads') }}</dt>
<dd>{$extras.discussion_count|number}</dd>
</dl>
<dl class="pairs pairs--rows">
<dt>{{ phrase('messages') }}</dt>
<dd>{$extras.message_count|number}</dd>
</dl>
</div>
</xf:if>
<xf:if is="!property('uix_hideNodeLastPost')">
<div class="node-extra">
<xf:if is="{$extras.privateInfo}">
<span class="node-extra-placeholder">{{ phrase('private') }}</span>
<xf:elseif is="{$extras.last_post_date}" />
<div class="uix_nodeExtra__rows">
<div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
<div class="node-extra-row">
<ul class="listInline listInline--bullet">
<li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
<xf:else />
<li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
</xf:if>
</ul>
</div>
</div>
<xf:else />
<span class="node-extra-placeholder">{{ phrase('none') }}</span>
</xf:if>
</div>
</xf:if>
</div>
</div>
</xf:macro>
<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<li>
<a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
<xf:macro template="forum_list" name="sub_node_list"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</li>
</xf:macro>]]></template>
<template title="node_list_forum" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<div class="block">
<div class="block-container">
<div class="block-body">
<xf:macro name="forum"
arg-node="{$node}"
arg-extras="{$extras}"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{$depth}" />
</div>
</div>
</div>
</xf:macro>
<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<xf:macro name="forum"
arg-node="{$node}"
arg-extras="{$extras}"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{$depth}" />
</xf:macro>
<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<li>
<a href="{{ link('forums', $node) }}" class="subNodeLink subNodeLink--forum {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
<xf:macro template="forum_list" name="sub_node_list"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</li>
</xf:macro>
<xf:macro name="forum"
arg-node="!"
arg-extras="!"
arg-children="!"
arg-childExtras="!"
arg-depth="!"
arg-chooseName=""
arg-bonusInfo="">
<div class="node node--id{$node.node_id} node--depth{$depth} node--forum {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
<div class="node-body">
<span class="node-icon" aria-hidden="true"><i></i></span>
<div class="node-main js-nodeMain">
<xf:if is="$chooseName">
<xf:checkbox standalone="true">
<xf:option labelclass="u-pullRight" class="js-chooseItem" name="{$chooseName}[]" value="{$node.node_id}" />
</xf:checkbox>
</xf:if>
<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
<h3 class="node-title">
<a href="{{ link('forums', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
<xf:if is="{$extras.hasNew} && property('uix_newNodeMarker')"><span class="uix_newIndicator">{{ phrase('new') }}</span></xf:if>
</h3>
<xf:if is="$descriptionDisplay != 'none' && $node.description">
<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
</xf:if>
<xf:if is="!property('uix_hideNodeStats')">
<div class="node-meta">
<xf:if is="!{$extras.privateInfo}">
<div class="node-statsMeta">
<dl class="pairs pairs--inline">
<dd>{$extras.discussion_count|number}</dd>
<xf:if is="property('uix_nodeStatsIcons')">
<dt><xf:macro template="uix_icons.less" name="icon" arg-icon="post" /></dt>
<xf:else />
<dt>{{ phrase('threads') }}</dt>
</xf:if>
</dl>
<dl class="pairs pairs--inline">
<dd>{$extras.message_count|number}</dd>
<xf:if is="property('uix_nodeStatsIcons')">
<dt><xf:macro template="uix_icons.less" name="icon" arg-icon="messages" /></dt>
<xf:else />
<dt>{{ phrase('messages') }}</dt>
</xf:if>
</dl>
</div>
</xf:if>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
<xf:macro template="forum_list" name="sub_nodes_menu"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</div>
</xf:if>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
<xf:macro template="forum_list" name="sub_nodes_flat"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
<xf:if is="$bonusInfo is not empty">
<div class="node-bonus">{$bonusInfo}</div>
</xf:if>
</div>
<xf:if is="!{$extras.privateInfo} && !property('uix_hideNodeStats')">
<div class="node-stats">
<dl class="pairs pairs--rows">
<dd>{$extras.discussion_count|number}</dd>
<dt>{{ phrase('threads') }}</dt>
</dl>
<dl class="pairs pairs--rows">
<dd>{$extras.message_count|number}</dd>
<dt>{{ phrase('messages') }}</dt>
</dl>
</div>
</xf:if>
<xf:if is="!property('uix_hideNodeLastPost')">
<div class="node-extra">
<xf:if is="{$extras.privateInfo}">
<span class="node-extra-placeholder">{{ phrase('private') }}</span>
<xf:elseif is="{$extras.last_post_date}" />
<div class="uix_nodeExtra__rows">
<div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
<div class="node-extra-row">
<ul class="listInline listInline--bullet">
<li><xf:date time="{$extras.last_post_date}" class="node-extra-date" />
<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
<xf:else />
<li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
</xf:if>
</ul>
</div>
</div>
<xf:else />
<span class="node-extra-placeholder">{{ phrase('none') }}</span>
</xf:if>
</div>
</xf:if>
</div>
</div>
<xf:if is="{$depth} == 1">
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}"
arg-extras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</xf:macro>]]></template>
<template title="normalize.css" type="public" addon_id="XF" version_id="2000070" version_string="2.0.0"><![CDATA[/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}]]></template>
<template title="notice_cookies" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<div class="">
{{ phrase('this_site_uses_cookies_notice') }}
</div>
<div class="u-inputSpacer uix_cookieButtonRow">
<xf:button icon="confirm" href="{{ link('account/dismiss-notice', null, {'notice_id': $notice.notice_id}) }}" class="js-noticeDismiss button--notice" data-xf-init="tooltip" title="{{ phrase('dismiss_notice') }}">{{ phrase('accept') }}</xf:button>
<xf:button href="{{ link('help/cookies') }}" class="button--notice">{{ phrase('learn_more...') }}</xf:button>
</div>]]></template>
<template title="notice_macros" type="public" addon_id="XF" version_id="2000631" version_string="2.0.6 Beta 1"><![CDATA[<xf:macro name="notice_list" arg-type="!" arg-notices="!">
<xf:if is="{$notices} is not empty">
<xf:css src="notices.less" />
<xf:js src="xf/notice.js" min="1" />
<xf:if is="$type == 'scrolling'">
<xf:css src="lightslider.less" />
<xf:js prod="xf/carousel-compiled.js" dev="vendor/lightslider/lightslider.min.js, xf/carousel.js" />
</xf:if>
<ul class="notices notices--{$type} {{ count($notices) > 1 ? 'notices--isMulti' : '' }} js-notices"
data-xf-init="notices"
data-type="{$type}"
data-scroll-interval="{{ property('noticeScrollInterval') }}">
<xf:foreach loop="{$notices}" value="$notice">
<xf:macro name="notice" arg-notice="{$notice}" arg-type="{$type}" arg-contentHtml="{$notice.message}" />
</xf:foreach>
</ul>
</xf:if>
</xf:macro>
<xf:macro name="notice" arg-notice="!" arg-type="!" arg-contentHtml="!">
<li class="notice js-notice {{ $notice.display_style == 'custom' ? $notice.css_class : 'notice--' . $notice.display_style }}{{ $notice.display_image ? ' notice--hasImage' : '' }}{{ $notice.visibility ? ' notice--hide' . $notice.visibility : '' }}"
data-notice-id="{$notice.notice_id}"
data-delay-duration="{$notice.delay_duration}"
data-display-duration="{$notice.display_duration}"
data-auto-dismiss="{$notice.auto_dismiss}"
data-visibility="{$notice.visibility}">
<div class="uix_noticeInner">
<div class="uix_noticeIcon">
<xf:macro name="icon" template="uix_icons.less" arg-icon="info" />
</div>
<xf:if is="$notice.display_image == 'avatar'">
<div class="notice-image"><xf:avatar user="$xf.visitor" size="s" href="" /></div>
<xf:elseif is="$notice.display_image == 'image'" />
<div class="notice-image"><img src="{$notice.image_url}" alt="" /></div>
</xf:if>
<div class="notice-content">
<xf:if is="$notice.dismissible AND !$notice.custom_dismissible">
<a href="{{ link('account/dismiss-notice', null, {'notice_id': $notice.notice_id}) }}" class="notice-dismiss js-noticeDismiss" data-xf-init="tooltip" title="{{ phrase('dismiss_notice')|for_attr }}"></a>
</xf:if>
{$contentHtml|raw}
</div>
</div>
</li>
</xf:macro>]]></template>
<template title="notices.less" type="public" addon_id="XF" version_id="2001270" version_string="2.0.12"><![CDATA[@_notice-darkBg: @xf-paletteColor4;
@_notice-lightBg: #fff;
@_notice-floatingFade: 100%;
@_notice-imageSize: 48px;
@_notice-padding: @xf-paddingLarge;
.notices
{
.m-listPlain();
&.notices--block
{
.notice
{
margin-bottom: @xf-elementSpacer;
}
}
&.notices--floating
{
// assumed to be within u-bottomFixer
margin: 0 auto 0 @xf-elementSpacer;
width: 300px;
max-width: 100%;
z-index: @zIndex-8;
@media (max-width: 340px)
{
margin-right: 10px;
}
.notice
{
margin-bottom: 20px;
}
}
.uix_noticeInner {
display: flex;
}
.uix_noticeIcon {
display: flex;
align-items: center;
padding: 0 8px;
color: rgba(255,255,255,.5);
font-size: 24px;
}
&.notices--scrolling
{
display: flex;
align-items: stretch;
overflow: hidden;
.xf-blockBorder();
margin-bottom: ((@xf-elementSpacer) / 2);
&.notices--isMulti
{
margin-bottom: ((@xf-elementSpacer) / 2) + 20px;
}
.notice
{
width: 100%;
flex-grow: 0;
flex-shrink: 0;
border: none;
box-shadow: none;
}
.has-no-flexbox &
{
display: block;
white-space: nowrap;
word-wrap: normal;
.notice
{
display: inline-block;
vertical-align: top;
}
}
}
}
.noticeScrollContainer
{
margin-bottom: ((@xf-elementSpacer) / 2);
box-shadow: @xf-uix_elevation1;
<xf:if is="property('uix_similarScrollNotice')">
border: 2px solid @xf-uix_primaryColor;
</xf:if>
<xf:if is="property('uix_similarScrollNotice')">
.uix_noticeIcon {background: @xf-uix_primaryColor;}
</xf:if>
.lSSlideWrapper
{
.xf-blockBorder();
}
.notices.notices--scrolling
{
border: none;
margin-bottom: 0;
}
<xf:if is="property('uix_similarScrollNotice')">
.notice {
&.notice--primary,
&.notice--accent,
&.notice--dark,
&.notice--light {.xf-contentBase();}
a {color: @xf-linkColor;}
}
</xf:if>
.lSPager {.xf-contentBase();}
}
.notice
{
.m-clearFix();
position: relative;
.xf-blockBorder();
.xf-contentBase();
border: 2px solid @xf-borderColor;
&.notice--primary
{
.xf-contentBase();
border: 2px solid @xf-uix_primaryColor;
.uix_noticeIcon {background: @xf-uix_primaryColor;}
}
&.notice--accent
{
border: 2px solid @xf-uix_secondaryColor;
.uix_noticeIcon {background: @xf-uix_secondaryColor;}
a:not(.button--notice)
{
.xf-contentAccentLink();
}
}
&.notice--dark
{
//background: @_notice-darkBg;
background: @xf-uix_primaryColor;
color: #fff;
border-color: lighten(@xf-uix_primaryColor, 30%);
a:not(.button--notice)
{
color: @xf-linkColor;
}
a.notice-dismiss {color: inherit;}
}
&.notice--light
{
color: rgb(20, 20, 20);
background: @_notice-lightBg;
.uix_noticeIcon {background: @xf-borderColor; color: @xf-textColorMuted;}
a:not(.button--notice)
{
color: rgb(130, 130, 130);
}
}
&.notice--cookie
{
@media (max-width: @xf-responsiveWide)
{
.notice-content
{
padding: @xf-paddingSmall @xf-paddingSmall;
font-size: @xf-fontSizeSmaller;
.button--notice
{
font-size: @xf-fontSizeSmaller;
padding: @xf-paddingSmall @xf-paddingMedium;
.button-text
{
font-size: @xf-fontSizeSmaller;
}
}
}
}
}
.notices--block &
{
font-size: @xf-fontSizeNormal;
border-radius: @xf-blockBorderRadius;
}
.notices--floating &
{
font-size: @xf-fontSizeSmallest;
border-radius: @xf-borderRadiusMedium;
box-shadow: @xf-uix_elevation1;
<xf:comment>
&.notice--primary
{
background-color: fade(@xf-contentHighlightBase--background-color, @_notice-floatingFade);
}
&.notice--accent
{
background-color: fade(@xf-contentAccentBase--background-color, @_notice-floatingFade);
}
&.notice--dark
{
background-color: fade(@_notice-darkBg, @_notice-floatingFade);
}
&.notice--light
{
background-color: fade(@_notice-lightBg, @_notice-floatingFade);
}
</xf:comment>
.has-js &
{
display: none;
}
}
&.notice--hasImage
{
.notice-content
{
min-height: ((@_notice-imageSize) + (@_notice-padding) * 2);
}
}
@media (max-width: @xf-responsiveWide)
{
&.notice--hidewide:not(.is-vis-processed)
{
display: none;
}
}
@media (max-width: @xf-responsiveMedium)
{
&.notice--hidemedium:not(.is-vis-processed)
{
display: none;
}
}
@media (max-width: @xf-responsiveNarrow)
{
&.notice--hidenarrow:not(.is-vis-processed)
{
display: none;
}
}
}
.notice-image
{
float: left;
padding: @_notice-padding 0 @_notice-padding @_notice-padding;
img
{
max-width: @_notice-imageSize;
max-height: @_notice-imageSize;
}
}
.notice-content
{
padding: @_notice-padding;
flex-grow: 1;
// color: @xf-textColorDimmed;
a.notice-dismiss
{
&:before
{
.m-faBase();
.m-faContent(@fa-var-remove, .79em);
}
float: right;
color: inherit;
font-size: 16px;
line-height: 1;
height: 1em;
box-sizing: content-box;
padding: 0 0 5px 5px;
opacity: .5;
.m-transition(opacity);
cursor: pointer;
&:hover
{
text-decoration: none;
opacity: 1;
}
.notices--floating &
{
font-size: 14px;
}
}
}]]></template>
<template title="page_style" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<style>
.uix_headerContainer .p-navSticky.is-sticky {
top: {{ $uix_stickyStaffBarHeight }} !important;
}
<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}">
@media (max-width: {{ property('uix_staffBarBreakpoint')}}) {
.uix_headerContainer .p-navSticky.is-sticky {
top: 0 !important;
}
}
</xf:if>
<xf:set var="$uix_stickyNavHeightTotal" value="0" />
<xf:set var="$uix_stickyNavPrimary" value="0" />
<xf:if is="!{$uix_hideNavigation}">
<xf:if is="property('publicNavSticky') == 'primary'">
<xf:set var="$uix_stickyNavHeightTotal" value="{{property('uix_stickyNavHeight')}}" />
<xf:set var="$uix_stickyNavPrimary" value="{{property('uix_stickyNavHeight')}}" />
<xf:elseif is="property('publicNavSticky') == 'all'" />
<xf:set var="$uix_stickyNavPrimary" value="{{property('uix_stickyNavHeight')}}" />
<xf:set var="$uix_stickyNavHeightTotal" value="{{property('uix_stickyNavHeight') + property('uix_stickySectionLinkHeight')}}" />
</xf:if>
</xf:if>
<xf:set var="$uix_subNavBreakpoint" value="{{ property('uix_viewportWidthRemoveSubNav')}}"/>
<xf:if is="!{$uix_subNavContentStatic} && {$uix_subNavHasSidebarTrigger}">
<xf:set var="$uix_subNavBreakpoint" value="$uix_sidebarBreakpoint"/>
</xf:if>
<xf:if is="(!{$uix_subNavContentStatic} && {$uix_subNavHasSidebarTrigger}) || {$uix_subNavContentStatic}">
<xf:set var="$uix_stickyTotal" value="{{ $uix_stickyStaffBarHeight + $uix_stickyNavHeightTotal + property('elementSpacer') }}" />
.uix_stickyBodyElement:not(.offCanvasMenu) {
top: {{$uix_stickyTotal}}px !important;
min-height: calc(100vh - {{$uix_stickyTotal}}px) !important;
}
.uix_stickyCategoryStrips {top: {{$uix_stickyTotal}}px !important;}
#XF .u-anchorTarget {
height: {{$uix_stickyTotal}}px;
margin-top: -{{$uix_stickyTotal}}px;
}
<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}">
@media(max-width: {{ property('uix_staffBarBreakpoint') }}) {
<xf:set var="$uix_stickyTotal" value="{{ $uix_stickyNavHeightTotal + property('elementSpacer') }}" />
.uix_stickyBodyElement:not(.offCanvasMenu) {
top: {{$uix_stickyTotal}}px !important;
min-height: calc(100vh - {{$uix_stickyTotal}}px) !important;
}
.uix_stickyCategoryStrips {top: {{$uix_stickyTotal}}px !important;}
#XF .u-anchorTarget {
height: {{$uix_stickyTotal}}px;
margin-top: -{{$uix_stickyTotal}}px;
}
}
</xf:if>
<xf:if is="{$uix_subNavBreakpoint} != '100%'">
@media (max-width: {$uix_subNavBreakpoint}) {
</xf:if>
.p-sectionLinks {display: none;}
<xf:set var="$uix_stickyTotal" value="{{ $uix_stickyStaffBarHeight + $uix_stickyNavPrimary + property('elementSpacer') }}" />
.uix_stickyBodyElement:not(.offCanvasMenu) {
top: {{$uix_stickyTotal}}px !important;
min-height: calc(100vh - {{$uix_stickyTotal}}px) !important;
}
.uix_stickyCategoryStrips {top: {{$uix_stickyTotal}}px !important;}
#XF .u-anchorTarget {
height: {{$uix_stickyTotal}}px;
margin-top: -{{$uix_stickyTotal}}px;
}
<xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}">
@media(max-width: {{ property('uix_staffBarBreakpoint') }}) {
<xf:set var="$uix_stickyTotal" value="{{ $uix_stickyNavPrimary + property('elementSpacer') }}" />
.uix_stickyBodyElement:not(.offCanvasMenu) {
top: {{$uix_stickyTotal}}px !important;
min-height: calc(100vh - {{$uix_stickyTotal}}px) !important;
}
.uix_stickyCategoryStrips {top: {{$uix_stickyTotal}}px !important;}
#XF .u-anchorTarget {
height: {{$uix_stickyTotal}}px;
margin-top: -{{$uix_stickyTotal}}px;
}
}
</xf:if>
<xf:if is="{$uix_subNavBreakpoint} != '100%'">
}
</xf:if>
<xf:else />
<xf:set var="$uix_stickyTotal" value="{{ $uix_stickyStaffBarHeight + $uix_stickyNavPrimary + property('elementSpacer') }}" />
.uix_stickyBodyElement:not(.offCanvasMenu) {
top: {{$uix_stickyTotal}}px !important;
min-height: calc(100vh - {{$uix_stickyTotal}}px) !important;
}
.uix_stickyCategoryStrips {top: {{$uix_stickyTotal}}px !important;}
#XF .u-anchorTarget {
height: {{$uix_stickyTotal}}px;
margin-top: -{{$uix_stickyTotal}}px;
}
</xf:if>
.uix_sidebarNav .uix_sidebar--scroller {max-height: calc(100vh - {$uix_stickyTotal}px);}
<xf:if is="property('uix_scrollableSidebar')">
.uix_sidebarInner .uix_sidebar--scroller {max-height: calc(100vh - {$uix_stickyTotal}px);}
</xf:if>
<xf:if is="property('uix_scrollableSidenav')">
.p-body-sideNavInner .uix_sidebar--scroller {max-height: calc(100vh - {$uix_stickyTotal}px);}
</xf:if>
</style>]]></template>
<template title="post_edit_new_post" type="public" addon_id="XF" version_id="2000170" version_string="2.0.1"><![CDATA[<xf:title>{{ prefix('thread', $thread, 'escaped') }}{$thread.title}</xf:title>
<xf:h1>{{ prefix('thread', $thread) }}{$thread.title}</xf:h1>
<div class="block-outer js-threadStatusField"><xf:trim>
<xf:if contentcheck="true">
<div class="blockStatus blockStatus--info">
<xf:contentcheck>
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="threads"
arg-group="thread_status"
arg-onlyInclude="{$thread.Forum.field_cache}"
arg-set="{$thread.custom_fields}"
arg-wrapperClass="blockStatus-message" />
</xf:contentcheck>
</div>
</xf:if>
</xf:trim></div>
<xf:macro template="post_macros" name="post" arg-post="{$post}" arg-thread="{$thread}" />]]></template>
<template title="post_macros" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="post" arg-post="!" arg-thread="!" arg-uix_condensed="">
<xf:css src="message.less" />
<xf:set var="$isIgnored" value="{{ $post.isIgnored() }}" />
<article class="message message--post {{ $uix_condensed ? 'uix_message--condensed' : '' }} js-post js-inlineModContainer {{ $isIgnored ? 'is-ignored' : '' }} {{ $post.isUnread() ? ' is-unread' : '' }}"
data-author="{{ $post.User.username ?: $post.username }}"
data-content="post-{$post.post_id}"
id="js-post-{$post.post_id}">
<span class="u-anchorTarget" id="post-{$post.post_id}"></span>
<div class="message-inner">
<div class="message-cell message-cell--user">
<xf:set var="$dateHtml"><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow"><xf:date time="{$post.post_date}" /></a></xf:set>
<xf:set var="$linkHtml"><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow">#{{ number($post.position + 1) }}</a></xf:set>
<xf:macro template="message_macros" name="user_info" arg-user="{$post.User}" arg-fallbackName="{$post.username}" arg-dateHtml="{$dateHtml}" arg-linkHtml="{$linkHtml}" />
</div>
<div class="message-cell message-cell--main">
<div class="js-quickEditTarget message-main uix_messageContent">
<header class="message-attribution">
<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="message-attribution-main u-concealed" rel="nofollow"><xf:date time="{$post.post_date}" /></a>
<div class="message-attribution-opposite">
<xf:if is="$post.isUnread()">
<span class="message-newIndicator">{{ phrase('new') }}</span>
</xf:if>
<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow">#{{ number($post.position + 1) }}</a>
</div>
</header>
<div class="message-content js-messageContent">
<xf:if is="$post.message_state == 'deleted'">
<div class="messageNotice messageNotice--deleted">
<xf:macro template="deletion_macros" name="notice" arg-log="{$post.DeletionLog}" />
</div>
<xf:elseif is="$post.message_state == 'moderated'" />
<div class="messageNotice messageNotice--moderated">
{{ phrase('this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal') }}
</div>
</xf:if>
<xf:if is="$post.warning_message">
<div class="messageNotice messageNotice--warning">
{$post.warning_message}
</div>
</xf:if>
<xf:if is="$isIgnored">
<div class="messageNotice messageNotice--ignored">
{{ phrase('you_are_ignoring_content_by_this_member') }}
<xf:showignored />
</div>
</xf:if>
<div class="message-userContent lbContainer js-lbContainer {{ $isIgnored ? 'is-ignored' : '' }}"
data-lb-id="post-{$post.post_id}"
data-lb-caption-desc="{{ $post.User ? $post.User.username : $post.username }} · {{ date_time($post.post_date) }}">
<xf:if is="$post.isFirstPost()">
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="threads"
arg-group="before"
arg-onlyInclude="{$thread.Forum.field_cache}"
arg-set="{$thread.custom_fields}"
arg-wrapperClass="message-fields message-fields--before" />
</xf:if>
<article class="message-body js-selectToQuote">
<xf:ad position="post_above_content" arg-post="{$post}" />
{{ bb_code($post.message, 'post', $post) }}
<div class="js-selectToQuoteEnd"> </div>
<xf:ad position="post_below_content" arg-post="{$post}" />
</article>
<xf:if is="$post.isFirstPost()">
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="threads"
arg-group="after"
arg-onlyInclude="{$thread.Forum.field_cache}"
arg-set="{$thread.custom_fields}"
arg-wrapperClass="message-fields message-fields--after" />
</xf:if>
<xf:if is="$post.attach_count">
<xf:macro template="message_macros" name="attachments"
arg-attachments="{$post.Attachments}"
arg-message="{$post}"
arg-canView="{{ $thread.canViewAttachments() }}" />
</xf:if>
</div>
<xf:if is="$post.last_edit_date">
<div class="message-lastEdit">
<xf:if is="$post.user_id == $post.last_edit_user_id">
{{ phrase('last_edited:') }} <xf:date time="{$post.last_edit_date}" />
<xf:else />
{{ phrase('last_edited_by_moderator:') }} <xf:date time="{$post.last_edit_date}" />
</xf:if>
</div>
</xf:if>
</div>
<xf:macro template="message_macros" name="signature" arg-user="{$post.User}" />
<div class="likesBar js-likeList {{ $post.likes ? 'is-active' : '' }}">
<xf:likes content="{$post}" url="{{ link('posts/likes', $post) }}" />
</div>
<footer class="message-footer">
<xf:if contentcheck="true">
<div class="message-actionBar actionBar">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--external">
<xf:contentcheck>
<xf:if is="$post.canLike()">
<a href="{{ link('posts/like', $post) }}" class="actionBar-action actionBar-action--like" data-xf-click="like" data-like-list="< .js-post | .js-likeList"><xf:if is="$post.isLiked()">{{ phrase('unlike') }}<xf:else />{{ phrase('like') }}</xf:if></a>
</xf:if>
<xf:if is="$thread.canReply()">
<xf:set var="$quoteLink">{{ link('threads/reply', $thread, {'quote': $post.post_id}) }}</xf:set>
<xf:if is="$xf.options.multiQuote">
<a href="{$quoteLink}"
class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
data-message-id="{$post.post_id}"
data-mq-action="add">{{ phrase('quote') }}</a>
</xf:if>
<a href="{$quoteLink}"
class="actionBar-action actionBar-action--reply"
title="{{ phrase('reply_quoting_this_message')|for_attr }}"
data-xf-click="quote"
data-quote-href="{{ link('posts/quote', $post) }}">{{ phrase('reply') }}</a>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--internal">
<xf:contentcheck>
<xf:if is="$post.canUseInlineModeration()">
<span class="actionBar-action actionBar-action--inlineMod">
<xf:trim>
<xf:checkbox standalone="true">
<xf:option value="{$post.post_id}" class="js-inlineModToggle"
data-xf-init="tooltip"
title="{{ phrase('select_for_moderation') }}"
label="{{ phrase('select_for_moderation') }}"
hiddenlabel="true" /></xf:checkbox></xf:trim></span>
</xf:if>
<xf:if is="$post.canReport()">
<a href="{{ link('posts/report', $post) }}"
class="actionBar-action actionBar-action--report"
data-xf-click="overlay">{{ phrase('report') }}</a>
</xf:if>
<xf:set var="$hasActionBarMenu" value="{{ false }}" />
<xf:if is="$post.canEdit()">
<xf:js src="xf/message.js" min="1" />
<a href="{{ link('posts/edit', $post) }}"
class="actionBar-action actionBar-action--edit actionBar-action--menuItem"
data-xf-click="quick-edit"
data-editor-target="#js-post-{$post.post_id} .js-quickEditTarget"
data-menu-closer="true">{{ phrase('edit') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$post.edit_count && $post.canViewHistory()">
<a href="{{ link('posts/history', $post) }}"
class="actionBar-action actionBar-action--history actionBar-action--menuItem"
data-xf-click="toggle"
data-target="#js-post-{$post.post_id} .js-historyTarget"
data-menu-closer="true">{{ phrase('history') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$post.canDelete('soft')">
<a href="{{ link('posts/delete', $post) }}"
class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('delete') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$post.canCleanSpam()">
<a href="{{ link('spam-cleaner', $post) }}"
class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('spam') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$xf.visitor.canViewIps() && $post.ip_id">
<a href="{{ link('posts/ip', $post) }}"
class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('ip') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$post.canWarn()">
<a href="{{ link('posts/warn', $post) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
<xf:elseif is="$post.warning_id && $xf.visitor.canViewWarnings()" />
<a href="{{ link('warnings', {'warning_id': $post.warning_id}) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('view_warning') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$hasActionBarMenu">
<a class="actionBar-action actionBar-action--menuTrigger"
data-xf-click="menu"
title="{{ phrase('more_options')|for_attr }}"
role="button"
tabindex="0"
aria-expanded="false"
aria-haspopup="true">•••</a>
<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<div class="js-menuBuilderTarget"></div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<div class="js-historyTarget message-historyTarget toggleTarget" data-href="trigger-href"></div>
</footer>
</div>
</div>
</div>
</article>
<xf:ad position="post_below_container" arg-post="{$post}" />
</xf:macro>
<xf:macro name="post_deleted" arg-post="!" arg-thread="!">
<xf:css src="message.less" />
<div class="message message--deleted message--post{{ $post.isIgnored() ? ' is-ignored' : '' }}{{ $post.isUnread() ? ' is-unread' : '' }} js-post js-inlineModContainer"
data-author="{{ $post.User.username ?: $post.username }}"
data-content="post-{$post.post_id}">
<span class="u-anchorTarget" id="post-{$post.post_id}"></span>
<div class="message-inner">
<div class="message-cell message-cell--user">
<xf:macro template="message_macros" name="user_info" arg-user="{$post.User}" arg-fallbackName="{$post.username}" />
</div>
<div class="message-cell message-cell--main">
<div class="uix_messageContent">
<div class="message-attribution">
<ul class="listInline listInline--bullet message-attribution-main">
<li><a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed" rel="nofollow"><xf:date time="{$post.post_date}" /></a></li>
<li><xf:username user="{$post.User}" defaultname="{$post.username}" class="u-concealed" /></li>
</ul>
</div>
<div class="messageNotice messageNotice--deleted">
<xf:macro template="deletion_macros" name="notice" arg-log="{$post.DeletionLog}" />
<a href="{{ link('posts/show', $post) }}" class="u-jsOnly" data-xf-click="inserter" data-replace="[data-content=post-{$post.post_id}]">{{ phrase('show...') }}</a>
</div>
</div>
</div>
</div>
</div>
<xf:ad position="post_below_container" arg-post="{$post}" />
</xf:macro>]]></template>
<template title="rating_stars.less" type="public" addon_id="XF" version_id="2000053" version_string="2.0.0 Release Candidate 3"><![CDATA[.ratingStars
{
display: inline-block;
line-height: 1;
font-size: 120%;
vertical-align: sub;
position: relative;
&.ratingStars--larger
{
font-size: 140%;
vertical-align: bottom;
}
&.ratingStars--smaller
{
font-size: 100%;
vertical-align: top;
top: .2em;
}
}
.ratingStars-star
{
float: left;
position: relative;
margin-left: 2px;
&:first-child
{
margin-left: 0;
}
&:before
{
.m-faBase();
.m-faContent(@fa-var-star, .93em);
<xf:macro template="uix_icons.less" name="content" arg-icon="star" />
color: @xf-starEmptyColor;
}
&.ratingStars-star--full
{
&:before
{
color: @xf-starFullColor;
}
}
&.ratingStars-star--half
{
&:after
{
position: absolute;
top: 1px;
left: 0;
.m-faBase();
.m-faContent(@fa-var-star-half, .5em);
<xf:macro template="uix_icons.less" name="content" arg-icon="star-half" />
color: @xf-starFullColor;
& when(@rtl)
{
.m-transform(scaleX(-1));
}
}
}
}
.ratingStarsRow
{
&.ratingStarsRow--justified
{
display: flex;
.ratingStarsRow-text
{
margin-left: auto;
}
}
&.ratingStarsRow--textBlock
{
display: block;
.ratingStarsRow-text
{
display: block;
}
}
}
/** XF: override */
.br-select
{
display: none;
}
.br-theme-fontawesome-stars
{
.br-widget
{
&.br-widget--withSelected
{
height: 40px;
.br-current-rating
{
display: block;
font-size: 80%;
}
}
}
}
/** Vendor: variables.less */
@star-default: @xf-starEmptyColor;
@star-active: @xf-starFullColor;
@star-selected: @xf-starFullColor;
/** Vendor: fontawesome-stars.less */
.br-theme-fontawesome-stars {
.br-widget {
height: 28px;
white-space: nowrap;
a {
font: normal normal normal 20px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
margin-right: 2px;
}
a:after {
.m-faContent(@fa-var-star, .93em);
<xf:macro template="uix_icons.less" name="content" arg-icon="star" />
color: @star-default;
}
a.br-active:after {
color: @star-active;
}
a.br-selected:after {
color: @star-selected;
}
.br-current-rating {
display: none;
}
}
.br-readonly {
a {
cursor: default;
}
}
}
@media print {
.br-theme-fontawesome-stars {
.br-widget {
a:after {
.m-faContent(@fa-var-star-o, .93em);
<xf:macro template="uix_icons.less" name="content" arg-icon="star-empty" />
color: black;
}
a.br-active:after,
a.br-selected:after {
.m-faContent(@fa-var-star, .93em);
<xf:macro template="uix_icons.less" name="content" arg-icon="star" />
color: black;
}
}
}
}]]></template>
<template title="register_form" type="public" addon_id="XF" version_id="2000670" version_string="2.0.6"><![CDATA[<xf:js src="xf/login_signup.js" min="1" />
<xf:page option="uix_hideExtendedFooter" value="1" />
<xf:page option="uix_hideNotices" value="1" />
<xf:page option="uix_hideBreadcrumb" value="1" />
<xf:comment><xf:page option="uix_hideNavigation" value="1" /></xf:comment>
<xf:title>{{ phrase('register') }}</xf:title>
<xf:if is="$providers is not empty">
<div class="block">
<div class="block-container">
<div class="block-body">
<xf:formrow rowtype="button"
label="{{ phrase('register_faster_using') }}">
<ul class="listHeap">
<xf:foreach loop="$providers" value="$provider">
<li>
<xf:button href="{{ link('register/connected-accounts', $provider, {'setup': true}) }}"
class="button--provider button--provider--{$provider.provider_id}">
{$provider.title}
</xf:button>
</li>
</xf:foreach>
</ul>
</xf:formrow>
</div>
</div>
</div>
</xf:if>
<xf:form action="{{ link('register/register') }}" ajax="true" class="block"
data-xf-init="reg-form" data-timer="{$xf.options.registrationTimer}">
<div class="block-container">
<div class="block-body">
<xf:comment>Spam catcher field</xf:comment>
<xf:macro template="register_macros" name="username_row"
arg-fieldName="{{ $regForm.getFieldName('username') }}"
arg-value="{$fields.username}" />
<xf:textboxrow name="username" value="" autocomplete="off" rowclass="formRow--limited"
maxlength="{{ max_length($xf.visitor, 'username') }}"
label="{{ phrase('user_name') }}"
explain="{{ phrase('please_leave_this_field_blank') }}" />
<xf:comment>Spam catcher field</xf:comment>
<xf:if is="{{ rand(0, 2) == 1 }}">
<xf:textboxrow name="{{ $regForm.getFieldName('email_hp') }}" value="" type="email" autocomplete="off"
rowclass="formRow--limited"
maxlength="{{ max_length($xf.visitor, 'email') }}"
label="{{ phrase('email') }}"
explain="{{ phrase('please_leave_this_field_blank') }}" />
</xf:if>
<xf:macro template="register_macros" name="email_row"
arg-fieldName="{{ $regForm.getFieldName('email') }}"
arg-value="{$fields.email}" />
<xf:comment>Spam catcher field</xf:comment>
<xf:if is="{{ rand(0, 2) == 1 }}">
<xf:textboxrow name="email" value="" type="email" autocomplete="off" rowclass="formRow--limited"
maxlength="{{ max_length($xf.visitor, 'email') }}"
label="{{ phrase('email') }}"
explain="{{ phrase('please_leave_this_field_blank') }}" />
</xf:if>
<xf:comment>Spam catcher field</xf:comment>
<xf:if is="{{ rand(0, 2) == 1 }}">
<xf:textboxrow name="password" type="password" autocomplete="off" rowclass="formRow--limited"
label="{{ phrase('password') }}"
explain="{{ phrase('please_leave_this_field_blank') }}" />
</xf:if>
<xf:textboxrow name="{{ $regForm.getFieldName('password') }}" type="password" autocomplete="off"
label="{{ phrase('password') }}"
hint="{{ phrase('required') }}"
required="required" />
<xf:macro template="register_macros" name="dob_row" />
<xf:macro template="register_macros" name="location_row"
arg-value="{$fields.location}" />
<xf:macro template="register_macros" name="custom_fields" />
<xf:captcharow label="{{ phrase('verification') }}" hint="{{ phrase('required') }}" />
<xf:macro template="register_macros" name="email_choice_row" />
<xf:macro template="register_macros" name="tos_row" />
</div>
<xf:macro template="register_macros" name="submit_row" />
</div>
<xf:hiddenval name="reg_key">{{ $regForm.getUniqueKey() }}</xf:hiddenval>
<xf:hiddenval name="{{ $regForm.getFieldName('timezone') }}" value="" data-xf-init="auto-timezone" />
</xf:form>]]></template>
<template title="search_form" type="public" addon_id="XF" version_id="2000051" version_string="2.0.0 Release Candidate 1"><![CDATA[<xf:title>{{ phrase('search') }}</xf:title>
<xf:page option="uix_mobileActiveNav">{{ phrase('search') }}</xf:page>
<xf:if is="$type">
<xf:breadcrumb href="{{ link('full:search') }}">{{ phrase('search') }}</xf:breadcrumb>
</xf:if>
<xf:form action="{{ link('search/search') }}" class="block" ajax="true">
<div class="block-container">
<h2 class="block-tabHeader tabs hScroller" data-xf-init="h-scroller">
<span class="hScroller-scroll">
<a href="{{ link('search') }}" class="tabs-tab{{ !$type ? ' is-active' : '' }}">{{ phrase('search_everything') }}</a>
<xf:foreach loop="$tabs" key="$tabType" value="$tab">
<a href="{{ link('search', null, {'type': $tabType}) }}" class="tabs-tab{{ $type == $tabType ? ' is-active' : '' }}">{$tab.title}</a>
</xf:foreach>
<xf:if is="$xf.options.enableTagging">
<a href="{{ link('tags') }}" class="tabs-tab">{{ phrase('search_tags') }}</a>
</xf:if>
</span>
</h2>
<div class="block-body">
<xf:include template="{$formTemplateName}" />
</div>
<xf:submitrow icon="search" sticky="true" />
</div>
<xf:hiddenval name="search_type">{$type}</xf:hiddenval>
</xf:form>]]></template>
<template title="select2.less" type="public" addon_id="XF" version_id="2000170" version_string="2.0.1"><![CDATA[.select2-hidden-accessible
{
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
.select2
{
line-height: normal;
*:focus
{
outline: none;
}
.select2-selection
{
padding: 0;
margin: 0;
display: block;
&.input
{
cursor: text;
}
ul
{
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
flex-wrap: wrap;
margin-bottom: 5px;
> li
{
&.select2-selection__choice
{
float: left;
font-size: 15px;
border-radius: @xf-borderRadiusMedium;
.xf-chip();
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
cursor: default;
.select2-selection__choice__remove
{
font-size: 0;
cursor: pointer;
&:before
{
.m-faBase();
font-size: 15px;
.m-faContent("@{fa-var-close}\20");
opacity: .5;
.m-transition(opacity);
<xf:macro template="uix_icons.less" name="content" arg-icon="close" />
margin-right: 3px;
font-size: 14px;
}
&:hover:before
{
opacity: 1;
}
}
}
}
.select2-search
{
flex-grow: 1;
min-width: 0;
input {.xf-input();}
&.select2-search--inline
{
float: left;
}
.select2-search__field
{
border: none;
padding: 1px 0;
margin-top: 5px;
background: transparent;
min-width: 100%;
max-width: 100%;
&:focus
{
outline: none;
}
}
}
}
}
}
.select2-container
{
display: inline-block;
&.select2-container--disabled
{
.input
{
.xf-inputDisabled();
}
}
&.select2-container--open
{
.select2-dropdown
{
-ltr-rtl-left: 0;
&.select2-dropdown--above
{
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&.select2-dropdown--below
{
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}
}
.select2-dropdown
{
border-radius: @xf-borderRadiusSmall;
box-sizing: border-box;
display: block;
position: absolute;
-ltr-rtl-left: -100000px;
width: 100%;
z-index: 1051;
padding-top: 2px;
&.select2-dropdown--above
{
padding-bottom: 5px;
.select2-results__option.loading-results:not(:last-child)
{
display: none;
}
}
}
.select2-results
{
}
.select2-results__options
{
.m-autoCompleteList();
display: block;
}
.select2-results__option
{
user-select: none;
-webkit-user-select: none;
&.select2-results__option--highlighted
{
background: @xf-contentHighlightBg;
}
}]]></template>
<template title="setup.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// Note that this file should never output any CSS directly. It should contain variables and mixins only.
// Output should go into core.less.
// ################################ VARIABLES ###############################
// BLOCKS
@block-borderRadius-inner: max(@xf-blockBorderRadius - 1px, 0px);
@block-noStripSel: ~'.block-container:not(.block-container--noStripRadius)';
// HELPERS
@zIndex-1: 1 * (@xf-zIndexMultiplier);
@zIndex-2: 2 * (@xf-zIndexMultiplier);
@zIndex-3: 3 * (@xf-zIndexMultiplier);
@zIndex-4: 4 * (@xf-zIndexMultiplier);
@zIndex-5: 5 * (@xf-zIndexMultiplier);
@zIndex-6: 6 * (@xf-zIndexMultiplier);
@zIndex-7: 7 * (@xf-zIndexMultiplier);
@zIndex-8: 8 * (@xf-zIndexMultiplier);
@zIndex-9: 9 * (@xf-zIndexMultiplier);
// AVATARS
@_avatarBaseSize: 96px;
@avatar-xxs: (@_avatarBaseSize) / 4;
@avatar-xs: (@_avatarBaseSize) / 3;
@avatar-s: (@_avatarBaseSize) / 2;
@avatar-m: (@_avatarBaseSize);
@avatar-l: (@_avatarBaseSize) * 2;
@avatar-o: (@_avatarBaseSize) * 4;
@rtl: xf-isRtl;
@ltr: xf-isLtr;
@_menu-paddingH: @xf-paddingLarge;
@_menu-paddingV: calc(@_menu-paddingH / 2);
{{ include('setup_fa_variables.less') }}
// ######################## UI.X Variables ######################
// UI.X browser query variables
@isIe: ~"(-ms-high-contrast: none), (-ms-high-contrast: active)";
@uix_sidebarNavBreakpoint: {{ property('pageWidthMax') + ( 2 * (property('uix_sidebarNavWidth') + property('elementSpacer')) ) }}px;
<xf:set var="$uix_pageEdgeSpacer">{{ property('pageEdgeSpacer') * 2}}px</xf:set>
@uix_navigationPaddingV: 8px;
// ####################################### MIXINS ##################################
.m-clearFix()
{
&:before,
&:after
{
content: " ";
display: table;
}
&:after
{
clear: both;
}
}
.m-hideText()
{
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
.m-overflowEllipsis()
{
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
}
.m-appendColon()
{
&:after
{
content: "{$xf.language.label_separator}";
}
&.is-sentence:after
{
content: "";
}
}
.m-tooltipArrow(@color, @size, @variation: ~'', @fillColor: false)
{
@{variation}.tooltip--top &
{
bottom: 0;
left: 50%;
margin-left: -@size;
.m-triangleDown(@color, @size);
}
@{variation}.tooltip--bottom &
{
top: 0;
left: 50%;
margin-left: -@size;
.m-triangleUp(@color, @size);
}
@{variation}.tooltip--right &
{
top: 50%;
left: 0;
margin-top: -@size;
.m-triangleLeft(@color, @size);
}
@{variation}.tooltip--left &
{
top: 50%;
right: 0;
margin-top: -@size;
.m-triangleRight(@color, @size);
}
& when (iscolor(@fillColor))
{
@{variation} &:after
{
position: absolute;
content: '';
}
@{variation}.tooltip--top &:after
{
bottom: 1px;
left: -@size + 1px;
.m-triangleDown(@fillColor, @size - 1px);
}
@{variation}.tooltip--bottom &:after
{
top: 1px;
left: -@size + 1px;
.m-triangleUp(@fillColor, @size - 1px);
}
@{variation}.tooltip--right &:after
{
left: 1px;
bottom: -@size + 1px;
.m-triangleLeft(@fillColor, @size - 1px);
}
@{variation}.tooltip--left &:after
{
right: 1px;
bottom: -@size + 1px;
.m-triangleRight(@fillColor, @size - 1px);
}
}
}
.m-triangleUp(@color; @size)
{
border: @size solid transparent;
border-top-width: 0;
border-bottom-color: @color;
}
.m-triangleDown(@color; @size)
{
border: @size solid transparent;
border-bottom-width: 0;
border-top-color: @color;
}
.m-triangleLeft(@color; @size)
{
border: @size solid transparent;
border-left-width: 0;
border-right-color: @color;
}
.m-triangleRight(@color; @size)
{
border: @size solid transparent;
border-right-width: 0;
border-left-color: @color;
}
.m-dropShadow(@x: 1px; @y: 2px; @blur: 2px; @spread: 0; @alpha: 0.25)
{
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.m-textOutline(@fillColor: white; @strokeColor: black; @width: 1px;)
{
-webkit-text-fill-color: @fillColor;
-webkit-text-stroke-color: @strokeColor;
-webkit-text-stroke-width: @width;
}
.m-gradient(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%)
{
background: @fallback;
background: linear-gradient(to bottom, @startColor @startPos, @stopColor @endPos);
}
.m-gradientHorizontal(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%)
{
background: @fallback;
& when(@ltr)
{
background: linear-gradient(to right, @startColor @startPos, @stopColor @endPos);
}
& when(@rtl)
{
background: linear-gradient(to left, @startColor @startPos, @stopColor @endPos);
}
}
.m-tabSize(@size: 4)
{
-moz-tab-size: @size;
tab-size: @size;
}
.m-transition(@prop: all; @duration: @xf-animationSpeed; @ease: ease)
{
-webkit-transition: @prop @duration @ease;
transition: @prop @duration @ease;
}
.m-transitionProperty(@props)
{
-webkit-transition-property: @props;
transition-property: @props;
}
.m-animation(@props)
{
-webkit-animation: @props;
animation: @props;
}
.m-transform(@props)
{
-webkit-transform: @props;
-ms-transform: @props;
transform: @props;
}
.m-keyframes(@name, @rules)
{
@-webkit-keyframes @name { @rules(); }
@keyframes @name { @rules(); }
}
.m-columns(@count; @breakWidth: 0; @gap: 1em)
{
-moz-column-count: @count;
-webkit-column-count: @count;
column-count: @count;
-moz-column-gap: @gap;
-webkit-column-gap: @gap;
column-gap: @gap;
& when(@breakWidth > 0)
{
@media (max-width: @breakWidth)
{
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
}
.m-columnBreakAvoid()
{
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
page-break-inside: avoid;
}
.m-borderLeftRadius(@radius)
{
border-top-left-radius: @radius;
border-bottom-left-radius: @radius;
}
.m-borderRightRadius(@radius)
{
border-top-right-radius: @radius;
border-bottom-right-radius: @radius;
}
.m-borderTopRadius(@radius)
{
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}
.m-borderBottomRadius(@radius)
{
border-bottom-left-radius: @radius;
border-bottom-right-radius: @radius;
}
.m-hiddenLinks()
{
a
{
color: inherit;
text-decoration: none;
&:hover
{
text-decoration: underline;
}
}
}
.m-textColoredLinks()
{
a
{
color: inherit;
text-decoration: underline;
}
}
.m-placeholder(@rules)
{
&::-webkit-input-placeholder { @rules(); }
&::-moz-placeholder { @rules(); }
&:-moz-placeholder { @rules(); }
&:-ms-input-placeholder { @rules(); }
}
.m-autoCompleteList()
{
.m-listPlain();
cursor: default;
.xf-menu();
min-width: 180px;
max-width: 95%;
border: @xf-borderSize solid @xf-borderColor;
.m-dropShadow(0, 3px, 5px, 0, .3);
li
{
padding: @xf-paddingMedium;
line-height: 24px;
.m-clearFix();
&.is-selected
{
background: @xf-contentHighlightBg;
}
.autoCompleteList-icon
{
float: left;
margin-right: @xf-paddingMedium;
width: 24px;
height: 24px;
}
}
}
.m-listPlain()
{
list-style: none;
margin: 0;
padding: 0;
}
// makes direct children display: inline-block, removing white-space between elements (mostly used on ul > li)
.m-inlineBlocks(@fontSize: @xf-fontSizeNormal)
{
font-size: 0;
> *
{
display: inline-block;
font-size: @fontSize;
}
}
.m-tabsTogether(@fontSize: @xf-fontSizeNormal)
{
font-size: 0;
.tabs-tab,
.tabs-extra,
.hScroller-action
{
font-size: @fontSize;
}
}
.m-hiddenEl(@transition: true)
{
display: none;
&.is-active
{
display: block;
}
& when(@transition = true)
{
.m-transitionFadeDown();
}
}
.m-transitionFade(@speed: @xf-animationSpeed)
{
display: none;
opacity: 0;
.m-transition(all, @speed);
.m-transitionProperty(all, -xf-opacity;);
&.is-active
{
display: block;
opacity: 1;
}
&.is-transitioning
{
display: block;
}
}
.m-transitionFadeDown(@speed: @xf-animationSpeed)
{
.m-transitionFade(@speed);
overflow-y: hidden;
height: 0;
.m-transitionProperty(all, -xf-height;);
&.is-active
{
height: auto;
overflow-y: visible;
}
&.is-transitioning
{
overflow-y: hidden;
}
}
.m-visuallyHidden()
{
position: absolute;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
.m-faBase()
{
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.m-faContent(@content, @width: false, @direction: false)
{
& when (@direction = false) {
content: @content;
}
& when (@direction = ltr) {
-ltr-content: @content;
}
& when (@direction = rtl) {
-rtl-content: @content;
}
& when (isnumber(@width)) {
display: inline-block;
width: @width;
}
}
.m-faBefore(@icon, @width: false)
{
&:before
{
.m-faContent(@icon, @width);
}
}
.m-faAfter(@icon, @width: false)
{
&:after
{
.m-faContent(@icon, @width);
}
}
.m-buttonIcon(@icon, @width: false)
{
& > .button-text
{
.m-faBefore(@icon, @width);
}
}
.m-avatarSize(@avatarSize)
{
width: @avatarSize;
height: @avatarSize;
font-size: @avatarSize * ((@xf-avatarDynamicTextPercent) / 100);
}
.m-buttonBase()
{
display: inline-block;
text-decoration: none;
cursor: pointer;
border: @xf-borderSize solid transparent;
white-space: nowrap;
.m-transition(background-color);
.xf-buttonBase();
}
.m-buttonColorVariation(@bgColor; @textColor)
{
color: @textColor;
background-color: @bgColor;
.m-buttonBorderColorVariation(@bgColor);
&:hover,
&:active,
&:focus
{
background-color: saturate(xf-intensify(@bgColor, 4%), 12%);
}
}
.m-buttonBlockColorVariationSimple(@color)
{
.m-buttonBorderColorVariation(@color);
&:not(.button--splitTrigger),
&.button--splitTrigger > .button-text,
&.button--splitTrigger > .button-menu
{
&:hover,
&:focus,
&:active
{
// background-color: saturate(xf-intensify(@color, 4%), 12%);
}
}
}
.m-buttonBorderColorVariation(@borderColor)
{
// border-color: xf-diminish(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-diminish(@borderColor, 5%);
border-color: xf-intensify(@borderColor, 5%);
&.button--splitTrigger
{
> .button-text { border-right-color: xf-intensify(@borderColor, 5%); }
> .button-menu { border-left-color: xf-diminish(@borderColor, 5%); }
}
}
// this will be replaced by the CSS renderer with the correct background-image rule
.m-selectGadgetColor(@color: black)
{
-xf-select-gadget: @color;
}
.m-hScrollerActionColorVariation(@background, @text, @textHover)
{
color: @text;
&:hover
{
color: @textHover;
}
&.hScroller-action--start
{
.m-gradientHorizontal(@background, fade(@background, 0%), @background, 66%, 100%);
}
&.hScroller-action--end
{
.m-gradientHorizontal(fade(@background, 0%), @background, @background, 0%, 33%);
}
}
// Fix for iOS zoom on input focus.
.m-inputZoomFix()
{
@media (max-width: 568px)
{
font-size: 16px;
}
}
.m-checkboxAligner()
{
vertical-align: -2px;
}
.m-highResolution(@rules)
{
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi)
{
@rules();
}
}
// UI.X MIXINS
.m-uix_collapseOverflow() {
clip-path: inset(-2px -2px -2px -2px);
@media @isIe {
overflow: hidden;
}
}
.m-uix_removePageSpacer() {
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
margin-left: -@xf-pageEdgeSpacer * .5;
margin-right: -@xf-pageEdgeSpacer * .5;
border-radius: 0;
border-left: none;
border-right: none;
}
}
.m-pageSpacerPadding() {
padding-left: @xf-pageEdgeSpacer;
padding-right: @xf-pageEdgeSpacer;
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
padding-left: {{ property('pageEdgeSpacer') / 2 }}px;
padding-right: {{ property('pageEdgeSpacer') / 2 }}px;
padding-left: ~"max(10px, env(safe-area-inset-left)) !important";
padding-right: ~"max(10px, env(safe-area-inset-right)) !important";
}
}
.m-pageSpacer() {
<xf:if is="property('uix_pageStyle') != 'wrapped'">
width: calc(~"100% - {{$uix_pageEdgeSpacer}}");
</xf:if>
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
<xf:if is="property('uix_pageStyle') == 'covered'">
width: calc(~"100% - @xf-pageEdgeSpacer");
<xf:else />
width: 100%;
</xf:if>
}
}
.m-pageWidth()
{
max-width: @xf-pageWidthMax;
margin-left: auto;
margin-right: auto;
width: 100%;
.m-pageSpacer();
<xf:if is="property('uix_pageStyle') != 'covered'">
.m-pageSpacerPadding();
</xf:if>
transition: max-width 0.2s;
@media (max-width: @xf-responsiveWide) {
<xf:if is="property('uix_pageStyle') == 'covered'">
padding-left: env(safe-area-inset-left) !important;
padding-right: env(safe-area-inset-right) !important;
</xf:if>
}
.uix_page--fluid & {
<xf:if is="property('uix_pageStyle') != 'wrapped'">
@media (min-width: @xf-pageWidthMax) {
max-width: 100%;
}
<xf:else />
max-width: 100%;
</xf:if>
}
<xf:if is="(property('uix_navigationType') == 'sidebarNav') && (property('uix_pageStyle') == 'covered')">
@media (max-width: @uix_sidebarNavBreakpoint) {
.uix_page--fixed & {max-width: 100%;}
#uix_widthToggle--trigger {display: none;}
}
</xf:if>
}
// Sticky sidebar/sidenav
<xf:if is="(property('uix_searchPosition') == 'tablinks') && (property('uix_loginTriggerPosition ') == 'tablinks') && (property('uix_userTabsPosition ') == 'tablinks')">
<xf:set var="$uix_sectionLinkHeight">{{property('uix_sectionLinkHeight')}}</xf:set>
<xf:elseif is="property('uix_viewportWidthRemoveSubNav') == '100%'" />
<xf:set var="$uix_sectionLinkHeight">0px</xf:set>
<xf:else />
<xf:set var="$uix_sectionLinkHeight">{{property('uix_sectionLinkHeight')}}</xf:set>
</xf:if>
<xf:if is="property('publicNavSticky') == 'none'">
@uix_navHeight: {{ property('elementSpacer') }};
<xf:elseif is="property('publicNavSticky') == 'primary'" />
@uix_navHeight: {{ property('elementSpacer') + property('uix_stickyNavHeight') }};
<xf:elseif is="property('publicNavSticky') == 'all'" />
@uix_navHeight: {{ property('elementSpacer') + property('uix_stickyNavHeight')}}px + {{$uix_sectionLinkHeight }};
</xf:if>
.m-fixedWidthFlex(@width)
{
flex: 0 0 @width;
.has-no-flexbox &
{
width: @width;
}
}
.m-labelVariation(@color; @bg; @border: false)
{
color: @color;
background: @bg;
border-color: xf-intensify(@bg, 10%);
& when (iscolor(@border))
{
border-color: @border;
}
a&:hover,
a:hover &
{
background: xf-intensify(@bg, 4%);
border-color: xf-intensify(@bg, 14%);
& when (iscolor(@border))
{
border-color: xf-intensify(@border, 4%);
}
}
}
// STICKY HEADER STUFF
// Note that to access the height and offset, you need to call the mixin and use the variables locally.
@header-navHeight: 2 * (@xf-publicNavPaddingV)
+ (xf-default(@xf-publicNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault));
@header-subNavHeight: 2 * (@xf-publicSubNavPaddingV)
+ (xf-default(@xf-publicSubNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault))
+ xf-default(@xf-publicSubNav--border-top-width, 0)
+ xf-default(@xf-publicSubNav--border-bottom-width, 0);
.m-stickyHeaderConfig(@type)
{
@_stickyHeader-offset: 10px;
@_stickyHeader-height: 0;
}
.m-stickyHeaderConfig(@type) when(@type = primary)
{
@_stickyHeader-height: @header-navHeight;
}
.m-stickyHeaderConfig(@type) when(@type = all)
{
@_stickyHeader-height: @header-navHeight + @header-subNavHeight;
}]]></template>
<template title="snog_movies_threadinfo" type="public" addon_id="Snog/Movies" version_id="2000870" version_string="2.0.8"><![CDATA[<div>
<xf:if is="$xf.options.tmdbthreads_show_forum.1"><b>{{ phrase('title') }}:</b> {$thread.Movie.tmdb_title}<br /></xf:if>
<xf:if is="$thread.Movie.tmdb_tagline && $xf.options.tmdbthreads_show_forum.2"><b>{{ phrase('snog_movies_tagline') }}:</b> {$thread.Movie.tmdb_tagline}<br /></xf:if>
<xf:if is="$thread.Movie.tmdb_genres && $xf.options.tmdbthreads_show_forum.3"><b>{{ phrase('snog_movies_genre') }}:</b> {$thread.Movie.tmdb_genres}<br /></xf:if>
<xf:if is="$thread.Movie.tmdb_director && $xf.options.tmdbthreads_show_forum.4"><b>{{ phrase('snog_movies_director') }}:</b> {$thread.Movie.tmdb_director}<br /></xf:if>
<xf:if is="$thread.Movie.tmdb_runtime && $xf.options.tmdbthreads_show_forum.5"><b>{{ phrase('snog_movies_runtime') }}:</b> {$thread.Movie.tmdb_runtime}<br /></xf:if>
<xf:if is="$thread.Movie.tmdb_release && $xf.options.tmdbthreads_show_forum.6"><b>{{ phrase('snog_movies_release') }}:</b> {$thread.Movie.tmdb_release}<br /></xf:if>
<ul class="structItem-parts">
<li><xf:username user="$thread.User" defaultname="{$thread.username}" /></li>
<li class="structItem-startDate"><a href="{{ link('threads', $thread) }}" rel="nofollow"><xf:date time="{$thread.post_date}" /></a></li>
<xf:if is="!$forum">
<li><a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a></li>
</xf:if>
</ul>
</div>]]></template>
<template title="structured_list.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[@_structItem-avatarSize: 36px;
@_structItem-avatarSizeExpanded: 48px;
@_structItem-cellPaddingH: @xf-uix_structPaddingH;
@_structItem-cellPaddingV: @xf-uix_structPaddingV;
.structItemContainer
{
display: table;
table-layout: fixed;
border-collapse: collapse;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.structItemContainer-group
{
display: table-row-group;
}
<xf:comment>
.structItemContainer > .structItem:first-child,
.structItemContainer > .structItemContainer-group:first-child > .structItem:first-child
{
border-top: none;
}
}
.structItemContainer--columnBreaker + .structItemContainer--connect,
.structItemContainer--columnBreaker + .structItemContainer:first-child,
.structItemContainer--columnBreaker + .structItemContainer > .structItemContainer-group:first-child > .structItem:first-child,
.structItemContainer + .structItemContainer--columnBreaker:first-child,
.structItemContainer + .structItemContainer--columnBreaker > .structItemContainer-group:first-child > .structItem:first-child
{
border-top: @xf-borderSize solid @xf-borderColorFaint;
}
</xf:comment>
.block-minorHeader.uix_threadListSeparator {
display: flex;
align-items: center;
.xf-uix_threadListSeparator();
}
.structItemContainer-group--sticky {
.structItem--thread {
.xf-uix_discussionListItemSticky();
}
}
.structItem--thread.is-moderated {.xf-uix_discussionListItemModerated();}
.structItem--thread.is-deleted {.xf-uix_discussionListItemDeleted();}
.structItem.is-mod-selected .structItem-cell--meta,
.structItem--thread.is-deleted .structItem-cell--meta{background: none;}
.structItem
{
display: table;
border-top: @xf-borderSize solid @xf-borderColorFaint;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
.xf-uix_discussionListItem();
.pairs {line-height: inherit;}
&:nth-child(even) {
background-color: @xf-uix_discussionListItemEven;
}
&--thread:hover {
background-color: @xf-uix_discussionListItemHover;
<xf:if is="property('uix_discussionListItemHover')">
.structItem-cell--meta {
background-color: transparent
}
</xf:if>
}
&.is-highlighted,
&.is-moderated
{
// background: @xf-contentHighlightBg;
.xf-uix_discussionListItemModerated();
}
&.is-deleted
{
opacity: .7;
.structItem-title
{
text-decoration: line-through;
}
}
&.is-mod-selected
{
background: @xf-inlineModHighlightColor;
opacity: 1;
}
&:last-child {
border-bottom-left-radius: @xf-blockBorderRadius;
border-bottom-right-radius: @xf-blockBorderRadius;
}
}
.threadListSeparator {
.xf-uix_threadListSeparator();
}
.structItem-cell
{
display: table-cell;
vertical-align: top;
padding: @_structItem-cellPaddingV @_structItem-cellPaddingH;
.structItem--middle &
{
vertical-align: middle;
}
&.structItem-cell--icon
{
width: ((@_structItem-avatarSize) + (@_structItem-cellPaddingH) * 2);
position: relative;
&.structItem-cell--iconExpanded
{
width: ((@_structItem-avatarSizeExpanded) + (@_structItem-cellPaddingH) * 2);
}
&.structItem-cell--iconFixedSmall
{
width: (60px + (@_structItem-cellPaddingH) * 2);
}
}
&.structItem-cell--meta
{
width: 150px;
.xf-uix_metaCell();
@media (max-width: @xf-responsiveMedium) {
background: none;
// padding: 0;
border: none;
.pairs {line-height: inherit;}
}
}
&.structItem-cell--latest
{
width: 220px;
text-align: right;
font-size: @xf-fontSizeSmaller;
a:not(:hover) {color: @xf-textColorMuted;}
}
}
.structItem-iconContainer
{
position: relative;
img
{
display: block;
width: 100%;
}
.avatar
{
.m-avatarSize(@_structItem-avatarSize);
}
.structItem-secondaryIcon
{
position: absolute;
right: -5px;
bottom: -5px;
.m-avatarSize(@_structItem-avatarSize / 2 + 2px);
}
.structItem-cell--iconExpanded &
{
.avatar
{
.m-avatarSize(@_structItem-avatarSizeExpanded);
}
.structItem-secondaryIcon
{
.m-avatarSize(@_structItem-avatarSizeExpanded / 2 - 2px);
}
}
}
.structItem-title
{
font-size: @xf-fontSizeLarge;
font-weight: @xf-fontWeightNormal;
margin: 0;
padding: 0;
.xf-uix_discussionListTitle();
.label
{
font-weight: @xf-fontWeightNormal;
}
a {
color: inherit;
&:hover {color: @xf-linkHoverColor;}
}
.is-unread &
{
font-weight: @xf-fontWeightHeavy;
.xf-uix_discussionListTitleUnread();
}
}
.structItem-minor
{
font-size: @xf-fontSizeSmaller;
color: @xf-textColorMuted;
.structItem-cell--main & {clear: both;}
.m-hiddenLinks();
}
.structItem-parts
{
.m-listPlain();
display: inline;
> li
{
display: inline;
margin: 0;
padding: 0;
&:nth-child(even)
{
color: @xf-textColorDimmed;
}
&:before
{
content: "\00B7\20";
}
&:first-child:before
{
content: "";
display: none;
}
}
}
.structItem-pageJump
{
margin-left: 8px;
font-size: @xf-fontSizeSmallest;
a
{
.xf-chip();
text-decoration: none;
border-radius: @xf-borderRadiusSmall;
padding: 0 3px;
opacity: .5;
.m-transition();
.structItem:hover &,
.has-touchevents &
{
opacity: 1;
}
&:hover
{
text-decoration: none;
.xf-chipHover();
}
}
}
.structItem-statuses,
.structItem .structItem-extraInfo
{
.m-listPlain();
float: right;
label.iconic--checkbox i {text-align: right;}
> li
{
float: left;
margin-left: 8px;
}
input[type=checkbox]
{
.m-checkboxAligner();
}
}
.structItem-status
{
.m-faBase();
display: inline-block;
font-size: @xf-fontSizeNormal;
color: @xf-textColorMuted;
&--deleted::before { .m-faContent(@fa-var-trash-o, .79em); <xf:macro template="uix_icons.less" name="content" arg-icon="delete" /> }
&--locked::before { color: #d28b00; .m-faContent(@fa-var-lock, .65em); <xf:macro template="uix_icons.less" name="content" arg-icon="lock" /> }
&--moderated::before { color: #00a500; .m-faContent(@fa-var-shield, .72em); <xf:macro template="uix_icons.less" name="content" arg-icon="moderate" /> }
&--redirect::before { color: #0026bd; .m-faContent(@fa-var-external-link, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="redirect" /> }
&--starred::before { .m-faContent(@fa-var-star, 0.93em); <xf:macro template="uix_icons.less" name="content" arg-icon="star" /> color: #fae587; }
&--sticky::before { color: #ca0000; .m-faContent(@fa-var-thumb-tack, .65em); <xf:macro template="uix_icons.less" name="content" arg-icon="sticky" /> }
&--watched::before { color: #910098; .m-faContent(@fa-var-eye, 1em); <xf:macro template="uix_icons.less" name="content" arg-icon="watched" /> }
&--poll::before { color: #e200ec; .m-faContent(@fa-var-bar-chart, 1.15em); <xf:macro template="uix_icons.less" name="content" arg-icon="poll" />}
&--attention::before { .m-faContent(@fa-var-bullhorn, 1.04em); <xf:macro template="uix_icons.less" name="content" arg-icon="attention" />}
}
.structItem.structItem--note
{
.xf-contentHighlightBase();
color: @xf-textColorFeature;
.structItem-cell
{
padding-top: @_structItem-cellPaddingV / 2;
padding-bottom: @_structItem-cellPaddingV / 2;
font-size: @xf-fontSizeSmaller;
text-align: center;
}
}
@media (max-width: @xf-responsiveWide)
{
.structItem-cell
{
vertical-align: top;
&.structItem-cell--meta
{
width: 120px;
font-size: @xf-fontSizeSmaller;
}
&.structItem-cell--latest
{
width: 140px;
font-size: @xf-fontSizeSmaller;
}
}
}
@media (max-width: @xf-uix_discussionListCollapseWidth)
{
.structItem-cell
{
//padding: (@_structItem-cellPaddingV) / 2 @_structItem-cellPaddingH;
&.structItem-cell--main
{
display: block;
padding-bottom: .2em;
padding-left: 0;
.structItem-minor {float: right;}
}
&.structItem-cell--meta
{
display: block;
width: auto;
float: left;
padding-top: 0;
padding-left: 0;
padding-right: 0;
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmaller;
display: none;
.structItem-minor
{
display: none;
}
.pairs
{
> dt,
> dd
{
display: inline;
float: none;
margin: 0;
}
dt {display: none;}
dd:before {<xf:macro template="uix_icons.less" name="content" arg-icon="post" />}
dd:after {
content: "\00A0\00B7\20";
color: @xf-textColorMuted;
}
}
}
&.structItem-cell--latest
{
display: block;
width: auto;
float: left;
padding-top: 0;
padding-left: 0;
display: flex;
align-items: center;
line-height: 1;
flex-wrap: wrap;
a {order: 2;}
.structItem-minor {
order: 1;
&:after {order: 2;}
}
.uix_mobileNodeTitle {order: 3;}
&:before
{
// content: "\00A0\00B7\20";
color: @xf-textColorMuted;
}
a
{
color: @xf-textColorMuted;
}
.structItem-minor
{
display: inline-flex;
&:before {
<xf:macro template="uix_icons.less" name="content" arg-icon="reply" />
margin-right: 2px;
}
&:after {
content: " {{ phrase('th_uix_replied') }} ";
white-space: pre;
}
}
}
}
.structItem-pageJump,
.structItem-extraInfoMinor
{
display: none;
}
.is-unread .structItem-latestDate
{
font-weight: @xf-fontWeightNormal;
}
}
@media (max-width: @xf-uix_discussionListCollapseWidth)
{
.structItem-parts {display: none;}
}
@media (min-width: @xf-uix_discussionListCollapseWidth) {
.uix_threadRepliesMobile {
display: none;
}
}
@media (max-width: @xf-uix_discussionListCollapseWidth) {
.structItem .lastPostAv {display: none;}
}
/* if sidebar, then break discussion list earlier */
.p-body-main--withSidebar {
@media (min-width: @xf-uix_sidebarBreakpoint) and (max-width: 1200px)
{
.structItem-cell
{
//padding: (@_structItem-cellPaddingV) / 2 @_structItem-cellPaddingH;
&.structItem-cell--main
{
display: block;
padding-bottom: .2em;
padding-left: 0;
.structItem-minor {float: right;}
}
&.structItem-cell--meta
{
display: block;
width: auto;
float: left;
padding-top: 0;
padding-left: 0;
padding-right: 0;
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmaller;
display: none;
.structItem-minor
{
display: none;
}
.pairs
{
> dt,
> dd
{
display: inline;
float: none;
margin: 0;
}
dt {display: none;}
dd:before {<xf:macro template="uix_icons.less" name="content" arg-icon="post" />}
dd:after {
content: "\00A0\00B7\20";
color: @xf-textColorMuted;
}
}
}
&.structItem-cell--latest
{
display: block;
width: auto;
float: left;
padding-top: 0;
padding-left: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 1;
&:before
{
// content: "\00A0\00B7\20";
color: @xf-textColorMuted;
}
a
{
color: @xf-textColorMuted;
}
.structItem-minor
{
display: inline-block;
&:before {<xf:macro template="uix_icons.less" name="content" arg-icon="reply" />}
&:after {
content: ' replied ';
white-space: pre;
}
}
}
}
.structItem-pageJump,
.structItem-extraInfoMinor
{
display: none;
}
.is-unread .structItem-latestDate
{
font-weight: @xf-fontWeightNormal;
}
}
@media (min-width: @xf-uix_sidebarBreakpoint) and (max-width: 1200px)
{
.structItem-parts {display: none;}
}
@media (min-width: @xf-uix_sidebarBreakpoint) and (max-width: 1200px) {
.uix_threadRepliesMobile {
display: block;
}
}
@media (min-width: @xf-uix_sidebarBreakpoint) and (max-width: 1200px) {
.structItem .lastPostAv {display: none;}
}
}
<xf:comment>
@media (max-width: @xf-responsiveNarrow) {
.structItem-cell.structItem-cell--main .structItem-minor {float: none;}
}
</xf:comment>]]></template>
<template title="tag_view" type="public" addon_id="XF" version_id="2000035" version_string="2.0.0 Beta 5"><![CDATA[<xf:title page="{$page}">{$tag.tag}</xf:title>
<xf:breadcrumb href="{{ link('tags') }}">{{ phrase('tags') }}</xf:breadcrumb>
<xf:if is="$activeModType">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<div class="block" data-xf-init="{{ $activeModType ? 'inline-mod' : '' }}" data-type="{$activeModType}" data-href="{{ link('inline-mod') }}">
<xf:if is="$modTypes">
<div class="block-outer">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:if is="$activeModType">
<xf:macro template="inline_mod_macros" name="button" />
</xf:if>
<div class="buttonGroup-buttonWrapper">
<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('enable_moderation') }}</xf:button>
<div class="menu" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<h3 class="menu-header">{{ phrase('enable_moderation') }}</h3>
<xf:foreach loop="$modTypes" key="$type" value="$text">
<a href="{{ link('tags', $tag, {'mod': $type, 'page': $page}) }}" class="menu-linkRow {{ $activeModType == $type ? 'is-selected' : '' }}">{$text}</a>
</xf:foreach>
<xf:if is="$activeModType">
<hr class="menu-separator" />
<a href="{{ link('tags', $tag, {'page': $page}) }}" class="menu-linkRow">{{ phrase('disable') }}</a>
</xf:if>
</div>
</div>
</div>
</div>
</div>
</div>
</xf:if>
<div class="block-container">
<ol class="block-body">
<xf:foreach loop="$results" value="$result">
{{ $result.render({'mod': $activeModType})|raw }}
</xf:foreach>
</ol>
</div>
<xf:if contentcheck="true">
<div class="block-outer block-outer--after">
<xf:contentcheck>
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$totalResults}"
link="tags" data="{$tag}" params="{{ {'mod': $activeModType} }}"
wrapperclass="block-outer-main" />
<xf:showignored wrapperclass="block-outer-opposite" />
</xf:contentcheck>
</div>
</xf:if>
</div>]]></template>
<template title="th_node_list_grid_nodes.less" type="public" addon_id="ThemeHouse/Nodes" version_id="1000470" version_string="1.0.4"><![CDATA[.node-footer--actions {
a {
font-size: 18px;
&:not(:last-child) {padding-right: 5px;}
&:before {width: auto !important;}
}
}
@keyframes loadUp {
from {bottom: 0; opacity: 0;}
to {bottom: 0; opacity: 1;}
}
.m-uix_loadUp() {
animation: loadUp;
animation-duration: .8s;
position: relative;
}
.has-js .thNodes__nodeList.thNodes__nodeList--running .block--category {.m-uix_loadUp();}
.has-flexbox .thNodes__nodeList {
display: flex;
margin-left: -@xf-th_nodeGutter;
margin-right: -@xf-th_nodeGutter;
flex-wrap: wrap;
> .block {
padding: 0 @xf-th_nodeGutter;
width: 100%;
}
.thNodes_separator {
display: none;
}
}
.has-js .thNodes__nodeList {
visibility: hidden;
}
.has-js .thNodes__nodeList.thNodes__nodeList--running {
visibility: visible;
}
.has-flexbox .thNodes__nodeList .block-container {
background: none;
border: none;
box-shadow: none;
.block-body {
background: none;
display: flex;
flex-wrap: wrap;
}
.thNodes__nodeHeader {
display: flex;
flex-grow: 1;
}
.block-header {
margin-bottom: @xf-th_nodeGutter;
}
.node {
padding: @xf-th_nodeGutter @xf-th_nodeGutter 0 0;
flex-basis: 300px;
display: flex;
flex-direction: column;
+ .node {border: none;}
&.th_nodes_row_1 {padding-top: 0;}
@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px ) {
&.th_nodes_right {padding-right: 0;}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
&.th_nodes_col_1 {padding-left: @xf-th_nodeGutter;}
}
}
.node-stats {display: none;}
.node-statsMeta {display: inline;}
.th_nodes--below-lg {
.node-main {
flex-grow: 1;
}
.node-stats {display: none;}
.node-extra {
// display: flex;
width: 100%;
margin-top: 0;
padding-top: @xf-paddingLarge;
}
}
.th_nodes--below-md {
.node-statsMeta {display: inline;}
}
.node-body {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-wrap: wrap;
background-color: @xf-contentBg;
border: 1px solid @xf-borderColor;
.xf-th_nodeBody();
}
.block-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
order: 1;
align-self: flex-end;
&:before,
&:after {display: none;}
a {
display: inline-flex;
align-items: center;
&:hover {text-decoration: none;}
}
}
.node-footer--more a:before {
.m-faBase();
.m-faContent(@fa-var-arrow-right);
font-size: 18px;
}
.node-footer--createThread:before {
.m-faBase();
.m-faContent(@fa-var-plus-circle, .58em);
font-size: 18px;
}
/*
.th_node--hasBackground {
.node-icon {
i:before {color: rgba(255,255,255,.5);}
}
.node-description {color: rgba(255,255,255,.7);}
.node-title {color: #fff;}
.node-title a {color: inherit;}
.node-extra {color: rgba(255,255,255,.7);}
.node-extra-row {
color: inherit;
.node-extra-title {color: #fff;}
.username {color: inherit; text-decoration: underline;}
}
.node-statsMeta {
dt {color: rgba(255,255,255,.5);}
dd {color: rgba(255,255,255,.7);}
}
.node-stats {
dt {color: rgba(255,255,255,.5);}
dd {color: rgba(255,255,255,.7);}
}
.block-footer {
background: rgba(0,0,0,.3);
// background: none;
border: none;
a {color: #fff;}
}
.node-subNodeFlatList {
.subNodeLink:before {color: rgba(255,255,255,.5);}
a {color: rgba(255,255,255,.7);}
}
}
*/
.th_node--hasBackgroundImage {
.node-body {
background-size: cover;
background-position: center;
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: @xf-th_imageOverlay;
}
> * {z-index: 1;}
}
}
}]]></template>
<template title="th_node_macros_nodes" type="public" addon_id="ThemeHouse/Nodes" version_id="1000331" version_string="1.0.3 Beta 1"><![CDATA[<xf:macro name="node_list_item_footer"
arg-node="!">
<xf:if is="{{ property('th_enableNodeFooter_nodes') }}">
<div class="block-footer has-flexbox">
<div class="node-footer--actions">
<xf:if is="$node.node_type_id === 'Forum' && $node.getData().canCreateThread()">
<a href="{{ link('forums/post-thread', $node) }}"
data-xf-click="overlay"
class="node-footer--createThread"
data-xf-init="tooltip"
title="{{ phrase('post_thread...') }}"></a>
</xf:if>
<xf:if is="$node.node_type_id === 'Forum' && $node.Data.canWatch()">
<a href="{{ link('forums/watch', $node.Data) }}"
data-xf-click="switch-overlay"
title="{{ $node.Data.Watch.{$xf.visitor.user_id} ? phrase('unwatch') : phrase('watch') }}"
data-xf-init="tooltip"
data-sk-watch="addClass:fa-eye,removeClass:fa-eye-slash,"
data-sk-unwatch="addClass:fa-eye-slash,removeClass:fa-eye,"
class="fa fa-eye{{ $node.Data.Watch.{$xf.visitor.user_id} ? '-slash' : ''}}">
</a>
</xf:if>
</div>
<div class="node-footer--more">
<a href="{{ link($node.getRoute(), $node) }}"></a>
</div>
</div>
</xf:if>
</xf:macro>]]></template>
<template title="thpostcomments_post.less" type="public" addon_id="ThemeHouse/PostComments" version_id="1000091" version_string="1.0.0 Patch Level 1"><![CDATA[@postBitWidth: (@xf-messageUserBlockWidth) + 2 * (@xf-messagePadding);
@postBitWidthSmall: @_messageSimple-userColumnWidth + 2 * @xf-messagePaddingSmall;
@postBitAdjusted: @postBitWidth - @postBitWidthSmall;
@postbitSpacerDesktop: @xf-messagePadding + @avatar-xs;
.message--post {
.message-attribution--plain {display: none;}
&.thpostcomments_message--condensed {
.message-attribution--plain {display: block;}
.message-attribution--condensed {
display: flex;
.avatar {
display: none !important;
}
}
.message-attribution-user .avatar {
display: inline-block;
.m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
}
.message-attribution:not(.message-attribution--condensed) {display: none;}
}
}
.message--depth0 {
> .message-inner {
border-bottom: 1px solid @xf-borderColor;
margin-bottom: @xf-messagePadding;
.message-attribution--condensed {
display: none !important;
}
}
}
.block--messages .message .thpostcomments_commentsContainer {
border-top: 1px solid @xf-borderColor;
.message {
box-shadow: none;
margin-left: 20px;
border: none;
position: relative;
border-radius: 0;
margin-top: 20px;
.message-userArrow {display: none;}
.thpostcomments_commentLink {
margin-bottom: @xf-messagePaddingSmall;
display: block;
float: left;
}
.message-lastEdit {
display: none;
}
.message-inner {
display: flex;
}
.message-cell--main {
// padding-top: 0;
background: none;
padding-left: @xf-messagePadding;
}
&.message--depth1 {
margin-left: 10px;
}
&:not(.thpostcomments_message--expanded) > .message {
display: none;
}
&:not(:last-child) .thpostcomments_exandLine {
border-left: 1px dashed @xf-borderColor;
width: 1px;
display: inline-block;
position: absolute;
top: 10px + @avatar-xxs;
bottom: 0;
left: @avatar-xxs / 2;
}
.message-signature {
display: none;
}
.message-attribution-user {
display: flex;
align-items: center;
margin-right: 4px;
.avatar {
display: inline-block;
margin-right: 8px;
}
}
.message-attribution .listInline {
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
margin-right: @xf-paddingMedium;
}
.message-cell--user {
// padding: 0;
background: none;
flex-basis: auto;
border: none;
.avatar {
.m-avatarSize(@avatar-xxs) !important;
}
.message-user > *:not(.message-avatar) {
display: none;
}
}
@media (min-width: @xf-responsiveMedium) {
margin-left: @postbitSpacerDesktop;
&.message--depth1 {
margin-left: (@postbitSpacerDesktop) / 2;
}
&:not(:last-child) .thpostcomments_exandLine {
left: @avatar-xs / 2;
top: 20px + @avatar-xs;
}
.message-cell--user .avatar {
.m-avatarSize(@avatar-xs) !important;
}
}
}
}]]></template>
<template title="thread_list_macros" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="item"
arg-thread="!"
arg-forum=""
arg-forceRead="{{ false }}"
arg-showWatched="{{ true }}"
arg-allowInlineMod="{{ true }}"
arg-chooseName=""
arg-extraInfo=""
arg-allowEdit="{{ true }}">
<xf:css src="structured_list.less" />
<div class="structItem structItem--thread{{ $thread.prefix_id ? ' is-prefix' . $thread.prefix_id : '' }}{{ $thread.isIgnored() ? ' is-ignored' : '' }}{{ ($thread.isUnread() AND !$forceRead) ? ' is-unread' : '' }}{{ $thread.discussion_state == 'moderated' ? ' is-moderated' : '' }}{{ $thread.discussion_state == 'deleted' ? ' is-deleted' : '' }} js-inlineModContainer js-threadListItem-{$thread.thread_id}" data-author="{{ $thread.User.username ?: $thread.username }}">
<div class="structItem-cell structItem-cell--icon">
<div class="structItem-iconContainer">
<xf:avatar user="$thread.User" size="s" defaultname="{$thread.username}" />
<xf:if is="$thread.getUserPostCount()">
<xf:avatar user="$xf.visitor" size="s"
href=""
class="avatar--separated structItem-secondaryIcon"
title="{{ phrase('you_have_posted_x_messages_in_this_thread', {'count': $thread.getUserPostCount() }) }}" />
</xf:if>
</div>
</div>
<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">
<xf:if contentcheck="true">
<ul class="structItem-statuses">
<xf:contentcheck>
<xf:if is="$thread.discussion_state == 'moderated'">
<li>
<i class="structItem-status structItem-status--moderated" aria-hidden="true" title="{{ phrase('awaiting_approval')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('awaiting_approval') }}</span>
</li>
</xf:if>
<xf:if is="$thread.discussion_state == 'deleted'">
<li>
<i class="structItem-status structItem-status--deleted" aria-hidden="true" title="{{ phrase('deleted')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('deleted') }}</span>
</li>
</xf:if>
<xf:if is="!$thread.discussion_open">
<li>
<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('locked') }}</span>
</li>
</xf:if>
<xf:if is="$thread.discussion_type == 'redirect'">
<li>
<i class="structItem-status structItem-status--redirect" aria-hidden="true" title="{{ phrase('redirect')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('redirect') }}</span>
</li>
<xf:elseif is="$thread.discussion_type == 'poll'" />
<li>
<i class="structItem-status structItem-status--poll" aria-hidden="true" title="{{ phrase('poll')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('poll') }}</span>
</li>
</xf:if>
<xf:if is="{$showWatched} AND {$xf.visitor.user_id}">
<xf:if is="{$thread.Watch.{$xf.visitor.user_id}}">
<li>
<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('thread_watched')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('thread_watched') }}</span>
</li>
<xf:elseif is="!$forum AND {$thread.Forum.Watch.{$xf.visitor.user_id}}" />
<li>
<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('forum_watched')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('forum_watched') }}</span>
</li>
</xf:if>
</xf:if>
<xf:if is="$thread.sticky">
<li>
<i class="structItem-status structItem-status--sticky" aria-hidden="true" title="{{ phrase('sticky')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('sticky') }}</span>
</li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<div class="structItem-title" uix-data-href="{{ link('threads' . (($thread.isUnread() AND !$forceRead) ? '/unread' : ''), $thread) }}">
<xf:set var="$canPreview" value="{{ $thread.canPreview() }}" />
<xf:if is="$thread.prefix_id">
<xf:if is="$forum">
<a href="{{ link('forums', $forum, {'prefix_id': $thread.prefix_id}) }}" class="labelLink" rel="nofollow">{{ prefix('thread', $thread, 'html', '') }}</a>
<xf:else />
{{ prefix('thread', $thread, 'html', '') }}
</xf:if>
</xf:if>
<a href="{{ link('threads' . (($thread.isUnread() AND !$forceRead) ? '/unread' : ''), $thread) }}" class="" data-tp-primary="on" data-xf-init="{{ $canPreview ? 'preview-tooltip' : '' }}" data-preview-url="{{ $canPreview ? link('threads/preview', $thread) : '' }}">{$thread.title}</a>
</div>
<div class="structItem-minor">
<xf:if contentcheck="true">
<ul class="structItem-extraInfo">
<xf:contentcheck>
<xf:if is="{$extraInfo}">
<li>{$extraInfo}</li>
<xf:elseif is="$thread.canEdit() AND $thread.canUseInlineModeration() AND {$allowEdit}" />
<xf:if is="!$allowInlineMod OR !$forum">
<xf:set var="$editParams" value="{{ {
'_xfNoInlineMod': !$allowInlineMod ? 1 : null,
'_xfForumName': !$forum ? 1 : 0
} }}" />
<xf:else />
<xf:set var="$editParams" value="{{ [] }}" />
</xf:if>
<xf:if is="$thread.discussion_type != 'redirect'">
<li class="structItem-extraInfoMinor">
<a href="{{ link('threads/edit', $thread) }}" data-xf-click="overlay" data-href="{{ link('threads/edit', $thread, $editParams) }}">
{{ phrase('edit') }}
</a>
</li>
</xf:if>
</xf:if>
<xf:if is="$chooseName">
<li><xf:checkbox standalone="true">
<xf:option name="{$chooseName}[]" value="{$thread.thread_id}" class="js-chooseItem" />
</xf:checkbox></li>
<xf:elseif is="$allowInlineMod AND $thread.canUseInlineModeration()" />
<li><xf:checkbox standalone="true">
<xf:option value="{$thread.thread_id}" class="js-inlineModToggle"
data-xf-init="tooltip"
title="{{ phrase('select_for_moderation') }}"
label="{{ phrase('select_for_moderation') }}"
hiddenlabel="true"
/>
</xf:checkbox></li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<xf:if is="$thread.discussion_state == 'deleted'">
<xf:if is="{$extraInfo}"><span class="structItem-extraInfo">{$extraInfo}</span></xf:if>
<xf:macro template="deletion_macros" name="notice" arg-log="{$thread.DeletionLog}" />
<xf:else />
<ul class="structItem-parts">
<li><xf:username user="$thread.User" defaultname="{$thread.username}" /></li>
<li class="structItem-startDate"><a href="{{ link('threads', $thread) }}" rel="nofollow"><xf:date time="{$thread.post_date}" /></a></li>
<xf:if is="!$forum">
<li><a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a></li>
</xf:if>
<xf:if is="$thread.discussion_type != 'redirect' && $thread.reply_count >= $xf.options.messagesPerPage && $xf.options.lastPageLinks">
<span class="structItem-pageJump">
<xf:foreach loop="{{ last_pages($thread.reply_count + 1, $xf.options.messagesPerPage, $xf.options.lastPageLinks) }}" value="$p">
<a href="{{ link('threads', $thread, {'page': $p}) }}">{$p}</a>
</xf:foreach>
</span>
</xf:if>
</ul>
</xf:if>
<li class="uix_threadRepliesMobile">
<dl class="pairs pairs--justified">
<dt><xf:macro name="icon" template="uix_icons.less" arg-icon="post" /></dt>
<dd>{{ $thread.discussion_type == 'redirect' ? '–' : $thread.reply_count|number }}</dd>
</dl>
</li>
</div>
</div>
<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_likes:')|for_attr }} {$thread.first_post_likes|number}">
<dl class="pairs pairs--justified">
<dt>{{ phrase('replies') }}</dt>
<dd>{{ $thread.discussion_type == 'redirect' ? '–' : $thread.reply_count|number }}</dd>
</dl>
<dl class="pairs pairs--justified structItem-minor">
<dt>{{ phrase('views') }}</dt>
<dd>{{ $thread.discussion_type == 'redirect' ? '–' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number : number($thread.reply_count+1)) }}</dd>
</dl>
</div>
<div class="structItem-cell structItem-cell--latest">
<xf:if is="$thread.discussion_type == 'redirect'">
{{ phrase('n_a') }}
<xf:else />
<xf:if is="!$forum">
<a class="uix_mobileNodeTitle" href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a>
</xf:if>
<a href="{{ link('threads/latest', $thread) }}" rel="nofollow"><xf:date time="{$thread.last_post_date}" class="structItem-latestDate" /></a>
<div class="structItem-minor">
<xf:if is="$xf.visitor.isIgnoring($thread.last_post_user_id)">
{{ phrase('ignored_member') }}
<xf:else />
<xf:username user="{$thread.last_post_cache}" />
</xf:if>
</div>
</xf:if>
</div>
</div>
</xf:macro>
<xf:macro name="item_new_posts" arg-thread="!">
<div class="contentRow">
<div class="contentRow-figure">
<xf:avatar user="$thread.LastPoster" size="xxs" defaultname="{$thread.last_post_username}" />
</div>
<div class="contentRow-main contentRow-main--close">
<xf:if is="$thread.isUnread()">
<a href="{{ link('threads/unread', $thread) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
<xf:else />
<a href="{{ link('threads/post', $thread, {'post_id': $thread.last_post_id}) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
</xf:if>
<div class="contentRow-minor contentRow-minor--hideLinks">
<ul class="listInline listInline--bullet">
<li>{{ phrase('latest_x', {'name': $thread.last_post_cache.username}) }}</li>
<li><xf:date time="{$thread.last_post_date}" /></li>
</ul>
</div>
<div class="contentRow-minor contentRow-minor--hideLinks">
<a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="item_new_threads" arg-thread="!">
<div class="contentRow">
<div class="contentRow-figure">
<xf:avatar user="$thread.User" size="xxs" defaultname="{$thread.username}" />
</div>
<div class="contentRow-main contentRow-main--close">
<a href="{{ link('threads', $thread) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
<div class="contentRow-minor contentRow-minor--hideLinks">
<ul class="listInline listInline--bullet">
<li>{{ phrase('started_by_x', {'name': $thread.username}) }}</li>
<li><xf:date time="{$thread.post_date}" /></li>
<li>{{ phrase('replies:') }} {$thread.reply_count|number}</li>
</ul>
</div>
<div class="contentRow-minor contentRow-minor--hideLinks">
<a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="quick_thread"
arg-forum="!"
arg-page="1"
arg-order="last_post_date"
arg-direction="desc">
<xf:css src="structured_list.less" />
<xf:if is="$forum.canCreateThread()">
<xf:js src="xf/thread.js" min="1" />
<xf:set var="$inlineMode" value="{{ ($page == 1 && $order == 'last_post_date' && $direction == 'desc') ? true : false }}" />
<xf:form action="{{ link('forums/post-thread', $forum, {'inline-mode': $inlineMode}) }}" class="structItem" ajax="true"
draft="{{ link('forums/draft', $forum) }}"
data-xf-init="quick-thread"
data-focus-activate=".js-titleInput"
data-focus-activate-href="{{ link('forums/post-thread', $forum, {'inline-mode': true}) }}"
data-focus-activate-target=".js-quickThreadFields"
data-insert-target=".js-threadList"
data-replace-target=".js-emptyThreadList">
<div class="structItem-cell structItem-cell--icon">
<div class="structItem-iconContainer">
<xf:avatar user="$xf.visitor" size="s" />
</div>
</div>
<div class="structItem-cell structItem-cell--newThread js-prefixListenContainer">
<xf:formrow rowtype="noGutter noLabel fullWidth noPadding mergeNext"
label="{{ phrase('title') }}">
<xf:prefixinput maxlength="{{ max_length('XF:Thread', 'title') }}"
placeholder="{$forum.thread_prompt}"
title="{{ phrase('post_new_thread_in_this_forum') }}"
prefix-value="{$forum.default_prefix_id}"
type="thread"
prefixes="{{ $forum.getUsablePrefixes() }}"
data-xf-init="tooltip"
rows="1"/>
</xf:formrow>
<div class="js-quickThreadFields inserter-container is-hidden"><!--{{ phrase('loading...') }}--></div>
</div>
</xf:form>
</xf:if>
</xf:macro>]]></template>
<template title="thread_move" type="public" addon_id="XF" version_id="2000570" version_string="2.0.5"><![CDATA[<xf:title>{{ phrase('move_thread:') }} {{ prefix('thread', $thread, 'escaped') }}{$thread.title}</xf:title>
<xf:h1>{{ phrase('move_thread:') }} {{ prefix('thread', $thread) }}{$thread.title}</xf:h1>
<xf:breadcrumb source="$thread.getBreadcrumbs()" />
<xf:form action="{{ link('threads/move', $thread) }}" class="block" ajax="true">
<div class="block-container">
<div class="block-body js-prefixListenContainer">
<xf:prefixinputrow
label="{{ phrase('title') }}"
prefixes="{$prefixes}"
type="thread"
prefix-value="{$thread.prefix_id}"
textbox-value="{$thread.title}"
href="{{ link('forums/prefixes') }}"
listen-to="< .js-prefixListenContainer | .js-nodeList"
autofocus="autofocus"
maxlength="{{ max_length($thread, 'title') }}" />
<xf:selectrow name="target_node_id" value="{$forum.node_id}" class="js-nodeList"
label="{{ phrase('destination_forum') }}">
<xf:foreach loop="$nodeTree.getFlattened(0)" value="$treeEntry">
<xf:option value="{$treeEntry.record.node_id}" disabled="{{ $treeEntry.record.node_type_id != 'Forum' ? 'disabled' : '' }}">
{{ repeat_raw(' ', $treeEntry.depth) }} {$treeEntry.record.title}
</xf:option>
</xf:foreach>
</xf:selectrow>
<xf:macro template="helper_action" name="thread_redirect" arg-label="{{ phrase('redirection_notice') }}" />
<xf:checkboxrow>
<xf:option name="notify_watchers" value="1" selected="{{ true }}">{{ phrase('notify_members_watching_destination_forum') }}</xf:option>
</xf:checkboxrow>
<xf:if is="$thread.canSendModeratorActionAlert()">
<xf:macro template="helper_action" name="thread_alert" arg-selected="{{ true }}" />
</xf:if>
</div>
<xf:submitrow icon="save" sticky="true" />
</div>
</xf:form>]]></template>
<template title="thread_view" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:title page="{$page}">{{ prefix('thread', $thread, 'escaped') }}{$thread.title}</xf:title>
<xf:h1>{{ prefix('thread', $thread) }}{$thread.title}</xf:h1>
<xf:if is="{$xpressView}">
<xf:set var="$uix_condensed" value="1" />
</xf:if>
<xf:pageaction>
<xf:if is="$thread.canReply()">
<xf:button href="{{ link('threads/reply', $thread) }}" class="button--cta uix_quickReply--button" icon="write">{{ phrase('reply') }}</xf:button>
</xf:if>
</xf:pageaction>
<xf:description meta="false">
<ul class="listInline listInline--bullet">
<li>
<i class="fa fa-user" aria-hidden="true" title="{{ phrase('thread_starter')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('thread_starter') }}</span>
<xf:username user="{$thread.User}" defaultname="{$thread.username}" class="u-concealed" />
</li>
<li>
<i class="fa fa-clock-o" aria-hidden="true" title="{{ phrase('start_date')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('start_date') }}</span>
<a href="{{ link('threads', $thread) }}" class="u-concealed"><xf:date time="{$thread.post_date}" /></a>
</li>
<xf:if is="$xf.options.enableTagging AND ($thread.canEditTags() OR $thread.tags)">
<li>
<i class="fa fa-tags" aria-hidden="true" title="{{ phrase('tags')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('tags') }}</span>
<xf:if is="$thread.tags">
<xf:foreach loop="$thread.tags" value="$tag">
<a href="{{ link('tags', $tag) }}" class="tagItem" dir="auto">{$tag.tag}</a>
</xf:foreach>
<xf:else />
{{ phrase('none') }}
</xf:if>
<xf:if is="$thread.canEditTags()">
<a href="{{ link('threads/tags', $thread) }}" class="u-concealed" data-xf-click="overlay"
data-xf-init="tooltip" title="{{ phrase('edit_tags')|for_attr }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span class="u-srOnly">{{ phrase('edit') }}</span>
</a>
</xf:if>
</li>
</xf:if>
</ul>
</xf:description>
<xf:set var="$fpSnippet" value="{{ snippet($firstPost.message, 0, {'stripBbCode': true}) }}" />
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$fpSnippet}"
arg-shareUrl="{{ link('canonical:threads', $thread) }}"
arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" />
<xf:page option="ldJsonHtml">
<xf:if is="$thread.User.avatar_highdpi">
<xf:set var="$image">{$thread.User.getAvatarUrl('h', null, true)}</xf:set>
<xf:elseif is="$thread.User.avatar_date" />
<xf:set var="$image">{$thread.User.getAvatarUrl('l', null, true)}</xf:set>
<xf:elseif is="property('publicMetadataLogoUrl')" />
<xf:set var="$image">{{ base_url(property('publicMetadataLogoUrl'), true) }}</xf:set>
</xf:if>
<xf:if is="$image">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "DiscussionForumPosting",
"@id": "{{ link('canonical:threads', $thread)|escape('json') }}",
"headline": "{$thread.title|escape('json')}",
"articleBody": "{$fpSnippet|escape('json')}",
"articleSection": "{$thread.Forum.Node.title|escape('json')}",
"author": {
"@type": "Person",
"name": "{{ ($thread.User ? $thread.User.username : $thread.username)|escape('json') }}"
},
"datePublished": "{{ date($thread.post_date, 'Y-m-d')|escape('json') }}",
"dateModified": "{{ date($thread.last_post_date, 'Y-m-d')|escape('json') }}",
"image": "{$image|escape('json')}",
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": "https://schema.org/ReplyAction",
"userInteractionCount": {$thread.reply_count}
}
}
</script>
</xf:if>
</xf:page>
<!--[XF:content_top]-->
<xf:if is="$pendingApproval">
<div class="blockMessage blockMessage--important">{{ phrase('content_submitted_displayed_pending_approval') }}</div>
</xf:if>
<xf:macro template="forum_macros" name="forum_page_options" arg-forum="{$forum}" arg-thread="{$thread}" />
<xf:breadcrumb source="$forum.getBreadcrumbs()" />
<xf:if is="$canInlineMod OR $thread.canUseInlineModeration()">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<xf:macro template="lightbox_macros" name="setup" arg-canViewAttachments="{$thread.canViewAttachments()}" />
<xf:if is="$poll">
<xf:macro template="poll_macros" name="poll_block" arg-poll="{$poll}" />
</xf:if>
<xf:ad position="thread_view_above_messages" arg-thread="{$thread}" />
<div class="block block--messages" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="post" data-href="{{ link('inline-mod') }}">
<xf:macro name="thread_status" arg-thread="{$thread}" arg-wrapperClass="block-outer" />
<div class="block-outer"><xf:trim>
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{{ $thread.reply_count + 1 }}"
link="threads" data="{$thread}"
wrapperclass="block-outer-main" />
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$canInlineMod">
<xf:macro template="inline_mod_macros" name="button" />
</xf:if>
<xf:if is="$thread.discussion_state == 'deleted' AND $thread.canUndelete()">
<xf:button href="{{ link('threads/undelete', $thread) }}" class="button--link" overlay="true">
{{ phrase('undelete') }}
</xf:button>
</xf:if>
<xf:if is="$thread.canApproveUnapprove() AND $thread.discussion_state == 'moderated'">
<xf:button href="{{ link('threads/approve', $thread) }}" class="button--link" overlay="true">
{{ phrase('approve') }}
</xf:button>
</xf:if>
<xf:if is="$xf.visitor.user_id AND $thread.isUnread()">
<xf:button href="{{ $firstUnread ? ('#post-' . $firstUnread.post_id) : link('threads/unread', $thread, {'new': 1}) }}"
class="button--link"
data-xf-click="scroll-to"
data-silent="true">
{{ phrase('jump_to_new') }}
</xf:button>
</xf:if>
<xf:if is="$thread.canWatch()">
<xf:button href="{{ link('threads/watch', $thread) }}" class="button--link"
data-xf-click="switch-overlay"
data-sk-watch="{{ phrase('watch') }}"
data-sk-unwatch="{{ phrase('unwatch') }}">
<xf:if is="{$thread.Watch.{$xf.visitor.user_id}}">
{{ phrase('unwatch') }}
<xf:else />
{{ phrase('watch') }}
</xf:if>
</xf:button>
</xf:if>
<xf:if contentcheck="true">
<div class="buttonGroup-buttonWrapper">
<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true" title="{{ phrase('more_options') }}">•••</xf:button>
<div class="menu" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<xf:contentcheck>
<!--[XF:thread_tools_menu:top]-->
<xf:if is="$thread.canEdit()">
<a href="{{ link('threads/edit', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('edit_thread') }}</a>
</xf:if>
<xf:if is="$thread.canLockUnlock()">
<a href="{{ link('threads/quick-close', $thread) }}"
class="menu-linkRow"
data-xf-click="switch"
data-menu-closer="true">
<xf:if is="$thread.discussion_open">
{{ phrase('close_thread') }}
<xf:else />
{{ phrase('open_thread') }}
</xf:if>
</a>
</xf:if>
<xf:if is="$thread.canStickUnstick()">
<a href="{{ link('threads/quick-stick', $thread) }}"
class="menu-linkRow"
data-xf-click="switch"
data-menu-closer="true">
<xf:if is="$thread.sticky">
{{ phrase('unstick_thread') }}
<xf:else />
{{ phrase('stick_thread') }}
</xf:if>
</a>
</xf:if>
<xf:if is="$thread.canCreatePoll()">
<a href="{{ link('threads/poll/create', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('create_poll') }}</a>
</xf:if>
<xf:if is="$thread.canDelete('soft')">
<a href="{{ link('threads/delete', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('delete_thread') }}</a>
</xf:if>
<xf:if is="$thread.canMove()">
<a href="{{ link('threads/move', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('move_thread') }}</a>
</xf:if>
<xf:if is="$thread.canReplyBan()">
<a href="{{ link('threads/reply-bans', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('manage_reply_bans') }}</a>
</xf:if>
<xf:if is="$thread.canViewModeratorLogs()">
<a href="{{ link('threads/moderator-actions', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('moderator_actions') }}</a>
</xf:if>
<!--[XF:thread_tools_menu:before_footer]-->
<xf:if is="$thread.canUseInlineModeration()">
<div class="menu-footer"
data-xf-init="inline-mod"
data-type="thread"
data-href="{{ link('inline-mod') }}"
data-toggle=".js-threadInlineModToggle">
<xf:checkbox>
<xf:option class="js-threadInlineModToggle" value="{$thread.thread_id}">{{ phrase('select_for_moderation') }}</xf:option>
</xf:checkbox>
</div>
</xf:if>
<!--[XF:thread_tools_menu:bottom]-->
</xf:contentcheck>
</div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:trim></div>
<div class="block-outer js-threadStatusField"><xf:trim>
<xf:if contentcheck="true">
<div class="blockStatus blockStatus--info">
<xf:contentcheck>
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="threads"
arg-group="thread_status"
arg-onlyInclude="{$forum.field_cache}"
arg-set="{$thread.custom_fields}"
arg-wrapperClass="blockStatus-message" />
</xf:contentcheck>
</div>
</xf:if>
</xf:trim></div>
<div class="block-container lbContainer"
data-xf-init="lightbox{{ $xf.options.selectQuotable ? ' select-to-quote' : '' }}"
data-message-selector=".js-post"
data-lb-id="thread-{$thread.thread_id}"
data-lb-universal="{$xf.options.lightBoxUniversal}">
<div class="block-body js-replyNewMessageContainer">
<xf:foreach loop="$posts" value="$post">
<xf:if is="$post.message_state == 'deleted'">
<xf:macro template="post_macros" name="post_deleted"
arg-post="{$post}"
arg-thread="{$thread}" />
<xf:else />
<xf:macro template="post_macros" name="post"
arg-post="{$post}"
arg-uix_condensed="{$uix_condensed}"
arg-thread="{$thread}" />
</xf:if>
</xf:foreach>
</div>
</div>
<xf:if contentcheck="true">
<div class="block-outer block-outer--after">
<xf:contentcheck>
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{{ $thread.reply_count + 1 }}"
link="threads" data="{$thread}"
wrapperclass="block-outer-main" />
<xf:showignored wrapperclass="block-outer-opposite" />
<xf:if is="!$thread.canReply() AND $thread.discussion_state == 'visible' AND $thread.discussion_open">
<div class="block-outer-opposite">
<xf:if is="$xf.visitor.user_id">
<span class="button is-disabled">
{{ phrase('no_permission_to_reply') }}
<!-- this is not interactive so shouldn't be a button element -->
</span>
<xf:else />
<xf:button href="{{ link('login') }}" class="button--link" overlay="true">
{{ phrase('log_in_or_register_to_reply') }}
</xf:button>
</xf:if>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:macro name="thread_status" arg-thread="{$thread}" arg-wrapperClass="block-outer block-outer--after" />
</div>
<xf:ad position="thread_view_below_messages" arg-thread="{$thread}" />
<xf:if is="$thread.canReply()">
<xf:form action="{{ link('threads/add-reply', $thread) }}"
ajax="true"
draft="{{ link('threads/draft', $thread) }}"
class="block js-quickReply"
data-xf-init="attachment-manager quick-reply{{ $xf.visitor.isShownCaptcha() ? ' guest-captcha' : '' }}"
data-message-container=".js-replyNewMessageContainer"
data-preview-url="{{ link('threads/reply-preview', $thread, {'quick_reply': 1}) }}">
<xf:js src="xf/message.js" min="1" />
<xf:set var="$lastPost" value="{$posts|last}" />
<div class="block-container">
<div class="block-body">
<xf:macro template="quick_reply_macros" name="body"
arg-message="{$thread.draft_reply.message}"
arg-attachmentData="{$attachmentData}"
arg-forceHash="{$thread.draft_reply.attachment_hash}"
arg-messageSelector=".js-post"
arg-multiQuoteHref="{{ link('threads/multi-quote', $thread) }}"
arg-multiQuoteStorageKey="multiQuoteThread"
arg-lastDate="{$lastPost.post_date}"
arg-lastKnownDate="{$thread.last_post_date}" />
</div>
</div>
</xf:form>
</xf:if>
<div class="blockMessage blockMessage--none">
<xf:macro template="share_page_macros" name="buttons" arg-iconic="{{ true }}" arg-label="{{ phrase('share:') }}" />
</div>
<xf:macro name="thread_status" arg-thread="!" arg-wrapperClass="">
<xf:if contentcheck="true">
<div class="{$wrapperClass}">
<dl class="blockStatus">
<dt>{{ phrase('status') }}</dt>
<xf:contentcheck>
<xf:if is="$thread.discussion_state == 'deleted'">
<dd class="blockStatus-message blockStatus-message--deleted">
<xf:macro template="deletion_macros" name="notice" arg-log="{$thread.DeletionLog}" />
</dd>
<xf:elseif is="$thread.discussion_state == 'moderated'" />
<dd class="blockStatus-message blockStatus-message--moderated">
{{ phrase('awaiting_approval_before_being_displayed_publicly') }}
</dd>
</xf:if>
<xf:if is="!$thread.discussion_open">
<dd class="blockStatus-message blockStatus-message--locked">
{{ phrase('not_open_for_further_replies') }}
</dd>
</xf:if>
</xf:contentcheck>
</dl>
</div>
</xf:if>
</xf:macro>
<xf:widgetpos id="thread_view_sidebar" context-thread="{$thread}" position="sidebar" />]]></template>
<template title="thtopics_structured_list.less" type="public" addon_id="ThemeHouse/Topics" version_id="1000153" version_string="1.0.1 Release Candidate 3"><![CDATA[.structItem-topicsForumTitle
{
float: right;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmaller;
a {
color: @xf-textColorMuted;
}
}
.structItem-topicList {
margin: 0;
position: relative;
line-height: 16px;
margin: -1px 0 0;
z-index: 1;
&-topic {
margin: 1px 0;
display: inline-block;
}
}
.structItem-topicList__spacer {
display: none;
}
@media (min-width: 1100px) {
.th_topics_threadListInit .structItem-topicList {
overflow: visible;
}
.structItem-topicList {
float: right;
max-width: 150px;
overflow: hidden;
margin: 0 0 0 8px;
&.th_topics__threadWrap--overflowing {
mask-image: gradient(linear, right top, left top, from(rgba(0,0,0,1)), color-stop(0.75, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,1)), color-stop(0.75, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
&:hover {
mask-image: none;
-webkit-mask-image: none;
& .structItem-topicList__inner {
max-width: 400px !important;
padding: 3px;
margin: -3px;
border-radius: @xf-borderRadiusLarge;
background: @xf-contentBg;
box-shadow: 0 0 0 1px @xf-borderColor;
}
}
.structItem-topicList-topic {
margin-right: 0;
margin-left: @xf-paddingSmall;
display: inline-block;
&:last-child {
margin-left: 0;
}
}
&__inner,
&__spacer {
display: flex;
flex-direction: row-reverse;
}
&__spacer {
opacity: 0;
z-index: -1;
pointer-events: none;
display: flex;
}
&__inner {
position: absolute;
right: 0;
transition: .2s max-width;
overflow: hidden;
&.structItem-topicList__inner--showOverflow {
overflow: auto;
}
}
}
}]]></template>
<template title="thtopics_topic_heading" type="public" addon_id="ThemeHouse/Topics" version_id="1000072" version_string="1.0.0 Patch Level 2"><![CDATA[<xf:if is="{{ $xf.options.thtopics_enableTopics }}">
<xf:css src="thtopics.less" />
<xf:css src="thtopics_topic_cache.less" />
<div class="p-body-header--inner uix_headerInner">
<xf:if is="($template === 'thread_view') OR ($template === 'topic_view')">
<ul class="thTopicHeading__container__topics">
<li class="thTopicHeading__container__topics__topic"><a href="{{ link('forums/all-threads', null, {'topics': $topic.title . '.' . $topic.topic_id}) }}" class="thTopic thTopic--inverted thTopic--{$topic.topic_id} {$topic.extra_class}">{$topic.title}</a></li>
<xf:foreach loop="$thread.additional_topics" value="$additionalTopic">
<li class="thTopicHeading__container__topics__topic"><a href="{{ link('forums/all-threads', null, {'topics': $additionalTopic.title . '.' . $additionalTopic.topic_id}) }}" class="thTopic--additional {$topic.extra_class}">{$additionalTopic.title}</a></li>
</xf:foreach>
</ul>
<div class="p-title">
<h1 class="p-title-value">{{ prefix('thread', $thread) }}{$thread.title}</h1>
</div>
<div class="p-description">{$description}</div>
<xf:else />
<div class="p-title">
<h1 class="p-title-value">{$topic.title}</h1>
</div>
<div class="p-description">{$topic.description}</div>
</xf:if>
</div>
<xf:if contentcheck="true">
<div class="uix_headerInner--opposite">
<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
</div>
</xf:if>
</xf:if>
]]></template>
<template title="thtrending_trending_view" type="public" addon_id="ThemeHouse/Trending" version_id="1000270" version_string="1.0.2"><![CDATA[<xf:title>{$trending.title}</xf:title>
<xf:wrap template="forum_overview_wrapper" />
<xf:page option="uix_mainTabSets" value="forum" />
<xf:page option="uix_mainTabActive" value="trending" />
<xf:pageaction>
<xf:if is="$xf.visitor.canCreateThread()">
<xf:button href="{{ link('forums/create-thread') }}" class="button--cta" icon="write" overlay="true">
{{ phrase('post_thread...') }}
</xf:button>
</xf:if>
</xf:pageaction>
<xf:widgetpos id="thtrending_trending_sidebar" position="sidebar" />
<xf:if is="$xf.options.forumsDefaultPage === 'thtrending_trending_list'">
<xf:widgetpos id="thuix_index_page" position="sidebar" />
</xf:if>
<xf:widgetpos id="thtrending_trending_above_threads" />
<xf:if is="count($trendingConfigs) > 1">
<div class="tabs tabs--standalone">
<div class="hScroller" data-xf-init="h-scroller">
<span class="hScroller-scroll">
<xf:foreach loop="$trendingConfigs" value="$item">
<a href="{{ link('trending', $item) }}" class="tabs-tab {{ ($trending.trending_id == $item.trending_id) ? 'is-active' : '' }}">{$item.title}</a>
</xf:foreach>
</span>
</div>
</div>
</xf:if>
{$trending.renderTrendingContent()|raw}
<xf:widgetpos id="thtrending_trending_below_threads" />]]></template>
<template title="thxpress_article_wrapper_macros" type="public" addon_id="ThemeHouse/XPress" version_id="1000096" version_string="1.0.0 Patch Level 6"><![CDATA[<!--dont believe we need this anymore (IH) -->
<xf:macro name="header"
arg-article="!"
arg-thread="!"
arg-titleHtml="{{ null }}"
arg-showMeta="{{ true }}"
arg-metaHtml="{{ null }}">
<xf:pageaction>
<xf:if is="$thread.canReply()">
<xf:button href="{$article.link}"
class="button--cta"
icon="article">
{{ phrase('thxpress_go_to_article') }}
</xf:button>
</xf:if>
<xf:if is="$thread.canReply()">
<xf:button href="{{ link('threads/reply', $thread) }}"
class="button--cta uix_quickReply--button"
icon="write">
{{ phrase('reply') }}
</xf:button>
</xf:if>
</xf:pageaction>
</xf:macro>]]></template>
<template title="thxpress_sidebar.less" type="public" addon_id="ThemeHouse/XPress" version_id="1000096" version_string="1.0.0 Patch Level 6"><![CDATA[@xpress_sidebarRowPaddingV: @xf-uix_widgetPadding;
@xpress_sidebarRowPaddingH: @xf-uix_widgetPadding;
/* Sidebar widgets */
.p-body-sidebar {
.block-xpress {
.block-container > .block-row:first-child {display:none;}
.block-container > .block-row:first-child:last-child {display:block;}
.block-row ul:not(.listInline) {
.m-listPlain();
margin: -@xpress_sidebarRowPaddingV -@xpress_sidebarRowPaddingH;
> li {
margin: 0;
padding: @xpress_sidebarRowPaddingV @xpress_sidebarRowPaddingH;
.m-clearFix();
}
}
.widget_search button .icon {display: none;}
.block-container {color: @xf-textColorDimmed;}
&.widget_media_audio .block-row {
background: #f2f3f4;
padding: 0;
}
#wp-calendar {
text-align: center;
width: 100%;
}
&.widget_tag_cloud .tagcloud .wp-tag-cloud {
display: flex;
flex-wrap: wrap;
margin: -2px;
li {padding: 0;}
.tag-cloud-link {
display: inline-block;
max-width: 100%;
padding: 0 6px 1px;
margin: 0 0 2px;
border-radius: @xf-borderRadiusMedium;
font-size: @xf-fontSizeSmaller;
.xf-chip();
margin: 2px;
}
}
.search-form {
display: flex;
.button {
height: auto;
line-height: 1;
padding: 0 4px;
margin-left: 6px;
.button-text {
font-size: 0;
&:before {
font-size: 18px;
margin: 0;
}
}
}
}
}
}]]></template>
<template title="thxpress_subnav" type="public" addon_id="ThemeHouse/XPress" version_id="1000096" version_string="1.0.0 Patch Level 6"><![CDATA[<xf:macro name="subnav"
arg-categories="!">
<div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
<div class="hScroller-scroll">
<ul class="p-sectionLinks-list">
<xf:foreach loop="$categories" value="$nav">
<li>
<div class="p-navEl">
<a href="{$nav.href}"
class="p-navEl-link"
data-nav-id="{$navId}">
{$nav.title|raw}
</a>
</div>
</li>
</xf:foreach>
</ul>
</div>
</div>
</xf:macro>
<xf:macro name="dropdown"
arg-categories="!">
<div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
<div class="hScroller-scroll">
<ul class="p-sectionLinks-list">
<xf:foreach loop="$categories" value="$nav">
<li>
<div class="p-navEl">
<a href="{$nav.href}"
class="p-navEl-link"
data-nav-id="{$navId}">
{$nav.title|raw}
</a>
</div>
</li>
</xf:foreach>
</ul>
</div>
</div>
</xf:macro>]]></template>
<template title="thxpress_thirdParty.less" type="public" addon_id="ThemeHouse/XPress" version_id="1000096" version_string="1.0.0 Patch Level 6"><![CDATA[// WooCommerce
body.woocommerce #respond input#submit, body.woocommerce a.button, body.woocommerce button.button, body.woocommerce input.button {
.xf-buttonBase();
.xf-buttonDefault();
.xf-buttonPrimary();
&:hover {
.xf-uix_buttonHover();
.xf-uix_buttonPrimaryHover();
}
&:active {
.xf-uix_buttonActive();
.xf-uix_buttonPrimaryActive();
}
}
.woocommerce ul.products li {text-align: center;}
// Product listing
body.woocommerce ul.products, .woocommerce-page ul.products {
li.product {
.xf-contentBase();
.xf-blockBorder()
border-radius: @xf-blockBorderRadius;
.m-transition(); .m-transitionProperty(border margin); // edgeSpacerRemoval
padding: @xf-blockPaddingV @xf-blockPaddingH;
.xf-uix_blockContainer();
}
}
// Product single
.article-full.product {
.thxpress_authorBlock {display: none;}
}]]></template>
<template title="uix.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[{{ include('uix_icons.less') }}
{{ include('uix_buttonRipple.less') }}
{{ include('uix_extendedFooter.less') }}
{{ include('uix_pageAnimations.less') }}
.fb-page {
width: 100%;
}
.tabPanes .block-outer {padding-top: @xf-elementSpacer;}
.uix_node--transitioning {
.m-uix_collapseOverflow();
}
.message .message-responses {
margin-top: 0;
.message-responseRow {
&:first-child, &.is-active {
margin-top: @xf-messagePaddingSmall;
}
}
.comment .comment-actionBar.actionBar {
padding: @xf-messagePadding 0 0;
margin: 0;
}
}
.p-nav-menuTrigger {
position: relative;
&.badgeContainer:after {
position: absolute;
left: -5px;
top: -5px;
@media (min-width: @xf-responsiveNarrow) {
display: none !important;
}
}
}
.menu-footer-controls {
display: flex;
flex-wrap: wrap;
.button:not(:last-child) {
margin-right: 5px;
}
}
.p-navEl .menu-linkRow:before {margin-right: @xf-paddingSmall; }
<xf:if is="property('uix_sidebarMobileCanvas')">
@media (min-width: @xf-uix_sidebarBreakpoint) {
.uix_sidebarCanvasTrigger {display: none;}
}
@media (max-width: @xf-uix_sidebarBreakpoint) {
body .p-body-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translatex(-100%);
margin: 0;
&.is-transitioning {
transition: ease-in .25s .25s transform;
.uix_sidebarInner {transition: transform 0.25s ease-in-out;}
&.is-active {transition: ease-in .01s transform;}
}
.uix_sidebarInner {
transform: translatex(-100%);
padding: 0;
margin: 0;
}
.block-container {box-shadow: none;}
.uix_sidebar--scroller {margin: 0;}
&.is-active {
transform: translatex(0);
.uix_sidebarInner.offCanvasMenu-content {
transform: translatex(0);
}
}
}
}
</xf:if>
.uix_bookmarkedNodesList {
.node-icon {
width: auto;
padding: 0;
i {
font-size: 24px;
padding-right: 1em;
color: inherit !important;
&:before {color: inherit !important;}
}
}
a:before {display: none !important;}
}
.th_topics_clearTopics {
i:before {<xf:macro template="uix_icons.less" name="content" arg-icon="close" />}
}
// added to vertically center discussion list meta info
.structItem-cell--main .structItem-minor {
display: flex;
align-items: center;
.structItem-parts {flex-grow: 1;}
.structItem-extraInfo {order: 2; margin-left: auto;}
.structItem-statuses {order: 1;}
}
// end
.uix_threadRepliesMobile {
.pairs.pairs--justified > dt {margin-right: 2px;}
dt:after {display: none;}
}
.uix_headerContainer .uix_mainTabBar {
display: flex;
justify-content: center;
.block-tabHeader {border: none;}
.tabs-tab:hover {background: none;}
}
.offCanvasMenu-content {min-height: 100vh;}
.offCanvasMenu-content .p-body-sideNavContent {
.block {margin: 0;}
.block-container {
box-shadow: none;
}
}
.p-body-header .uix_sidebarTrigger__component {margin-left: @xf-paddingMedium;}
.cover .memberHeader-blurb.pairs {
border-color: rgba(255,255,255,.3);
}
.hScroller-scroll {
&.th_scroller--start-active {
-webkit-mask-image: linear-gradient(to right, transparent 3%, black 10%);
mask-image: linear-gradient(to right, transparent 3%, black 10%);
}
&.th_scroller--end-active {
-webkit-mask-image: linear-gradient(to left, transparent 3%, black 10%);
mask-image: linear-gradient(to left, transparent 3%, black 10%);
}
&.th_scroller--end-active.th_scroller--start-active {
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 3%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 97%);
mask-image: linear-gradient(to right, rgba(0,0,0,0) 3%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 97%);
}
}
.block[data-widget-definition="visitor_panel"] .contentRow {margin-bottom: @xf-paddingMedium;}
.block[data-widget-definition="th_widget_login_uix"] .formSubmitRow-controls {
padding-left: 0;
}
.uix_loginProvider__row {
dt {display: none;}
dd {text-align: center;}
}
.thBranding__pipe {display: none;}
.p-footer-copyright > * ~ .thBranding .thBranding__pipe {display: inline;}
.offCanvasMenu-link {padding: @xf-paddingMedium @xf-paddingLarge;}
.offCanvasMenu-subList {padding-bottom: 0;}
*::selection,
{
.xf-uix_textSelection(); /* WebKit/Blink Browsers */
}
*::-moz-selection {
.xf-uix_textSelection(); /* Gecko Browsers */
}
.block-container {
.uix_newIndicator {
.xf-uix_newNodeMarkerStyle();
}
}
/* --- Sticky kit header fix --- */
.uix_headerContainer--stickyFix {height: 1px; visibility: hidden;}
.uix_headerContainer {margin-top: -1px !important;}
/* -- fixes sticky kit abs positioning for sticky header on covered themes -- */
<xf:if is="{{ property('uix_pageStyle') }} == 'covered'">
.has-no-hiddenscroll .is-modalOpen .is-sticky {
margin-left: 0px;
}
</xf:if>
/* --- Node Grid Styling for UI.X ONLY --- */
.node-footer--actions {
.fa.fa-bookmark-o:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="\f0c3" />
}
.fa.fa-bookmark:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="\f0c0" />
}
.fa.fa-eye-slash:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="\f209" />
}
.fa.fa-eye:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="watched" />
}
}
<xf:if is="!property('th_enableGrid_nodes')">
.uix_nodeList .block-body {box-shadow: @xf-uix_elevation1;}
</xf:if>
<xf:if is="property('th_enableGrid_nodes')">
.node + .node {border: none;}
.uix_nodeList .block-container .node-footer--more a:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="arrow-right" />
font-size: @xf-uix_iconSize;
}
.uix_nodeList .block-container .node-footer--createThread:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="new-thread" />
font-size: @xf-uix_iconSize;
}
.has-flexbox .thNodes__nodeList.block .block-container .th_nodes--below-lg .node-extra {padding-top: 0;}
.has-flexbox .thNodes__nodeList.block .block-container .node-body {
border: none;
box-shadow: @xf-uix_elevation1;
}
</xf:if>
.uix_adminTrigger {display: none !important;}
<xf:if is="property('uix_collapseStaffbarLinks')">
@media (max-width: @xf-uix_viewportCollapseStaffLinks) {
.p-staffBar-link {display: none;}
.uix_adminTrigger {display: inline-block !important;}
}
</xf:if>
/***** extra user info postbit collapse *******/
<xf:if is="property('uix_collapseExtraInfo')">
.thThreads__userExtra--toggle {
text-align: center;
margin-top: @xf-paddingMedium;
.thThreads__userExtra--trigger {
transition: ease-in transform .2s .2s;
display: inline-block;
&:hover {cursor: pointer;}
&:before {
.m-faBase();
.m-faContent(@fa-var-chevron-down);
}
}
}
</xf:if>
.thThreads__message-userExtras {
height: 0;
overflow: hidden;
transition: ease-in height .2s;
}
@media (max-width: @xf-messageSingleColumnWidth) {
.thThreads__message-userExtras {display: none;}
.thThreads__userExtra--toggle {display: none;}
}
.userExtra--expand {
.thThreads__message-userExtras {height: auto;}
.thThreads__userExtra--trigger {transform: rotate(-180deg);}
}
/*------- sticky thread collapse ------- */
.uix_threadCollapseTrigger {
transition: ease-in transform .3s;
margin-left: auto;
font-size: 18px;
}
.uix_stickyContainerOuter {
transition: ease-in height 0.3s, ease-in opacity 0.3s;
opacity: 1;
.structItemContainer-group {display: block;}
}
.uix_stickyContainerOuter.uix_threadListSeparator--collapsed {
height: 0;
opacity: 0;
pointer-events: none;
transition: ease-in height 0.3s, ease-in opacity 0.3s;
.uix_block-body--outer {
height: 0 !important;
opacity: 0;
pointer-events: none;
}
.uix_threadCollapseTrigger {transform: rotate(-180deg);}
}
/*------- category collapse ------- */
.category--collapsed.block--category {
.uix_block-body--outer {
height: 0 !important;
opacity: 0;
pointer-events: none;
}
.categoryCollapse--trigger {transform: rotate(-180deg);}
}
.categoryCollapse--trigger {
transition: ease-in transform .3s;
overflow: hidden;
height: 18px;
display: inline-flex;
align-items: center;
}
.block--category .uix_block-body--outer {
transition: ease-in height 0.3s, ease-in opacity 0.3s;
opacity: 1;
}
/*------- Sidebar collapse ------- */
a.uix_sidebarTrigger__component {
display: inline-flex;
align-items: center;
&:hover {cursor: pointer;}
<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
<xf:if is="property('uix_sidebarTriggerPosition') == 'sectionLinks'">
@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1}}px) {
.p-nav-inner & {display: none !important;}
}
</xf:if>
</xf:if>
<xf:if is="property('uix_sidebarTriggerPosition') == 'titlebar'">
@media (min-width: {{ property('responsiveWide') + 1}}px) {
.p-nav-inner & {display: none !important;}
}
@media (max-width: @xf-responsiveWide) {
.p-body-header & {display: none !important;}
}
</xf:if>
.p-nav-inner & {
color: inherit;
color: @xf-publicNavTab--color;
background: none !important;
box-shadow: none;
border: none;
padding: 0;
.uix_sidebarTrigger--phrase {
display: none;
}
i {
font-size: @xf-uix_iconSizeLarge;
width: auto;
padding: 0;
margin: 0;
}
}
&.uix_sidebarCanvasTrigger {
@media (min-width: {{ property('uix_sidebarBreakpoint') + 1}}px) {
display: none;
}
}
&.uix_sidebarTrigger {
@media (max-width: @xf-uix_sidebarBreakpoint) {
display: none;
}
}
i {
// transform: rotate(0);
// transition: ease-in transform .2s;
font-size: @xf-uix_iconSize;
margin-left: -7px;
}
<xf:if is="property('uix_sidebarLocation') == 'left'">
span {order: 1;}
/*
i {
transform: rotate(-180deg);
.uix_sidebarCollapsed & {
transform: rotate(0);
}
}
*/
</xf:if>
}
.p-body-sidebar {
transition: ease-in width .2s, ease-in opacity .2s .3s, ease-in height .2s;
opacity: 1;
max-height: 100%;
* {transition: ease-in font-size .01s;}
}
@media (min-width: @xf-responsiveWide) {
.uix_sidebarCollapsed {
.p-body-sidebar {
transition: ease-in width 0.2s 0.2s, ease-in opacity 0.2s, ease-in height .2s .2s;
width: 0;
opacity: 0;
height: 0;
}
.p-body-main--withSidebar .p-body-content {
width: 100%;
max-width: 100%;
<xf:if is="{{ property('uix_sidebarLocation') == 'left' }}">
transition: ease-in width 0.2s 0.2s, ease-in max-width 0.2s .2s
</xf:if>
}
.p-body-main--withSidebar.p-body-main--withSideNav .p-body-content {
width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
max-width: calc(~"100% - {{ property('sidebarWidth') + property('elementSpacer')}}px");
<xf:if is="{{ property('uix_sidebarLocation') == 'left' }}">
transition: ease-in width 0.2s 0.2s, ease-in max-width 0.2s .2s
</xf:if>
}
}
}
/*
.uix_sidebarCollapsed .uix_sidebarTrigger__component i {
transform: rotate(-180deg);
}
*/
<xf:if is="property('uix_sidebarLeft')">
.button.uix_sidebarTrigger__component {
flex-direction: row-reverse;
// i {transform: rotate(-180deg);}
}
// .uix_sidebarCollapsed .uix_sidebarTrigger__component i {transform: rotate(0);}
</xf:if>
/*------- navigation icons------- */
.p-navEl-link:before, .offCanvasMenu-link:before {
.m-faBase();
.xf-uix_navTabIconStyle();
}
<xf:if is="!property('uix_navTabIcons')">
.p-navEl-link:before {display: none !important;}
</xf:if>
.p-navEl-link:not(.mdi):not(.fa), .offCanvasMenu-link:not(.mdi):not(.fa) {
<xf:if is="{{ property('uix_defaultNavIcon') }}">
&[data-nav-id]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="folder" />}
</xf:if>
.offCanvasMenu-link {dislay: none;}
&[data-nav-id="thxpress"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="\f332" />}
&[data-nav-id="th_donate"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="\f2a1" />}
&[data-nav-id="home"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="home" />}
&[data-nav-id="forums"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="forum" />}
&[data-nav-id="whatsNew"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="whats-new" />}
&[data-nav-id="members"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="user-multiple" />}
&[data-nav-id="profile"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="user" />}
&[data-nav-id="alerts"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="alert" />}
&[data-nav-id="settings"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="settings" />}
&[data-nav-id="xfmg"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="media" />}
&[data-nav-id="xfrm"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="resource" />}
&[data-nav-id="EWRporta"]:before, &[data-nav-id="blog"]:before, &[data-nav-id="XPRESS"]:before {<xf:macro name="content" template="uix_icons.less" arg-icon="article" />}
}
.p-sectionLinks .p-navEl-link:before,
.offCanvasMenu-subList .offCanvasMenu-link:before {display: none !important;}
/* ---Force header content fluid --- */
<xf:if is="(property('uix_navigationType') == 'sidebarNav') && (property('uix_pageStyle') == 'covered')">
.p-staffBar .pageContent,
.p-header-inner,
.p-nav-inner,
.p-sectionLinks .pageContent {max-width: 100%;}
</xf:if>
/* ---Sidebar Navigation --- */
.uix_headerContainer .p-nav-menuTrigger.uix_sidebarNav--trigger {display: none;}
<xf:if is="(property('uix_navigationType') == 'sidebarNav') && (property('uix_pageStyle') == 'covered')">
@media (min-width: {{ property('publicNavCollapseWidth') + 1 }}px ) {
.uix_page--fluid.sidebarNav--active .p-body-inner {
width: calc( ~"100% - {{ property('uix_sidebarNavWidth') }} - {{property('elementSpacer') * 2 }}px");
}
.uix_headerContainer .p-nav-menuTrigger.uix_sidebarNav--trigger {display: inline-block;}
.uix_page--fixed.sidebarNav--active .p-body-inner {
@media (max-width: @uix_sidebarNavBreakpoint) {
width: calc( ~"100% - {{ property('uix_sidebarNavWidth') }} - {{property('elementSpacer') * 2 }}px");
}
@media (min-width: calc(@uix_sidebarNavBreakpoint + 1px) ) {
left: -105px;
}
}
}
</xf:if>
.uix_sidebarNav__inner__widgets {
padding: @xf-paddingLarge;
}
.sidebarNav--active .uix_sidebarNav {
margin-left: 0;
}
.uix_stickyBodyElement:not(.offCanvasMenu) {
position: sticky;
position: -webkit-sticky;
<xf:comment> -- sticky test --
.uix_stickyBottom & {
top: unset !important;
bottom: @xf-elementSpacer;
margin-top: auto;
}
</xf:comment>
}
.uix_stickyBottom .p-body-sidebar {display: flex;}
.uix_sidebarNav {
.uix_sidebarNav__inner {
overflow: hidden;
}
.uix_sidebar--scroller {
overflow-y: auto;
margin-right: -30px;
padding-right: 32px;
}
}
<xf:if is="property('uix_stickySidebar')">
.uix_sidebarInner,
.p-body-sideNavInner:not(.offCanvasMenu) {
position: static;
}
@media (min-width: {{property('uix_sidebarBreakpoint') + 1}}px ) {
.uix_sidebarInner,
.p-body-sideNavInner {
position: sticky;
position: -webkit-sticky;
}
<xf:if is="property('uix_scrollableSidenav')">
.p-body-sideNavInner {
overflow: hidden;
.block {
margin-left: 2px;
margin-rght: 2px;
}
.uix_sidebar--scroller {
overflow-y: auto;
max-height: 90vh;
margin-right: -30px;
padding-right: 32px;
padding-top: 2px;
padding-bottom: 2px;
}
}
</xf:if>
<xf:if is="property('uix_scrollableSidebar')">
.uix_sidebarInner {
overflow: hidden;
.block {
margin-left: 2px;
margin-rght: 2px;
}
.uix_sidebar--scroller {
overflow-y: auto;
max-height: 90vh;
margin-right: -30px;
padding-right: 32px;
padding-top: 2px;
padding-bottom: 2px;
}
}
</xf:if>
}
</xf:if>
.offCanvasMenu .offCanvasMenu-link:before {
font-size: @xf-uix_iconSizeLarge !important;
padding-right: 1em;
}
.offCanvasMenu-link {
display: flex;
align-items: center;
&.offCanvasMenu-link--splitToggle {font-size: 18px;}
}
.uix_sidebarNav {
.xf-uix_sidebarNavigationStyle();
width: @xf-uix_sidebarNavWidth;
min-width: @xf-uix_sidebarNavWidth;
padding-bottom: @xf-elementSpacer;
margin-left: -{{property('uix_sidebarNavWidth')}};
<xf:if is="property('uix_pageStyle') != 'covered'">
padding-top: @xf-elementSpacer;
</xf:if>
z-index: 1;
transition: ease-in margin-left .2s;
@media (max-width: @xf-publicNavCollapseWidth) {
margin-left: -{{property('uix_sidebarNavWidth')}} !important;
}
.uix_sidebarNavList {
padding: 10px 0;
margin: 0;
border-bottom: 1px solid @xf-borderColor;
line-height: 40px;
&:first-child {padding-top: 0;}
&:last-child {border-bottom: none;}
.uix_sidebarNav__subNav {
display: block;
height: 0;
overflow: hidden;
transition: ease-in height .3s;
&.subNav--expand {height: auto;}
}
.menu-linkRow {
padding: 0 @xf-paddingLarge;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: @xf-textColorDimmed;
border: none;
&:hover {
background-color: rgba(0,0,0,.05);
border: none;
}
}
.p-navEl-link span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
.uix_sidebarNavList__title {
padding: 0 @xf-paddingLarge;
font-size: @xf-fontSizeSmaller;
color: @xf-textColorMuted;
}
> li {
display: block;
.p-navEl:before, .p-navEl:after {display: none;}
.p-navEl__inner {
display: flex;
align-items: center;
}
.is-selected .p-navEl__inner {
color: @xf-uix_primaryColor;
}
.is-selected .p-navEl__inner {
background-color: rgba(0,0,0,.08);
.p-navEl-link, {
color: inherit;
}
}
.p-navEl {display: block;}
.p-navEl__inner:hover,
.blockLink:hover {
background-color: rgba(0,0,0,.05);
}
.p-navEl-link,
.blockLink {
display: flex;
align-items: center;
padding: 0 @xf-paddingLarge;
color: @xf-textColorDimmed;
background: none;
width: 100%;
text-decoration: none;
float: none;
&:before {
font-size: @xf-uix_iconSizeLarge !important;
padding-right: 1em;
}
}
.blockLink {
padding-left: 50px;
}
.uix_sidebarNav--trigger {
font-size: @xf-uix_iconSize;
color: inherit;
padding-right: @xf-paddingLarge;
.uix_icon {transition: ease-in transform .3s;}
&.is-expanded .uix_icon {transform: rotate(-180deg);}
}
.p-navEl-splitTrigger {display: none;}
}
}
}
/* ---VISITOR TABS --- */
.p-account {
background-color: transparent;
.p-navgroup-link {
display: flex;
align-items: center;
border: none;
}
}
.p-nav .p-navgroup-link:hover {.xf-publicNavTabHover();}
/* ---SEARCH BAR --- */
.p-quickSearch .input {
color: @xf-uix_searchBar--color;
&::placeholder {color: @xf-uix_searchBar--color;}
}
body .uix_searchBar {
display: inline-flex;
position: relative;
flex-shrink: 10;
.uix_searchIcon {pointer-events: none;}
@media (max-width: @xf-uix_search_maxResponsiveWidth) {
<xf:if is="property('uix_searchPosition') == 'navigationLeft'">
order: 1;
</xf:if>
}
@media (min-width: {{ property('uix_search_maxResponsiveWidth') + 1 }}px ) {
max-width: @xf-uix_searchBarWidth;
width: 1000px;
display: flex;
// min-width: @xf-uix_searchBarWidth;
<xf:if is="property('uix_searchPosition') == 'navigationLeft'">
margin: 0 @xf-paddingMedium;
<xf:else />
margin-left: .5em;
</xf:if>
}
.uix_searchBarInner {
display: inline-flex;
pointer-events: none;
align-items: center;
left: 20px;
right: 20px;
justify-content: flex-end;
bottom: 0;
top: 0;
transition: ease-in background-color .3s;
flex-grow: 1;
left: 0px;
right: 0px;
@media (min-width: @xf-uix_search_maxResponsiveWidth) {
<xf:if is="property('uix_searchPosition') == 'navigationLeft'">
width: 100%;
</xf:if>
}
.uix_searchIcon {
position: absolute;
bottom: 0;
top: 0;
<xf:if is="!property('uix_searchButton')">
left: 0;
<xf:else />
right: 0;
</xf:if>
}
<xf:if is="property('uix_searchIconBehavior') == 'expandMobile'">
@media (max-width: min(@xf-responsiveMedium, @xf-uix_search_maxResponsiveWidth) ) {
position: absolute;
}
<xf:elseif is="property('uix_searchIconBehavior') == 'expand'" />
@media (max-width: @xf-uix_search_maxResponsiveWidth) {
position: absolute;
}
</xf:if>
.uix_searchForm {
display: inline-flex;
align-items: center;
transition: ease-in flex-grow .3s, ease-in max-width .3s, ease-in background-color .2s;
flex-grow: 0;
max-width: @xf-uix_searchBarWidth;
width: 100%;
pointer-events: all;
position: relative;
.xf-uix_searchBar();
&.uix_searchForm--focused {
.xf-uix_searchBarFocus();
.input {
&::placeholder {color: @xf-uix_searchBarPlaceholderFocusColor;}
}
i {color: @xf-uix_searchIconFocusColor;}
}
.uix_search--settings i,
.uix_search--close i {display: none;}
i {
.xf-uix_searchIcon();
height: @xf-uix_searchBarHeight;
display: inline-flex;
align-items: center;
transition: ease-in color .2s;
}
.input {
height: @xf-uix_searchBarHeight;
border: none;
transition: ease-in color .2s;
background: none;
&::placeholder {color: @xf-uix_searchBarPlaceholderColor;}
color: inherit;
<xf:if is="!property('uix_searchButton')">
text-indent: 30px;
</xf:if>
}
}
}
.p-navgroup-link {display: none;}
@media(max-width: @xf-uix_search_maxResponsiveWidth) {
.uix_searchBarInner .uix_searchForm {max-width: 0; overflow: hidden; border: none;}
}
<xf:if is="property('uix_searchIconBehavior') != 'expandMobile'">
@media (max-width: @xf-uix_search_maxResponsiveWidth) {
.p-navgroup-link {display: inline-flex;}
.minimalSearch--detailed & .p-navgroup-link {display: inline-flex;}
}
<xf:elseif is="property('uix_searchIconBehavior') == 'expandMobile'" />
@media(max-width: @xf-uix_search_maxResponsiveWidth) and (min-width: @xf-responsiveMedium) {
.p-navgroup-link {display: inline-flex;}
.p-navgroup-link.uix_searchIconTrigger {display: none;}
}
@media (max-width: @xf-uix_search_maxResponsiveWidth) and (max-width: @xf-responsiveMedium) {
.p-navgroup-link.uix_searchIconTrigger {display: inline-flex;}
.p-navgroup-link {display: none;}
.minimalSearch--detailed & .p-navgroup-link.uix_searchIconTrigger {display: none;}
.minimalSearch--detailed & .p-navgroup-link {display: inline-flex;}
}
</xf:if>
}
.uix_searchBar .uix_searchDropdown__menu {
display: none;
position: absolute;
top: @xf-uix_searchBarHeight;
right: 0;
opacity: 0;
width: @xf-uix_searchBarWidth;
@media(max-width: @xf-uix_search_maxResponsiveWidth) {
width: 100%;
}
&.uix_searchDropdown__menu--active {
display: block;
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
[name="constraints"] {
flex-grow: 1 !important;
widxth: auto !important;
}
}
.uix_search--submit:hover {cursor: pointer;}
.uix_search--close {
cursor: pointer;
}
@media(max-width: @xf-uix_search_maxResponsiveWidth) {
.minimalSearch--active .uix_searchBar .uix_searchBarInner {
position: absolute;
}
.minimalSearch--active .uix_searchBar .uix_searchBarInner .uix_searchForm {
flex-grow: 1;
display: inline-flex !important;
padding: 0 @xf-paddingMedium;
max-width: 100%;
}
.minimalSearch--active .uix_searchBar .uix_searchBarInner .uix_searchForm {
i.uix_icon {
display: inline-block;
padding: 0;
line-height: @xf-uix_searchBarHeight;
}
.uix_searchIcon i {display: none;}
.uix_searchInput {text-indent: 0;}
}
.p-navgroup-link--search,
.uix_sidebarCanvasTrigger,
.p-navgroup-link {transition: ease opacity .2s .3s; opacity: 1;}
.minimalSearch--active {
.p-navgroup-link--search,
.uix_sidebarCanvasTrigger,
.p-navgroup-link {
opacity: 0;
transition: ease opacity .2s;
pointer-events: none;
}
.uix_searchBar {position: static;}
}
@media(max-width: @xf-uix_search_maxResponsiveWidth) {
.p-nav-inner > * {transition: ease-in opacity .2s; opacity: 1;}
.minimalSearch--active.p-nav-inner > *:not(.uix_searchBar),
.minimalSearch--active.p-nav-inner .p-account,
.minimalSearch--active.p-nav-inner .uix_searchBar .uix_searchIconTrigger,
.minimalSearch--active.p-nav-inner .p-discovery > *:not(.uix_searchBar) {opacity: 0;}
.minimalSearch--active.p-nav-inner .p-discovery,
.minimalSearch--active.p-nav-inner .p-nav-opposite {opacity: 1;}
}
<xf:if is="property('uix_searchPosition') == 'navigation'">
.p-nav-inner > * {transition: ease-in opacity .2s; opacity: 1;}
.minimalSearch--active.p-nav-inner > *,
.minimalSearch--active.p-nav-inner .p-account,
.minimalSearch--active.p-nav-inner .uix_searchBar .uix_searchIconTrigger,
.minimalSearch--active.p-nav-inner .p-discovery > *:not(.uix_searchBar) {opacity: 0;}
.minimalSearch--active.p-nav-inner .p-discovery,
.minimalSearch--active.p-nav-inner .p-nav-opposite {opacity: 1;}
</xf:if>
<xf:if is="property('uix_searchPosition') == 'navigationLeft'">
.p-nav-inner > *:not(.uix_searchBar),
.p-nav-inner .uix_searchBar .uix_searchIconTrigger {transition: ease-in opacity .2s; opacity: 1;}
.minimalSearch--active.p-nav-inner > *:not(.uix_searchBar),
.minimalSearch--active.p-nav-inner .p-account,
.minimalSearch--active.p-nav-inner .uix_searchBar .uix_searchIconTrigger,
.minimalSearch--active.p-nav-inner .p-discovery,
.minimalSearch--active.p-nav-inner .p-nav-opposite {opacity: 0;}
</xf:if>
<xf:if is="property('uix_searchPosition') == 'tablinks'">
.p-sectionLinks .pageContent > * {transition: ease opacity .2s; opacity: 1;}
.minimalSearch--active.p-sectionLinks .pageContent > * {opacity: 0;}
.p-sectionLinks .pageContent .uix_searchBar {opacity: 1;}
.minimalSearch--active.p-sectionLinks .p-discovery,
.minimalSearch--active.p-sectionLinks .p-nav-opposite {opacity: 1;}
</xf:if>
<xf:if is="property('uix_searchPosition') == 'header'">
<xf:if is="property('uix_viewportShowLogoBlock') == '100%'">
.p-header-content > * {transition: ease opacity .2s; opacity: 1;}
.minimalSearch--active.p-header-content > *:not(.p-nav-opposite) {opacity: 0;}
.minimalSearch--active.p-header-content .uix_searchBar {opacity: 1;}
<xf:else />
@media (min-width: @xf-uix_viewportShowLogoBlock) {
.p-header-content > * {transition: ease opacity .2s; opacity: 1;}
.minimalSearch--active.p-header-content > *:not(.p-nav-opposite) {opacity: 0;}
.minimalSearch--active.p-header-content .uix_searchBar {opacity: 1;}
}
</xf:if>
</xf:if>
<xf:if is="property('uix_searchPosition') == 'staffBar'">
.p-staffBar .pageContent > * {transition: ease opacity .2s; opacity: 1;}
.minimalSearch--active.p-staffBar .pageContent > * {opacity: 0;}
.minimalSearch--active.p-staffBar .pageContent .uix_searchBar {opacity: 1;}
.minimalSearch--active.p-staffBar .p-discovery,
.minimalSearch--active.p-staffBar .p-nav-opposite {opacity: 1;}
</xf:if>
}
/* ---UTILITIES --- */
.media__container {
display: flex;
.media--left {margin-right: @xf-paddingMedium;}
}
/* ---FOOTER --- */
.uix_fabBar {
<xf:if is="property('uix_fab') == 'never' && (property('uix_visitorTabsMobile') == 'tabbar')">
@media (max-width: @xf-responsiveNarrow) {
margin-bottom: calc(60px - @xf-paddingLarge);
}
</xf:if>
.uix_editor--focused & {
display: none;
}
&.uix_fabBar--mirror {
visibility: hidden;
position: static;
padding-top: calc(@xf-paddingLarge * 2);
background-color: @xf-uix_fabBarBackground;
.p-title-pageAction{ padding-top: 0;}
<xf:if is="property('uix_fab') == 'mobile'">
@media (min-width: @xf-uix_fabVw) {
display: none;
}
</xf:if>
}
<xf:if is="!property('uix_fabScroll')">
// background-color: @xf-uix_fabBarBackground;
// height: 60px;
padding: @xf-paddingLarge 0;
</xf:if>
<xf:if is="property('uix_fab') == 'mobile'">
@media (min-width: @xf-uix_fabVw) {
.p-title-pageAction{ display: none;}
}
</xf:if>
display: flex;
flex-direction: column;
align-items: flex-end;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: @xf-paddingLarge;
z-index: 5;
pointer-events: none;
.u-scrollButtons {position: static;}
.p-title-pageAction {
<xf:if is="property('uix_fabScroll') && (property('uix_visitorTabsMobile') == 'tabbar')">
margin-bottom: -30px;
<xf:else />
margin-bottom: calc(-60px - @xf-paddingLarge);
</xf:if>
transition: ease-in .2s margin-bottom;
z-index: 5;
padding-top: @xf-paddingLarge;
.button {
border-radius: 100%;
height: 60px;
width: 60px;
padding: 0;
font-size: 0;
display: none;
align-items: center;
justify-content: center;
box-shadow: @xf-uix_elevation2;
background: @xf-buttonCta--background-color;
color: @xf-buttonCta--color;
&:last-child {display: flex;}
&:not(.button--icon) {display: none;}
.button-text:before {font-size: @xf-uix_iconSizeLarge; margin: 0;}
}
}
.u-scrollButtons {pointer-events:auto;}
&.uix_fabBar--active .p-title-pageAction {
margin-bottom: 0;
pointer-events: auto;
<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
@media (max-width: @xf-responsiveNarrow) {
margin-bottom: {{ property('paddingLarge') + 30 }}px;
}
</xf:if>
}
}
#uix_jumpToFixed {
font-size: 24px;
color: #FFF;
background-color: @xf-uix_secondaryColor;
padding: 8px;
margin: 16px;
border-radius: 2px;
position: fixed;
z-index: 1;
transition: opacity 0.4s;
display: block;
padding: 0;
bottom: 0;
right: 0;
left: auto;
}
#uix_jumpToFixed a:first-child {
padding-bottom: 4px;
}
#uix_jumpToFixed a {
color: inherit;
display: block;
padding: 8px;
}
#uix_jumpToFixed a:last-child {
padding-top: 4px;
}
/* ---Login form sliding panel --- */
.uix__loginForm--panel {
background: @xf-contentHighlightBg;
overflow: hidden;
position: absolute;
z-index: 200;
transition: ease-in .2s transform;
left: 0;
right: 0;
transform: translateY(-100%);
top: 0;
}
.uix__loginForm--mask {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: transparent;
transition: ease-in .2s background-color;
}
.uix__loginForm.is-active .uix__loginForm--panel {transform: translateY(0);}
.uix__loginForm.is-active .uix__loginForm--mask {
background-color: rgba(0,0,0,.4);
bottom: 0;
}
.uix__loginForm--panel form {
.m-pageWidth();
}
.uix__loginForm--panel .block-container,
.uix__loginForm--panel .formRow > dt,
.uix__loginForm--panel .formRow > dd,
.uix__loginForm--panel .formSubmitRow-bar {
background: none;
box-shadow: none;
border: none;
}
.uix__loginForm--panel .block-outer {display: none;}
.uix_discussionList {
.xf-uix_discussionList();
}
[type=checkbox], [type=radio], legend {margin-right: .5em;}
.structItem-extraInfo [type=checkbox] {margin-right: 0;}
form.structItem {
display: flex;
max-width: 100%;
}
.structItem-cell--newThread {flex-grow: 1; min-width: 0;}
.uix_messageContent {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.uix_socialMedia {
display: inline-flex;
flex-wrap: wrap;
margin: 0 -6px;
padding: 0;
li {display: inline-block;}
li a {
margin: 6px;
line-height: 1;
display: inline-block;
.xf-uix_socialMediaIcon();
}
}
.uix_headerContainer {
display: flex;
flex-direction: column;
<xf:if is="property('uix_pageStyle') != 'wrapped'">
@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px) {
margin-top: @xf-uix_headerWhiteSpace;
}
</xf:if>
@media (min-width: @xf-responsiveMedium) {
> *:not(.p-nav) {
margin-bottom: @xf-uix_headerWhiteSpace;
&:last-child {margin-bottom: 0;}
}
}
}
<xf:if is="property('uix_detachedNavigation')">
.p-body > * {padding-top: @xf-elementSpacer;}
</xf:if>
.uix_pageWrapper--fixed {
<xf:if is="property('uix_pageStyle') != 'wrapped'">
width: 100%;
</xf:if>
<xf:if is="property('uix_pageStyle') == 'wrapped'">
.m-pageWidth();
.uix_page--fluid & {
@media (min-width: @xf-pageWidthMax) {
max-width: 95%;
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
padding: 0 !important;
}
</xf:if>
position: relative;
left: 0;
transition: max-width .2s, ease-in left .2s;
}
/* --- post thread widget --- */
.uix_postThreadWidget {
border-top: 4px solid @xf-uix_primaryColor;
text-align: center;
padding: @xf-paddingLarge;
color: @xf-textColorDimmed;
i {
height: 50px;
width: 50px;
line-height: 50px;
border-radius: 100%;
background-color: fade(@xf-uix_primaryColor, 20%);
color: @xf-uix_primaryColor;
display: inline-block;
font-size: @xf-uix_iconSizeLarge;
}
.uix_postThreadWidget__title {
font-size: @xf-fontSizeLarger;
font-weight: @xf-fontWeightHeavy;
color: @xf-textColor;
}
.button {margin-top: @xf-paddingMedium;}
}
/* --- border radius javascript --- */
@media (min-width: @xf-responsiveEdgeSpacerRemoval) {
.uix_smartBorder--noTop {
border-bottom-left-radius: @xf-borderRadiusLarge !important;
border-bottom-right-radius: @xf-borderRadiusLarge !important;
}
.uix_smartBorder--noBottom {
border-top-left-radius: @xf-borderRadiusLarge !important;
border-top-right-radius: @xf-borderRadiusLarge !important;
}
.uix_smartBorder--default {
border-top-left-radius: @xf-borderRadiusLarge !important;
border-top-right-radius: @xf-borderRadiusLarge !important;
border-bottom-left-radius: @xf-borderRadiusLarge !important;
border-bottom-right-radius: @xf-borderRadiusLarge !important;
}
}
/* --- TH Nodes --- */
html.has-flexbox .thNodes__nodeList .block-container {
.node-footer--more a:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="arrow-right" />
font-size: 18px;
}
.node-footer--createThread:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="plus" />
font-size: 18px;
}
}
/* -- tab bar -- */
.uix_tabBar {
height: 46px;
@media (min-width: @xf-responsiveNarrow) {
display: none;
}
}
.uix_tabList {
z-index: 100;
margin: 0;
padding: 0;
display: flex;
background: @xf-uix_primaryColor;
position: fixed;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 -2px 2px 0 rgba(0,0,0,0.12), 0 -1px 3px 0 rgba(0,0,0,.2);
.uix_tabItem {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5px;
height: 46px;
color: rgba(255,255,255,.5);
line-height: 1;
font-size: 10px;
position: relative;
&:hover {
text-decoration: none;
color: #fff;
}
}
.badgeContainer:after {
position: absolute;
top: 7px;
right: 30%;
}
.uix_tabItem i {
font-size: 24px;
}
}
{{ include('uix_canvas.less') }}
// resources
.resourceBody-main .bbWrapper {
margin-bottom: @xf-messagePadding;
}
// Third party add-ons
// resource manager
.resourceBody .actionBar {
padding: 0;
margin: 0;
}
// post comments
.block--messages .message .thpostcomments_commentsContainer .message {
.message-actionBar {
padding-top: 0;
border-top: 0;
}
.message-attribution {
padding-top: 0;
padding-bottom: @xf-paddingSmall;
}
}
// Topics
.topic-filter-item .thTopicAction {
&--add {
&:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="\f131" />
}
}
&--remove {
&:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="\f12e" />
}
}
}
// Reactions
<xf:if is="property('uix_visitorPanelIcons')">
.reacts_total_text dt {
font-size: 0;
&:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="\f784" />
font-size: @xf-fontSizeSmall;
line-height: inherit;
}
}
</xf:if>
// bookmarks
.block-outer-opposite .buttonGroup .button--bookmark {
.xf-uix_buttonSmall();
font-size: @xf-uix_iconSize;
}
.fa.fa-bookmark:before {<xf:macro name="content" template="uix_icons.less" arg-icon="\f0c0" />}
.fa.fa-bookmark-o:before {<xf:macro name="content" template="uix_icons.less" arg-icon="\f0c3" />}
// topics
/*
.topic-filter-container {
background: none;
box-shadow: none;
padding: 0;
}
*/
// last post avatar
.structItem .lastPostAv {display: block;}
.uix_forgotPassWord__link {
margin-top: 4px;
display: inline-block;
}
// XenPorta
.porta-article-item .block-body.message-inner {display: flex;}
.porta-articles-above-full {margin-bottom: @xf-elementSpacer;}
// remove border on macro components for mobile
@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
.uix_headerContainer > *,
.p-nav,
.p-footer > * {border-radius: 0 !important;}
}
// nav edits for mobile
// staff bar
<xf:if is="property('uix_staffBarBreakpoint') != '100%'">
.uix_responsiveStaffBar {
@media (max-width: @xf-uix_staffBarBreakpoint) {
.p-staffBar {display: none;}
}
}
@media (max-width: @xf-uix_staffBarBreakpoint) {
.p-staffBar .p-nav-opposite {display: none;}
}
@media (min-width: {{ property('uix_staffBarBreakpoint') + 1 }}px ) {
<xf:if is="property('uix_searchPosition') == 'staffBar'">
.p-nav .uix_searchBar {display: none;}
</xf:if>
<xf:if is="property('uix_userTabsPosition') == 'staffBar'">
.p-nav .p-navgroup--member, .p-nav .p-navgroup-link--whatsnew {display: none;}
</xf:if>
<xf:if is="property('uix_loginTriggerPosition') == 'staffBar'">
.p-nav .p-navgroup--guest {display: none;}
</xf:if>
}
<xf:else />
.p-staffBar .p-navgroup--member, .p-nav .p-navgroup-link--whatsnew {display: none;}
.p-staffBar .p-navgroup--guest {display: none;}
.p-staffBar .uix_searchBar {display: none;}
</xf:if>
/* --- show logoblock for desktop --- */
<xf:if is="property('uix_viewportShowLogoBlock') != '100%'">
@media (max-width: {{ property('uix_viewportShowLogoBlock') - 1 }}px ) {
.p-header {display: none;}
}
@media (max-width: {{ property('uix_viewportShowLogoBlock') - 1 }}px ) {
.p-header .p-nav-opposite {display: none;}
}
@media (min-width: @xf-uix_viewportShowLogoBlock) {
.p-nav-inner .p-header-logo {display: none;}
<xf:if is="property('uix_searchPosition') == 'header'">
.uix_headerContainer > *:not(.p-header) .uix_searchBar {display: none;}
</xf:if>
<xf:if is="property('uix_searchPosition') == 'header'">
.uix_headerContainer > *:not(.p-header) .uix_searchBar {display: none;}
</xf:if>
}
<xf:else />
.p-header {display: none;}
</xf:if>
/* sub-navigation */
<xf:if is="property('uix_viewportWidthRemoveSubNav') != '100%'">
@media (max-width: @xf-uix_viewportWidthRemoveSubNav ) {
<xf:if is="!property('publicNavSelected--background-color')">
.p-sectionLinks {display: none;}
<xf:else />
.p-sectionLinks > * {display: none;}
@media(max-width: @xf-publicNavCollapseWidth) {
.p-sectionLinks {display: none;}
}
</xf:if>
}
@media (min-width: {{ property('uix_viewportWidthRemoveSubNav') + 1 }}px ) {
<xf:if is="property('uix_searchPosition') == 'tablinks'">
.p-nav .uix_searchBar {display: none;}
</xf:if>
<xf:if is="property('uix_userTabsPosition') == 'tablinks'">
.p-nav .p-navgroup--member, .p-nav .p-navgroup-link--whatsnew {display: none;}
</xf:if>
<xf:if is="property('uix_loginTriggerPosition') == 'tablinks'">
.p-nav .p-navgroup--guest {display: none;}
</xf:if>
<xf:if is="property('uix_sidebarTriggerPosition') == 'sectionLinks'">
.breadcrumb a.uix_sidebarTrigger__component {display: none;}
</xf:if>
}
<xf:else />
<xf:if is="!property('publicNavSelected--background-color')">
.p-sectionLinks {display: none;}
<xf:else />
.p-sectionLinks > * {display: none;}
@media(max-width: @xf-publicNavCollapseWidth) {
.p-sectionLinks {display: none;}
}
</xf:if>
</xf:if>
// search navigation
<xf:if is="property('uix_searchPosition') == 'navigationLeft'">
.p-nav .p-nav-opposite .uix_searchBar {display: none;}
</xf:if>
.menu--account .avatar-update a {
max-width: 21px;
overflow: hidden;
font-size: 12px;
}
// label.iconic.iconic--labelled > input + i {margin-top: -2px; width: auto;}
.comment-reply-link:before {
<xf:macro name="content" template="uix_icons.less" arg-icon="post" />
margin-right: 4px;
}
.sidePanel__tabs .badgeContainer:after {
position: relative;
top: -15px;
left: -5px;
}
// notices
//scrolling notices
.lSSlideOuter.noticeScrollContainer {
position: relative;
.lSPager {
margin-top: 0px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: none;
}
.notice-content {margin-bottom: 20px;}
}
// bottom notice
.notices--bottom_fixer {
.notice-content {
display: flex;
@media (max-width: @xf-responsiveMedium) {
text-align: center;
align-items: center;
flex-direction: column;
}
}
.u-inputSpacer {margin-top: 0;}
.uix_cookieButtonRow {
margin: 0 -3px -3px @xf-paddingMedium;
@media (max-width: @xf-responsiveMedium) {
margin-top: @xf-paddingMedium;
margin-left: -3px;
}
.button {margin: 3px;}
}
.notice-content > div:first-child {
flex-grow: 1;
justify-content: center;
display: flex;
flex-direction: column;
}
}
.uix_mobileNodeTitle {
&:before {
content: "\00a0\00B7\00a0";
}
@media (min-width: @xf-uix_discussionListCollapseWidth) {
display: none;
}
}
// MENU
.menu {
transition: cubic-bezier(0.4,0.0,0.2,1) .26s transform, cubic-bezier(0.4,0.0,0.2,1) .26s opacity;
transform: translateY(-10px);
opacity: 0;
&.is-active {
transform: translateY(0);
opacity: 1;
}
}
.input input {box-shadow: none !important;}
<xf:if is="property('uix_clickableThreads')">
.structItem--thread:hover {cursor: pointer;}
</xf:if>
.uix_sidebarNav .uix_sidebarNav__inner__widgets,
.offCanvasMenu-content .uix_sidebarNav__inner__widgets {
.block-container,
.block-minorHeader,
.block-footer,
.block-body
.block-row {
border: none;
box-shadow: none;
background: none;
padding: 0;
&:not(:last-child) {
padding-bottom: @xf-paddingLarge;
}
}
.block:not(:last-child) .block-container {
border-bottom: 1px solid @xf-borderColor;
padding-bottom: @xf-paddingLarge;
}
.block-minorHeader {
font-size: @xf-fontSizeSmaller;
color: @xf-textColorMuted;
&:before {display: none !important;}
}
[data-widget-definition="th_bookmarks"] {
.bookmarkRow {
line-height: 40px;
display: flex;
align-items: center;
color: @xf-textColorDimmed;
.contentRow-minor, .bookmarkRow-forum {display: none;}
.bookmarkRow-content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.block-row {padding: 0 !important;}
.contentRow-main.contentRow-main--close {padding: 0;}
i:before, a {color: inherit;}
.block-footer, .contentRow-main:before {display: none;}
.contentRow-figure {
height: 24px;
padding-right: 1em;
font-size: 24px;
.avatar, i {
font-size: 24px;
width: 24px;
height: 24px;
vertical-align: inherit;
}
.node-icon {
width: auto;
}
}
}
}
<xf:if is="!property('uix_sidebarTriggerPhrase')">
.uix_sidebarTrigger--phrase {display: none;}
</xf:if>
.uix_headerInner--opposite a.uix_sidebarTrigger__component {
padding: 0 4px;
i {margin: 0;}
}]]></template>
<template title="uix_buttonRipple.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[@-webkit-keyframes rippleAnimation {
to {
border-radius: 100%;
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
@keyframes rippleAnimation {
to {
border-radius: 100%;
opacity: 0;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
.rippleButton {
position: relative;
}
.rippleButton .ripple-container {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
border-radius: inherit;
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
}
.rippleButton .ripple {
background-color: rgba(255,255,255,0.2);
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: center 50%;
transform-origin: center 50%;
display: block;
position: absolute;
-webkit-animation: rippleAnimation 650ms ease-out;
animation: rippleAnimation 650ms ease-out;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.navLink .ripple {
background-color: rgba(0,0,0,0.15);
-webkit-animation: rippleAnimation 450ms ease-out;
}
.rippleButton:hover {cursor: pointer;}]]></template>
<template title="uix_canvas.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[.uix_canvas__tabs {
display: flex;
justify-content: space-around;
align-items: center;
}
.uix_canvasTab {
display: inline-block;
}
.js-visitorTabPanel {
.menu-row--highlighted, .menu-separator--hard {display: none;}
}
.sidePanel__tabPanels {
position: relative;
.menu-row, .menu-footer, .menu-linkRow {
padding-left: @xf-paddingLarge;
padding-right: @xf-paddingLarge;
}
}
.sidePanel__tabPanel {
height: 0;
overflow-x: hidden;
-moz-transition: -moz-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: -o-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
float: left;
width: 100%;
position: absolute;
top: 0;
}
.sidePanel__tabPanel.is-left {
transform: translate3d(-300px, 0, 0);
overflow-y: hidden;
}
.sidePanel__tabPanel.is-right {
transform: translate3d(300px, 0, 0);
}
.sidePanel__tabPanel.is-active {
transform: translate3d(0, 0, 0);
display: block;
height: auto;
overflow-y: auto;
}
.sidePanel--visitor .sidePanel__tabPanel.is-active {
margin-bottom: 50px;
}
.sidePanel__tabPanel.is-hidden {
visibility: hidden;
}
.sidePanel__tabs {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 0 0 auto;
padding: 0;
margin: 0;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.sidePanel__tabs li {
max-width: 50%;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
color: rgba(255,255,255,.7);
list-style: none;
}
a.sidePanel__tab {
font-size: 18px;
color: rgba(255, 255, 255, 0.75);
background-color: @xf-uix_primaryColor;
padding-right: 10px;
padding-left: 10px;
border-width: 0;
border-right-style: solid;
border-right-color: rgba(255,255,255,.1);
display: block;
cursor: pointer;
text-align: center;
line-height:50px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 50px;
}
a.sidePanel__tab:hover {color: #fff; text-decoration: none;}
a.sidePanel__tab.sidePanel__tab--active {
color: #fff;
box-shadow: inset 0 -3px rgba(0,0,0,.2);
}
<xf:if is="property('uix_overlayBlur')">
html:not(.sidebarNav--active) .is-modalOpen:not(.sideNav--open) .p-pageWrapper,
html:not(.sidebarNav--active) .is-modalOpen .offCanvasMenu-backdrop {
filter: blur(1px);
}
</xf:if>]]></template>
<template title="uix_canvasPanels" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<div class="sidePanel sidePanel--nav sidePanel--visitor">
<div class="sidePanel__tabPanels">
<div data-content="navigation" class="is-active sidePanel__tabPanel js-navigationTabPanel">
<xf:macro name="canvasNavPanel" template="PAGE_CONTAINER" arg-widgets="{$uix_sidebarNavWidgets}" />
</div>
<xf:if is="$xf.visitor.user_id && (property('uix_visitorTabsMobile') == 'canvas')">
<div data-content="account" class="sidePanel__tabPanel js-visitorTabPanel">
<div class="uix_canvasPanelBody" data-menu="menu" aria-hidden="true"
data-href="{{ link('account/visitor-menu') }}"
data-load-target=".js-visitorMenuBody">
<div class="menu-content">
<div class="offCanvasMenu-header">
{{ phrase('your_account') }}
<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close') }}"></a>
</div>
<div class="js-visitorMenuBody"></div>
</div>
</div>
</div>
<div data-content="inbox" class="sidePanel__tabPanel js-convoTabPanel">
<div class="menu-content">
<div class="uix_canvasPanelBody" data-menu="menu" aria-hidden="true"
data-href="{{ link('conversations/popup') }}"
data-nocache="true"
data-target=".js-convMenuBody">
<div class="offCanvasMenu-header">
{{ phrase('conversations') }}
<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close') }}"></a>
</div>
<div class="js-convMenuBody">
</div>
</div>
<div class="menu-footer">
<a href="{{ link('conversations/add') }}" class="u-pullRight">{{ phrase('start_new_conversation') }}</a>
<a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a>
</div>
</div>
</div>
<div data-content="alerts" class="sidePanel__tabPanel js-alertTabPanel">
<div class="menu-content">
<div class="uix_canvasPanelBody" data-menu="menu" aria-hidden="true"
data-href="{{ link('account/alerts-popup') }}"
data-nocache="true"
data-target=".js-alertsMenuBody">
<div class="offCanvasMenu-header">
{{ phrase('alerts') }}
<a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close') }}"></a>
</div>
<div class="js-alertsMenuBody">
</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>
</div>
</div>]]></template>
<template title="uix_canvasTabs" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="$xf.visitor.user_id && (property('uix_visitorTabsMobile') == 'canvas')">
<ul class="sidePanel__tabs">
<li>
<a data-attr="navigation" class="sidePanel__tab sidePanel__tab--active js-visitorTab"><xf:macro template="uix_icons.less" name="icon" arg-icon="menu" /></a>
</li>
<xf:if is="$xf.visitor.user_id && (property('uix_visitorTabsMobile') == 'canvas')">
<li>
<a data-attr="account" data-xf-click="toggle" data-target=".js-visitorTabPanel .uix_canvasPanelBody" class="sidePanel__tab js-visitorTab"><xf:macro template="uix_icons.less" name="icon" arg-icon="user" /></a>
</li>
<li>
<a data-attr="inbox" data-xf-click="toggle" data-target=".js-convoTabPanel .uix_canvasPanelBody" data-badge="{$xf.visitor.conversations_unread|number}" class="sidePanel__tab js-convoTab js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}">
<xf:macro template="uix_icons.less" name="icon" arg-icon="inbox" />
</a>
</li>
<li>
<a data-attr="alerts" data-xf-click="toggle" data-target=".js-alertTabPanel .uix_canvasPanelBody" data-badge="{$xf.visitor.alerts_unread|number}" class="sidePanel__tab js-alertTab js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unread ? ' badgeContainer--highlighted' : '' }}">
<xf:macro template="uix_icons.less" name="icon" arg-icon="alert" />
</a>
</li>
</xf:if>
</ul>
</xf:if>]]></template>
<template title="uix_config" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<script>
if (typeof (window.themehouse) !== 'object') {
window.themehouse = {};
}
if (typeof (window.themehouse.settings) !== 'object') {
window.themehouse.settings = {};
}
window.themehouse.settings = {
common: {
'20180112': {
init: false,
},
},
data: {
version: '{{property('uix_version')}}',
jsVersion: 'No JS Files',
templateVersion: '2.0.10.0_Release',
betaMode: {{property('uix_betaMode')}},
theme: '',
url: '{{ base_url(null, true)|escape("js") }}',
user: '{$xf.visitor.user_id}',
},
inputSync: {},
minimalSearch: {
breakpoint: "{{ 0 + property('uix_search_maxResponsiveWidth') }}",
dropdownBreakpoint: "{{ 0 + property('uix_search_maxResponsiveWidth') }}",
},
sidebar: {
enabled: '{{$uix_canCollapseSidebar}}',
link: '{{ link("uix/toggle-sidebar.json") }}',
state: '{{$uix_sidebarCollapsed}}',
},
sidebarNav: {
enabled: '{{$uix_canCollapseSidebarNav}}',
link: '{{ link("uix/toggle-sidebar-navigation.json") }}',
state: '{{$uix_sidebarNavCollapsed}}',
},
fab: {
enabled: {{property('uix_fabScroll')}},
},
checkRadius: {
enabled: {{property('uix_borderRadiusJs')}},
selectors: '{{property("uix_borderRadiusSelectors")}}',
},
nodes: {
enabled: {{property('uix_nodeClickable')}},
},
nodesCollapse: {
enabled: '{{$uix_canCollapseCategories}}',
link: '{{ link("uix/toggle-category.json") }}',
state: '{{$uix_collapsedCategoriesJson}}',
},
widthToggle: {
enabled: '{{$uix_canTogglePageWidth}}',
link: '{{ link("uix/toggle-width.json") }}',
state: '{{$uix_pageWidth}}',
},
}
window.document.addEventListener('DOMContentLoaded', function() {
<xf:if is="{{property('uix_betaMode')}}">
window.themehouse.common['20180112'].init();
<xf:else />
try {
window.themehouse.common['20180112'].init();
} catch(e) {
console.log('Error caught', e);
}
</xf:if>
var jsVersionPrefix = 'No JS Files';
if (typeof(window.themehouse.settings.data.jsVersion) === 'string') {
var jsVersionSplit = window.themehouse.settings.data.jsVersion.split('_');
if (jsVersionSplit.length) {
jsVersionPrefix = jsVersionSplit[0];
}
}
var templateVersionPrefix = 'No JS Template Version';
if (typeof(window.themehouse.settings.data.templateVersion) === 'string') {
var templateVersionSplit = window.themehouse.settings.data.templateVersion.split('_');
if (templateVersionSplit.length) {
templateVersionPrefix = templateVersionSplit[0];
}
}
if (jsVersionPrefix !== templateVersionPrefix) {
var splitFileVersion = jsVersionPrefix.split('.');
var splitTemplateVersion = templateVersionPrefix.split('.');
console.log('version mismatch', jsVersionPrefix, templateVersionPrefix);
}
});
</script>]]></template>
<template title="uix_extendedFooter" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if contentcheck="true">
<div class="uix_extendedFooter">
<div class="pageContent">
<div class="uix_extendedFooterRow">
<xf:contentcheck>
{$uix_footerWidgets|raw}
</xf:contentcheck>
</div>
</div>
</div>
</xf:if>]]></template>
<template title="uix_extendedFooter.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[.uix_extendedFooter {
order: @xf-uix_extendedFooterOrder;
.xf-uix_extendedFooterStyle();
<xf:if is="(property('uix_pageStyle') != 'covered') && !property('uix_forceCoverExtendedFooter')">
.m-pageWidth();
</xf:if>
<xf:if is="property('uix_hideExtendedFooterMobile')">
@media (max-width: @xf-responsiveMedium) {
display: none;
}
</xf:if>
.pageContent {
<xf:if is="(property('uix_pageStyle') == 'covered') || property('uix_forceCoverExtendedFooter')">
.m-pageWidth();
<xf:if is="(property('uix_pageStyle') != 'wrapped')">
padding:0;
</xf:if>
</xf:if>
}
.uix_extendedFooterRow {
display: flex;
flex-wrap: wrap;
margin: calc(-@xf-uix_footerWidgetPadding / 2);
.blockLink {text-transform: capitalize;}
.block {
flex-basis: @xf-uix_footerWidgetWidth;
padding: calc(@xf-uix_footerWidgetPadding / 2);
margin: 0;
flex-grow: 1;
.block-container {
margin-left: 0;
margin-right: 0;
<xf:if is="{{ property('uix_extendedFooter__whiteText') }}">
color: rgba(255,255,255,.7);
</xf:if>
.xf-uix_footerWidget();
.block-minorHeader {
<xf:if is="{{ property('uix_extendedFooter__whiteText') }}">
color: rgba(255,255,255,1);
</xf:if>
.xf-uix_footerWidgetHeader();
&:before {
<xf:if is="{{ property('uix_extendedFooter__whiteText') }}">
color: rgba(255,255,255,.3);
</xf:if>
}
a {color: inherit;}
}
<xf:if is="{{ property('uix_extendedFooter__whiteText') }}">
.contentRow-minor {
color: rgba(255,255,255,.5);
time {color: rgba(255,255,255,.7);}
}
a {
color: inherit;
}
.pairs > dt {color: rgba(255,255,255,.5);}
</xf:if>
.block-body {
.xf-uix_footerWidgetBody();
}
.block-row {
.xf-uix_footerWidgetRow();
}
.block-footer {
<xf:if is="{{ property('uix_extendedFooter__whiteText') }}">
color: inherit;
</xf:if>
.xf-uix_footerWidgetFooter();
}
.blockLink {
background: none;
color: inherit;
border-bottom: 1px solid rgba(255,255,255,.12);
a {display: block;}
}
}
}
}
}]]></template>
<template title="uix_icons.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[/* <xf:macro template="uix_icons.less" name="content" arg-icon="account" /> */
<xf:macro name="content" arg-icon="" arg-content="">
.xf-uix_iconFont();
content: '{$icon}';
<xf:if is="{$icon} == 'article'">content: '@xf-uix_icon_article';</xf:if>
<xf:if is="{$icon} == 'toggle-off'">content: '@xf-uix_icon_toggleOff';</xf:if>
<xf:if is="{$icon} == 'toggle-on'">content: '@xf-uix_icon_toggleOn';</xf:if>
<xf:if is="{$icon} == 'vimeo'">content: '@xf-uix_icon_vimeo';</xf:if>
<xf:if is="{$icon} == 'twitch'">content: '@xf-uix_icon_twitch';</xf:if>
<xf:if is="{$icon} == 'spotify'">content: '@xf-uix_icon_spotify';</xf:if>
<xf:if is="{$icon} == 'apple'">content: '@xf-uix_icon_apple';</xf:if>
<xf:if is="{$icon} == 'youtube'">content: '@xf-uix_icon_youtube';</xf:if>
<xf:if is="{$icon} == 'camera'">content: '@xf-uix_icon_camera';</xf:if>
<xf:if is="{$icon} == 'checkbox'">content: '@xf-uix_icon_checkbox';</xf:if>
<xf:if is="{$icon} == 'checkbox-checked'">content: '@xf-uix_icon_checkboxChecked';</xf:if>
<xf:if is="{$icon} == 'radio'">content: '@xf-uix_icon_radio';</xf:if>
<xf:if is="{$icon} == 'radio-selected'">content: '@xf-uix_icon_radioSelected';</xf:if>
<xf:if is="{$icon} == 'disable'">content: '@xf-uix_icon_disable';</xf:if>
<xf:if is="{$icon} == 'alert'">content: '@xf-uix_icon_alert';</xf:if>
<xf:if is="{$icon} == 'alert-off'">content: '@xf-uix_icon_alertOff';</xf:if>
<xf:if is="{$icon} == 'collapse'">content: '@xf-uix_icon_collapse';</xf:if>
<xf:if is="{$icon} == 'expand'">content: '@xf-uix_icon_expand';</xf:if>
<xf:if is="{$icon} == 'new-thread'">content: '@xf-uix_icon_newThread';</xf:if>
<xf:if is="{$icon} == 'download'">content: '@xf-uix_icon_download';</xf:if>
<xf:if is="{$icon} == 'user'">content: '@xf-uix_icon_user';</xf:if>
<xf:if is="{$icon} == 'grid'">content: '@xf-uix_icon_email';</xf:if>
<xf:if is="{$icon} == 'rss'">content: '@xf-uix_icon_rss';</xf:if>
<xf:if is="{$icon} == 'folder'">content: '@xf-uix_icon_folder';</xf:if>
<xf:if is="{$icon} == 'home'">content: '@xf-uix_icon_home';</xf:if>
<xf:if is="{$icon} == 'email'">content: '@xf-uix_icon_email';</xf:if>
<xf:if is="{$icon} == 'inbox'">content: '@xf-uix_icon_email';</xf:if>
<xf:if is="{$icon} == 'menu-down'">content: '@xf-uix_icon_menuDown';</xf:if>
<xf:if is="{$icon} == 'menu-left'">
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_menuLeft';
<xf:else />
content: '@xf-uix_icon_menuRight';
</xf:if>
</xf:if>
<xf:if is="{$icon} == 'menu-right'">content: '@xf-uix_icon_menuRight';</xf:if>
<xf:if is="{$icon} == 'attention'">content: '@xf-uix_icon_attention';</xf:if>
<xf:if is="{$icon} == 'menu-up'">content: '@xf-uix_icon_menuUp';</xf:if>
<xf:if is="{$icon} == 'menu'">content: '@xf-uix_icon_menu';</xf:if>
<xf:if is="{$icon} == 'chevron-right'">
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_chevronRight';
<xf:else />
content: '@xf-uix_icon_chevronLeft';
</xf:if>
</xf:if>
<xf:if is="{$icon} == 'chevron-left'">
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_chevronLeft';
<xf:else />
content: '@xf-uix_icon_chevronRight';
</xf:if>
</xf:if>
<xf:if is="{$icon} == 'chevron-down'">content: '@xf-uix_icon_chevronDown';</xf:if>
<xf:if is="{$icon} == 'chevron-up'">content: '@xf-uix_icon_chevronUp';</xf:if>
<xf:if is="{$icon} == 'file'">content: '@xf-uix_icon_file';</xf:if>
<xf:if is="{$icon} == 'arrow-up-circle'">content: '@xf-uix_icon_arrowUpVariant';</xf:if>
<xf:if is="{$icon} == 'arrow-up'">content: '@xf-uix_icon_arrowUp';</xf:if>
<xf:if is="{$icon} == 'arrow-down'">content: '@xf-uix_icon_arrowDown';</xf:if>
<xf:if is="{$icon} == 'arrow-left'">
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_arrowLeft';
<xf:else />
content: '@xf-uix_icon_arrowRight';
</xf:if>
</xf:if>
<xf:if is="{$icon} == 'arrow-right'">
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_arrowRight';
<xf:else />
content: '@xf-uix_icon_arrowLeft';
</xf:if>
</xf:if>
<xf:if is="{$icon} == 'close'">content: '@xf-uix_icon_close';</xf:if>
<xf:if is="{$icon} == 'tag-multiple'">content: '@xf-uix_icon_tagMultiple';</xf:if>
<xf:if is="{$icon} == 'search-plus'">content: '@xf-uix_icon_searchPlus';</xf:if>
<xf:if is="{$icon} == 'search'">content: '@xf-uix_icon_search';</xf:if>
<xf:if is="{$icon} == 'plus'">content: '@xf-uix_icon_plus';</xf:if>
<xf:if is="{$icon} == 'minus'">content: '@xf-uix_icon_minus';</xf:if>
<xf:if is="{$icon} == 'user-multiple'">content: '@xf-uix_icon_userMultiple';</xf:if>
<xf:if is="{$icon} == 'graph'">content: '@xf-uix_icon_graph';</xf:if>
<xf:if is="{$icon} == 'clock'">content: '@xf-uix_icon_clock';</xf:if>
<xf:if is="{$icon} == 'brush'">content: '@xf-uix_icon_brush';</xf:if>
<xf:if is="{$icon} == 'reply'">content: '@xf-uix_icon_reply';</xf:if>
<xf:if is="{$icon} == 'like'">content: '@xf-uix_icon_like';</xf:if>
<xf:if is="{$icon} == 'unlike'">content: '@xf-uix_icon_unlike';</xf:if>
<xf:if is="{$icon} == 'delete'">content: '@xf-uix_icon_delete';</xf:if>
<xf:if is="{$icon} == 'moderate'">content: '@xf-uix_icon_moderate';</xf:if>
<xf:if is="{$icon} == 'statistics'">content: '@xf-uix_icon_statistics';</xf:if>
<xf:if is="{$icon} == 'warning'">content: '@xf-uix_icon_warning';</xf:if>
<xf:if is="{$icon} == 'ignored'">content: '@xf-uix_icon_ignored';</xf:if>
<xf:if is="{$icon} == 'forum'">content: '@xf-uix_icon_forum';</xf:if>
<xf:if is="{$icon} == 'page'">content: '@xf-uix_icon_page';</xf:if>
<xf:if is="{$icon} == 'earth'">content: '@xf-uix_icon_earth';</xf:if>
<xf:if is="{$icon} == 'link'">content: '@xf-uix_icon_link';</xf:if>
<xf:if is="{$icon} == 'search-member'">content: '@xf-uix_icon_searchMember';</xf:if>
<xf:if is="{$icon} == 'check'">content: '@xf-uix_icon_check';</xf:if>
<xf:if is="{$icon} == 'lock'">content: '@xf-uix_icon_lock';</xf:if>
<xf:if is="{$icon} == 'share'">content: '@xf-uix_icon_share';</xf:if>
<xf:if is="{$icon} == 'redirect'">content: '@xf-uix_icon_redirect';</xf:if>
<xf:if is="{$icon} == 'messages'">content: '@xf-uix_icon_messages';</xf:if>
<xf:if is="{$icon} == 'post'">content: '@xf-uix_icon_post';</xf:if>
<xf:if is="{$icon} == 'star'">content: '@xf-uix_icon_star';</xf:if>
<xf:if is="{$icon} == 'embed'">content: '@xf-uix_icon_embed';</xf:if>
<xf:if is="{$icon} == 'star-half'">content: '@xf-uix_icon_starHalf';</xf:if>
<xf:if is="{$icon} == 'star-empty'">content: '@xf-uix_icon_starEmpty';</xf:if>
<xf:if is="{$icon} == 'sticky'">content: '@xf-uix_icon_sticky';</xf:if>
<xf:if is="{$icon} == 'watched'">content: '@xf-uix_icon_watched';</xf:if>
<xf:if is="{$icon} == 'poll'">content: '@xf-uix_icon_poll';</xf:if>
<xf:if is="{$icon} == 'facebook'">content: '@xf-uix_icon_facebook';</xf:if>
<xf:if is="{$icon} == 'twitter'">content: '@xf-uix_icon_twitter';</xf:if>
<xf:if is="{$icon} == 'google-plus'">content: '@xf-uix_icon_googlePlus';</xf:if>
<xf:if is="{$icon} == 'pinterest'">content: '@xf-uix_icon_pinterest';</xf:if>
<xf:if is="{$icon} == 'tumblr'">content: '@xf-uix_icon_tumblr';</xf:if>
<xf:if is="{$icon} == 'instagram'">content: '@xf-uix_icon_instagram';</xf:if>
<xf:if is="{$icon} == 'reddit'">content: '@xf-uix_icon_reddit';</xf:if>
<xf:if is="{$icon} == 'whatsapp'">content: '@xf-uix_icon_whatsapp';</xf:if>
<xf:if is="{$icon} == 'github'">content: '@xf-uix_icon_github';</xf:if>
<xf:if is="{$icon} == 'linkedin'">content: '@xf-uix_icon_linkedin';</xf:if>
<xf:if is="{$icon} == 'microsoft'">content: '@xf-uix_icon_microsoft';</xf:if>
<xf:if is="{$icon} == 'export'">content: '@xf-uix_icon_export';</xf:if>
<xf:if is="{$icon} == 'import'">content: '@xf-uix_iconImport';</xf:if>
<xf:if is="{$icon} == 'edit'">content: '@xf-uix_icon_edit';</xf:if>
<xf:if is="{$icon} == 'save'">content: '@xf-uix_icon_save';</xf:if>
<xf:if is="{$icon} == 'quote'">content: '@xf-uix_icon_quote';</xf:if>
<xf:if is="{$icon} == 'payment'">content: '@xf-uix_icon_payment';</xf:if>
<xf:if is="{$icon} == 'shopping-cart'">content: '@xf-uix_icon_shoppingCart';</xf:if>
<xf:if is="{$icon} == 'birthday'">content: '@xf-uix_icon_birthday';</xf:if>
<xf:if is="{$icon} == 'sort'">content: '@xf-uix_icon_sort';</xf:if>
<xf:if is="{$icon} == 'upload'">content: '@xf-uix_icon_upload';</xf:if>
<xf:if is="{$icon} == 'attachment'">content: '@xf-uix_icon_attachment';</xf:if>
<xf:if is="{$icon} == 'login'">content: '@xf-uix_icon_login';</xf:if>
<xf:if is="{$icon} == 'register'">content: '@xf-uix_icon_register';</xf:if>
<xf:if is="{$icon} == 'rate'">content: '@xf-uix_icon_rate';</xf:if>
<xf:if is="{$icon} == 'convert'">content: '@xf-uix_icon_convert';</xf:if>
<xf:if is="{$icon} == 'trophy'">content: '@xf-uix_icon_trophy';</xf:if>
<xf:if is="{$icon} == 'report'">content: '@xf-uix_icon_report';</xf:if>
<xf:if is="{$icon} == 'ipaddress'">content: '@xf-uix_icon_ipAddress';</xf:if>
<xf:if is="{$icon} == 'history'">content: '@xf-uix_icon_history';</xf:if>
<xf:if is="{$icon} == 'warn'">content: '@xf-uix_icon_warn';</xf:if>
<xf:if is="{$icon} == 'spam'">content: '@xf-uix_icon_spam';</xf:if>
<xf:if is="{$icon} == 'settings'">content: '@xf-uix_icon_settings';</xf:if>
<xf:if is="{$icon} == 'file-document'">content: '@xf-uix_icon_fileDocument';</xf:if>
<xf:if is="{$icon} == 'comment-multiple'">content: '@xf-uix_icon_commentMultiple';</xf:if>
<xf:if is="{$icon} == 'bookmark'">content: '@xf-uix_icon_bookmark';</xf:if>
<xf:if is="{$icon} == 'help'">content: '@xf-uix_icon_help';</xf:if>
<xf:if is="{$icon} == 'refresh'">content: '@xf-uix_icon_refresh';</xf:if>
<xf:if is="{$icon} == 'unlock'">content: '@xf-uix_icon_unlock';</xf:if>
<xf:if is="{$icon} == 'location'">content: '@xf-uix_icon_location';</xf:if>
<xf:if is="{$icon} == 'web'">content: '@xf-uix_icon_web';</xf:if>
<xf:if is="{$icon} == 'list'">content: '@xf-uix_icon_list';</xf:if>
<xf:if is="{$icon} == 'comment-alert'">content: '@xf-uix_icon_commentAlert';</xf:if>
<xf:if is="{$icon} == 'whats-new'">content: '@xf-uix_icon_whatsNew';</xf:if>
<xf:if is="{$icon} == 'attention'">content: '@xf-uix_icon_attention';</xf:if>
<xf:if is="{$icon} == 'merge'">content: '@xf-uix_icon_merge';</xf:if>
<xf:if is="{$icon} == 'move'">content: '@xf-uix_icon_move';</xf:if>
<xf:if is="{$icon} == 'clone'">content: '@xf-uix_icon_clone';</xf:if>
<xf:if is="{$icon} == 'info'">content: '@xf-uix_icon_info';</xf:if>
<xf:if is="{$icon} == 'media'">content: '@xf-uix_icon_media';</xf:if>
<xf:if is="{$icon} == 'resource'">content: '@xf-uix_icon_resource';</xf:if>
<xf:if is="{$icon} == 'video'">content: '@xf-uix_icon_video';</xf:if>
<xf:if is="{$icon} == 'audio'">content: '@xf-uix_icon_audio';</xf:if>
</xf:macro>
<xf:macro name="icon" arg-icon="!">
<i class="uix_icon uix_icon--{$icon}"></i>
</xf:macro>
.uix_icon--toggle-on:before {content: '@xf-uix_icon_toggleOn';}
.uix_icon--toggle-off:before {content: '@xf-uix_icon_toggleOff';}
.uix_icon--alert:before {content: '@xf-uix_icon_alert';}
.uix_icon--alert-off:before {content: '@xf-uix_icon_alertOff';}
.uix_icon--user:before {content: '@xf-uix_icon_user';}
.uix_icon--grid:before {content: '@xf-uix_icon_grid';}
.uix_icon--rss:before {content: '@xf-uix_icon_rss';}
.uix_icon--folder:before {content: '@xf-uix_icon_folder';}
.uix_icon--home:before {content: '@xf-uix_icon_home';}
.uix_icon--email:before {content: '@xf-uix_icon_email';}
.uix_icon--inbox:before {content: '@xf-uix_icon_inbox';}
.uix_icon--menu-down:before {content: '@xf-uix_icon_menuDown';}
.uix_icon--menu-left:before {
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_menuLeft';
<xf:else />
content: '@xf-uix_icon_menuRight';
</xf:if>
}
.uix_icon--menu-right:before {
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_menuRight';
<xf:else />
content: '@xf-uix_icon_menuLeft';
</xf:if>
}
.uix_icon--menu-up:before {content: '@xf-uix_icon_menuUp';}
.uix_icon--menu:before {content: '@xf-uix_icon_menu';}
.uix_icon--chevron-right:before {
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_chevronRight';
<xf:else />
content: '@xf-uix_icon_chevronLeft';
</xf:if>
}
.uix_icon--chevron-left:before {
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_chevronLeft';
<xf:else />
content: '@xf-uix_icon_chevronRight';
</xf:if>
}
.uix_icon--chevron-down:before {content: '@xf-uix_icon_chevronDown';}
.uix_icon--chevron-up:before {content: '@xf-uix_icon_chevronUp';}
.uix_icon--file:before {content: '@xf-uix_icon_file';}
.uix_icon--arrow-up-circle:before {content: '@xf-uix_icon_arrowUpCircle';}
.uix_icon--arrow-up:before {content: '@xf-uix_icon_arrowUp';}
.uix_icon--arrow-down:before {content: '@xf-uix_icon_arrowDown';}
.uix_icon--arrow-left:before {
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_arrowLeft';
<xf:else />
content: '@xf-uix_icon_arrowRight';
</xf:if>
}
.uix_icon--arrow-right:before {
<xf:if is="({$xf.language.text_direction} == 'LTR' && property('uix_textDirection') == 'LTR')
|| ({$xf.language.text_direction} == 'RTL' && property('uix_textDirection') == 'RTL')
">
content: '@xf-uix_icon_arrowRight';
<xf:else />
content: '@xf-uix_icon_arrowRight';
</xf:if>
}
.uix_icon--spotify:before {content: '@xf-uix_icon_spotify';}
.uix_icon--soundcloud:before {content: '@xf-uix_icon_soundcloud';}
.uix_icon--flickr:before {content: '@xf-uix_icon_flickr';}
.uix_icon--close:before {content: '@xf-uix_icon_close';}
.uix_icon--apple:before {content: '@xf-uix_icon_apple';}
.uix_icon--youtube:before {content: '@xf-uix_icon_youtube';}
.uix_icon--camera:before {content: '@xf-uix_icon_camera';}
.uix_icon--tag-multiple:before {content: '@xf-uix_icon_tagMultiple';}
.uix_icon--search-plus:before {content: '@xf-uix_icon_searchPlus';}
.uix_icon--search:before {content: '@xf-uix_icon_search';}
.uix_icon--plus:before {content: '@xf-uix_icon_plus';}
.uix_icon--minus:before {content: '@xf-uix_icon_minus';}
.uix_icon--user-multiple:before {content: '@xf-uix_icon_userMultiple';}
.uix_icon--chart-bar:before {content: '@xf-uix_icon_chartBar';}
.uix_icon--clock:before {content: '@xf-uix_icon_clock';}
.uix_icon--brush:before {content: '@xf-uix_icon_brush';}
.uix_icon--reply:before {content: '@xf-uix_icon_reply';}
.uix_icon--like:before {content: '@xf-uix_icon_like';}
.uix_icon--unlike:before {content: '@xf-uix_icon_unlike';}
.uix_icon--delete:before {content: '@xf-uix_icon_delete';}
.uix_icon--moderate:before {content: '@xf-uix_icon_moderate';}
.uix_icon--statistics:before {content: '@xf-uix_icon_statistics';}
.uix_icon--warning:before {content: '@xf-uix_icon_warning';}
.uix_icon--ignored:before {content: '@xf-uix_icon_ignored';}
.uix_icon--forum:before {content: '@xf-uix_icon_forum';}
.uix_icon--page:before {content: '@xf-uix_icon_page';}
.uix_icon--earth:before {content: '@xf-uix_icon_earth';}
.uix_icon--link:before {content: '@xf-uix_icon_link';}
.uix_icon--search-member:before {content: '@xf-uix_icon_searchMember';}
.uix_icon--radio:before {content: '@xf-uix_icon_radio';}
.uix_icon--radio-selected:before {content: '@xf-uix_icon_radioSelected';}
.uix_icon--check:before {content: '@xf-uix_icon_check';}
.uix_icon--checkbox-checked:before {content: '@xf-uix_icon_checkboxChecked';}
.uix_icon--checkbox:before {content: '@xf-uix_icon_checkbpx';}
.uix_icon--lock:before {content: '@xf-uix_icon_lock';}
.uix_icon--share:before {content: '@xf-uix_icon_share';}
.uix_icon--redirect:before {content: '@xf-uix_icon_redirect';}
.uix_icon--messages:before {content: '@xf-uix_icon_messages';}
.uix_icon--post:before {content: '@xf-uix_icon_post';}
.uix_icon--star:before {content: '@xf-uix_icon_star';}
.uix_icon--star-empty:before {content: '@xf-uix_icon_starEmpty';}
.uix_icon--star-half:before {content: '@xf-uix_icon_starHalf';}
.uix_icon--sticky:before {content: '@xf-uix_icon_sticky';}
.uix_icon--watched:before {content: '@xf-uix_icon_watched';}
.uix_icon--poll:before {content: '@xf-uix_icon_poll';}
.uix_icon--facebook:before {content: '@xf-uix_icon_facebook';}
.uix_icon--twitter:before {content: '@xf-uix_icon_twitter';}
.uix_icon--google-plus:before {content: '@xf-uix_icon_googlePlus';}
.uix_icon--pinterest:before {content: '@xf-uix_icon_pinterest';}
.uix_icon--tumblr:before {content: '@xf-uix_icon_tumblr';}
.uix_icon--reddit:before {content: '@xf-uix_icon_reddit';}
.uix_icon--whatsapp:before {content: '@xf-uix_icon_whatsapp';}
.uix_icon--github:before {content: '@xf-uix_icon_github';}
.uix_icon--linkedin:before {content: '@xf-uix_icon_linkedin';}
.uix_icon--microsoft:before {content: '@xf-uix_icon_microsoft';}
.uix_icon--export:before {content: '@xf-uix_icon_export';}
.uix_icon--import:before {content: '@xf-uix_icon_import';}
.uix_icon--edit:before {content: '@xf-uix_icon_edit';}
.uix_icon--save:before {content: '@xf-uix_icon_save';}
.uix_icon--quote:before {content: '@xf-uix_icon_quote';}
.uix_icon--payment:before {content: '@xf-uix_icon_payment';}
.uix_icon--shopping-cart:before {content: '@xf-uix_icon_shoppingCart';}
.uix_icon--birthday:before {content: '@xf-uix_icon_birthday';}
.uix_icon--sort:before {content: '@xf-uix_icon_sort';}
.uix_icon--upload:before {content: '@xf-uix_icon_upload';}
.uix_icon--attachment:before {content: '@xf-uix_icon_attachment';}
.uix_icon--login:before {content: '@xf-uix_icon_login';}
.uix_icon--register:before {content: '@xf-uix_icon_register';}
.uix_icon--rate:before {content: '@xf-uix_icon_rate';}
.uix_icon--convert:before {content: '@xf-uix_icon_convert';}
.uix_icon--trophy:before {content: '@xf-uix_icon_trophy';}
.uix_icon--report:before {content: '@xf-uix_icon_report';}
.uix_icon--ipaddress:before {content: '@xf-uix_icon_ipaddress';}
.uix_icon--history:before {content: '@xf-uix_icon_history';}
.uix_icon--warn:before {content: '@xf-uix_icon_warn';}
.uix_icon--spam:before {content: '@xf-uix_icon_spam';}
.uix_icon--settings:before {content: '@xf-uix_icon_settings';}
.uix_icon--file-document:before {content: '@xf-uix_icon_fileDocument';}
.uix_icon--comment-multiple:before {content: '@xf-uix_icon_commentMultiple';}
.uix_icon--bookmark:before {content: '@xf-uix_icon_bookmark';}
.uix_icon--help:before {content: '@xf-uix_icon_help';}
.uix_icon--refresh:before {content: '@xf-uix_icon_refresh';}
.uix_icon--unlock:before {content: '@xf-uix_icon_unlock';}
.uix_icon--location:before {content: '@xf-uix_icon_location';}
.uix_icon--web:before {content: '@xf-uix_icon_web';}
.uix_icon--list:before {content: '@xf-uix_icon_list';}
.uix_icon--comment-alert:before {content: '@xf-uix_icon_commentAlert';}
.uix_icon--download:before {content: '@xf-uix_icon_download';}
.uix_icon--whats-new:before {content: '@xf-uix_icon_whatsNew';}
.uix_icon--new-thread:before {content: '@xf-uix_icon_newThread';}
.uix_icon--collapse:before {content: '@xf-uix_icon_collapse';}
.uix_icon--expand:before {content: '@xf-uix_icon_expand';}
.uix_icon--merge:before {content: '@xf-uix_icon_merge';}
.uix_icon--move:before {content: '@xf-uix_icon_move';}
.uix_icon--clone:before {content: '@xf-uix_icon_clone';}
.uix_icon--info:before {content: '@xf-uix_icon_info';}
.uix_icon--media:before {content: '@xf-uix_icon_media';}
.uix_icon--resource:before {content: '@xf-uix_icon_resource';}
.uix_icon--embed:before {content: '@xf-uix_icon_embed';}
.uix_icon--video:before {content: '@xf-uix_icon_video';}
.uix_icon--audio:before {content: '@xf-uix_icon_audio';}
.uix_icon--graph:before {content: '@xf-uix_icon_graph';}
.uix_icon--disable:before {content: '@xf-uix_icon_disable';}
.uix_icon--twitch:before {content: '@xf-uix_icon_twitch';}
.uix_icon--vimeo:before {content: '@xf-uix_icon_vimeo';}
.uix_icon--article:before {content: '@xf-uix_icon_article';}
// external anchors icons
/*
<xf:if is="{{property('uix_externalLinkIcon')}}">
a[href]:not([href*='']):not([href*='{{$xf.options.boardUrl}}']):not([href*='{{$xf.options.homePageUrl}}']):not( [href^='#'] ):not( [href^='/'] ):after {
<xf:macro name="content" template="uix_icons.less" arg-icon="open-in-new" />
}
</xf:if>
*/
/* -- MATERIAL ICONS -- */
<xf:comment>
@font-face {
font-family: "Material Design Icons";
src: url("styles/uix/fonts/icons/material-icons/materialdesignicons-webfont.eot?v=3.0.39");
src: url("styles/uix/fonts/icons/material-icons/materialdesignicons-webfont.eot?#iefix&v=3.0.39") format("embedded-opentype"), url("styles/uix/fonts/icons/material-icons/materialdesignicons-webfont.woff2?v=3.0.39") format("woff2"), url("styles/uix/fonts/icons/material-icons/materialdesignicons-webfont.woff?v=3.0.39") format("woff"), url("styles/uix/fonts/icons/material-icons/materialdesignicons-webfont.ttf?v=3.0.39") format("truetype"), url("styles/uix/fonts/icons/material-icons/materialdesignicons-webfont.svg?v=3.0.39#materialdesigniconsregular") format("svg");
font-weight: normal;
font-style: normal;
}
</xf:comment>
.mdi:before,
.uix_icon {
display: inline-block;
font: normal normal normal 18px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
width: auto;
}]]></template>
<template title="uix_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:js src="themehouse/global/20180112.js" min="themehouse/global/20180112.min.js" />
<xf:js src="themehouse/{{property('uix_jsPath')}}/index.js" min="themehouse/{{property('uix_jsPath')}}/index.min.js" />
<xf:js src="themehouse/{{property('uix_jsPath')}}/defer.js" min="themehouse/{{property('uix_jsPath')}}/defer.min.js" defer="defer" />
<xf:if is="property('uix_clickableThreads')">
<xf:js>
$(document).ready(function() {
$('.structItem--thread').click(function() {
var href = $(this).find('.structItem-title').attr('uix-data-href');
window.location = href;
});
});
</xf:js>
</xf:if>
<xf:comment>
<xf:js>
// sticky bar test
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
$('html').addClass('uix_stickyBottom');
$('html').removeClass('uix_stickyTop');
} else {
$('html').addClass('uix_stickyTop');
$('html').removeClass('uix_stickyBottom');
}
lastScrollTop = st;
});
</xf:js>
</xf:comment>
<xf:if is="property('uix_sidebarMobileCanvas')">
<xf:js>
$(document).ready(function() {
var sidebar = $('.p-body-sidebar');
var backdrop = $('.p-body-sidebar [data-ocm-class="offCanvasMenu-backdrop"]');
$('.uix_sidebarCanvasTrigger').click(function(e) {
e.preventDefault();
sidebar.addClass('offCanvasMenu offCanvasMenu--blocks is-active is-transitioning');
$('body').addClass('sideNav--open');
window.setTimeout(function() {
sidebar.removeClass('is-transitioning');
}, 250);
$('.uix_sidebarInner').addClass('offCanvasMenu-content');
backdrop.addClass('offCanvasMenu-backdrop');
$('body').addClass('is-modalOpen');
});
backdrop.click(function() {
sidebar.addClass('is-transitioning');
sidebar.removeClass('is-active');
window.setTimeout(function() {
sidebar.removeClass('offCanvasMenu offCanvasMenu--blocks is-transitioning');
$('.uix_sidebarInner').removeClass('offCanvasMenu-content');
backdrop.removeClass('offCanvasMenu-backdrop');
$('body').removeClass('is-modalOpen');
}, 250);
})
});
</xf:js>
</xf:if>
<xf:js>
/****** OFF CANVAS ***/
$(document).ready(function() {
var panels = {
navigation: {
position: 1
},
account: {
position: 2
},
inbox: {
position: 3
},
alerts: {
position: 4
}
};
var tabsContainer = $('.sidePanel__tabs');
var activeTab = 'navigation';
var activeTabPosition = panels[activeTab].position;
var generateDirections = function() {
$('.sidePanel__tabPanel').each(function() {
var tabPosition = $(this).attr('data-content');
var activeTabPosition = panels[activeTab].position;
if (tabPosition != activeTab) {
if (panels[tabPosition].position < activeTabPosition) {
$(this).addClass('is-left');
}
if (panels[tabPosition].position > activeTabPosition) {
$(this).addClass('is-right');
}
}
});
};
generateDirections();
$('.sidePanel__tab').click(function() {
$(tabsContainer).find('.sidePanel__tab').removeClass('sidePanel__tab--active');
$(this).addClass('sidePanel__tab--active');
activeTab = $(this).attr('data-attr');
$('.sidePanel__tabPanel').removeClass('is-active');
$('.sidePanel__tabPanel[data-content="' + activeTab + '"]').addClass('is-active');
$('.sidePanel__tabPanel').removeClass('is-left').removeClass('is-right');
generateDirections();
});
});
/******** extra info post toggle ***********/
$(document).ready(function() {
$('.thThreads__userExtra--trigger').click(function() {
var parent = $(this).parents('.message-cell--user');
var triggerContainer = $(this).parent('.thThreads__userExtra--toggle');
var container = triggerContainer.siblings('.thThreads__message-userExtras');
var child = container.find('.message-userExtras');
var eleHeight = child.height();
if (parent.hasClass('userExtra--expand')) {
container.css({ height: eleHeight });
parent.toggleClass('userExtra--expand');
window.setTimeout(function() {
container.css({ height: '0' });
window.setTimeout(function() {
container.css({ height: '' });
}, 200);
}, 17);
} else {
parent.toggleClass('userExtra--expand');
container.css({ height: eleHeight });
window.setTimeout(function() {
container.css({ height: '' });
}, 200);
}
});
});
/******** Backstretch images ***********/
$(document).ready(function() {
if ( {{ property('uix_backstretch') }} ) {
$("{{ property('uix_backstretchSelector') }}").addClass('uix__hasBackstretch');
$("{{ property('uix_backstretchSelector') }}").backstretch([
{$__globals.uix_backstretchImages|raw}
], {
duration: {{ property('uix_backstretchDuration') }},
fade: {{ property('uix_backstretchFade')}}
});
$("{{ property('uix_backstretchSelector') }}").css("zIndex","");
}
});
// sidenav canvas blur fix
$(document).ready(function(){
$('.p-body-sideNavTrigger .button').click(function(){
$('body').addClass('sideNav--open');
});
})
$(document).ready(function(){
$("[data-ocm-class='offCanvasMenu-backdrop']").click(function(){
$('body').removeClass('sideNav--open');
});
})
$(document).on('editor:start', function (m, ed) {
if (typeof (m) !== 'undefined' && typeof (m.target) !== 'undefined') {
var ele = $(m.target);
if (ele.hasClass('js-editor')) {
var wrapper = ele.closest('.message-editorWrapper');
if (wrapper.length) {
window.setTimeout(function() {
var innerEle = wrapper.find('.fr-element');
if (innerEle.length) {
innerEle.focus(function (e) {
$('html').addClass('uix_editor--focused')
});
innerEle.blur(function (e) {
$('html').removeClass('uix_editor--focused')
});
}
}, 0);
}
}
}
});
</xf:js>
<xf:if is="property('uix_parallax')">
<xf:js>
var parallaxSelector = "{{ property('uix_parallaxSelector') }}"
var parallaxImage = "{{ base_url(property('uix_parallaxImage')) }}"
var parallaxPosition = "{{ property('uix_parallaxPosition') }}"
$(parallaxSelector).parallax({imageSrc: parallaxImage, positionY: parallaxPosition});
</xf:js>
</xf:if>
<xf:js>
$(document).ready(function() {
$('.uix_threadCollapseTrigger').click(function(e) {
e.preventDefault();
var container = $('.uix_stickyContainerOuter');
var child = container.find('.structItemContainer-group--sticky');
var eleHeight = child.height();
if (container.hasClass('uix_threadListSeparator--collapsed')) {
container.toggleClass('uix_threadListSeparator--collapsed');
container.css({ height: eleHeight });
window.setTimeout(function() {
container.css({ height: '' });
}, 200);
} else {
container.css({ height: eleHeight });
container.toggleClass('uix_threadListSeparator--collapsed');
window.setTimeout(function() {
container.css({ height: '0' });
window.setTimeout(function() {
container.css({ height: '' });
}, 200);
}, 17);
}
});
});
</xf:js>]]></template>
<template title="uix_mainTabSets" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:macro name="forum" arg-activeTab="">
<!-- first tab -->
<!-- new tab -->
<xf:if is="{$xf.options.forumsDefaultPage} == 'new_posts'">
<a href="{{ link('forums') }}" class="tabs-tab {{$activeTab == 'new_posts' ? 'is-active' : '' }}">{{ phrase('new_posts') }}</a>
</xf:if>
<a href="{{ link('forums/-/list') }}" class="tabs-tab {{$activeTab == 'forum_list' ? 'is-active' : '' }}">{{ phrase('forum_list') }}</a>
</xf:macro>]]></template>
<template title="uix_pageAnimations.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[@media (min-width: @xf-responsiveWide) {
// ANIMATION VARIABLES
@macroAnimationSpeed: .15s;
// MACRO ANIMATIONS
@keyframes macroAnimation {
from {
opacity: 0;
};
to {
opacity: 1;
};
}
.m-uix_macroAnimation(@iteration) {
animation: macroAnimation @macroAnimationSpeed ease;
animation-delay: @iteration * @macroAnimationSpeed;
animation-fill-mode: backwards;
}
<xf:if is="{{property('uix_pageAnimation')}}">
// .uix_headerContainer {.m-uix_macroAnimation(1);}
.uix_sidebarNav {.m-uix_macroAnimation(1);}
.p-body-inner {.m-uix_macroAnimation(2);}
.p-body-sidebar {.m-uix_macroAnimation(3);}
.p-footer {.m-uix_macroAnimation(4);}
</xf:if>
// NODE ANIMATIONS
@keyframes slideUp {
from {
transform: translatey(30px);
opacity: 0;
};
to {
transform: translatey(0px);
opacity: 1;
};
}
.m-uix_nodeAnimation(@iteration) {
animation: slideUp .4s cubic-bezier(0.4, 0, 0.2, 1);
animation-delay: (@iteration * .15s) + (@macroAnimationSpeed * 2);
animation-fill-mode: backwards;
}
.uix_nodeLoop (@i) when (@i > 0) {
&:nth-child(@{i}) {
.m-uix_nodeAnimation(@i)
}
.uix_nodeLoop(@i - 1);
}
<xf:if is="property('uix_nodeAnimations')">
.block--category {
.uix_nodeLoop(15);
}
</xf:if>
// SIDEBAR ANIMATIONS
@sideNavItemDelay: .05s;
@keyframes scootRight {
from {
transform: translatex(-30px);
opacity: 0;
};
to {
transform: translatex(0px);
opacity: 1;
};
}
.m-uix_sideNavAnimation(@iteration, @offset) {
animation: scootRight .5s ease;
animation-delay: (@iteration * @sideNavItemDelay) + (@macroAnimationSpeed) + (@offset * @sideNavItemDelay) - @sideNavItemDelay;
animation-fill-mode: backwards;
}
.uix_sideNavLoop (@i) when (@i > 0) {
&:nth-child(@{i}) {
.uix_sideNavItemLoop(15);
}
.uix_sideNavLoop(@i - 1);
}
.uix_sideNavItemLoop (@i) when (@i > 0) {
&.uix_sidebarNavList > li:nth-child(@{i}),
.topic-filter-item:not(.th_topics_clearTopics):nth-child(@{i}) {
.m-uix_sideNavAnimation(@i, @i);
}
.uix_sideNavItemLoop(@i - 1);
}
<xf:if is="{{property('uix_sideNavigationAnimation')}}">
.uix_sidebarNav__inner .uix_sidebar--scroller > * {
.uix_sideNavLoop(15);
}
</xf:if>
// SIDEBAR ANIMATION
<xf:if is="{{property('uix_sidebarWidgetAnimations')}}">
@sidebarItemDelay: .1s;
@keyframes scootLeft {
from {
transform: translatex(30px);
opacity: 0;
};
to {
transform: translatex(0px);
opacity: 1;
};
}
.m-uix_sidebarAnimation(@iteration) {
animation: scootLeft .5s ease;
animation-delay: (@iteration * @sidebarItemDelay) + (@macroAnimationSpeed * 3);
animation-fill-mode: backwards;
}
.uix_sidebarLoop (@i) when (@i > 0) {
&:nth-child(@{i}) {
.m-uix_sidebarAnimation(@i)
}
.uix_sidebarLoop(@i - 1);
}
.uix_sidebarInner .block {
.uix_sidebarLoop(15);
}
</xf:if>
// DISCUSSION LIST
.uix_scootUpLoop (@i) when (@i > 0) {
&:nth-child(@{i}) {
animation: slideUp .3s ease;
animation-delay: (@i * .05s) + (@macroAnimationSpeed * 2);
animation-fill-mode: backwards;
}
.uix_scootUpLoop(@i - 1);
}
<xf:if is="{{property('uix_discussionListAnimation')}}">
.structItemContainer .structItem {
.uix_scootUpLoop(20);
}
</xf:if>
<xf:if is="{{property('uix_messageAnimation')}}">
.block--messages .block-body > .message--post {
.uix_scootUpLoop(20);
}
// ARTICLES LIST
.xpress_articleList .article {
.uix_scootUpLoop(20);
}
</xf:if>
}]]></template>
<template title="uix_socialMedia" type="public" addon_id="ThemeHouse/UIX" version_id="2000792" version_string="2.0.7 Patch Level 2"><![CDATA[<ul class="uix_socialMedia">
<xf:if is="$xf.options.th_facebookUrl_uix">
<li><a target="_blank" href="{$xf.options.th_facebookUrl_uix}">
<i class="mdi mdi-facebook"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_deviantArtUrl_uix">
<li><a target="_blank" href="{$xf.options.th_deviantArtUrl_uix}">
<i class="mdi mdi-deviantart"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_discordUrl_uix">
<li><a target="_blank" href="{$xf.options.th_discordUrl_uix}">
<i class="mdi mdi-discord"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_flickrUrl_uix">
<li><a target="_blank" href="{$xf.options.th_flickrUrl_uix}">
<i class="mdi mdi-flickr"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_gitHubUrl_uix">
<li><a target="_blank" href="{$xf.options.th_gitHubUrl_uix}">
<i class="mdi mdi-github-face"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_googlePlus_uix">
<li><a target="_blank" href="{$xf.options.th_googlePlus_uix}">
<i class="mdi mdi-google-plus"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_instagramUrl_uix">
<li><a target="_blank" href="{$xf.options.th_instagramUrl_uix}">
<i class="mdi mdi-instagram"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_linkedInUrl_uix">
<li><a target="_blank" href="{$xf.options.th_linkedInUrl_uix}">
<i class="mdi mdi-linkedin"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_pinterestUrl_uix">
<li><a target="_blank" href="{$xf.options.th_pinterestUrl_uix}">
<i class="mdi mdi-pinterest"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_redditUrl_uix">
<li><a target="_blank" href="{$xf.options.th_redditUrl_uix}">
<i class="mdi mdi-reddit"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_steamUrl_uix">
<li><a target="_blank" href="{$xf.options.th_steamUrl_uix}">
<i class="mdi mdi-steam"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_tumblrUrl_uix">
<li><a target="_blank" href="{$xf.options.th_tumblrUrl_uix}">
<i class="mdi mdi-tumblr"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_twitchUrl_uix">
<li><a target="_blank" href="{$xf.options.th_twitchUrl_uix}">
<i class="mdi mdi-twitch"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_twitterUrl_uix">
<li><a target="_blank" href="{$xf.options.th_twitterUrl_uix}">
<i class="mdi mdi-twitter"></i>
</a></li>
</xf:if>
<xf:if is="$xf.options.th_youtubeUrl_uix">
<li><a target="_blank" href="{$xf.options.th_youtubeUrl_uix}">
<i class="mdi mdi-youtube"></i>
</a></li>
</xf:if>
</ul>]]></template>
<template title="uix_tabBar" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:macro name="uix_tabBar">
<xf:if is="$xf.visitor.user_id">
<div class="uix_tabBar">
<div class="uix_tabList">
<a href="{{ link('account') }}" class="uix_tabItem">
<xf:macro name="icon" template="uix_icons.less" arg-icon="user" />
<div class="uix_tabLabel">account</div>
</a>
<a href="{{ link('whats-new') }}" class="uix_tabItem">
<xf:macro name="icon" template="uix_icons.less" arg-icon="comment-alert" />
<div class="uix_tabLabel">What's new</div>
</a>
<a href="{{ link('conversations') }}" data-xf-click="overlay" data-badge="{$xf.visitor.conversations_unread|number}" class="uix_tabItem js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="inbox" />
<div class="uix_tabLabel">Inbox</div>
</a>
<a href="{{ link('account/alerts') }}" data-xf-click="overlay" data-badge="{$xf.visitor.alerts_unread|number}" class="uix_tabItem js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unread ? ' badgeContainer--highlighted' : '' }}">
<xf:macro name="icon" template="uix_icons.less" arg-icon="alert" />
<div class="uix_tabLabel">Alerts</div>
</a>
</div>
</div>
</xf:if>
</xf:macro>]]></template>
<template title="uix_welcomeSection" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:macro name="welcomeSection" arg-location="!" arg-contentTemplate="!" arg-showWelcomeSection="{{ false }}">
<xf:if is="$showWelcomeSection">
<xf:if is="$location == property('uix_welcomeSectionLocation')">
<xf:css src="uix_welcomeSection.less" />
<div class="uix_welcomeSection">
<div class="uix_welcomeSection__inner">
<div class="media__container">
<xf:if is="property('uix_welcomeSection__icon')">
<div class="media__object media--left">
<span class="uix_welcomeSection__icon"><i class="uix_icon {{ property('uix_welcomeSection__icon')}}"></i></span>
</div>
</xf:if>
<div class="media__body">
<xf:if is="property('uix_welcomeSection__title')"><div class="uix_welcomeSection__title">{{ property('uix_welcomeSection__title')}}</div></xf:if>
<xf:if is="property('uix_welcomeSection__text')"><div class="uix_welcomeSection__text">{{ property('uix_welcomeSection__text')}}</div></xf:if>
<xf:if is="property('uix_welcomeSection__url')"><xf:button href="{{ link(property('uix_welcomeSection__url')) }}" class="button--cta">{{ property('uix_welcomeSection__buttonText')}}</xf:button></xf:if>
</div>
</div>
</div>
</div>
</xf:if>
</xf:if>
</xf:macro>]]></template>
<template title="uix_welcomeSection.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="{{ property('uix_welcomeSectionLocation') }} == 'header' && {{ property('uix_enableWelcomeHeaderImage')}}">
.uix_hasWelcomeSection .uix_headerContainer {
background-image: @xf-uix_welcomeSection__style--background-image;
.uix_welcomeSection:before {display: none;}
> *:not(.p-navSticky), .p-nav, .p-sectionLinks {
background: none;
background: @xf-uix_welcomeSectionOverlay;
}
}
</xf:if>
.uix_headerContainer {
.uix_welcomeSection {
<xf:if is="property('uix_pageStyle') == 'fixed'">
.m-pageWidth();
</xf:if>
.uix_welcomeSection__inner {
<xf:if is="property('uix_pageStyle') != 'fixed'">
.m-pageWidth();
</xf:if>
}
}
}
.uix_welcomeSection {
position: relative;
.xf-uix_welcomeSection__style();
<xf:if is="property('uix_welcomeSectionLocation') == 'header'">
margin-bottom: 0;
</xf:if>
.uix_welcomeSection__inner {
position: relative;
.xf-uix_welcomeSectionInner();
}
.uix_welcomeSection__title {.xf-uix_welcomeSectionTitle__style();}
.uix_welcomeSection__text{.xf-uix_welcomeSectionText__style();}
.uix_welcomeSection__icon {.xf-uix_welcomeSectionIcon__style();}
&:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: @xf-uix_welcomeSectionOverlay;
}
}]]></template>
<template title="watched_forums_list" type="public" addon_id="XF" version_id="2000051" version_string="2.0.0 Release Candidate 1"><![CDATA[<xf:title>{{ phrase('watched_forums') }}</xf:title>
<xf:css src="node_list.less" />
<xf:if is="$watchedForums is not empty">
<xf:form action="{{ link('watched/forums/update') }}" ajax="true" class="block" autocomplete="off">
<div class="block-outer">
<div class="block-outer-opposite">
<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('manage_watched_forums') }}</xf:button>
<div class="menu" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<h3 class="menu-header">{{ phrase('manage_watched_forums') }}</h3>
<!--[XF:manage_menu:top]-->
<a href="{{ link('watched/forums/manage', null, {'state': 'watch_no_email'}) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('disable_email_notification') }}</a>
<a href="{{ link('watched/forums/manage', null, {'state': 'delete'}) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('stop_watching_forums') }}</a>
<!--[XF:manage_menu:bottom]-->
</div>
</div>
</div>
</div>
<div class="block-container">
<div class="block-body">
<xf:foreach loop="$nodeTree.getFlattened()" key="$id" value="$treeEntry">
<xf:set var="$node" value="{$treeEntry.record}" />
<xf:set var="$forumWatch" value="{$watchedForums.{$node.node_id}}" />
<xf:if is="$forumWatch">
<xf:set var="$bonusInfo">
<ul class="listInline listInline--bullet">
<xf:if is="$forumWatch.notify_on == 'thread'">
<li>{{ phrase('new_threads') }}</li>
<xf:elseif is="$forumWatch.notify_on == 'message'" />
<li>{{ phrase('new_messages') }}</li>
</xf:if>
<xf:if is="$forumWatch.send_alert"><li>{{ phrase('alerts') }}</li></xf:if>
<xf:if is="$forumWatch.send_email"><li>{{ phrase('emails') }}</li></xf:if>
</ul>
</xf:set>
<xf:macro template="node_list_forum" name="forum"
arg-node="{$node}"
arg-extras="{$nodeExtras.{$node.node_id}}"
arg-children="{$nodeTree.{$id}.children}"
arg-childExtras="{$nodeExtras}"
arg-depth="2"
arg-chooseName="node_ids"
arg-bonusInfo="{$bonusInfo}" />
</xf:if>
</xf:foreach>
</div>
<div class="block-footer block-footer--split">
<span class="block-footer-counter"></span>
<span class="block-footer-select"><xf:checkbox standalone="true">
<xf:option class="input--inline" check-all="< .block-container" label="{{ phrase('select_all') }}" />
</xf:checkbox></span>
<span class="block-footer-controls">
<xf:select name="action" class="input--inline">
<xf:option>{{ phrase('with_selected...') }}</xf:option>
<!--[XF:action_menu:top]-->
<xf:option value="email">{{ phrase('enable_email_notification') }}</xf:option>
<xf:option value="no_email">{{ phrase('disable_email_notification') }}</xf:option>
<xf:option value="alert">{{ phrase('enable_alerts') }}</xf:option>
<xf:option value="no_alert">{{ phrase('disable_alerts') }}</xf:option>
<xf:option value="delete">{{ phrase('stop_watching') }}</xf:option>
<!--[XF:action_menu:bottom]-->
</xf:select>
<xf:button type="submit">{{ phrase('go') }}</xf:button>
</span>
</div>
</div>
</xf:form>
<xf:else />
<div class="blockMessage">{{ phrase('you_not_watching_any_forums') }}</div>
</xf:if>]]></template>
<template title="watched_threads_manage" type="public" addon_id="XF" version_id="2000051" version_string="2.0.0 Release Candidate 1"><![CDATA[<xf:title>{{ phrase('manage_watched_threads') }}</xf:title>
<xf:form action="{{ link('watched/threads/manage', null, {'state': $state}) }}" class="block" ajax="true">
<div class="block-container">
<div class="block-row">
<xf:inforow rowtype="confirm">
<xf:if is="$state == 'delete'">
{{ phrase('you_sure_you_want_to_stop_watching_all_threads') }}
<xf:else />
{{ phrase('you_sure_you_want_to_update_notification_settings_for_all_threads') }}
</xf:if>
</xf:inforow>
</div>
<xf:submitrow icon="notificationsOff" rowtype="simple" />
</div>
</xf:form>]]></template>
<template title="widget_EWRporta_features.less" type="public" addon_id="EWR/Porta" version_id="2022" version_string="2.0.2.2"><![CDATA[.porta-features
{
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
position: relative;
.porta-features-item
{
background-position: center center;
background-repeat: no-repeat;
background-size: auto 100%;
>a
{
display: block;
position: relative;
z-index: 90;
}
.porta-features-summary
{
position: absolute; bottom: 0; left: 0; right: 0;
background-color: rgba(0,0,0,0.5);
padding: 15px 20px 20px;
color: white;
>div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title { font-size: 1.5em; font-weight: bold; }
}
.porta-features-media
{
position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 80;
margin: @xf-EWRporta_feature_media_margin auto;
width: @xf-EWRporta_feature_media_width;
height: (@xf-EWRporta_feature_height - (@xf-EWRporta_feature_media_margin * 2));
}
}
.has-media .porta-features-summary { display: none; }
.has-media .bx-controls-volume { display: initial; }
}
.porta-features-fix
{
height: @xf-EWRporta_feature_height;
overflow: hidden;
}
@media (max-width: @xf-responsiveWide)
{
.porta-features-fix { height: @xf-EWRporta_feature_wide; }
.porta-features .porta-features-item .porta-features-media
{
margin: (@xf-EWRporta_feature_media_margin / 2) auto;
width: @xf-EWRporta_feature_media_wide;
height: (@xf-EWRporta_feature_wide - @xf-EWRporta_feature_media_margin);
}
}
@media (max-width: @xf-responsiveMedium)
{
.porta-features-fix { height: @xf-EWRporta_feature_medium; }
.porta-features .porta-features-item .porta-features-media
{
margin: 0 auto;
width: @xf-EWRporta_feature_media_medium;
height: @xf-EWRporta_feature_medium;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.porta-features-fix { height: @xf-EWRporta_feature_narrow; }
.porta-features .porta-features-item .porta-features-media
{
width: @xf-EWRporta_feature_media_narrow;
height: @xf-EWRporta_feature_narrow;
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.porta-features
{
margin-left: -@xf-pageEdgeSpacer / 2;
margin-right: -@xf-pageEdgeSpacer / 2;
}
}
/*---------------------------------------*/
/* BXSLIDER LAYOUT */
/*---------------------------------------*/
/* ITEM CONTROLS */
.porta-features
{
.bx-pager
{
position: absolute;
top: 10px;
text-align: center;
width: 100%;
}
.bx-pager .bx-pager-item { position: relative; z-index: 100; display: inline-block; }
.bx-pager.bx-default-pager a
{
background: rgba(128, 128, 128, 0.5);
margin: 0 3px;
border-radius: 8px;
display: block;
text-indent: -9999px;
box-shadow: 0px 0px 2px #FFF inset;
width: 16px;
height: 16px;
}
.bx-pager.bx-default-pager a:hover
{
background-color: rgb(128, 128, 128);
}
.bx-pager.bx-default-pager a.active
{
background-color: rgb(0, 0, 0);
}
}
/* PREV/NEXT CONTROLS */
.porta-features
{
.bx-controls-direction
{
}
.bx-controls-direction a
{
background-image: url('styles/8wayrun/porta/_slider.png');
background-repeat: no-repeat;
margin-top: -16px;
position: absolute;
text-indent: -9999px;
z-index: 100;
width: 32px;
height: 32px;
}
.bx-controls-direction .bx-prev
{
top: 50%;
left: 10px;
}
.bx-controls-direction .bx-next
{
top: 50%;
right: 10px;
}
.bx-controls-direction .bx-prev { background-position: 0 -32px; }
.bx-controls-direction .bx-prev:hover { background-position: 0 0; }
.bx-controls-direction .bx-next { background-position: -32px -32px; }
.bx-controls-direction .bx-next:hover { background-position: -32px 0; }
.bx-controls-direction .disabled { display: none; }
}
/* START/STOP CONTROLS */
.porta-features
{
.bx-controls-auto
{
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.bx-controls-auto a
{
background-image: url('styles/8wayrun/porta/_slider.png');
background-repeat: no-repeat;
display: block;
text-indent: -9999px;
width: 32px;
height: 32px;
}
.bx-controls-auto .active { display: none; }
.bx-controls-auto .bx-start { background-position: -64px -32px; }
.bx-controls-auto .bx-start:hover { background-position: -64px 0; }
.bx-controls-auto .bx-stop { background-position: -96px -32px; }
.bx-controls-auto .bx-stop:hover { background-position: -96px 0; }
}
/* VOLUME BUTTON */
.porta-features
{
.bx-controls-volume
{
display: none;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 100;
}
.bx-controls-volume a
{
background-image: url('styles/8wayrun/porta/_slider.png');
background-repeat: no-repeat;
display: block;
text-indent: -9999px;
width: 64px;
height: 64px;
}
.bx-controls-volume .active { display: none; }
.bx-controls-volume .bx-unmute { background-position: -128px 0; }
.bx-controls-volume .bx-unmute:hover { background-position: -192px 0; }
.bx-controls-volume .bx-mute { background-position: -192px 0; }
.bx-controls-volume .bx-mute:hover { background-position: -128px 0; }
}
/* PROGRESS BAR */
.porta-features
{
.bx-progress
{
background-color: red;
border-top: 1px solid black;
position: absolute;
bottom: 0;
z-index: 100;
width: 0;
height: 5px;
}
}]]></template>
<template title="xfmg_album_list.less" type="public" addon_id="XFMG" version_id="902000470" version_string="2.0.4"><![CDATA[.itemList-itemTypeIcon
{
&.itemList-itemTypeIcon--album
{
&::after
{
.m-faContent(@fa-var-folder-open);
<xf:macro name="content" template="uix_icons.less" arg-icon="folder" />
}
}
}
{{ include('xfmg_item_list.less') }}]]></template>
<template title="xfmg_album_view" type="public" addon_id="XFMG" version_id="902000570" version_string="2.0.5"><![CDATA[<xf:title page="{$page}">{$album.title}</xf:title>
<xf:h1 hidden="true" />
<xf:css src="xfmg_album_view.less" />
<xf:macro template="xfmg_page_macros" name="xfmg_page_options" arg-album="{$album}" arg-category="{$album.Category}" />
<xf:set var="$descSnippet" value="{{ snippet($mediaItem.description, 250) }}" />
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$descSnippet}"
arg-shareUrl="{{ link('canonical:media/albums', $album) }}"
arg-imageUrl="{$album.getThumbnailUrl(true)}"
arg-canonicalUrl="{{ link('canonical:media/albums', $album, {'page': $page}) }}" />
<xf:page option="ldJsonHtml">
<script type="application/ld+json">
{$album.structured_data|json(true)|raw}
</script>
</xf:page>
<xf:macro template="xfmg_media_list_macros" name="media_create_message"
arg-transcoding="{$transcoding}"
arg-pendingApproval="{$pendingApproval}" />
<xf:breadcrumb source="$album.getBreadcrumbs(false)" />
<xf:if is="$album.canAddMedia()">
<xf:pageaction>
<xf:button href="{{ link('media/albums/add', $album) }}" class="button--cta" icon="add">
{{ phrase('xfmg_add_media') }}
</xf:button>
</xf:pageaction>
</xf:if>
<xf:if contentcheck="true">
<div class="block">
<div class="block-outer">
<dl class="blockStatus">
<dt>{{ phrase('status') }}</dt>
<xf:contentcheck>
<xf:if is="$album.album_state == 'deleted'">
<dd class="blockStatus-message blockStatus-message--deleted">
<xf:macro template="deletion_macros" name="notice" arg-log="{$album.DeletionLog}" />
</dd>
<xf:elseif is="$album.album_state == 'moderated'" />
<dd class="blockStatus-message blockStatus-message--moderated">
{{ phrase('awaiting_approval_before_being_displayed_publicly') }}
</dd>
</xf:if>
<xf:if is="$album.warning_message">
<dd class="blockStatus-message blockStatus-message--warning">
{$album.warning_message}
</dd>
</xf:if>
<xf:if is="$album.isIgnored()">
<div class="blockStatus-message blockStatus-message--ignored">
{{ phrase('you_are_ignoring_content_by_this_member') }}
</div>
</xf:if>
</xf:contentcheck>
</dl>
</div>
</div>
</xf:if>
<xf:if is="$canInlineModMediaItems">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<div class="block" data-xf-init="{{ $canInlineModMediaItems ? 'inline-mod' : '' }}" data-type="xfmg_media" data-href="{{ link('inline-mod') }}">
<div class="block-outer"><xf:trim>
<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$totalItems}"
link="media/albums" data="{$album}" params="{{ {'comment_page': ($commentPage ?: null)} + $filters }}"
wrapperclass="block-outer-main" />
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$album.canRate()">
<xf:button href="{{ link('media/album-ratings/rate', $album) }}" overlay="true">
{{ phrase('leave_rating') }}
</xf:button>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$canInlineModMediaItems">
<xf:macro template="inline_mod_macros" name="button" />
</xf:if>
<xf:if is="$album.canUndelete() AND $album.album_state == 'deleted'">
<xf:button href="{{ link('media/albums/undelete', $album) }}" class="button--link" overlay="true">
{{ phrase('undelete') }}
</xf:button>
</xf:if>
<xf:if is="$album.canApproveUnapprove() AND $album.album_state == 'moderated'">
<xf:button href="{{ link('media/albums/approve', $album) }}" class="button--link" overlay="true">
{{ phrase('approve') }}
</xf:button>
</xf:if>
<xf:if is="$xf.visitor.user_id">
<xf:button href="{{ link('media/albums/mark-viewed', $album, {'date': $xf.time}) }}"
class="button--link" overlay="true">
{{ phrase('xfmg_mark_viewed') }}
</xf:button>
</xf:if>
<xf:if is="$album.canWatch()">
<xf:button href="{{ link('media/albums/watch', $album) }}" class="button--link"
data-xf-click="switch-overlay"
data-sk-watch="{{ phrase('watch') }}"
data-sk-unwatch="{{ phrase('unwatch') }}">
<xf:if is="{$album.Watch.{$xf.visitor.user_id}}">
{{ phrase('unwatch') }}
<xf:else />
{{ phrase('watch') }}
</xf:if>
</xf:button>
</xf:if>
<xf:if contentcheck="true">
<div class="buttonGroup-buttonWrapper">
<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true" title="{{ phrase('more_options') }}">•••</xf:button>
<div class="menu" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<xf:contentcheck>
<!--[XF:album_tools_menu:top]-->
<xf:if is="$album.canEdit()">
<a href="{{ link('media/albums/edit', $album) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_edit_album') }}</a>
</xf:if>
<xf:if is="$album.canMove()">
<a href="{{ link('media/albums/move', $album) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_move_album') }}</a>
</xf:if>
<xf:if is="$album.canDelete('soft')">
<a href="{{ link('media/albums/delete', $album) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_delete_album') }}</a>
</xf:if>
<!--[XF:album_tools_menu:before_footer]-->
<xf:if is="$album.canUseInlineModeration()">
<div class="menu-footer"
data-xf-init="inline-mod"
data-type="xfmg_album"
data-href="{{ link('inline-mod') }}"
data-toggle=".js-albumInlineModToggle">
<xf:checkbox>
<xf:option class="js-albumInlineModToggle" value="{$album.album_id}">{{ phrase('select_for_moderation') }}</xf:option>
</xf:checkbox>
</div>
</xf:if>
<!--[XF:album_tools_menu:bottom]-->
</xf:contentcheck>
</div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:trim></div>
<div class="block-container">
<xf:macro template="xfmg_album_list_macros" name="list_filter_bar"
arg-filters="{{ {'comment_page': ($commentPage ?: null)} + $filters }}"
arg-baseLinkPath="media/albums"
arg-linkData="{$album}"
arg-ownerFilter="{$ownerFilter}" />
<div class="block-body">
<xf:if is="$mediaItems is not empty">
<xf:macro template="xfmg_media_list_macros" name="media_list" arg-mediaItems="{$mediaItems}" />
<xf:elseif is="$filters" />
<div class="block-row">{{ phrase('xfmg_no_media_has_been_added_to_this_album_which_matches_your_filters') }}</div>
<xf:else />
<div class="block-row">{{ phrase('xfmg_no_media_has_been_added_to_this_album_yet') }}</div>
</xf:if>
</div>
</div>
<div class="block-outer block-outer--after">
<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$totalItems}"
link="media/albums" data="{$album}" params="{{ {'comment_page': ($commentPage ?: null)} + $filters }}"
wrapperclass="block-outer-main" />
<xf:showignored wrapperclass="block-outer-opposite" />
</div>
</div>
<div class="block">
<div class="block-container">
<div class="block-body block-row xfmgInfoBlock">
<div class="xfmgInfoBlock-title">
<div class="contentRow">
<span class="contentRow-figure">
<xf:avatar user="$album.User" size="s" defaultname="{$album.username}" />
</span>
<div class="contentRow-main">
<h1 class="contentRow-title p-title-value">
<xf:h1 />
</h1>
<div class="contentRow-lesser p-description">
<ul class="listInline listInline--bullet">
<li><i class="fa fa-th" title="{{ phrase('xfmg_items')|for_attr }}" aria-hidden="true"></i> {$album.media_count|number_short}</li>
<li><i class="fa fa-user" title="{{ phrase('xfmg_album_owner')|for_attr }}" aria-hidden="true"></i> <xf:username user="{$album.User}" defaultname="{$album.username}" class="u-concealed" /></li>
<li><i class="fa fa-clock-o" title="{{ phrase('xfmg_date_created')|for_attr }}" aria-hidden="true"></i> <xf:date time="{$album.create_date}" /></li>
</ul>
</div>
</div>
</div>
</div>
<xf:if is="$album.description">
<div class="xfmgInfoBlock-description">
<div class="bbCodeBlock bbCodeBlock--expandable">
<div class="bbCodeBlock-content">
<div class="bbCodeBlock-expandContent">
{{ structured_text($album.description) }}
</div>
<div class="bbCodeBlock-expandLink"><a>{{ phrase('click_to_expand') }}</a></div>
</div>
</div>
</div>
</xf:if>
<div class="likesBar js-likeList{{ $album.likes ? ' is-active' : '' }}">
<xf:likes content="{$album}" url="{{ link('media/albums/likes', $album) }}" />
</div>
<xf:if contentcheck="true">
<div class="actionBar">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--external">
<xf:contentcheck>
<xf:if is="$album.canLike()">
<a href="{{ link('media/albums/like', $album) }}"
class="actionBar-action actionBar-action--like"
data-xf-click="like"
data-like-list="< .block | .js-likeList">
<xf:if is="$album.isLiked()">{{ phrase('unlike') }}<xf:else />{{ phrase('like') }}</xf:if>
</a>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--internal">
<xf:contentcheck>
<xf:if is="$album.canReport()">
<a href="{{ link('media/albums/report', $album) }}"
class="actionBar-action actionBar-action--report"
data-xf-click="overlay">{{ phrase('report') }}</a>
</xf:if>
<xf:set var="$hasActionBarMenu" value="{{ false }}" />
<xf:if is="$album.canEdit()">
<a href="{{ link('media/albums/edit', $album) }}"
class="actionBar-action actionBar-action--edit actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('edit') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$album.canDelete()">
<a href="{{ link('media/albums/delete', $album) }}"
class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('delete') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$album.canCleanSpam()">
<a href="{{ link('spam-cleaner', $album) }}"
class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('spam') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$xf.visitor.canViewIps() AND $album.ip_id">
<a href="{{ link('media/albums/ip', $album) }}"
class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('ip') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$album.canWarn()">
<a href="{{ link('media/albums/warn', $album) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
<xf:elseif is="$album.warning_id AND $xf.visitor.canViewWarnings()" />
<a href="{{ link('warnings', {'warning_id': $album.warning_id}) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('view_warning') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$hasActionBarMenu">
<a class="actionBar-action actionBar-action--menuTrigger"
data-xf-click="menu"
title="{{ phrase('more_options')|for_attr }}"
role="button"
tabindex="0"
aria-expanded="false"
aria-haspopup="true">•••</a>
<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<div class="js-menuBuilderTarget"></div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</div>
</div>
</div>
<xf:if is="$album.canViewComments()">
<div class="columnContainer">
<div class="columnContainer-comments">
<xf:macro template="xfmg_comment_macros" name="comment_list"
arg-comments="{$comments}"
arg-content="{$album}"
arg-linkPrefix="media/album-comments"
arg-link="media/albums"
arg-linkParams="{{ {'page': $page} + $filters }}"
arg-page="{$commentPage}"
arg-perPage="{$commentsPerPage}"
arg-totalItems="{$totalComments}"
arg-pageParam="comment_page"
arg-canInlineMod="{$canInlineModComments}" />
</div>
<div class="columnContainer-sidebar">
<xf:macro name="info_sidebar" arg-album="{$album}" />
<xf:macro name="privacy_sidebar" arg-album="{$album}" arg-addUsers="{$addUsers}" arg-viewUsers="{$viewUsers}" />
<xf:macro name="share_sidebar" arg-album="{$album}" />
</div>
</div>
<xf:else />
<xf:sidebar key="infoSidebar">
<xf:macro name="info_sidebar" arg-album="{$album}" />
</xf:sidebar>
<xf:sidebar key="privacySidebar">
<xf:macro name="privacy_sidebar" arg-album="{$album}" arg-addUsers="{$addUsers}" arg-viewUsers="{$viewUsers}" />
</xf:sidebar>
<xf:sidebar key="shareSidebar">
<xf:macro name="share_sidebar" arg-album="{$album}" />
</xf:sidebar>
</xf:if>
<xf:macro name="info_sidebar" arg-album="{$album}">
<div class="block">
<div class="block-container">
<h3 class="block-minorHeader">{{ phrase('xfmg_album_information') }}</h3>
<div class="block-body block-row">
<xf:if is="$album.Category">
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_category') }}</dt>
<dd><a href="{{ link('media/categories', $album.Category) }}">{$album.Category.title}</a></dd>
</dl>
</xf:if>
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_album_owner') }}</dt>
<dd><xf:username user="{$album.User}" defaultname="{$album.username}" /></dd>
</dl>
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_date_created') }}</dt>
<dd><xf:date time="{$album.create_date}" /></dd>
</dl>
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_item_count') }}</dt>
<dd>{$album.media_count|number}</dd>
</dl>
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_view_count') }}</dt>
<dd>{$album.view_count|number}</dd>
</dl>
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_comment_count') }}</dt>
<dd>{$album.comment_count|number}</dd>
</dl>
<xf:if is="$album.rating_count">
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_ratings') }}</dt>
<dd>
<a href="{{ link('media/album-ratings/ratings', $album) }}" data-xf-click="overlay">
<xf:if is="$album.rating_count > 1">
{$album.rating_count} ratings
<xf:else />
{$album.rating_count} rating
</xf:if>
</a>
</dd>
</dl>
</xf:if>
<dl class="pairs pairs--justified u-jsOnly">
<xf:if is="$album.canRate()">
<dt>{{ phrase('xfmg_rate_this_media') }}</dt>
<dd>
<xf:macro template="rating_macros" name="rating"
arg-row="{{ false }}"
arg-currentRating="{$album.rating_avg}"
arg-ratingHref="{{ link('media/album-ratings/rate', $album) }}" />
</dd>
<xf:else />
<dt>{{ phrase('xfmg_current_rating') }}</dt>
<dd>
<xf:macro template="rating_macros" name="rating"
arg-row="{{ false }}"
arg-readOnly="true"
arg-currentRating="{$album.rating_avg}" />
</dd>
</xf:if>
</dl>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="privacy_sidebar" arg-album="!" arg-addUsers="!" arg-viewUsers="!">
<xf:if is="$album.User">
<div class="block">
<div class="block-container">
<h3 class="block-minorHeader">{{ phrase('xfmg_album_privacy') }}</h3>
<div class="block-body">
<div class="block-row">
<div class="contentRow">
<div class="contentRow-figure">
<xf:avatar user="$album.User" size="s" />
</div>
<div class="contentRow-main">
<h3 class="contentRow-title"><xf:username user="$album.User" rich="true" /></h3>
<div class="contentRow-muted">
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('xfmg_media_items') }}</dt>
<dd>
<a href="{{ link('media/users', $album.User) }}" class="fauxBlockLink-blockLink u-concealed">
{$album.User.xfmg_media_count|number}
</a>
</dd>
</dl>
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('xfmg_albums') }}</dt>
<dd>
<a href="{{ link('media/albums/users', $album.User) }}" class="fauxBlockLink-blockLink u-concealed">
{$album.User.xfmg_album_count|number}
</a>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="block-row">
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_can_view_media_items') }}</dt>
<dd>{$album.getPrivacyPhrase($album.view_privacy)}</dd>
</dl>
<xf:if is="$album.view_privacy == 'shared' AND $viewUsers">
<ul class="listHeap">
<xf:foreach loop="$viewUsers" value="$user">
<li><xf:avatar user="$user" size="xs" /></li>
</xf:foreach>
</ul>
</xf:if>
</div>
<div class="block-row">
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfmg_can_add_media_items') }}</dt>
<dd>{$album.getPrivacyPhrase($album.add_privacy)}</dd>
</dl>
<xf:if is="$album.add_privacy == 'shared' AND $addUsers">
<ul class="listHeap">
<xf:foreach loop="$addUsers" value="$user">
<li><xf:avatar user="$user" size="xs" /></li>
</xf:foreach>
</ul>
</xf:if>
</div>
</div>
<xf:if is="$album.canChangePrivacy()">
<div class="block-footer">
<span class="block-footer-controls">
<xf:button href="{{ link('media/albums/change-privacy', $album) }}" class="button--small button--link" overlay="true">{{ phrase('xfmg_change_privacy') }}</xf:button>
</span>
</div>
</xf:if>
</div>
</div>
</xf:if>
</xf:macro>
<xf:macro name="share_sidebar" arg-album="!">
<xf:if contentcheck="true">
<div class="block">
<div class="block-container">
<xf:contentcheck>
<xf:if contentcheck="true">
<h3 class="block-minorHeader">{{ phrase('xfmg_share_this_album') }}</h3>
<div class="block-body block-row block-row--separated">
<xf:contentcheck>
<xf:macro template="share_page_macros" name="buttons"
arg-iconic="{{ true }}" />
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="block-body block-row block-row--separated">
<xf:contentcheck>
<xf:if is="$album.thumbnail_date">
<xf:macro template="share_page_macros" name="share_clipboard_input"
arg-label="{{ phrase('xfmg_copy_url_bb_code_with_thumbnail') }}"
arg-text="[URL="{{ link('canonical:media/albums', $album) }}"][IMG]{$album.getThumbnailUrl(true)}[/IMG][/URL]" />
</xf:if>
<xf:macro template="share_page_macros" name="share_clipboard_input"
arg-label="{{ phrase('xfmg_copy_gallery_bb_code') }}"
arg-text="[GALLERY=album, {$album.album_id}][/GALLERY]" />
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:macro>]]></template>
<template title="xfmg_comment_macros" type="public" addon_id="XFMG" version_id="902000570" version_string="2.0.5"><![CDATA[<xf:macro name="comment_list" arg-comments="!" arg-content="!" arg-linkPrefix="!" arg-link="!" arg-linkParams="{{ {} }}" arg-page="!" arg-perPage="!" arg-totalItems="!" arg-pageParam="page" arg-canInlineMod="!">
<xf:if is="$canInlineMod">
<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>
<div class="block block--messages"
data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}"
data-type="xfmg_comment"
data-href="{{ link('inline-mod') }}">
<div class="block-outer"><xf:trim>
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$totalItems}"
link="{$link}" data="{$content}" params="{$linkParams}"
pageparam="{$pageParam}" wrapperclass="block-outer-main" />
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$canInlineMod">
<xf:macro template="inline_mod_macros" name="button" />
</xf:if>
</xf:contentcheck>
</div>
</div>
</xf:if>
</xf:trim></div>
<div class="block-container"
data-xf-init="{{ $xf.options.selectQuotable ? 'select-to-quote' : '' }}"
data-message-selector=".js-comment">
<div class="block-body js-replyNewCommentContainer">
<xf:if is="$comments is not empty">
<span class="u-anchorTarget" id="comments"></span>
<xf:foreach loop="$comments" value="$comment">
<xf:if is="$comment.comment_state == 'deleted'">
<xf:macro name="comment_deleted" arg-comment="{$comment}" arg-content="{$content}" arg-linkPrefix="{$linkPrefix}" />
<xf:else />
<xf:macro name="comment" arg-comment="{$comment}" arg-content="{$content}" arg-linkPrefix="{$linkPrefix}" />
</xf:if>
</xf:foreach>
<xf:else />
<div class="blockMessage js-replyNoMessages">{{ phrase('xfmg_there_no_comments_to_display') }}</div>
</xf:if>
</div>
</div>
<div class="block-outer block-outer--after">
<xf:pagenav
page="{$page}" perpage="{$perPage}" total="{$totalItems}"
link="{$link}" data="{$content}" params="{$linkParams}"
pageparam="{$pageParam}" wrapperclass="block-outer-main" />
<xf:showignored wrapperclass="block-outer-opposite" />
</div>
</div>
<xf:macro name="comment_add" arg-comments="{$comments}" arg-content="{$content}" arg-linkPrefix="{$linkPrefix}" />
</xf:macro>
<xf:macro name="comment" arg-comment="!" arg-content="!" arg-linkPrefix="!">
<xf:css src="xfmg_comment.less" />
<article class="message message--simple message--comment{{ $comment.isIgnored() ? ' is-ignored' : '' }} js-comment js-inlineModContainer"
data-author="{{ $comment.User.username ?: $comment.username }}"
data-content="xfmg-comment-{$comment.comment_id}">
<span class="u-anchorTarget" id="xfmg-comment-{$comment.comment_id}"></span>
<div class="message-inner">
<div class="message-cell message-cell--user">
<xf:macro template="message_macros" name="user_info_simple" arg-user="{$comment.User}" arg-fallbackName="{$comment.username}" />
</div>
<div class="message-cell message-cell--main">
<div class="js-quickEditTarget">
<div class="message-content js-messageContent">
<header class="message-attribution message-attribution--plain">
<ul class="listInline listInline--bullet">
<li class="message-attribution-user">
<xf:avatar user="$comment.User" size="xxs" />
<h4 class="attribution"><xf:username user="$comment.User" rich="true" defaultname="{$comment.username}" /></h4>
</li>
<li>
<a href="{{ link('media/comments', $comment) }}" class="u-concealed"><xf:date time="$comment.comment_date" /></a>
</li>
<xf:if is="$comment.Rating">
<li>
<xf:macro template="rating_macros" name="rating"
arg-row="{{ false }}"
arg-readOnly="true"
arg-currentRating="{$comment.Rating.rating}"
arg-showSelected="false" />
</li>
</xf:if>
</ul>
</header>
<xf:if is="$comment.comment_state == 'deleted'">
<div class="messageNotice messageNotice--deleted">
<xf:macro template="deletion_macros" name="notice" arg-log="{$comment.DeletionLog}" />
</div>
<xf:elseif is="$comment.comment_state == 'moderated'" />
<div class="messageNotice messageNotice--moderated">
{{ phrase('this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal') }}
</div>
</xf:if>
<xf:if is="$comment.warning_message">
<div class="messageNotice messageNotice--warning">
{$comment.warning_message}
</div>
</xf:if>
<xf:if is="$comment.isIgnored()">
<div class="messageNotice messageNotice--ignored">
{{ phrase('you_are_ignoring_content_by_this_member') }}
</div>
</xf:if>
<div class="message-userContent">
<article class="message-body js-selectToQuote">
{{ bb_code($comment.message, 'xfmg_comment', $comment) }}
<div class="js-selectToQuoteEnd"> </div>
</article>
</div>
<xf:if is="$comment.last_edit_date">
<div class="message-lastEdit">
<xf:if is="$comment.user_id == $comment.last_edit_user_id">
{{ phrase('last_edited:') }} <xf:date time="{$comment.last_edit_date}" />
<xf:else />
{{ phrase('last_edited_by_moderator:') }} <xf:date time="{$comment.last_edit_date}" />
</xf:if>
</div>
</xf:if>
<xf:macro template="message_macros" name="signature" arg-user="{$comment.User}" />
</div>
<div class="likesBar js-likeList {{ $comment.likes ? 'is-active' : '' }}">
<xf:likes content="{$comment}" url="{{ link('media/comments/likes', $comment) }}" />
</div>
<footer class="message-footer">
<xf:if contentcheck="true">
<div class="message-actionBar actionBar">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--external">
<xf:contentcheck>
<xf:if is="$comment.canLike()">
<a href="{{ link('media/comments/like', $comment) }}" class="actionBar-action actionBar-action--like" data-xf-click="like" data-like-list="< .js-comment | .js-likeList"><xf:if is="$comment.isLiked()">{{ phrase('unlike') }}<xf:else />{{ phrase('like') }}</xf:if></a>
</xf:if>
<xf:if is="$content.canReplyToComment()">
<xf:set var="$quoteLink">{{ link($linkPrefix . '/comment', $content, {'quote': $comment.comment_id}) }}</xf:set>
<xf:if is="$xf.options.multiQuote">
<a href="{$quoteLink}"
class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
data-message-id="{$comment.comment_id}"
data-mq-action="add">
{{ phrase('quote') }}
</a>
</xf:if>
<a href="{$quoteLink}"
class="actionBar-action actionBar-action--reply"
title="{{ phrase('reply_quoting_this_message')|for_attr }}"
data-xf-click="quote"
data-quote-href="{{ link('media/comments/quote', $comment) }}">{{ phrase('reply') }}</a>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--internal">
<xf:contentcheck>
<xf:if is="$comment.canUseInlineModeration()">
<xf:checkbox standalone="true"><xf:option
labelclass="actionBar-action actionBar-action--inlineMod"
class="js-inlineModToggle"
value="{$comment.comment_id}"
data-xf-init="tooltip"
title="{{ phrase('select_for_moderation') }}" /></xf:checkbox>
</xf:if>
<xf:if is="$comment.canEdit()">
<xf:js src="xf/message.js" min="1" />
<a href="{{ link('media/comments/edit', $comment) }}"
class="actionBar-action actionBar-action--edit"
data-xf-click="quick-edit"
data-editor-target="< .js-quickEditTarget">{{ phrase('edit') }}</a>
</xf:if>
<xf:if is="$comment.edit_count AND $comment.canViewHistory()">
<a href="{{ link('media/comments/history', $comment) }}" class="actionBar-action actionBar-action--history" data-xf-click="toggle" data-target="< .js-comment | .js-historyTarget">{{ phrase('history') }}</a>
</xf:if>
<xf:if is="$comment.canDelete()">
<a href="{{ link('media/comments/delete', $comment) }}" class="actionBar-action actionBar-action--delete" data-xf-click="overlay">{{ phrase('delete') }}</a>
</xf:if>
<xf:if is="$comment.canCleanSpam()">
<a href="{{ link('spam-cleaner', $comment) }}" class="actionBar-action actionBar-action--spam" data-xf-click="overlay">{{ phrase('spam') }}</a>
</xf:if>
<xf:if is="$xf.visitor.canViewIps() AND $comment.ip_id">
<a href="{{ link('media/comments/ip', $comment) }}" class="actionBar-action actionBar-action--ip" data-xf-click="overlay">{{ phrase('ip') }}</a>
</xf:if>
<xf:if is="$comment.canWarn()">
<a href="{{ link('media/comments/warn', $comment) }}" class="actionBar-action actionBar-action--warn">{{ phrase('warn') }}</a>
<xf:elseif is="$comment.warning_id AND $xf.visitor.canViewWarnings()" />
<a href="{{ link('warnings', {'warning_id': $comment.warning_id}) }}" class="actionBar-action actionBar-action--warn" data-xf-click="overlay">{{ phrase('view_warning') }}</a>
</xf:if>
<xf:if is="$comment.canReport()">
<a href="{{ link('media/comments/report', $comment) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report') }}</a>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</footer>
<div class="js-historyTarget toggleTarget" data-href="trigger-href"></div>
</div>
</div>
</div>
</article>
</xf:macro>
<xf:macro name="comment_simple"
arg-comment="!"
arg-content="!">
<div class="contentRow">
<div class="contentRow-figure">
<xf:avatar user="$comment.User" size="xxs" defaultname="{$comment.username}" />
</div>
<div class="contentRow-main contentRow-main--close">
<a href="{{ link('media/comments', $comment) }}">{$content.title}</a>
<div class="contentRow-snippet">
{{ smilie(snippet($comment.message, 150, {'stripBbCode': true, 'stripQuote': true})) }}
</div>
<div class="contentRow-minor contentRow-minor--hideLinks">
<ul class="listInline listInline--bullet">
<li><xf:date time="{$comment.comment_date}" /></li>
</ul>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="comment_deleted" arg-comment="!" arg-content="!" arg-linkPrefix="!">
<xf:css src="xfmg_comment.less" />
<section class="message message--simple message--deleted message--comment{{ $comment.isIgnored() ? ' is-ignored' : '' }} js-comment js-inlineModContainer"
data-author="{{ $comment.User.username ?: $comment.username }}"
data-content="xfmg-comment-{$comment.comment_id}">
<span class="u-anchorTarget" id="xfmg-comment-{$comment.comment_id}"></span>
<div class="message-inner">
<div class="message-cell message-cell--user">
<xf:macro template="message_macros" name="user_info_simple" arg-user="{$comment.User}" arg-fallbackName="{$comment.username}" />
</div>
<div class="message-cell message-cell--main">
<header class="message-attribution message-attribution--plain">
<ul class="listInline listInline--bullet">
<li class="message-attribution-user">
<xf:avatar user="$comment.User" size="xxs" />
<h4 class="attribution"><xf:username user="$comment.User" rich="true" defaultname="{$comment.username}" /></h4>
</li>
<li><xf:date time="$comment.comment_date" /></li>
</ul>
</header>
<div class="messageNotice messageNotice--deleted">
<xf:macro template="deletion_macros" name="notice" arg-log="{$comment.DeletionLog}" />
<a href="{{ link('media/comments/show', $comment) }}" class="u-jsOnly" data-xf-click="inserter" data-replace="[data-content=xfmg-comment-{$comment.comment_id}]">{{ phrase('show...') }}</a>
</div>
</div>
</div>
</section>
</xf:macro>
<xf:macro name="comment_add" arg-comments="!" arg-content="!" arg-linkPrefix="!">
<xf:if is="$content.canAddComment()">
<xf:form action="{{ link($linkPrefix . '/add-comment', $content) }}"
ajax="true"
draft="{{ link($linkPrefix . '/draft', $content) }}"
class="block js-quickReply"
data-xf-init="quick-reply{{ $xf.visitor.isShownCaptcha() ? ' guest-captcha' : '' }}"
data-message-container="< :prev | .js-replyNewCommentContainer"
data-preview-url="{{ link($linkPrefix . '/preview', $content, {'quick_reply': 1}) }}">
<xf:js src="xf/message.js" min="1" />
<xf:set var="$lastPost" value="{$comments|last}" />
<div class="block-container">
<div class="block-body">
<xf:macro template="quick_reply_macros" name="body"
arg-message="{$content.draft_comment.message}"
arg-messageSelector=".js-comment"
arg-supportsMultiQuote="{$xf.options.multiQuote}"
arg-multiQuoteHref="{{ link($linkPrefix . '/multi-quote', $content) }}"
arg-multiQuoteStorageKey="multiQuoteMediaItem"
arg-simple="{{ true }}"
arg-submitText="{{ phrase('post_comment') }}"
arg-lastDate="{$lastPost.comment_date}" />
</div>
</div>
</xf:form>
</xf:if>
</xf:macro>]]></template>
<template title="xfmg_item_list.less" type="public" addon_id="XFMG" version_id="902000570" version_string="2.0.5"><![CDATA[@_stripThumbSize: 50px;
@_thumbSize: xf-option('xfmgThumbnailDimensions.width', px);
.itemList
{
display: flex;
flex-flow: row wrap;
margin: @xf-paddingSmall;
&.itemList--strip
{
justify-content: center;
min-height: @_stripThumbSize + (@xf-paddingSmall * 2);
@media (max-width: @xf-responsiveNarrow)
{
min-height: @_stripThumbSize / 1.3 + (@xf-paddingSmall * 2);
}
@media (max-width: 360px)
{
min-height: @_stripThumbSize / 1.9 + (@xf-paddingSmall * 2);
}
}
&.itemList--slider
{
display: block;
margin: 0;
.itemList-item--slider
{
margin: 0;
display: none;
.lightSlider--loaded &
{
display: block;
}
.itemList-itemTypeIcon
{
display: none;
}
}
}
}
.itemList-item
{
flex: auto;
width: (@_thumbSize) / 1.6;
max-width: @_thumbSize;
margin: @xf-paddingSmall;
position: relative;
overflow: hidden;
.itemList--strip &
{
justify-items: center;
width: (@_stripThumbSize) / 1.6;
max-width: @_stripThumbSize;
margin-top: auto;
margin-bottom: auto;
opacity: 1;
.m-transition(opacity);
&.itemList-item--fading
{
opacity: 0 !important;
}
}
@media (max-width: @xf-responsiveNarrow)
{
width: (@_thumbSize) / 2;
.itemList--strip && // for extra specificity
{
max-width: (@_stripThumbSize) / 1.3;
}
}
@media (max-width: 360px)
{
.itemList--strip &&
{
max-width: (@_stripThumbSize) / 1.9;
}
}
&.itemList-item--placeholder
{
margin-top: 0;
margin-bottom: 0;
height: 0;
.itemList--strip &
{
.xf-contentAltBase();
.xf-blockBorder();
margin-top: inherit;
margin-bottom: inherit;
height: initial;
opacity: 0.7;
}
}
}
.itemList-button
{
.xf-contentAltBase();
.xf-blockBorder();
width: 25px;
border-radius: @xf-borderRadiusMedium;
color: @xf-linkColor;
display: block;
position: relative;
margin: @xf-paddingSmall;
cursor: pointer;
&.is-disabled
{
display: none;
}
&.is-loading
{
.xf-buttonDisabled();
pointer-events: none;
cursor: default;
}
}
.itemList-button-icon
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.m-faBase();
font-size: 1.2em;
.itemList-button--next &
{
&:before
{
.m-faContent(@fa-var-chevron-right, .71em, ltr);
.m-faContent(@fa-var-chevron-left, .71em, rtl);
<xf:macro name="content" template="uix_icons.less" arg-icon="chevron-right" />
}
}
.itemList-button--prev &
{
&:before
{
.m-faContent(@fa-var-chevron-left, .71em, ltr);
.m-faContent(@fa-var-chevron-right, .71em, rtl);
<xf:macro name="content" template="uix_icons.less" arg-icon="chevron-left" />
}
}
}
.itemList-itemTypeIcon
{
position: absolute;
top: @xf-paddingMedium;
right: @xf-paddingMedium;
z-index: @zIndex-1;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.m-textOutline(white, black, thin);
color: #fff;
opacity: 0.6;
.has-touchevents &,
.itemList-item:hover &,
.itemList-item.is-mod-selected &
{
opacity: 1;
}
.m-faBase;
&::after
{
font-size: @xf-fontSizeLargest;
}
}
@_overlayHeight: 52px;
.itemList-itemOverlay
{
width: 100%;
height: @_overlayHeight;
bottom: -@_overlayHeight;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
.m-hiddenLinks();
.m-transition();
padding: 4px;
overflow: hidden;
.has-touchevents &,
.itemList-item:hover &
{
bottom: 0;
}
.itemList-item.is-mod-selected &
{
bottom: 0;
background: @xf-inlineModHighlightColor;
}
a:hover
{
text-decoration: none;
}
}
.itemList-itemOverlayTop
{
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: @zIndex-2;
width: 25px;
height: 25px;
border-radius: @xf-borderRadiusMedium;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
.has-touchevents &,
.itemList-item:hover &
{
opacity: 1;
}
.itemList-item.is-mod-selected &
{
opacity: 1;
background: @xf-inlineModHighlightColor;
&.iconic
{
> input
{
+ i:before
{
color: @xf-textColorDimmed;
}
&:hover
{
+ i:before
{
color: @xf-textColorDimmed;
}
}
}
}
}
&&.iconic
{
> input
{
+ i:before
{
color: #fff;
display: inline;
vertical-align: -0.05em;
}
&:hover
{
+ i:before
{
color: xf-intensify(#fff, 15%);
}
}
}
}
}
.itemInfoRow
{
display: flex;
align-items: center;
.has-no-flexbox &
{
display: table;
width: 100%;
}
}
.itemInfoRow-avatar
{
.has-no-flexbox &
{
display: table-cell;
width: 1%;
vertical-align: middle;
}
white-space: nowrap;
word-wrap: normal;
text-align: center;
}
.itemInfoRow-main
{
flex: 1;
min-width: 0;
vertical-align: top;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
color: #fff;
.itemList-item.is-mod-selected &
{
text-shadow: none;
color: @xf-textColorDimmed;
}
.has-no-flexbox &
{
display: table-cell;
}
&:before
{
// because of line height, there appears to be extra space at the top of this
content: '';
display: block;
margin-top: -.18em;
}
}
.itemInfoRow-title
{
margin: 0;
padding: 0 0 0 @xf-paddingSmall;
font-size: @xf-fontSizeSmall;
font-weight: @xf-fontWeightNormal;
.m-overflowEllipsis();
}
.itemInfoRow-status
{
margin: 0;
padding: 0 0 0 @xf-paddingSmall;
font-size: @xf-fontSizeSmallest;
overflow: hidden;
white-space: nowrap;
}]]></template>
<template title="xfmg_item_view.less" type="public" addon_id="XFMG" version_id="902000570" version_string="2.0.5"><![CDATA[.xfmgInfoBlock-title
{
margin-bottom: @xf-paddingLarge;
}
.xfmgInfoBlock-description
{
margin-bottom: @xf-paddingLarge;
.bbCodeBlock
{
font-size: @xf-fontSizeSmall;
font-style: italic;
}
}
.xfmgInfoBlock-title + .actionBar
{
margin-top: -@xf-paddingLarge;
}
.xfmgInfoBlock .actionBar-set
{
font-size: @xf-fontSizeSmall;
// margin-top: @xf-paddingLarge;
}
.columnContainer
{
display: flex;
}
.columnContainer-comments
{
margin-right: @xf-paddingLarge;
flex: 0 70%;
min-width: 0;
}
.columnContainer-sidebar
{
flex: 0 30%;
min-width: 0;
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.columnContainer
{
.columnContainer-sidebar
{
display: block;
margin-left: 0;
margin-right: 0;
> *
{
margin-left: 0;
margin-right: 0;
min-width: 0;
}
}
}
}
@_columnSidebarWidth: 350px;
@media (max-width: @xf-responsiveWide)
{
.columnContainer
{
display: block;
}
.columnContainer-comments
{
margin-right: 0;
}
.columnContainer-sidebar
{
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: (@xf-elementSpacer) -((@xf-pageEdgeSpacer) / 2) -(@xf-elementSpacer);
width: auto;
> *
{
margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer;
min-width: @_columnSidebarWidth;
flex: 1 1 @_columnSidebarWidth;
&:last-child
{
margin-bottom: @xf-elementSpacer;
}
}
// add an invisible block to ensure that the last row has the correct widths
&:after
{
display: block;
content: '';
height: 0;
margin: 0 ((@xf-pageEdgeSpacer) / 2);
min-width: @_columnSidebarWidth;
flex: 1 1 @_columnSidebarWidth;
}
.block-container
{
display: flex;
flex-direction: column;
height: 100%;
.block-footer
{
margin-top: auto;
}
}
}
}
{{ include('bb_code.less') }}]]></template>
<template title="xfmg_media_add.less" type="public" addon_id="XFMG" version_id="902000470" version_string="2.0.4"><![CDATA[.block
{
&.block--mediaList
{
margin-top: 0;
}
}
.mediaList
{
.m-listPlain();
.m-clearFix();
margin: 4px 0 0;
> li
{
.xf-contentAltBase();
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
margin-bottom: @xf-paddingMedium;
padding: @xf-paddingMedium;
.contentRow-main
{
padding-left: @xf-paddingMedium;
.mediaItem-input
{
border-top: none;
> dt
{
padding: 0;
}
}
}
&:last-child
{
margin-bottom: 0;
}
&.is-uploadError
{
.contentRow-title span // span needed due to opacity creating new stacking context
{
text-decoration: line-through;
opacity: .5;
}
.contentRow-figure
{
opacity: .5;
}
}
}
&.mediaList--buttons
{
> .mediaList-button
{
float: left;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-right: @xf-paddingLarge;
margin-bottom: @xf-paddingMedium;
&:last-child
{
margin-right: 0;
}
&.is-hidden
{
display: none;
}
.mediaList-inner
{
text-align: center;
display: block;
&.mediaList-inner--footer
{
position: absolute;
bottom: 2px;
margin-top: 1px;
}
&::before
{
.m-faBase();
font-size: 45px;
display: block;
}
&--upload::before { .m-faContent(@fa-var-upload); <xf:macro name="content" template="uix_icons.less" arg-icon="upload" />}
&--link::before { .m-faContent(@fa-var-cloud-upload); <xf:macro name="content" template="uix_icons.less" arg-icon="link" />}
&:hover
{
text-decoration: none;
}
}
}
}
}
.mediaList-figure.contentRow-figure
{
width: 100px;
img
{
max-height: 100px;
max-width: 100px;
}
}
.mediaList-placeholder
{
display: block;
width: 100px;
&:before
{
display: inline-block;
.m-faBase();
.m-faContent(@fa-var-camera, 1.08em);
font-size: 60px;
vertical-align: middle;
color: @xf-textColorFeature;
border-radius: 100%;
}
}
.mediaList-progress
{
position: relative;
i
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: @xf-progressBarColor;
color: contrast(@xf-progressBarColor);
border-radius: @xf-borderRadiusMedium;
padding-right: .2em;
text-align: right;
font-style: normal;
white-space: nowrap;
min-width: 2em;
.m-transition(width);
}
}
.mediaList-error
{
color: @xf-textColorAttention;
}
@media (max-width: @xf-responsiveNarrow)
{
.mediaList-figure.contentRow-figure
{
width: 50px;
img
{
max-height: 50px;
max-width: 50px;
}
}
.mediaList-placeholder
{
display: block;
width: 50px;
&:before
{
font-size: 30px;
}
}
}
.typesList
{
.typesList-type
{
.xf-link();
margin-right: @xf-paddingLarge;
&:last-child
{
margin-right: 0;
}
&:hover
{
.xf-linkHover();
text-decoration: none;
}
&::before
{
.m-faBase();
}
&--image::before { .m-faContent(@fa-var-image, 1.08em); <xf:macro name="content" template="uix_icons.less" arg-icon="media" />}
&--video::before { .m-faContent(@fa-var-video-camera, 1em); <xf:macro name="content" template="uix_icons.less" arg-icon="video" />}
&--audio::before { .m-faContent(@fa-var-music, .86em); <xf:macro name="content" template="uix_icons.less" arg-icon="audio" />}
&--embed::before { .m-faContent(@fa-var-cloud-upload, 1.08em); <xf:macro name="content" template="uix_icons.less" arg-icon="link" />}
}
}]]></template>
<template title="xfmg_media_list.less" type="public" addon_id="XFMG" version_id="902000470" version_string="2.0.4"><![CDATA[.itemList-itemTypeIcon
{
&.itemList-itemTypeIcon--image
{
&::after
{
.m-faContent(@fa-var-image);
<xf:macro name="content" template="uix_icons.less" arg-icon="media" />
}
display: none;
}
&.itemList-itemTypeIcon--embed
{
&::after
{
.m-faContent(@fa-var-youtube-play);
<xf:macro name="content" template="uix_icons.less" arg-icon="youtube" />
}
}
&.itemList-itemTypeIcon--video
{
&::after
{
.m-faContent(@fa-var-video-camera);
<xf:macro name="content" template="uix_icons.less" arg-icon="video" />
}
}
&.itemList-itemTypeIcon--audio
{
&::after
{
.m-faContent(@fa-var-music);
<xf:macro name="content" template="uix_icons.less" arg-icon="music" />
}
}
&.itemList-itemTypeIcon--embed
{
&--applemusic
{
&::after { .m-faContent(@fa-var-apple); <xf:macro name="content" template="uix_icons.less" arg-icon="apple" />}
}
&--facebook
{
&::after { .m-faContent(@fa-var-facebook-official); <xf:macro name="content" template="uix_icons.less" arg-icon="facebook" />}
}
&--flickr
{
&::after { .m-faContent(@fa-var-flickr); <xf:macro name="content" template="uix_icons.less" arg-icon="video" />}
}
&--instagram
{
&::after { .m-faContent(@fa-var-instagram); <xf:macro name="content" template="uix_icons.less" arg-icon="instagram" />}
}
&--pinterest
{
&::after { .m-faContent(@fa-var-pinterest-square); <xf:macro name="content" template="uix_icons.less" arg-icon="pinterest" />}
}
&--reddit
{
&::after { .m-faContent(@fa-var-reddit-alien); <xf:macro name="content" template="uix_icons.less" arg-icon="reddit" />}
}
&--soundcloud
{
&::after { .m-faContent(@fa-var-soundcloud); <xf:macro name="content" template="uix_icons.less" arg-icon="soundcloud" />}
}
&--spotify
{
&::after { .m-faContent(@fa-var-spotify); <xf:macro name="content" template="uix_icons.less" arg-icon="spotify" />}
}
&--tumblr
{
&::after { .m-faContent(@fa-var-tumblr-square); <xf:macro name="content" template="uix_icons.less" arg-icon="tumblr" />}
}
&--twitch
{
&::after { .m-faContent(@fa-var-twitch); <xf:macro name="content" template="uix_icons.less" arg-icon="twitch" />}
}
&--twitter
{
&::after { .m-faContent(@fa-var-twitter); <xf:macro name="content" template="uix_icons.less" arg-icon="twitter" />}
}
&--vimeo
{
&::after { .m-faContent(@fa-var-vimeo); <xf:macro name="content" template="uix_icons.less" arg-icon="vimeo" />}
}
&--youtube
{
&::after { .m-faContent(@fa-var-youtube); <xf:macro name="content" template="uix_icons.less" arg-icon="youtube" />}
}
}
}
{{ include('xfmg_item_list.less') }}]]></template>
<template title="xfmg_media_view" type="public" addon_id="XFMG" version_id="902000570" version_string="2.0.5"><![CDATA[<xf:title>{$mediaItem.title}</xf:title>
<xf:h1 hidden="true" />
<xf:css src="xfmg_media_view.less" />
<xf:js prod="xfmg/image_noter-compiled.js" dev="xfmg/vendor/cropper/cropper.js, xfmg/image_noter.js" />
<xf:macro template="xfmg_page_macros" name="xfmg_page_options" arg-album="{$mediaItem.Album}" arg-category="{$mediaItem.Category}" arg-mediaItem="{$mediaItem}" />
<xf:set var="$descSnippet" value="{{ snippet($mediaItem.description, 250) }}" />
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$descSnippet}"
arg-shareUrl="{{ link('canonical:media', $mediaItem) }}"
arg-imageUrl="{$mediaItem.getCurrentThumbnailUrl(true)}"
arg-canonicalUrl="{{ link('canonical:media', $mediaItem, {'page': $page}) }}" />
<xf:page option="ldJsonHtml">
<script type="application/ld+json">
{$mediaItem.structured_data|json(true)|raw}
</script>
</xf:page>
<xf:breadcrumb source="$mediaItem.getBreadcrumbs(false)" />
<xf:macro template="xfmg_media_view_macros" name="media_status" arg-mediaItem="{$mediaItem}" />
<div class="media">
<xf:if is="$filmStripParams.prevItem">
<a href="{{ link('media', $filmStripParams.prevItem) }}" class="media-button media-button--prev" data-xf-key="ArrowLeft"><i class="media-button-icon"></i></a>
</xf:if>
<div class="media-container"
data-xf-init="{{ ($mediaItem.media_type == 'image') ? 'image-noter' : '' }}"
data-toggle-id="#js-noterToggle"
data-edit-url="{{ link('media/note-edit', $mediaItem) }}">
<xf:macro template="xfmg_media_view_macros" name="media_content" arg-mediaItem="{$mediaItem}" arg-mediaNotes="{$mediaNotes}" />
</div>
<xf:if is="$filmStripParams.nextItem">
<a href="{{ link('media', $filmStripParams.nextItem) }}" class="media-button media-button--next" data-xf-key="ArrowRight"><i class="media-button-icon"></i></a>
</xf:if>
</div>
<div class="block js-mediaInfoBlock">
<xf:macro template="xfmg_media_view_macros" name="media_film_strip" arg-mediaItem="{$mediaItem}" arg-filmStripParams="{$filmStripParams}" />
<div class="block-container">
<div class="block-body block-row xfmgInfoBlock">
<div class="xfmgInfoBlock-title">
<div class="contentRow contentRow--alignMiddle">
<span class="contentRow-figure">
<xf:avatar user="$mediaItem.User" size="s" defaultname="{$mediaItem.username}" />
</span>
<div class="contentRow-main">
<h1 class="contentRow-title p-title-value"><xf:h1 /></h1>
<div class="contentRow-lesser p-description">
<ul class="listInline listInline--bullet">
<li><i class="fa fa-user" title="{{ phrase('xfmg_media_owner')|for_attr }}" aria-hidden="true"></i> <xf:username user="{$mediaItem.User}" defaultname="{$mediaItem.username}" class="u-concealed" /></li>
<li><i class="fa fa-clock-o" title="{{ phrase('xfmg_date_added')|for_attr }}" aria-hidden="true"></i> <xf:date time="{$mediaItem.media_date}" /></li>
<xf:if is="$xf.options.enableTagging AND ($mediaItem.canEditTags() OR $mediaItem.tags)">
<li><i class="fa fa-tags" title="{{ phrase('tags')|for_attr }}"></i>
<xf:if is="$mediaItem.tags">
<xf:foreach loop="$mediaItem.tags" value="$tag">
<a href="{{ link('tags', $tag) }}" class="tagItem">{$tag.tag}</a>
</xf:foreach>
<xf:else />
{{ phrase('none') }}
</xf:if>
<xf:if is="$mediaItem.canEditTags()">
<a href="{{ link('media/tags', $mediaItem) }}" data-xf-click="overlay">{{ phrase('edit') }}</a>
</xf:if>
</li>
</xf:if>
</ul>
</div>
</div>
</div>
</div>
<xf:if is="$mediaItem.description">
<div class="xfmgInfoBlock-description">
<div class="bbCodeBlock bbCodeBlock--expandable">
<div class="bbCodeBlock-content">
<div class="bbCodeBlock-expandContent">
{{ structured_text($mediaItem.description) }}
</div>
<div class="bbCodeBlock-expandLink"><a>{{ phrase('click_to_expand') }}</a></div>
</div>
</div>
</div>
</xf:if>
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="xfmgMediaFields"
arg-group="below_media"
arg-onlyInclude="{{ $mediaItem.category_id ? $mediaItem.Category.field_cache : $mediaItem.Album.field_cache }}"
arg-set="{$mediaItem.custom_fields}" />
<div class="likesBar js-likeList{{ $mediaItem.likes ? ' is-active' : '' }}">
<xf:likes content="{$mediaItem}" url="{{ link('media/likes', $mediaItem) }}" />
</div>
<xf:if contentcheck="true">
<div class="actionBar">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--external">
<xf:contentcheck>
<xf:if is="$mediaItem.canLike()">
<a href="{{ link('media/like', $mediaItem) }}"
class="actionBar-action actionBar-action--like"
data-xf-click="like"
data-like-list="< .js-mediaInfoBlock | .js-likeList">
<xf:if is="$mediaItem.isLiked()">{{ phrase('unlike') }}<xf:else />{{ phrase('like') }}</xf:if>
</a>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--internal">
<xf:contentcheck>
<xf:if is="$mediaItem.canReport()">
<a href="{{ link('media/report', $mediaItem) }}"
class="actionBar-action actionBar-action--report"
data-xf-click="overlay">{{ phrase('report') }}</a>
</xf:if>
<xf:set var="$hasActionBarMenu" value="{{ false }}" />
<xf:if is="$mediaItem.canEdit()">
<a href="{{ link('media/edit', $mediaItem) }}"
class="actionBar-action actionBar-action--edit actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('edit') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$mediaItem.canDelete()">
<a href="{{ link('media/delete', $mediaItem) }}"
class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('delete') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$mediaItem.canCleanSpam()">
<a href="{{ link('spam-cleaner', $mediaItem) }}"
class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('spam') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$xf.visitor.canViewIps() AND $mediaItem.ip_id">
<a href="{{ link('media/ip', $mediaItem) }}"
class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('ip') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$mediaItem.canWarn()">
<a href="{{ link('media/warn', $mediaItem) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
<xf:elseif is="$mediaItem.warning_id AND $xf.visitor.canViewWarnings()" />
<a href="{{ link('warnings', {'warning_id': $mediaItem.warning_id}) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('view_warning') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$hasActionBarMenu">
<a class="actionBar-action actionBar-action--menuTrigger"
data-xf-click="menu"
title="{{ phrase('more_options')|for_attr }}"
role="button"
tabindex="0"
aria-expanded="false"
aria-haspopup="true">•••</a>
<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<div class="js-menuBuilderTarget"></div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</div>
</div>
<div class="block-outer block-outer--after">
<xf:if contentcheck="true">
<div class="block-outer-opposite">
<xf:contentcheck>
<xf:if is="$mediaItem.canRate()">
<xf:button href="{{ link('media/media-ratings/rate', $mediaItem) }}" overlay="true">
{{ phrase('leave_rating') }}
</xf:button>
</xf:if>
<xf:if is="$mediaItem.canAddNote()">
<xf:button id="js-noterToggle" class="button--icon"
data-active-label="{{ phrase('xfmg_stop_adding_note_tag') }}"
data-active-icon="cancel"
data-active-message="{{ phrase('xfmg_note_tag_mode_activated') }}"
data-inactive-label="{{ phrase('xfmg_add_note_tag') }}"
data-inactive-icon=""
data-inactive-message="{{ phrase('xfmg_note_tag_mode_deactivated') }}">
{{ phrase('xfmg_add_note_tag') }}
</xf:button>
</xf:if>
<xf:if contentcheck="true">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$mediaItem.canUndelete() AND $mediaItem.media_state == 'deleted'">
<xf:button href="{{ link('media/undelete', $mediaItem) }}" class="button--link" overlay="true">
{{ phrase('undelete') }}
</xf:button>
</xf:if>
<xf:if is="$mediaItem.canApproveUnapprove() AND $mediaItem.media_state == 'moderated'">
<xf:button href="{{ link('media/approve', $mediaItem) }}" class="button--link" overlay="true">
{{ phrase('approve') }}
</xf:button>
</xf:if>
<xf:if is="$mediaItem.canWatch()">
<xf:button href="{{ link('media/watch', $mediaItem) }}" class="button--link"
data-xf-click="switch-overlay"
data-sk-watch="{{ phrase('watch') }}"
data-sk-unwatch="{{ phrase('unwatch') }}">
<xf:if is="{$mediaItem.Watch.{$xf.visitor.user_id}}">
{{ phrase('unwatch') }}
<xf:else />
{{ phrase('watch') }}
</xf:if>
</xf:button>
</xf:if>
<xf:if contentcheck="true">
<div class="buttonGroup-buttonWrapper">
<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true" title="{{ phrase('more_options') }}">•••</xf:button>
<div class="menu" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<xf:contentcheck>
<!--[XF:media_tools_menu:top]-->
<xf:if is="$mediaItem.canSetAsAvatar()">
<a href="{{ link('media/set-as-avatar', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">
{{ phrase('xfmg_set_as_avatar') }}
</a>
<xf:if is="$avatarUpdated">
<a href="{{ link('account/avatar') }}" data-xf-click="overlay" data-load-auto-click="true" style="display: none"></a>
</xf:if>
</xf:if>
<xf:if is="$mediaItem.canEdit()">
<a href="{{ link('media/edit', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_edit_media_item') }}</a>
</xf:if>
<xf:if is="$mediaItem.canEditImage()">
<a href="{{ link('media/edit-image', $mediaItem) }}" class="menu-linkRow">{{ phrase('xfmg_edit_image') }}</a>
</xf:if>
<xf:if is="$mediaItem.canChangeThumbnail()">
<a href="{{ link('media/change-thumbnail', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_change_thumbnail') }}</a>
</xf:if>
<xf:if is="$mediaItem.canMove()">
<a href="{{ link('media/move', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_move_media_item') }}</a>
</xf:if>
<xf:if is="$mediaItem.canDelete('soft')">
<a href="{{ link('media/delete', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_delete_media_item') }}</a>
</xf:if>
<!--[XF:media_tools_menu:before_footer]-->
<xf:if is="$mediaItem.canUseInlineModeration()">
<xf:js src="xf/inline_mod.js" min="1" />
<div class="menu-footer"
data-xf-init="inline-mod"
data-type="xfmg_media"
data-href="{{ link('inline-mod') }}"
data-toggle=".js-mediaInlineModToggle">
<xf:checkbox>
<xf:option class="js-mediaInlineModToggle" value="{$mediaItem.media_id}">{{ phrase('select_for_moderation') }}</xf:option>
</xf:checkbox>
</div>
</xf:if>
<!--[XF:media_tools_menu:bottom]-->
</xf:contentcheck>
</div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</div>
</div>
<xf:if is="$mediaItem.canViewComments()">
<div class="columnContainer">
<div class="columnContainer-comments">
<xf:macro template="xfmg_comment_macros" name="comment_list"
arg-comments="{$comments}"
arg-content="{$mediaItem}"
arg-linkPrefix="media/media-comments"
arg-link="media"
arg-page="{$page}"
arg-perPage="{$perPage}"
arg-totalItems="{$totalItems}"
arg-canInlineMod="{$canInlineModComments}" />
</div>
<div class="columnContainer-sidebar">
<xf:macro template="xfmg_media_view_macros" name="info_sidebar" arg-mediaItem="{$mediaItem}" />
<xf:macro template="xfmg_media_view_macros" name="extra_info_sidebar" arg-mediaItem="{$mediaItem}" />
<xf:macro template="xfmg_media_view_macros" name="additional_sidebar" arg-mediaItem="{$mediaItem}" />
<xf:macro template="xfmg_media_view_macros" name="exif_sidebar" arg-mediaItem="{$mediaItem}" />
<xf:macro template="xfmg_media_view_macros" name="user_tags_sidebar" arg-mediaNotes="{$mediaNotes}" />
<xf:macro template="xfmg_media_view_macros" name="share_sidebar" arg-mediaItem="{$mediaItem}" />
</div>
</div>
<xf:else />
<xf:sidebar key="infoSidebar">
<xf:macro template="xfmg_media_view_macros" name="info_sidebar" arg-mediaItem="{$mediaItem}" />
</xf:sidebar>
<xf:sidebar key="extraInfoSidebar">
<xf:macro template="xfmg_media_view_macros" name="extra_info_sidebar" arg-mediaItem="{$mediaItem}" />
</xf:sidebar>
<xf:sidebar key="additionalSidebar">
<xf:macro template="xfmg_media_view_macros" name="additional_sidebar" arg-mediaItem="{$mediaItem}" />
</xf:sidebar>
<xf:sidebar key="exifSidebar">
<xf:macro template="xfmg_media_view_macros" name="exif_sidebar" arg-mediaItem="{$mediaItem}" />
</xf:sidebar>
<xf:sidebar key="userTagsSidebar">
<xf:macro template="xfmg_media_view_macros" name="user_tags_sidebar" arg-mediaNotes="{$mediaNotes}" />
</xf:sidebar>
<xf:sidebar key="shareSidebar">
<xf:macro template="xfmg_media_view_macros" name="share_sidebar" arg-mediaItem="{$mediaItem}" />
</xf:sidebar>
</xf:if>]]></template>
<template title="xfmg_media_view.less" type="public" addon_id="XFMG" version_id="902000470" version_string="2.0.4"><![CDATA[.media
{
position: relative;
margin-bottom: 10px;
}
@_buttonWidth: 30px;
@_buttonHeight: 50px;
.media-button
{
position: absolute;
top: ~"calc(50% - "(@_buttonHeight / 2) + 2~")";
z-index: @zIndex-1;
width: @_buttonWidth;
height: @_buttonHeight;
background: fade(mix(@xf-paletteNeutral2, @xf-paletteNeutral3), 70%);
border-radius: @xf-borderRadiusMedium;
opacity: 0.2;
.m-transition(opacity);
cursor: pointer;
.has-touchevents &,
.media:hover &
{
opacity: 0.6;
}
&&:hover
{
text-decoration: none;
opacity: 1;
}
.media-button-icon
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
.m-textOutline(white, black);
.m-faBase();
font-size: 1.75em;
}
&.media-button--next
{
right: 5px;
.media-button-icon
{
&:before
{
.m-faContent(@fa-var-chevron-right, .71em, ltr);
.m-faContent(@fa-var-chevron-left, .71em, rtl);
<xf:macro name="content" template="uix_icons.less" arg-icon="chevron-right" />
}
}
}
&.media-button--prev
{
left: 5px;
.media-button-icon
{
&:before
{
.m-faContent(@fa-var-chevron-left, .71em, ltr);
.m-faContent(@fa-var-chevron-right, .71em, rtl);
<xf:macro name="content" template="uix_icons.less" arg-icon="chevron-left" />
}
}
}
}
.media-container
{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid transparent;
min-height: @_buttonHeight;
img
{
max-width: 100%;
max-height: 80vh;
}
.bbWrapper
{
width: 100%;
text-align: center;
}
.bbMediaWrapper
{
width: 100%;
text-align: center; // helps center some embeds
.bbMediaWrapper-inner
{
&.bbMediaWrapper-inner--thumbnail
{
padding-bottom: xf-option('xfmgThumbnailDimensions.width', px);
.video-js
{
&.vjs-audio
{
margin: 0;
}
}
}
}
}
.video-js
{
&audio, &video
{
display: none;
}
&.vjs-audio
{
border: none;
margin: 0 (@_buttonWidth * 2);
}
}
.fb-video
{
iframe
{
background-color: @xf-contentBg;
}
}
.fb_iframe_widget
{
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.media-container
{
margin-left: -@xf-pageEdgeSpacer;
margin-right: -@xf-pageEdgeSpacer;
}
}
{{ include('xfmg_media_note.less') }}
{{ include('xfmg_cropper.less') }}
{{ include('xfmg_item_view.less') }}]]></template>
<template title="xfrm_category_list_macros" type="public" addon_id="XFRM" version_id="2000370" version_string="2.0.3"><![CDATA[<xf:macro name="simple_category_list"
arg-selected="0"
arg-pathToSelected="{{ [] }}"
arg-children="!"
arg-extras="!"
arg-isActive="{{ false }}"
>
<ol class="categoryList toggleTarget{{ $isActive ? ' is-active' : '' }}">
<xf:foreach loop="$children" key="$id" value="$child">
<xf:macro name="simple_category_list_item"
arg-selected="{$selected}"
arg-pathToSelected="{$pathToSelected}"
arg-category="{$child.record}"
arg-extras="{$extras.{$id}}"
arg-children="{$child}"
arg-childExtras="{$extras}"
/>
</xf:foreach>
</ol>
</xf:macro>
<xf:macro name="simple_category_list_item"
arg-selected="!"
arg-pathToSelected="{{ [] }}"
arg-category="!"
arg-extras="!"
arg-children="!"
arg-childExtras="!"
>
<xf:set var="$isSelected" value="{{ $category.resource_category_id == $selected }}" />
<xf:set var="$hasPathToSelected" value="{$pathToSelected.{$category.resource_category_id}}" />
<xf:set var="$isActive" value="{{ $isSelected OR $hasPathToSelected AND $children is not empty }}" />
<li class="categoryList-item">
<div class="categoryList-itemRow">
<xf:if is="$children is not empty">
<a class="categoryList-toggler{{ $isActive ? ' is-active' : '' }}"
data-xf-click="toggle" data-target="< :up :next"
role="button" tabindex="0" aria-label="{{ phrase('toggle_expanded') }}"
></a>
<xf:else />
<span class="categoryList-togglerSpacer"></span>
</xf:if>
<a href="{{ link('resources/categories', $category) }}" class="categoryList-link{{ $isSelected ? ' is-selected' : '' }}">
{$category.title}
</a>
<span class="categoryList-label">
<span class="label label--subtle label--smallest">{$extras.resource_count|number_short}</span>
</span>
</div>
<xf:if is="$children is not empty">
<xf:macro name="simple_category_list"
arg-selected="{$selected}"
arg-pathToSelected="{$pathToSelected}"
arg-children="{$children}"
arg-extras="{$childExtras}"
arg-isActive="{$isActive}"
/>
</xf:if>
</li>
</xf:macro>
<xf:macro name="simple_list_block" arg-categoryTree="!" arg-categoryExtras="!" arg-selected="{{ 0 }}">
<div class="block">
<div class="block-container">
<h3 class="block-minorHeader">{{ phrase('categories') }}</h3>
<div class="block-body">
<xf:if is="$categoryTree.count()">
<xf:macro name="simple_category_list"
arg-children="{$categoryTree}"
arg-extras="{$categoryExtras}"
arg-isActive="{{ true }}"
arg-selected="{$selected}"
arg-pathToSelected="{{ $selected ? $categoryTree.getPathTo($selected) : [] }}" />
<xf:else />
<div class="block-row">{{ phrase('n_a') }}</div>
</xf:if>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="category"
arg-category="!"
arg-extras="!"
arg-children="!"
arg-childExtras="!"
arg-chooseName=""
arg-bonusInfo="">
<div class="node node--depth2 node--resourceCategory node--resourceCategory{$category.resource_category_id}">
<div class="node-body">
<div class="node-main js-nodeMain">
<xf:if is="$chooseName">
<xf:checkbox standalone="true">
<xf:option labelclass="u-pullRight" class="js-chooseItem" name="{$chooseName}[]" value="{$category.resource_category_id}" />
</xf:checkbox>
</xf:if>
<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
<h3 class="node-title">
<a href="{{ link('resources/categories', $category) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$category.title}</a>
</h3>
<xf:if is="$descriptionDisplay != 'none' && $category.description">
<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$category.description|raw}</div>
</xf:if>
<div class="node-meta">
<div class="node-statsMeta">
<dl class="pairs pairs--inline">
<dt>{{ phrase('xfrm_resources') }}</dt>
<dd>{$extras.resource_count|number}</dd>
</dl>
</div>
</div>
<xf:if is="$bonusInfo is not empty">
<div class="node-bonus">{$bonusInfo}</div>
</xf:if>
</div>
<div class="node-stats node-stats--single">
<dl class="pairs pairs--rows">
<dt>{{ phrase('xfrm_resources') }}</dt>
<dd>{$extras.resource_count|number}</dd>
</dl>
</div>
<div class="node-extra">
<xf:if is="{$extras.last_update}">
<div class="node-extra-row"><a href="{{ link('resources', {'resource_id': $extras.last_resource_id}) }}" class="node-extra-title" title="{$extras.last_resource_title}">{$extras.last_resource_title}</a></div>
<div class="node-extra-row">
<xf:date time="{$extras.last_update}" class="node-extra-date" />
</div>
<xf:else />
<span class="node-extra-placeholder">{{ phrase('none') }}</span>
</xf:if>
</div>
</div>
</div>
</xf:macro>]]></template>
<template title="xfrm_resource_update_macros" type="public" addon_id="XFRM" version_id="2000470" version_string="2.0.4"><![CDATA[<xf:macro name="resource_update" arg-update="!" arg-resource="!">
<xf:css src="message.less" />
<div class="message message--simple js-resourceUpdate" id="js-resourceUpdate-{$update.resource_update_id}">
<span class="u-anchorTarget" id="resource-update-{$update.resource_update_id}"></span>
<div class="message-inner">
<div class="message-cell message-cell--main">
<div class="js-quickEditTarget">
<div class="message-content js-messageContent">
<div class="message-attribution">
<h2 class="message-attribution-main block-textHeader">
<a href="{{ link('resources/update', $update) }}" class="u-concealed" rel="nofollow">{$update.title}</a>
</h2>
<span class="message-attribution-opposite">
<a href="{{ link('resources/update', $update) }}" class="u-concealed" rel="nofollow"><xf:date time="{$update.post_date}" /></a>
</span>
</div>
<xf:if is="$update.message_state == 'deleted'">
<div class="messageNotice messageNotice--deleted">
<xf:macro template="deletion_macros" name="notice" arg-log="{$update.DeletionLog}" />
</div>
<xf:elseif is="$update.message_state == 'moderated'" />
<div class="messageNotice messageNotice--moderated">
{{ phrase('this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal') }}
</div>
</xf:if>
<xf:if is="$update.warning_message">
<div class="messageNotice messageNotice--warning">
{$update.warning_message}
</div>
</xf:if>
<div class="message-userContent lbContainer js-lbContainer"
data-lb-id="resource_update-{$update.resource_update_id}"
data-lb-caption-desc="{{ $resource.User ? $resource.User.username : $resource.username }} · {{ date_time($update.post_date) }}">
<blockquote class="message-body">
{{ bb_code($update.message, 'resource_update', $update) }}
</blockquote>
<xf:if is="$update.attach_count">
<xf:macro template="message_macros" name="attachments"
arg-attachments="{$update.Attachments}"
arg-message="{$update}"
arg-canView="{{ $resource.canViewUpdateImages() }}" />
</xf:if>
</div>
<div class="likesBar js-likeList {{ $update.likes ? 'is-active' : '' }}">
<xf:likes content="{$update}" url="{{ link('resources/update/likes', $update) }}" />
</div>
<xf:if contentcheck="true">
<div class="message-actionBar actionBar">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--external">
<xf:contentcheck>
<xf:if is="$update.canLike()">
<a href="{{ link('resources/update/like', $update) }}"
class="actionBar-action actionBar-action--like"
data-xf-click="like"
data-like-list="< .js-resourceUpdate | .js-likeList"><xf:if is="$update.isLiked()">{{ phrase('unlike') }}<xf:else />{{ phrase('like') }}</xf:if></a>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--internal">
<xf:contentcheck>
<xf:if is="$update.canReport()">
<a href="{{ link('resources/update/report', $update) }}"
class="actionBar-action actionBar-action--report"
data-xf-click="overlay">{{ phrase('report') }}</a>
</xf:if>
<xf:set var="$hasActionBarMenu" value="{{ false }}" />
<xf:if is="$update.canEdit()">
<xf:js src="xf/message.js" min="1" />
<a href="{{ link('resources/update/edit', $update) }}"
class="actionBar-action actionBar-action--edit actionBar-action--menuItem"
data-xf-click="quick-edit"
data-editor-target="#js-resourceUpdate-{$update.resource_update_id} .js-quickEditTarget"
data-menu-closer="true">{{ phrase('edit') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$update.canDelete('soft')">
<a href="{{ link('resources/update/delete', $update) }}"
class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('delete') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$update.message_state == 'deleted' AND $update.canUndelete()">
<a href="{{ link('resources/update/undelete', $update, {'t': csrf_token()}) }}"
class="actionBar-action actionBar-action--undelete actionBar-action--menuItem">{{ phrase('undelete') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$xf.visitor.canViewIps() && $update.ip_id">
<a href="{{ link('resources/update/ip', $update) }}"
class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('ip') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$update.canWarn()">
<a href="{{ link('resources/update/warn', $update) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
<xf:elseif is="$update.warning_id && $xf.visitor.canViewWarnings()" />
<a href="{{ link('warnings', {'warning_id': $update.warning_id}) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('view_warning') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$update.canApproveUnapprove()">
<xf:if is="$update.message_state == 'moderated'">
<a href="{{ link('resources/update/approve', $update, {'t': csrf_token()}) }}"
class="actionBar-action actionBar-action--approve actionBar-action--menuItem">{{ phrase('approve') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
<xf:elseif is="$update.message_state == 'visible'" />
<a href="{{ link('resources/update/unapprove', $update, {'t': csrf_token()}) }}"
class="actionBar-action actionBar-action--unapprove actionBar-action--menuItem">{{ phrase('unapprove') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
</xf:if>
<xf:if is="$hasActionBarMenu">
<a class="actionBar-action actionBar-action--menuTrigger"
data-xf-click="menu"
title="{{ phrase('more_options')|for_attr }}"
role="button"
tabindex="0"
aria-expanded="false"
aria-haspopup="true">•••</a>
<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<div class="js-menuBuilderTarget"></div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<div class="js-historyTarget toggleTarget" data-href="trigger-href"></div>
</div>
</div>
</div>
</div>
</div>
</xf:macro>]]></template>
<template title="xfrm_resource_view" type="public" addon_id="XFRM" version_id="2000470" version_string="2.0.4"><![CDATA[<xf:title>{{ prefix('resource', $resource, 'escaped') }}{$resource.title}</xf:title>
<xf:set var="$descSnippet" value="{{ snippet($description.message, 250, {'stripBbCode': true}) }}" />
<xf:macro template="metadata_macros" name="metadata"
arg-description="{$descSnippet}"
arg-shareUrl="{{ link('canonical:resources', $resource) }}"
arg-canonicalUrl="{{ link('canonical:resources', $resource) }}" />
<xf:page option="ldJsonHtml">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CreativeWork",
"@id": "{{ link('canonical:resources', $resource)|escape('json') }}",
"headline": "{$resource.title|escape('json')}",
"alternativeHeadline": "{$resource.tag_line|escape('json')}",
"description": "{$descSnippet|escape('json')}",
<xf:if is="$resource.isVersioned()">
"version": "{$resource.CurrentVersion.version_string|escape('json')}",
</xf:if>
<xf:if is="$xf.options.xfrmAllowIcons AND $resource.icon_date">
"thumbnailUrl": "{{ resource_icon($resource, 's')|escape('json') }}",
</xf:if>
"dateCreated": "{{ date($resource.resource_date, 'c')|escape('json') }}",
"dateModified": "{{ date($resource.last_update, 'c')|escape('json') }}",
<xf:if is="$resource.rating_count">"aggregateRating": {
"@type": "AggregateRating",
"ratingCount": "{$resource.rating_count|escape('json')}",
"ratingValue": "{$resource.rating_avg|escape('json')}"
},</xf:if>
<xf:if is="$resource.hasViewableDiscussion()">
"discussionUrl": "{{ link('canonical:threads', $resource.Discussion)|escape('json') }}",
</xf:if>
"author": {
"@type": "Person",
"name": "{{ ($resource.User ? $resource.User.username : $resource.username)|escape('json') }}"
}
}
</script>
</xf:page>
<xf:if is="$iconError">
<div class="blockMessage blockMessage--error">{{ phrase('xfrm_new_icon_could_not_be_applied_try_later') }}</div>
</xf:if>
<xf:wrap template="xfrm_resource_wrapper">
<xf:set var="$pageSelected" value="overview" />
</xf:wrap>
<xf:macro template="lightbox_macros" name="setup" arg-canViewAttachments="{{ $resource.canViewUpdateImages() }}" />
<div class="block">
<xf:if contentcheck="true">
<div class="block-outer">
<div class="block-outer-opposite">
<xf:contentcheck>
<xf:macro template="xfrm_resource_wrapper_macros" name="action_buttons" arg-resource="{$resource}" />
</xf:contentcheck>
</div>
</div>
</xf:if>
<div class="block-container">
<div class="block-body lbContainer js-resourceBody"
data-xf-init="lightbox"
data-lb-id="resource-{$resource.resource_id}"
data-lb-caption-desc="{{ $resource.User ? $resource.User.username : $resource.username }} · {{ date_time($resource.resource_date) }}">
<div class="resourceBody">
<article class="resourceBody-main js-lbContainer">
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="resources"
arg-group="above_info"
arg-onlyInclude="{$category.field_cache}"
arg-set="{$resource.custom_fields}"
arg-wrapperClass="resourceBody-fields resourceBody-fields--before" />
<xf:if is="$trimmedDescription">
{{ bb_code($trimmedDescription, 'resource_update', $description) }}
<div class="block-rowMessage block-rowMessage--important">
{{ phrase('xfrm_do_not_have_permission_to_view_full_content_of_this_resource') }}
<xf:if is="!$xf.visitor.user_id">
<a href="{{ link('login') }}" data-xf-click="overlay">{{ phrase('log_in_or_register_now') }}</a>
</xf:if>
</div>
<xf:else />
{{ bb_code($description.message, 'resource_update', $description) }}
</xf:if>
<xf:macro template="custom_fields_macros" name="custom_fields_view"
arg-type="resources"
arg-group="below_info"
arg-onlyInclude="{$category.field_cache}"
arg-set="{$resource.custom_fields}"
arg-wrapperClass="resourceBody-fields resourceBody-fields--after" />
<xf:if is="$description.attach_count">
<xf:if contentcheck="true">
<xf:css src="attachments.less" />
<ul class="attachmentList resourceBody-attachments">
<xf:contentcheck>
<xf:foreach loop="$description.Attachments" value="$attachment" if="!$description.isAttachmentEmbedded($attachment)">
<xf:macro template="attachment_macros" name="attachment_list_item"
arg-attachment="{$attachment}"
arg-canView="{{ $resource.canViewUpdateImages() }}" />
</xf:foreach>
</xf:contentcheck>
</ul>
</xf:if>
</xf:if>
<div class="likesBar js-likeList {{ $description.likes ? 'is-active' : '' }}">
<xf:likes content="{$description}" url="{{ link('resources/update/likes', $description) }}" />
</div>
<xf:if contentcheck="true">
<div class="actionBar">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--external">
<xf:contentcheck>
<xf:if is="$description.canLike()">
<a href="{{ link('resources/update/like', $description) }}" class="actionBar-action actionBar-action--like" data-xf-click="like" data-like-list="< .js-resourceBody | .js-likeList"><xf:if is="$description.isLiked()">{{ phrase('unlike') }}<xf:else />{{ phrase('like') }}</xf:if></a>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="actionBar-set actionBar-set--internal">
<xf:contentcheck>
<xf:if is="$description.canReport()">
<a href="{{ link('resources/update/report', $description) }}"
class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report') }}</a>
</xf:if>
<xf:set var="$hasActionBarMenu" value="{{ false }}" />
<xf:if is="$resource.canEdit()">
<a href="{{ link('resources/edit', $resource) }}"
class="actionBar-action actionBar-action--edit actionBar-action--menuItem">{{ phrase('edit') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$description.canDelete('soft')">
<a href="{{ link('resources/delete', $description) }}"
class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('delete') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$xf.visitor.canViewIps() && $description.ip_id">
<a href="{{ link('resources/update/ip', $description) }}"
class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('ip') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$description.canWarn()">
<a href="{{ link('resources/update/warn', $description) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
<xf:elseif is="$description.warning_id && $xf.visitor.canViewWarnings()" />
<a href="{{ link('warnings', {'warning_id': $description.warning_id}) }}"
class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
data-xf-click="overlay">{{ phrase('view_warning') }}</a>
<xf:set var="$hasActionBarMenu" value="{{ true }}" />
</xf:if>
<xf:if is="$hasActionBarMenu">
<a class="actionBar-action actionBar-action--menuTrigger"
data-xf-click="menu"
title="{{ phrase('more_options') }}"
role="button"
tabindex="0"
aria-expanded="false"
aria-haspopup="true">•••</a>
<div class="menu" data-menu="menu" aria-hidden="true" data-menu-builder="actionBar">
<div class="menu-content">
<h4 class="menu-header">{{ phrase('more_options') }}</h4>
<div class="js-menuBuilderTarget"></div>
</div>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<div class="js-historyTarget toggleTarget" data-href="trigger-href"></div>
</article>
<div class="resourceBody-sidebar">
<div class="resourceSidebarGroup">
<dl class="pairs pairs--justified">
<dt>{{ phrase('author') }}</dt>
<dd><xf:username user="{$resource.User}" defaultname="{$resource.username}" /></dd>
</dl>
<xf:if is="$resource.isDownloadable()">
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfrm_downloads') }}</dt>
<dd>{$resource.download_count|number}</dd>
</dl>
</xf:if>
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfrm_first_release') }}</dt>
<dd><xf:date time="{$resource.resource_date}" /></dd>
</dl>
<dl class="pairs pairs--justified">
<dt>{{ phrase('xfrm_last_update') }}</dt>
<dd><xf:date time="{$resource.last_update}" /></dd>
</dl>
<dl class="pairs pairs--justified">
<dt>{{ phrase('rating') }}</dt>
<dd>
<xf:macro template="rating_macros" name="stars_text"
arg-rating="{$resource.rating_avg}"
arg-count="{$resource.rating_count}"
arg-rowClass="ratingStarsRow--textBlock" />
</dd>
</dl>
</div>
<xf:if contentcheck="true">
<div class="resourceSidebarGroup resourceSidebarGroup--buttons">
<xf:contentcheck>
<xf:if is="$resource.hasViewableDiscussion()">
<xf:button href="{{ link('threads', $resource.Discussion) }}" class="button--fullWidth">{{ phrase('xfrm_join_discussion') }}</xf:button>
</xf:if>
<xf:if is="$resource.external_url">
<xf:button href="{$resource.external_url}" class="button--link button--fullWidth">{{ phrase('xfrm_more_information') }}</xf:button>
</xf:if>
<xf:if is="$resource.alt_support_url">
<xf:button href="{$resource.alt_support_url}" class="button--link button--fullWidth">{{ phrase('xfrm_get_support') }}</xf:button>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if is="$authorOthers is not empty">
<div class="resourceSidebarGroup">
<h4 class="resourceSidebarGroup-title">
<a href="{{ link('resources/authors', $resource.User) }}">{{ phrase('xfrm_more_resources_from_x', {'name': $resource.User.username}) }}</a>
</h4>
<ul class="resourceSidebarList">
<xf:foreach loop="$authorOthers" value="$authorOther">
<li>
<xf:macro template="xfrm_resource_list_macros" name="resource_simple"
arg-resource="{$authorOther}"
arg-withMeta="{{ false }}" />
</li>
</xf:foreach>
</ul>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="resourceSidebarGroup">
<h4 class="resourceSidebarGroup-title">{{ phrase('xfrm_share_this_resource') }}</h4>
<xf:contentcheck>
<xf:macro template="share_page_macros" name="buttons" arg-iconic="{{ true }}" />
</xf:contentcheck>
</div>
</xf:if>
</div>
</div>
</div>
</div>
</div>
<xf:if is="$latestUpdates is not empty">
<div class="block">
<div class="block-container">
<h3 class="block-header">{{ phrase('xfrm_latest_updates') }}</h3>
<ol class="block-body">
<xf:foreach loop="$latestUpdates" value="$update">
<li class="block-row block-row--separated">
<h3 class="block-textHeader">
<a href="{{ link('resources/update', $update) }}">{$update.title}</a>
</h3>
<div>{{ snippet($update.message, 100, {'stripBbCode': true}) }}</div>
</xf:foreach>
</ol>
<div class="block-footer">
<span class="block-footer-controls"><xf:button class="button--link" href="{{ link('resources/updates', $resource) }}">{{ phrase('xfrm_read_more...') }}</xf:button></span>
</div>
</div>
</div>
</xf:if>
<xf:if is="$latestReviews is not empty">
<div class="block">
<div class="block-container">
<h3 class="block-header">{{ phrase('xfrm_latest_reviews') }}</h3>
<div class="block-body">
<xf:foreach loop="$latestReviews" value="$review">
<xf:macro template="xfrm_resource_review_macros" name="review"
arg-review="{$review}"
arg-resource="{$resource}" />
</xf:foreach>
</div>
<div class="block-footer">
<span class="block-footer-controls"><xf:button class="button--link" href="{{ link('resources/reviews', $resource) }}">{{ phrase('xfrm_read_more...') }}</xf:button></span>
</div>
</div>
</div>
</xf:if>]]></template>
</templates>
<properties>
<group group_name="uix_globalSettings" title="Global Settings" description="General settings for the theme, as well as for smaller components" display_order="310" addon_id=""/>
<group group_name="uix_icons" title="Icons" description="Settings for the main icon font for the theme." display_order="410" addon_id=""/>
<group group_name="uix_sidebar" title="Sidebar" description="Style Properties for the sidebar" display_order="730" addon_id=""/>
<group group_name="uix_search" title="Search" description="Settings related to the header search component" display_order="750" addon_id=""/>
<group group_name="uix_breadcrumb" title="Breadcrumb" description="Settings related to the breadcrumb and its components." display_order="760" addon_id=""/>
<group group_name="uix_welcomeSection" title="Welcome Section" description="Settings related to the welcome section" display_order="770" addon_id=""/>
<group group_name="uix_nodeIcons" title="Node icons" description="Settings related to node icons" display_order="2010" addon_id=""/>
<group group_name="uix_discussionList" title="Discussion list" description="Settings related to the discussion list component" display_order="2020" addon_id=""/>
<group group_name="uix_canvas" title="Canvas Menus" description="On and off canvas menu settings" display_order="2100" addon_id=""/>
<group group_name="prefixes" title="Prefixes" description="Sets the color and styling for thread prefixes." display_order="10000" addon_id=""/>
<property property_name="animationSpeed" group_name="misc" title="Base animation speed" description="All animations within the system base their speed on this value. Smaller values (in seconds) make for faster animations" property_type="value" value_type="unit" depends_on="" value_group="" display_order="100" addon_id="XF">
<value_parameters>step=any</value_parameters>
<value>"0.2s"</value>
</property>
<property property_name="badge" group_name="misc" title="Badge" description="Badges appear to indicate a number if items requiring attention, such as unread messages in your inbox" 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-contentHighlightBg",
"border-radius": "@xf-borderRadiusSmall"
}</value>
</property>
<property property_name="bbCodeInlineCode" group_name="bbCode" title="BB code block - inline code" description="Special styling rules for inline code ([ICODE]) elements." property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="XF">
<value>{
"font-size": "90%",
"background-color": "@xf-contentAltBg",
"border-width": "@xf-borderSize",
"border-color": "@xf-borderColorLight",
"border-radius": "@xf-borderRadiusSmall",
"padding-top": "1px",
"padding-right": "@xf-paddingSmall",
"padding-bottom": "1px",
"padding-left": "@xf-paddingSmall"
}</value>
</property>
<property property_name="blockBorder" group_name="block" title="Block border framework" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="border,extra" addon_id="XF">
<value>{
"border-width": "0",
"border-top-color": "@xf-borderColorLight",
"border-right-color": "@xf-borderColor",
"border-bottom-color": "@xf-borderColorHeavy",
"border-left-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-textColor",
"background-color": "@xf-contentHighlightBg"
}</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-contentHighlightBg",
"border-top-width": "@xf-borderSize",
"border-top-color": "@xf-borderColorLight",
"extra": "padding-top: @xf-paddingMedium;\npadding-bottom: @xf-paddingMedium;"
}</value>
</property>
<property property_name="blockHeader" group_name="block" title="Block header" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "24px",
"color": "@xf-textColor",
"border-bottom-width": "1px",
"border-bottom-color": "@xf-borderColor"
}</value>
</property>
<property property_name="blockLink" group_name="misc" title="Block link" description="Some links are displayed as small blocks such as choices in a popup menu, and their background will highlight when hovered" property_type="css" value_type="" depends_on="" value_group="" display_order="20900" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "@xf-textColorDimmed",
"text-decoration": "none",
"background-color": "@xf-contentBg",
"extra": "cursor: pointer;"
}</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>{
"color": "@xf-uix_primaryColor",
"font-weight": "@xf-fontWeightHeavy",
"background-color": "xf-intensify(@xf-contentBg, 3%)",
"border-width": "@xf-borderSizeFeature",
"border-color": "@xf-borderColorFeature"
}</value>
</property>
<property property_name="blockMinorHeader" group_name="block" title="Block minor header" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-textColor"
}</value>
</property>
<property property_name="blockPaddingH" group_name="block" title="Block padding horizontal" description="The horizontal space between the edges of a block and its content" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="100" addon_id="XF">
<value>"@xf-paddingLarge"</value>
</property>
<property property_name="blockPaddingV" group_name="block" title="Block padding vertical" description="" 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="blockTabHeader" group_name="block" title="Block tab header" description="Occasionally, blocks will have multi-part, tab headers, styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-textColorMuted",
"border-bottom-width": "1px",
"border-bottom-color": "@xf-borderColor",
"extra": "border-bottom: 1px solid @xf-borderColor;\nfont-weight: @xf-fontWeightHeavy;\ntext-transform: uppercase;"
}</value>
</property>
<property property_name="blockTabHeaderSelected" group_name="block" title="Block tab header - selected tab" description="The selected tab in multi-part headers takes additional styling from here" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border_color_simple,extra" addon_id="XF">
<value>{
"color": "@xf-uix_secondaryColor",
"border-color": "@xf-uix_secondaryColor"
}</value>
</property>
<property property_name="blockTextHeader" group_name="block" title="Block text header" description="Text headers are used for subtle identification of content areas, without changing the background style or color" property_type="css" value_type="" depends_on="" value_group="" display_order="20700" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeLarge",
"color": "@xf-textColor"
}</value>
</property>
<property property_name="borderColor" group_name="color" title="Border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4000" addon_id="XF">
<value>"xf-intensify(@xf-contentBg, 12%)"</value>
</property>
<property property_name="borderColorAccentContent" group_name="color" title="Accent content border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderOther" display_order="5200" addon_id="XF">
<value>"@xf-borderColorHighlight"</value>
</property>
<property property_name="borderColorAttention" group_name="color" title="Attention-grabbing border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderOther" display_order="5300" addon_id="XF">
<value>"@xf-borderColorHighlight"</value>
</property>
<property property_name="borderColorFaint" group_name="color" title="Faint border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4100" addon_id="XF">
<value>"@xf-borderColor"</value>
</property>
<property property_name="borderColorFeature" group_name="color" title="Feature border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderOther" display_order="5100" addon_id="XF">
<value>"@xf-borderColorHighlight"</value>
</property>
<property property_name="borderColorHeavy" group_name="color" title="Heavy border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4300" addon_id="XF">
<value>"@xf-borderColor"</value>
</property>
<property property_name="borderColorHighlight" group_name="color" title="Highlight border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderOther" display_order="5000" addon_id="XF">
<value>"@xf-uix_primaryColor"</value>
</property>
<property property_name="borderColorLight" group_name="color" title="Light border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4200" addon_id="XF">
<value>"@xf-borderColor"</value>
</property>
<property property_name="borderRadiusLarge" group_name="borderSpacing" title="Large border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1200" addon_id="XF">
<value>"@xf-borderRadiusMedium"</value>
</property>
<property property_name="borderRadiusMedium" group_name="borderSpacing" title="Medium border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1100" addon_id="XF">
<value>"4px"</value>
</property>
<property property_name="borderRadiusSmall" group_name="borderSpacing" title="Small border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1000" addon_id="XF">
<value>"@xf-borderRadiusMedium"</value>
</property>
<property property_name="borderSizeFeature" group_name="borderSpacing" title="Feature border size" description="" property_type="value" value_type="unit" depends_on="" value_group="borderSize" display_order="200" addon_id="XF">
<value>"2px"</value>
</property>
<property property_name="borderSizeMinorFeature" group_name="borderSpacing" title="Minor feature border size" description="" property_type="value" value_type="unit" depends_on="" value_group="borderSize" display_order="300" addon_id="XF">
<value>"@xf-borderSizeFeature"</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": "14px",
"font-weight": "@xf-fontWeightHeavy",
"border-radius": "@xf-borderRadiusMedium",
"padding-top": "0",
"padding-right": "10px",
"padding-bottom": "0",
"padding-left": "10px",
"extra": "text-align: center;\noutline: none;\nline-height: 32px;\nheight: 32px;\ntext-decoration: none;\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\ncursor: pointer;\nbox-sizing: content-box;\n-webkit-appearance: none;\ntext-transform: uppercase;\nborder: none;\nwhite-space: nowrap;\ntransition: none;"
}</value>
</property>
<property property_name="buttonCta" group_name="button" title="Button - call to action" description="Call to action buttons sit alone and invite the user to do something, like post a new thread" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,extra" addon_id="XF">
<value>{
"extra": "background: #525252;\nbackground: -moz-linear-gradient(top, #525252 0%, #232323 100%);\nbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#525252), color-stop(100%,#232323));\nbackground: -webkit-linear-gradient(top, #525252 0%,#232323 100%);\nbackground: -o-linear-gradient(top, #525252 0%,#232323 100%);\nbackground: -ms-linear-gradient(top, #525252 0%,#232323 100%);\nbackground: linear-gradient(to bottom, #525252 0%,#232323 100%);\nfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#232323',GradientType=0 );"
}</value>
</property>
<property property_name="buttonDefault" group_name="button" title="Button - default" description="Most buttons use this styling, except for primary form submit buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "#e5e5e5",
"background-color": "@xf-textColorDimmed",
"extra": "box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);"
}</value>
</property>
<property property_name="buttonDisabled" group_name="button" title="Button - disabled" description="When buttons are disabled and unclickable, they use these styling rules" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "@xf-textColorMuted",
"font-style": "italic",
"background-color": "rgba(0,0,0,.12)",
"extra": "cursor: default;\nbox-shadow: none !important;\nfont-style: initial;"
}</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": "#fff",
"extra": "background: #525252;\nbackground: -moz-linear-gradient(top, #525252 0%, #232323 100%);\nbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#525252), color-stop(100%,#232323));\nbackground: -webkit-linear-gradient(top, #525252 0%,#232323 100%);\nbackground: -o-linear-gradient(top, #525252 0%,#232323 100%);\nbackground: -ms-linear-gradient(top, #525252 0%,#232323 100%);\nbackground: linear-gradient(to bottom, #525252 0%,#232323 100%);\nfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#232323',GradientType=0 );"
}</value>
</property>
<property property_name="chip" group_name="misc" title="Chips" description="The primary use for chips is in tagging content, where each tag will appear as a chip" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border_width_simple,border_color_simple,extra" addon_id="XF">
<value>{
"color": "@xf-textColorMuted",
"background-color": "@xf-contentHighlightBg",
"border-width": "@xf-borderSize",
"border-color": "@xf-borderColor",
"extra": "display: inline-block;\nmax-width: 100%;\npadding: 0 6px 1px;\nmargin: 0 0 2px;\nborder-radius: 3px;"
}</value>
</property>
<property property_name="contentAccentBase" group_name="content" title="Accented content area base" description="When attention needs to be directed to content, this background may be employed" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "@xf-textColorDimmed",
"background-color": "@xf-contentAccentBg"
}</value>
</property>
<property property_name="contentAccentBg" group_name="color" title="Accented content background color" description="" property_type="value" value_type="color" depends_on="" value_group="contentBg" display_order="2300" addon_id="XF">
<value>"@xf-paletteColor5"</value>
</property>
<property property_name="contentAccentLink" group_name="content" title="Accented content area links" description="Links within accented content will be styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "@xf-uix_primaryColor"
}</value>
</property>
<property property_name="contentAltBg" group_name="color" title="Alternate content background color" description="" property_type="value" value_type="color" depends_on="" value_group="contentBg" display_order="2100" addon_id="XF">
<value>"@xf-paletteColor2"</value>
</property>
<property property_name="contentBase" group_name="content" title="Content area base" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "@xf-textColor",
"background-color": "@xf-contentBg"
}</value>
</property>
<property property_name="contentBg" group_name="color" title="Content background color" description="" property_type="value" value_type="color" depends_on="" value_group="contentBg" display_order="2000" addon_id="XF">
<value>"@xf-paletteColor1"</value>
</property>
<property property_name="contentHighlightBg" group_name="color" title="Highlighted content background color" description="" property_type="value" value_type="color" depends_on="" value_group="contentBg" display_order="2200" addon_id="XF">
<value>"@xf-paletteColor3"</value>
</property>
<property property_name="elementSpacer" group_name="borderSpacing" title="Element spacer" description="This represents the base value for spacing between elements, such as individual blocks." property_type="value" value_type="unit" depends_on="" value_group="spacer" display_order="3000" addon_id="XF">
<value>"16px"</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>"'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"</value>
</property>
<property property_name="fontFamilyCode" group_name="fonts" title="Code Font" description="The font list used for mono-spaced text input and output" property_type="value" value_type="string" depends_on="" value_group="font" display_order="300" addon_id="XF">
<value>"'Roboto Mono', 'Andale Mono', 'Ubuntu Mono', monospace"</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>"'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 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>"16px"</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>"24px"</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>"14px"</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>"13px"</value>
</property>
<property property_name="fontSizeSmaller" group_name="fonts" title="Smaller font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1200" addon_id="XF">
<value>"13px"</value>
</property>
<property property_name="fontSizeSmallest" group_name="fonts" title="Smallest font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1300" addon_id="XF">
<value>"12px"</value>
</property>
<property property_name="fontWeightHeavy" group_name="fonts" title="Heavy font weight" description="" property_type="value" value_type="number" depends_on="" value_group="weight" display_order="2200" addon_id="XF">
<value_parameters>step=100
min=100
max=900</value_parameters>
<value>"700"</value>
</property>
<property property_name="fontWeightLight" group_name="fonts" title="Light font weight" description="" property_type="value" value_type="number" depends_on="" value_group="weight" display_order="2100" addon_id="XF">
<value_parameters>step=100
min=100
max=900</value_parameters>
<value>"400"</value>
</property>
<property property_name="formRowPaddingHOuter" group_name="form" title="Form row horizontal padding (outer)" description="This padding is applied to the outer edges of the form content" property_type="value" value_type="unit" depends_on="" value_group="" display_order="400" addon_id="XF">
<value>"@xf-paddingLarge"</value>
</property>
<property property_name="formRowPaddingV" group_name="form" title="Form row vertical padding" description="Each form row has this padding above and below its content" property_type="value" value_type="unit" depends_on="" value_group="" display_order="200" addon_id="XF">
<value>"@xf-paddingLarge"</value>
</property>
<property property_name="globalActionColor" group_name="misc" title="Global action indicator color" description="This is the base color of the gadgets that display when an action is being processed in the background." property_type="value" value_type="color" depends_on="" value_group="" display_order="400" addon_id="XF">
<value>"@xf-uix_secondaryColor"</value>
</property>
<property property_name="inlineModBar" group_name="inlineMod" title="Inline moderation bar" description="A bar containing controls appears when content is selected for inline moderation. Its appearance is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,padding,extra" addon_id="XF">
<value>{
"color": "#fff",
"background-color": "@xf-uix_primaryColorDarker",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "xf-intensify(@xf-paletteColor5, 10%)",
"padding-top": "@xf-paddingSmall",
"padding-bottom": "@xf-paddingSmall"
}</value>
</property>
<property property_name="inlineModHighlightColor" group_name="inlineMod" title="Inline moderation highlight color" description="When content is selected for inline moderation, its background color will be replaced with this" property_type="value" value_type="color" depends_on="" value_group="" display_order="100" addon_id="XF">
<value>"mix(@xf-paletteAccent1, @xf-contentBg, 10%)"</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-radius": "@xf-borderRadiusMedium",
"border-top-color": "@xf-borderColorHeavy",
"border-right-color": "@xf-borderColorLight",
"border-bottom-color": "@xf-borderColorLight",
"border-left-color": "@xf-borderColorHeavy",
"padding": "6px"
}</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": "fade(@xf-textColorMuted, 20%)"
}</value>
</property>
<property property_name="linkColor" group_name="color" title="Link color" description="" property_type="value" value_type="color" depends_on="" value_group="link" display_order="1000" addon_id="XF">
<value>"@xf-uix_primaryColor"</value>
</property>
<property property_name="linkHoverColor" group_name="color" title="Link hover color" description="" property_type="value" value_type="color" depends_on="" value_group="link" display_order="1100" addon_id="XF">
<value>"xf-intensify(@xf-linkColor, 17%)"</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-contentHighlightBg",
"border-bottom-width": "0",
"border-bottom-color": "@xf-borderColorLight"
}</value>
</property>
<property property_name="memberHeaderName" group_name="member" title="Member profile header - name" description="The styling of the name of the member whose page is being viewed is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeLargest",
"color": "@xf-textColor"
}</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-contentHighlightBg",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "@xf-borderColorLight",
"extra": "display: flex;"
}</value>
</property>
<property property_name="memberTooltipName" group_name="member" title="Member tooltip header - name" description="Styling for the name of the user whose tooltip is being displayed" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeLarger",
"color": "@xf-contentText"
}</value>
</property>
<property property_name="menu" group_name="menu" title="Menu" description="Controls the main block of all popup menus" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border_width_simple,border_color_simple,border_radius_simple,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "@xf-textColor",
"background-color": "@xf-contentBg",
"border-width": "0",
"border-color": "@xf-borderColor",
"border-radius": "@xf-borderRadiusSmall"
}</value>
</property>
<property property_name="menuBorderRadius" group_name="menu" title="Menu border radius" description="Controls the size of the border radius for all menus" property_type="value" value_type="unit" depends_on="" value_group="" display_order="200" addon_id="XF">
<value>"@xf-borderRadiusMedium"</value>
</property>
<property property_name="menuFeatureBorderColor" group_name="menu" title="Menu feature border color" description="Popup menus have a thick feature border on their upper edge, the styling of which is controlled here" property_type="value" value_type="color" depends_on="" value_group="" display_order="100" addon_id="XF">
<value>"@xf-borderColor"</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="20400" 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",
"extra": "padding: 8px;"
}</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-contentBg",
"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-uix_primaryColor",
"text-decoration": "none",
"background-color": "@xf-contentHighlightBg"
}</value>
</property>
<property property_name="menuTabHeader" group_name="menu" title="Menu tab header" description="Multi-part, tabbed menu headers use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-uix_primaryColor",
"background-color": "@xf-contentBg",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "@xf-borderColorLight"
}</value>
</property>
<property property_name="messageNewIndicator" group_name="message" title="New message indicator" description="Usually a small token attached to the message block, the indicator that a message is new/unread is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,border_radius,padding,extra" addon_id="XF">
<value>{
"font-size": "90%",
"color": "contrast(@xf-uix_primaryColorDarker)",
"background-color": "@xf-uix_primaryColorDarker",
"border-radius": "@xf-borderRadiusSmall",
"padding-top": "1px",
"padding-right": "4px",
"padding-bottom": "1px",
"padding-left": "4px"
}</value>
</property>
<property property_name="messagePadding" group_name="message" title="Message padding" description="When using the full-size message block, this value defines the size of the padding around the message text" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="200" addon_id="XF">
<value>"@xf-paddingMedium"</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": "@xf-messagePadding",
"padding-bottom": "@xf-messagePadding",
"extra": "margin-top: 0;"
}</value>
</property>
<property property_name="messageUserBlock" group_name="message" title="Message user info block" description="Apart from its width, the (left) message user info column is styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border_width_simple,border_color_simple,extra" addon_id="XF">
<value>{
"border-width": "0"
}</value>
</property>
<property property_name="messageUserBlockWidth" group_name="message" title="Message user info block width" description="Controls the width of the (left) user info column on the full size message block" property_type="value" value_type="unit" depends_on="" value_group="user" display_order="500" addon_id="XF">
<value>"140px"</value>
</property>
<property property_name="messageUserElements" group_name="message" title="Message user info elements" description="The elements selected here will be displayed in the message user info block. It will not be displayed below the single column width." property_type="value" value_type="template" depends_on="" value_group="" display_order="500" addon_id="XF">
<value_parameters>template=style_property_template_messageUserElements
type=array</value_parameters>
<value>{
"register_date": "1",
"message_count": "1",
"like_count": "1",
"trophy_points": "1",
"age": "1",
"location": "1",
"website": "1",
"custom_fields": "1"
}</value>
</property>
<property property_name="nodeIconReadColor" group_name="nodeList" title="Read node icon color" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="200" addon_id="XF">
<value>"@xf-borderColor"</value>
</property>
<property property_name="nodeIconUnreadColor" group_name="nodeList" title="Unread node icon color" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="100" addon_id="XF">
<value>"@xf-uix_secondaryColor"</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>"menu"</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-fontSizeLarger",
"color": "@xf-textColor",
"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="paddingLargest" group_name="borderSpacing" title="Largest padding" description="" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="2300" addon_id="XF">
<value>"20px"</value>
</property>
<property property_name="paddingMedium" group_name="borderSpacing" title="Medium padding" description="" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="2100" addon_id="XF">
<value>"12px"</value>
</property>
<property property_name="paddingSmall" group_name="borderSpacing" title="Small padding" description="" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="2000" addon_id="XF">
<value>"4px"</value>
</property>
<property property_name="pageBackground" group_name="page" title="Page background" description="The page background, behind all block elements, uses the styling rules defined here" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="background,extra" addon_id="XF">
<value>{
"background-color": "@xf-pageBg",
"background-image": "@xf-uix_imagePath/class/images/noise_2.png"
}</value>
</property>
<property property_name="pageBg" group_name="color" title="Page background color" description="" property_type="value" value_type="color" depends_on="" value_group="contentBg" display_order="2000" addon_id="XF">
<value>"@xf-paletteColor4"</value>
</property>
<property property_name="pageEdgeSpacer" group_name="borderSpacing" title="Page edge spacer" description="" property_type="value" value_type="unit" depends_on="" value_group="spacer" display_order="3100" addon_id="XF">
<value>"16px"</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>"#4f4f4f"</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>"#292929"</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>"#161616"</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>"#fcfcfc"</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>"#ebebeb"</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>"#e3e3e3"</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>"#313131"</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>"#191919"</value>
</property>
<property property_name="paletteNeutral1" group_name="palette" title="Neutral 1" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3000" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"#969696"</value>
</property>
<property property_name="paletteNeutral2" group_name="palette" title="Neutral 2" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3100" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"#646464"</value>
</property>
<property property_name="paletteNeutral3" group_name="palette" title="Neutral 3" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3200" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"#141414"</value>
</property>
<property property_name="progressBarColor" group_name="misc" title="Progress bar color" description="The progress bar appears at the top of the window when the system is waiting for a response from the server" property_type="value" value_type="color" depends_on="" value_group="" display_order="300" addon_id="XF">
<value>"@xf-uix_secondaryColor"</value>
</property>
<property property_name="publicFaviconUrl" group_name="basic" title="Favicon URL (32x32)" description="Path to the small logo that is associated with bookmarks pointing to your site" property_type="value" value_type="string" depends_on="" value_group="logo" display_order="400" addon_id="XF">
<value>"@xf-uix_imagePath/images/favicon.png"</value>
</property>
<property property_name="publicFooter" group_name="footer" title="Footer" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "@xf-textColorDimmed"
}</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": "rgba(255,255,255,.7)"
}</value>
</property>
<property property_name="publicHeader" group_name="headerNav" title="Header/logo row" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "rgba(255,255,255,.7)",
"extra": "padding-top: 15px;"
}</value>
</property>
<property property_name="publicHeaderAdjustColor" group_name="headerNav" title="Header adjustment color" description="" property_type="value" value_type="color" depends_on="" value_group="header" display_order="100" addon_id="XF">
<value>""</value>
</property>
<property property_name="publicLogoUrl" group_name="basic" title="Logo URL" description="" property_type="value" value_type="string" depends_on="" value_group="logo" display_order="100" addon_id="XF">
<value>"@xf-uix_imagePath/class/images/logo.png"</value>
</property>
<property property_name="publicLogoUrl2x" group_name="basic" title="2x logo URL" description="" property_type="value" value_type="string" depends_on="" value_group="logo" display_order="200" addon_id="XF">
<value>""</value>
</property>
<property property_name="publicNav" group_name="headerNav" title="Navigation row" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "rgba(255,255,255,.7)",
"background-color": "transparent"
}</value>
</property>
<property property_name="publicNavCollapseWidth" group_name="headerNav" title="Navigation collapse width" description="Below this page width, the navigation system will collapse down into an off canvas menu" property_type="value" value_type="unit" depends_on="" value_group="navigation" display_order="1300" addon_id="XF">
<value>"@xf-responsiveWide"</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>"@xf-paddingMedium"</value>
</property>
<property property_name="publicNavPaddingV" group_name="headerNav" title="Navigation padding vertical" description="This value defines the amount of padding applied to the main navigational tabs in the header" property_type="value" value_type="unit" depends_on="" value_group="navPad" display_order="4000" addon_id="XF">
<value>"20px"</value>
</property>
<property property_name="publicNavSelected" group_name="headerNav" title="Navigation row - selected tab" description="" 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": "#fff",
"font-weight": "@xf-fontWeightHeavy"
}</value>
</property>
<property property_name="publicNavSticky" group_name="headerNav" title="Sticky navigation element" description="" 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>"all"</value>
</property>
<property property_name="publicNavTab" group_name="headerNav" title="Navigation row - tab" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeLarge",
"color": "rgba(255, 255, 255, 0.75)",
"font-weight": "@xf-fontWeightHeavy",
"text-decoration": "none",
"extra": "line-height: 1;\ntext-shadow: 0 1px 0 rgba(0,0,0,.4);"
}</value>
</property>
<property property_name="publicNavTabHover" group_name="headerNav" title="Navigation row - hovered tab" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "#fff",
"text-decoration": "none"
}</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>{
"text-decoration": "none"
}</value>
</property>
<property property_name="publicStaffBar" group_name="headerNav" title="Staff tools bar" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20700" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "rgba(255,255,255,.7)",
"background-color": "@xf-contentAccentBg",
"extra": "padding: @xf-paddingSmall;\nborder-radius: @xf-borderRadiusMedium;\nbox-shadow: 0 2px 2px rgba(0,0,0,0.6);"
}</value>
</property>
<property property_name="publicSubNav" group_name="headerNav" title="Sub-navigation row" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "rgba(255,255,255,.5)",
"font-weight": "@xf-fontWeightHeavy",
"background-image": "linear-gradient(to bottom, #2a2a2a 1%,#191919 100%)",
"border-bottom-width": "0",
"border-bottom-color": "@xf-borderColor",
"extra": "border-radius: @xf-borderRadiusSmall;"
}</value>
</property>
<property property_name="publicSubNavElHover" group_name="headerNav" title="Sub-navigation row - hovered element" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20600" css_components="text,extra" addon_id="XF">
<value>{
"color": "#fff"
}</value>
</property>
<property property_name="publicSubNavElMenuOpen" group_name="headerNav" title="Sub-navigation row - menu-open element" description="Styles sub-navigation elements whose popup menu is currently open" property_type="css" value_type="" depends_on="" value_group="" display_order="20650" css_components="text,background,extra" addon_id="XF">
<value>{
"text-decoration": "none"
}</value>
</property>
<property property_name="publicSubNavPaddingV" group_name="headerNav" title="Sub-navigation padding vertical" description="Defines the amount of vertical padding applied to each item in the sub-navigation bar in the header" property_type="value" value_type="unit" depends_on="" value_group="subNavPad" display_order="5000" addon_id="XF">
<value>"2px"</value>
</property>
<property property_name="responsiveEdgeSpacerRemoval" group_name="page" title="Page edge spacer removal break point" description="When the page is narrower than this value, the spacers at the edge of the page are discarded" property_type="value" value_type="unit" depends_on="" value_group="responsive" display_order="2300" addon_id="XF">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="scrollJumpButtons" group_name="page" title="Display page jump buttons on scroll" description="If enabled, floating buttons will be displayed shortly after the page is scrolled which allow you to jump to the top or bottom of the page. If this is only triggered when scrolling up, only a jump to top button will be displayed." property_type="value" value_type="radio" depends_on="" value_group="" display_order="3000" addon_id="XF">
<value_parameters>={{ phrase('scroll_buttons_do_not_display') }}
up={{ phrase('scroll_buttons_when_scrolling_up') }}
both={{ phrase('scroll_buttons_when_scrolling_up_or_down') }}</value_parameters>
<value>"both"</value>
</property>
<property property_name="sidebarSpacer" group_name="page" title="Sidebar and side navigation spacer" description="" property_type="value" value_type="unit" depends_on="" value_group="sidebar" display_order="1000" addon_id="XF">
<value>"@xf-elementSpacer"</value>
</property>
<property property_name="standaloneTab" group_name="tab" title="Standalone tabs" description="Tabs that are not part of block headers are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-textColorMuted",
"extra": "border-bottom: 1px solid @xf-borderColor;\nfont-weight: @xf-fontWeightHeavy;\ntext-transform: uppercase;\noutline: none;"
}</value>
</property>
<property property_name="standaloneTabSelected" group_name="tab" title="Standalone tabs - selected tab" description="The selected tab in groups that are not part of block headers" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border_color_simple,extra" addon_id="XF">
<value>{
"color": "@xf-uix_secondaryColor",
"border-color": "@xf-uix_secondaryColor"
}</value>
</property>
<property property_name="styleType" group_name="palette" title="Style type" description="This defines the general type of style in use based on whether the content is placed on a light or dark background. This may change how colors are selected in certain scenarios." property_type="value" value_type="radio" depends_on="" value_group="setup" display_order="100" addon_id="XF">
<value_parameters>light={{ phrase('light') }}
dark={{ phrase('dark') }}</value_parameters>
<value>"light"</value>
</property>
<property property_name="textColor" group_name="color" title="Text color" description="Unless otherwise specified, text will be this color" property_type="value" value_type="color" depends_on="" value_group="textBasic" display_order="100" addon_id="XF">
<value>"@xf-paletteNeutral3"</value>
</property>
<property property_name="textColorAccentContent" group_name="color" title="Accented content text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3200" addon_id="XF">
<value>"@xf-uix_secondaryColor"</value>
</property>
<property property_name="textColorAttention" group_name="color" title="Attention-grabbing text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3300" addon_id="XF">
<value>"@xf-uix_secondaryColor"</value>
</property>
<property property_name="textColorDimmed" group_name="color" title="Dimmed text color" description="" property_type="value" value_type="color" depends_on="" value_group="textBasic" display_order="200" addon_id="XF">
<value>"@xf-paletteNeutral2"</value>
</property>
<property property_name="textColorEmphasized" group_name="color" title="Emphasized text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3100" addon_id="XF">
<value>"@xf-uix_secondaryColor"</value>
</property>
<property property_name="textColorFeature" group_name="color" title="Feature text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3000" addon_id="XF">
<value>"@xf-textColor"</value>
</property>
<property property_name="textColorMuted" group_name="color" title="Muted text color" description="" property_type="value" value_type="color" depends_on="" value_group="textBasic" display_order="300" addon_id="XF">
<value>"@xf-paletteNeutral1"</value>
</property>
<property property_name="uix_activeNavTitle" group_name="basic" title="Mobile active navigation title" description="Adds a short version of the active navigation to the header when navigation links collapse to the canvas navigation" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_activeNavTitleStyle" group_name="basic" title="Mobile active navigation title style" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"font-size": "18px",
"color": "#fff",
"border-left-width": "1px",
"border-left-color": "rgba(255,255,255,.3)",
"padding-right": "@xf-paddingMedium",
"padding-left": "@xf-paddingMedium",
"extra": "font-weight: @xf-fontWeightHeavy;"
}</value>
</property>
<property property_name="uix_additionalCss" group_name="uix_globalSettings" title="List of additional css templates to include" description="A comma separated list of additional CSS/less templates to load. Requires the .css or .less suffix" property_type="value" value_type="string" depends_on="" value_group="" display_order="400" addon_id="">
<value>"class.less"</value>
</property>
<property property_name="uix_avatarShape" group_name="avatar" title="Avatar shape" description="Changes the shape of avatars (may overwrite avatar border radius style property)" property_type="value" value_type="select" depends_on="" value_group="" display_order="10" addon_id="">
<value_parameters>0=Default
1=Circle
2=Square
3=Diamond
4=Pentagon
5=Hexagon
6=Octagon</value_parameters>
<value>"1"</value>
</property>
<property property_name="uix_backstretch" group_name="uix_globalSettings" title="Backstretch" description="Adds an image or image slideshow to any target element" property_type="value" value_type="boolean" depends_on="" value_group="backstretch" display_order="1000" addon_id="">
<value>0</value>
</property>
<property property_name="uix_backstretchDuration" group_name="uix_globalSettings" title="Backstretch duration" description="Sets the amount of time (in milliseconds) that each image will be visible." property_type="value" value_type="number" depends_on="" value_group="backstretch" display_order="1400" addon_id="">
<value>"4000"</value>
</property>
<property property_name="uix_backstretchFade" group_name="uix_globalSettings" title="Backstretch fade" description="Sets the speed (in milliseconds) that the images fade out/in." property_type="value" value_type="number" depends_on="" value_group="backstretch" display_order="1300" addon_id="">
<value>"500"</value>
</property>
<property property_name="uix_backstretchImages" group_name="uix_globalSettings" title="Backstretch images" description="Enter a list of images where each image is wrapped in quotes. If you add multiple images, every line minus the last one should be followed by a comma. Ex: "image/bg1.jpg", "image/bg2.jpg"" property_type="value" value_type="string" depends_on="uix_backstretch" value_group="backstretch" display_order="1100" addon_id="">
<value>"\"@xf-uix_imagePath/images/bg/1.jpg\", \"@xf-uix_imagePath/images/bg/2.jpg\", \"@xf-uix_imagePath/images/bg/3.jpg\""</value>
</property>
<property property_name="uix_backstretchSelector" group_name="uix_globalSettings" title="Backstretch selector" description="CSS selector for where to apply Backstretch to. For entire document, enter: body" property_type="value" value_type="string" depends_on="" value_group="backstretch" display_order="1200" addon_id="">
<value>"body"</value>
</property>
<property property_name="uix_betaMode" group_name="uix_globalSettings" title="Beta Mode" description="For development and bug-finding purposes. DO NOT enable on a live site." property_type="value" value_type="boolean" depends_on="" value_group="theme" display_order="10200" addon_id="">
<value>0</value>
</property>
<property property_name="uix_blockBody" group_name="block" title="Block body" description="Styles the body of block level components" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_blockContainer" group_name="block" title="Block container" description="Styles the container for Block level components" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"background-image": "@xf-uix_imagePath/class/images/box-bg.gif",
"border-width": "1px",
"border-color": "@xf-borderColor",
"extra": "box-shadow: 0 1px 0 #fafafa, 0 1px 0 #fff inset;"
}</value>
</property>
<property property_name="uix_blockMessage" group_name="block" title="Block message" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"extra": "box-shadow: @xf-uix_elevation1;"
}</value>
</property>
<property property_name="uix_blockOuter" group_name="block" title="Block outer" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="30" css_components="background,border,padding,extra" addon_id="">
<value>{
"padding-bottom": "@xf-blockPaddingV"
}</value>
</property>
<property property_name="uix_blockTabHeaderTab" group_name="block" title="Block header tab" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_borderRadiusJs" group_name="borderSpacing" title="Enable Smart Border Radius Javascript" description="Enables context-aware border-radius rules. Very helpful, especially in the header." property_type="value" value_type="boolean" depends_on="" value_group="js" display_order="5000" addon_id="">
<value>0</value>
</property>
<property property_name="uix_borderRadiusSelectors" group_name="borderSpacing" title="Border Radius Javascript Selectors" description="Only used if smart radius javascript is enabled. Comma separated list of javascript selectors. Do not include single quotes (')" property_type="value" value_type="string" depends_on="" value_group="js" display_order="5100" addon_id="">
<value>".p-footer-inner, .uix_extendedFooter, .p-nav, .p-sectionLinks, .p-staffBar, .p-header, #wpadminbar"</value>
</property>
<property property_name="uix_bottomBreadcrumbLocation" group_name="uix_breadcrumb" title="Bottom breadcrumb location" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="200" addon_id="">
<value_parameters>belowMainContainer=Below main container
mainContainerBottom = Bottom of main container
mainContentBottom=Bottom of main content
belowMainContent=Below main content</value_parameters>
<value>"mainContainerBottom"</value>
</property>
<property property_name="uix_brandmarkImage__breakpoint" group_name="basic" title="Logo breakpoint" description="Max viewport width to switch to the brandmark image. Use 100% for always, 0 for never, and other values in pixels" property_type="value" value_type="string" depends_on="" value_group="" display_order="600" addon_id="">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="uix_breadcrumbItem" group_name="uix_breadcrumb" title="Breadcrumb Item" description="Individual breadcrumb items" property_type="css" value_type="" depends_on="" value_group="" display_order="100" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorMuted"
}</value>
</property>
<property property_name="uix_breadcrumbItem__active" group_name="uix_breadcrumb" title="Breadcrumb Item (Active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="110" css_components="text,background,extra" addon_id="">
<value>{
"color": "@xf-textColorDimmed"
}</value>
</property>
<property property_name="uix_breadcrumbStyle" group_name="uix_breadcrumb" title="Breadcrumb Container" description="Styles the breadcrumb container" property_type="css" value_type="" depends_on="" value_group="" display_order="90" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorMuted"
}</value>
</property>
<property property_name="uix_breadcrumbWrapper" group_name="uix_breadcrumb" title="Breadcrumb wrapper" description="container surrounding breadcrumb and page action if applicable" property_type="css" value_type="" depends_on="" value_group="" display_order="80" css_components="background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-image": "@xf-uix_imagePath/class/images/breadcrumb-bottom-border.gif",
"padding": "8px",
"padding-right": "@xf-paddingMedium",
"padding-left": "@xf-paddingMedium",
"extra": "background-repeat: repeat-x;\nbackground-position: 0 100%;\nmargin: -16px -16px @xf-elementSpacer;"
}</value>
</property>
<property property_name="uix_breadcrumbWrapperBottom" group_name="uix_breadcrumb" title="Breadcrumb Wrapper (bottom)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"extra": "background-position: 0 0;\nmargin-top: @xf-elementSpacer;\nmargin-bottom: -16px;"
}</value>
</property>
<property property_name="uix_buttonActive" group_name="button" title="Button - default (active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20120" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "fade(@xf-buttonDefault--color, 20%)"
}</value>
</property>
<property property_name="uix_buttonCtaActive" group_name="button" title="Button - call to action (active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20320" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"background-color": "rgb(41, 41, 41)"
}</value>
</property>
<property property_name="uix_buttonCtaHover" group_name="button" title="Button - call to action (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20310" css_components="text,background,extra" addon_id="">
<value>{
"background-color": "rgb(41, 41, 41)"
}</value>
</property>
<property property_name="uix_buttonHover" group_name="button" title="Button - default (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20110" css_components="text,background,extra" addon_id="">
<value>{
"background-color": "xf-intensify(@xf-buttonDefault--background-color, 10%)"
}</value>
</property>
<property property_name="uix_buttonLink" group_name="button" title="Button Group Link" description="Styles button group links" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorDimmed",
"background-color": "#fff",
"border-width": "1px",
"border-color": "@xf-borderColor",
"extra": "text-transform: initial;\nbox-shadow: none;"
}</value>
</property>
<property property_name="uix_buttonPrimaryActive" group_name="button" title="Button - primary (active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20220" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"background-color": "rgb(41, 41, 41)"
}</value>
</property>
<property property_name="uix_buttonPrimaryHover" group_name="button" title="Button primary (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20210" css_components="text,background,extra" addon_id="">
<value>{
"background-color": "rgb(41, 41, 41)"
}</value>
</property>
<property property_name="uix_buttonRipple" group_name="button" title="Button ripple effect" description="Adds a ripple animation to buttons on press" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="100" addon_id="">
<value>1</value>
</property>
<property property_name="uix_buttonSmall" group_name="button" title="Button (small)" description="Styles small (and also filter bar) buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeSmaller",
"padding": "0",
"padding-right": "10px",
"padding-left": "10px",
"extra": "height: 28px;\nline-height: 28px;"
}</value>
</property>
<property property_name="uix_canvas" group_name="uix_canvas" title="Canvas" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorDimmed",
"background-color": "@xf-contentBg"
}</value>
</property>
<property property_name="uix_canvasHeader" group_name="uix_canvas" title="Canvas Header" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_canvasNavItem" group_name="uix_canvas" title="Canvas navigation item" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_canvasNavItemActive" group_name="uix_canvas" title="Canvas navigation item (active)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "@xf-uix_primaryColor",
"background-color": "rgba(0, 0, 0, 0.08)"
}</value>
</property>
<property property_name="uix_canvasNavItemHoverColor" group_name="uix_canvas" title="Canvas navigation item (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_canvasNavSubItem" group_name="uix_canvas" title="Canvas navigation sub-item" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_categoryCollapse" group_name="nodeList" title="Collapsible categories" description="Enables a trigger to collapse 1st level category nodes" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1000" addon_id="">
<value>1</value>
</property>
<property property_name="uix_categoryDescription" group_name="nodeList" title="Category description" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeSmaller",
"color": "@xf-textColorMuted",
"font-weight": "@xf-fontWeightNormal",
"padding-top": "4px",
"extra": "line-height: 1.5;"
}</value>
</property>
<property property_name="uix_categoryDescriptionDisplay" group_name="nodeList" title="Category description display" description="" property_type="value" value_type="radio" depends_on="" value_group="" display_order="1100" addon_id="">
<value_parameters>tooltip=Tooltip
inline=Inline
none=None</value_parameters>
<value>"inline"</value>
</property>
<property property_name="uix_categoryIconStyle" group_name="nodeList" title="Category icon style" description="Styles the category strip icon if applicable" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"font-size": "24px",
"color": "@xf-uix_primaryColor",
"padding-right": "@xf-paddingMedium"
}</value>
</property>
<property property_name="uix_categoryStrip" group_name="nodeList" title="Category Strip" description="Styles the category strip for nodes" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorDimmed",
"font-weight": "@xf-fontWeightNormal",
"border-bottom-width": "0",
"padding": "@xf-paddingLarge",
"padding-top": "0",
"extra": "line-height: 1;\nfont-family: @xf-uix_headingFont;"
}</value>
</property>
<property property_name="uix_categoryStripIcons" group_name="uix_nodeIcons" title="Category strip icons" description="Adds the UI.X Folder icon to category strips" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="200" addon_id="">
<value>0</value>
</property>
<property property_name="uix_categoryStripOutsideWrapper" group_name="nodeList" title="Move category strip outside wrapper" description="Moves the category strip outside of the level 1 node container" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1200" addon_id="">
<value>1</value>
</property>
<property property_name="uix_clickableThreads" group_name="uix_discussionList" title="Clickable threads" description="Makes the entire thread list item clickable" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_collapseExtraInfo" group_name="message" title="Collapsible extra info" description="Collapses the postbit extra info (such as joined, messages, trophies, etc..) and adds a trigger to expand them" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1000" addon_id="">
<value>1</value>
</property>
<property property_name="uix_collapseStaffbarLinks" group_name="headerNav" title="Collapse staffbar links" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="7200" addon_id="">
<value>1</value>
</property>
<property property_name="uix_collapsibleSidebar" group_name="uix_sidebar" title="Collapsible sidebar" description="Adds a trigger to collapse and expand the sidebar" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="100" addon_id="">
<value>1</value>
</property>
<property property_name="uix_collapsibleStickyThreads" group_name="uix_discussionList" title="Collapsible sticky threads" description="Allows the users to collapse sticky threads. Requires Separate Sticky Threads" property_type="value" value_type="boolean" depends_on="uix_separateThreads" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_condenseVisitorTabs" group_name="headerNav" title="Condense visitor tabs" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2250" addon_id="">
<value>0</value>
</property>
<property property_name="uix_contentWrapper" group_name="page" title="Content Wrapper" description="Sets where the styling for Content Wrapper will be applied" property_type="value" value_type="select" depends_on="" value_group="" display_order="4100" addon_id="">
<value_parameters>0=Default (no wrapper)
1= Wrapper around main content and sidebar
2=Wrapper around main content only</value_parameters>
<value>"1"</value>
</property>
<property property_name="uix_contentWrapperStyle" group_name="page" title="Content Wrapper" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,extra" addon_id="">
<value>{
"background-color": "@xf-contentAltBg",
"border-width": "@xf-borderSize",
"border-color": "@xf-borderColor",
"extra": "border-radius: @xf-borderRadiusSmall;"
}</value>
</property>
<property property_name="uix_copyrightOrder" group_name="footer" title="Copyright row order" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="300" addon_id="">
<value>"30"</value>
</property>
<property property_name="uix_defaultNavIcon" group_name="headerNav" title="Add default navigation tab icon" description="This will add a stock default navigation icon. (Note: this may cause any custom icons you set to be overwritten. Disable this feature if this is the case.)" property_type="value" value_type="boolean" depends_on="uix_navTabIcons" value_group="" display_order="2050" addon_id="">
<value>1</value>
</property>
<property property_name="uix_defaultSidebarIcon" group_name="uix_sidebar" title="Add default sidebar icons for custom HTML widgets" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="350" addon_id="">
<value>1</value>
</property>
<property property_name="uix_detachedNavigation" group_name="headerNav" title="Separate Header from Content Wrapper" description="Adds margin-bottom to header" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_discussionList" group_name="uix_discussionList" title="Discussion list" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,border_radius,padding,extra" addon_id="">
<value>{
"border-radius": "@xf-blockBorderRadius"
}</value>
</property>
<property property_name="uix_discussionListAnimation" group_name="misc" title="Discussion list animation" description="Adds animation to discussion list items on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3200" addon_id="">
<value>0</value>
</property>
<property property_name="uix_discussionListCollapseWidth" group_name="uix_discussionList" title="Width to collapse discussion list items" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-responsiveMedium"</value>
</property>
<property property_name="uix_discussionListItem" group_name="uix_discussionList" title="Discussion list item" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_discussionListItemDeleted" group_name="uix_discussionList" title="Discussion list item (deleted)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_discussionListItemEven" group_name="uix_discussionList" title="Discussion list item (even)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>""</value>
</property>
<property property_name="uix_discussionListItemHover" group_name="uix_discussionList" title="Discussion list item (hover)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>""</value>
</property>
<property property_name="uix_discussionListItemModerated" group_name="uix_discussionList" title="Discussion list item (moderated)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_discussionListItemSticky" group_name="uix_discussionList" title="Discussion list item (sticky)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border" addon_id="">
<value>{
"border-left-width": "3px",
"border-left-color": "#ca0000"
}</value>
</property>
<property property_name="uix_discussionListTitle" group_name="uix_discussionList" title="Title" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text" addon_id="">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-textColor",
"font-weight": "@xf-fontWeightNormal"
}</value>
</property>
<property property_name="uix_discussionListTitleUnread" group_name="uix_discussionList" title="Title (unread)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text" addon_id="">
<value>{
"font-weight": "@xf-fontWeightHeavy"
}</value>
</property>
<property property_name="uix_elevation1" group_name="uix_globalSettings" title="Elevation 1" description="Sets the box-shadow value for elevation level 1" property_type="value" value_type="string" depends_on="" value_group="elevation" display_order="2000" addon_id="">
<value>""</value>
</property>
<property property_name="uix_elevation2" group_name="uix_globalSettings" title="Elevation 2" description="Sets the box shadow value for elevation level 2" property_type="value" value_type="string" depends_on="" value_group="elevation" display_order="2100" addon_id="">
<value>""</value>
</property>
<property property_name="uix_enableExtendedFooter" group_name="footer" title="Enable Extended Footer" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="100" addon_id="">
<value>1</value>
</property>
<property property_name="uix_enableLogoBlock" group_name="headerNav" title="Enable logo block" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_enableMainTabs" group_name="uix_globalSettings" title="Main page tabs" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_enableWelcomeHeaderImage" group_name="uix_welcomeSection" title="Welcome block image hero" description="Adds the welcome block image to the entire header component. (Note: only applicable when welcome block is in header)" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_extendedFooterOrder" group_name="footer" title="Extended footer order" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="0" addon_id="">
<value>"20"</value>
</property>
<property property_name="uix_extendedFooterStyle" group_name="footer" title="Extended Footer" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "rgba(0,0,0,.75)",
"border-top-width": "0",
"border-top-color": "@xf-borderColor",
"padding-top": "@xf-paddingLargest * 2",
"padding-bottom": "@xf-paddingLargest * 2",
"extra": "border-bottom-left-radius: @xf-borderRadiusMedium;\nborder-bottom-right-radius: @xf-borderRadiusMedium;\nbox-shadow: 0 2px 0px rgba(0,0,0,0.2);"
}</value>
</property>
<property property_name="uix_extendedFooter__whiteText" group_name="footer" title="Extended Footer White Text" description="Checking this option will add CSS to make all text white for legibility. Only use this Style Property if you have a dark background that is causing legibility issues. (Most often useful for a dark footer on a light theme.)" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2400" addon_id="">
<value>1</value>
</property>
<property property_name="uix_externalLinkIcon" group_name="uix_icons" title="Add Icon for external links" description="If enabled, will add the Open In New icon to external anchors. This uses the board options for the site url and home url." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="100" addon_id="">
<value>1</value>
</property>
<property property_name="uix_fab" group_name="button" title="Page action as floating action button" description="Adds the page action as a floating action button" property_type="value" value_type="select" depends_on="" value_group="" display_order="1000" addon_id="">
<value_parameters>never=Never
mobile=Mobile
always=Always</value_parameters>
<value>"mobile"</value>
</property>
<property property_name="uix_fabBarBackground" group_name="button" title="Floating action button placeholder background color" description="Sets the background color of the placeholder spacer in the footer." property_type="value" value_type="color" depends_on="" value_group="" display_order="1300" addon_id="">
<value>"@xf-contentBg"</value>
</property>
<property property_name="uix_fabScroll" group_name="button" title="Show FAB on scroll up only" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1200" addon_id="">
<value>1</value>
</property>
<property property_name="uix_fabVw" group_name="button" title="Floating action button Viewport width" description="Sets the minimum viewport width to hide the floating action button" property_type="value" value_type="string" depends_on="uix_fab" value_group="" display_order="1100" addon_id="">
<value>"@xf-responsiveMedium"</value>
</property>
<property property_name="uix_footerChooser" group_name="footer" title="Footer chooser" description="Styles the footer chooser (ex. style chooser, width toggle, language chooser)" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,extra" addon_id="">
<value>{
"color": "rgba(255,255,255,.5)",
"background-color": "rgba(0,0,0,.2)"
}</value>
</property>
<property property_name="uix_footerChooserHover" group_name="footer" title="Footer chooser hover" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,extra" addon_id="">
<value>{
"color": "#fff",
"background-color": "rgba(0,0,0,.3)"
}</value>
</property>
<property property_name="uix_footerCopyrightRow" group_name="footer" title="Footer copyright row" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorMuted",
"border-top-width": "0",
"border-top-color": "@xf-borderColor",
"padding-top": "@xf-paddingLarge",
"padding-bottom": "@xf-paddingLarge"
}</value>
</property>
<property property_name="uix_footerIcons" group_name="footer" title="Footer widget icons" description="Adds icons to the footer widget titles" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2200" addon_id="">
<value>1</value>
</property>
<property property_name="uix_footerInsideContent" group_name="footer" title="Move footer inside main content" description="Moves the footer into the main content, as opposed to being full width at the bottom" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1300" addon_id="">
<value>0</value>
</property>
<property property_name="uix_footerLinkHover" group_name="footer" title="Footer links hover" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,extra" addon_id="">
<value>{
"color": "#fff",
"extra": "text-decoration: none;"
}</value>
</property>
<property property_name="uix_footerMenu" group_name="footer" title="Footer menu" description="Styles the footer menu bar" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-image": "linear-gradient(to bottom, #2a2a2a 1%, #191919 100%)",
"padding-top": "@xf-paddingSmall",
"padding-bottom": "@xf-paddingSmall",
"extra": "border-top-left-radius: @xf-borderRadiusMedium;\nborder-top-right-radius: @xf-borderRadiusMedium;"
}</value>
</property>
<property property_name="uix_footerMenuOrder" group_name="footer" title="Footer menu order" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="10" addon_id="">
<value>"10"</value>
</property>
<property property_name="uix_footerWidget" group_name="footer" title="Footer widget" description="Styles the widget block" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"background-color": "none",
"border-width": "0",
"extra": "box-shadow: none;"
}</value>
</property>
<property property_name="uix_footerWidgetBody" group_name="footer" title="Footer Widget body" description="Styles the body of the footer widgets" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_footerWidgetFooter" group_name="footer" title="Footer widget footer" description="Styles the footer area of widgets in the footer." property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "none",
"padding-right": "0",
"padding-bottom": "0",
"padding-left": "0"
}</value>
</property>
<property property_name="uix_footerWidgetHeader" group_name="footer" title="Footer widget header" description="Styles the minor heading block is footer widgets" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"background-color": "none",
"border-bottom-width": "0",
"padding": "0",
"padding-bottom": "@xf-paddingMedium"
}</value>
</property>
<property property_name="uix_footerWidgetPadding" group_name="footer" title="Footer widget spacing" description="Sets the spacing in between each widget." property_type="value" value_type="unit" depends_on="" value_group="" display_order="2100" addon_id="">
<value>"@xf-paddingLarge"</value>
</property>
<property property_name="uix_footerWidgetRow" group_name="footer" title="Footer Widget Row" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"padding-right": "0",
"padding-left": "0"
}</value>
</property>
<property property_name="uix_footerWidgetWidth" group_name="footer" title="Footer widget preferred width" description="Set the preferred widget size. (Uses flex-basis)" property_type="value" value_type="unit" depends_on="" value_group="" display_order="2000" addon_id="">
<value>"280px"</value>
</property>
<property property_name="uix_forceCoverCopyright" group_name="footer" title="Force cover copyright row" description="Forces the copyright row to be full width regardless of the Page Setup > Page Style style property." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1200" addon_id="">
<value>0</value>
</property>
<property property_name="uix_forceCoverExtendedFooter" group_name="footer" title="Force cover extended footer" description="Forces the extended footer row to be full width regardless of the Page Setup > Page Style style property." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1000" addon_id="">
<value>0</value>
</property>
<property property_name="uix_forceCoverFooterMenu" group_name="footer" title="Force cover footer menu" description="Forces the footer menu row to be full width regardless of the Page Setup > Page Style style property." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1100" addon_id="">
<value>0</value>
</property>
<property property_name="uix_glyphForumIcon" group_name="uix_nodeIcons" title="Forum icon" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="1000" addon_id="">
<value>"@xf-uix_icon_forum"</value>
</property>
<property property_name="uix_glyphLinkIcon" group_name="uix_nodeIcons" title="Link icon" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="1100" addon_id="">
<value>"@xf-uix_icon_link"</value>
</property>
<property property_name="uix_glyphPageIcon" group_name="uix_nodeIcons" title="Page icon" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="1200" addon_id="">
<value>"@xf-uix_icon_page"</value>
</property>
<property property_name="uix_googleFonts" group_name="fonts" title="Google Fonts" description="Choose the fonts in which to load from Google Fonts API." property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"Puritan:400,700|Droid+Sans:400,700"</value>
</property>
<property property_name="uix_headerWhiteSpace" group_name="headerNav" title="Header whitespace" description="Pixel value of the margin between navigation, user bar, and logo block" property_type="value" value_type="unit" depends_on="" value_group="" display_order="0" addon_id="">
<value>"16px"</value>
</property>
<property property_name="uix_headerWrapper" group_name="headerNav" title="Header wrapper" description="Styles the wrapper around the entire header" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,border_radius,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_headingFont" group_name="fonts" title="Secondary font" description="Font family used for headings and other decorative text situations." property_type="value" value_type="string" depends_on="" value_group="" display_order="210" addon_id="">
<value>"'Droid Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"</value>
</property>
<property property_name="uix_headingFontWeight" group_name="fonts" title="Heading font weight regular" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="2210" addon_id="">
<value>"400"</value>
</property>
<property property_name="uix_headingFontWeightHeavy" group_name="fonts" title="Heading font weight (heavy)" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="2220" addon_id="">
<value>"700"</value>
</property>
<property property_name="uix_hideElementsDuringJSLoad" group_name="uix_globalSettings" title="Hide elements during javascript loading" description="Disabling this will potentially cause flashes of unstyled content, but may be necessary for some caches or CDNs." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="3000" addon_id="">
<value>1</value>
</property>
<property property_name="uix_hideExtendedFooterMobile" group_name="footer" title="Hide extended footer for mobile" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="150" addon_id="">
<value>0</value>
</property>
<property property_name="uix_hideNodeLastPost" group_name="nodeList" title="Hide node last post" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2100" addon_id="">
<value>0</value>
</property>
<property property_name="uix_hideNodeStats" group_name="nodeList" title="Hide node stats" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2200" addon_id="">
<value>0</value>
</property>
<property property_name="uix_hideSingleCrumb" group_name="uix_breadcrumb" title="Ignore home link when checking "content checking" breadcrumb" description="Removes the breadcrumb when the only crumb is the home link" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="300" addon_id="">
<value>0</value>
</property>
<property property_name="uix_hideStyleChoose" group_name="footer" title="Hide footer style chooser" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2300" addon_id="">
<value>0</value>
</property>
<property property_name="uix_homeCrumbIcon" group_name="uix_breadcrumb" title="Home breadcrumb as icon" description="Swaps out the "home" text in the breadcrumb for the home icon" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="600" addon_id="">
<value>1</value>
</property>
<property property_name="uix_iconFont" group_name="uix_icons" title="Icon font" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="extra" addon_id="">
<value>{
"extra": "display: inline-block;\nfont: normal normal normal 18px/1 \"Material Design Icons\";\nfont-size: inherit;\ntext-rendering: auto;\nline-height: 1;\n-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;\ntransform: translate(0, 0);\nwidth: auto !important;"
}</value>
</property>
<property property_name="uix_iconSize" group_name="uix_icons" title="Icon font size" description="" property_type="value" value_type="unit" depends_on="" value_group="" display_order="0" addon_id="">
<value>"18px"</value>
</property>
<property property_name="uix_iconSizeLarge" group_name="uix_icons" title="Icon large font size" description="" property_type="value" value_type="unit" depends_on="" value_group="" display_order="0" addon_id="">
<value>"24px"</value>
</property>
<property property_name="uix_icon_alert" group_name="uix_icons" title="Alert" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f09a"</value>
</property>
<property property_name="uix_icon_alertOff" group_name="uix_icons" title="Alert (off)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f09b"</value>
</property>
<property property_name="uix_icon_apple" group_name="uix_icons" title="Apple" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f035"</value>
</property>
<property property_name="uix_icon_arrowDown" group_name="uix_icons" title="Arrow down" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f045"</value>
</property>
<property property_name="uix_icon_arrowLeft" group_name="uix_icons" title="Arrow left" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f04d"</value>
</property>
<property property_name="uix_icon_arrowRight" group_name="uix_icons" title="Arrow right" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f054"</value>
</property>
<property property_name="uix_icon_arrowUp" group_name="uix_icons" title="Arrow up" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f05d"</value>
</property>
<property property_name="uix_icon_arrowUpVariant" group_name="uix_icons" title="Arrow up (variant)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f05f"</value>
</property>
<property property_name="uix_icon_article" group_name="uix_icons" title="Article" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f21a"</value>
</property>
<property property_name="uix_icon_attachment" group_name="uix_icons" title="Attachment" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f066"</value>
</property>
<property property_name="uix_icon_attention" group_name="uix_icons" title="Attention" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f0e6"</value>
</property>
<property property_name="uix_icon_audio" group_name="uix_icons" title="Audio" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f759"</value>
</property>
<property property_name="uix_icon_birthday" group_name="uix_icons" title="Birthday" description="Styles the birthday (or age) label for users" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f0eb"</value>
</property>
<property property_name="uix_icon_bookmark" group_name="uix_icons" title="Bookmark" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f0c0"</value>
</property>
<property property_name="uix_icon_brush" group_name="uix_icons" title="Brush" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f0e3"</value>
</property>
<property property_name="uix_icon_camera" group_name="uix_icons" title="Camera" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f100"</value>
</property>
<property property_name="uix_icon_check" group_name="uix_icons" title="Check" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f5e0"</value>
</property>
<property property_name="uix_icon_checkbox" group_name="uix_icons" title="Checkbox (unchecked)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f131"</value>
</property>
<property property_name="uix_icon_checkboxChecked" group_name="uix_icons" title="Checkbox (checked)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f135"</value>
</property>
<property property_name="uix_icon_chevronDown" group_name="uix_icons" title="Chevron down" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f140"</value>
</property>
<property property_name="uix_icon_chevronLeft" group_name="uix_icons" title="Chevron left" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f141"</value>
</property>
<property property_name="uix_icon_chevronRight" group_name="uix_icons" title="Chevron right" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f142"</value>
</property>
<property property_name="uix_icon_chevronUp" group_name="uix_icons" title="Chevron up" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f143"</value>
</property>
<property property_name="uix_icon_clock" group_name="uix_icons" title="Clock" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f150"</value>
</property>
<property property_name="uix_icon_clone" group_name="uix_icons" title="Clone" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f191"</value>
</property>
<property property_name="uix_icon_close" group_name="uix_icons" title="Close" description="Such as closing modals, canvas navigation" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f156"</value>
</property>
<property property_name="uix_icon_collapse" group_name="uix_icons" title="Collapse" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f615"</value>
</property>
<property property_name="uix_icon_commentAlert" group_name="uix_icons" title="Comment alert" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f17d"</value>
</property>
<property property_name="uix_icon_commentMultiple" group_name="uix_icons" title="Comments (multiple)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f181"</value>
</property>
<property property_name="uix_icon_convert" group_name="uix_icons" title="Convert" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4e1"</value>
</property>
<property property_name="uix_icon_delete" group_name="uix_icons" title="Delete" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f1c0"</value>
</property>
<property property_name="uix_icon_disable" group_name="uix_icons" title="Disable" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f697"</value>
</property>
<property property_name="uix_icon_download" group_name="uix_icons" title="Download" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f1da"</value>
</property>
<property property_name="uix_icon_earth" group_name="uix_icons" title="Earth" description="Used for translate" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f1e7"</value>
</property>
<property property_name="uix_icon_edit" group_name="uix_icons" title="Edit" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f3eb"</value>
</property>
<property property_name="uix_icon_email" group_name="uix_icons" title="Email" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f1ee"</value>
</property>
<property property_name="uix_icon_embed" group_name="uix_icons" title="Embed" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f167"</value>
</property>
<property property_name="uix_icon_expand" group_name="uix_icons" title="Expand" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f616"</value>
</property>
<property property_name="uix_icon_export" group_name="uix_icons" title="Export" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f207"</value>
</property>
<property property_name="uix_icon_facebook" group_name="uix_icons" title="Facebook" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f20c"</value>
</property>
<property property_name="uix_icon_file" group_name="uix_icons" title="File" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f214"</value>
</property>
<property property_name="uix_icon_fileDocument" group_name="uix_icons" title="File (Document)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f219"</value>
</property>
<property property_name="uix_icon_folder" group_name="uix_icons" title="Folder" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f24b"</value>
</property>
<property property_name="uix_icon_forum" group_name="uix_icons" title="Forum" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f36a"</value>
</property>
<property property_name="uix_icon_github" group_name="uix_icons" title="GitHub" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f6da"</value>
</property>
<property property_name="uix_icon_googlePlus" group_name="uix_icons" title="Google+" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f2bd"</value>
</property>
<property property_name="uix_icon_graph" group_name="uix_icons" title="Graph" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f128"</value>
</property>
<property property_name="uix_icon_grid" group_name="uix_icons" title="Grid" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f570"</value>
</property>
<property property_name="uix_icon_help" group_name="uix_icons" title="Help" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f625"</value>
</property>
<property property_name="uix_icon_history" group_name="uix_icons" title="History" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f2da"</value>
</property>
<property property_name="uix_icon_home" group_name="uix_icons" title="Home" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f2dc"</value>
</property>
<property property_name="uix_icon_ignored" group_name="uix_icons" title="Ignored" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f36d"</value>
</property>
<property property_name="uix_icon_import" group_name="uix_icons" title="Import" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f2fa"</value>
</property>
<property property_name="uix_icon_inbox" group_name="uix_icons" title="Inbox" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f1ee"</value>
</property>
<property property_name="uix_icon_info" group_name="uix_icons" title="Info" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f2fc"</value>
</property>
<property property_name="uix_icon_instagram" group_name="uix_icons" title="Instagram" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f2fe"</value>
</property>
<property property_name="uix_icon_ipAddress" group_name="uix_icons" title="IP address" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f5d2"</value>
</property>
<property property_name="uix_icon_like" group_name="uix_icons" title="Like (thumbs up)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f513"</value>
</property>
<property property_name="uix_icon_link" group_name="uix_icons" title="Link" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f339"</value>
</property>
<property property_name="uix_icon_linkedin" group_name="uix_icons" title="LinkedIn" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f33b"</value>
</property>
<property property_name="uix_icon_list" group_name="uix_icons" title="List" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f279"</value>
</property>
<property property_name="uix_icon_location" group_name="uix_icons" title="Location" description="location for users" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f34e"</value>
</property>
<property property_name="uix_icon_lock" group_name="uix_icons" title="Lock" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f33e"</value>
</property>
<property property_name="uix_icon_login" group_name="uix_icons" title="Login" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f306"</value>
</property>
<property property_name="uix_icon_media" group_name="uix_icons" title="Media" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f2e9"</value>
</property>
<property property_name="uix_icon_menu" group_name="uix_icons" title="Menu" description="Ex. Canvas navigation trigger" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f35c"</value>
</property>
<property property_name="uix_icon_menuDown" group_name="uix_icons" title="Menu Down" description="Ex. Arrow for dropdown menus" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f35d"</value>
</property>
<property property_name="uix_icon_menuLeft" group_name="uix_icons" title="Menu left" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f35e"</value>
</property>
<property property_name="uix_icon_menuRight" group_name="uix_icons" title="Menu right" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f35f"</value>
</property>
<property property_name="uix_icon_menuUp" group_name="uix_icons" title="Menu Up" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f360"</value>
</property>
<property property_name="uix_icon_merge" group_name="uix_icons" title="Merge" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f0f8"</value>
</property>
<property property_name="uix_icon_messages" group_name="uix_icons" title="Messages" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f28c"</value>
</property>
<property property_name="uix_icon_microsoft" group_name="uix_icons" title="Microsoft" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f372"</value>
</property>
<property property_name="uix_icon_minus" group_name="uix_icons" title="Minus" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f374"</value>
</property>
<property property_name="uix_icon_moderate" group_name="uix_icons" title="Moderate" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f498"</value>
</property>
<property property_name="uix_icon_move" group_name="uix_icons" title="Move" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f1b6"</value>
</property>
<property property_name="uix_icon_newThread" group_name="uix_icons" title="New thread" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f653"</value>
</property>
<property property_name="uix_icon_openInNew" group_name="uix_icons" title="Open In New" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f3cc"</value>
</property>
<property property_name="uix_icon_page" group_name="uix_icons" title="Page" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f219"</value>
</property>
<property property_name="uix_icon_payment" group_name="uix_icons" title="Payment" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f19b"</value>
</property>
<property property_name="uix_icon_pinterest" group_name="uix_icons" title="Pinterest" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f407"</value>
</property>
<property property_name="uix_icon_plus" group_name="uix_icons" title="Plus" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f415"</value>
</property>
<property property_name="uix_icon_poll" group_name="uix_icons" title="Poll" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f41f"</value>
</property>
<property property_name="uix_icon_post" group_name="uix_icons" title="Post" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f361"</value>
</property>
<property property_name="uix_icon_quote" group_name="uix_icons" title="Quote" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f27e"</value>
</property>
<property property_name="uix_icon_radio" group_name="uix_icons" title="Radio (unselected)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f43d"</value>
</property>
<property property_name="uix_icon_radioSelected" group_name="uix_icons" title="Radio (selected)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f43e"</value>
</property>
<property property_name="uix_icon_rate" group_name="uix_icons" title="Rate" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4d0"</value>
</property>
<property property_name="uix_icon_reddit" group_name="uix_icons" title="Reddit" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f44d"</value>
</property>
<property property_name="uix_icon_redirect" group_name="uix_icons" title="Redirect" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f60d"</value>
</property>
<property property_name="uix_icon_refresh" group_name="uix_icons" title="Refresh" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f450"</value>
</property>
<property property_name="uix_icon_register" group_name="uix_icons" title="Register" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f14e"</value>
</property>
<property property_name="uix_icon_reply" group_name="uix_icons" title="Reply" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f45a"</value>
</property>
<property property_name="uix_icon_report" group_name="uix_icons" title="Report" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f029"</value>
</property>
<property property_name="uix_icon_resource" group_name="uix_icons" title="Resource" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f1df"</value>
</property>
<property property_name="uix_icon_rss" group_name="uix_icons" title="RSS" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f46b"</value>
</property>
<property property_name="uix_icon_save" group_name="uix_icons" title="Save" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f193"</value>
</property>
<property property_name="uix_icon_search" group_name="uix_icons" title="Search" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f349"</value>
</property>
<property property_name="uix_icon_searchMember" group_name="uix_icons" title="Search (member)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f016"</value>
</property>
<property property_name="uix_icon_searchPlus" group_name="uix_icons" title="Search (plus)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f34b"</value>
</property>
<property property_name="uix_icon_settings" group_name="uix_icons" title="Settings" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f493"</value>
</property>
<property property_name="uix_icon_share" group_name="uix_icons" title="Share" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f497"</value>
</property>
<property property_name="uix_icon_shoppingCart" group_name="uix_icons" title="Shopping cart" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f110"</value>
</property>
<property property_name="uix_icon_sort" group_name="uix_icons" title="Sort" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4ba"</value>
</property>
<property property_name="uix_icon_soundcloud" group_name="uix_icons" title="Soundcloud" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4c0"</value>
</property>
<property property_name="uix_icon_spam" group_name="uix_icons" title="Spam" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f0fe"</value>
</property>
<property property_name="uix_icon_spotify" group_name="uix_icons" title="Spotify" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4c7"</value>
</property>
<property property_name="uix_icon_star" group_name="uix_icons" title="Star" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4ce"</value>
</property>
<property property_name="uix_icon_starEmpty" group_name="uix_icons" title="Star (empty)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4d2"</value>
</property>
<property property_name="uix_icon_starHalf" group_name="uix_icons" title="Star (half)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4d0"</value>
</property>
<property property_name="uix_icon_statistics" group_name="uix_icons" title="Statistics" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f127"</value>
</property>
<property property_name="uix_icon_sticky" group_name="uix_icons" title="Sticky" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f403"</value>
</property>
<property property_name="uix_icon_tagMultiple" group_name="uix_icons" title="Tags (multiple)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f4fb"</value>
</property>
<property property_name="uix_icon_toggleOff" group_name="uix_icons" title="Toggle Off" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f522"</value>
</property>
<property property_name="uix_icon_toggleOn" group_name="uix_icons" title="Toggle On" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f521"</value>
</property>
<property property_name="uix_icon_trophy" group_name="uix_icons" title="Trophy" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f538"</value>
</property>
<property property_name="uix_icon_tumblr" group_name="uix_icons" title="Tumblr" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f541"</value>
</property>
<property property_name="uix_icon_twitch" group_name="uix_icons" title="Twitch" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f543"</value>
</property>
<property property_name="uix_icon_twitter" group_name="uix_icons" title="Twitter" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f544"</value>
</property>
<property property_name="uix_icon_unlike" group_name="uix_icons" title="Unlike (thumbs down)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f511"</value>
</property>
<property property_name="uix_icon_unlock" group_name="uix_icons" title="Unlock" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f33f"</value>
</property>
<property property_name="uix_icon_upload" group_name="uix_icons" title="Upload" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f552"</value>
</property>
<property property_name="uix_icon_user" group_name="uix_icons" title="User" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f004"</value>
</property>
<property property_name="uix_icon_userMultiple" group_name="uix_icons" title="Users (multiple)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f00e"</value>
</property>
<property property_name="uix_icon_video" group_name="uix_icons" title="Video" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f567"</value>
</property>
<property property_name="uix_icon_vimeo" group_name="uix_icons" title="Vimeo" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f577"</value>
</property>
<property property_name="uix_icon_warn" group_name="uix_icons" title="Warn" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f026"</value>
</property>
<property property_name="uix_icon_warning" group_name="uix_icons" title="Warning" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f026"</value>
</property>
<property property_name="uix_icon_watched" group_name="uix_icons" title="Watched" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f208"</value>
</property>
<property property_name="uix_icon_web" group_name="uix_icons" title="Website (or web)" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f59f"</value>
</property>
<property property_name="uix_icon_whatsNew" group_name="uix_icons" title="What's new" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f17d"</value>
</property>
<property property_name="uix_icon_whatsapp" group_name="uix_icons" title="Whatsapp" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f5a3"</value>
</property>
<property property_name="uix_icon_youtube" group_name="uix_icons" title="YouTube" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"\\f5c3"</value>
</property>
<property property_name="uix_imageForumIcon" group_name="uix_nodeIcons" title="Image forum icon" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,padding,extra" addon_id="">
<value>{
"background-image": "@xf-uix_imagePath/images/nodeicons.png",
"extra": "background-repeat: no-repeat;\nbackground-position: -32px 0;"
}</value>
</property>
<property property_name="uix_imageForumUnreadIcon" group_name="uix_nodeIcons" title="Image forum unread icon" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,padding,extra" addon_id="">
<value>{
"background-image": "@xf-uix_imagePath/images/nodeicons.png",
"extra": "background-repeat: no-repeat;\nbackground-position: 0 0;"
}</value>
</property>
<property property_name="uix_imageIcon" group_name="uix_nodeIcons" title="Image icon" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,padding,extra" addon_id="">
<value>{
"extra": "width: 32px;\nheight: 32px;"
}</value>
</property>
<property property_name="uix_imageLinkIcon" group_name="uix_nodeIcons" title="Image link icon" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,padding,extra" addon_id="">
<value>{
"background-image": "@xf-uix_imagePath/images/nodeicons.png",
"extra": "background-repeat: no-repeat;\nbackground-position: -64px 0;"
}</value>
</property>
<property property_name="uix_imagePageIcon" group_name="uix_nodeIcons" title="Image page icon" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,padding,extra" addon_id="">
<value>{
"background-image": "@xf-uix_imagePath/images/nodeicons.png",
"extra": "background-repeat: no-repeat;\nbackground-position: -96px 0;"
}</value>
</property>
<property property_name="uix_imagePath" group_name="basic" title="Image path" description="Sets the path to images for the theme." property_type="value" value_type="string" depends_on="" value_group="" display_order="0" addon_id="">
<value>"styles/class"</value>
</property>
<property property_name="uix_jsPath" group_name="uix_globalSettings" title="Javascript Path" description="The path to the theme's javascript directory relative to /js/themehouse/ . Allows for multiple versions of UI.X and/or Audentio.com products to be installed and not share the same javascript functions. Only change this if you are certain you should be." property_type="value" value_type="string" depends_on="" value_group="theme" display_order="10000" addon_id="">
<value>"class"</value>
</property>
<property property_name="uix_localMaterialIcons" group_name="uix_icons" title="Load Material Icons locally" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_loginStyle" group_name="headerNav" title="Login trigger style" description="The method in which the login form displays once the trigger is activated." property_type="value" value_type="select" depends_on="" value_group="" display_order="2210" addon_id="">
<value_parameters>modal=Modal
dropdown=Dropdown
link=Link
slidingPanel=Sliding Panel</value_parameters>
<value>"dropdown"</value>
</property>
<property property_name="uix_loginTriggerPosition" group_name="headerNav" title="Login triggers position" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="2220" addon_id="">
<value_parameters>staffBar=Staff bar
navigation=Navigation
tablinks=Sub navigation</value_parameters>
<value>"navigation"</value>
</property>
<property property_name="uix_logoBlockSearch" group_name="uix_search" title="Search in logo block" description="Moves the search component to logo block if logo block is enabled and viewport width is above the minimum width to show the logo block. Both of these options are set in Header and Navigation." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_logoIcon" group_name="basic" title="Logo icon" description="Adds a CSS font icon when logo text is applicable." property_type="value" value_type="string" depends_on="" value_group="logo_text" display_order="1200" addon_id="">
<value>""</value>
</property>
<property property_name="uix_logoIconStyle" group_name="basic" title="Logo icon" description="Styles the logo icon" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"font-size": "36px",
"padding-right": "@xf-paddingMedium"
}</value>
</property>
<property property_name="uix_logoSmall" group_name="basic" title="Logo small image path" description="If left blank, will default to main logo path" property_type="value" value_type="string" depends_on="" value_group="" display_order="500" addon_id="">
<value>""</value>
</property>
<property property_name="uix_logoText" group_name="basic" title="Logo text" description="Adds text in place of a logo. Note: this is overwritten when a logo image path is set" property_type="value" value_type="string" depends_on="" value_group="logo_text" display_order="1100" addon_id="">
<value>"Class"</value>
</property>
<property property_name="uix_logoTextBreakpoint" group_name="basic" title="Logo text breakpoint" description="The device width under which the logo text changes font-size." property_type="value" value_type="string" depends_on="" value_group="logo_text" display_order="1400" addon_id="">
<value>"@xf-responsiveMedium"</value>
</property>
<property property_name="uix_logoText__style" group_name="basic" title="Logo text" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeLargest",
"color": "#fff",
"extra": "margin: 0;\nfont-family: @xf-uix_headingFont;"
}</value>
</property>
<property property_name="uix_logoWidth" group_name="basic" title="Logo width" description="Sets the width for logo" property_type="value" value_type="unit" depends_on="" value_group="" display_order="700" addon_id="">
<value>"156px"</value>
</property>
<property property_name="uix_materialAvatars" group_name="avatar" title="Enable material avatars" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="5" addon_id="">
<value>1</value>
</property>
<property property_name="uix_message" group_name="message" title="Message" description="Styles the message container" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "@xf-contentBg",
"background-image": "@xf-uix_imagePath/class/images/primary-content-bg.gif",
"border-width": "1px",
"border-color": "@xf-borderColor",
"border-radius": "0",
"border-top-width": "0",
"extra": "margin: 0 !important;"
}</value>
</property>
<property property_name="uix_messageActionBar" group_name="message" title="Message action bar" description="Styles the action bar for messages" property_type="css" value_type="" depends_on="" value_group="" display_order="20040" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"padding": "@xf-messagePadding",
"padding-top": "0",
"extra": "margin: -@xf-messagePadding;\nmargin-top: 0;"
}</value>
</property>
<property property_name="uix_messageAnimation" group_name="misc" title="Message animation" description="Adds an animation to messages on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3300" addon_id="">
<value>0</value>
</property>
<property property_name="uix_messageAttachments" group_name="message" title="Message attachments" description="Styles the container for the message attachments component." property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,padding,extra" addon_id="">
<value>{
"background-color": "@xf-contentHighlightBg",
"padding": "@xf-messagePadding;",
"extra": "margin-top: 0;\nmargin-bottom: @xf-messagePadding;"
}</value>
</property>
<property property_name="uix_messageBody" group_name="message" title="Message body" description="Styles the body (main content) of message" property_type="css" value_type="" depends_on="" value_group="" display_order="20010" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"padding-bottom": "@xf-messagePadding",
"extra": "margin: 0;"
}</value>
</property>
<property property_name="uix_messageControl" group_name="message" title="Message control" description="Styles the message actions such as reply and report" property_type="css" value_type="" depends_on="" value_group="" display_order="20050" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorMuted",
"background-color": "@xf-contentBg",
"border-width": "1px",
"border-color": "@xf-borderColor",
"padding": "5px",
"extra": "border-radius: 2px;"
}</value>
</property>
<property property_name="uix_messageControlHover" group_name="message" title="Message control (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20060" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorDimmed"
}</value>
</property>
<property property_name="uix_messageLikes" group_name="message" title="Message like bar" description="Styles the "Likes" bar for messages" property_type="css" value_type="" depends_on="" value_group="" display_order="20030" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "none",
"border-width": "0",
"padding": "0",
"padding-bottom": "@xf-messagePadding",
"extra": "margin: 0;"
}</value>
</property>
<property property_name="uix_messageMain" group_name="message" title="Message Main" description="Styles the main section of message" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_messageMeta" group_name="message" title="Message meta bar" description="Styles the meta (attribution bar), which houses the post date and post number" property_type="css" value_type="" depends_on="" value_group="" display_order="20020" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"border-width": "0",
"padding-bottom": "@xf-messagePadding",
"extra": "display: flex;\nalign-items: center;\njustify-content: space-between;"
}</value>
</property>
<property property_name="uix_messageNotice" group_name="message" title="Message notice" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"background-color": "@xf-contentHighlightBg",
"extra": "margin-top: 0;"
}</value>
</property>
<property property_name="uix_metaCell" group_name="uix_discussionList" title="Meta cell (for discussion list)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border" addon_id="">
<value>{
"border-right-width": "1px",
"border-right-color": "@xf-borderColor",
"border-left-width": "1px",
"border-left-color": "@xf-borderColor"
}</value>
</property>
<property property_name="uix_navAboveHeader" group_name="headerNav" title="Move navigation above logo block" description="Moves the main navigation above the logo block/header component" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_navLogoVertSpacing" group_name="basic" title="Navigation logo vertical spacing" description="The max height of the navigation logo is the height of the navigation bar minus these spacings, however it may be smaller when there is not enough horizontal width." property_type="value" value_type="unit" depends_on="" value_group="" display_order="0" addon_id="">
<value>"11px"</value>
</property>
<property property_name="uix_navTabIconStyle" group_name="headerNav" title="Nav tab icon style" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"font-size": "@xf-uix_iconSize !important",
"padding-right": "@xf-paddingSmall"
}</value>
</property>
<property property_name="uix_navTabIcons" group_name="headerNav" title="Navigation tab icons" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2040" addon_id="">
<value>0</value>
</property>
<property property_name="uix_navigationBarHeight" group_name="headerNav" title="Navigation bar height" description="Sets the height of the primary navigation bar. (Note: this gets overwritten by sticky nav bar height when applicable. If unset, the navigation bar height will simply be as large as the largest component inside of it.)" property_type="value" value_type="unit" depends_on="" value_group="" display_order="2010" addon_id="">
<value>"56px"</value>
</property>
<property property_name="uix_navigationType" group_name="headerNav" title="Navigation type" description="Sets the type of navigation style." property_type="value" value_type="select" depends_on="" value_group="" display_order="2100" addon_id="">
<value_parameters>default=Default
sidebarNav=Sidebar navigation</value_parameters>
<value>"default"</value>
</property>
<property property_name="uix_newNodeMarker" group_name="nodeList" title="New node indicator" description="Will display a new indicator next to the node title if there is new content" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2000" addon_id="">
<value>1</value>
</property>
<property property_name="uix_newNodeMarkerStyle" group_name="nodeList" title="New node indicator" description="Styles the new node indicator if enabled" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"font-size": "12px",
"color": "#fff",
"background-color": "@xf-uix_secondaryColor",
"border-radius": "@xf-borderRadiusSmall",
"padding-top": "1px",
"padding-right": "4px",
"padding-bottom": "1px",
"padding-left": "4px"
}</value>
</property>
<property property_name="uix_nodeAnimations" group_name="misc" title="Node animations" description="" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3600" addon_id="">
<value>0</value>
</property>
<property property_name="uix_nodeBlockBody" group_name="nodeList" title="Block Body (for nodes)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,border_radius,padding,extra" addon_id="">
<value>{
"border-radius": "@xf-borderRadiusSmall"
}</value>
</property>
<property property_name="uix_nodeBody" group_name="nodeList" title="Node body" description="Styles the individual node body" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"extra": "box-shadow: @xf-uix_elevation1;"
}</value>
</property>
<property property_name="uix_nodeBodyEven" group_name="nodeList" title="Node body (even)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="2600" addon_id="">
<value>""</value>
</property>
<property property_name="uix_nodeBodyHover" group_name="nodeList" title="Node body (hover)" description="Adds a hover state to nodes" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,extra" addon_id="">
<value>{
"extra": "position: relative;"
}</value>
</property>
<property property_name="uix_nodeClickable" group_name="nodeList" title="Clickable nodes" description="Makes the entire node a clickable link to the forum. (Ignores other inner links.)" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2050" addon_id="">
<value>0</value>
</property>
<property property_name="uix_nodeContainer" group_name="nodeList" title="Node Container" description="Styles the block-container for level 1 nodes" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>{
"extra": "box-shadow: none;"
}</value>
</property>
<property property_name="uix_nodeDescription" group_name="nodeList" title="Node Description" description="Styles the description of level 2 nodes" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "@xf-textColorMuted",
"extra": "line-height: 1.5;"
}</value>
</property>
<property property_name="uix_nodeIconImages" group_name="uix_nodeIcons" title="Use images for node icons" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2000" addon_id="">
<value>0</value>
</property>
<property property_name="uix_nodeIconStyle" group_name="nodeList" title="Node icon style" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"font-size": "32px"
}</value>
</property>
<property property_name="uix_nodeIconWidth" group_name="uix_nodeIcons" title="Node icon width" description="Sets the width for the node icon container (not the actual icon itself)" property_type="value" value_type="unit" depends_on="" value_group="" display_order="100" addon_id="">
<value>"46px"</value>
</property>
<property property_name="uix_nodePadding" group_name="nodeList" title="Node padding" description="" property_type="value" value_type="unit" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-paddingMedium"</value>
</property>
<property property_name="uix_nodeStatsHover" group_name="nodeList" title="Show node stats only on hover" description="Hides the node stats, and displays them only when hovering over the node" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2300" addon_id="">
<value>0</value>
</property>
<property property_name="uix_nodeStatsIcons" group_name="nodeList" title="Node stats as icons" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2400" addon_id="">
<value>1</value>
</property>
<property property_name="uix_nodeTitle" group_name="nodeList" title="Node Title" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeLarge",
"color": "@xf-textColor",
"font-weight": "@xf-fontWeightNormal",
"extra": "margin: 0;\nmargin-top: 5px;\nfont-family: @xf-uix_headingFont;"
}</value>
</property>
<property property_name="uix_nodeTitle__unread" group_name="nodeList" title="Node Title (Unread)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_noticeLocation" group_name="page" title="Block notice location" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="0" addon_id="">
<value_parameters>aboveMainContainer=Default (above main container)
mainContainerTop= Top of main container
aboveMainContent=Above main content
mainContentTop=Top of main content</value_parameters>
<value>"mainContentTop"</value>
</property>
<property property_name="uix_overlayBlur" group_name="overlay" title="Overlay blur effect" description="Adds a blur effect to overlays" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_pageAnimation" group_name="misc" title="Page animations" description="Adds animations to main components (header, sidebars, main content, footer) on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3000" addon_id="">
<value>0</value>
</property>
<property property_name="uix_pageStyle" group_name="page" title="Page style" description="Sets the overall page style for the theme." property_type="value" value_type="select" depends_on="" value_group="" display_order="4000" addon_id="">
<value_parameters>covered=Default (covered)
fixed=Fixed
wrapped=Wrapped</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="uix_pageTitle" group_name="uix_globalSettings" title="Page title" description="Styles the h1 in titlebar" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,border,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeLargest",
"color": "@xf-textColor",
"extra": "font-family: @xf-uix_headingFont;"
}</value>
</property>
<property property_name="uix_pageWidthToggle" group_name="page" title="Default width toggle" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="200" addon_id="">
<value_parameters>disabled=Disabled
fixed=Fixed (default)
fluid=Fluid</value_parameters>
<value>"fixed"</value>
</property>
<property property_name="uix_pageWrapper" group_name="page" title="Page Wrapper" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,extra" addon_id="">
<value>{
"background-color": "#fff",
"border-width": "@xf-borderSize",
"border-color": "@xf-borderColor",
"border-radius": "@xf-borderRadiusMedium"
}</value>
</property>
<property property_name="uix_parallax" group_name="uix_globalSettings" title="Enable Parallax" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_parallaxImage" group_name="uix_globalSettings" title="Parallax image" description="" property_type="value" value_type="string" depends_on="uix_parallax" value_group="" display_order="0" addon_id="">
<value>"@xf-uix_imagePath/images/welcome-banner.png"</value>
</property>
<property property_name="uix_parallaxPosition" group_name="uix_globalSettings" title="Parallax starting position" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="0" addon_id="">
<value_parameters>top=Top
center=Center
bottom=Bottom</value_parameters>
<value>"center"</value>
</property>
<property property_name="uix_parallaxSelector" group_name="uix_globalSettings" title="Parallax selector" description="" property_type="value" value_type="string" depends_on="uix_parallax" value_group="" display_order="0" addon_id="">
<value>".uix_welcomeSection"</value>
</property>
<property property_name="uix_postBitAvatarSize" group_name="message" title="Postbit avatar size" description="Sets the size of the post bit avatar" property_type="value" value_type="select" depends_on="" value_group="" display_order="1100" addon_id="">
<value_parameters>small=Small
medium=Medium
large=Large</value_parameters>
<value>"medium"</value>
</property>
<property property_name="uix_postBitIcons" group_name="message" title="Post bit icons" description="Changes the user extra info labels to icons" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1200" addon_id="">
<value>1</value>
</property>
<property property_name="uix_prefixAccent" group_name="prefixes" title="Accent color" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-uix_secondaryColor"</value>
</property>
<property property_name="uix_prefixBlue" group_name="prefixes" title="Blue prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#2196F3"</value>
</property>
<property property_name="uix_prefixGray" group_name="prefixes" title="Gray prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#616161"</value>
</property>
<property property_name="uix_prefixGreen" group_name="prefixes" title="Green prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#4CAF50"</value>
</property>
<property property_name="uix_prefixLightGreen" group_name="prefixes" title="Light green prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#8BC34A"</value>
</property>
<property property_name="uix_prefixOlive" group_name="prefixes" title="Olive green" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#689F38"</value>
</property>
<property property_name="uix_prefixOrange" group_name="prefixes" title="Orange prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#FF9800"</value>
</property>
<property property_name="uix_prefixPrimary" group_name="prefixes" title="Primary prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-uix_primaryColor"</value>
</property>
<property property_name="uix_prefixRed" group_name="prefixes" title="Red prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#D32F2F"</value>
</property>
<property property_name="uix_prefixRedSkyBlue" group_name="prefixes" title="Sky blue prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#03A9F4"</value>
</property>
<property property_name="uix_prefixRoyalBlue" group_name="prefixes" title="Royal blue prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#0D47A1"</value>
</property>
<property property_name="uix_prefixSilver" group_name="prefixes" title="Silver prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#CFD8DC"</value>
</property>
<property property_name="uix_prefixYellow" group_name="prefixes" title="Yellow prefix" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"#FFEB3B"</value>
</property>
<property property_name="uix_primaryColor" group_name="color" title="Primary brand color" description="Primary brand color" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-paletteAccent1"</value>
</property>
<property property_name="uix_primaryColorDarker" group_name="color" title="primary brand color (darker)" description="Darker variation of the primary brand color. (This would generally map to Google's Material design spec as the 700 value of the primary color.)" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-paletteAccent2"</value>
</property>
<property property_name="uix_removeBottomBreadcrumb" group_name="uix_breadcrumb" title="Remove bottom breadcrumb" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="400" addon_id="">
<value>0</value>
</property>
<property property_name="uix_removeIndexPageTitle" group_name="uix_globalSettings" title="Remove Title from Forum Index" description="Removes the page title from the forum index. Note: Only applicable when there are no other components in titlebar (such as page action or sidebar toggle.)" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="100" addon_id="">
<value>0</value>
</property>
<property property_name="uix_removeMessageArrow" group_name="message" title="Remove message arrow" description="Removes the arrow on postbit for messages" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1300" addon_id="">
<value>1</value>
</property>
<property property_name="uix_removePageAction" group_name="uix_globalSettings" title="Remove forum list page actions" description="Removes the page actions from the forum list. By default these are New Posts and Post New Thread." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="200" addon_id="">
<value>0</value>
</property>
<property property_name="uix_removeRegisterText" group_name="headerNav" title="Remove register/login text" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2230" addon_id="">
<value>1</value>
</property>
<property property_name="uix_removeVisitorTabsText" group_name="headerNav" title="Remove visitor tab text" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2270" addon_id="">
<value>1</value>
</property>
<property property_name="uix_removeWhatsNewButtons" group_name="uix_globalSettings" title="Remove what's new buttons" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_responsiveLogoFontSize" group_name="basic" title="Responsive logo font size" description="Sets a font size to override logo font size at a specific breakpoint" property_type="value" value_type="string" depends_on="" value_group="logo_text" display_order="1300" addon_id="">
<value>"@xf-fontSizeNormal"</value>
</property>
<property property_name="uix_rightAlignNavigation" group_name="headerNav" title="Right align navigation" description="Aligns the navigation and section links to the right side" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2030" addon_id="">
<value>0</value>
</property>
<property property_name="uix_scrollableSidebar" group_name="uix_sidebar" title="Scrollable sidebar" description="Adds a scrollable container around the sidebar" property_type="value" value_type="boolean" depends_on="uix_stickySidebar" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_scrollableSidenav" group_name="uix_sidebar" title="Scrollable sidenav" description="Adds a scrollable container around sidenav" property_type="value" value_type="boolean" depends_on="uix_stickySidebar" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_searchBar" group_name="uix_search" title="Search Bar" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>{
"color": "@xf-textColorDimmed",
"background-color": "rgba(0,0,0,.4)",
"border-width": "1px",
"border-color": "rgba(0,0,0,.3)",
"border-radius": "@xf-borderRadiusMedium",
"extra": "box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4) inset;"
}</value>
</property>
<property property_name="uix_searchBarFocus" group_name="uix_search" title="Search bar (focus)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_searchBarHeight" group_name="uix_search" title="Search bar height" description="" property_type="value" value_type="unit" depends_on="" value_group="" display_order="10" addon_id="">
<value>"30px"</value>
</property>
<property property_name="uix_searchBarPlaceholderColor" group_name="uix_search" title="Search bar placeholder color" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="2000" addon_id="">
<value>"@xf-textColorMuted"</value>
</property>
<property property_name="uix_searchBarPlaceholderFocusColor" group_name="uix_search" title="Search bar placeholder color (focus)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="2100" addon_id="">
<value>""</value>
</property>
<property property_name="uix_searchBarWidth" group_name="uix_search" title="Search bar width" description="(Required for minimal search animation)" property_type="value" value_type="unit" depends_on="" value_group="" display_order="400" addon_id="">
<value>"250px"</value>
</property>
<property property_name="uix_searchButton" group_name="uix_search" title="Add Button to the QuickSearch" description="Enabling this setting will add a functional submit button to the QuickSearch." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_searchIcon" group_name="uix_search" title="Search icon" description="Styles the search icon" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,padding,extra" addon_id="">
<value>{
"font-size": "20px",
"color": "#fff",
"background-color": "rgba(0,0,0,.4)",
"padding": "@xf-paddingSmall",
"extra": "float: left;"
}</value>
</property>
<property property_name="uix_searchIconBehavior" group_name="uix_search" title="Search icon behavior" description="Sets the behavior for the search icon (when the search is only an icon, and not the full input.)" property_type="value" value_type="select" depends_on="" value_group="" display_order="1100" addon_id="">
<value_parameters>dropdown=Dropdown
expand=Expand
expandMobile=Expand (mobile only)</value_parameters>
<value>"expandMobile"</value>
</property>
<property property_name="uix_searchIconFocusColor" group_name="uix_search" title="Search icon color (focus)" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="2200" addon_id="">
<value>""</value>
</property>
<property property_name="uix_searchPosition" group_name="uix_search" title="Search position" description="Sets where the search bar appears" property_type="value" value_type="select" depends_on="" value_group="" display_order="0" addon_id="">
<value_parameters>staffBar=Staff bar (right)
navigation=Navigation (right)
navigationLeft=Navigation (left)
tablinks=Tablinks (right)</value_parameters>
<value>"navigation"</value>
</property>
<property property_name="uix_search_maxResponsiveWidth" group_name="uix_search" title="Viewport Width to Show Search Icon" description="Enter the maximum viewport width at which the search icon replaces the search bar." property_type="value" value_type="string" depends_on="" value_group="" display_order="1000" addon_id="">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="uix_secondaryColor" group_name="color" title="Secondary brand color" description="Used for hover and active state" property_type="value" value_type="color" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-paletteAccent3"</value>
</property>
<property property_name="uix_sectionBg" group_name="color" title="Section background" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="2400" addon_id="">
<value>"@xf-uix_primaryColorDarker"</value>
</property>
<property property_name="uix_sectionLinksStickyStyle" group_name="headerNav" title="Sub-Navigation row (sticky)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "@xf-publicSubNav--background-color"
}</value>
</property>
<property property_name="uix_separateThreads" group_name="uix_discussionList" title="Separate Sticky Threads" description="This will add headings above sticky threads and above normal threads to clearly differentiate the two types of threads." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_sideNavCollapsed" group_name="headerNav" title="Collapse sidebar navigation section links" description="Collapses the active tabs section links by default. Note: Only applicable when navigation style is set to sidebar navigation." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2120" addon_id="">
<value>0</value>
</property>
<property property_name="uix_sideNavigationAnimation" group_name="misc" title="Side navigation animation" description="Adds an animation to side navigation items on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3500" addon_id="">
<value>0</value>
</property>
<property property_name="uix_sidebarBreakpoint" group_name="uix_sidebar" title="Sidebar breakpoint" description="Minimum viewport width to show sidebar before breaking under content" property_type="value" value_type="unit" depends_on="" value_group="" display_order="200" addon_id="">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="uix_sidebarIcons" group_name="uix_sidebar" title="Sidebar heading icons" description="Adds icons to the sidebar headings" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="300" addon_id="">
<value>1</value>
</property>
<property property_name="uix_sidebarLocation" group_name="uix_sidebar" title="Sidebar location" description="Moves the sidebar to the left of the main content" property_type="value" value_type="select" depends_on="" value_group="" display_order="400" addon_id="">
<value_parameters>left=Left
right=Right</value_parameters>
<value>"right"</value>
</property>
<property property_name="uix_sidebarMobileCanvas" group_name="uix_sidebar" title="Sidebar mobile canvas" description="Adds the sidebar to an off canvas for mobile" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_sidebarNavWidth" group_name="headerNav" title="Sidebar navigation width" description="Styles the Sidebar nav component" property_type="value" value_type="unit" depends_on="" value_group="" display_order="2110" addon_id="">
<value>"210px"</value>
</property>
<property property_name="uix_sidebarNavigationStyle" group_name="headerNav" title="Sidebar Navigation Style" description="Adds styling for the sidebar navigation component" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "@xf-pageBg"
}</value>
</property>
<property property_name="uix_sidebarTriggerPhrase" group_name="uix_sidebar" title="Show sidebar trigger phrase" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>0</value>
</property>
<property property_name="uix_sidebarTriggerPosition" group_name="uix_sidebar" title="Sidebar trigger position" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="500" addon_id="">
<value_parameters>sectionLinks=Sub navigation
titlebar=Titlebar</value_parameters>
<value>"sectionLinks"</value>
</property>
<property property_name="uix_sidebarWidgetAnimations" group_name="misc" title="Sidebar widget animation" description="Adds an animation to sidebar widgets on page load" property_type="value" value_type="boolean" depends_on="" value_group="uix_pageAnimation" display_order="3100" addon_id="">
<value>0</value>
</property>
<property property_name="uix_sidebarWidgetFooter" group_name="uix_sidebar" title="Sidebar widget footer" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"background-color": "transparent"
}</value>
</property>
<property property_name="uix_sidebarWidgetHeading" group_name="uix_sidebar" title="Sidebar widget heading" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>{
"border-bottom-width": "1px",
"border-bottom-color": "@xf-borderColor"
}</value>
</property>
<property property_name="uix_sidebarWidgetWrapper" group_name="uix_sidebar" title="Sidebar widget wrapper" description="Styles the side widget block-container" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,border_width_simple,border_color_simple,border_radius_simple,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_similarScrollNotice" group_name="uix_globalSettings" title="Force scrolling notices to all be primary notices" description="Sets the styling for all scrolling notices to be primary notices." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="300" addon_id="">
<value>1</value>
</property>
<property property_name="uix_socialMediaIcon" group_name="uix_globalSettings" title="Social media icon" description="Styles the general social media icons that are set in UI.X Social Media board options" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"font-size": "@xf-uix_iconSizeLarge"
}</value>
</property>
<property property_name="uix_socialMediaPosition" group_name="uix_globalSettings" title="Social media position" description="Choose where to have the social media component" property_type="value" value_type="select" depends_on="" value_group="social_media" display_order="450" addon_id="">
<value_parameters>copyright=Copyright footer
staffBar=Staffbar
header=Header row</value_parameters>
<value>"copyright"</value>
</property>
<property property_name="uix_staffBarBreakpoint" group_name="headerNav" title="Staff bar breakpoint" description="Sets the minimum viewport width for the staff bar to show. Note: Staff bar will ALWAYS show to admins/mods, but components will be moved to their default locations. Set 0 for never, and 100% for always." property_type="value" value_type="string" depends_on="" value_group="" display_order="7400" addon_id="">
<value>"1100px"</value>
</property>
<property property_name="uix_staffBarTab" group_name="headerNav" title="Staff tools bar tab" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "rgba(255,255,255,.7)",
"padding-top": "@xf-paddingSmall",
"padding-bottom": "@xf-paddingSmall",
"extra": "margin: 0;"
}</value>
</property>
<property property_name="uix_staffBarTabHover" group_name="headerNav" title="Staff tools bar tab (hover)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "#fff",
"background-color": "transparent"
}</value>
</property>
<property property_name="uix_stickyCategoryStrips" group_name="nodeList" title="Sticky category strips" description="Category strips will stick to the top of the page for the category that is currently in view." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="1300" addon_id="">
<value>0</value>
</property>
<property property_name="uix_stickyNavHeight" group_name="headerNav" title="Height of the sticky navigation bar" description="" property_type="value" value_type="unit" depends_on="" value_group="" display_order="2015" addon_id="">
<value>"@xf-uix_navigationBarHeight"</value>
</property>
<property property_name="uix_stickyNavigationStyle" group_name="headerNav" title="Navigation row (sticky)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "@xf-pageBg",
"extra": "border-radius: 0 !important;"
}</value>
</property>
<property property_name="uix_stickySectionLinkHeight" group_name="headerNav" title="Sticky sub navigation height" description="Sets the height for the sticky section links bar" property_type="value" value_type="unit" depends_on="" value_group="" display_order="2018" addon_id="">
<value>"35px"</value>
</property>
<property property_name="uix_stickySidebar" group_name="uix_sidebar" title="Sticky sidebar" description="Makes both the sidebar as well as the sidenav sticky." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="600" addon_id="">
<value>1</value>
</property>
<property property_name="uix_stickyStaffBar" group_name="headerNav" title="Staff bar sticky" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="uix_stickyStaffBarHeight" group_name="headerNav" title="Sticky staffbar height" description="Sets the height of the sticky staff bar" property_type="value" value_type="unit" depends_on="uix_stickyStaffBar" value_group="" display_order="7100" addon_id="">
<value>"40px"</value>
</property>
<property property_name="uix_stickyStaffbarStyle" group_name="headerNav" title="Staff bar (sticky)" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_structPaddingH" group_name="uix_discussionList" title="Structured list horizontal padding" description="Sets the horizontal padding for list items such as discussion list, conversation list, reports list, etc.." property_type="value" value_type="unit" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-paddingMedium"</value>
</property>
<property property_name="uix_structPaddingV" group_name="uix_discussionList" title="Structured list vertical padding" description="Sets the vertical padding for list items such as discussion list, conversation list, reports list, etc.." property_type="value" value_type="unit" depends_on="" value_group="" display_order="0" addon_id="">
<value>"@xf-paddingMedium"</value>
</property>
<property property_name="uix_subForumTitle" group_name="nodeList" title="Sub-forum title" description="Styles the sub forum titles when they are displayed" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"color": "@xf-textColor"
}</value>
</property>
<property property_name="uix_tabBarLocation" group_name="uix_globalSettings" title="Main tabbar location" description="" property_type="value" value_type="select" depends_on="uix_enableMainTabs" value_group="" display_order="0" addon_id="">
<value_parameters>aboveMainContainer=Default (above main container)
mainContainerTop= Top of main container
aboveMainContent=Above main content
mainContentTop=Top of main content
header=Bottom of header</value_parameters>
<value>"mainContentTop"</value>
</property>
<property property_name="uix_tablinksInSideNav" group_name="headerNav" title="Show tablinks in sidebar nav" description="Only applicable for Sidebar navigation style" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="2130" addon_id="">
<value>1</value>
</property>
<property property_name="uix_tag" group_name="misc" title="Tag" description="Styles tags" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_tagHover" group_name="misc" title="Tag Hover" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>[]</value>
</property>
<property property_name="uix_textDirection" group_name="uix_icons" title="Text direction" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="0" addon_id="">
<value_parameters>LTR=LTR
RTL=RTL</value_parameters>
<value>"LTR"</value>
</property>
<property property_name="uix_textSelection" group_name="uix_globalSettings" title="Highlighted/selected Text" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background" addon_id="">
<value>{
"color": "#fff",
"background-color": "@xf-uix_primaryColorDarker"
}</value>
</property>
<property property_name="uix_threadField" group_name="message" title="Thread field" description="Styles custom thread fields" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"padding": "@xf-messagePadding",
"padding-top": "0",
"extra": "margin: 0;"
}</value>
</property>
<property property_name="uix_threadListSeparator" group_name="uix_discussionList" title="Thread list separators" description="Styles the thread list separate when Separate Sticky Threads is enabled." property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "@xf-textColorDimmed",
"background-color": "@xf-contentHighlightBg",
"border-top-width": "1px",
"border-top-color": "@xf-borderColor",
"padding-top": "10px",
"padding-bottom": "10px",
"extra": "text-transform: uppercase;"
}</value>
</property>
<property property_name="uix_titlebar" group_name="uix_globalSettings" title="Titlebar" description="Styles the wrapper around page title and page description" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="text,background,border,border_radius,padding,extra" addon_id="">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "@xf-textColorMuted",
"border-radius": "@xf-borderRadiusSmall",
"padding-top": "@xf-paddingLarge",
"extra": "min-height: 36px;"
}</value>
</property>
<property property_name="uix_titlebarLocation" group_name="page" title="Titlebar location" description="Sets where the titlebar should appear in the page" property_type="value" value_type="select" depends_on="" value_group="" display_order="4200" addon_id="">
<value_parameters>aboveMainContainer=Default (above main container)
mainContainerTop= Top of main container
aboveMainContent=Above main content
mainContentTop=Top of main content
header=Bottom of header
belowHeader=Below header</value_parameters>
<value>"mainContentTop"</value>
</property>
<property property_name="uix_topBreadcrumbLocation" group_name="uix_breadcrumb" title="Top breadcrumb location" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="100" addon_id="">
<value_parameters>aboveMainContainer=Default (above main container)
mainContainerTop= Top of main container
aboveMainContent=Above main content
mainContentTop=Top of main content
header=Bottom of header</value_parameters>
<value>"mainContainerTop"</value>
</property>
<property property_name="uix_userTabsPosition" group_name="headerNav" title="User tabs position" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="2085" addon_id="">
<value_parameters>staffBar=Staff bar
navigation=Navigation
tablinks=Tablinks</value_parameters>
<value>"staffBar"</value>
</property>
<property property_name="uix_version" group_name="uix_globalSettings" title="UI.X Version" description="This style property should not be edited, it is used to help with debugging issues" property_type="value" value_type="string" depends_on="" value_group="theme" display_order="10010" addon_id="">
<value>"2.0.12.0"</value>
</property>
<property property_name="uix_viewportCenterLogo" group_name="headerNav" title="Viewport width to center the logo block" description="Sets the maximum width to center the logo block. This causes all logo block components to stack vertically, and aligned in the center. Set never and 100% for always." property_type="value" value_type="unit" depends_on="" value_group="" display_order="6200" addon_id="">
<value>"0px"</value>
</property>
<property property_name="uix_viewportCollapseStaffLinks" group_name="headerNav" title="Viewport width to collapse staffbar links" description="Sets the max width for the staff links to be collapsed into one admin link" property_type="value" value_type="unit" depends_on="uix_collapseStaffbarLinks" value_group="" display_order="7300" addon_id="">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="uix_viewportCollapseStats" group_name="nodeList" title="Viewport width to collapse node stats" description="This sets the minimum viewport width to show the full node stat display. (Note: not applicable with Node Grid)" property_type="value" value_type="unit" depends_on="" value_group="" display_order="2500" addon_id="">
<value>"1000px"</value>
</property>
<property property_name="uix_viewportCondenseVisitorTabs" group_name="headerNav" title="Viewport width to condense visitor tabs" description="" property_type="value" value_type="unit" depends_on="uix_condenseVisitorTabs" value_group="" display_order="2260" addon_id="">
<value>"@xf-responsiveMedium"</value>
</property>
<property property_name="uix_viewportRemoveRegisterText" group_name="headerNav" title="Viewport width to remove login text" description="" property_type="value" value_type="unit" depends_on="uix_removeRegisterText" value_group="" display_order="2240" addon_id="">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="uix_viewportRemoveVisitorTabsText" group_name="headerNav" title="Viewport width to remove visitor tab text" description="Sets the minimum viewport width to display the conversations, alert and username text." property_type="value" value_type="unit" depends_on="uix_removeVisitorTabsText" value_group="" display_order="2120" addon_id="">
<value>"1000000px"</value>
</property>
<property property_name="uix_viewportShowLogoBlock" group_name="headerNav" title="Minimum viewport width to show logo block" description="Viewport width to show the logo block. Below this width, the logo block will hide, and its components will be moved to the navigation" property_type="value" value_type="unit" depends_on="uix_enableLogoBlock" value_group="" display_order="6100" addon_id="">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="uix_viewportWidthRemoveSubNav" group_name="headerNav" title="Viewport width to remove the sub-navigation" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="2020" addon_id="">
<value>"@xf-responsiveWide"</value>
</property>
<property property_name="uix_visitorPanelIcons" group_name="uix_sidebar" title="Visitor panel stats as icons" description="Changes the visitor stats in the visitor panel to icons instead of text" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="700" addon_id="">
<value>0</value>
</property>
<property property_name="uix_visitorTabsMobile" group_name="headerNav" title="Visitor tabs location (mobile)" description="Choose where the visitor tabs should go for mobile" property_type="value" value_type="select" depends_on="" value_group="" display_order="2205" addon_id="">
<value_parameters>initial=Initial (don't change)
tabbar= Tab bar
canvas=Canvas</value_parameters>
<value>"canvas"</value>
</property>
<property property_name="uix_welcomeSectionForumListOnly" group_name="uix_welcomeSection" title="Display welcome section on forum list only" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="300" addon_id="">
<value>1</value>
</property>
<property property_name="uix_welcomeSectionIcon__style" group_name="uix_welcomeSection" title="Welcome section icon" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="50" css_components="text,padding,extra" addon_id="">
<value>{
"font-size": "48px",
"color": "@xf-textColorMuted",
"padding-right": "@xf-paddingLarge"
}</value>
</property>
<property property_name="uix_welcomeSectionInner" group_name="uix_welcomeSection" title="Welcome section inner" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="text,background,border,padding,extra" addon_id="">
<value>{
"padding": "@xf-elementSpacer",
"extra": "display: flex;\nalign-items: center;"
}</value>
</property>
<property property_name="uix_welcomeSectionLocation" group_name="uix_welcomeSection" title="Welcome section location" description="Chooses where to insert the welcome section" property_type="value" value_type="select" depends_on="" value_group="" display_order="200" addon_id="">
<value_parameters>aboveMainContainer=Default (above main container)
mainContainerTop= Top of main container
aboveMainContent=Above main content
mainContentTop=Top of main content
header=Bottom of header</value_parameters>
<value>"mainContainerTop"</value>
</property>
<property property_name="uix_welcomeSectionOverlay" group_name="uix_welcomeSection" title="Welcome section overlay" description="" property_type="value" value_type="color" depends_on="" value_group="" display_order="2000" addon_id="">
<value>""</value>
</property>
<property property_name="uix_welcomeSectionText__style" group_name="uix_welcomeSection" title="Welcome section text" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="40" css_components="text,padding,extra" addon_id="">
<value>{
"font-size": "16px",
"color": "@xf-textColorDimmed",
"padding-top": "@xf-paddingSmall",
"padding-bottom": "@xf-paddingLarge"
}</value>
</property>
<property property_name="uix_welcomeSectionTitle__style" group_name="uix_welcomeSection" title="Welcome section title" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="30" css_components="text,padding,extra" addon_id="">
<value>{
"font-size": "26px",
"extra": "margin: 0;\nfont-family: @xf-uix_headingFont;"
}</value>
</property>
<property property_name="uix_welcomeSectionVisible" group_name="uix_welcomeSection" title="Welcome section visible to" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="100" addon_id="">
<value_parameters>always=Everybody
off=Nobody
userPermissions=User permissions</value_parameters>
<value>"userPermissions"</value>
</property>
<property property_name="uix_welcomeSection__buttonText" group_name="uix_welcomeSection" title="Welcome section button text" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="1200" addon_id="">
<value>"Sign up"</value>
</property>
<property property_name="uix_welcomeSection__icon" group_name="uix_welcomeSection" title="Welcome section icon" description="Enter the class name for an icon of an icon font" property_type="value" value_type="string" depends_on="" value_group="" display_order="1400" addon_id="">
<value>"mdi mdi-information"</value>
</property>
<property property_name="uix_welcomeSection__style" group_name="uix_welcomeSection" title="Welcome section container" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="0" css_components="background,border,border_radius,padding,extra" addon_id="">
<value>{
"background-color": "@xf-contentBg",
"border-radius": "@xf-borderRadiusMedium",
"extra": "margin-bottom: @xf-elementSpacer;\nbackground-size: cover;\nbackground-position: center;"
}</value>
</property>
<property property_name="uix_welcomeSection__text" group_name="uix_welcomeSection" title="Welcome section text" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="1100" addon_id="">
<value>"Wanting to join the rest of our members? Feel free to sign up today."</value>
</property>
<property property_name="uix_welcomeSection__title" group_name="uix_welcomeSection" title="Welcome section title" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="1000" addon_id="">
<value>"Welcome to our Community"</value>
</property>
<property property_name="uix_welcomeSection__url" group_name="uix_welcomeSection" title="Welcome section button url" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="1300" addon_id="">
<value>"register"</value>
</property>
<property property_name="uix_widgetPadding" group_name="uix_sidebar" title="Widget padding" description="Sets the default padding for sidebar widgets" property_type="value" value_type="string" depends_on="" value_group="" display_order="800" addon_id="">
<value>"@xf-paddingMedium"</value>
</property>
</properties>
</style>