<?xml version="1.0" encoding="UTF-8"?>

-<style title="Ìàòð¸øêà ÐÏ (0.0.1)" export_version="2" base_version_id="2021570" user_selectable="" description="t.me/nex_studio">

<assets/>


-<templates>


-<template title="EWRporta_articles.less" version_string="2.1.0.1" version_id="2101" addon_id="" type="public">

<![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; .far { 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="MAIL_CONTAINER" version_string="2.2.0 Beta 2" version_id="2020032" addon_id="XF" type="email">

<![CDATA[<!DOCTYPE html> <html lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}" style="font-size: 62.5%;"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <base href="{$xf.options.boardUrl}/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <title>{$subject}</title> </head> <body dir="{$xf.language.text_direction}" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table id="bodyTable" border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top" id="bodyTableContainer"> <table border="0" width="600" cellpadding="0" cellspacing="0" class="container" style="table-layout: fixed;" dir="{$xf.language.text_direction}"> <tr> <td class="header" align="center" valign="top"> <a href="{{ link('canonical:index') }}">{$xf.options.boardTitle}</a> </td> </tr> <tr> <td class="content" align="{{ $xf.isRtl ? 'right' : 'left' }}" valign="top"> {$html|raw} </td> </tr> <tr> <td class="footer" align="center" valign="top"> <div>{{ phrase('visit_board_html', {'board_url': link('canonical:index'), 'board_title': $xf.options.boardTitle}) }}</div> <xf:if contentcheck="true"> <div class="footerExtra"><xf:contentcheck>{{ phrase('email_footer_html') }}</xf:contentcheck></div> </xf:if> </td> </tr> </table> </td> </tr> </table> </body> </html> <mail:text> {$text} ----------------------------- {{ phrase('visit_board_text', {'board_title': $xf.options.boardTitle, 'board_url': link('canonical:index')}) }} {{ phrase('email_footer_text') }} </mail:text>]]>

</template>


-<template title="PAGE_CONTAINER" version_string="2.2.2" version_id="2020270" addon_id="XF" type="public">

<![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> <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:elseif is="property('publicMetadataLogoUrl')" /> <link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" /> </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> --- 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')}}" rel="nofollow"> <xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" /> <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 p-navgroup-link" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}"> <xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" /> <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:fa icon="fa-window-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:fa icon="fa-cog" /> </a> <span class="<xf:if is="property('uix_searchButton')">uix_search--submit</xf:if> uix_searchIcon"> <xf:fa icon="fa-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]"> <xf:label> {{ phrase('search_titles_only') }} <xf:if is="$xf.options.enableTagging"> <span tabindex="0" role="button" data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}"> <xf:fa icon="far fa-question-circle" class="u-muted u-smaller" /> </span> </xf:if> </xf:label> </xf:option> </xf:checkbox> </div> <!--[XF:search_menu:above_member]--> <div class="menu-row"> <div class="inputGroup"> <span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span> <input type="text" class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member')|for_attr }}" aria-labelledby="ctrl_search_menu_by_member" /> </div> </div> <div class="menu-footer"> <span class="menu-footer-controls"> <xf:button type="submit" class="button--primary" icon="search" /> <xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button> </span> </div> <xf:csrf /> </form> </div> <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]"> <xf:label> {{ phrase('search_titles_only') }} <xf:if is="$xf.options.enableTagging"> <span tabindex="0" role="button" data-xf-init="tooltip" data-trigger="hover focus click" title="{{ phrase('tags_will_also_be_searched') }}"> <xf:fa icon="far fa-question-circle" class="u-muted u-smaller" /> </span> </xf:if> </xf:label> </xf:option> </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') != 'link'"> <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="" title="" /> <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" title="{$xf.visitor.username}" aria-expanded="false" aria-haspopup="true"> <xf:avatar user="$xf.visitor" size="xxs" href="" title="" /> <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" title="{{ phrase('conversations')|for_attr }}" aria-label="{{ phrase('inbox')|for_attr }}" aria-expanded="false" aria-haspopup="true"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span> </a> <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('conversations/popup') }}" data-nocache="true" data-load-target=".js-convMenuBody"> <div class="menu-content"> <h3 class="menu-header">{{ phrase('conversations') }}</h3> <div class="js-convMenuBody"> <div class="menu-row">{{ phrase('loading...') }}</div> </div> <div class="menu-footer menu-footer--split"> <div class="menu-footer-main"> <ul class="listInline listInline--bullet"> <li><a href="{{ link('conversations') }}">{{ phrase('show_all') }}</a></li> <xf:if is="$xf.visitor.canStartConversation()"> <li><a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a></li> </xf:if> </ul> </div> </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_unviewed ? ' badgeContainer--highlighted' : '' }}" data-badge="{$xf.visitor.alerts_unviewed|number}" data-xf-click="menu" data-xf-key="{{ phrase('shortcut.alerts_menu')|for_attr }}" data-menu-pos-ref="< .p-navgroup" title="{{ phrase('alerts')|for_attr }}" aria-label="{{ phrase('alerts')|for_attr }}" aria-expanded="false" aria-haspopup="true"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('nav_alerts') }}</span> </a> <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true" data-href="{{ link('account/alerts-popup') }}" data-nocache="true" data-load-target=".js-alertsMenuBody"> <div class="menu-content"> <h3 class="menu-header">{{ phrase('alerts') }}</h3> <div class="js-alertsMenuBody"> <div class="menu-row">{{ phrase('loading...') }}</div> </div> <div class="menu-footer menu-footer--split"> <div class="menu-footer-main"> <ul class="listInline listInline--bullet"> <li><a href="{{ link('account/alerts') }}">{{ phrase('show_all') }}</a></li> <li><a href="{{ link('account/alerts/mark-read') }}" class="js-alertsMarkRead">{{ phrase('mark_read') }}</a></li> <li><a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a></li> </ul> </div> </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') == 'top') ? ' uix_stickyBodyElement' : '' }}"> <div class="uix_sidebar--scroller"> <xf:ad position="container_sidebar_above" /> <xf:macro name="welcomeSection" template="uix_welcomeSection" arg-location="sidebar" arg-showWelcomeSection="{$uix_showWelcomeSection}" /> <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="$srcset">{{ property('publicLogoUrl2x') ? base_url(property('publicLogoUrl2x')) . ' 2x' : '' }}</xf:set> <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')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}" width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" /> <xf:else /> <div class="uix_logo--text"><xf:if is="{{ property('uix_logoIcon') }}"><i class="{{ property('uix_logoIcon') }} uix_logoIcon"></i></xf:if>{{ property('uix_logoText') }}</div> </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') && !property('uix_removeHeaderWrapper')}}">uix_stickyBar</xf:if>" data-xf-init="{{ property('uix_stickyStaffBar') ? 'sticky-header' : ''}}"> <div class="pageContent"> <xf:contentcheck> <xf:macro name="uix_socialMedia__component" arg-content="{$uix_socialMediaContent}" arg-location="staffBarLeft" /> <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:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a> </xf:if> <xf:if contentcheck="true"> <a class="p-staffBar-link menuTrigger" data-xf-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: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:mod_tools_menu:bottom]--> </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="property('uix_viewportWidthRemoveSubNav') != '100%'"> <xf:if is="$selectedNavChildren is not empty"> <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: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 {{ property('uix_stickySidenav') ? 'uix_stickyBodyElement' : '' }}"> <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:if is="$xf.visitor.user_id"> <ul class="uix_sidebarNavList"> <li><div class="p-navEl {{$uix_myAccountLinks == 'profile' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><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 {{$uix_myAccountLinks == 'alerts' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><a data-nav-id="alerts" href="{{ link('account/alerts') }}" class="p-navEl-link">{{ phrase('alerts')}}</a></div></div></li> <li><div class="p-navEl {{$uix_myAccountLinks == 'settings' ? 'is-selected' : ''}}"><div class="p-navEl__inner u-ripple"><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> --- UIX main tab component --- </xf:comment> <xf:set var="$uix_mainTabsOffset"> [ { "breakpoint": "0", "offset": "0" } <xf:if is="{$uix_responsiveStaffBar} && !{$uix_alwaysStaffBar}"> ,{ "breakpoint": "{{ property('uix_staffBarBreakpoint')|escape('json') }}", "offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}" } </xf:if> <xf:if is="{$uix_alwaysStaffBar}"> ,{ "breakpoint": "0", "offset": "{{property('uix_stickyStaffBarHeight')|escape('json')}}" } </xf:if> <xf:if is="{{property('publicNavSticky')}} != 'none'"> ,{ "breakpoint": "0", "offset": "{{property('uix_stickyNavHeight')|escape('json')}}" } <xf:if is="{{property('publicNavSticky')}} == 'all' && {$uix_subNavContentStatic}" /> ,{ "breakpoint": "{{ property('uix_viewportWidthRemoveSubNav')|escape('json') }}", "offset": "{{(property('uix_stickySectionLinkHeight'))|escape('json')}}" } </xf:if> ] </xf:set> <xf:set var="$uix_mainTabComponent"> <xf:if contentcheck="true"> <div data-xf-init="{{ property('uix_mainTabsSticky') ? 'sticky-header' : ''}}" class="block uix_mainTabBar {{ (property('uix_mainTabsSticky') && property('uix_removeHeaderWrapper')) ? 'uix_stickyBar' : ''}}" data-top-offset-breakpoints="{$uix_mainTabsOffset|for_attr}"> <div class="block-tabHeader tabs hScroller" data-xf-init="h-scroller"> <span class="hScroller-scroll"> <xf:contentcheck> <xf:if is="{$uix_mainTabSets}"> <xf:set var="$uix_hasMainTabs" value="1" /> <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> --- 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:fa icon="fa-{$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" aria-label="{{ phrase('whats_new')|for_attr }}" 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 AND $rootBreadcrumb.href != $xf.fullUri"> <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 AND $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> <a class="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"> <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" rel="nofollow"> <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> <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 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 ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-up" /><span class="u-srOnly">{{ phrase('top') }}</span></xf:button> <xf:if is="property('scrollJumpButtons') != 'up'"> <xf:button href="#footer" class="button--scroll ripple-JsOnly" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-down" /><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button> </xf:if> </div> </xf:if> <xf: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="count($xf.reactionsActive) > 1"> <script type="text/template" id="xfReactTooltipTemplate"> <div class="tooltip-content-inner"> <div class="reactTooltip"> <xf:foreach loop="$xf.reactionsActive" key="$reactionId" value="$reaction"> <xf:reaction id="{$reactionId}" tooltip="true" /> </xf:foreach> </div> </div> </script> </xf:if> <xf: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 {{ !$sidebarNav ? 'u-ripple' : '' }} {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}> <xf:if is="$sidebarNav"> <div class="p-navEl__inner u-ripple"> </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" 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-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"> <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:if is="!property('uix_sideNavCollapsed') && $selected">is-expanded</xf:if>" rel="nofollow"><xf:fa icon="fa-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"><xf:fa icon="{$nav.icon}" /> </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-ripple 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" version_string="2.2.0 Beta 1" version_id="2020031" addon_id="XF" type="public">

