$selectedNavEntry.href AND $selectedNavEntry.href != $xf.uri AND $selectedNavEntry.href != $xf.fullUri AND $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 AND $breadcrumb.href != $xf.fullUri"> <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:fa icon="fa-home" /> <span style="display: none;" itemprop="name">{$value}</span> <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') }}" rel="nofollow"><xf:fa icon="fa-compress-alt" /></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> <xf:set var="$thUixFontSize" value="{{ 62.5 * (14 + $xf.visitor.Option.thuix_font_size * 2) / 14 }}" /> <html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}" style="font-size: {$thUixFontSize}%;" data-app="public" data-template="{$template}" data-container-key="{$containerKey}" data-content-key="{$contentKey}" data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}" data-cookie-prefix="{$xf.cookie.prefix}" data-csrf="{{ csrf_token()|escape('js') }}" 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> <link rel="manifest" href="{{ base_url('webmanifest.php') }}"> <xf:if is="property('metaThemeColor')"> <meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" /> <meta name="msapplication-TileColor" content="{{ property('metaThemeColor') }}"> </xf:if> <meta name="apple-mobile-web-app-title" content="{{ $xf.options.boardShortTitle ?: $xf.options.boardTitle }}"> <xf:if is="property('publicIconUrl')"> <link rel="apple-touch-icon" href="{{ base_url(property('publicIconUrl', true)) }}"> </xf:if> <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: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> </head> <body data-template="{$template}"> <xf:include template="page_style" /> <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"> <xf:if is="!{{property('uix_removeHeaderWrapper')}}"> <div class="uix_headerContainer"> <div class="uix_headerContainer--stickyFix"></div> </xf:if> <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> <xf:button class="button--plain p-nav-menuTrigger {{ $uix_visitorTabsMobile == 'canvas' ? 'js-badge--alerts js-badge--conversations' : '' }} 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" aria-label="{{ phrase('menu')|for_attr }}"> <i aria-hidden="true"></i> </xf:button> <xf:if is="property('uix_navigationType') == 'sidebarNav' && property('uix_pageStyle') == 'covered'"> <xf:button class="button--plain p-nav-menuTrigger uix_sidebarNav--trigger" id="uix_sidebarNav--trigger" rel="nofollow" role="button" tabindex="0" aria-label="{{ phrase('menu')|for_attr }}"> <i aria-hidden="true"></i> </xf:button> </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> <xf:comment> <xf:macro template="uix_megaMenu" name="uix_megaMenu" /> </xf:comment> </nav> </xf:set> <xf:set var="$uix_navOffset"> [ { "breakpoint": "0", "offset": "0" } <xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}"> ,{ "breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}", "offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}" } </xf:if> <xf:if is="{$uix_alwaysStaffBar} && {{ property('uix_stickyStaffBar') }}"> ,{ "breakpoint": "0", "offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}" } </xf:if> ] </xf:set> <xf:if is="property('publicNavSticky') == 'primary'"> <div class="p-navSticky p-navSticky--primary <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header"> {$navHtml|raw} </div> {$subNavHtml|raw} <xf:elseif is="property('publicNavSticky') == 'all'" /> <div class="p-navSticky p-navSticky--all <xf:if is="{{ (property('publicNavSticky') !== 'none') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-top-offset-breakpoints="{$uix_navOffset|for_attr}" data-xf-init="sticky-header"> {$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" 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 }} <xf:if is="!{{property('uix_removeHeaderWrapper')}}"> </div> </xf:if> <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"> <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 {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="profile" href="{{ link('members', $xf.visitor) }}" class="offCanvasMenu-link">{{ phrase('th_profile_uix') }}</a></div></div> <div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="offCanvasMenu-link">{{ phrase('alerts')}}</a></div></div> <div class="offCanvasMenu-linkHolder {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><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> {$uix_sidebarNavWidgets|raw} </xf:contentcheck> </div> </xf:if> </xf:macro> <div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt"> <div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div> <xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button> </div> </div> </div> <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 {{ $removePageWrapper ? 'p-body-inner-none' : ''}}"> <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:fa icon="fa-exclamation-triangle" /> 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" 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" /> <xf:if is="count($xf.reactionsActive) > 1 AND $xf.visitor.user_id"> <script type="text/template" id="xfReactTooltipTemplate"> <div class="tooltip-content-inner"> <div class="reactTooltip"> <xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction"> <xf:reaction id="{$reactionId}" tooltip="true" /> </xf:foreach> </div> </div> </script> </xf:if> <div uix_component="MainContainer" class="uix_contentWrapper"> <xf:macro name="uix_notices" arg-location="mainContainerTop" arg-content="{$uix_notices}" /> <xf:ad position="container_content_above" /> <xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="mainContainerTop" arg-showWelcomeSection="{$uix_showWelcomeSection}" /> <xf:macro name="uix_topBreadcrumb__component" arg-location="mainContainerTop" arg-content="{$uix_topBreadcrumb__component}" /> <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:comment> <xf:if is="$sideNav"> <div class="p-body-sideNavCol"></div> </xf:if> <div class="p-body-contentCol"></div> <xf:if is="$sidebar"> <div class="p-body-sidebarCol"></div> </xf:if> </xf:comment> <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 {{ (property('uix_stickySidebar') == 'top') ? ' uix_stickyBodyElement' : '' }}" 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" 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" 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
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 emoji-completer" data-display="< :next" aria-labelledby="ctrl_message" /> <div class="u-hidden u-hidden--transition u-inputSpacer"> <xf:button type="submit" class="button--primary" icon="reply">{{ phrase('post_verb') }}</xf:button> </div> </xf:form> </xf:if> </xf:set> <xf:if is="$hasTabs"> <ul class="tabPanes"> <li class="is-active" role="tabpanel" id="{{ unique_id('accountMenu') }}"> {$accountHtml|raw} </li> <xf:if is="$xf.visitor.canViewBookmarks()"> <li role="tabpanel" id="{{ unique_id('accountMenuBookmarks') }}" data-href="{{ link('account/bookmarks-popup') }}" data-load-target=".js-bookmarksMenuBody"> <div class="js-bookmarksMenuBody"> <div class="menu-row">{{ phrase('loading...') }}</div> </div> <div class="menu-footer menu-footer--close"> <a href="{{ link('account/bookmarks') }}" class="js-bookmarkShowAllLink">{{ phrase('show_all...') }}</a> </div> </li> </xf:if> <!--[XF:account_tab_panes:bottom]--> </ul> <xf:else /> {$accountHtml|raw} </xf:if> ]]>
</template>
<template title="account_wrapper" type="public" addon_id="XF" version_id="2010035" version_string="2.1.0 Beta 5">
<![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 == 'reactions' ? 'is-selected' : '' }}" href="{{ link('account/reactions') }}"> {{ phrase('reactions_received') }} </a> <xf:if is="$xf.visitor.canViewBookmarks()"> <a class="blockLink {{ $pageSelected == 'bookmarks' ? 'is-selected' : '' }}" href="{{ link('account/bookmarks') }}"> {{ phrase('bookmarks') }} </a> </xf:if> <!--[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="2020170" version_string="2.2.1">
<![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); } @supports (scroll-padding-top: 10px) { html:not(.has-browser-safari) { .m-stickyHeaderConfig(@xf-publicNavSticky); scroll-padding-top: (@_stickyHeader-height + @_stickyHeader-offset); } html:not(.has-browser-safari) .u-anchorTarget { height: 0; margin-top: 0; } } .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; // .xf-pageBackground(); .is-modalOverlayOpen & { & when (unit(xf-default(@xf-overlayMaskBlur, 0)) > 0) { filter: blur(@xf-overlayMaskBlur); } } 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> } // RESPONSIVE HEADER .p-offCanvasAccountLink { display: none; .avatar {margin-right: 24px;} } @media (max-width: @xf-responsiveNarrow) { .p-offCanvasAccountLink, .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 .fa--xf:before { .m-faBase(); .m-faContent(@fa-var-expand-alt); } {{ include('app_staffbar.less') }} <xf:if is="{{ property('uix_viewportShowLogoBlock') }} != '100%'"> {{ include('app_header.less') }} </xf:if> {{ 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('app_alerts.less') }} {{ include('app_content_vote.less') }} ]]>
</template>
<template title="app_alerts.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1">
<![CDATA[ .alert { &.is-unread { .xf-contentHighlightBase(); } } .alertToggler { text-decoration: none !important; padding: @xf-paddingMedium; margin-right: -@xf-paddingMedium; .alert & { opacity: 0; } .alert:hover &, .has-touchevents & { opacity: 1; } } .alertToggler-icon { font-size: .75em; font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular); .is-unread & { font-weight: @faWeight-solid; } } <xf:if is="property('uix_iconFontFamily') != 'fontawesome'"> .alert { .alertToggler-icon:before {content: '\F0766';} &.is-unread .alertToggler-icon:before {content: '\F0765';} } </xf:if> ]]>
</template>
<template title="app_body.less" type="public" addon_id="XF" version_id="2020052" version_string="2.2.0 Release Candidate 2">
<![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(); .m-pageInset(); <xf:else /> @media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px ) { flex-grow: 1; } @media (max-width: @xf-responsiveEdgeSpacerRemoval) { .m-pageWidth(); .m-pageInset(); } </xf:if> transition: ease-in-out max-width .3s, ease-in-out left .3s, ease-in-out width .3s; display: flex; flex-direction: column; .m-clearFix(); position: relative; left: 0; padding-left: 0; padding-right: 0; padding-bottom: @xf-elementSpacer; .uix_page--fluid & { transition: @uix_moveIn max-width .3s, @uix_moveIn left .3s, @uix_moveIn width .3s; } &.p-body-inner-none { max-width: 100%; width: 100%; margin: 0; padding: 0; } /* > * { 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 .2s, ease-in max-width .2s; .uix_sidebarCollapsed & { transition: ease-in width .2s .2s, ease-in max-width .2s .2s; } <xf:else /> transition: @uix_moveOut width .2s, ease-in max-width .2s; .uix_sidebarCollapsed & { transition: ease-in width .2s .2s, ease-in max-width .2s .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; .contentRow-figure .avatar--m { // make these avatars a bit smaller in the sidebar so the content has more space .m-avatarSize(@avatar-m * 2 / 3); } } .p-body-sideNavCol, .p-body-contentCol, .p-body-sidebarCol { display: table-column; } .p-body-sideNavCol, .p-body-sidebarCol { 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; .xf-uix_sidebarBlockRow(); } } // ---- Widget icons ----- .p-body-sidebar .block .block-minorHeader:before, .p-body-sideNavContent .block .block-minorHeader:before, .p-body-sidebar .block .block-header:before, .uix_extendedFooterRow .block .block-minorHeader:before, .p-body-sideNavContent .block .block-header:before{ .m-faBase(); } // .block[data-widget-definition], // .block[data-widget-key], .p-body-sideNav, .p-body-sidebar, .uix_extendedFooterRow { <xf:if is="{{ property('uix_defaultSidebarIcon') }}"> .block-minorHeader:before, .block-header:before, { .m-faContent(@fa-var-file-alt); } </xf:if> .block[data-widget-definition="th_userNavigation"] .block-minorHeader:before { .m-faContent(@fa-var-user); } .block[data-widget-definition="members_online"] .block-minorHeader:before { .m-faContent(@fa-var-users); } .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 { .m-faContent(@fa-var-chart-bar); } .block[data-widget-definition="share_page"] .block-minorHeader:before { .m-faContent(@fa-var-share); } .block[data-widget-definition="most_messages"] .block-minorHeader:before { .m-faContent(@fa-var-comments); } .block[data-widget-definition="find_member"] .block-minorHeader:before { .m-faContent(@fa-var-search); } .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{ .m-faContent(@fa-var-comment); } .block[data-widget-definition="birthdays"] .block-minorHeader:before{ .m-faContent(@fa-var-birthday-cake); } .block[data-widget-definition="th_navigation"] .block-minorHeader:before{ .m-faContent(@fa-var-list); } body .block[data-widget-key="thuix_footer_facebookWidget"] .block-minorHeader:before { .m-faBase('Brands'); .m-faContent(@fa-var-facebook); } body .block[data-widget-definition="thuix_footer_twitterWidget"] .block-minorHeader:before{ .m-faBase('Brands'); .m-faContent(@fa-var-twitter); } form[data-xf-init*="poll-block"] .block-minorHeader:before { .m-faContent(@fa-var-poll); } } // xpress WP widget support .p-body-sidebar .block-xpress { .block-minorHeader:before { .m-faContent(@fa-var-file-alt); } &.widget_media_gallery .block-minorHeader:before, &.widget_media_audio .block-minorHeader:before { .m-faContent(@fa-var-image); } &.widget_calendar .block-minorHeader:before { .m-faContent(@fa-var-calendar); } &.widget_recent_comments .block-minorHeader:before { .m-faContent(@fa-var-comments); } &.widget_search .block-minorHeader:before { .m-faContent(@fa-var-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 { 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-sideNavCol, .p-body-contentCol, .p-body-sidebarCol { display: none; width: auto; } /* .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); //, .88em } .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 .uix_sidebar--scroller > * { 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; } } .uix_sidebarInner.offCanvasMenu-content .uix_sidebar--scroller > * { flex: auto; min-width: 0; } // 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>
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%; overflow: auto; .m-transition(all; @_offCanvas-animationLength; ease-in-out); -webkit-overflow-scrolling: touch; .xf-uix_canvas(); .has-os-ios & { // accounts for iOS deadzone in Safari padding-bottom: 44px; } & 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)); } .p-nav-content { margin-bottom: 96px; } } .offCanvasMenu-header { padding: @xf-paddingLarge; margin: 0; font-size: @xf-fontSizeLarge; font-weight: @xf-fontWeightHeavy; background-color: @xf-contentHighlightBg; .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, .88em); } &.is-active:after { .m-faContent(@fa-var-chevron-up, .88em); } } } .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-installBanner { display: flex; justify-content: space-between; align-items: center; padding: @xf-paddingLarge @xf-paddingMedium; font-size: @xf-fontSizeLarge; } .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; display: flex; flex-direction: column; 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(); border-radius: 0; &: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, .offCanvasMenu-link {.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; } .offCanvasMenu-installBanner { margin-top: auto; background: @xf-publicHeaderAdjustColor; border-top: @xf-borderSize solid fadein(@xf-publicHeaderAdjustColor, 10%); } } ]]>
</template>
<template title="core_overlay.less" type="public" addon_id="XF" version_id="2020170" version_string="2.2.1">
<![CDATA[ // #################################### OVERLAYS ################################ .overlay-container { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: @zIndex-9; background: @xf-overlayMaskColor; -webkit-overflow-scrolling: touch; opacity: 0; .m-transition(opacity); @media (max-width: @xf-responsiveNarrow) { .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'); } } @media (max-width: @xf-responsiveNarrow) { .overlay { max-width: 100%; margin: 0; margin-top: auto; max-height: 75vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow-y: scroll; position: fixed; bottom: 0; top: auto; transform: translatey(100%); transition: transform ease-in .25s; .block-container { margin-left: 0; margin-right: 0; } .is-active & { transform: translatey(0%); } .overlay-title {z-index: 1;} .formSubmitRow--sticky { position: sticky; bottom: 0; } } } .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-times); } &: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-radius: @xf-blockBorderRadius; // restore the radius that might be removed for some viewports as we're within the overlay 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-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; } } } } > .block:last-child > .block-container > .formSubmitRow:not(.is-sticky):last-child .formSubmitRow-bar { border-bottom-left-radius: @block-borderRadius-inner; border-bottom-right-radius: @block-borderRadius-inner; } } ]]>
</template>
<template title="core_pagenav.less" type="public" addon_id="XF" version_id="2020034" version_string="2.2.0 Beta 4">
<![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('Pro', @faWeight-solid); font-size: 80%; unicode-bidi: isolate; // maintain position in RTL with LTR text } &.pageNav-jump--prev:before { .m-faContent("@{fa-var-caret-left}\00a0", false, ltr); // .61em .m-faContent("@{fa-var-caret-right}\00a0", false, rtl); // .61em } &.pageNav-jump--next:after { .m-faContent("\00a0@{fa-var-caret-right}", false, ltr); // .61em .m-faContent("\00a0@{fa-var-caret-left}", false, rtl); // .61em } } .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('Pro', @faWeight-solid); } } &.pageNavSimple-el--prev i:before { .m-faContent(@fa-var-caret-left, false, ltr); // , .44em .m-faContent(@fa-var-caret-right, false, rtl); // , .44em } &.pageNavSimple-el--next i:before { .m-faContent(@fa-var-caret-right, false, ltr); // , .44em .m-faContent(@fa-var-caret-left, false, rtl); // , .44em } &.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('Pro', @faWeight-solid); } } &.pageNavSimple-el--first i:before { .m-faContent(@fa-var-backward, false, ltr); // 1em .m-faContent(@fa-var-forward, false, rtl); // 1em width: auto; font-size: 18px; line-height: inherit; } &.pageNavSimple-el--last i:before { .m-faContent(@fa-var-forward, false, ltr); // 1em .m-faContent(@fa-var-backward, false, rtl); // 1em 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; } } } <xf:if is="property('uix_hideTopPagenavMobile')"> // 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; } } </xf:if> ]]>
</template>