<![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-outer"><xf:trim> <div class="block-outer-opposite"> <div class="buttonGroup"> <xf:button href="{{ link('account/alerts/mark-read') }}" class="button--link" overlay="true"> {{ phrase('mark_read') }} </xf:button> </div> </div> </xf:trim></div> <div class="block-container"> <div class="block-body"> <xf:if is="$alerts is not empty"> <ol class="listPlain" data-xf-init="alerts-list"> <xf:foreach loop="$alerts" value="$alert"> <li data-alert-id="{$alert.alert_id}" class="alert js-alert block-row block-row--separated {{ $alert.isUnreadInUi() ? 'is-unread' : '' }}"> <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" version_string="2.2.0 Beta 1" version_id="2020031" addon_id="XF" type="public">

<![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:foreach loop="$styles" value="$style"> <xf:option value="{$style.style_id}">{$style.title}{{ !$style.user_selectable ? ' *' : '' }}</xf:option> </xf:foreach> </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="$languages" value="$language"> <xf:option value="{$language.language_id}">{$language.title}{{ !$language.user_selectable ? ' *' : '' }}</xf:option> </xf:foreach> </xf:selectrow> <xf:else /> <xf:hiddenval name="user[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> <xf:if is="$xf.visitor.canUsePushNotifications()"> <xf:formrow label="{{ phrase('push_notifications') }}" rowtype="button" explain="{{ phrase('enable_push_explain') }}"> <xf:button class="is-disabled" data-xf-init="push-toggle"> {{ phrase('push_checking_device_capabilities...') }} </xf:button> </xf:formrow> <xf:checkboxrow label=""> <xf:option name="option[push_on_conversation]" checked="{$xf.visitor.Option.push_on_conversation}" label="{{ phrase('receive_push_notification_when_new_conversation_message_is_received') }}" /> </xf:checkboxrow> <xf:js> jQuery.extend(true, XF.config, { skipPushNotificationSubscription: true, skipPushNotificationCta: true }); jQuery.extend(XF.phrases, { push_enable_label: "{{ phrase('push_enable_label')|escape('js') }}", push_disable_label: "{{ phrase('push_disable_label')|escape('js') }}", push_not_supported_label: "{{ phrase('push_not_supported_label')|escape('js') }}", push_blocked_label: "{{ phrase('push_blocked_label')|escape('js') }}" }); </xf:js> <xf:else /> <xf:hiddenval name="option[push_on_conversation]">{$xf.visitor.Option.push_on_conversation}</xf:hiddenval> </xf:if> </div> <xf:if is="$alertOptOuts is not empty"> <xf:css src="notification_opt_out.less" /> <h2 class="block-formSectionHeader"><span class="block-formSectionHeader-aligner">{{ phrase('receive_notification_when_someone...') }}</span></h2> <div class="block-body"> <xf:set var="$canPush" value="{{ $xf.visitor.canUsePushNotifications() }}" /> <xf:foreach loop="$alertOptOuts" key="$contentType" value="$options"> <xf:foreach loop="$options" key="$action" value="$label"> <xf:formrow label="{$label}" data-content-type="{$contentType}" data-action="{$action}"> <ul class="notificationChoices"> <li class="notificationChoices-choice notificationChoices-choice--alert"> <xf:checkbox standalone="true"> <xf:option name="alert[{$contentType}_{$action}]" data-xf-init="{{ $canPush ? 'disabler' : '' }}" data-container="< .notificationChoices | .notificationChoices-choice--push" checked="{{ $xf.visitor.Option.doesReceiveAlert($contentType, $action) }}" label="{{ phrase('alert') }}" /> </xf:checkbox> </li> <xf:if is="$canPush"> <li class="notificationChoices-choice notificationChoices-choice--push"> <xf:checkbox standalone="true"> <xf:option name="push[{$contentType}_{$action}]" checked="{{ $xf.visitor.Option.doesReceivePush($contentType, $action) }}" label="{{ phrase('push') }}" /> </xf:checkbox> <xf:hiddenval name="push_shown[{$contentType}_{$action}]">1</xf:hiddenval> </li> </xf:if> </ul> </xf:formrow> </xf:foreach> <hr class="formRowSep" /> </xf:foreach> </div> </xf:if> <xf:submitrow icon="save" sticky="true" /> </div> </xf:form>]]>

</template>


-<template title="account_visitor_menu" version_string="2.2.0 Beta 5" version_id="2020035" addon_id="XF" type="public">

<![CDATA[<xf:if contentcheck="true"> <h4 class="menu-tabHeader tabs" data-xf-init="tabs" role="tablist"> <span class="hScroller" data-xf-init="h-scroller"> <span class="hScroller-scroll"> <a href="{{ link('account') }}" class="tabs-tab is-active" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenu') }}">{{ phrase('your_account') }}</a> <xf:contentcheck> <xf:if is="$xf.visitor.canViewBookmarks()"> <a href="{{ link('account/bookmarks') }}" class="tabs-tab" role="tab" tabindex="0" aria-controls="{{ unique_id('accountMenuBookmarks') }}">{{ phrase('bookmarks') }}</a> </xf:if> <!--[XF:account_tabs:bottom]--> </xf:contentcheck> </span> </span> </h4> <xf:set var="$hasTabs" value="{{ true }}" /> </xf:if> <xf:set var="$accountHtml"> <div class="menu-row menu-row--alt"> <xf:macro name="visitor_panel_row" /> </div> <xf:macro name="visitor_panel_row"> <div class="contentRow contentRow--alignMiddle"> <div class="contentRow-figure"> <span class="avatarWrapper"> <xf:avatar user="{$xf.visitor}" size="s" href="" notooltip="true" /> <xf:if is="$xf.visitor.canUploadAvatar()"> <a class="avatarWrapper-update" href="{{ link('account/avatar') }}" data-xf-click="overlay"><span>{{ phrase('edit') }}</span></a> </xf:if> </span> </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:fa icon="fa-comments" /> <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_reactions]--> <dl class="pairs pairs--justified fauxBlockLink"> <xf:if is="property('uix_visitorPanelIcons')"> <xf:fa icon="fa-thumbs-up" /> <xf:else /> <dt>{{ phrase('reaction_score') }}</dt> </xf:if> <dd> <a href="{{ link('account/reactions') }}" class="fauxBlockLink-linkRow u-concealed"> {$xf.visitor.reaction_score|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:fa icon="fa-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/reactions') }}" class="menu-linkRow">{{ phrase('reactions_received') }}</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 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" version_string="2.1.0 Beta 5" version_id="2010035" addon_id="XF" type="public">

<![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" version_string="2.2.1" version_id="2020170" addon_id="XF" type="public">

<![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" version_string="2.2.1" version_id="2020170" addon_id="XF" type="public">

<![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" version_string="2.2.0 Release Candidate 2" version_id="2020052" addon_id="XF" type="public">

<![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>


-<template title="app_breadcrumbs.less" version_string="2.2.0" version_id="2020070" addon_id="XF" type="public">

<![CDATA[.breadcrumb { <xf:if is="property('uix_pageStyle') == 'fixed'"> .m-pageWidth(); </xf:if> .pageContent { <xf:if is="property('uix_pageStyle') != 'fixed'"> .m-pageWidth(); </xf:if> } .p-body-inner & { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; .pageContent { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; } } } .p-pageWrapper .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;} } } .p-breadcrumbs { .m-listPlain(); .m-clearFix(); // margin-bottom: 5px; // line-height: 1.5; display: flex; flex-wrap: wrap; 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; 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, false ltr); //, .5em .m-faContent(@fa-var-angle-left, false, rtl); //, .5em margin: 0 .5em; } &:first-child { padding-left: 0; } &:last-child { &: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; &:hover {text-decoration: none;} } &:after { display: none; } a:before { .m-faBase(); .m-faContent(@fa-var-chevron-left, .72em, ltr); .m-faContent(@fa-var-chevron-right, .72em, rtl); // margin-right: .5em; font-size: @xf-uix_iconSizeLarge !important; color: inherit; } } } }]]>

</template>


-<template title="app_footer.less" version_string="2.1.0 Beta 2" version_id="2010032" addon_id="XF" type="public">

<![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; <xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverFooterMenu')"> .m-pageWidth(); .m-pageInset(); </xf:if> padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingMedium; .xf-uix_footerMenu(); .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(); .m-pageInset(); <xf:if is="(property('uix_pageStyle') != 'wrapped')"> padding:0; </xf:if> </xf:if> } a { .xf-publicFooterLink(); } } .p-footer-copyrightRow { order: @xf-uix_copyrightOrder; <xf:if is="property('uix_pageStyle') != 'covered' && !property('uix_forceCoverCopyright')"> .m-pageWidth(); .m-pageInset(); </xf:if> .xf-uix_footerCopyrightRow(); .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(); .m-pageInset(); <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" version_string="2.2.0 Beta 4" version_id="2020034" addon_id="XF" type="public">

<![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 { .m-pageInset(); <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%; <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 { 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 { &[src$="/xenforo-logo.svg"] { height: 36px; } // 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; } } } } ]]>

</template>


-<template title="app_inlinemod.less" version_string="2.2.0 Beta 1" version_id="2020031" addon_id="XF" type="public">

<![CDATA[// #################################### INLINE MOD BUTTON ################ .inlineModButton { display: inline-block; position: relative; i:before { display: inline-block; .m-faBase(); .m-faContent(@fa-var-check-square, 1em); //, .88em vertical-align: -1px; font-size: 1.2em; margin: -.2em 0; line-height: 1; } &.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(); .m-pageInset(); 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" version_string="2.2.1" version_id="2020170" addon_id="XF" type="public">

<![CDATA[// navEl / Navigation Elements for header navigation .p-navEl { .m-clearFix(); display: inline-flex; align-items: center; } .p-navEl-linkHolder { float: left; } .p-navEl-link { float: left; // .m-transition(opacity, background; @_nav-elTransitionSpeed); text-decoration: none !important; max-height: 100%; &.p-navEl-link--menuTrigger { cursor: pointer; &:after { .m-menuGadget(); // .58em opacity: .5; .m-transition(opacity; @_nav-elTransitionSpeed); } &:hover:after { opacity: 1; } } } .p-navEl-splitTrigger { float: left; opacity: .5; cursor: pointer; text-decoration: none; .m-transition(all; @_nav-elTransitionSpeed); &:after { .m-menuGadget(); // .58em line-height: 1; } &: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; } } } a.uix_logo { text-decoration: none; } .p-nav-inner { <xf:if is="property('uix_pageStyle') == 'covered'"> .m-pageWidth(); .m-pageInset(0px); </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; .uix_logo { display: flex; } &.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-bars); 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; &:not([src$=".svg"]) { width: auto; } } } <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; white-space: nowrap; .xf-uix_logoText__style(); &:hover { text-decoration: none; } } <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%; .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-default(@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; } .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 calc(@xf-paddingSmall * 2); } </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: 1.2em; text-align: center; } } */ &.p-navgroup-link--conversations { i:after { .m-faBase(); display: inline-block; min-width: 1em; .m-faContent(@fa-var-envelope, 1em); } } &.p-navgroup-link--alerts { i:after { .m-faBase(); display: inline-block; min-width: 1em; .m-faContent(@fa-var-bell, 1em); } } &.p-navgroup-link--bookmarks i:after { .m-faContent(@fa-var-bookmark); //, .75em } &.p-navgroup-link--whatsnew i:after { .m-faBase(); .m-faContent(@fa-var-bolt, .5em); width: auto; } &.p-navgroup-link--search i:after { .m-faBase(); .m-faContent(@fa-var-search); } &.p-navgroup-link--logIn { i:after { .m-faBase(); display: inline-block; min-width: 1em; .m-faContent(@fa-var-key); } } &.p-navgroup-link--register { i:after { .m-faBase(); display: inline-block; min-width: 1em; .m-faContent(@fa-var-clipboard); } } } .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 - 6px); .p-navgroup { background: none; } .p-navgroup-link { border: none; border-radius: @xf-borderRadiusMedium; &.is-menuOpen { .m-borderBottomRadius(0); } &.badgeContainer { opacity: 1; } } } } } /* @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; } } } <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_prepend.less" version_string="2.2.0 Release Candidate 1" version_id="2020051" addon_id="XF" type="public">

<![CDATA[.m-pageWidth(@min-width: @xf-pageEdgeSpacer) { /* max-width: @xf-pageWidthMax; padding: 0 @xf-pageEdgeSpacer; margin: 0 auto; */ } .m-pageInset(@defaultPadding: @xf-pageEdgeSpacer) { /* padding-left: @defaultPadding; padding-right: @defaultPadding; // iPhone X/Xr/Xs support @supports(padding: max(0px)) { & { padding-left: ~"max(@{defaultPadding}, env(safe-area-inset-left))"; padding-right: ~"max(@{defaultPadding}, env(safe-area-inset-right))"; } } */ } .m-navElHPadding(@padding) { .p-navEl-link { padding: 0 @padding; &.p-navEl-link--splitMenu { padding-right: ((@padding) / 8); } &.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-splitTrigger { padding: 0 ((@padding) / 3); } }]]>

</template>


-<template title="app_sectionlinks.less" version_string="2.2.1" version_id="2020170" addon_id="XF" type="public">

<![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-default(@xf-publicSubNav--color, ~""), xf-default(@xf-publicSubNavElHover--color, ~"") ); } .p-nav-opposite a:not(.button) { color: inherit; &:hover { .xf-publicSubNavElHover(); } } &.p-sectionLinks--empty { height: 10px; display: none; } .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 { font-size: @xf-uix_iconSizeLarge; .m-avatarSize(@xf-uix_iconSize); } .p-navSearch-trigger, .p-navgroup .p-navgroup-link {padding: @xf-paddingSmall;} } .p-sectionLinks-inner { // .m-clearFix(); // .m-pageWidth(); @defaultPadding: max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH); .m-pageInset(@defaultPadding); 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; height: @xf-uix_stickyStaffBarHeight; &: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" version_string="2.2.0 Release Candidate 2" version_id="2020052" addon_id="XF" type="public">

<![CDATA[// ######################################### STAFF BAR ################################# .p-staffBar { .xf-publicStaffBar(); <xf:if is="property('uix_pageStyle') == 'fixed'"> .m-pageWidth(); .m-pageInset(); </xf:if> .hScroller-action { .m-hScrollerActionColorVariation( xf-default(@xf-publicStaffBar--background-color, transparent), xf-default(@xf-publicStaffBar--color, ~""), xf-intensify(@xf-publicStaffBar--color, 10%) ); } <xf:if is="{{ property('uix_stickyStaffBar')}}"> @supports (position: sticky) or (position: -webkit-sticky) { & { position: -webkit-sticky; position: sticky; top: 0; &.is-sticky-broken, &.is-sticky-disabled { position: static; top: auto; } } } </xf:if> .pageContent { display: flex; align-items: center; // justify-content: space-between; position: relative; height: 100%; <xf:if is="property('uix_pageStyle') == 'covered'"> .m-pageWidth(); .m-pageInset(); </xf:if> min-height: @xf-uix_stickyStaffBarHeight; .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" version_string="2.2.0" version_id="2020070" addon_id="XF" type="public">

<![CDATA[// STICKY NAV SETUP <xf:if is="property('publicNavSticky')"> .p-pageWrapper .p-navSticky { z-index: @zIndex-1; &.is-sticky { z-index: @zIndex-4; // .m-dropShadow(0, 2px, 5px, 0px, .26); <xf:if is="!{{ property('uix_removeHeaderWrapper')}}"> position: fixed !important; top: 0; bottom: auto !important; left: 0; right: 0; margin-left: auto; margin-right: auto; </xf:if> <xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')"> @uix_pageSpacerTotal: @xf-pageEdgeSpacer * 2; @uix_adjustedWrappedPageWidth: @xf-pageWidthMax - @uix_pageSpacerTotal; width: 100vw !important; @media (min-width: @xf-responsiveEdgeSpacerRemoval) { width: ~'calc(100vw - @{uix_pageSpacerTotal}) !important'; } @media (min-width: @uix_adjustedWrappedPageWidth) { width: @uix_adjustedWrappedPageWidth !important; } </xf:if> > * {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-navEl, .p-navEl-link {max-height: @xf-uix_stickyNavHeight;} } <xf:if is="property('publicNavSticky')"> .p-sectionLinks { border-bottom: 0; .pageContent { height: @xf-uix_stickySectionLinkHeight; } } </xf:if> } <xf:if is="{{ property('uix_removeHeaderWrapper')}}"> @supports (position: sticky) or (position: -webkit-sticky) { & { position: -webkit-sticky; position: sticky; top: 0; &.is-sticky-broken, &.is-sticky-disabled { position: static; top: auto; } } } </xf:if> } </xf:if> <xf:if is="property('uix_mainTabsSticky')"> .uix_headerContainer .uix_mainTabBar.is-sticky { position: fixed !important; bottom: auto !important; left: 0; right: 0; @media (max-width: @xf-uix_search_maxResponsiveWidth ) {z-index: 500;} margin: 0 auto; border-radius: 0 !important; .tabs-tab {height: @xf-uix_mainTabsHeight;} box-shadow: @xf-uix_elevation1; <xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')"> width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important; </xf:if> } .uix_mainTabBar.is-sticky { box-shadow: @xf-uix_elevation1; z-index: 300; } </xf:if> <xf:if is="property('uix_stickyStaffBar')"> .p-staffBar.is-sticky { <xf:if is="!{{ property('uix_removeHeaderWrapper')}}"> position: fixed !important; bottom: auto !important; top: 0 !important; left: 0; right: 0; margin: 0 auto; </xf:if> z-index: 500; border-radius: 0 !important; .xf-uix_stickyStaffbarStyle(); height: @xf-uix_stickyStaffBarHeight; <xf:if is="property('publicNavSticky') == 'none'"> box-shadow: @xf-uix_elevation1; </xf:if> <xf:if is="property('uix_pageStyle') == 'wrapped'&& !property('uix_removeHeaderWrapper')"> width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important; </xf:if> } <xf:if is="{{ property('uix_removeHeaderWrapper')}}"> .p-staffBar { @supports (position: sticky) or (position: -webkit-sticky) { & { position: -webkit-sticky; position: sticky; top: 0; &.is-sticky-broken, &.is-sticky-disabled { position: static; top: auto; } } } } </xf:if> </xf:if>]]>

</template>


-<template title="app_title.less" version_string="2.2.0 Release Candidate 1" version_id="2020051" addon_id="XF" type="public">

<![CDATA[.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-body-inner & { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; .pageContent { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; } } } .p-pageWrapper > .p-body-header .pageContent { min-height: 36px; } .p-pageWrapper .p-body-header { .xf-uix_titlebar(); .pageContent { display: flex; align-items: center; .p-title-pageAction {margin-top: 0;} @media(max-width: @xf-responsiveMedium) { flex-wrap: wrap; } } .contentRow {flex-grow: 1;} .uix_headerInner { margin: 5px; margin-left: 0; 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; } .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" version_string="2.0.4" version_id="2000470" addon_id="XF" type="public">

<![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="approval_queue.less" version_string="2.1.0 Beta 5" version_id="2010035" addon_id="XF" type="public">

<![CDATA[.approvalQueue { .block-container.approvalQueue-item--approve { .message, .message-cell--user, .message-cell--extra { background: @xf-inlineModHighlightColor; } .message .message-userArrow:after { border-right-color: @xf-inlineModHighlightColor; } } .block-container.approvalQueue-item--delete { .message-cell--user, .message-cell--main { opacity: 0.25; } } .block-container.approvalQueue-item--spam { border-color: red; .message-cell--user, .message-cell--main { opacity: 0.25; } } }]]>

</template>


-<template title="bb_code.less" version_string="2.2.2" version_id="2020270" addon_id="XF" type="public">

<![CDATA[@_bbCodeBlock-spacing: .5em; @_bbCodeBlock-paddingV: @xf-paddingMedium; @_bbCodeBlock-paddingH: @xf-paddingLarge; @_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2; .bbCodeBlock { display: flow-root; 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); //, 1em display: inline-block; margin-left: 5px; } } .bbCodeBlock-content { position: relative; padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH; .m-clearFix(); } .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; z-index: @zIndex-1; .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(-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; } } } .bbCodeBlock--unfurl { .xf-contentHighlightBase(); padding: @_bbCodeBlock-paddingV; width: 650px; max-width: 100%; border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature; overflow: hidden; .contentRow-header { margin: 0; font-size: @xf-fontSizeNormal; font-weight: normal; .m-overflowEllipsis(); } .contentRow-snippet { font-size: @xf-fontSizeSmaller; font-style: normal; } .contentRow-minor { font-size: @xf-fontSizeSmaller; } &.is-pending { opacity: 0.5; &.is-recrawl { opacity: 1; } } &.is-simple { .contentRow-figure { display: none; } } .bbCodeBlockUnfurl-icon { width: 12px; vertical-align: -2px; } } .bbCodeCode { margin: 0; padding: 0; .has-hiddenscroll & { // solely to workaround this Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=914844 // TODO: remove when fixed padding-bottom: @xf-paddingLarge; } 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 { & when (@xf-styleType = light) { color: #a50; } & when (@xf-styleType = dark) { color: #8292a2; } } &.prism-constant { & when (@xf-styleType = light) { color: #05a; } & when (@xf-styleType = dark) { color: #f92672; } } &.prism-tag { & when (@xf-styleType = light) { color: #170; } & when (@xf-styleType = dark) { color: #f92672; } } &.prism-boolean { & when (@xf-styleType = light) { color: #219; } & when (@xf-styleType = dark) { color: #ae81ff; } } &.prism-symbol, &.prism-atrule, &.prism-keyword { & when (@xf-styleType = light) { color: #708; } & when (@xf-styleType = dark) { color: #e6db74; } } &.prism-selector, &.prism-function { & when (@xf-styleType = light) { color: #05a; } & when (@xf-styleType = dark) { color: #e6db74; } } &.prism-deleted { color: #d44; } &.prism-inserted { color: #292; } &.prism-string, &.prism-attr-value { & when (@xf-styleType = light) { color: #a11; } & when (@xf-styleType = dark) { color: #a6e22e; } } &.prism-number { & when (@xf-styleType = light) { color: #164; } & when (@xf-styleType = dark) { color: #ae81ff; } } &.prism-attr-name, &.prism-char, &.prism-builtin { & when (@xf-styleType = light) { color: #00c; } & when (@xf-styleType = dark) { color: #a6e22e; } } &.prism-regex, &.prism-important, &.prism-variable, &.prism-package { & when (@xf-styleType = light) { color: #05a; } & when (@xf-styleType = dark) { color: #fd971f; } } &.prism-class-name, &.prism-important, &.prism-bold { & when (@xf-styleType = light) { color: #00f; } & when (@xf-styleType = dark) { color: #e6db74; } } &.prism-bold { font-weight: bold; } &.prism-italic, &.prism-constant { & when (@xf-styleType = light) { color: #05a; } & when (@xf-styleType = dark) { color: #f92672; } 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; white-space: pre-wrap; } .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; } } .bbCodeInlineSpoiler { background-color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0); text-shadow: @xf-textColorMuted 0 0 14px; cursor: pointer; a, span { color: inherit !important;; .has-js & { pointer-events: none; } } .smilie { filter: blur(8px) grayscale(90%); } &:hover { text-shadow: @xf-textColorMuted 0 0 10px; } }]]>

</template>


-<template title="category_view" version_string="2.2.0 Beta 1" version_id="2020031" addon_id="XF" type="public">

<![CDATA[<xf:title>{$category.title}</xf:title> <xf:description>{$category.description|raw}</xf:description> <xf:if is="!$category.isSearchEngineIndexable()"> <xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head> </xf:if> <xf:macro template="metadata_macros" name="canonical_url" arg-canonicalUrl="{{ link('canonical:categories', $category) }}" /> <xf:macro template="category_macros" name="category_page_options" arg-category="{$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="code_editor.less" version_string="2.2.0 Beta 2" version_id="2020032" addon_id="XF" type="public">

<![CDATA[/* XF-RTL:disable */ .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; .xf-input(); font-family: @xf-fontFamilyCode; padding: 0; -ltr-rtl-border-color: @xf-borderColorHeavy @xf-borderColorLight @xf-borderColorLight @xf-borderColorHeavy; //color: @xf-inputTextColor; //background: @xf-inputBgColor; //border: @xf-borderSize solid; //border-radius: @xf-borderRadiusMedium; .m-inputZoomFix(); &.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)); } // Default CSS (mostly) {{ include('codemirror.less') }} // Extra stuff for DARK styles, taking values from CodeMirror's DARCULA theme .cm-s-default { & when (@xf-styleType = dark) { &.CodeMirror { .CodeMirror-cursor { border-left: 1px solid #dddddd; } .CodeMirror-activeline-background { background: #3A3A3A; } .CodeMirror-selected { background: #085a9c; } .CodeMirror-gutters { background: rgb(72, 72, 72); border-right: 1px solid grey; color: #606366 } .CodeMirror-matchingbracket { background-color: #3b514d; color: yellow !important; } } span.cm-keyword { font-weight: bold; color: #CC7832; } span.cm-atom { font-weight: bold; color: #CC7832; } span.cm-number { color: #6897BB; } span.cm-def { color: #FFC66D; } span.cm-variable { color: #A9B7C6; } span.cm-property { color: #A9B7C6; } span.cm-operator { color: #A9B7C6; } span.cm-variable-2 { color: #A9B7C6; } span.cm-variable-3, span.cm-comment { color: #808080; } span.cm-string { color: #6A8759; } span.cm-string-2 { color: #6A8759; } span.cm-meta { color: #BBB529; } span.cm-qualifier { color: #6A8759; } span.cm-builtin { color: #A9B7C6; } span.cm-bracket { color: #A9B7C6; } span.cm-tag { color: #CC7832; } span.cm-attribute { color: #6A8759; } span.cm-link { color: #287BDE; } span.cm-error { color: #BC3F3C; } span.cm-invalidchar { color: #BC3F3C; } span.cm-type { color: #A9B7C6; } } // background-color: #fff; } /* XF-RTL:enable */]]>

</template>


-<template title="content_vote_macros" version_string="2.2.1" version_id="2020170" addon_id="XF" type="public">

<![CDATA[<xf:macro name="vote_control" arg-link="!" arg-content="!" arg-extraClass=""> <xf:set var="$currentVote" value="{{ $content.getVisitorContentVote() }}" /> <xf:set var="$canVote" value="{{ $content.canVoteOnContent() }}" /> <div class="contentVote {{ $currentVote ? 'is-voted' : '' }} js-contentVote {$extraClass}" data-xf-init="content-vote" data-content-id="{{ $content.getEntityContentTypeId() }}"> <a href="{{ $canVote ? link($link, $content, {'type' : 'up'}) : 'javascript:' }}" class="contentVote-vote {{ $canVote ? '' : 'is-disabled' }} contentVote-vote--up {{ ($currentVote == 'up') ? 'is-voted' : '' }}" data-vote="up"><span class="u-srOnly">{{ phrase('upvote') }}</span></a> <span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : '' }} {{ $content.vote_score < 0 ? 'is-negative' : '' }} js-voteCount" data-score="{$content.vote_score}">{$content.vote_score_short}</span> <xf:if is="$content.isContentDownvoteSupported()"> <a href="{{ $canVote ? link($link, $content, {'type' : 'down'}) : 'javascript:' }}" class="contentVote-vote {{ ($canVote AND $content.canDownvoteContent()) ? '' : 'is-disabled' }} contentVote-vote--down {{ ($currentVote == 'down') ? 'is-voted' : '' }}" data-vote="down"><span class="u-srOnly">{{ phrase('downvote') }}</span></a> </xf:if> </div> </xf:macro> <xf:macro name="vote_display" arg-content="!" arg-extraClass=""> <div class="contentVote js-contentVote contentVote--display {{ $content.getVisitorContentVote() ? 'is-voted' : '' }} {$extraClass}" data-content-id="{{ $content.getEntityContentTypeId() }}"> <span class="contentVote-score {{ $content.vote_score > 0 ? 'is-positive' : '' }} {{ $content.vote_score < 0 ? 'is-negative' : '' }} js-voteCount" data-score="{$content.vote_score}">{$content.vote_score_short}</span> <span class="contentVote-description">{{ $content.vote_score == 1 ? phrase('vote_noun') : phrase('votes') }}</span> </div> </xf:macro> <xf:macro name="vote_display_placeholder" arg-extraClass=""> <div class="contentVote contentVote--display contentVote--placeholder {$extraClass}"> <span class="contentVote-score">-</span> <span class="contentVote-description">{{ phrase('votes') }}</span> </div> </xf:macro>]]>

</template>


-<template title="conversation_list" version_string="2.1.10 Patch 2" version_id="2011072" addon_id="XF" type="public">

<![CDATA[<xf:title page="{$page}">{{ phrase('conversations') }}</xf:title> <xf:js src="xf/inline_mod.js" min="1" /> <xf:pageaction if="$xf.visitor.canStartConversation()"> <xf:button href="{{ link('conversations/add') }}" class="button--cta" icon="write">{{ phrase('start_conversation') }}</xf:button> </xf:pageaction> <div class="block" data-xf-init="inline-mod" data-type="conversation" data-href="{{ link('inline-mod') }}"> <div class="block-outer"> <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}" link="conversations" params="{$filters}" wrapperclass="block-outer-main" /> <div class="block-outer-opposite"> <div class="buttonGroup"> <xf:macro template="inline_mod_macros" name="button" arg-variant="inlineModButton--withLabel" arg-label="{{ phrase('selected') }}" arg-tooltip="{{ false }}" /> </div> </div> </div> <div class="block-container"> <div class="block-filterBar"> <div class="filterBar"> <xf:if contentcheck="true"> <ul class="filterBar-filters"> <xf:contentcheck> <xf:if is="$filters.starter_id AND $starterFilter"> <li><a href="{{ link('conversations', null, $filters|replace('starter_id', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> {{ phrase('started_by_x', {'name': $starterFilter.username}) }}</a></li> </xf:if> <xf:if is="$filters.receiver_id AND $receiverFilter"> <li><a href="{{ link('conversations', null, $filters|replace('receiver_id', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> {{ phrase('received_by_x', {'name': $receiverFilter.username}) }}</a></li> </xf:if> <xf:if is="$filters.starred"> <li><a href="{{ link('conversations', null, $filters|replace('starred', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> <span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span> {{ phrase('starred') }}</a></li> </xf:if> <xf:if is="$filters.unread"> <li><a href="{{ link('conversations', null, $filters|replace('unread', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> <span class="filterBar-filterToggle-label">{{ phrase('show_only:') }}</span> {{ phrase('filter_unread') }}</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" data-menu="menu" aria-hidden="true"> <div class="menu-content"> <h4 class="menu-header">{{ phrase('show_only:') }}</h4> <xf:form action="{{ link('conversations/filters') }}"> <div class="menu-row menu-row--separated"> <xf:radio name="filter_type"> <xf:option value="" selected="{{ !$starterFilter AND !$receiverFilter }}">{{ phrase('show_all_conversations') }}</xf:option> <xf:option value="started" selected="{{ $starterFilter ? true : false }}" data-hide="true" label="{{ phrase('started_by...') }}"> <xf:textbox name="starter" value="{{ $starterFilter ? $starterFilter.username : '' }}" ac="single" maxlength="{{ max_length($xf.visitor, 'username') }}"/> </xf:option> <xf:option value="received" selected="{{ $receiverFilter ? true : false }}" data-hide="true" label="{{ phrase('received_by...') }}"> <xf:textbox name="receiver" value="{{ $receiverFilter ? $receiverFilter.username : '' }}" ac="single" maxlength="{{ max_length($xf.visitor, 'username') }}" /> </xf:option> </xf:radio> </div> <div class="menu-row menu-row--separated"> <xf:checkbox> <xf:option name="starred" selected="{$filters.starred}" label="{{ phrase('starred_conversations') }}" /> <xf:option name="unread" selected="{$filters.unread}" label="{{ phrase('unread_conversations') }}" /> </xf:checkbox> </div> <div class="menu-footer"> <span class="menu-footer-controls"> <xf:button type="submit" class="button--primary">{{ phrase('filter') }}</xf:button> </span> </div> <xf:hiddenval name="apply">1</xf:hiddenval> </xf:form> </div> </div> </div> </div> <div class="block-body"> <xf:if is="$userConvs is not empty"> <div class="structItemContainer"> <xf:foreach loop="$userConvs" value="$userConv"> <xf:macro template="conversation_list_macros" name="item" arg-userConv="{$userConv}" /> </xf:foreach> </div> <xf:else /> <div class="block-row">{{ phrase('there_no_conversations_to_display') }}</div> </xf:if> </div> <div class="block-footer block-footer--split uix_conversationsFooterMobile"> <div class="block-footer-main"> <a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a> </div> <xf:if is="$xf.visitor.canStartConversation()"> <div class="block-footer-opposite"> <a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a> </div> </xf:if> </div> </div> <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}" link="conversations" params="{$filters}" wrapperclass="block-outer block-outer--after" /> </div> <xf:widgetpos id="conversation_list_sidebar" position="sidebar" />]]>

</template>


-<template title="conversation_list_macros" version_string="2.1.3" version_id="2010370" addon_id="XF" type="public">

<![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/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, $xf.options.lastPageLinks) }}" 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="conversation_message_macros" version_string="2.1.0 Beta 6" version_id="2010036" addon_id="XF" type="public">

<![CDATA[<xf:macro name="message" arg-message="!" arg-conversation="!" arg-position="" arg-lastRead="{{ null }}"> <xf:css src="message.less" /> <article class="message message--conversationMessage {{ $message.isIgnored() ? ' is-ignored' : '' }} {{ $message.isUnread($lastRead) ? 'is-unread' : '' }} js-message" data-author="{{ $message.User.username ?: $message.username }}"> <span class="u-anchorTarget" id="convMessage-{$message.message_id}"></span> <div class="message-inner"> <div class="message-cell message-cell--user"> <xf:macro template="message_macros" name="user_info" arg-user="{$message.User}" arg-fallbackName="{$message.username}" /> </div> <div class="message-cell message-cell--main"> <div class="message-main js-quickEditTarget"> <div class="message-content"> <header class="message-attribution"> <a href="{{ link('conversations/messages', $message) }}" class="message-attribution-main u-concealed" rel="nofollow"> <xf:date time="{$message.message_date}" /> </a> <span class="message-attribution-opposite"> <xf:if is="$message.isUnread($lastRead)"> <span class="message-newIndicator">{{ phrase('new') }}</span> </xf:if> <xf:if is="$position">#{$position|number}</xf:if> </span> </header> <xf:if is="$message.isIgnored()"> <div class="messageNotice messageNotice--ignored"> {{ phrase('you_are_ignoring_content_by_this_member') }} </div> </xf:if> <div class="message-userContent lbContainer js-lbContainer" data-lb-id="message-{$message.message_id}" data-lb-caption-title="{{ $message.User ? $message.User.username : $message.username }}" data-lb-caption-desc="{{ date_time($message.message_date) }}"> <article class="message-body js-selectToQuote"> {{ bb_code($message.message, 'conversation_message', $message) }} <div class="js-selectToQuoteEnd">&nbsp;</div> </article> <xf:if is="$message.attach_count"> <xf:macro template="message_macros" name="attachments" arg-attachments="{$message.Attachments}" arg-message="{$message}" arg-canView="{{ true }}" /> </xf:if> </div> <xf:macro template="message_macros" name="signature" arg-user="{$message.User}" /> </div> <div class="reactionsBar js-reactionsList {{ $message.reactions ? 'is-active' : '' }}"> <xf:reactions content="{$message}" link="conversations/messages/reactions" /> </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:react content="{$message}" link="conversations/messages/react" list="< .js-message | .js-reactionsList" /> <xf:if is="$conversation.canReply()"> <xf:set var="$quoteLink">{{ link('conversations/reply', $conversation, {'quote': $message.message_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="{$message.message_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('conversations/messages/quote', $message) }}">{{ 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="$message.canReport()"> <a href="{{ link('conversations/messages/report', $message) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report_verb') }}</a> </xf:if> <xf:if is="$message.canEdit()"> <xf:js src="xf/message.js" min="1" /> <a href="{{ link('conversations/messages/edit', $message) }}" class="actionBar-action actionBar-action--edit" data-xf-click="quick-edit" data-editor-target="< .js-quickEditTarget">{{ phrase('edit') }}</a> </xf:if> <xf:if is="$message.canCleanSpam()"> <a href="{{ link('spam-cleaner', $message) }}" class="actionBar-action actionBar-action--spam actionBar-action--menuItem" data-xf-click="overlay">{{ phrase('spam') }}</a> </xf:if> <xf:if is="$xf.visitor.canViewIps() && $message.ip_id"> <a href="{{ link('conversations/messages/ip', $message) }}" class="actionBar-action actionBar-action--ip" data-xf-click="overlay">{{ phrase('ip') }}</a> </xf:if> </xf:contentcheck> </div> </xf:if> </xf:contentcheck> </div> </xf:if> </footer> </div> </div> </div> </article> </xf:macro>]]>

</template>


-<template title="core.less" version_string="2.2.2" version_id="2020270" addon_id="XF" type="public">

<![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;*/ } body { font-size: @xf-fontSizeNormal; } 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(); } } svg { fill: currentColor; } {{ 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') }} {{ include('core_meter_bar.less') }} // ################################# INPUTS & FORMS ##################### {{ 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; z-index: @zIndex-9; .xf-flashMessage(); .m-transitionFadeDown(@xf-animationSpeed); } // AUTOCOMPLETE .autoCompleteList { .m-autoCompleteList(); margin-top: 2px; &.autoCompleteList--inherit { font-size: inherit; li { padding: @xf-paddingLarge; line-height: inherit; } } } // #################################### TAGS ############################## // note that while this is related to tags, it's commonly used so just include it .tagList, .tagList > dt, .tagList > dd { display: inline; padding: 0; margin: 0; } .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(); a&: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-up); //, 1em color: @xf-textColorFeature; //margin-right: .2em; } } .reactionsBar { .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(); &:last-child { margin-top: @xf-messagePadding; } } .reactionSummary { display: inline-block; .m-listPlain(); line-height: 16px; height: 16px; margin: 0 -2px; vertical-align: text-top; > li { display: inline-block; height: 20px; width: 20px; padding: 2px; margin: -2px 0; background: @xf-contentBg; border-radius: 50%; position: relative; margin-left: -6px; &:nth-child(1) { z-index: 3; margin-left: 0; } &:nth-child(2) { z-index: 2; } &:nth-child(3) { z-index: 1; } } .reaction { position: absolute; top: 0; &.reaction { // increase specificity to override .reaction.reaction--<size> display: block; } } } .reactionsBar, .message-responseRow { .reactionSummary { > li { background: @xf-contentAltBg; } .reaction { top: 2px; } } } .reactTooltip { padding: 0; display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; .reaction { margin: @xf-paddingSmall; .m-transition(transform); &:hover { .m-transform(scale(1.2)); } } } .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; } // Bookmarking links for 2.1 .bookmarkLink { &:before { .m-faBase(); .m-faContent(@fa-var-bookmark); font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular); } &.is-bookmarked { &:before { font-weight: @faWeight-solid; } } &.bookmarkLink--highlightable.is-bookmarked { color: @xf-textColorAttention; &:hover { color: @xf-textColorAccentContent; } } span { margin-left: .35em; } } .dragHandle { cursor: move; touch-action: none; &:before { .m-faBase(); .m-faContent(@fa-var-bars); } .is-undraggable & { visibility: hidden; cursor: default; } } .memberProfileBanner { background-size: cover !important; background-position-x: center !important; background-repeat: no-repeat !important; &.memberProfileBanner--small { height: 150px; margin-bottom: @xf-paddingMedium; } &.memberProfileBanner--empty { display: none; } } .solutionIcon { display: inline-flex; padding: @xf-paddingMedium; font-size: @xf-uix_iconSizeLarge; line-height: 1; color: @xf-textColorMuted; .m-transition(); a& { color: @xf-textColorMuted; text-decoration: none; } &:before { .m-faBase(); .m-faContent(@fa-var-check-circle); font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular); } &.is-solution { color: @xf-votePositiveColor; opacity: 1; &:before { font-weight: @faWeight-solid; } } } {{ include('core_action_bar.less') }} {{ include('core_labels.less') }} {{ include('core_pikaday.less') }} {{ include('core_reaction.less') }} {{ include('core_smilie.less') }} {{ include('core_bbcode.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.less" version_string="2.2.0 Beta 6" version_id="2020036" addon_id="XF" type="email">

<![CDATA[// NOTE: THIS DOES NOT HAVE ACCESS TO public:setup.less automatically! // THE LESS HERE SHOULD BE KEPT AS SIMPLE AS POSSIBLE // UI.X Font Sizes /* solution for pxs */ @fontSizeNormal: unit(10 * @xf-fontSizeNormal, px); @fontSizeLargest: unit(10 * @xf-fontSizeLargest, px); @fontSizeSmall: unit(10 * @xf-fontSizeSmall, px); /* solution for rems @fontSizeNormal: (0.625 * @xf-fontSizeNormal); @fontSizeLargest: (0.625 * @xf-fontSizeLargest); @fontSizeSmall: (0.625 * @xf-fontSizeSmall); */ 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: @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; } .bbImage { width: auto; height: auto; max-width: 100%; } #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: @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: @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: @fontSizeSmall; font-family: @xf-emailFont; line-height: @xf-lineHeightDefault; } .footer a { color: @xf-emailTextColorMuted; text-decoration: underline; } .footerExtra { margin-top: 1em; } h2 { font-size: @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: @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; border: none; border-radius: @xf-borderRadiusMedium; color: @xf-buttonTextColor; text-decoration: none; .xf-buttonBase(); .xf-buttonDefault(); .xf-buttonPrimary(); font-size: @fontSizeSmall; background-color: @xf-buttonPrimaryBg; } .buttonFake { display: inline-block; padding: 5px 10px; font-size: @fontSizeSmall; } .minorText, .unsubscribeLink { font-size: @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: @fontSizeLargest; line-height: 3; text-align: center; border: @xf-borderSize solid @xf-emailBorderColor; background-color: @xf-emailContentAltBg; } .inlineSpoilerPlaceholder { font-size: @xf-fontSizeSmall; background-color: @xf-contentAltBg; border: @xf-borderSize solid @xf-borderColorLight; border-radius: @xf-borderRadiusSmall; padding: 1px @xf-paddingSmall; } .u-opposite { text-align: right; } // ################################ ACTIVITY SUMMARY ############################### .p-activitySummary #bodyTableContainer { padding: 0; } .summaryContentWrapper { padding: 0 @xf-paddingLarge; max-width: 1200px; } .summaryHeaderBar { color: @xf-chromeTextColor; background: @xf-chromeBg; font-family: @xf-emailFont; font-size: @xf-fontSizeLargest; line-height: @xf-lineHeightDefault; padding: @xf-paddingMedium @xf-paddingLarge; a { color:@xf-chromeTextColor; } img { max-height: 200px; vertical-align: bottom; &.logo-svg { max-width: 200px; } } } .summaryOuterHeader { width: 100%; table-layout: fixed; margin: @xf-paddingLargest 0; } .summaryOuterHeader-content { font-size: @xf-fontSizeLarger; font-weight: @xf-fontWeightNormal; color: @xf-emailTextColorMuted; } .summaryBlock { color: @xf-emailTextColor; background-color: @xf-emailContentBg; border: @xf-borderSize solid @xf-emailBorderColor; border-radius: @xf-borderRadiusSmall; border-collapse: separate; width: 100%; table-layout: fixed; margin: @xf-paddingLargest 0; } .summaryBlock-header { font-size: @xf-fontSizeLarger; color: @xf-majorHeadingTextColor; background: @xf-majorHeadingBg; border-bottom: @xf-borderSize solid @xf-borderColorLight; border-top-left-radius: @xf-borderRadiusSmall; border-top-right-radius: @xf-borderRadiusSmall; padding: @xf-blockPaddingV @xf-blockPaddingH; a { color: @xf-majorHeadingTextColor; } } .statsGroup { display: flex; flex-flow: row wrap; font-size: @xf-fontSizeLarge; } .stat { flex: auto; vertical-align: top; margin-right: @xf-paddingMedium; margin-bottom: @xf-paddingMedium; } .stat-label { font-size: @xf-fontSizeSmall; color: @xf-emailTextColorMuted; } .p-activitySummary .content.content--attribution, .p-activitySummary .content.content--footer, .p-activitySummary .content.content--footer table { font-size: @xf-fontSizeSmall; color: @xf-emailTextColorMuted; a:not(.button) { color: inherit; text-decoration: underline; } }]]>

</template>


-<template title="core_action_bar.less" version_string="2.2.0" version_id="2020070" addon_id="XF" type="public">

<![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 { display: inline-block; 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: 1.1em; padding-right: 2px; } &.actionBar-action--menuTrigger { display: none; &.is-displayed { display: inline; } &:after { .m-menuGadget(); } } &.actionBar-action--inlineMod { label { color: @xf-linkColor; font-size: 120%; // vertical-align: -2px; } input { .m-checkboxAligner(); } } &.actionBar-action--mq { &:before { .m-faContent("@{fa-var-plus}\20");} // plus &.is-selected { background-color: @xf-contentHighlightBg; border-color: @xf-borderColorHighlight; &:before { .m-faContent("@{fa-var-minus}\20");} // minus } } &.actionBar-action--postLink { text-decoration: inherit !important; color: inherit !important; } &.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}");} &.actionBar-action--like:before { .m-faContent("@{fa-var-thumbs-up}");} &.actionBar-action--reaction:not(.has-reaction) .reaction-text { color: inherit; } &.actionBar-action--view { background: @xf-contentBg; color: @xf-linkColor; .m-buttonBorderColorVariation(@xf-borderColor); padding-left: @xf-paddingLarge; padding-right: @xf-paddingLarge; &:hover, &:active, &:focus { text-decoration: none; background: @xf-contentHighlightBg; } } &.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}\20");} // reply &.actionBar-action--comment:before { .m-faContent("@{fa-var-reply}\20");} // reply &.actionBar-action--like.unlike:before { .m-faContent("@{fa-var-thumbs-down}\20");}// thumbs up &.actionBar-action--reaction.reaction--imageHidden i:before { .m-faContent("@{fa-var-thumbs-up}\20");} &.actionBar-action--report:before { .m-faContent("@{fa-var-exclamation-circle}\20");} &.actionBar-action--delete:before { .m-faContent("@{fa-var-trash}\20");} &.actionBar-action--edit:before { .m-faContent("@{fa-var-edit}\20");} &.actionBar-action--ip:before { .m-faContent("@{fa-var-globe}\20");} &.actionBar-action--history:before { .m-faContent("@{fa-var-history}\20");} &.actionBar-action--warn:before { .m-faContent("@{fa-var-warning}\20");} &.actionBar-action--spam:before { .m-faContent("@{fa-var-warning}\20");} } @media (max-width: @xf-responsiveMedium) { .actionBar .actionBar-action { &.actionBar-action--menuItem { display: none !important; } &.actionBar-action--menuTrigger { display: inline; } } }]]>

</template>


-<template title="core_avatar.less" version_string="2.1.1" version_id="2010170" addon_id="XF" type="public">

<![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-flex; justify-content: center; align-items: center; 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; // this works with the flex box approach line-height: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } &.avatar--default--text { color: xf-default(@xf-textColorMuted, black) !important; background: mix(xf-default(@xf-textColorMuted, black), xf-default(@xf-avatarBg, white), 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--square { border-radius: 0; } &.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-touchevents &, .avatar:hover & { bottom: 0; } a { text-shadow: 0 0 2px rgba(0, 0, 0, 0.6); color: #fff; &:hover { text-decoration: none; } } } .avatarWrapper { display: inline-block; position: relative; } .avatarWrapper-update { position: absolute; top: 50%; bottom: 0; left: 0; right: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .8em; color: #fff; text-decoration: none; opacity: 0; .m-transition(opacity); &:before { content: ''; position: absolute; top: -100%; bottom: 0; left: 0; right: 0; .m-borderBottomRadius(xf-default(@xf-avatarBorderRadius, 0)); .m-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), #000, 60%); opacity: .75; .m-transition(opacity); pointer-events: none; } span { // so it sits on top of the BG position: relative; } &:hover { color: #fff; text-decoration: none; &:before { opacity: 1; } } .avatarWrapper:hover &, .has-touchevents & { opacity: 1; } &.avatarWrapper-update--small, .avatar--s + & { font-size: @xf-fontSizeSmall; padding-bottom: .2em; } }]]>

</template>


-<template title="core_badge.less" version_string="2.0.10" version_id="2001070" addon_id="XF" type="public">

<![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" version_string="2.2.0 Beta 6" version_id="2020036" addon_id="XF" type="public">

<![CDATA[// ################################# BLOCKS ################## .blocks { margin-bottom: @xf-elementSpacer; &:last-child { margin-bottom: 0; } .block { margin-bottom: (@xf-elementSpacer / 2); &:last-child { margin-bottom: 0; } } &.blocks--close .block { margin-bottom: (@xf-elementSpacer / 4); } &.blocks--separated { + .blocks { padding-top: @xf-elementSpacer; border-top: @xf-borderSize solid @xf-borderColor; } } } .blocks-header { font-size: @xf-fontSizeLarger; font-weight: @xf-fontWeightNormal; color: @xf-textColorMuted; margin: 0; padding: 0; margin-bottom: 5px; &.blocks-header--strong { color: @xf-textColorDimmed; .blocks-desc { color: @xf-textColorMuted; } } } .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-bottom: 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--padded { padding-left: @xf-blockPaddingH; padding-right: @xf-blockPaddingH; } .block-outer-hint { font-size: @xf-fontSizeSmall; color: @xf-textColorMuted; } } .block-outer-main, .block-row-main { float: left; } .block-outer-opposite, .block-row-opposite { float: right; } .block-outer-middle, .block-row-middle { text-align: center; } .block-container { .xf-contentBase(); .xf-blockBorder() border-radius: @xf-blockBorderRadius; //.m-transition(border, margin;); // edgeSpacerRemoval .xf-uix_blockContainer(); &.block-container--none { background: none; border: none; color: @xf-textColor; padding: 0; box-shadow: none; } } @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, @{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > :last-child, @{block-noStripSel} > .tabPanes:last-child > [role=tabpanel] > .block-body > :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(); } &--spaced { margin-top: @xf-paddingSmall; } &--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; 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-default(@xf-blockTabHeader--color, ~""), xf-default(@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-default(@xf-blockMinorTabHeader--color, ~""), xf-default(@xf-blockMinorTabHeaderSelected--color, ~"") ); } } .block-filterBar { padding: (@xf-blockPaddingH / 2) (@xf-blockPaddingH / 2); .xf-blockFilterBar(); &.block-filterBar--standalone { padding: @xf-paddingMedium @xf-paddingMedium; border: @xf-borderSize solid @xf-borderColor; border-radius: @block-borderRadius-inner; @media (max-width: @xf-responsiveEdgeSpacerRemoval) { border-radius: 0; border-left: none; border-right: none; } } .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, .block-body--collapsible &:first-child, .block-header + & { 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; } &--small { font-size: @xf-fontSizeNormal; } } .block-desc, .blocks-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-body--containedFixed { overflow-x: auto; max-height: 300px; } } .block-row { margin: 0; padding: @xf-blockPaddingV @xf-blockPaddingH; .m-clearFix(); &.block-row--toEdge { padding-left: 0; padding-right: 0; } &.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; } .block-footer-select:not(:last-child) { margin: 0 1em; } .block-footer-opposite, .block-footer-controls { margin-left: auto; } } } @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" version_string="2.0.7" version_id="2000770" addon_id="XF" type="public">

<![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_blockmessage.less" version_string="2.2.0 Beta 4" version_id="2020034" addon_id="XF" type="public">

<![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(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-paddingMedium; } &.blockMessage--center { text-align: center; } .m-blockMessageVariants(); } .blockMessage--iconic, .block-rowMessage--iconic { text-align: left; position: relative; // padding-left: 4em; min-height: 4em; display: flex; align-items: center; &:before { .m-faBase(); top: 0; // left: @xf-blockPaddingV; 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); } &&--important { .xf-contentAccentBase(); border-left: @xf-borderSizeFeature solid @xf-borderColorAttention; padding: @xf-paddingMedium; a { .xf-contentAccentLink(); } } &--important&--iconic:before { .m-faContent(@fa-var-exclamation-circle); color: @xf-textColorAttention; color: @xf-important-featureColor; } &&--alt { .xf-contentAltBase(); } &&--success { border-left: @xf-borderSizeFeature solid @xf-successFeatureColor; background: @xf-successBg; color: @xf-successColor; .m-textColoredLinks(); } &--success&--iconic:before { .m-faContent(@fa-var-check-circle); color: @xf-success-featureColor; } &&--warning { border-left: @xf-borderSizeFeature solid @xf-warningFeatureColor; background: @xf-warningBg; color: @xf-warningColor; .m-textColoredLinks(); } &--warning&--iconic:before { .m-faContent(@fa-var-exclamation-triangle); color: @xf-warning-featureColor; } &&--error { border-left: @xf-borderSizeFeature solid @xf-errorFeatureColor; background: @xf-errorBg; color: @xf-errorColor; .m-textColoredLinks(); } &--error&--iconic:before { .m-faContent(@fa-var-times-circle); color: @xf-error-featureColor; } }]]>

</template>


-<template title="core_button.less" version_string="2.2.0 Release Candidate 1" version_id="2020051" addon_id="XF" type="public">

<![CDATA[// ############################ BUTTONS ################# .button, button.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--plain { background: none; color: @xf-linkColor; border: none; &:hover, &:active, &:focus { text-decoration: none; background: none; } } &.button--alt { // block colors background-color: @xf-contentHighlightBg; color: @xf-linkColor; .m-buttonBorderColorVariation(@xf-paletteColor2); &:hover, &:active, &:focus { background-color: @xf-paletteColor1; color: @xf-linkColor; } } &.button--longText { .m-overflowEllipsis(); max-width: 100%; display: inline-block; } &.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--normal { font-size: @xf-fontSizeNormal; } &.button--small { font-size: @xf-fontSizeSmall; padding: 3px 6px; .xf-uix_buttonSmall(); } &.button--smaller { font-size: @xf-fontSizeSmaller; padding: 2px 5px; } &.button--fullWidth { display: block; width: 100%; box-sizing: border-box; } &.button--adminStyleAsset { &.is-disabled { visibility: hidden; } &.is-modify { .m-buttonIcon(@fa-var-pencil); } &.is-revert { .m-buttonIcon(@fa-var-history); } } &.button--wrap { white-space: normal; } &.button--icon { > .button-text:before, .button-icon { .m-faBase(); } > .button-text:before, > .fa--xf:before, .button-icon { // font-size: 120%; font-size: @xf-uix_iconSize; vertical-align: -.1em; display: inline-block; // margin: -.255em 6px -.255em 0; margin-right: .2em; // content: ''; } > .fa--xf { // helps fix a button alignment issue (Chrome only) line-height: inherit; } /* > .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-icon { height: 1em; vertical-align: 0; } &.button--iconOnly { > .button-text:before, > i.fa--xf:before, .button-icon { margin-left: 0; margin-right: 0; } } &.button--padded { > .button-text:before, > i.fa--xf:before, .button-icon { margin-top: 0; margin-bottom: 0; } } &--add { .m-buttonIcon(@fa-var-plus-square, 0.88em); // fa-plus-square } &--import { .m-buttonIcon(@fa-var-upload, 0.1.13em); // fa-upload } &--export, &--download { .m-buttonIcon(@fa-var-download, 1.13em); // fa-download } &--redirect { .m-buttonIcon(@fa-var-external-link, 1em); } &--edit { .m-buttonIcon(@fa-var-pencil, 1.13em); // fa-pencil } &--save { .m-buttonIcon(@fa-var-save, 0.88em); // fa-floppy-o } &--delete { .m-buttonIcon(@fa-var-trash-o, 0.79em); } &--reply { .m-buttonIcon(@fa-var-mail-reply, 1.13); // fa-reply } &--quote { .m-buttonIcon(@fa-var-quote-left, 1.13em); } &--purchase { .m-buttonIcon(@fa-var-shopping-basket, 1.13em); } &--payment { .m-buttonIcon(@fa-var-credit-card, 1.13em); } &--convert { .m-buttonIcon(@fa-var-flash, .75em); } &--search { .m-buttonIcon(@fa-var-search, 1em); } &--sort { .m-buttonIcon(@fa-var-sort, 0.63em); } &--upload { .m-buttonIcon(@fa-var-upload, 1.13em); } &--attach { .m-buttonIcon(@fa-var-paperclip, 1em); } &--login { .m-buttonIcon(@fa-var-lock, 0.88em); } &--rate { .m-buttonIcon(@fa-var-star, 1.13em); } &--config { .m-buttonIcon(@fa-var-cog, 1em); } &--refresh { .m-buttonIcon(@fa-var-refresh, 1em); } &--translate { .m-buttonIcon(@fa-var-globe, .97em); } &--vote { .m-buttonIcon(@fa-var-check-circle-o, 1em); } &--result { .m-buttonIcon(@fa-var-bar-chart-o, 1.15em); } &--history { .m-buttonIcon(@fa-var-history, 1em); } &--cancel { .m-buttonIcon(@fa-var-ban, 1em); } &--close { .m-buttonIcon(@fa-var-times, .69em); } &--preview { .m-buttonIcon(@fa-var-eye, 1.13em); } &--conversation { .m-buttonIcon(@fa-var-comments-o, 1.13em); } &--write { .m-buttonIcon(@fa-var-edit, 1.13em); } &--download { .m-buttonIcon(@fa-var-download, .93em); } &--bolt { .m-buttonIcon(@fa-var-bolt, .75em); } &--list { .m-buttonIcon(@fa-var-list, 1em); } &--prev { .m-buttonIcon(@fa-var-chevron-left, .63em); } &--next { .m-buttonIcon(@fa-var-chevron-right, .63em); } &--confirm { .m-buttonIcon(@fa-var-check, 1em); } &--disable { .m-buttonIcon(@fa-var-power-off, 1em); } &--markRead { .m-buttonIcon(@fa-var-check-square-o, .88em); } &--user { .m-buttonIcon(@fa-var-user, .88em); } &--userCircle { .m-buttonIcon(@fa-var-user-circle, .97em); } &--notificationsOn { .m-buttonIcon(@fa-var-bell-o, 1.25em); // actually only .88em, but as we use this as a toggle, make it the same width as bell-slash } &--notificationsOff { .m-buttonIcon(@fa-var-bell-slash-o, 1.25em); } &--show { .m-buttonIcon(@fa-var-eye, 1.25em); // actually only 1.13em, but it's a toggle } &--hide { .m-buttonIcon(@fa-var-eye-slash, 1.25em); } &--merge { .m-buttonIcon(@fa-var-compress, .88em); } &--move { .m-buttonIcon(@fa-var-share, 1.13em); } &--copy { .m-buttonIcon(@fa-var-clone, .88em); } &--approve, &--unapprove { .m-buttonIcon(@fa-var-shield, 1em); } &--delete, &--undelete { .m-buttonIcon(@fa-var-trash-o, .88em); } &--stick, &--unstick { .m-buttonIcon(@fa-var-thumb-tack, .75em); } &--lock { .m-buttonIcon(@fa-var-lock, .88em); } &--unlock { .m-buttonIcon(@fa-var-unlock, .88em); } &--bookmark { .m-buttonIcon(@fa-var-bookmark); &.is-bookmarked .button-text:before { font-weight: @faWeight-solid; color: @xf-textColorAttention; } } } &.button--provider { > .button-text:before, .button-icon { .m-faBase('Brands'); font-size: 120%; vertical-align: middle; display: inline-block; margin: -4px 6px -4px 0; } .button-icon { height: 1em; vertical-align: 0; } &--facebook { .m-buttonColorVariation(#3B5998, white); .m-buttonIcon(@fa-var-facebook, 1em); .button-text {display: inline;} } &--twitter { .m-buttonColorVariation(#1DA1F3, white); .m-buttonIcon(@fa-var-twitter, 1em); } &--google { .m-buttonColorVariation(white, #444); border-color: #e9e9e9; > .button-text:before { display: none; } } &--github { .m-buttonColorVariation(#666666, white); .m-buttonIcon(@fa-var-github, .97em); } &--linkedin { .m-buttonColorVariation(#0077b5, white); .m-buttonIcon(@fa-var-linkedin, .88em); } &--microsoft { .m-buttonColorVariation(#00bcf2, white); .m-buttonIcon(@fa-var-windows, .88em); } &--yahoo { .m-buttonColorVariation(#410093, white); .m-buttonIcon(@fa-var-yahoo, .88em); } } // 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; display: inline-block; 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-menuGadget(); // .58em 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" version_string="2.2.0 Beta 6" version_id="2020036" addon_id="XF" type="public">

<![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; align-items: center; } .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 / 2) @_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); } &.is-active:after { .m-faContent(@fa-var-chevron-up, @_categoryListTogglerWidth); } } .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); } }]]>

</template>


-<template title="core_contentrow.less" version_string="2.2.0 Release Candidate 2" version_id="2020052" addon_id="XF" type="public">

<![CDATA[// ########################################### CONTENT ROWS ############################ @_contentRow-faderHeight: 150px; @_contentRow-faderCoverHeight: (@_contentRow-faderHeight) / 2; .contentRow { display: flex; &.contentRow--alignMiddle { align-items: center; } &.is-deleted { opacity: .7; .contentRow-header, .contentRow-title { text-decoration: line-through; } } } .m-figureFixed(@size) { width: @size; img, i.fa, i.fal, i.far, i.fas, i.fab, i.fad, .avatar { max-height: @size; } } .contentRow-figure { vertical-align: top; white-space: nowrap; word-wrap: normal; text-align: center; img, i.fa, i.fal, i.far, i.fas, i.fab, i.fad, .avatar { vertical-align: bottom; } &.contentRow-figure--fixedBookmarkIcon { .m-figureFixed(48px); } &.contentRow-figure--fixedSmall { .m-figureFixed(60px); } &.contentRow-figure--fixedMedium { .m-figureFixed(100px); &.contentRow-figure--fixedMedium--fluidWidth { width: auto; max-width: 200px; } } &.contentRow-figure--fixedLarge { .m-figureFixed(200px); } &.contentRow-figure--text { font-size: @xf-fontSizeLargest; } } .contentRow-figureContainer { position: relative; .contentRow-figureSeparated { position: absolute; right: -5px; bottom: -5px; .m-avatarSize(@avatar-s / 2 + 2px); } } .contentRow-figureIcon { text-align: center; color: @xf-textColorFeature; img, i.fa, i.fal, i.far, i.fas, i.fab, i.fad { width: 64px; overflow: hidden; white-space: nowrap; word-wrap: normal; border-radius: @xf-borderRadiusMedium; .contentRow-figure--fixedBookmarkIcon & { width: 48px; } } } .contentRow-main { flex: 1; min-width: 0; vertical-align: top; padding-left: @xf-paddingLarge; &: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; 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; } .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 { &.contentRow-figure--fixedBookmarkIcon { width: @avatar-xs; } .avatar--s { .m-avatarSize(@avatar-xs); } } .contentRow--hideFigureNarrow { .contentRow-figure { display: none; } .contentRow-main { padding-left: 0; } } }]]>

</template>


-<template title="core_datalist.less" version_string="2.2.0 Release Candidate 2" version_id="2020052" addon_id="XF" type="public">

<![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: 300px; max-height: 85vh; } &.dataList--containedFixed { overflow-x: auto; max-height: 300px; } @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):not(.is-spHovered), .is-spActive &.is-spChecked { background: fade(@xf-contentHighlightBg, 50%); } .is-spActive &.is-spHovered { background: fade(@xf-contentHighlightBg, 75%); } .is-spActive &:not(.dataList-row--noHover):not(.dataList-row--header):not(.is-spChecked) * { color: @xf-textColorMuted; } &.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; } } &.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(); } } &.dataList-row--opposite, &.dataList-row--header.dataList-row--opposite { .dataList-cell { text-align: right; &:first-of-type { text-align: left; } } } &.dataList-row--opposite, &.dataList-row--header.dataList-row--opposite { .dataList-cell { text-align: right; &:first-of-type { text-align: left; } } } &.dataList-row--opposite, &.dataList-row--header.dataList-row--opposite { .dataList-cell { text-align: right; &:first-of-type { text-align: left; } } } 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--minWidth { min-width: 17vw; min-width: ~"min(17vw, 250px)"; } &.dataList-cell--link, &.dataList-cell--action { padding: 0; } &.dataList-cell--alt, &.dataList-cell--action { background: @xf-contentAltBg; } &.dataList-cell--highlighted { background: @xf-contentHighlightBg; } &.dataList-cell--separated { border-left: @xf-borderSize solid @xf-borderColorFaint; } &.dataList-cell--min, &.dataList-cell--action, &.dataList-cell--iconic, &.dataList-cell-fa { width: 1%; white-space: nowrap; word-wrap: normal; text-align: center; } &.dataList-cell--number { text-align: right; } &.dataList-cell--number { text-align: right; } &.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; } input { cursor: pointer; } } &.dataList-cell--action a:not(.iconic) { // padding: @xf-dataListPaddingV @xf-dataListPaddingH * 2; } &.dataList-cell--iconic, &.dataList-cell--fa { padding: 0; font-size: 125%; min-width: 2.5em; position: relative; text-align: center; } &.dataList-cell--iconic { > a.iconic > i { .iconicIcon(false); } > .iconic { position: absolute; // fill the cell top: 0; left: 0; right: 0; bottom: 0; > i { &:before, &:after { left: 50%; margin-left: -.5em; // half of icon width top: 50%; margin-top: -.5em; // half of icon height } } > input[type=checkbox] + i { &:before, &:after { margin-top: -.7em; margin-left: -.4375em; // half of .fa-check-square width } } > input[type=radio] + i { &:before, &:after { margin-top: -.7em; margin-left: -.5em; // half of .fa-check-square width } } &.iconic--toggle > input[type=checkbox] + i { &:before { .m-faContent(@fa-var-toggle-off, 1.125em); } &:after { .m-faContent(@fa-var-toggle-on, 1.125em); } &:before, &:after { font-size: 120%; margin-top: -.7em; margin-left: -.5625em; // half of .fa-toggle-on width } } &.iconic--delete > i { &:before { .m-faContent(@fa-var-trash-alt, .875em); } &:before, &:after { margin-top: -.7em; margin-left: -.4375em; // half of .fa-trash-alt width } } } } &.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-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; > * { min-width: 0; text-align: right; } &:before { display: table-cell; content: attr(data-cell-label) "{$xf.language.label_separator}"; padding-right: @xf-dataListPaddingH; margin-right: auto; word-break: normal; white-space: normal; text-align: left; } > .input:first-child:last-child { display: inline; } a { // commonly a URL, but needed to prevent a potential overflow min-width: 0; } } &.dataList-cell--iconic { &:not([data-cell-label]):before { content: ""; display: inline-block; height: 1em; } padding: @xf-dataListPaddingV @xf-dataListPaddingH; } &.dataList-cell--link, &.dataList-cell--action { &[data-cell-label]:before { padding: @xf-dataListPaddingV @xf-dataListPaddingH; } } &.dataList-cell--iconic, &.dataList-cell--fa { display: table-cell; width: 1%; } &.dataList-cell--iconic[data-cell-label] { display: flex; width: auto; font-size: 100%; .iconic { position: relative; } } } .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_filter.less" version_string="2.2.0 Beta 4" version_id="2020034" addon_id="XF" type="public">

<![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-times); } } } .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-times}"); 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-menuGadget(); } } @media (max-width: @xf-responsiveMedium) { .filterBar-filterToggle-label { display: none; } }]]>

</template>


-<template title="core_formrow.less" version_string="2.2.0 Release Candidate 2" version_id="2020052" addon_id="XF" type="public">

<![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--noValuePadding > dd { padding: 0; } &.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--noTopPadding { > dt, > dd { padding-top: 0; } } &.formRow--noBottomPadding { > dt, > dd { padding-bottom: 0; } } &.formRow--noPadding + &, &.formRow--noPadding + * > &:first-of-type { > dt { padding-top: @xf-formRowPaddingV; } } } &.formRow--limited { display: none; } &.formRow--inputMultiLine > dd { > .input, > .inputGroup { margin-bottom: @_form-elementSpacer; &:last-child { margin-bottom: 0; } } } .formRow-label { .m-appendColon(); } &.formRow--noColon .formRow-label:after { content: ""; } .formRow-explain { margin: @_form-elementSpacer 0 0; .m-formElementExplain(); &:first-child { margin: 0; font-size: inherit; } } &.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; &.formButtonGroup--close { margin-top: 0; } } .formButtonGroup-primary { order: 2; margin-left: auto; margin-bottom: 5px; .formButtonGroup--simple & { order: 1; margin-left: 0; } } .formButtonGroup-extra { order: 1; margin-bottom: 5px; .formButtonGroup--simple & { order: 2; margin-left: @xf-paddingSmall; } } .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%); @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { box-shadow: none; .m-backdropFilter(blur(10px)); } } } &.formSubmitRow--simple, &.formSubmitRow--standalone { > dt { visibility: hidden; } .formSubmitRow-controls { text-align: center; padding-left: 0; margin-left: 0; } } &.formSubmitRow--standalone { .formSubmitRow-bar { border: @xf-borderSize solid @xf-borderColor; border-radius: @block-borderRadius-inner; @media (max-width: @xf-responsiveEdgeSpacerRemoval) { border-radius: 0; border-left: none; border-right: none; } } &.is-sticky { .formSubmitRow-bar { border-bottom: 0; } } } .block-body--collapsible:not(.is-active) + &:not(.formSubmitRow--simple, .formSubmitRow--standalone) { > 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--noGutter { margin-left: 0; margin-right: 0; } + .formRowSep, &:last-child { display: none; } .block-body > &:first-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_input.less" version_string="2.2.2" version_id="2020270" addon_id="XF" type="public">

<![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)); } :root { --input-border-heavy: @xf-borderColorHeavy; --input-border-light: @xf-borderColorLight; } .input:focus, .input.is-focused, .inputGroup:focus-within, #XF .fr-box.fr-basic.is-focused, .codeEditor.CodeMirror.CodeMirror-focused { --input-border-heavy: xf-intensify(@xf-borderColorHighlight, 5%); --input-border-light: xf-diminish(@xf-borderColorHighlight, 3%); } .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], &.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; } &.input--passwordHideShow { ::-ms-reveal, ::-ms-clear { display: none !important; } } .m-inputZoomFix(); .fa--inputOverlay + & { padding-left: 2em; } } // Overlay a FontAwesome icon over the start of a text box as a hint to its usem // Use the 'fa' attribute in XF template syntax for xf:textbox, xf:numberbox and xf:textarea .fa--xf.fa--inputOverlay { position: absolute; padding: (xf-default(@xf-input--padding, 0) + 2) xf-default(@xf-input--padding, 0) xf-default(@xf-input--padding, 0); line-height: @xf-lineHeightDefault; color: @xf-input--border-top-color; & + .input { padding-left: xf-default(@xf-input--padding, 0) * 2 + xf-default(@xf-input--font-size, @xf-fontSizeNormal); } } // ############################# NEW ICONIC CONTROLS ###################### @controlColor: xf-default(@xf-buttonPrimary--background-color, @xf-paletteColor4); @controlColor: @xf-textColorMuted; @controlColor--hover: xf-intensify(@controlColor, 25%); .iconicIcon(@setPosition: true) { display: inline-block; min-width: 1em; height: .9em;// prevents some zoom-related issues -ltr-rtl-text-align: left; &:before, &:after { height: .9em;// prevents some zoom-related issues .m-faBase('Pro'; inherit); //.m-transition(opacity, color; @xf-animationSpeed, @xf-animationSpeed / 2); position: absolute; & when (@setPosition = true) { left: 0; top: 0; } opacity: 1; } } .iconic { display: inline-block; position: relative; > input { .m-visuallyHidden(); position: absolute; left: 0; width: auto; height: auto; + i { .iconicIcon(); } & + i:after { opacity: 0; } &:disabled + i:before, &[readonly] + i:before { opacity: .3; } &:disabled:checked + i:after, &[readonly]:checked + i:after { opacity: .3; + i:before { .m-faContent(@fa-var-square, .93em); } &:checked + i:before { .m-faContent(@fa-var-check-square-o, .93em); } } &:checked { & + i:before { opacity: 0; } + i:before { .m-faContent(@fa-var-circle-o, .86em); } &:checked + i:before { .m-faContent(@fa-var-check-circle, .86em); } & + i:after { opacity: 1; } } &:focus + i { &:before, &:after { outline: Highlight solid 2px; -moz-outline-radius: 5px; @media (-webkit-min-device-pixel-ratio: 0) { outline: -webkit-focus-ring-color auto 5px; } } } } // handler for labelled inputs - indent the text away from the control .iconic-label:before { content: ''; display: inline-block; width: @_input-checkBoxSpacer - 1em; // min-width of input > i } &.iconic--hideShow { min-width: 56px; cursor: pointer; > input[type=checkbox] + i { &:before { .m-faContent(@fa-var-eye); } &:after { .m-faContent(@fa-var-eye-slash); } } .iconic-label { font-size: @xf-fontSizeSmall; vertical-align: text-top; } } &.iconic--hiddenLabel .iconic-label:before { display: none; } > input[type=checkbox] + i { &:before { .m-faContent(@fa-var-square, .88em); } &:after { .m-faContent(@fa-var-check-square, .88em); } } > input[type=radio] + i { &:before { .m-faContent(@fa-var-circle, 1em); } &:after { .m-faContent(@fa-var-check-circle, 1em); } } } // Fix position for inputChoices to allow nested indenting .inputChoices > .inputChoices-choice { position: relative; .iconic { position: static; > input + i { position: absolute; left: 0; } &.iconic--noLabel { display: inline; } } // undo the normal indenting of text from checkbox .iconic-label:before { display: none; } } // Basic control colours for common scenarios .formRow, .inputGroup, .inputChoices, .block-footer, .dataList-cell, .message-cell--extra { .iconic, &.dataList-cell--fa > a { > i, svg { color: @controlColor; fill: currentColor; } &:hover > i, &:hover svg { color: @controlColor--hover; fill: currentColor; } } } // ############################# END ICONIC CONTROLS ###################### .u-inputSpacer { margin-top: @_input-elementSpacer; } .inputGroup { display: flex; align-items: stretch; max-width: 100%; .inputGroup-text { flex-grow: 0; display: flex; align-items: center; 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: @_form-elementSpacer; flex-shrink: 0; } .input { flex-shrink: 1; min-width: 0; // firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1021913 } .button { flex-shrink: 0; } &:not(.inputGroup--joined) { .input, .button { + .input, + .button { margin-left: @_form-elementSpacer; } } } .inputGroup-label { flex-shrink: 1; width: 100%; padding: 0 0 @xf-paddingMedium; .m-appendColon(); } @media (max-width: @xf-formResponsive) { .input:not(.input--autoSize):not(.input--numberNarrow) { width: 100%; } } .input:not(.input--autoSize):not(.input--numberNarrow) { .menu & {width: 100%;} } &.inputGroup--inline { display: inline-flex; } &.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-input(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 var(--input-border-light); } .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) { min-width: auto; max-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, .88em); } &--down::before { .m-faContent(@fa-var-minus, .88em); } .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%; display: inline-flex; cursor: pointer; 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, .88em); }; } } .inputUploadButton { 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; .inputGroup.inputGroup--joined & { &:hover, &:active, &:focus { background-color: saturate(xf-intensify(@xf-paletteColor1, 4%), 12%); color: @controlColor--hover; } } &:before { .m-faContent(@fa-var-upload, 1.25em); } input[type="file"] { visibility: hidden; position: absolute; width: 1px; height: 1px; overflow: hidden; left: -1000px; z-index: -1; opacity: 0; } } .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; &: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; &.inputChoices-heading--checkAll { .iconic { position: static; & > 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; } } } } .inputValidationError { margin-top: @xf-paddingMedium; padding: @xf-blockPaddingV @xf-blockPaddingH; .xf-blockBorder(); border-radius: @xf-blockBorderRadius; border-left: @xf-borderSizeFeature solid @xf-errorFeatureColor; background: @xf-errorBg; color: @xf-errorColor; .m-textColoredLinks(); .m-hiddenEl(true); &:empty { display: none; } > ul, > ol { margin-top: 0; margin-bottom: 0; } } @media (max-width: @xf-responsiveNarrow) { .input.input--title { font-size: @xf-fontSizeLarge; } }]]>

</template>


-<template title="core_labels.less" version_string="2.0.10" version_id="2001070" addon_id="XF" type="public">

<![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" version_string="2.2.0 Beta 5" version_id="2020035" addon_id="XF" type="public">

<![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: ""; } } } &.pairs--rightLabel { > dt { text-align: right; } } > 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; } } } .pairWrapper { &.pairWrapper--spaced { .pairs { margin-top: @xf-paddingMedium; &:first-child { margin-top: 0; } } } } .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, &.listInline--customField { display: inline; } > li { display: inline; margin: 0; padding: 0; } &.listInline--block { > li { display: inline-block; } } &.listInline--comma, &.listInline--customField { > 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; } &.listColumns--3 { .m-columns(3); @media (max-width: @xf-responsiveWide) { .m-columns(2, @xf-responsiveNarrow); } } &.listColumns--4 { .m-columns(4); @media (max-width: @xf-responsiveWide) { .m-columns(2, @xf-responsiveNarrow); } } } .textHighlight { font-style: normal; font-weight: @xf-fontWeightHeavy; &.textHighlight--attention { color: @xf-textColorAttention; } }]]>

</template>


-<template title="core_menu.less" version_string="2.2.0 Release Candidate 1" version_id="2020051" addon_id="XF" type="public">

<![CDATA[// ###################################### MENUS ###################### @_menu-arrowSize: 8px; @_menu-edgePadding: @xf-pageEdgeSpacer; @_menu-closePaddingH: @xf-paddingLarge; @_menu-paddingH: 8px; @_menu-paddingV: 8px; .menuTrigger { cursor: pointer; &:after { .m-menuGadget(); } } .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--superWide { width: 75%; max-width: calc(~'100% - @{xf-pageEdgeSpacer}'); } &.menu--veryWide { width: 500px; max-width: calc(~'100% - @{xf-pageEdgeSpacer}'); } &.menu--wide { width: 350px; max-width: calc(~'100% - @{xf-pageEdgeSpacer}'); } &.menu--medium { width: 300px; max-width: calc(~'100% - @{xf-pageEdgeSpacer}'); } &.menu--potentialFixed { z-index: @zIndex-4; } .menu-minorHeader--small { padding: @_menu-paddingV @_menu-paddingH; font-size: calc(@xf-menu--font-size + 1); } // fix overflow when menu padding is less than padding medium for alert trigger .alertToggler { margin-right: -@_menu-paddingH; } } .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-header--small { font-size: @xf-fontSizeNormal; } .menu-desc { color: fade(@xf-menuHeader--color, 70); .m-textColoredLinks(); } } .menu-desc { display: block; font-size: @xf-fontSizeSmaller; font-weight: @xf-fontWeightNormal; } .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-default(@xf-menuTabHeader--color, ~""), xf-default(@xf-blockMinorTabHeaderSelected--color, ~"") ); } } .menu-scroller { overflow: auto; max-height: 300px; max-height: 60vh; -webkit-overflow-scrolling: touch; .menu-row + & { border-top: @xf-borderSize solid @xf-borderColorLight; } } .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--close { padding-left: @_menu-closePaddingH; padding-right: @_menu-closePaddingH; } &.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 & ~ .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(); &.menu-footer--close { padding-left: @_menu-closePaddingH; padding-right: @_menu-closePaddingH; } &: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; } .menu-footer-select:not(:last-child) { margin: 0 1em; } .menu-footer-opposite, .menu-footer-controls { margin-left: auto; } } }]]>

</template>


-<template title="core_offcanvas.less" version_string="2.2.0 Beta 4" version_id="2020034" addon_id="XF" type="public">

<![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); pointer-events: none; > * {pointer-events: auto;} 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-times, .79em); } } .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%; 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" version_string="2.2.1" version_id="2020170" addon_id="XF" type="public">

<![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" version_string="2.2.0 Beta 4" version_id="2020034" addon_id="XF" type="public">

<![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>


-<template title="core_reaction.less" version_string="2.2.0 Release Candidate 2" version_id="2020052" addon_id="XF" type="public">

<![CDATA[.reaction { display: flex; -webkit-touch-callout: none; &.reaction--imageHidden { img { display: none; } &.reaction--1 { i { .m-faBefore(@fa-var-thumbs-up, 1em); .m-faBase(); } } } &.reaction--small, &.reaction--medium { display: inline-block; .reaction-text { margin-left: 0; } } &.reaction--right { justify-content: flex-end; } &.reaction--inline { display: inline-flex;; } a&:hover, a&:focus { text-decoration: none; .reaction-text { text-decoration: underline; } } } .reactionScore { display: inline-block; padding: 2px 3px; min-width: 16px; text-align: center; vertical-align: text-bottom; border-radius: @xf-borderRadiusMedium; font-size: @xf-fontSizeSmallest; .xf-chip(); &:hover { .xf-chipHover(); } } .reaction-image { vertical-align: text-bottom; .reaction--small & { max-width: 16px; max-height: 16px; } .reaction--medium & { max-width: 21px; max-height: 21px; } } .reaction-sprite { vertical-align: text-bottom; <xf:if is="$reactionSprites"> <xf:foreach loop="$reactionSprites" key="$reactionId" value="$reactionSprite"> <xf:if is="$reactionSprite.sprite_css"> .reaction--{$reactionId} & { {$reactionSprite.sprite_css|raw} } </xf:if> <xf:if is="$reactionSprite.small_sprite_css"> .reaction--small.reaction--{$reactionId} & { {$reactionSprite.small_sprite_css|raw} } </xf:if> <xf:if is="$reactionSprite.medium_sprite_css"> .reaction--medium.reaction--{$reactionId} & { {$reactionSprite.medium_sprite_css|raw} } </xf:if> </xf:foreach> </xf:if> } .reaction-text { margin-left: 10px; align-self: center; // note: when we add a reaction we make the text bold // the below approach sets the space for that to ensure // the text doesn't jump when the bold happens. &::after { content: " "; font-weight: @xf-fontWeightHeavy; height: 1px; color: transparent; overflow: hidden; visibility: hidden; } .has-reaction & { font-weight: @xf-fontWeightHeavy; } .reaction--small & { margin-left: 0; } <xf:if is="$reactionColors"> <xf:foreach loop="$reactionColors" key="$reactionId" value="$reactionColor"> <xf:if is="$reactionColor"> .reaction--{$reactionId} & { color: {$reactionColor}; } </xf:if> </xf:foreach> </xf:if> } <xf:if is="$reactionColors"> <xf:foreach loop="$reactionColors" key="$reactionId" value="$reactionColor"> <xf:if is="$reactionColor"> .is-active.tabs-tab--reaction{$reactionId} { border-color: {$reactionColor} !important; } </xf:if> </xf:foreach> </xf:if>]]>

</template>


-<template title="core_setup.less" version_string="2.2.0" version_id="2020070" addon_id="XF" type="public">

<![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; } em { &:lang(zh), &:lang(ja), &:lang(ko) { font-style: normal; } } // ################################################# // Focus handlers, set by XF.NavDeviceWatcher (core.js) .has-pointer-nav { :focus { outline: 0 } ::-moz-focus-inner { border: 0; } .iconic > input:focus + i { &:before, &:after { outline: 0; } } } .m-keyframes(spin, { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }); ]]>

</template>


-<template title="core_tab.less" version_string="2.2.0 Beta 1" version_id="2020031" addon_id="XF" type="public">

<![CDATA[// ################################## TABS #################################### .tabs { display: flex; &.tabs--wrappable { flex-wrap: wrap; } &.tabs--right { float: right; position: relative; margin-left: auto; align-self: center; white-space: nowrap; } } .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 { position: relative; margin-left: auto; padding: 0 @xf-blockPaddingH 0 @xf-paddingMedium; align-self: center; white-space: nowrap; &.tabs-extra--minor { font-size: @xf-fontSizeSmall; } a { color: inherit; text-decoration: none; display: block; padding: @xf-paddingMedium; margin-right: -@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--standalone--closer { margin-bottom: @xf-paddingMedium; } &.tabs--standalone--small { .m-tabsTogether(@xf-fontSizeSmall); } &.tabs--standalone--inline { display: inline-block; margin-bottom: 0; } .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-default(@xf-standaloneTab--color, ~""), xf-default(@xf-standaloneTabSelected--color, ~"") ); } } @media (max-width: @xf-responsiveEdgeSpacerRemoval) { .tabs--standalone { // margin-left: -@xf-pageEdgeSpacer; // margin-right: -@xf-pageEdgeSpacer; border-radius: 0; .tabs--standalone:not(.tabs--right) { border-left: none; border-right: none; } .tabs--right& { margin: 0; } } }]]>

</template>


-<template title="core_tooltip.less" version_string="2.1.10 Patch 2" version_id="2011072" addon_id="XF" type="public">

<![CDATA[// ######################################### TOOLTIPS ####################################### @_tooltip-arrowSize: 5px; @_tooltip-arrowSizeLarge: 10px; @_tooltip-zIndex: @zIndex-3; .tooltip { position: absolute; z-index: @_tooltip-zIndex; line-height: @xf-lineHeightDefault; padding: 0 5px; 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--noninteractive { pointer-events: none; } &.tooltip--noninteractive { pointer-events: none; } &.tooltip--description { max-width: 350px; } &.tooltip--selectToQuote { .m-hiddenLinks(); } &.tooltip--preview { max-width: 100%; width: 400px; } &.tooltip--member { max-width: 100%; width: 450px; padding: 0 10px; } &.tooltip--reaction { max-width: 100%; padding: 0 15px; margin: 5px 0; } &.tooltip--bookmark, &.tooltip--share { max-width: 100%; width: 340px; padding: 0 15px; } &.tooltip--bookmark, &.tooltip--member, &.tooltip--preview, &.tooltip--share { // Tooltip positioning is literal. &.tooltip--top { padding-bottom: @_tooltip-arrowSizeLarge; } &.tooltip--right { -ltr-rtl-padding-left: @_tooltip-arrowSizeLarge; } &.tooltip--bottom { padding-top: @_tooltip-arrowSizeLarge; } &.tooltip--left { -ltr-rtl-padding-right: @_tooltip-arrowSizeLarge; } } } .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--bookmark &, .tooltip--member &, .tooltip--share & { .xf-contentBase(); padding: 0; text-align: left; border: 1px solid @xf-borderColor; .m-dropShadow(0, 5px, 10px, 0, .35); } .tooltip--reaction & { .xf-contentBase(); padding: 0; text-align: center; border: 1px solid @xf-borderColor; border-radius: @xf-borderRadiusLarge; } } .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' ); @classes: tooltip--preview tooltip--member tooltip--share tooltip--bookmark; .m-tooltipArrowList(@xf-borderColor, @_tooltip-arrowSizeLarge + 1px, @classes, @xf-contentBg); .tooltip--member.tooltip--bottom &:after { .m-triangleUp(xf-default(@xf-memberTooltipHeader--background-color, transparent), @_tooltip-arrowSizeLarge); } } .m-tooltipArrowList(@color, @size, @classes, @fillColor: false) { .variations(@classes, @i: 1) when (@i <= length(@classes)) { @variation: extract(@classes, @i); .m-tooltipArrow(@color, @size, ~'.@{variation}', @fillColor); .variations(@classes, @i + 1); } .variations(@classes); } /* 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="custom_fields_macros" version_string="2.2.1" version_id="2020170" addon_id="XF" type="public">

<![CDATA[<xf:macro name="custom_fields_view" arg-type="!" arg-group="!" arg-set="!" arg-onlyInclude="{{ null }}" arg-additionalFilters="{{ [] }}" arg-wrapperClass="" arg-valueClass="pairs pairs--columns pairs--fixedSmall pairs--customField"> <xf:if contentcheck="true"> <div class="{$wrapperClass}"> <xf:contentcheck> <xf:macro name="custom_fields_values" arg-type="{$type}" arg-group="{$group}" arg-set="{$set}" arg-onlyInclude="{$onlyInclude}" arg-additionalFilters="{$additionalFilters}" arg-valueClass="{$valueClass}" /> </xf:contentcheck> </div> </xf:if> </xf:macro> <xf:macro name="custom_fields_values" arg-type="!" arg-group="!" arg-set="!" arg-onlyInclude="{{ null }}" arg-additionalFilters="{{ [] }}" arg-valueClass="pairs pairs--columns pairs--fixedSmall pairs--customField"> <xf:foreach loop="$xf.app.getCustomFields({$type}, {$group}, {$onlyInclude}, {$additionalFilters})" key="$fieldId" value="$fieldDefinition"> <xf:if is="$fieldDefinition.hasValue({$set.{$fieldDefinition.field_id}})"> <xf:set var="$fieldValue"><xf:macro name="custom_field_value" arg-definition="{$fieldDefinition}" arg-value="{$set.{$fieldDefinition.field_id}}" /></xf:set> <xf:if is="$fieldDefinition.wrapper_template"> {$fieldDefinition.getFormattedOutput($fieldValue)|raw} <xf:else /> <dl class="{$valueClass}" data-field="{$fieldId}"> <dt>{$fieldDefinition.title}</dt> <dd>{$fieldValue}</dd> </dl> </xf:if> </xf:if> </xf:foreach> </xf:macro> <xf:macro name="custom_field_value" arg-definition="!" arg-value="!"> <xf:if is="$definition.field_type == 'stars'"> <xf:macro template="rating_macros" name="stars" arg-rating="{$value}" /> <xf:else /> <xf:if is="$definition.match_type == 'date'"> <xf:macro name="custom_field_value_date" arg-date="{$value}" /> <xf:elseif is="$definition.match_type == 'color'" /> <xf:macro name="custom_field_value_color" arg-color="{$value}" /> <xf:else /> {$definition.getFormattedValue($value)|raw} </xf:if> </xf:if> </xf:macro> <xf:macro name="custom_field_value_date" arg-date="!"> {{ date(date_from_format('Y-m-d', $date)) }} </xf:macro> <xf:macro name="custom_field_value_color" arg-color="!"> <span class="colorChip" data-xf-init="tooltip" title="{$color}"> <span class="colorChip-inner" style="background-color: {$color}"> <span class="colorChip-value">{$color}</span> </span> </span> </xf:macro> <xf:macro name="custom_fields_edit" arg-type="!" arg-group="{{ null }}" arg-set="!" arg-editMode="user" arg-onlyInclude="{{ null }}" arg-additionalFilters="{{ [] }}" arg-rowType="" arg-rowClass="" arg-namePrefix="custom_fields" arg-requiredOnly="{{ false }}"> <xf:foreach loop="$xf.app.getCustomFieldsForEdit({$type}, {$set}, {$editMode}, {$group}, {$onlyInclude}, {$additionalFilters})" key="$fieldId" value="$fieldDefinition"> <xf:if is="!$requiredOnly OR ($requiredOnly AND $fieldDefinition.required)"> <xf:formrow label="{$fieldDefinition.title}" explain="{$fieldDefinition.description}" hint="{{ $fieldDefinition.isRequired($editMode) ? phrase('required') : '' }}" rowtype="{$rowType} customField {{ in_array($fieldDefinition.field_type, ['textbox', 'textarea', 'bbcode', 'select']) ? 'input' : '' }}" rowclass="{$rowClass}" data-field="{$fieldDefinition.field_id}"> <xf:macro name="custom_fields_edit_{$fieldDefinition.field_type}" arg-set="{$set}" arg-definition="{$fieldDefinition}" arg-editMode="{$editMode}" arg-namePrefix="{$namePrefix}" /> </xf:formrow> </xf:if> </xf:foreach> </xf:macro> <xf:macro name="custom_fields_edit_groups" arg-type="!" arg-groups="!" arg-set="!" arg-editMode="user" arg-onlyInclude="{{ null }}" arg-additionalFilters="{{ [] }}" arg-rowType="" arg-namePrefix="custom_fields" arg-requiredOnly=""> <xf:foreach loop="$groups" value="$group"> <xf:macro name="custom_fields_edit" arg-type="{$type}" arg-group="{$group}" arg-set="{$set}" arg-editMode="{$editMode}" arg-onlyInclude="{$onlyInclude}" arg-additionalFilters="{$additionalFilters}" arg-rowType="{$rowType}" arg-namePrefix="{$namePrefix}" arg-requiredOnly="{$requiredOnly}" /> </xf:foreach> </xf:macro> <xf:macro name="custom_fields_edit_textbox" arg-set="!" arg-definition="!" arg-editMode="!" arg-namePrefix="custom_fields"> <xf:if is="$definition.match_type == 'date'"> <xf:dateinput name="{$namePrefix}[{$definition.field_id}]" value="{$set.{$definition.field_id}}" data-field="{$definition.field_id}" maxlength="{{ $definition.max_length ? $definition.max_length : '' }}" required="{{ $definition.isRequired($editMode) ? 'required' : '' }}" class="field_{$definition.field_id}" /> <xf:elseif is="$definition.match_type == 'color'" /> <xf:macro template="color_picker_macros" name="color_picker" arg-name="{$namePrefix}[{$definition.field_id}]" arg-value="{$set.{$definition.field_id}}" arg-mapName="" arg-row="{{ false }}" arg-required="{$definition.isRequired($editMode)}" /> <xf:elseif is="$definition.match_type == 'number'" /> <xf:set var="$step" value="1" /> <xf:if is="$definition.match_params.number_integer"> <xf:if is="$definition.match_params.number_min >= 0"> <xf:set var="$pattern" value="\d*" /> </xf:if> <xf:else /> <xf:set var="$step" value="any" /> </xf:if> <xf:if is="$definition.match_params.number_min !== ''"> <xf:set var="$min" value="{$definition.match_params.number_min}" /> </xf:if> <xf:if is="$definition.match_params.number_max !== ''"> <xf:set var="$max" value="{$definition.match_params.number_max}" /> </xf:if> <xf:numberbox name="{$namePrefix}[{$definition.field_id}]" value="{$set.{$definition.field_id}}" maxlength="{{ $definition.max_length ? $definition.max_length : '' }}" pattern="{$pattern}" default="" min="{$min}" max="{$max}" step="{$step}" required="{{ $definition.isRequired($editMode) ? 'required' : '' }}" class="field_{$definition.field_id}" /> <xf:else /> <xf:if is="in_array($definition.match_type, ['regex', 'alphanumeric'])"> <xf:set var="$type" value="text" /> <xf:set var="$pattern" value="{{ $definition.match_type == 'regex' ? $definition.match_params.regex : '\w+' }}" /> <xf:set var="$title">{{ phrase('please_enter_value_that_matches_required_format') }}</xf:set> <xf:elseif is="in_array($definition.match_type, ['date', 'email', 'url', 'color'])" /> <xf:set var="$type" value="{$definition.match_type}" /> <xf:else /> <xf:set var="$type" value="text" /> </xf:if> <xf:textbox name="{$namePrefix}[{$definition.field_id}]" value="{$set.{$definition.field_id}}" type="{$type}" maxlength="{{ $definition.max_length ? $definition.max_length : '' }}" pattern="{$pattern}" title="{$title}" min="{$min}" max="{$max}" step="{$step}" required="{{ $definition.isRequired($editMode) ? 'required' : '' }}" class="field_{$definition.field_id}" /> </xf:if> </xf:macro> <xf:macro name="custom_fields_edit_textarea" arg-set="!" arg-definition="!" arg-editMode="!" arg-namePrefix="custom_fields"> <xf:textarea name="{$namePrefix}[{$definition.field_id}]" value="{$set.{$definition.field_id}}" maxlength="{{ $definition.max_length ? $definition.max_length : '' }}" autosize="true" required="{{ $definition.isRequired($editMode) ? 'required' : '' }}" class="field_{$definition.field_id}" /> </xf:macro> <xf:macro name="custom_fields_edit_bbcode" arg-set="!" arg-definition="!" arg-editMode="!" arg-namePrefix="custom_fields"> <xf:editor name="{$namePrefix}[{$definition.field_id}]" value="{$set.{$definition.field_id}}" previewable="0" data-min-height="80" data-attachment-target="false" class="field_{$definition.field_id}" /> </xf:macro> <xf:macro name="custom_fields_edit_select" arg-set="!" arg-definition="!" arg-editMode="!" arg-multi="" arg-namePrefix="custom_fields"> <xf:select name="{$namePrefix}[{$definition.field_id}]" value="{{ $set.{$definition.field_id} === null ? '' : {$set.{$definition.field_id}} }}" multiple="{$multi}" class="field_{$definition.field_id}"> <xf:option value="" /> <xf:options source="$definition.field_choices" /> </xf:select> </xf:macro> <xf:macro name="custom_fields_edit_radio" arg-set="!" arg-definition="!" arg-editMode="!" arg-namePrefix="custom_fields"> <xf:radio name="{$namePrefix}[{$definition.field_id}]" value="{{ $set.{$definition.field_id} === null ? '' : {$set.{$definition.field_id}} }}" class="field_{$definition.field_id}" listclass="listColumns"> <xf:if is="!$definition.isRequired($editMode)"> <xf:option value="">{{ phrase('no_selection') }}</xf:option> </xf:if> <xf:foreach loop="$definition.field_choices" key="$value" value="$label"> <xf:option value="{$value}" required="{{ $definition.isRequired($editMode) ? 'required' : '' }}">{$label}</xf:option> </xf:foreach> </xf:radio> </xf:macro> <xf:macro name="custom_fields_edit_checkbox" arg-set="!" arg-definition="!" arg-editMode="!" arg-namePrefix="custom_fields"> <xf:checkbox name="{$namePrefix}[{$definition.field_id}]" value="{$set.{$definition.field_id}}" required="{{ $definition.isRequired($editMode) ? 'required' : '' }}" listclass="field_{$definition.field_id} listColumns"> <xf:options source="$definition.field_choices" /> </xf:checkbox> </xf:macro> <xf:macro name="custom_fields_edit_multiselect" arg-set="!" arg-definition="!" arg-editMode="!" arg-namePrefix="custom_fields"> <xf:macro name="custom_fields_edit_select" arg-set="{$set}" arg-definition="{$definition}" arg-editMode="!" arg-multi="1" arg-namePrefix="{$namePrefix}" /> </xf:macro> <xf:macro name="custom_fields_edit_stars" arg-set="!" arg-definition="!" arg-editMode="!" arg-namePrefix="custom_fields"> <xf:macro template="rating_macros" name="rating" arg-name="{$namePrefix}[{$definition.field_id}]" arg-currentRating="{$set.{$definition.field_id}}" arg-deselectable="{{ $definition.isRequired($editMode) ? 'false' : 'true' }}" arg-row="{{ false }}" /> </xf:macro>]]>

</template>


-<template title="deletion_macros" version_string="2.0.10" version_id="2001070" addon_id="XF" type="public">

<![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" version_string="2.2.2" version_id="2020270" addon_id="XF" type="public">

<![CDATA[/* XF-RTL:disable */ {{ include('editor_base.less') }} /* XF-RTL:enable */ @_editorBorderRadius: xf-default(@xf-input--border-radius, @xf-borderRadiusMedium); @_editorBorderColor: var(--input-border-heavy) var(--input-border-light) var(--input-border-light) var(--input-border-heavy); //@_editorFocusBorderColor: xf-default(@xf-inputFocus--border-top-color, @xf-borderColorHeavy) xf-default(@xf-inputFocus--border-right-color, @xf-borderColorLight) xf-default(@xf-inputFocus--border-bottom-color, @xf-borderColorLight) xf-default(@xf-inputFocus--border-left-color, @xf-borderColorHeavy); @_editorButtonGroupHPadding: 12px; @_editorButtonGroupHPaddingSmall: 6px; .fr-box.fr-basic { background: @xf-editorBg; border: solid 1px @xf-borderColor; border-color: @_editorBorderColor; .border-radius(@_editorBorderRadius); .fr-toolbar.fr-top { background: @xf-editorToolsBg; } &.is-focused { background: @xf-editorFocusBg; //border-color: @_editorFocusBorderColor; .fr-element { color: @xf-editorFocusColor; } .fr-toolbar.fr-top { background: @xf-editorToolsFocusBg; } } // regular border instead of an 'input' border &.is-preview, &.is-preview .fr-toolbar .fr-btn-grp.rte-tab--preview { background: @xf-contentBg; border-color: @xf-borderColor; } .fr-wrapper { border: none; } .fr-element { .m-inputZoomFix(); padding-top: @editor-padding / 2; } } .fr-toolbar { @_more-spacer: 4px; display: flex; flex-wrap: wrap; border: none; background: transparent; .border-radius(@_editorBorderRadius @_editorBorderRadius 0 0); .fr-command.fr-btn { display: inline-flex; align-items: center; justify-content: center; // context sensitivity for toolbar buttons (highlight [B] when cursor is on bold text etc.) &.fr-active:not(.fr-disabled) { color: @xf-editorButtonActiveColor; } // de-emphasize the 'more' buttons slightly &[data-cmd^="more"] { opacity: 0.5; &.fr-open { opacity: 1 } i { width: 16px; } } &.fr-dropdown { margin-right: 8px; &:last-of-type { margin-right: 2px; } } } // BUTTON GROUP HANDLING .fr-btn-grp { // using CSS variables here but we have a fallback for older browsers (for now) --hpadding: @_editorButtonGroupHPadding; display: inline-flex; border-style: solid; border-width: 0px; border-color: @_editorBorderColor; margin: 0; padding: @_more-spacer 0 0 @_editorButtonGroupHPadding; // basic padding for older browsers padding: @_more-spacer 0 0 var(--hpadding); // hide empty groups completely, just in case we have alternative padding specified later on &:empty { padding: 0 !important; } //&:nth-child(even) //{ // background: rgba(0,0,0,.05); //} &.fr-float-left { + .fr-btn-grp.fr-float-right:not(.rte-tab--preview) { flex: 1 1 0; justify-content: flex-end; } } &.rte-tab--beforePreview { padding-right: @_editorButtonGroupHPadding; padding-right: var(--hpadding); &.fr-float-left { // make sure this expands to fill the space so the preview border is correct flex-grow: 1; } } // tabify inactive groups &.rte-tab--inactive { border-bottom-width: 1px; } &.rte-tab--preview { border-left-width: 1px; .border-radius(0 @_editorBorderRadius 0 0); // pad the button to make it fill the tab // normally padding: 4px, 17px, 0, 22px; margin: 0; padding: 0 !important; .fr-command.fr-btn { padding: 4px (@_editorButtonGroupHPadding + 5px) 0px (@_editorButtonGroupHPadding + 5px); padding: 4px ~'calc(var(--hpadding) + 5px)' 0px ~'calc(var(--hpadding) + 5px)'; height: 36px; .border-radius(0 @_editorBorderRadius 0 0); &:hover { background: transparent; } } } } .fr-newline { margin: 0; } // 'more' toolbar stuff .fr-command.fr-btn.fr-open { margin-top: @btn-margin; padding-bottom: @_more-spacer; height: (@btn-height + @_more-spacer); } .fr-more-toolbar { position: absolute; bottom: 0; &[style*="padding-left: 0px"] { // Padding is used on the more toolbar for button alignment. If it's 0 then we don't want // the buttons to be jammed up against the edge. padding-left: @_editorButtonGroupHPaddingSmall !important; } } } .fr-separator { float: none; display: inline-flex; align-items: center; justify-content: center; background-color: @xf-editorButtonDisabledColor; &.fr-vs { height: @btn-height - @btn-margin * 2; margin: 4px; } .fr-toolbar > & { // hide separators directly under the toolbar rather in groups - this only happens as // a resize quirk display: none; } } // RTE disabled (BB code mode) styling .fr-box textarea.input { border: none; background: none; } // some adjustments for different screen resolutions .fr-box.fr-basic { &[data-size="XL"], &[data-size="LG"], &[data-size="MD"] { .fr-btn-grp { padding-right: @_editorButtonGroupHPadding; } } // shrink the 'Preview' padding at smaller resolutions &[data-size="SM"], &[data-size="XS"] { .fr-btn-grp { --hpadding: @_editorButtonGroupHPaddingSmall; } } // show the 'Preview' text on the preview tab at larger resolutions // this width is defined by the width of the page 50px larger than the size at which quick reply turns on the full-size toolbar @media (min-width: 1132px) { &[data-size="XL"] .rte-tab--preview span.fr-sr-only { font-size: 13px; // undo the original class position: static; width: auto; height: auto; clip: auto; overflow: visible; margin: 0; } } } .fr-toolbar, .fr-popup, .fr-modal { // make FontAwesome iconography respect btn-font-size .fr-command.fr-btn i { font-size: @xf-editorButtonSize; } // improve positioning of FA buttons .fr-tabs .fr-command.fr-btn i { margin: ((@popup-tab-button-height - @popup-btn-svg-size) / 2) ((@popup-tab-button-width - @popup-btn-svg-size) / 2); } .fr-command.fr-btn svg path { fill: currentColor; .m-transition(none); } // adjust separator height in this scenario to match button height .fr-tabs .fr-separator.fr-vs { margin-top: 2px; margin-bottom: 2px; } // some elements briefly flash through dropdowns on transition z-index: 3; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content { ul.fr-dropdown-list li a i { font-size: @xf-editorButtonSize; margin: 8px 7px; } } // setup visuals in the editor match visuals in messages .fr-view { img.fr-draggable:not(.smilie), .bbImage { max-width: 100%; height: auto; } .fr-video { position: relative; video { width: 560px; max-width: 100%; } } .fr-audio { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; audio { width: 560px; max-width: 100%; } } p { margin-bottom: 0; margin-top: 0; } &.fr-element { .fr-disabled { .xf-inputDisabled() !important; } @attach-margin: @xf-bbCodeImgFloatMargin; @attach-margin-after: @xf-bbCodeImgFloatMarginAfter; img.fr-dii { display: inline-block; float: none; margin: 0; max-width: 100%; &.fr-fil { float: left; margin: @attach-margin @attach-margin-after @attach-margin-after 0; max-width: calc(~'100% - @{attach-margin}'); } &.fr-fir { float: right; margin: @attach-margin 0 @attach-margin-after @attach-margin-after; max-width: calc(~'100% - @{attach-margin}'); } } .fr-video.fr-dvi { display: inline-block; float: none; margin-left: @attach-margin; margin-right: @attach-margin; max-width: calc(~'100% - (2 * @{attach-margin})'); outline: @xf-borderSize solid @xf-borderColorLight; &.fr-fvl { float: left; margin: @attach-margin @attach-margin-after @attach-margin-after 0; max-width: calc(~'100% - @{attach-margin}'); } &.fr-fvr { float: right; margin: @attach-margin 0 @attach-margin-after @attach-margin-after; max-width: calc(~'100% - @{attach-margin}'); } } } .m-tableBase(); h2, h3, h4 { margin: .5em 0; clear: both; } h2 { font-size: @xf-fontSizeLargest; } h3 { font-size: @xf-fontSizeLarger; } h4 { font-size: @xf-fontSizeLarge; } hr { border: none; border-top: @xf-borderSize solid @xf-borderColorHeavy; clear: both; } // quote tag emulation blockquote { .xf-bbCodeBlock(); margin: .5em 0; padding: @xf-paddingMedium @xf-paddingLarge; font-size: @xf-fontSizeSmall; display: flow-root; .m-tableBase(); .m-tableBase(); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } &[data-quote] { &:before { display: block; content: attr(data-quote) "{$xf.language.label_separator}"; .xf-bbCodeBlockTitle(); padding: @xf-paddingMedium @xf-paddingLarge; margin: -@xf-paddingMedium -@xf-paddingLarge @xf-paddingMedium -@xf-paddingLarge; // this margin combination makes the attribution take the full width and have bottom padding } } } } // try to make Froala inputs look like ours .fr-popup { .fr-input-line { padding: 18px 0 8px; input[type="text"], textarea { .xf-input(); margin: 0; line-height: @xf-lineHeightDefault; .m-transition(background, color;); height: auto; &:hover { .xf-input(border); } &:focus { .xf-input(border); .xf-input(padding); .xf-inputFocus(); } .m-inputZoomFix(); } input + label, textarea + label { line-height: 1.2; font-size: 12px; color: fade(xf-default(@xf-input--color, @xf-textColor), 40%); background: transparent; top: 28px; } input.fr-not-empty + label, textarea.fr-not-empty + label { color: @xf-textColorMuted; top: 2px; } } .fr-action-buttons { height: auto; .m-frCommandStyle(); } // fix FA selected color indicator .fr-color-set > span .fr-selected-color { .m-faBase(); } } .fr-quick-insert { padding-right: 0; margin-left: (@editor-padding / 2); // bring this into our z-index levels z-index: @zIndex-2; } // this toolbar is redundant and annoying .fr-second-toolbar { display: none; } .m-frCommandStyle() { 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; .xf-uix_buttonPrimaryHover(); } } } // Fix for broken CSS in ui/popup.scss, plugin/image.scss, plugin/video.scss // See: https://github.com/froala/wysiwyg-editor/issues/3878 .fr-popup textarea { resize: none; } .fr-image-resizer { &.fr-active { display: block; } .fr-handler { &.fr-hnw { cursor: nw-resize; } &.fr-hne { cursor: ne-resize; } &.fr-hsw { cursor: sw-resize; } &.fr-hse { cursor: se-resize; } } } .fr-box .fr-video-resizer { &.fr-active { display: block; } .fr-handler { &.fr-hnw { cursor: nw-resize; } &.fr-hne { cursor: ne-resize; } &.fr-hsw { cursor: sw-resize; } &.fr-hse { cursor: se-resize; } } } // #### Smilies, emoji and GIF popup @_menu-padding: @xf-paddingMedium; @_menu-padding-large: @xf-paddingLarge; .menu--emoji { width: 412px; } .menu--gif { width: 500px; } .menu--emoji, .menu--gif { max-width: calc(~'100% - @{xf-pageEdgeSpacer}'); .menu-content { position: relative; } .menu-scroller { max-height: 250px; border-top: 0; } .menu-row { padding: @_menu-padding @_menu-padding; &.menu-row--insertedMessage { .m-hiddenEl(true); position: absolute; top: 0; left: 0; right: 0; border-bottom: @xf-borderSize solid @xf-borderColorLight; } &.menu-row--search { border-bottom: @xf-borderSize solid @xf-borderColor; } } .menu-emojiInsertedMessage { display: flex; align-items: center; justify-content: center; min-height: 35px; font-size: @xf-fontSizeNormal; img { max-height: 32px; } span { margin-left: .5em } } .menu-header { background: none; .xf-formSectionHeader(); background-color: @xf-contentBg; z-index: @zIndex-1; font-size: @xf-fontSizeNormal; position: -webkit-sticky; position: sticky; padding: @_menu-padding @_menu-padding-large; top: 0; } .block-body--emoji { border-top: @xf-borderSize solid @xf-borderColorLight; } .is-hidden { display: none; } } .emojiList { .m-listPlain(); display: flex; flex-wrap: wrap; justify-content: flex-start; margin-right: -3px; margin-bottom: -3px; > li { min-width: 32px; margin-right: 3px; margin-bottom: 3px; .border-radius(@xf-borderRadiusMedium); cursor: pointer; &:hover, &:focus { background-color: @xf-paletteColor2; } a { min-width: 32px; height: 32px; font-size: 24px; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; &:hover, &:focus { text-decoration: none; } img { max-height: 32px; } .smilie.smilie--emoji { width: 22px; } .smilie--lazyLoad { visibility: hidden; } } } } // ### Editor placeholder system (where the editor is hidden until clicked) .editorPlaceholder { .is-hidden { display: none; } cursor: text; .editorPlaceholder-placeholder { .input { padding: @xf-paddingLarge; span { &:before { .m-faBase(); .m-faContent(@fa-var-pen); } } } } } // ### Editor draft saving indicator .editorDraftIndicator { .m-transition(); opacity: 0; position: absolute; bottom: 6px; right: 8px; width: 8px; height: 8px; border-radius: 4px; background: rgb(127, 185, 0); &.is-active { opacity: 1; } } .xfPreview { .m-clearFix(); }]]>

</template>


-<template title="editor_base.less" version_string="2.2.2" version_id="2020270" addon_id="XF" type="public">

<![CDATA[/***** froala.less *****/ /***** variables.less *****/ // Theme Name. @theme: 'theme'; // Generic. @white: #FFF; @light-black: #333333; @black: #000; @gray: #CCCCCC; @dark-grey: #999999; @font-family: Arial, Helvetica, sans-serif; @border-radius: 2px; @transition-timing: 0.2s ease 0s; @bg-color: #f5f5f5; // UI colors @ui-color: #0098f7; @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-active-color: #d6d6d6; @ui-bg: @white; @ui-font-size: 14px; @ui-border-color: @ui-text; @ui-border-top: 5px solid @ui-border-color; @ui-border-hover-color:#515151; @ui-bg-color: #efefef; @ui-svg-size: 24px; @ui-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); @ui-bg-color-more: @bg-color; // Separator @separator-size: 1px; @separator-color: mix(@white, #999, 80%); @separator-margin: 8px 4px; // Toolbar @toolbar-transition-timing: 0.5s; @toolbar-newline-margin: 9px; @toolbar-newline-height: 1px; @toolbar-newline-color: @ui-bg-color; @btn-more-open-margin-top: 10px; @btn-more-open-margin-bottom: -1px; @btn-size: 36px; // Logo @logo-svg-height: 20px; @logo-svg-width: 47px; @logo-svg-margin: 7px 0; @logo-transition-timing: 0.3s; @logo-span-padding: 11px 5px 10px 15px; @logo-span-font-size: 12px; @logo-color: #b1b2b7; // 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: @ui-text; @tooltip-text: @white; @tooltip-font-size: 11px; @tooltip-line-height: 22px; // Editor properties. @editor-padding