<style title="Amazing Role Play" description="" user_selectable="1" base_version_id="2021570" export_version="2">
<assets/>
<templates>
<template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ <!DOCTYPE html> <html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}" data-app="public" data-template="{$template}" data-container-key="{$containerKey}" data-content-key="{$contentKey}" data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}" data-cookie-prefix="{$xf.cookie.prefix}" data-csrf="{{ csrf_token()|escape('js') }}" class="has-no-js {{ $template ? 'template-' . $template : '' }}" {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <xf:set var="$siteName" value="{$xf.options.boardTitle}" /> <xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set> <xf:set var="$description"><xf:description /></xf:set> <title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title> <link rel="manifest" href="{{ base_url('webmanifest.php') }}"> <xf:if is="property('metaThemeColor')"> <meta name="theme-color" content="{{ parse_less_color(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:elseif is="property('publicMetadataLogoUrl')" /> <link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl')) }}" /> </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:include template="google_analytics" /> </head> <body data-template="{$template}"> <div class="p-pageWrapper" id="top"> <xf:if contentcheck="true"> <div class="p-staffBar"> <div class="p-staffBar-inner hScroller" data-xf-init="h-scroller"> <div class="hScroller-scroll"> <xf:contentcheck> <xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total"> <a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}"> {{ phrase('approval_queue') }} </a> </xf:if> <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total"> <a href="{{ link('reports') }}" class="p-staffBar-link badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}" data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}"> {{ phrase('reports') }} </a> </xf:if> <xf:if contentcheck="true"> <a class="p-staffBar-link menuTrigger" data-xf-click="menu" data-xf-key="alt+m" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('moderator') }}</a> <div class="menu" data-menu="menu" aria-hidden="true"> <div class="menu-content"> <h4 class="menu-header">{{ phrase('moderator_tools') }}</h4> <xf:contentcheck> <!--[XF:mod_tools_menu:top]--> <xf:if is="$xf.visitor.is_moderator"> <a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a> </xf:if> <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId"> <a href="{{ link('reports') }}" class="menu-linkRow" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }}</a> </xf:if> <!--[XF:mod_tools_menu:bottom]--> </xf:contentcheck> </div> </div> </xf:if> <xf:if is="$xf.visitor.is_admin"> <a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a> </xf:if> </xf:contentcheck> </div> </div> </div> </xf:if> <xf:set var="$srcset">{{ property('publicLogoUrl2x') ? base_url(property('publicLogoUrl2x')) . ' 2x' : '' }}</xf:set> <header class="p-header" id="header"> <xf:if is="property('arp_header_navigation_enable')"> <div class="p-header--navigation"> {{ property('arp_header_link_content') }} </div> </xf:if> <div class="p-header--hatf"> <div class="p-header-hatf--title"> Ôîðóì </div> <div class="p-header-hatf--subtitle"> AMAZING ONLINE </div> </div> <xf:ad position="container_header" /> </header> <xf:set var="$navHtml"> <nav class="p-nav"> <div class="p-nav-inner"> <xf:button class="button--plain p-nav-menuTrigger" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" tabindex="0" aria-label="{{ phrase('menu')|for_attr }}"> <i aria-hidden="true"></i> </xf:button> <div class="p-nav-smallLogo"> <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}"> <img src="{{ base_url(property('publicLogoUrl')) }}" srcset="{$srcset}" alt="{$xf.options.boardTitle}" width="{{ property('publicLogoWidth') ?: '' }}" height="{{ property('publicLogoHeight') ?: '' }}" /> </a> </div> <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> <div class="p-nav-opposite"> <div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}"> <xf:if is="$xf.visitor.user_id"> <xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'"> <a href="{{ link('account') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user"> <xf:avatar user="$xf.visitor" size="xxs" href="" 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 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 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('conversations')|for_attr }}" aria-expanded="false" aria-haspopup="true"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('conversations') }}</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 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('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:else /> <a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" data-xf-click="overlay" data-follow-redirects="on"> <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span> </a> <xf:if is="$xf.options.registrationSetup.enabled"> <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register" data-xf-click="overlay" data-follow-redirects="on"> <span class="p-navgroup-linkText">{{ phrase('register') }}</span> </a> </xf:if> </xf:if> </div> <div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}"> <a href="{{ link('whats-new') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew" aria-label="{{ phrase('whats_new')|for_attr }}" title="{{ phrase('whats_new')|for_attr }}"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span> </a> <xf:if is="$xf.visitor.canSearch()"> <a href="{{ link('search') }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search" data-xf-click="menu" data-xf-key="{{ phrase('shortcut.search_menu')|for_attr }}" aria-label="{{ phrase('search')|for_attr }}" aria-expanded="false" aria-haspopup="true" title="{{ phrase('search')|for_attr }}"> <i aria-hidden="true"></i> <span class="p-navgroup-linkText">{{ phrase('search') }}</span> </a> <div class="menu menu--structural menu--wide" data-menu="menu" aria-hidden="true"> <form action="{{ link('search/search') }}" method="post" class="menu-content" data-xf-init="quick-search"> <h3 class="menu-header">{{ phrase('search') }}</h3> <!--[XF:search_menu:above_input]--> <div class="menu-row"> <xf:if is="$searchConstraints"> <div class="inputGroup inputGroup--joined"> <xf:textbox name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" /> <xf:select name="constraints" class="js-quickSearch-constraint" aria-label="{{ phrase('search_within') }}"> <xf:option value="">{{ phrase('everywhere') }}</xf:option> <xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint"> <xf:option value="{$constraint|json}">{$constraintName}</xf:option> </xf:foreach> </xf:select> </div> <xf:else /> <xf:textbox name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" /> </xf:if> </div> <!--[XF:search_menu:above_title_only]--> <div class="menu-row"> <xf:checkbox standalone="true"> <xf:option name="c[title_only]"> <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')|for_attr }}"> <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') }}" aria-labelledby="ctrl_search_menu_by_member" /> </div> </div> <div class="menu-footer"> <span class="menu-footer-controls"> <xf:button type="submit" class="button--primary" icon="search" /> <xf:button href="{{ link('search') }}">{{ phrase('advanced_search...') }}</xf:button> </span> </div> <xf:csrf /> </form> </div> </xf:if> </div> </div> </div> </nav> </xf:set> <xf:set var="$subNavHtml"> <xf:if is="$selectedNavChildren is not empty"> <div class="p-sectionLinks"> <div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller"> <div class="hScroller-scroll"> <ul class="p-sectionLinks-list"> <xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i"> <li> <xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" /> </li> </xf:foreach> </ul> </div> </div> </div> <xf:elseif is="{$selectedNavEntry}" /> <div class="p-sectionLinks p-sectionLinks--empty"></div> </xf:if> </xf:set> <xf:if is="property('publicNavSticky') == 'primary'"> <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header"> {$navHtml|raw} </div> {$subNavHtml|raw} <xf:elseif is="property('publicNavSticky') == 'all'" /> <div class="p-navSticky p-navSticky--all" data-xf-init="sticky-header"> {$navHtml|raw} {$subNavHtml|raw} </div> <xf:else /> {$navHtml|raw} {$subNavHtml|raw} </xf:if> <div class="offCanvasMenu offCanvasMenu--nav js-headerOffCanvasMenu" data-menu="menu" aria-hidden="true" data-ocm-builder="navigation"> <div class="offCanvasMenu-backdrop" data-menu-close="true"></div> <div class="offCanvasMenu-content"> <div class="offCanvasMenu-header"> {{ phrase('menu') }} <a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close')|for_attr }}"></a> </div> <xf:if is="$xf.visitor.user_id"> <div class="p-offCanvasAccountLink"> <div class="offCanvasMenu-linkHolder"> <a href="{{ link('account') }}" class="offCanvasMenu-link"> <xf:avatar user="$xf.visitor" size="xxs" href="" /> {$xf.visitor.username} </a> </div> <hr class="offCanvasMenu-separator" /> </div> <xf:else /> <div class="p-offCanvasRegisterLink"> <div class="offCanvasMenu-linkHolder"> <a href="{{ link('login') }}" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true"> {{ phrase('log_in') }} </a> </div> <hr class="offCanvasMenu-separator" /> <xf:if is="$xf.options.registrationSetup.enabled"> <div class="offCanvasMenu-linkHolder"> <a href="{{ link('register') }}" class="offCanvasMenu-link" data-xf-click="overlay" data-menu-close="true"> {{ phrase('register') }} </a> </div> <hr class="offCanvasMenu-separator" /> </xf:if> </div> </xf:if> <div class="js-offCanvasNavTarget"></div> <div 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> <template class="js-installTemplateIOS"> <div class="overlay-title">{{ phrase('how_to_install_app_on_ios') }}</div> <div class="block-body"> <div class="block-row"> <p> {{ phrase('follow_along_with_video_below_to_see_how_to_install_our_site_as_web_app') }} </p> <p style="text-align: center"> <video src="{{ base_url(property('publicPwaInstallVideoUrl')) }}" width="280" height="480" autoplay loop muted playsinline></video> </p> <p> <small><strong>{{ phrase('note:') }}</strong> {{ phrase('this_feature_currently_may_not_be_available_in_some_browsers') }}</small> </p> </div> </div> </template> </div> </div> </div> <div class="p-body"> <div class="p-body-inner"> <!--XF:EXTRA_OUTPUT--> <xf:if is="$notices.block"> <xf:macro template="notice_macros" name="notice_list" arg-type="block" arg-notices="{$notices.block}" /> </xf:if> <xf:if is="$notices.scrolling"> <xf:macro template="notice_macros" name="notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" /> </xf:if> <xf:ad position="container_breadcrumb_top_above" /> <xf:macro name="breadcrumbs" arg-breadcrumbs="{$breadcrumbs}" arg-navTree="{$navTree}" arg-selectedNavEntry="{$selectedNavEntry}" /> <xf:ad position="container_breadcrumb_top_below" /> <xf:macro template="browser_warning_macros" name="javascript" /> <xf:macro template="browser_warning_macros" name="browser" /> <xf:if is="$headerHtml is not empty"> <div class="p-body-header"> {$headerHtml|raw} </div> <xf:elseif contentcheck="true" /> <div class="p-body-header"> <xf:contentcheck> <xf:if contentcheck="true"> <div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}"> <xf:contentcheck> <xf:if is="!$noH1"> <h1 class="p-title-value">{$h1}</h1> </xf:if> <xf:if contentcheck="true"> <div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div> </xf:if> </xf:contentcheck> </div> </xf:if> <xf:if is="$description is not empty"> <div class="p-description">{$description}</div> </xf:if> </xf:contentcheck> </div> </xf:if> <div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}"> <xf:if is="$sideNav"> <div class="p-body-sideNavCol"></div> </xf:if> <div class="p-body-contentCol"></div> <xf:if is="$sidebar"> <div class="p-body-sidebarCol"></div> </xf:if> <xf:if is="$sideNav"> <div class="p-body-sideNav"> <div class="p-body-sideNavTrigger"> <xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm"> {{ $sideNavTitle ?: phrase('navigation') }} </xf:button> </div> <div class="p-body-sideNavInner" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav"> <div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div> <div data-ocm-class="offCanvasMenu-content"> <div class="p-body-sideNavContent"> <xf:ad position="container_sidenav_above" /> <xf:foreach loop="$sideNav" value="$sideNavHtml"> {$sideNavHtml} </xf:foreach> <xf:ad position="container_sidenav_below" /> </div> </div> </div> </div> </xf:if> <div class="p-body-content"> <xf:ad position="container_content_above" /> <div class="p-body-pageContent">{$content|raw}</div> <xf:ad position="container_content_below" /> </div> <xf:if is="$sidebar"> <div class="p-body-sidebar"> <xf:ad position="container_sidebar_above" /> <xf:foreach loop="$sidebar" value="$sidebarHtml"> {$sidebarHtml} </xf:foreach> <xf:ad position="container_sidebar_below" /> </div> </xf:if> </div> <xf:ad position="container_breadcrumb_bottom_above" /> <xf:macro name="breadcrumbs" arg-breadcrumbs="{$breadcrumbs}" arg-navTree="{$navTree}" arg-selectedNavEntry="{$selectedNavEntry}" arg-variant="bottom" /> <xf:ad position="container_breadcrumb_bottom_below" /> </div> </div> <footer class="footer" id="footer"> <xf:if is="property('arp_footerEnable')"> <div class="fixed-size"> <div class="footer-navigation footer-container"> <xf:if is="property('arp_footer1_enable')"> <div class="footer-navigation__section"> <div class="footer-navigation__section__title"> {{ property('arp_footer1_title') }} </div> <a class="footer-navigation__logotype" href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}" target="_blank"><img src="{{ property('arp_footer1_logo') }}"></a> <div class="footer-navigation__section__items"> {{ property('arp_footer1_links_content') }} </div> </div> </xf:if> <xf:if is="property('arp_footer2_enable')"> <div class="footer-navigation__section"> <div class="footer-navigation__section__title"> {{ property('arp_footer2_title') }} </div> <div class="footer-navigation__section__items"> {{ property('arp_footer2_links_content') }} </div> </div> </xf:if> <xf:if is="property('arp_footer3_enable')"> <div class="footer-navigation__section"> <div class="footer-navigation__section__title"> {{ property('arp_footer3_title') }} </div> <div class="footer-navigation__section__items"> {{ property('arp_footer3_links_content') }} </div> </div> </xf:if> <xf:if is="property('arp_footerSocial_enable')"> <div class="footer-navigation__section"> <div class="footer-navigation__section__networks"> {{ property('arp_footerSocial_links_content') }} </div> </div> </xf:if> </div> <div class="footer-copyright footer-container"> <xf:if is="property('arp_footerAboutUsEnable')"> <h3 class="footer-copyright__text"> {{ property('arp_footerAboutUs') }} </h3> </xf:if> <xf:if contentcheck="true"> <div class="footer-copyright__caption"> <xf:contentcheck> <xf:copyright /> {{ phrase('extra_copyright') }} </xf:contentcheck> </div> </xf:if> </div> </div> </xf:if> <div class="p-footer-inner"> <div class="p-footer-row"> <xf:if contentcheck="true"> <div class="p-footer-row-main"> <ul class="p-footer-linkList"> <xf:contentcheck> <xf:if is="$xf.cookieConsent.getMode() == 'advanced'"> <li><a href="{{ link('misc/cookies') }}" rel="nofollow" data-xf-init="tooltip" title="{{ phrase('cookie_consent')|for_attr }}" data-xf-click="cookie-consent-toggle"> <xf:fa icon="fa-cookie" /> {{ phrase('cookie_consent_label') }} </a></li> </xf:if> <xf:if is="$xf.visitor.canChangeStyle()"> <li><a href="{{ link('misc/style') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow"> <xf:fa icon="fa-paint-brush" /> {$xf.style.title} </a></li> </xf:if> <xf:if is="$xf.visitor.canChangeLanguage()"> <li><a href="{{ link('misc/language') }}" data-xf-click="overlay" data-xf-init="tooltip" title="{{ phrase('language_chooser')|for_attr }}" rel="nofollow"> <xf:fa icon="fa-globe" /> {$xf.language.title}</a></li> </xf:if> </xf:contentcheck> </ul> </div> </xf:if> <div class="p-footer-row-opposite"> <ul class="p-footer-linkList"> <xf:if is="$xf.visitor.canUseContactForm()"> <xf:if is="$xf.contactUrl"> <li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li> </xf:if> </xf:if> <xf:if is="$xf.tosUrl"> <li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li> </xf:if> <xf:if is="$xf.privacyPolicyUrl"> <li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li> </xf:if> <xf:if is="$xf.helpPageCount"> <li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li> </xf:if> <xf:if is="$xf.homePageUrl"> <li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li> </xf:if> <li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><xf:fa icon="fa-rss" /><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li> </ul> </div> </div> <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> </footer> </div> <!-- closing p-pageWrapper --> <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> <div class="u-navButtons js-navButtons" data-trigger-type="{{ property('scrollJumpButtons') }}"> <xf:button href="javascript:" class="button--scroll"><xf:fa icon="fa-arrow-left" /><span class="u-srOnly">{{ phrase('back') }}</span></xf:button> </div> <xf:if is="property('scrollJumpButtons')"> <div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}"> <xf:button href="#top" class="button--scroll" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-up" /><span class="u-srOnly">{{ phrase('top') }}</span></xf:button> <xf:if is="property('scrollJumpButtons') != 'up'"> <xf:button href="#footer" class="button--scroll" data-xf-click="scroll-to"><xf:fa icon="fa-arrow-down" /><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button> </xf:if> </div> </xf:if> <xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" /> <xf:if is="count($xf.reactionsActive) > 1 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> {$ldJsonHtml|raw} </body> </html> <xf:macro name="nav_entry" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut=""> <div class="p-navEl {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}> <xf:if is="$nav.href"> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}" arg-shortcut="{{ $nav.children ? false : $shortcut }}" /> <xf:if is="$nav.children"><a data-xf-key="{$shortcut}" data-xf-click="menu" data-menu-pos-ref="< .p-navEl" class="p-navEl-splitTrigger" role="button" tabindex="0" aria-label="{{ phrase('toggle_expanded')|for_attr }}" aria-expanded="false" aria-haspopup="true"></a></xf:if> <xf:elseif is="$nav.children" /> <xf:if is="$selected"> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="p-navEl-link" /> <xf:else /> <a data-xf-key="{$shortcut}" data-xf-click="menu" data-menu-pos-ref="< .p-navEl" class="p-navEl-linkHolder" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true"> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="p-navEl-link p-navEl-link--menuTrigger" /> </a> </xf:if> <xf:else /> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="p-navEl-link" arg-shortcut="{$shortcut}" /> </xf:if> <xf:if is="$nav.children"> <div class="menu menu--structural" data-menu="menu" aria-hidden="true"> <div class="menu-content"> <xf:foreach loop="$nav.children" key="$childNavId" value="$child"> <xf:macro name="nav_menu_entry" arg-navId="{$childNavId}" arg-nav="{$child}" /> </xf:foreach> </div> </div> </xf:if> </div> </xf:macro> <xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}"> <xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" /> <{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }} class="{{ trim($class) }} {$nav.attributes.class}" {{ attributes($nav.attributes, ['class']) }} {{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }} data-nav-id="{$navId}"><xf:if is="$nav.icon"><xf:fa icon="{$nav.icon}" /> </xf:if>{{ $titleHtml ? $titleHtml|raw : $nav.title }}<xf:if is="$nav.counter"> <span class="badge badge--highlighted">{$nav.counter|number}</span></xf:if></{$tag}> </xf:macro> <xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0"> <xf:macro name="nav_link" arg-navId="{$navId}" arg-nav="{$nav}" arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy" /> <xf:if is="$nav.children"> <xf:foreach loop="$nav.children" key="$childNavId" value="$child"> <xf:macro name="nav_menu_entry" arg-navId="{$childNavId}" arg-nav="{$child}" arg-depth="{{ $depth + 1 }}" /> </xf:foreach> <xf:if is="$depth == 0"> <hr class="menu-separator" /> </xf:if> </xf:if> </xf:macro> <xf:macro name="breadcrumbs" arg-breadcrumbs="!" arg-navTree="!" arg-selectedNavEntry="{{ null }}" arg-variant=""> <xf:if contentcheck="true"> <ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}" itemscope itemtype="https://schema.org/BreadcrumbList"> <xf:contentcheck> <xf:set var="$position" value="{{ 0 }}" /> <xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" /> <xf:set var="$rootBreadcrumbHref" value="{{ $rootBreadcrumb.href|substr(-1) == '/' ? $rootBreadcrumb.href : $rootBreadcrumb.href . '/' }}" /> <xf:if is="$rootBreadcrumb AND $rootBreadcrumbHref != $xf.uri AND $rootBreadcrumbHref != $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 != $rootBreadcrumbHref"> <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:contentcheck> </ul> </xf:if> </xf:macro> <xf:macro name="crumb" arg-href="!" arg-value="!" arg-position="{{ 0 }}"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a href="{$href}" itemprop="item"> <span itemprop="name">{$value}</span> </a> <xf:if is="$position"><meta itemprop="position" content="{$position}" /></xf:if> </li> </xf:macro> ]]>
</template>
<template title="amazing.less" type="public" addon_id="" version_id="0" version_string="">
<![CDATA[ .p-navEl-splitTrigger { margin-left: -((@xf-publicNavPaddingH) / 1.5); } #XF .p-navEl-link.p-navEl-link--splitMenu{ padding-right: @xf-publicNavPaddingH; } //Header <xf:if is="(property('arp_headerAnimation'))"> @keyframes animation-header-change { 0% { background-image: url('/styles/Amazing RP/Image/new year/blue.jpg') } 25% { background-image: url('/styles/Amazing RP/Image/new year/red.jpg') } 50% { background-image: url('/styles/Amazing RP/Image/new year/purple.jpg') } 75% { background-image: url('/styles/Amazing RP/Image/new year/rose.jpg') } 100% { background-image: url('/styles/Amazing RP/Image/new year/blue.jpg') } } </xf:if> <xf:if is="(property('arp_headerOnMobile'))"> @media (max-width: @xf-responsiveMedium) { .p-header { display: none !important; } } </xf:if> //Header .p-header { .p-header--navigation { display: flex; width: 800px; justify-content: center; margin: 30px auto 0; .p-header-navigation--item { backdrop-filter: blur(2px) saturate(100%); position: relative; color: @xf-arp_headerLinksColor; font-size: 14px; text-transform: uppercase; letter-spacing: -0.5px; transition: color 100ms ease; margin: 0 18px; user-select: none; &:hover { color: @xf-arp_headerLinksHoverColor; } &:active { color: white; } } @media (max-width: @xf-responsiveMedium) { display: none; } } .p-header--hatf { opacity: 0; display: flex; margin: 50px 0px 60px; flex-direction: column; justify-content: center; align-items: center; .p-header-hatf--title { color: white; font-size: 35px; line-height: 38px; font-weight: bold; text-transform: uppercase; } .p-header-hatf--subtitle { color: #FFFFFF; font-size: 14px; font-weight: bold; text-transform: uppercase; } } } .p-navgroup-linkText { margin-left: 8px; } //Footer .footer { display: flex; position: relative; flex-direction: column; border-top: 1px solid #ededed; margin-top: auto; .fixed-size { width: 100%; padding: 80px 20px; max-width: 1170px; box-sizing: border-box; margin: 0 auto; } .footer-container { margin-bottom: 65px; &:last-child { margin-bottom: 0 } } .footer-copyright { display: flex; justify-content: space-between; align-items: flex-end; .footer-copyright__text { display: unset; font-size: 16px; font-weight: normal; color: @xf-arp_footerAboutUsColor; line-height: 1.8; max-width: 545px; margin: unset; margin-block-start: unset; margin-block-end: unset; } .footer-copyright__caption { font-size: 16px; color: rgba(0, 0, 0, 0.6); } } .footer-navigation { display: flex; align-items: flex-start; justify-content: space-between; .footer-navigation__section { display: flex; flex-direction: column; .footer-navigation__section__title { font-size: 24px; font-weight: bold; line-height: 20px; margin-bottom: 25px; } } .footer-navigation__logotype img { display: block; min-height: 39px; margin-bottom: 10px; &:active { position: relative; top: 1px } } .footer-navigation__section__items { display: flex; flex-direction: column; .footer-navigation__section__items__item { font-size: 16px; line-height: 35px; transition: opacity 300ms ease; &:hover { opacity: 0.8; } } } .footer-navigation__section__networks { display: grid; grid-template-rows: repeat(2, 84px); grid-template-columns: repeat(3, 84px); row-gap: 16px; column-gap: 16px; .footer-navigation__section__networks__item { display: flex; flex-direction: column; justify-content: center; align-items: center; background-repeat: no-repeat; background-size: 30px 30px, cover; background-position: center; border-radius: 6px; transition: transform 300ms ease; cursor: pointer; &:hover { transform: scale(1.05); } &.network-telegram { background-image: url('styles/Amazing RP/Image/telegram.svg'), linear-gradient(-45deg, #03a9f4 0%, #42c4ff 100%); } &.network-vk { background-image: url('styles/Amazing RP/Image/vk-white.svg'), linear-gradient(-45deg, #4a76a8 0%, #73b4fd 100%); } &.network-ok { background-size: 42px 42px, cover; background-image: url('styles/Amazing RP/Image/ok.svg'), linear-gradient(-45deg, #f80 0%, #f80 100%); } &.network-discrod { background-image: url('styles/Amazing RP/Image/discord.svg'), linear-gradient(0deg, #7289da 0%, #b9c8ff 100%); } &.network-youtube { background-image: url('styles/Amazing RP/Image/youtube.svg'), linear-gradient(-45deg, #e53935 0%, #e5356a 100%) } &.network-tiktok { background-image: url('styles/Amazing RP/Image/tiktok.svg'), linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%); } } } } } @media (max-width: @xf-responsiveMedium) { <xf:if is="(property('arp_footerMobileEnable'))"> .fixed-size { display: none; } </xf:if> .footer-navigation { flex-direction:column; .footer-navigation__section { margin-bottom: 50px; &:last-child { margin-bottom: unset; } } .footer-navigation__section__networks { grid-template-rows:repeat(2, 70px) !important; grid-template-columns: repeat(3, 70px) !important; column-gap: 10px !important; row-gap: 10px !important } } .footer-copyright { flex-direction: column; align-items: flex-start !important; .footer-copyright__text { margin-bottom: 20px !important; } } } //Thread <xf:if is="(property('arp_animationThread'))"> .structItem:not(.structItem--quickCreate):not(.js-emptyThreadList):hover { transform: scale(1.01); -webkit-box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3); -moz-box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3); box-shadow: 0px 0px 10px 0px rgba(34, 60, 80, 0.3); background: #fff; } </xf:if> //User visitor .menu-tabHeader { .tabs-tab { padding: 20px 20px 20px; } } //Other .menu-separator { margin: 0; border-top: 1px solid #f5f5f5; } ]]>
</template>
<template title="app_body.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ######################################### MAIN BODY ################################# html.has-os-ios.has-displaymodestandalone { // prevent overscroll entirely on iOS in display-mode: standalone overscroll-behavior-y: none !important; .iosRefresh-ptr { background-color: @xf-publicHeader--background-color; } .iosRefresh-icon, .iosRefresh-text { color: @xf-chromeTextColor; } } .p-body { display: flex; align-items: stretch; flex-grow: 1; min-height: 1px; // IE11 workaround - related to #139187 } .p-body-inner { display: flex; flex-direction: column; width: 100%; .m-pageWidth(); .m-clearFix(); } .p-body-header { margin-bottom: 30px; } .p-body-main { display: table; table-layout: fixed; width: 100%; margin-bottom: 80px; min-height: 1px; // IE11 workaround - related to #139187 } .p-body-content { display: table-cell; vertical-align: top; .p-body-main--withSideNav & { padding-left: @xf-sidebarSpacer; } .p-body-main--withSidebar & { padding-right: @xf-sidebarSpacer; } .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: @xf-pageWidthMax) { // 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-responsiveWide) { // sidebar/sidenav have been moved/hidden max-width: 100vw; } } } } .p-body-pageContent { > .tabs--standalone:first-child { margin-bottom: 30px; box-shadow: 0px 5px 50px -10px rgba(0, 0, 0, 0.1); } } .p-body-sideNav { display: table-cell; vertical-align: top; width: @xf-sidebarWidth; } .p-body-sideNavTrigger { display: none; } .p-body-sidebar { display: table-cell; 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; } .p-body-content, .p-body-pageContent, .p-body-sideNav, .p-body-sideNavContent, .p-body-sidebar { > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } } @media (max-width: @xf-responsiveWide) { .p-body-sideNavCol, .p-body-contentCol, .p-body-sidebarCol { display: none; width: auto; } .p-body-main, .p-body-content { display: block; } .p-body-sideNav { display: block; width: auto; } .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 { display: flex; flex-wrap: wrap; align-items: stretch; margin: (@xf-elementSpacer) -((@xf-pageEdgeSpacer) / 2) -(@xf-elementSpacer); width: auto; > * { margin: 0 ((@xf-pageEdgeSpacer) / 2) @xf-elementSpacer; min-width: @xf-sidebarWidth; flex: 1 1 @xf-sidebarWidth; &:last-child { margin-bottom: @xf-elementSpacer; } } // add an invisible block to ensure that the last row has the correct widths &:after { display: block; content: ''; height: 0; margin: 0 ((@xf-pageEdgeSpacer) / 2); min-width: @xf-sidebarWidth; flex: 1 1 @xf-sidebarWidth; } .block-container { display: flex; flex-direction: column; height: 100%; .block-footer { margin-top: auto; } } } .p-body-main--withSideNav, .p-body-main--withSidebar { .p-body-content { padding: 0; } } } @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; > * { margin-left: 0; margin-right: 0; min-width: 0; } } } ]]>
</template>
<template title="app_breadcrumbs.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ .p-breadcrumbs { .m-listPlain(); .m-clearFix(); margin-bottom: 5px; line-height: 1.5; &.p-breadcrumbs--bottom { display: flex; justify-content: center; margin-top: 0; margin-bottom: 20px; } > li { float: left; font-size: @xf-fontSizeSmall; a { display: inline-block; vertical-align: bottom; max-width: 300px; .m-overflowEllipsis(); } &: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 } &:last-child { a { font-weight: @xf-fontWeightHeavy; } } } } @media (max-width: @xf-responsiveMedium) { .p-breadcrumbs > li a { max-width: 200px; } } @media (max-width: @xf-responsiveNarrow) { .p-breadcrumbs { > li { display: none; font-size: @xf-fontSizeSmallest; &:last-child { display: block; } a { max-width: 90vw; } &:after { display: none; } &:before { .m-faContent(@fa-var-chevron-left, false, ltr); .m-faContent(@fa-var-chevron-right, false, rtl); margin-right: .5em; } } } } ]]>
</template>
<template title="app_header.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // MAIN HEADER ROW .p-header { .xf-publicHeader(); a { color: inherit; } } .p-header-inner { .m-pageWidth(); .m-pageInset(); } .p-header-content { padding: @xf-paddingMedium 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 100%; } .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 { vertical-align: bottom; max-width: 100%; // Note: this is XF template syntax, not LESS {{ !property('publicLogoHeight') ? 'max-height: 200px;' : ''}} &[src$="/xenforo-logo.svg"] { height: 36px; } } } } @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(); } } } ]]>
</template>
<template title="app_nav.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // navEl / Navigation Elements for header navigation .p-navEl { .m-clearFix(); } .p-navEl-linkHolder { float: left; } .p-navEl-link { float: left; .m-transition(opacity, background; @_nav-elTransitionSpeed); &.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(); a { color: inherit; } .p-navSticky.is-sticky & { .p-nav-list .p-navEl.is-selected, .p-account { border-radius: 0; } } } .p-nav-inner { .m-pageWidth(); .m-pageInset(0px); .m-clearFix(); display: flex; align-items: center; padding: 25px 0px; } .p-nav .p-nav-menuTrigger { display: none; vertical-align: middle; align-self: center; margin-left: max(0px, @xf-pageEdgeSpacer - 6px); margin-right: 5px; padding: @xf-publicNavPaddingV 8px; color: inherit; &:hover { text-decoration: none; } i:after { .m-faBase(); font-size: @xf-fontSizeLargest; .m-faContent(@fa-var-bars); //, .88em vertical-align: bottom; } .p-nav-menuText { display: none; } } .p-nav-smallLogo { <xf:if is="(property('arp_hideLogo'))">display: none;</xf:if> max-width: 100px; align-self: center; img { display: block; max-height: @header-navHeight; &:not([src$=".svg"]) { width: auto; } } } .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(); 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; } } .m-navElHPadding(@xf-publicNavPaddingH); .p-navEl { .xf-publicNavTab(); .m-transition(all; @_nav-elTransitionSpeed); &.is-selected { .xf-publicNavSelected(); .p-navEl-link { padding-right: @xf-publicNavPaddingH; // since the split trigger is hidden &:hover { background: none; text-decoration: none; } } .p-navEl-splitTrigger { display: block; } } &:not(.is-selected):not(.is-menuOpen) { &:hover, .p-navEl-link:hover, .p-navEl-splitTrigger:hover { .xf-publicNavTabHover(); } } &.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; } } .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-block; } .p-nav-smallLogo { display: inline-block; } .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; } .p-navgroup { float: left; align-items: center; .m-clearFix(); border-top-left-radius: @xf-borderRadiusMedium; border-top-right-radius: @xf-borderRadiusMedium; &.p-discovery { margin-left: .5em; &.p-discovery--noSearch { margin-left: 0; } } } .p-navgroup-link { float: left; display: flex; padding: 0 15px; &: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; } &.p-navgroup-link--user { .m-overflowEllipsis(); max-width: 150px; .avatar { min-width: 25px; min-height: 25px; font-size: 13px; border-radius: 100%; } } &.badgeContainer { position: relative; &:after { left: 10px; top: 0px; width: 10px; height: 10px; padding: 0px; border-radius: 30px; font-size: 0px; line-height: 0px } &:hover, &.badgeContainer--highlighted { opacity: 1; } } &.is-menuOpen { .xf-publicNavTabMenuOpen(); 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-faContent(@fa-var-envelope, 1em); } &.p-navgroup-link--alerts i:after { .m-faContent(@fa-var-bell); //, .88em } &.p-navgroup-link--bookmarks i:after { .m-faContent(@fa-var-bookmark); //, .75em } &.p-navgroup-link--whatsnew i:after { .m-faContent(@fa-var-bolt); //, .63em } &.p-navgroup-link--search i:after { .m-faContent(@fa-var-search); //, 1em } } .p-navgroup-link--whatsnew { display: none; .p-navgroup-link:first-of-type& + .p-navgroup-link { border-top-left-radius: @xf-borderRadiusMedium; border-left: none; } } @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: block; } .has-js { .p-nav-opposite { align-self: center; margin-right: max(0px, @xf-pageEdgeSpacer - 6px); .p-navgroup { background: none; margin-left: 0; } .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; } } ]]>
</template>
<template title="bb_code.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![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; padding: 18px 20px; .xf-bbCodeBlock(); &.bbCodeBlock--quote { .bbCodeBlock-content { font-size: @xf-fontSizeSmall; } } } .bbCodeBlock-title { padding-bottom: 10px; .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; .m-clearFix(); } .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%, 80% ); 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; background-color: #f5f5f5; } } .bbCodeSpoiler-content { .m-hiddenEl(true); .has-no-js & { display: block !important; } > .bbCodeBlock--spoiler { margin: .2em 0 0; } } .bbCodeInlineSpoiler { @blurAmount: 6px; filter: blur(@blurAmount); cursor: pointer; a, span { .has-js & { pointer-events: none; } } .smilie { filter: grayscale(90%); } &:hover { filter: blur((@blurAmount - 1)); } } .bbCodeSpoiler .bbCodeSpoiler-wrapper { background-color: #f5f5f5; } ]]>
</template>
<template title="bb_code_tag_spoiler" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ <xf:css src="bb_code.less" /> <div class="bbCodeSpoiler"> <xf:button class="bbCodeSpoiler-button{{ $title ? ' button--longText' : '' }} bbCodeSpoiler-wrapper" data-xf-click="toggle" data-xf-init="tooltip" title="{{ phrase('click_to_reveal_spoiler') }}"> <span>{{ phrase('spoiler') }}<xf:if is="$title">: <span class="bbCodeSpoiler-button-title">{$title}</span></xf:if></span> </xf:button> <div class="bbCodeSpoiler-content"> <div class="bbCodeBlock bbCodeBlock--spoiler"> <div class="bbCodeBlock-content">{$content}</div> </div> </div> </div> ]]>
</template>
<template title="core.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ########################## GLOBAL BASE SETUP ####################### html { font: @xf-fontSizeNormal / @xf-lineHeightDefault sans-serif; font-family: @xf-fontFamilyUi; font-weight: @xf-fontWeightNormal; color: @xf-textColor; margin: 0; padding: 0; word-wrap: break-word; background-color: @xf-pageBg; /* // just a reminder that we *might* want this at some point -ms-text-size-adjust: none; -webkit-text-size-adjust: none;*/ } button, input, optgroup, select, textarea { font-family: @xf-fontFamilyUi; line-height: @xf-lineHeightDefault; } img { max-width: 100%; height: auto; } b, strong { font-weight: @xf-fontWeightHeavy; } a { .xf-link(); &:hover { .xf-linkHover(); } } 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(); } // 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(); a&:hover { text-decoration: none; color: @xf-chip--color; .xf-chipHover(); } } // ############################# 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; } .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; } .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-fontSizeLargest; 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_reaction.less') }} {{ include('core_smilie.less') }} {{ include('core_bbcode.less') }} {{ include('amazing.less') }} // RESOLUTION OUTPUT .debugResolution { .debugResolution-output:before { content: "Full @{xf-responsiveWide} - @{xf-pageWidthMax}"; @media (min-width: @xf-pageWidthMax) { content: "Max > @{xf-pageWidthMax}"; } @media (max-width: @xf-responsiveWide) { content: "Wide < @{xf-responsiveWide}"; } @media (max-width: @xf-responsiveMedium) { content: "Medium < @{xf-responsiveMedium}"; } @media (max-width: @xf-responsiveNarrow) { content: "Narrow < @{xf-responsiveNarrow}"; } } } ]]>
</template>
<template title="core_action_bar.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![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-action { display: inline-block; padding: 5px 10px; background: whitesmoke; border-radius: @xf-borderRadiusMedium; margin-right: 10px; &:before { .m-faBase(); font-size: 90%; } &.actionBar-action--menuTrigger { display: none; &.is-displayed { display: inline; } &:after { .m-menuGadget(); } &.is-menuOpen { // get rid of text decoration when the menu opens text-decoration: none; } } &.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}", .75em); margin-right: 3px; } &.is-selected { background-color: @xf-contentHighlightBg; border-color: @xf-borderColorHighlight; &:before { content: "@{fa-var-minus}"; } } } &.actionBar-action--postLink { text-decoration: inherit !important; color: inherit !important; } &.actionBar-action--reply:before { .m-faContent("@{fa-var-reply}", 1.125em); margin-right: 3px; } &.actionBar-action--like:before { .m-faContent("@{fa-var-thumbs-up}", 1em); margin-right: 3px; } &.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; } } } @media (max-width: @xf-responsiveNarrow) { .actionBar-action { &.actionBar-action--menuItem { display: none !important; } &.actionBar-action--menuTrigger { display: inline; } } } ]]>
</template>
<template title="core_block.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![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; } } .block { margin-bottom: @xf-elementSpacer; box-shadow: 0px 5px 50px -10px rgba(0, 0, 0, 0.1); &.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 { display: flex; align-items: center; padding: 20px; background: white; border-bottom: 1px solid #f4f4f4; .m-clearFix(); &:empty { display: none; } &.block-outer--after { padding: 20px; border-top: 1px solid #f5f5f5; border-bottom: 0px; } &.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 { margin-left: auto; } .block-outer-middle, .block-row-middle { text-align: center; } .block-container { .xf-contentBase(); .xf-blockBorder(); border-radius: @xf-blockBorderRadius; &.block-container--none { background: none; border: none; color: @xf-textColor; padding: 0; } } @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: 20px 20px; 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: 19px 20px 20px; position: relative; //border-bottom: @xf-borderSizeFeature solid transparent; &:not(.is-readonly):hover { color: @xf-blockTabHeaderSelected--color; background: fade(@xf-blockTabHeaderSelected--color, 10%); } &.is-readonly:hover { cursor: default; } &.tabs-tab--radio.is-readonly:hover { cursor: not-allowed; } } .tabs-tab.is-active, .tabs > input:checked + .tabs-tab--radio { background: none; .xf-blockTabHeaderSelected(); } .tabs > input[type="radio"] { display: none; } .tabs-text { padding: @xf-blockPaddingV @xf-blockPaddingH; border-bottom: @xf-borderSizeFeature solid transparent; } .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(); } } .tabs-text { padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature); border-bottom: @xf-borderSizeFeature solid transparent; } .hScroller-action { .m-hScrollerActionColorVariation( xf-default(@xf-blockMinorTabHeader--background-color, transparent), xf-default(@xf-blockMinorTabHeader--color, ~""), xf-default(@xf-blockMinorTabHeaderSelected--color, ~"") ); } } .block-filterBar { .xf-blockFilterBar(); margin-right: 10px; &.block-filterBar--standalone { padding: @xf-paddingLarge @xf-blockPaddingH; 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% ); } } .filterBar-menuTrigger { margin-right: 0px; background: #f8f8f8; } } .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%; @media (max-width: @xf-formResponsive) { display: inline; text-align: left; min-width: 0; padding-left: 0; } } @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; } .block-body { .m-listPlain(); &.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; + .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: 20px 20px; border-top: 1px solid #f4f4f4; .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--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" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![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: 0px; margin-right: 0px; border-radius: 3px; border-left: 1px; border-right: 1px; } .blockStatus { margin-left: -@xf-pageEdgeSpacer; margin-right: -@xf-pageEdgeSpacer; border-radius: 0; border-right: none; } .blockMessage.blockMessage--none { margin-left: 0; margin-right: 0; } } ]]>
</template>
<template title="core_blocklink.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ############################ BLOCK LINKS ################## .blockLink { display: block; padding: 20px 20px; .xf-blockLink(); &.is-selected { .xf-blockLinkSelected(no-border); padding-left: 20px; } &:hover { .xf-blockLinkSelected(background); text-decoration: inherit; } } .blockLink-desc { display: block; color: @xf-textColorMuted; font-size: @xf-fontSizeSmaller; font-weight: @xf-fontWeightNormal; } .blockLinkSplitToggle { display: flex; padding: 0; text-decoration: none; cursor: pointer; &.is-selected { .xf-blockLinkSelected(no-border); } &:hover { .xf-blockLinkSelected(background); text-decoration: inherit; } } .blockLinkSplitToggle-link { display: block; padding: @xf-blockPaddingV @xf-blockPaddingH; text-decoration: none; flex-grow: 1; &:hover { text-decoration: none; } .blockLinkSplitToggle.is-selected & { border-left: @xf-blockLinkSelected--border-width solid @xf-blockLinkSelected--border-color; padding-left: (@xf-blockPaddingH - xf-default(@xf-blockLinkSelected--border-width, 0)); } } .blockLinkSplitToggle-toggle { display: inline-block; padding: @xf-blockPaddingV @xf-blockPaddingH; text-decoration: none; flex-grow: 0; line-height: 1; &:hover { text-decoration: none; } &:after { .m-faBase(); font-size: 80%; .m-faContent(@fa-var-chevron-down); } &.is-active:after { .m-faContent(@fa-var-chevron-up); } } .blockLink--iconic { i:after { .m-faBase(); display: inline-block; min-width: 1em; position: absolute; left: @xf-blockPaddingH; top: 8px; display: none !important; } &--started i:after { .m-faContent(@fa-var-file-alt); } &--contributed i:after { .m-faContent(@fa-var-comments); } &--watched i:after { .m-faContent(@fa-var-bookmark); } &--unanswered i:after { .m-faContent(@fa-var-question-circle); } } // ################################ FAUX BLOCK LINKS ####################### // concept from https://codepen.io/BPScott/pen/Erwan and http://codepen.io/IschaGast/pen/Qjxpxo // z-indexes are bumped to have the link sit on top of positioned elements (without z-index) .fauxBlockLink { position: relative; a, .fauxBlockLink-link { position: relative; z-index: 2; } .fauxBlockLink-blockLink { position: static; &:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } } &.fauxBlockLink--noHover { .fauxBlockLink-blockLink:hover { text-decoration: none; } } } ]]>
</template>
<template title="core_blockstatus.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ################################## BLOCK STATUS MESSAGES ############################## .blockStatus { .xf-contentAltBase(); .xf-blockBorder(); border-left: 0px solid #fff; border-radius: @xf-blockBorderRadius; margin: 0; padding: 0; font-size: @xf-fontSizeSmall; text-align: left; //.m-transition(border, margin;); // edgeSpacerRemoval > dt { display: none; } &.blockStatus--info { border-left-color: @xf-borderColorFeature; } &.blockStatus--simple { .xf-blockBorder(); } &.blockStatus--standalone { margin-bottom: (@xf-elementSpacer) / 2; } } .blockStatus-message { display: block; padding: 0 @xf-paddingMedium; margin: .2em 0 0; &:first-of-type { margin-top: 0; } &:before { .m-faBase(); display: inline-block; min-width: .8em; color: @xf-textColorAttention; } &--deleted::before { .m-faContent("@{fa-var-trash}\20"); } &--locked::before { .m-faContent("@{fa-var-lock}\20"); } &--moderated::before { .m-faContent("@{fa-var-shield}\20"); } &--warning:before { .m-faContent("@{fa-var-exclamation-triangle}\20"); } &--ignored:before { .m-faContent("@{fa-var-microphone-slash}\20"); } } ]]>
</template>
<template title="core_contentrow.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ########################################### CONTENT ROWS ############################ @_contentRow-faderHeight: 150px; @_contentRow-faderCoverHeight: (@_contentRow-faderHeight) / 2; .contentRow { display: flex; &.contentRow--alignMiddle { } &.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; margin-bottom: 5px; } .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; } .contentRow-fader { position: absolute; top: (@_contentRow-faderHeight) + ((@xf-paddingMedium) * 2) - (@_contentRow-faderCoverHeight); left: 0; right: 0; height: @_contentRow-faderCoverHeight; .m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, transparent, 0%, 80%); } .contentRow-minor { font-size: @xf-fontSizeSmall; color: @xf-textColorMuted; &.contentRow-minor--hideLinks { .m-hiddenLinks(); } &.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_input.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![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; } &.input--flipped { text-align: right; } textarea& { min-height: 0; max-height: 400px; max-height: 75vh; resize: vertical; &.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; } } // 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; } } &.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: 1.7em; } } // Overlay a FontAwesome icon over the start of a text box as a hint to its use // 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--hover: xf-intensify(@controlColor, 25%); .iconicIcon(@setPosition: true) { .m-iconicIcon(@setPosition); } .iconic { display: inline-block; position: relative; max-width: 100%; > input { .m-visuallyHidden(); position: absolute; left: 0; width: auto; height: auto; + i { .m-iconicIcon(); } & + i:after { opacity: 0; } &:disabled + i:before, &[readonly] + i:before { opacity: .3; } &:disabled:checked + i:after, &[readonly]:checked + i:after { opacity: .3; } &:checked { & + i:before { opacity: 0; } & + 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); } } &.iconic--toggle > input[type=checkbox] + i { &:before { .m-faContent(@fa-var-toggle-off, 1em); } &:after { .m-faContent(@fa-var-toggle-on, 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: #bfbfbf; fill: currentColor; } &:hover > i, &:hover svg { color: #7f7f7f; 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%; } } &.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; } } } .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; } &--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%; 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; } &::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--expanded > .inputChoices-choice { margin-bottom: (2 * @_input-elementSpacer); &:last-child { margin-bottom: 0; } } &.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_list.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ##################################### LISTS ################## .pairs { padding: 0; margin: 0; overflow: hidden; &.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: gray; .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(); > dt { float: left; max-width: 100%; margin-right: @xf-paddingMedium; } > dd { float: right; text-align: right; max-width: 100%; } } &.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; margin-right: -20px; margin-bottom: -10px; .pairs.pairs--rows { padding-right: 15px; border-right: 1px solid #f5f5f5; margin-right: 20px; margin-bottom: 10px; } } .listPlain { .m-listPlain(); display: flex; flex-direction: column } .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:nth-last-child(n+2)::after { content: "{$xf.language.comma_separator}"; } } &.listInline--bullet > li + li::before { content: "\00B7\20"; } &.listInline--plus > li + li::before { content: "\002B\20"; } } .listHeap { .m-listPlain(); margin-top: -4px; > li { margin: 0; padding: 0; display: inline-block; margin-right: -1px; margin-top: 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" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ###################################### MENUS ###################### @_menu-arrowSize: 8px; @_menu-edgePadding: @xf-pageEdgeSpacer; @_menu-paddingV: @xf-paddingMedium; @_menu-closePaddingH: @xf-paddingLarge; @_menu-paddingH: @xf-paddingLargest; .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(); position: absolute; z-index: @zIndex-2; margin: @_menu-arrowSize 0 0; min-width: 240px; max-width: 320px; border-radius: 10px; box-shadow: 0px 15px 70px -10px rgba(0, 0, 0, 0.4); &.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-arrow { position: absolute; width: 0; height: 0; border: 0 solid transparent; top: -@_menu-arrowSize; -ltr-rtl-left: 50%; -ltr-rtl-margin-left: -@_menu-arrowSize; .m-triangleUp(white, @_menu-arrowSize); .menu--structural & { top: -@_menu-arrowSize; } .menu--up & { display: none; } } .menu-content { margin: 0; padding: 8px 0; list-style: none; text-align: left; .xf-menu(); border-radius: 10px; // 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: 3px 15px 5px 15px; margin: 0; font-weight: bold; text-decoration: none; .xf-menuHeader(); .m-clearFix(); .m-hiddenLinks(); &.menu-header--small { font-size: @xf-fontSizeNormal; } &.menu-header--sticky { position: sticky; top: 0; } .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(); } } .tabs-text { padding: @xf-blockPaddingV @_menu-paddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature); border-bottom: @xf-borderSizeFeature solid transparent; } .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-paddingV @_menu-paddingH; .m-clearFix(); &.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 @_menu-paddingV (@_menu-paddingH) - (@xf-borderSizeFeature); 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; } } &.is-hidden { display: none; } 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: 5px 15px 3px; .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; } } &.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; } } } .menu .block { margin: 0; .block-container { color: inherit; background: none; border: none; border-radius: 0; > .block-header:first-child { display: none; } } .block-body { border-radius: 0; } } ]]>
</template>
<template title="core_pagenav.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // ####################################### PAGE NAVIGATION ######################## @_page-paddingV: xf-default(@xf-buttonBase--padding-top, 6px); @_page-paddingH: 8px; @_page-paddingHSimple: 10px; .pageNavWrapper {} .m-pageNavElCore() { background: linear-gradient(0deg, @xf-contentHighlightBg, mix(@xf-contentHighlightBg, @xf-contentBg, 25%)); color: @xf-linkColor; .xf-blockBorder(); font-size: @xf-fontSizeSmall; white-space: nowrap; &:hover, &:active { background: xf-intensify(@xf-contentHighlightBg, 3%); text-decoration: none; } } .pageNav-jump { display: inline-block; .m-pageNavElCore(); border-radius: @xf-borderRadiusSmall; padding: @_page-paddingV @_page-paddingH; &.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; } &:first-child { .m-borderLeftRadius(@xf-borderRadiusSmall); } &:last-child { .m-borderRightRadius(@xf-borderRadiusSmall); } > a { display: block; padding: @_page-paddingV @_page-paddingH; text-decoration: none; color: inherit; } &.pageNav-page--current { background: whitesmoke; color: @xf-textColor; border: @xf-borderSize solid white; cursor: pointer; &:hover, &:active { background: xf-intensify(@xf-contentAccentBg, 3%); } + .pageNav-page { border-left: none; } } } // 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; } .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(); &:hover, &:active { background: xf-intensify(@xf-contentAccentBg, 3%); text-decoration: none; } } &.pageNavSimple-el--prev, &.pageNavSimple-el--next { background: linear-gradient(0deg, @xf-contentHighlightBg, mix(@xf-contentHighlightBg, @xf-contentBg, 25%)); color: @xf-linkColor; min-width: 75px; @media (max-width: 350px) { min-width: 0; } &:hover, &:active { background: xf-intensify(@xf-contentHighlightBg, 3%); 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: fade(@xf-linkColor, 60%); &: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 } &.pageNavSimple-el--last i:before { .m-faContent(@fa-var-forward, false, ltr); // 1em .m-faContent(@fa-var-backward, false, rtl); // 1em } &.is-disabled { border-color: transparent; background: none; color: @xf-textColorMuted; text-decoration: none; pointer-events: none; &:hover { background: none; color: @xf-textColorMuted; } } } // #################### DISPLAY VARIANTS ######################### .pageNavWrapper--simple { .pageNav { display: none; } } .pageNavWrapper--full { .pageNavSimple { display: none; } } .pageNavWrapper--mixed { .pageNavSimple { display: none; } @media (max-width: @xf-responsiveMedium) { .pageNav { display: none; } .pageNavSimple { display: inline-flex; } } } // Hide any block page nav that goes before the block as we will be wasting vertical space. @media (max-width: @xf-responsiveNarrow) { .block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow) { display: none; } // this is a sanity check in case .block-outer--after is forgotten .block-container + .block-outer .pageNavWrapper { display: block; } } ]]>
</template>
<template title="core_tab.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![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: gray; 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: 20px 20px 20px; border-bottom: 0 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="editor.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![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: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4 !important; border-radius: 3px !important; } .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; } code { 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; } // quote tag emulation blockquote { .xf-bbCodeBlock(); margin: .5em 0; padding: @xf-paddingMedium @xf-paddingLarge; font-size: @xf-fontSizeSmall; display: flow-root; .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; } } } // 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="extra.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ .structItem-cell--iconEnd { display: none; } /*.inputGroup { .inputGroup-text { background: #f8f8f8 !important; } } .input { padding: 8px 12px; background: #f8f8f8; border-radius: 3px; border: 0px; } */ ]]>
</template>
<template title="forum_overview_wrapper" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ <xf:ad position="forum_overview_top" /> <xf:widgetpos id="forum_overview_top" /> <xf:pageaction> <xf:if is="property('removeBottonPageAction') != 'new-post'"> <xf:if is="$pageSelected == 'new_posts' "> <xf:button href="{{ link('forums/list') }}" icon="list"> {{ phrase('forum_list') }} </xf:button> <xf:else /> <xf:button href="{{ $xf.options.forumsDefaultPage == 'new_posts' ? link('forums/new-posts') : link('whats-new/posts') }}" icon="bolt"> {{ phrase('new_posts') }} </xf:button> </xf:if> </xf:if> <xf:if is="property('removeBottonPageAction') != 'create-thread'"> <xf:if is="$xf.visitor.canCreateThread() OR $xf.visitor.canCreateThreadPreReg()"> <xf:button href="{{ link('forums/create-thread') }}" class="button--cta" icon="write" overlay="true" rel="nofollow"> {{ phrase('post_thread...') }} </xf:button> </xf:if> </xf:if> </xf:pageaction> {$innerContent|raw} <xf:ad position="forum_overview_bottom" /> <xf:widgetpos id="forum_overview_bottom" /> ]]>
</template>
<template title="forum_view" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ <xf:title page="{$page}">{$forum.Node.title}</xf:title> <xf:description>{$forum.Node.description|raw}</xf:description> <xf:css src="structured_list.less" /> <xf:if is="!$forum.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:forums', $forum, $canonicalFilters + {'page': $page}) }}" /> <xf:head option="rss_forum"><link rel="alternate" type="application/rss+xml" title="{{ phrase('rss_feed_for_x', {'title': $forum.title})|for_attr }}" href="{{ link('forums/index.rss', $forum) }}" /></xf:head> <xf:macro template="forum_macros" name="forum_page_options" arg-forum="{$forum}" /> <xf:breadcrumb source="$forum.getBreadcrumbs(false)" /> <xf:pageaction if="$forum.canCreateThread() OR $forum.canCreateThreadPreReg()"> <xf:button href="{{ link('forums/post-thread', $forum) }}" class="button--cta" icon="write" rel="nofollow"> {{ phrase('post_thread') }} </xf:button> </xf:pageaction> <xf:if is="$pendingApproval"> <div class="blockMessage blockMessage--important">{{ phrase('content_submitted_displayed_pending_approval') }}</div> </xf:if> <xf:extension name="above_node_list"></xf:extension> <xf:if is="$nodeTree"> <xf:ad position="forum_view_above_node_list" arg-forum="{$forum}" /> <div class="block"> <div class="block-container"> <div class="block-body"> <xf:macro template="forum_list" name="node_list" arg-children="{$nodeTree}" arg-extras="{$nodeExtras}" arg-depth="2" /> </div> </div> </div> <xf:ad position="forum_view_below_node_list" arg-forum="{$forum}" /> </xf:if> <xf:if is="$canInlineMod"> <xf:js src="xf/inline_mod.js" min="1" /> </xf:if> <xf:extension name="above_thread_list"></xf:extension> <xf:ad position="forum_view_above_thread_list" arg-forum="{$forum}" /> <xf:extension name="thread_list_block_classes" value="" /> <div class="block {{ extension_value('thread_list_block_classes') }}" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="thread" data-href="{{ link('inline-mod') }}"> <div class="block-outer"><xf:trim> <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}" link="forums" data="{$forum}" params="{$filters}" wrapperclass="block-outer-main" /> <xf:extension name="thread_list_header"> <div class="block-filterBar"> <div class="filterBar"> <xf:if contentcheck="true"> <ul class="filterBar-filters"> <xf:contentcheck> <xf:extension name="filters"> <xf:macro name="filters" arg-forum="{$forum}" arg-filters="{$filters}" arg-starterFilter="{$starterFilter}" arg-threadTypeFilter="{$threadTypeFilter}" /> </xf:extension> </xf:contentcheck> </ul> </xf:if> <a class="filterBar-menuTrigger" data-xf-click="menu" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true">{{ phrase('filters') }}</a> <div class="menu menu--wide" data-menu="menu" aria-hidden="true" data-href="{{ link('forums/filters', $forum, $filters) }}" data-load-target=".js-filterMenuBody"> <div class="menu-content"> <h4 class="menu-header">{{ phrase('show_only:') }}</h4> <div class="js-filterMenuBody"> <div class="menu-row">{{ phrase('loading...') }}</div> </div> </div> </div> </div> </div> </xf:extension> <xf:if contentcheck="true"> <div class="block-outer-opposite"> <div class="buttonGroup"> <xf:contentcheck> <xf:if is="$canInlineMod"> <xf:macro template="inline_mod_macros" name="button" /> </xf:if> <xf:if is="$xf.visitor.user_id"> <xf:button href="{{ link('forums/mark-read', $forum, {'date': $xf.time}) }}" class="button--link" overlay="true"> {{ phrase('mark_read') }} </xf:button> </xf:if> <xf:if is="$forum.canWatch()"> <xf:button href="{{ link('forums/watch', $forum) }}" class="button--link" data-xf-click="switch-overlay" data-sk-watch="{{ phrase('watch') }}" data-sk-unwatch="{{ phrase('unwatch') }}"> <xf:if is="{$forum.Watch.{$xf.visitor.user_id}}">{{ phrase('unwatch') }}<xf:else />{{ phrase('watch') }}</xf:if> </xf:button> </xf:if> </xf:contentcheck> </div> </div> </xf:if> </xf:trim></div> <div class="block-container"> <xf:set var="$qtPos">{{ ($sortInfo.order == 'last_post_date' && $sortInfo.direction == 'asc') ? 'bottom' : 'top' }}</xf:set> <div class="block-body"> <xf:extension name="thread_list"> <div class="structItemContainer"> <xf:macro name="{{ $templateOverrides.quick_thread_macro ?: 'thread_list_macros::quick_thread' }}" arg-forum="{$forum}" arg-page="{$page}" arg-order="{$sortInfo.order}" arg-direction="{$sortInfo.direction}" arg-prefixes="{$quickThreadPrefixes}" args="{$templateOverrides.quick_thread_macro_args}" /> <xf:if is="$stickyThreads is not empty OR $threads is not empty"> <xf:if is="$stickyThreads is not empty"> <div class="structItemContainer-group structItemContainer-group--sticky"> <xf:foreach loop="$stickyThreads" value="$thread"> <xf:macro name="{{ $templateOverrides.thread_list_macro ?: 'thread_list_macros::item' }}" arg-thread="{$thread}" arg-forum="{$forum}" args="{$templateOverrides.thread_list_macro_args}" /> </xf:foreach> </div> <div style="height: 3em; background-color: #f8f8f8;"></div> <xf:ad position="forum_view_below_stickies" arg-forum="{$forum}" /> </xf:if> <div class="structItemContainer-group js-threadList"> <xf:if is="$threads is not empty"> <xf:foreach loop="$threads" value="$thread"> <xf:macro name="{{ $templateOverrides.thread_list_macro ?: 'thread_list_macros::item' }}" arg-thread="{$thread}" arg-forum="{$forum}" args="{$templateOverrides.thread_list_macro_args}" /> </xf:foreach> <xf:if is="$showDateLimitDisabler"> <xf:macro name="date_limit_disabler" arg-forum="{$forum}" arg-page="{$page}" arg-filters="{$filters}" /> </xf:if> </xf:if> </div> <xf:elseif is="$filters" /> <div class="structItemContainer-group js-threadList"> <div class="structItem js-emptyThreadList"> <div class="structItem-cell">{{ phrase('there_no_threads_matching_your_filters') }}</div> </div> <xf:if is="$showDateLimitDisabler"> <xf:macro name="date_limit_disabler" arg-forum="{$forum}" arg-page="{$page}" arg-filters="{$filters}" /> </xf:if> </div> <xf:else /> <div class="structItemContainer-group js-threadList"> <xf:if is="$showDateLimitDisabler"> <div class="structItem js-emptyThreadList"> <div class="structItem-cell">{{ phrase('there_no_threads_to_display') }}</div> </div> <xf:macro name="date_limit_disabler" arg-forum="{$forum}" arg-page="{$page}" arg-filters="{$filters}" /> <xf:else /> <div class="structItem js-emptyThreadList"> <div class="structItem-cell">{{ phrase('there_no_threads_in_this_forum') }}</div> </div> </xf:if> </div> </xf:if> </div> </xf:extension> </div> </div> <div class="block-outer block-outer--after"> <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$total}" link="forums" data="{$forum}" params="{$filters}" wrapperclass="block-outer-main" /> <xf:showignored wrapperclass="block-outer-opposite" /> <xf:if is="!$forum.canCreateThread() AND !$forum.canCreateThreadPreReg()"> <div class="block-outer-opposite"> <xf:if is="$xf.visitor.user_id"> <span class="button button--wrap is-disabled"> {{ phrase('no_permission_to_post') }} <!-- this is not interactive so shouldn't be a button element --> </span> <xf:else /> <xf:button href="{{ link('login') }}" class="button--link button--wrap" overlay="true"> {{ phrase('log_in_or_register_to_post') }} </xf:button> </xf:if> </div> </xf:if> </div> </div> <xf:ad position="forum_view_below_thread_list" arg-forum="{$forum}" /> <xf:extension name="below_thread_list"></xf:extension> <xf:widgetpos id="forum_view_sidebar" context-forum="{$forum}" position="sidebar" /> <xf:macro name="filters" arg-forum="!" arg-filters="!" arg-starterFilter="{{ null }}" arg-threadTypeFilter="{{ null }}"> <xf:set var="$dateLimits" value="{{ { '-1': phrase('any_time'), '7': phrase('x_days', {'days': '7'}), '14': phrase('x_days', {'days': '14'}), '30': phrase('x_days', {'days': '30'}), '60': phrase('x_months', {'months': '2'}), '90': phrase('x_months', {'months': '3'}), '182': phrase('x_months', {'months': '6'}), '365': phrase('1_year') } }}" /> <xf:extension name="start"></xf:extension> <xf:extension name="prefix_id"> <xf:if is="$filters.prefix_id"> <li><a href="{{ link('forums', $forum, $filters|replace('prefix_id', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> <span class="filterBar-filterToggle-label">{{ phrase('prefix:') }}</span> {{ prefix_title('thread', $filters.prefix_id) }}</a></li> </xf:if> </xf:extension> <xf:extension name="starter_id"> <xf:if is="$filters.starter_id AND $starterFilter"> <li><a href="{{ link('forums', $forum, $filters|replace('starter_id', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> <span class="filterBar-filterToggle-label">{{ phrase('started_by:') }}</span> {$starterFilter.username}</a></li> </xf:if> </xf:extension> <xf:extension name="thread_type"> <xf:if is="$filters.thread_type && $threadTypeFilter"> <li><a href="{{ link('forums', $forum, $filters|replace('thread_type', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> <span class="filterBar-filterToggle-label">{{ phrase('thread_type_filter:') }}</span> {{ $threadTypeFilter.getTypeTitle() }}</a></li> </xf:if> </xf:extension> <xf:extension name="last_days"> <xf:if is="$filters.last_days AND {$dateLimits.{$filters.last_days}}"> <li><a href="{{ link('forums', $forum, $filters|replace('last_days', null)) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('remove_this_filter')|for_attr }}"> <span class="filterBar-filterToggle-label">{{ phrase('last_updated:') }}</span> {$dateLimits.{$filters.last_days}}</a></li> </xf:if> </xf:extension> <xf:extension name="order"> <xf:if is="$filters.order"> <li><a href="{{ link('forums', $forum, $filters|replace({'order': null, 'direction': null})) }}" class="filterBar-filterToggle" data-xf-init="tooltip" title="{{ phrase('return_to_default_order')|for_attr }}"> <span class="filterBar-filterToggle-label">{{ phrase('sort_by:') }}</span> {{ phrase_dynamic('forum_sort.' . $filters.order) }} <xf:fa icon="{{ $filters.direction == 'asc' ? 'fa-angle-up' : 'fa-angle-down' }}" /> <span class="u-srOnly"><xf:if is="$filters.direction == 'asc'">{{ phrase('ascending') }}<xf:else />{{ phrase('descending') }}</xf:if></span> </a></li> </xf:if> </xf:extension> <xf:extension name="end"></xf:extension> </xf:macro> <xf:macro name="date_limit_disabler" arg-forum="!" arg-page="!" arg-filters="!"> <div class="structItem structItem--note"> <div class="structItem-cell"> <a href="{{ link('forums', $forum, {'page': $page, 'no_date_limit': 1} + $filters) }}"> {{ phrase('show_older_items') }} </a> </div> </div> </xf:macro> ]]>
</template>
<template title="member_tooltip" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ <xf:css src="member_tooltip.less" /> <div class="tooltip-content-inner"> <div class="memberTooltip {{ $user.Profile.banner_date ? 'memberTooltip--withBanner' : '' }}"> <xf:profilebanner user="$user" size="m" class="memberTooltip-header" toggle="memberTooltip--withBanner"> <span class="memberTooltip-avatar"> <xf:avatar user="{$user}" size="s" notooltip="true" /> </span> <div class="memberTooltip-headerInfo"> <xf:if contentcheck="true"> <div class="memberTooltip-headerAction"> <xf:contentcheck> <!--[XF:header_action_start]--> <xf:if contentcheck="true"> <xf:button class="button--link button--small menuTrigger" data-xf-click="menu" aria-label="{{ phrase('more_options') }}" aria-expanded="false" aria-haspopup="true"> <xf:fa icon="fa-cog" /> </xf:button> <div class="menu" data-menu="menu" aria-hidden="true"> <div class="menu-content"> <h3 class="menu-header">{{ phrase('moderator_tools') }}</h3> <xf:contentcheck> <xf:macro template="member_macros" name="moderator_menu_actions" arg-user="{$user}" arg-context="tooltip" /> </xf:contentcheck> </div> </div> </xf:if> <!--[XF:header_action_end]--> </xf:contentcheck> </div> </xf:if> <h4 class="memberTooltip-name"> <span class="memberTooltip-nameWrapper"> <xf:username user="$user" rich="true" notooltip="true" /> </span> <xf:if is="$user.hasViewableUsernameHistory()"> <a class="memberTooltip-nameChangeIndicator" data-xf-click="menu" data-xf-init="tooltip" title="{{ phrase('username_changed')|for_attr }}" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true" aria-label="{{ phrase('username_changed')|for_attr }}"><xf:fa icon="fa-history" /></a> <div class="menu" data-menu="menu" aria-hidden="true" data-href="{{ link('members/username-history', $user, {'menu': 1}) }}" data-load-target=".js-usernameHistoryBody"> <div class="menu-content"> <h3 class="menu-header">{{ phrase('previous_usernames') }}</h3> <div class="js-usernameHistoryBody"> <div class="menu-row"> {{ phrase('loading...') }} </div> </div> </div> </div> </xf:if> </h4> <xf:if contentcheck="true"> <div class="memberTooltip-banners"> <xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck> </div> </xf:if> <div class="memberTooltip-blurbContainer"> <xf:if contentcheck="true"> <div class="memberTooltip-blurb"> <xf:contentcheck> <xf:userblurb user="$user" tag="div" /> </xf:contentcheck> </div> </xf:if> <div class="memberTooltip-blurb"> <dl class="pairs pairs--inline"> <dt>{{ phrase('joined') }}</dt> <dd><xf:date time="$user.register_date" /></dd> </dl> </div> <xf:if contentcheck="true"> <div class="memberTooltip-blurb"> <dl class="pairs pairs--inline"> <dt>{{ phrase('last_seen') }}</dt> <dd dir="auto"> <xf:contentcheck><xf:useractivity user="$user" class="pairs--plainLabel" /></xf:contentcheck> </dd> </dl> </div> </xf:if> </div> </div> </xf:profilebanner> <div class="memberTooltip-info"> <div class="memberTooltip-stats"> <div class="pairJustifier"> <xf:macro template="member_macros" name="member_stat_pairs" arg-user="{$user}" arg-context="tooltip" /> </div> </div> </div> <xf:if contentcheck="true"> <hr class="memberTooltip-separator" /> <div class="memberTooltip-actions"> <xf:contentcheck> <xf:macro template="member_macros" name="member_action_buttons" arg-user="{$user}" arg-context="tooltip" /> </xf:contentcheck> </div> </xf:if> </div> </div> ]]>
</template>
<template title="member_tooltip.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ @_memberTooltip-padding: @xf-paddingMedium; @_memberTooltip-avatarSize: @avatar-m; .memberTooltip-header { display: table; table-layout: fixed; width: 100%; padding: 20px; border-radius: 10px; .xf-memberTooltipHeader(); } .memberTooltip-avatar { display: table-cell; width: 68px; vertical-align: top; } .memberTooltip-headerInfo { display: table-cell; vertical-align: top; } .memberTooltip-name { margin: 0; margin-top: -.15em; padding: 0; font-weight: @xf-fontWeightNormal; line-height: .8 * (@xf-lineHeightDefault); .xf-memberTooltipName(); .m-hiddenLinks(); .memberTooltip-nameChangeIndicator { color: @xf-textColorMuted; font-size: 75%; &:hover { color: @xf-textColorMuted; } } .memberTooltip--withBanner & { .xf-memberTooltipNameBanner(); .memberTooltip-nameChangeIndicator { color: darken(xf-default(@xf-memberTooltipNameBanner--color, white), 20%); &:hover { color: darken(xf-default(@xf-memberTooltipNameBanner--color, white), 20%); } } } } // See XF-197998 @_memberTooltip-textStroke: 0 #000; .memberTooltip-textStroke() { text-shadow: -1px -1px @_memberTooltip-textStroke, 1px -1px @_memberTooltip-textStroke, -1px 1px @_memberTooltip-textStroke, 1px 1px @_memberTooltip-textStroke; } .memberTooltip--withBanner { .memberTooltip-nameWrapper { .username:hover { text-decoration: none; } } .username { .memberTooltip-textStroke(); } .memberTooltip-nameChangeIndicator .fa-history { .memberTooltip-textStroke(); } } .memberTooltip-headerAction { float: right; } .memberTooltip-blurbContainer { .memberTooltip--withBanner & { .xf-memberTooltipBlurbContainerBanner(); .memberTooltip-blurb { &:first-child { margin-top: 0; } .pairs dt, a { color: darken(xf-default(@xf-memberTooltipBlurbContainerBanner--color, white), 20%); } } } } .memberTooltip-banners, .memberTooltip-blurb { margin-top: .25em; } .memberTooltip-blurb { font-size: @xf-fontSizeSmall; } .memberTooltip-stats { font-size: @xf-fontSizeSmall; dl.pairs.pairs--rows > dt { font-size: @xf-fontSizeSmaller; } } .memberTooltip-info, .memberTooltip-actions { padding: 20px; border-top: 1px solid #f5f5f5; } .memberTooltip-separator { margin: -@xf-borderSize @_memberTooltip-padding 0; border: none; border-top: @xf-borderSize solid @xf-borderColorLight; } @media (max-width: @xf-responsiveNarrow) { .memberTooltip-avatar { width: ((@_memberTooltip-padding) * 2 + (@_memberTooltip-avatarSize * 2 / 3)); .avatar { .m-avatarSize(@_memberTooltip-avatarSize * 2 / 3); } } } ]]>
</template>
<template title="message.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ @_message-actionColumnWidth: 40px; @_messageSimple-userColumnWidth: 70px; .message { + .message, &.message--bordered { border-top: @xf-borderSize solid @xf-borderColor; } } .message--conversationMessage, .message--post { border-bottom: 1px solid #f5f5f5 !important; } .message, .block--messages .message { &.is-mod-selected { background: @xf-inlineModHighlightColor; .message-cell--user, .message-cell--vote { background: @xf-inlineModHighlightColor; } .message-userArrow:after { border-right-color: @xf-inlineModHighlightColor; } } } .message-inner { display: flex; & + .message-inner { border-top: @xf-borderSize solid @xf-borderColor; } } .message-cell { display: block; vertical-align: top; padding: @xf-messagePadding; .message--quickReply & { //padding-bottom: 35px; // for the submit row > .formRow:last-child { > dd { padding-bottom: 0; } } } &.message-cell--closer { padding: @xf-messagePaddingSmall; &.message-cell--user { .m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePaddingSmall)); .message--simple & { .m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * (@xf-messagePaddingSmall)); } } &.message-cell--action { .m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePaddingSmall)); } } &.message-cell--user, &.message-cell--action { position: relative; .xf-messageUserBlock(no-border); border-right: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color; min-width: 0; } &.message-cell--vote { position: relative; .xf-messageUserBlock(no-border); border-left: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color; border-right: 0; padding-top: 0; padding-bottom: 0; .message--solution & { background: @xf-successBg; } .solutionIcon { margin-top: @xf-paddingMedium; } } &.message-cell--user { .m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePadding)); .message--simple & { .m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * @xf-messagePaddingSmall); } } &.message-cell--action { .m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePadding)); } &.message-cell--main { flex: 1 1 auto; width: 100%; min-width: 0; &.is-editing { padding: 0; } // should really only happen when editing .block { margin: 0; } .block-container { margin: 0; border: none; } } &.message-cell--alert { font-size: @xf-fontSizeSmall; flex: 1 1 auto; width: 100%; min-width: 0; .xf-contentAccentBase(); a { .xf-contentAccentLink(); } } &.message-cell--extra { .m-fixedWidthFlex(180 + 2 * (@xf-messagePadding)); border-left: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color; background: @xf-contentAltBg; .formRow-explain { margin: @xf-paddingMedium 0 0; .xf-formExplain(); .m-textColoredLinks(); font-size: 80%; } } &.message-cell--header, &.message-cell--solutionHeader { flex: 1 1 auto; width: 100%; min-width: 0; padding: @xf-blockPaddingV @xf-blockPaddingH; margin: 0; } &.message-cell--header { font-weight: @xf-fontWeightNormal; text-decoration: none; .xf-blockHeader(); border-bottom: none; .m-hiddenLinks(); } &.message-cell--solutionHeader { color: @xf-successColor; font-size: @xf-fontSizeLarge; background: @xf-successBg; border-left: @xf-borderSizeFeature solid @xf-successFeatureColor; } } .message-main { height: 100%; display: flex; flex-direction: column; } .message-content { flex: 1 1 auto; // IE11 flex bug min-height: 1px; } .message-footer { margin-top: auto; } .message-expandWrapper { position: relative; overflow: hidden; .m-transition(-xf-height, height); .message-expandContent { max-height: 250px; overflow: hidden; } .message-expandContent--small { max-height: 160px; } &.is-expandable { .message-expandLink { display: block; } } &.is-expanded { .message-expandContent { max-height: none; } .message-expandLink { display: none; } } } .message-column { display: flex; flex-direction: column; align-items: center; } .message-expandLink { display: none; position: absolute; top: 60%; bottom: 0; left: 0; right: 0; cursor: pointer; z-index: @zIndex-1; .m-gradient( fade(@xf-contentBase--background-color, 0%), xf-default(@xf-contentBase--background-color, transparent), transparent, 0%, 70% ); &:empty { cursor: auto; .m-gradient( fade(@xf-contentBase--background-color, 0%), xf-default(@xf-contentBase--background-color, transparent), transparent, 0%, 100% ); } a { position: absolute; bottom: @xf-messagePadding; left: 0; right: 0; text-align: center; font-size: @xf-fontSizeSmall; color: @xf-textColorAttention; text-decoration: none; } } .message-microdata { display: none; } @media (max-width: @xf-messageSingleColumnWidth) { .message:not(.message--forceColumns) { .message-inner { display: block; } .message-cell { display: block; .m-clearFix(); &.message-cell--user { width: auto; border-right: none; border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color; } &.message-cell--vote { width: auto; border-left: none; border-top: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color; .solutionIcon { margin-top: 0; } } &.message-cell--main { padding-left: @xf-messagePadding; } &.message-cell--extra { width: auto; border-left: none; border-top: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color; } } .message-column { flex-direction: row; justify-content: space-evenly; } } .message--simple:not(.message--forceColumns), .message--quickReply:not(.message--forceColumns) { .message-cell.message-cell--user { display: none; } } } // ######################## USER COLUMN ######################### .message-userArrow { position: absolute; top: (@xf-messagePadding) * 2; right: -1px; .m-triangleLeft(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding); &:after { position: absolute; top: -(@xf-messagePadding - 1px); right: -@xf-messagePadding; content: ""; .m-triangleLeft(@xf-contentBg, @xf-messagePadding - 1px); } } .message-avatar { text-align: center; .avatar { vertical-align: bottom; } } .message-avatar-wrapper { position: relative; display: inline-block; vertical-align: bottom; margin-bottom: .5em; .message-avatar-online { position: absolute; // center bottom position left: 50%; margin-left: -.615em; bottom: -.5em; &:before { .m-faBase(); .m-faContent(@fa-var-user-circle, .969em); line-height: 1; font-weight: bold; color: rgb(127, 185, 0); background: @xf-messageUserBlock--background-color; border: @xf-messageUserBlock--background-color solid 2px; border-radius: 50%; display: inline-block; } } } .message-name { font-weight: @xf-fontWeightHeavy; font-size: inherit; text-align: center; margin: 0; } .message-userTitle { font-size: @xf-fontSizeSmaller; font-weight: normal; text-align: center; margin: 0; } .message-userBanner.userBanner { display: block; margin-top: 3px; } .message-userExtras { margin-top: 3px; font-size: @xf-fontSizeSmaller; } .message--deleted { .message-userDetails { display: none; } .message-avatar .avatar { .m-avatarSize(@avatar-s); } } @media (max-width: @xf-messageSingleColumnWidth) { .message:not(.message--forceColumns) { .message-userArrow { top: auto; right: auto; bottom: -1px; left: ((@avatar-s) / 2); border: none; .m-triangleUp(xf-default(@xf-messageUserBlock--border-color, transparent), @xf-messagePadding); &:after { top: auto; right: auto; left: -(@xf-messagePadding - 1px); bottom: -@xf-messagePadding; border: none; .m-triangleUp(@xf-contentBg, @xf-messagePadding - 1px); } } &.is-mod-selected { .message-userArrow:after { border-color: transparent; border-bottom-color: @xf-inlineModHighlightColor; } } .message-user { display: flex; } .message-avatar { margin-bottom: 0; .avatar { .m-avatarSize(@avatar-s); & + .message-avatar-online { left: auto; right: 0; } } } .message-userDetails { flex: 1; min-width: 0; padding-left: @xf-messagePadding; } .message-name { text-align: left; } .message-userTitle, .message-userBanner.userBanner { display: inline-block; text-align: left; margin: 0; } .message-userExtras { display: none; } .message--deleted { .message-userDetails { display: block; } } } } // ####################### MAIN COLUMN #################### .message-content { position: relative; .js-selectToQuoteEnd { height: 0; font-size: 0; overflow: hidden; } .message--multiQuoteList & { min-height: 80px; max-height: 120px; overflow: hidden; .message-body { pointer-events: none; } } } .message-attribution { color: @xf-textColorMuted; font-size: @xf-fontSizeSmaller; padding-bottom: 3px; border-bottom: @xf-borderSize solid @xf-borderColorFaint; .m-clearFix(); &.message-attribution--plain { border-bottom: none; font-size: inherit; padding-bottom: 0; } &.message-attribution--split { display: flex; align-items: flex-end; flex-wrap: wrap; .message-attribution-opposite { margin-left: auto; } } } .message-attribution-main { float: left; } .message-attribution-opposite { float: right; &.message-attribution-opposite--list { display: flex; .m-listPlain(); > li { margin-left: 14px; &:first-child { margin-left: 0; } } } a { color: inherit; &:hover { text-decoration: none; color: @xf-linkHoverColor; } } } .message-attribution-gadget { display: inline-block; margin: -3px -7px; padding: 3px 7px; } .message-attribution-source { font-size: @xf-fontSizeSmaller; margin-bottom: @xf-paddingSmall; } .message-attribution-user { font-weight: @xf-fontWeightHeavy; .avatar { display: none; } .attribution { display: inline; font-size: inherit; font-weight: inherit; margin: 0; } } .message-newIndicator, a.message-newIndicator { .xf-messageNewIndicator(); white-space: nowrap; } a.message-newIndicator:hover { color: @xf-messageNewIndicator--color; } .message-minorHighlight { font-size: @xf-fontSizeSmall; color: @xf-textColorFeature; } .message-fields { margin: @xf-messagePadding 0; .message--simple & { margin-top: @xf-messagePaddingSmall; margin-bottom: @xf-messagePaddingSmall; } &:last-child { margin-bottom: 0; } } .message-body { margin: @xf-messagePadding 0; font-family: @xf-fontFamilyBody; .m-clearFix(); .message--simple & { margin-top: @xf-messagePaddingSmall; margin-bottom: @xf-messagePaddingSmall; } &:last-child { margin-bottom: 0; } .message-title { // basically replicates .structItem-title font-size: @xf-fontSizeLarge; font-weight: @xf-fontWeightNormal; margin: 0 0 @xf-messagePadding 0; padding: 0; } } .message-attachments { margin: .5em 0; } .message-attachments-list { .m-listPlain(); } .message-lastEdit { margin-top: .5em; color: @xf-textColorMuted; font-size: @xf-fontSizeSmallest; text-align: right; } .message-signature { margin-top: 25px; .xf-messageSignature(); } .message-actionBar .actionBar-set { margin-top: @xf-messagePadding; font-size: @xf-fontSizeSmall; .message--simple & { margin-top: @xf-messagePaddingSmall; } } .message .likesBar { margin-top: @xf-messagePadding; padding: @xf-messagePaddingSmall; } .message .reactionsBar { margin-top: 20px; padding: 20px; } .message-historyTarget { margin-top: @xf-messagePadding; } .message-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; .m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, @xf-contentBg, 0%, 90%); } .message-responses { margin-top: @xf-messagePaddingSmall; font-size: @xf-fontSizeSmall; .editorPlaceholder { .input { font-size: inherit; } } } .message-responseRow { margin-top: -@xf-minorBlockContent--border-width; .xf-minorBlockContent(); padding: @xf-messagePaddingSmall; // note that border radiuses are very difficult to do here due to a lot of dynamic showing/hiding &.message-responseRow--likes, &.message-responseRow--reactions { .m-transitionFadeDown(); } } @media (max-width: @xf-messageSingleColumnWidth) { .message:not(.message--forceColumns) { .message-attribution-user .avatar { display: inline-flex; .m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault)); } .message-content { // this is 1px to workaround an IE11 issue - see #139187 min-height: 1px; } } } @media (max-width: @xf-responsiveNarrow) { .message-signature { display: none; } } // MESSAGE MENU .message-menuGroup { display: inline-block; } .message-menuTrigger { display: inline-block; &:after { .m-menuGadget(); // 1em text-align: right; } &:hover:after { color: black; } } .message-menu-section { &--editDelete { .menu-linkRow { font-weight: @xf-fontWeightHeavy; font-size: @xf-fontSizeNormal; } } } .message-menu-link { &--delete i:after { .m-faContent(@fa-var-trash-alt); } &--edit i:after { .m-faContent(@fa-var-edit); } &--report i:after { .m-faContent(@fa-var-frown); } &--warn i:after { .m-faContent(@fa-var-exclamation-triangle); } &--spam i:after { .m-faContent(@fa-var-ban); } &--ip i:after { .m-faContent(@fa-var-sitemap); } &--history i:after { .m-faContent(@fa-var-history); } &--follow i:after { .m-faContent(@fa-var-user-plus); } &--ignore i:after { .m-faContent(@fa-var-user-times); } &--share i:after { .m-faContent(@fa-var-share-alt); } } // ############################# CUSTOM FOR MESSAGE VARIANTS ############## .message-articleUserInfo { .xf-messageUserBlock(no-border); border-top: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color; &:last-child { .m-borderBottomRadius(@block-borderRadius-inner); } .contentRow-figure { width: @xf-messageUserBlockWidth; text-align: center; } .contentRow-main { padding-left: 2 * (@xf-messagePadding); text-align: left; } @media (max-width: @xf-messageSingleColumnWidth) { .contentRow-figure { width: auto; } .contentRow-main { padding-left: @xf-paddingLarge; } } } .message-articleWrittenBy { color: @xf-textColorMuted; font-size: @xf-fontSizeSmall; } .message-articleUserName { font-weight: @xf-fontWeightHeavy; font-size: @xf-fontSizeLarger; margin: 0; display: inline; } .message-articleUserBlurb, .message-articleUserBlurb div { font-size: @xf-fontSizeSmall; display: inline; } .message-articleUserAbout { font-size: @xf-fontSizeSmall; margin: .5em 0; } .message-articleUserBanners .userBanner { margin-bottom: 3px; } .message-articleUserStats { font-size: @xf-fontSizeSmall; color: @xf-textColorMuted; } @media (max-width: @xf-responsiveNarrow) { .message-articleUserStats { display: none; } } // ############################# COMMENTS ############### .comment { } .comment-inner { display: table; table-layout: fixed; width: 100%; } .comment-avatar { display: table-cell; width: 24px; vertical-align: top; .avatar, img { vertical-align: bottom; } } .comment-main { display: table-cell; padding-left: @xf-messagePadding; vertical-align: top; } .comment-contentWrapper { margin-bottom: @xf-messagePaddingSmall; } .comment-user { font-weight: @xf-fontWeightHeavy; } .comment-body { display: inline; } .comment-note { color: @xf-textColorMuted; font-size: @xf-fontSizeSmallest; } .comment-input { display: block; height: 2.34em; margin-bottom: @xf-messagePaddingSmall; } .comment-actionBar .actionBar-set { margin-top: @xf-messagePaddingSmall; color: @xf-textColorMuted; } .comment-likes, .comment-reactions { .m-transitionFadeDown(); margin-top: @xf-messagePaddingSmall; font-size: @xf-fontSizeSmaller; } // ################################## MESSAGE QUICK REPLY ADDITIONS ############# .formSubmitRow.formSubmitRow--messageQr { .formSubmitRow-controls { text-align: center; padding-left: 0; padding-right: 0; margin-left: @xf-messagePadding; margin-right: @xf-messagePadding; @media (max-width: @xf-formResponsive) { text-align: right; } } } // ################################## MESSAGE NOTICES ############################# .messageNotice { margin: @xf-messagePaddingSmall 0; padding: @xf-messagePaddingSmall @xf-messagePadding; .xf-contentAccentBase(); font-size: @xf-fontSizeSmaller; border-left: @xf-borderSizeMinorFeature solid @xf-borderColorAttention; &.messageNotice--nested { border-left-width: @xf-borderSize; } &:not(.messageNotice--highlighted) { a, a:hover { .xf-contentAccentLink(); } } &:before { display: inline-block; .m-faBase(); padding-right: .2em; font-size: 125%; color: @xf-textColorAttention; } &.messageNotice--highlighted { .xf-contentHighlightBase(); border-left-color: @xf-borderColorFeature; &:before { color: @xf-textColorFeature; } } &.messageNotice--deleted:before { .m-faContent(@fa-var-trash-alt); } // , .88em &.messageNotice--moderated:before { .m-faContent(@fa-var-shield); } // , 1em &.messageNotice--warning:before { .m-faContent(@fa-var-exclamation-triangle); } // , 1em &.messageNotice--ignored:before { .m-faContent(@fa-var-microphone-slash); } // , 1.25em } // ##################### MESSAGE VARIANTS/RESPONSIVE ################## @media (min-width: @xf-responsiveEdgeSpacerRemoval) { .block:not(.block--messages) { @{block-noStripSel} > .block-body:first-child > .message:first-child, .block-topRadiusContent.message, .block-topRadiusContent > .message:first-child { .message-inner:first-of-type .message-cell { &:first-child { border-top-left-radius: @block-borderRadius-inner; } &:last-child { border-top-right-radius: @block-borderRadius-inner; } } } @{block-noStripSel} > .block-body:last-child > .message:last-child, .block-bottomRadiusContent.message, .block-bottomRadiusContent > .message:last-child { .message-inner:last-of-type .message-cell { &:first-child { border-bottom-left-radius: @block-borderRadius-inner; } &:last-child { border-bottom-right-radius: @block-borderRadius-inner; } } } } } .block--messages { .block-container { background: none; border: none; } .message, .block-row { .xf-contentBase(); .xf-blockBorder(); border-radius: @xf-blockBorderRadius; + .message, + .block-row { margin-top: 0; } } .block-filterBar { .xf-blockBorder(); border-radius: @xf-blockBorderRadius; margin-bottom: @xf-blockPaddingV; } .message-spacer { + .message, + .block-row { margin-top: @xf-blockPaddingV; } } .message-inner .message-cell { border-radius: 0; } .message-inner:first-of-type .message-cell { &:first-child { border-top-left-radius: @block-borderRadius-inner; } &:last-child { border-top-right-radius: @block-borderRadius-inner; } } .message-inner:last-of-type .message-cell { &:first-child { border-bottom-left-radius: @block-borderRadius-inner; } &:last-child { border-bottom-right-radius: @block-borderRadius-inner; } } @media (max-width: @xf-messageSingleColumnWidth) { .message-inner { .message-cell { border-radius: 0; } &:first-of-type .message-cell:first-child { border-top-left-radius: @block-borderRadius-inner; border-top-right-radius: @block-borderRadius-inner; } &:last-of-type .message-cell:last-child { border-bottom-left-radius: @block-borderRadius-inner; border-bottom-right-radius: @block-borderRadius-inner; } } .message--simple .message-cell--user + .message-cell { border-radius: 0; border-top-left-radius: @block-borderRadius-inner; border-top-right-radius: @block-borderRadius-inner; } } @media (max-width: @xf-responsiveEdgeSpacerRemoval) { .message, .block-row, .block-filterBar { border-left: none; border-right: none; border-radius: 0; } .message .message-inner .message-cell { border-radius: 0; &:first-child, &:last-child { border-radius: 0; } } .message--simple .message-cell--user + .message-cell { border-radius: 0; } } } .message--article { &.is-moderated { background: @xf-contentHighlightBg; } &.is-deleted { opacity: .65; } } // article preview view for thread list .message--articlePreview { display: flex; flex-direction: column; min-width: 0; margin-bottom: @xf-paddingLarge; &:last-child { margin-bottom: 0; } .articlePreview-main { display: flex; flex-direction: column; flex: 1 1 auto; } .articlePreview-image { flex: 0 0 auto; align-self: center; width: 100%; max-width: 750px; background: center / cover @xf-contentAltBg no-repeat; text-decoration: none; &:after { content: ''; display: block; padding-bottom: 75%; } & + .articlePreview-text { .bbImageWrapper, .bbImage { display: none; } } } .articlePreview-text { flex: 1 1 auto; display: flex; min-width: 0; flex-direction: column; padding: @xf-messagePadding; .bbWrapper { .m-fadeOutLines(8, @xf-contentBg); } } .articlePreview-title { margin: 0; font-size: @xf-fontSizeLarge; } .articlePreview-content { flex: 1 1 auto; } .articlePreview-links { text-align: right; padding-top: @xf-blockPaddingV; } .articlePreview-statuses { float: left; display: flex; list-style: none; margin: 0; padding: 0; > li { margin-right: 8px; } .message-newIndicator { font-size: @xf-fontSizeSmall; } } .articlePreview-footer { padding: 0 @xf-blockPaddingH; } .articlePreview-meta { display: flex; align-items: center; border-top: solid 1px @xf-borderColor; padding: @xf-blockPaddingV 0; color: @xf-textColorMuted; font-size: @xf-fontSizeSmall; > li { margin-right: @xf-blockPaddingH; &:last-child { margin-right: 0; } } } .articlePreview-replies { white-space: nowrap; } .articlePreview-by, .articlePreview-repliesLabel { display: none; } } .block--articles.block--messages.block--expanded { .article-title { // from .p-title-value margin: 0 0 5px; font-size: @xf-fontSizeLargest; font-weight: @xf-fontWeightNormal; } .message-snippet-link { margin-top: .5em; text-align: center; } .message + .message { margin-top: @xf-paddingLargest; } } // expanded article grid behavior @supports (display: grid) { @media (min-width: @xf-responsiveMedium) { .block--previews .block-body { display: grid; gap: @xf-paddingLarge; grid-template-rows: auto; grid-template-columns: repeat(2, 1fr); grid-template-areas: "a a"; > .message:first-of-type:last-of-type { grid-area: a; } > .message--articlePreview { margin-bottom: 0; // first five &:nth-of-type(-n+5) { .articlePreview-title { font-size: @xf-fontSizeLarger; } .articlePreview-image { max-width: none; &:after { padding-bottom: 60%; } } .articlePreview-meta { .articlePreview-by { display: block; } } } // first &:first-of-type { grid-area: a; .articlePreview-title { font-size: @xf-fontSizeLargest; } .articlePreview-meta { border-top: none; } .articlePreview-main { flex-direction: row-reverse; } .articlePreview-image { width: 50%; } } } } } // max width multi-columns .m-maxPreviewColumns() { .block--previews .block-body { grid-template-columns: repeat(4, 1fr); grid-template-areas: "a a a a" "b_1 b_1 b_2 b_2" "b_3 b_3 b_4 b_4"; > .message:first-of-type:last-of-type { grid-area: a; } > .message--articlePreview { &:nth-of-type(1) { grid-area: a; } &:nth-of-type(2) { grid-area: b_1; } &:nth-of-type(3) { grid-area: b_2; } &:nth-of-type(4) { grid-area: b_3; } &:nth-of-type(5) { grid-area: b_4; } } } } .p-body-main:not(.p-body-main--withSidebar) { @media (min-width: @xf-responsiveWide) { .m-maxPreviewColumns(); } } .p-body-main--withSidebar { @media (min-width: (@xf-responsiveWide + @xf-sidebarWidth)) { .m-maxPreviewColumns(); } } } ]]>
</template>
<template title="node_list.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ @_nodeList-statsCellBreakpoint: 1000px; .node { margin: 0px 35px; border-bottom: 1px solid #f4f4f4; & + .node { border-top: @xf-borderSize solid @xf-borderColorFaint; } <xf:if is="(property('arp_animationNode'))"> &:hover { transform: scale(1.01); cursor: pointer; } </xf:if> @media (max-width: @xf-responsiveMedium) { margin: 0px; padding: 0px 20px; } } .node-body { display: table; table-layout: fixed; width: 100%; } .node-icon { display: table-cell; vertical-align: middle; text-align: center; width: 45px; i { display: flex; line-height: 1.125; justify-content: center; align-items: center; width: 45px; height: 45px; background: #f9f9f9; border-radius: 60px; font-size: 20px; &:before { .m-faBase(); content: "\f0a1"; color: @xf-nodeIconReadColor; .node--unread & { opacity: 1; color: @xf-nodeIconUnreadColor; } } .node--category &:before { .m-faContent(@fa-var-comments); } .node--search &::before { .m-faContent(@fa-var-search); } .node--page &:before { .m-faContent(@fa-var-file-alt); } .node--link &:before { .m-faContent(@fa-var-link); } } } .node-main { display: table-cell; vertical-align: middle; padding: @xf-paddingLarge; } .node-stats { display: table-cell; width: 140px; vertical-align: middle; text-align: left; padding: @xf-paddingLarge 0; > dl.pairs.pairs--rows { width: 50%; float: left; margin: 0; padding: 0 @xf-paddingMedium/2; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } } &.node-stats--single { width: 100px; > dl.pairs.pairs--rows { width: 100%; float: none; } } &.node-stats--triple { width: 240px; > dl.pairs.pairs--rows { width: 33.333%; } } @media (max-width: @_nodeList-statsCellBreakpoint) { display: none; } } @_nodeExtra-avatarSize: 36px; .node-extra { display: table-cell; vertical-align: middle; width: 280px; padding: @xf-paddingLarge 0px @xf-paddingLarge 40px; font-size: @xf-fontSizeSmall; } .node-extra-row { .m-overflowEllipsis(); color: @xf-textColorMuted; } .node-extra-icon { padding-right: @xf-paddingLarge; float: left; .avatar { .m-avatarSize(@_nodeExtra-avatarSize); } } .node-title { margin: 0; padding: 0; font-size: @xf-fontSizeLarge; font-weight: @xf-fontWeightNormal; .node--unread & { font-weight: @xf-fontWeightHeavy; } } .node-description { font-size: @xf-fontSizeSmall; color: @xf-textColorDimmed; &.node-description--tooltip { .has-js:not(.has-touchevents) & { display: none; } } } .node-meta { font-size: @xf-fontSizeSmall; } .node-statsMeta { display: none; @media (max-width: @_nodeList-statsCellBreakpoint) { display: inline; } } .node-bonus { font-size: @xf-fontSizeSmall; color: @xf-textColorMuted; text-align: right; } .node-subNodesFlat { font-size: @xf-fontSizeSmall; margin-top: .3em; .node-subNodesLabel { display: none; } } .node-subNodeMenu { display: inline; .menuTrigger { color: @xf-textColorMuted; } } @media (max-width: @xf-responsiveMedium) { .node-main { display: block; width: auto; .node--link &, .node--page & { // #168882: we only display the title for these types // so keep these as table-cells for vertical alignment display: table-cell; } } .node-extra { display: flex; flex-direction: column; padding: 0px 20px 30px; margin-top: -15px; } .node-extra-row { display: inline-block; vertical-align: top; max-width: 100%; } .node-extra-icon { display: none; } .node-description, .node-stats, .node-subNodesFlat { display: none; } } @media (max-width: @xf-responsiveNarrow) { .node-subNodeMenu { display: none; } } .subNodeLink { &:before, .subNodeLink-icon { display: inline-block; width: 1.28571429em; margin-right: .3em; text-decoration: none; text-align: center; color: @xf-nodeIconReadColor; } &:before { .m-faBase(); } &:hover:before { &:before, .subNodeLink-icon { text-decoration: none; } } &.subNodeLink--unread { font-weight: @xf-fontWeightHeavy; &:before, .subNodeLink-icon { color: @xf-nodeIconUnreadColor; } } &.subNodeLink--category:before { .m-faContent(@fa-var-comments); } &.subNodeLink--page:before { .m-faContent(@fa-var-file-alt); } &.subNodeLink--link:before { .m-faContent(@fa-var-link); } &.subNodeLink--search::before { .m-faContent(@fa-var-search); } } .node-subNodeFlatList { .m-listPlain(); .m-clearFix(); > li { display: inline-block; margin-right: 1em; &:last-child { margin-right: 0; } } ol, ul, .node-subNodes { display: none; } } .subNodeMenu { .m-listPlain(); ol, ul { .m-listPlain(); } .subNodeLink { display: block; padding: @xf-blockPaddingV @xf-blockPaddingH; text-decoration: none; cursor: pointer; &:hover { text-decoration: none; background: @xf-contentHighlightBg; } } li li .subNodeLink { padding-left: 1.5em; } li li li .subNodeLink { padding-left: 3em; } li li li li .subNodeLink { padding-left: 4.5em; } li li li li li .subNodeLink { padding-left: 6em; } li li li li li li .subNodeLink { padding-left: 7.5em; } } ]]>
</template>
<template title="notices.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ @_notice-darkBg: rgb(20, 20, 20); @_notice-lightBg: #fefefe; @_notice-floatingFade: 80%; @_notice-imageSize: 48px; @_notice-padding: @xf-paddingLarge; .notices { .m-listPlain(); &.notices--block { .notice { margin-bottom: 40px; box-shadow: 0px 5px 50px -10px rgba(0,0,0,0.1) } } &.notices--floating { // assumed to be within u-bottomFixer margin: 0 20px 0 auto; width: 300px; max-width: 100%; z-index: @zIndex-8; @media (max-width: 340px) { margin-right: 10px; } .notice { margin-bottom: 20px; } } &.notices--scrolling { display: flex; align-items: stretch; overflow: hidden; .xf-blockBorder(); margin-bottom: ((@xf-elementSpacer) / 2); &.notices--isMulti { margin-bottom: ((@xf-elementSpacer) / 2) + 20px; } .notice { width: 100%; flex-grow: 0; flex-shrink: 0; border: none; } } } .noticeScrollContainer { margin-bottom: ((@xf-elementSpacer) / 2); .lSSlideWrapper { .xf-blockBorder(); } .notices.notices--scrolling { border: none; margin-bottom: 0; } } .notice { .m-clearFix(); position: relative; .xf-blockBorder(); &.notice--primary { .xf-contentHighlightBase(); } &.notice--accent { .xf-contentAccentBase(); a:not(.button--notice) { .xf-contentAccentLink(); } } &.notice--dark { color: #fefefe; border: none; background: @_notice-darkBg; a:not(.button--notice) { color: rgb(180, 180, 180); } } &.notice--light { color: rgb(20, 20, 20); background: @_notice-lightBg; a:not(.button--notice) { color: rgb(130, 130, 130); } } &.notice--enablePush { display: none; @media (max-width: @xf-responsiveWide) { padding: @xf-paddingSmall @xf-paddingSmall @xf-paddingLarge; font-size: @xf-fontSizeSmall; } } &.notice--cookie { @media (max-width: @xf-responsiveWide) { .notice-content { padding: @xf-paddingSmall @xf-paddingSmall @xf-paddingLarge; font-size: @xf-fontSizeSmaller; .button--notice { font-size: @xf-fontSizeSmaller; padding: @xf-paddingSmall @xf-paddingMedium; .button-text { font-size: @xf-fontSizeSmaller; } } } } } &.notice--cookieAdvanced .notice-content { padding: 1em 0; .u-pageCentered { display: grid; grid-template-columns: 1fr @xf-sidebarWidth; gap: @xf-sidebarSpacer; align-items: end; } @media (max-width: @xf-responsiveMedium) { .u-pageCentered { display: block; } } h2 { margin: 0; } .button { width: 100%; margin: .5em 0; font-weight: bold; } form.is-active { display: contents; grid-column: span 2; .formRow.formRow--fullWidth > dd { padding-left: 0; padding-right: 0; } } form:not(.is-active) { display: none; } } .notices--block & { font-size: @xf-fontSizeNormal; border-radius: @xf-blockBorderRadius; } .notices--floating & { font-size: @xf-fontSizeSmallest; border-radius: @xf-borderRadiusMedium; box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); &.notice--primary { background-color: fade(@xf-contentHighlightBase--background-color, @_notice-floatingFade); } &.notice--accent { background-color: fade(@xf-contentAccentBase--background-color, @_notice-floatingFade); } &.notice--dark { background-color: fade(@_notice-darkBg, @_notice-floatingFade); } &.notice--light { background-color: fade(@_notice-lightBg, @_notice-floatingFade); } .has-js & { display: none; } } &.notice--hasImage { .notice-content { margin-left: ((@_notice-imageSize) + (@_notice-padding) * 2); min-height: ((@_notice-imageSize) + (@_notice-padding) * 2); } } // note: visibility hidden is used by the JS to detect when responsiveness is hiding a notice @media (max-width: @xf-responsiveWide) { &.notice--hidewide:not(.is-vis-processed) { display: none; visibility: hidden; } } @media (max-width: @xf-responsiveMedium) { &.notice--hidemedium:not(.is-vis-processed) { display: none; visibility: hidden; } } @media (max-width: @xf-responsiveNarrow) { &.notice--hidenarrow:not(.is-vis-processed) { display: none; visibility: hidden; } } } .notice-image { float: left; padding: @_notice-padding 0 @_notice-padding @_notice-padding; img { max-width: @_notice-imageSize; max-height: @_notice-imageSize; } } .notice-content { padding: @_notice-padding; a.notice-dismiss { &:before { .m-faBase(); .m-faContent(@fa-var-times, .75em); } float: right; color: inherit; font-size: 16px; line-height: 1; height: 1em; box-sizing: content-box; padding: 0 0 5px 5px; opacity: .5; .m-transition(opacity); cursor: pointer; &:hover { text-decoration: none; opacity: 1; } .notices--floating & { font-size: 14px; } } } ]]>
</template>
<template title="reaction_list_row" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ <xf:if is="$reactionIds"> <xf:macro template="reactions_summary" name="summary" arg-reactionIds="{$reactionIds}" /> </xf:if> <span class="u-srOnly">{{ phrase('reactions:') }}</span> <a class="reactionsBar-link" style='padding-left: 10px;' href="{{ link($link, $content, $linkParams) }}" data-xf-click="overlay" data-cache="false" rel="nofollow">{$reactions}</a> ]]>
</template>
<template title="setup.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ // Note that this file should never output any CSS directly. It should contain variables and mixins only. // Output should go into core.less. // ################################ VARIABLES ############################### // BLOCKS @block-borderRadius-inner: max(@xf-blockBorderRadius - 1px, 0px); @block-noStripSel: ~'.block-container:not(.block-container--noStripRadius)'; // HELPERS @zIndex-1: 1 * (@xf-zIndexMultiplier); @zIndex-2: 2 * (@xf-zIndexMultiplier); @zIndex-3: 3 * (@xf-zIndexMultiplier); @zIndex-4: 4 * (@xf-zIndexMultiplier); @zIndex-5: 5 * (@xf-zIndexMultiplier); @zIndex-6: 6 * (@xf-zIndexMultiplier); @zIndex-7: 7 * (@xf-zIndexMultiplier); @zIndex-8: 8 * (@xf-zIndexMultiplier); @zIndex-9: 9 * (@xf-zIndexMultiplier); // AVATARS @_avatarBaseSize: 96px; @avatar-xxs: (@_avatarBaseSize) / 4; @avatar-xs: (@_avatarBaseSize) / 3; @avatar-s: (@_avatarBaseSize) / 2; @avatar-m: (@_avatarBaseSize); @avatar-l: (@_avatarBaseSize) * 2; @avatar-o: (@_avatarBaseSize) * 4; @rtl: xf-isRtl; @ltr: xf-isLtr; // DEFAULT FONTAWESOME TYPE @faType: 'Pro'; // FONTAWESOME WEIGHT VALUES @faWeight-light: 300; @faWeight-regular: 400; @faWeight-solid: 900; {{ include('setup_fa.less') }} // TABLES @tablePadding: @xf-paddingSmall; // ####################################### MIXINS ################################## .m-clearFix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } .m-hideText() { text-indent: 100%; overflow: hidden; white-space: nowrap; word-wrap: normal; } .m-hyphens(@hyphens: none) { hyphens: @hyphens; -moz-hyphens: @hyphens; -ms-hyphens: @hyphens; -webkit-hyphens: @hyphens; } .m-fadeOutLines(@lines, @bgColor, @lineHeight: @xf-lineHeightDefault) { position: relative; max-height: unit(@lines * @lineHeight, em); overflow: hidden; &:after { content: ''; position: absolute; bottom: 0; right: 0; text-align: right; width: 75%; height: unit(@lineHeight, em); & when(@ltr) { background: linear-gradient(to right, fade(@bgColor, 0%), fade(@bgColor, 100%)); } & when(@rtl) { background: linear-gradient(to left, fade(@bgColor, 0%), fade(@bgColor, 100%)); } } } .m-overflowEllipsis() { overflow: hidden; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis; } .m-appendColon() { &:after { content: "{$xf.language.label_separator}"; } &.is-sentence:after { content: ""; } } .m-tooltipArrow(@color, @size, @variation: ~'', @fillColor: false) { @{variation}.tooltip--top & { bottom: 0; left: 50%; margin-left: -@size; .m-triangleDown(@color, @size); } @{variation}.tooltip--bottom & { top: 0; left: 50%; margin-left: -@size; .m-triangleUp(@color, @size); } @{variation}.tooltip--right & { top: 50%; left: 0; margin-top: -@size; .m-triangleLeft(@color, @size); } @{variation}.tooltip--left & { top: 50%; right: 0; margin-top: -@size; .m-triangleRight(@color, @size); } & when (iscolor(@fillColor)) { @{variation} &:after { position: absolute; content: ''; } @{variation}.tooltip--top &:after { bottom: 1px; left: -@size + 1px; .m-triangleDown(@fillColor, @size - 1px); } @{variation}.tooltip--bottom &:after { top: 1px; left: -@size + 1px; .m-triangleUp(@fillColor, @size - 1px); } @{variation}.tooltip--right &:after { left: 1px; bottom: -@size + 1px; .m-triangleLeft(@fillColor, @size - 1px); } @{variation}.tooltip--left &:after { right: 1px; bottom: -@size + 1px; .m-triangleRight(@fillColor, @size - 1px); } } } .m-triangleUp(@color; @size) { border: @size solid transparent; border-top-width: 0; border-bottom-color: @color; } .m-triangleDown(@color; @size) { border: @size solid transparent; border-bottom-width: 0; border-top-color: @color; } .m-triangleLeft(@color; @size) { border: @size solid transparent; border-left-width: 0; border-right-color: @color; } .m-triangleRight(@color; @size) { border: @size solid transparent; border-right-width: 0; border-left-color: @color; } .m-dropShadow(@x: 1px; @y: 2px; @blur: 2px; @spread: 0; @alpha: 0.25) { box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); } .m-textOutline(@fillColor: white; @strokeColor: black; @width: 1px;) { -webkit-text-fill-color: @fillColor; -webkit-text-stroke-color: @strokeColor; -webkit-text-stroke-width: @width; } .m-gradient(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%) { background: @fallback; background: linear-gradient(to bottom, @startColor @startPos, @stopColor @endPos); } .m-gradientHorizontal(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%) { background: @fallback; & when(@ltr) { background: linear-gradient(to right, @startColor @startPos, @stopColor @endPos); } & when(@rtl) { background: linear-gradient(to left, @startColor @startPos, @stopColor @endPos); } } .m-tabSize(@size: 4) { -moz-tab-size: @size; tab-size: @size; } .m-transition(@props: all; @duration: @xf-animationSpeed; @timing: ease; @delay: 0; @raw-input: false) { // adapted from https://stackoverflow.com/a/20810461 @ScottS .output() when (@raw-input = false) { @propsLength: length(@props); @durationLength: length(@duration); @timingLength: length(@timing); @delayLength: length(@delay); .buildString(@i, @s: ~'') when (@i <= @propsLength) { @prop: extract(@props, @i); .setDuration() when (@i <= @durationLength) { @dur: extract(@duration, @i); } .setDuration() when (@i > @durationLength) { @dur: extract(@duration, @durationLength); } .setDuration(); .setEasing() when (@i <= @timingLength) { @time: extract(@timing, @i); } .setEasing() when (@i > @timingLength) { @time: extract(@timing, @timingLength); } .setEasing(); .setDelay() when (@i <= @delayLength) { @del: extract(@delay, @i); } .setDelay() when (@i > @delayLength) { @del: extract(@delay, @delayLength); } .setDelay(); .setDivider() when (@i > 1) { @divider: ~'@{s},'; } .setDivider() when (@i = 1) { @divider: ~''; } .setDivider(); .buildString((@i + 1), @divider @prop @dur @time); } .buildString(1); .buildString(@i, @s: ~'') when (@i > @propsLength) { .compact(@s); } } .output() when not (@raw-input = false) { .compact(@raw-input); } .compact(@string) { -webkit-transition: @string; //-moz-transition: @string; //-ms-transition: @string; //-o-transition: @string; transition: @string; } .output(); } .m-transitionProperty(@props) { -webkit-transition-property: @props; transition-property: @props; } .m-animation(@props) { -webkit-animation: @props; animation: @props; } .m-transform(@props) { -webkit-transform: @props; -ms-transform: @props; transform: @props; } .m-keyframes(@name, @rules) { @-webkit-keyframes @name { @rules(); } @keyframes @name { @rules(); } } .m-columns(@count; @breakWidth: 0; @gap: 1em) { -moz-column-count: @count; -webkit-column-count: @count; column-count: @count; -moz-column-gap: @gap; -webkit-column-gap: @gap; column-gap: @gap; & when(@breakWidth > 0) { @media (max-width: @breakWidth) { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } } .m-columnBreakAvoid() { -webkit-column-break-inside: avoid; break-inside: avoid-column; page-break-inside: avoid; } .m-borderLeftRadius(@radius) { border-top-left-radius: @radius; border-bottom-left-radius: @radius; } .m-borderRightRadius(@radius) { border-top-right-radius: @radius; border-bottom-right-radius: @radius; } .m-borderTopRadius(@radius) { border-top-left-radius: @radius; border-top-right-radius: @radius; } .m-borderBottomRadius(@radius) { border-bottom-left-radius: @radius; border-bottom-right-radius: @radius; } .m-hiddenLinks() { a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } } } .m-textColoredLinks() { a { color: inherit; text-decoration: underline; } } .m-placeholder(@rules) { &::-webkit-input-placeholder { @rules(); } &::-moz-placeholder { @rules(); } &:-moz-placeholder { @rules(); } &:-ms-input-placeholder { @rules(); } } .m-autoCompleteList(@wide: false) { .m-listPlain(); cursor: default; .xf-menu(); min-width: 180px; & when(@wide = true) { min-width: 250px; } max-width: 95%; border: @xf-borderSize solid @xf-borderColor; .m-dropShadow(0, 3px, 5px, 0, .3); li { padding: @xf-paddingMedium; line-height: 24px; .m-clearFix(); &.is-selected { background: @xf-contentHighlightBg; } .autoCompleteList-icon { float: left; margin-right: @xf-paddingMedium; width: 24px; height: 24px; } } } .m-listPlain() { list-style: none; margin: 0; padding: 0; } // makes direct children display: inline-block, removing white-space between elements (mostly used on ul > li) .m-inlineBlocks(@fontSize: @xf-fontSizeNormal) { font-size: 0; > * { display: inline-block; font-size: @fontSize; } } .m-tabsTogether(@fontSize: @xf-fontSizeNormal) { font-size: 0; .tabs-tab, .tabs-text, .tabs-extra, .hScroller-action { font-size: @fontSize; } } .m-hiddenEl(@transition: true) { display: none; &.is-active { display: block; } & when(@transition = true) { .m-transitionFadeDown(); } } .m-transitionFade(@speed: @xf-animationSpeed) { display: none; opacity: 0; .m-transition(all, -xf-opacity; @speed); &.is-active { display: block; opacity: 1; } &.is-transitioning { display: block; } } .m-transitionFadeDown(@speed: @xf-animationSpeed) { .m-transitionFade(@speed); overflow-y: hidden; height: 0; .m-transitionProperty(all, -xf-height;); &.is-active { height: auto; overflow-y: visible; } &.is-transitioning { overflow-y: hidden; } } .m-visuallyHidden() { position: absolute; height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; } .m-faBase(@type: @faType; @weight: @xf-fontAwesomeWeight) { .m-defaultFaWeight() when (@type = 'Brands') { @weight: @faWeight-regular; } // else use given @weight .m-defaultFaWeight(); font-family: 'Font Awesome 5 @{type}'; font-size: inherit; font-style: normal; font-weight: @weight; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .m-faContent(@content, @width: false, @direction: false) { & when (@direction = false) { content: @content; } & when (@direction = ltr) { -ltr-content: @content; } & when (@direction = rtl) { -rtl-content: @content; } & when (isnumber(@width)) { width: @width; } & when (@width = false) { width: 1.28571429em; } display: inline-block; text-align: center; } .m-faBefore(@icon, @width: false) { &:before { .m-faContent(@icon, @width); } } .m-faAfter(@icon, @width: false) { &:after { .m-faContent(@icon, @width); } } .m-iconicIcon(@setPosition: true) { display: inline-block; min-width: 1em; height: .9em;// prevents some zoom-related issues -ltr-rtl-text-align: left; &:before, &:after { .m-faBase('Pro'; inherit); //.m-transition(opacity, color; @xf-animationSpeed, @xf-animationSpeed / 2); position: absolute; & when (@setPosition = true) { left: 0; top: 0; } opacity: 1; } } .m-menuGadget(@separate: false, @faWidth: 1.2em, @faWeight: @faWeight-solid) { .m-faBase(); .m-faContent("@{fa-var-caret-down}", @faWidth); font-weight: @faWeight; & when (@separate = true) { margin-left: .2em; } & when (isnumber(@separate)) { margin-left: @separate; } unicode-bidi: isolate; // this is needed to ensure correct positioning in RTL with LTR text } .m-content(@content, @direction: false, @separateDirection: false, @separateWidth: false) { & when (@direction = false) { content: @content; } & when (@direction = ltr) { -ltr-content: @content; } & when (@direction = rtl) { -rtl-content: @content; } & when (@separateDirection = left) { & when (isnumber(@separateWidth)) { margin-right: @separateWidth; } & when not(isnumber(@separateWidth)) { margin-right: .2em; } } & when (@separateDirection = right) { & when (isnumber(@separateWidth)) { margin-left: @separateWidth; } & when not(isnumber(@separateWidth)) { margin-left: .2em; } } } .m-buttonIcon(@icon, @width: false) { & > .button-text { .m-faBefore(@icon, @width); } } .m-avatarSize(@avatarSize) { width: @avatarSize; height: @avatarSize; font-size: round((@avatarSize) * (@xf-avatarDynamicTextPercent / 100)); } .m-buttonBase() { display: inline-block; // maintain this just in case for old browsers display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; border: @xf-borderSize solid transparent; white-space: nowrap; .m-transition(background-color border-color color, (@xf-animationSpeed / 2)); .xf-buttonBase(); } .m-buttonColorVariation(@bgColor; @textColor) { color: @textColor; background-color: @bgColor; .m-buttonBorderColorVariation(@bgColor); &:hover, &:active, &:focus { background-color: xf-intensify(@bgColor, 8%); } } .m-buttonBlockColorVariationSimple(@color) { .m-buttonBorderColorVariation(@color); &:not(.button--splitTrigger), &.button--splitTrigger > .button-text, &.button--splitTrigger > .button-menu { &:hover, &:focus, &:active { background-color: xf-intensify(@color, 8%); } } } .m-buttonBorderColorVariation(@borderColor) { border-color: xf-diminish(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-diminish(@borderColor, 5%); &.button--splitTrigger { > .button-text { border-right-color: xf-intensify(@borderColor, 5%); } > .button-menu { border-left-color: xf-diminish(@borderColor, 5%); } } } // this will be replaced by the CSS renderer with the correct background-image rule .m-selectGadgetColor(@color: black) { -xf-select-gadget: @color; } .m-hScrollerActionColorVariation(@background, @text, @textHover) { color: @text; &:hover { color: @textHover; } &.hScroller-action--start { .m-gradientHorizontal(@background, fade(@background, 0%), @background, 66%, 100%); } &.hScroller-action--end { .m-gradientHorizontal(fade(@background, 0%), @background, @background, 0%, 33%); } } // Fix for iOS zoom on input focus. .m-inputZoomFix() { @media (max-width: 568px) { font-size: 16px; } } .m-checkboxAligner() { vertical-align: -2px; } .m-highResolution(@rules) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) { @rules(); } } .m-fixedWidthFlex(@width) { flex: 0 0 @width; } .m-labelVariation(@color; @bg; @border: false) { color: @color; background: @bg; border-color: xf-intensify(@bg, 10%); & when (iscolor(@border)) { border-color: @border; } a&:hover, a:hover & { background: xf-intensify(@bg, 4%); border-color: xf-intensify(@bg, 14%); & when (iscolor(@border)) { border-color: xf-intensify(@border, 4%); } } } .m-tableBase() { > table { border: none; border-collapse: collapse; empty-cells: show; max-width: 100%; > thead, > tbody { > tr { > th { background: @xf-paletteColor1; border: @xf-borderSize solid @xf-borderColor; border-bottom-color: @xf-borderColorFeature; border-bottom-width: @xf-borderSizeMinorFeature; padding: @tablePadding; } > td { background: @xf-contentBg; border: @xf-borderSize solid @xf-borderColor; padding: @tablePadding; } } } } } .m-backdropFilter(@filter, @filterBg: none, @fallbackBg: none) { @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { --backdrop-filter: @filter; -webkit-backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter); & when not (@filterBg = none) { background: @filterBg; } } @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { & when (@fallbackBg = none) { background: @filterBg; } & when not (@fallbackBg = none) { background: @fallbackBg; } } } .m-blockAligner() { // we want this to still be a block element but to inherit the alignment a user has set - this approximates that [style="text-align: center"] & { margin-left: auto; margin-right: auto; } [style="text-align: left"] & { -ltr-rtl-margin-left: 0; -ltr-rtl-margin-right: auto; } [style="text-align: right"] & { -ltr-rtl-margin-left: auto; -ltr-rtl-margin-right: 0; } } // STICKY HEADER STUFF // Note that to access the height and offset, you need to call the mixin and use the variables locally. @header-navHeight: 2 * (@xf-publicNavPaddingV) + (xf-default(@xf-publicNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault)); @header-subNavHeight: 2 * (@xf-publicSubNavPaddingV) + (xf-default(@xf-publicSubNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault)) + xf-default(@xf-publicSubNav--border-top-width, 0) + xf-default(@xf-publicSubNav--border-bottom-width, 0); .m-stickyHeaderConfig(@type) { @_stickyHeader-offset: 10px; @_stickyHeader-height: 0; } .m-stickyHeaderConfig(@type) when(@type = primary) { @_stickyHeader-height: @header-navHeight; } .m-stickyHeaderConfig(@type) when(@type = all) { @_stickyHeader-height: @header-navHeight + @header-subNavHeight; } .m-loadingSpinner() { .is-loading & { opacity: 1; .fa--xf { animation-name: spin; } } .fa--xf { position: absolute; left: ~"calc(50% - 0.5em)"; top: ~"calc(50% - 0.5em)"; animation-duration: 1000ms; animation-iteration-count: infinite; } } {{ include('setup_custom.less') }} ]]>
</template>
<template title="structured_list.less" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ @_structItem-avatarSize: 36px; @_structItem-avatarSizeExpanded: 48px; @_structItem-avatarSizeEnd: @avatar-xxs; @_structItem-cellPaddingH: ((@xf-paddingMedium) + (@xf-paddingLarge)) / 2; // average @_structItem-cellPaddingV: @xf-paddingLarge; .structItemContainer { border-collapse: collapse; list-style: none; margin: 0; padding: 0; width: 100%; } .structItemContainer-group { border-bottom: 1px solid #f4f4f4; &:last-child { border: none; } } .structItemContainer > .structItem:first-child, .structItemContainer > .structItemContainer-group:first-child > .structItem:first-child { border-top: none; } .structItem { display: table; table-layout: fixed; border-collapse: collapse; border-top: @xf-borderSize solid @xf-borderColorFaint; list-style: none; margin: 0; padding: 0; width: 100%; border-bottom: 1px solid #f4f4f4; &:last-child { border: none; } &.is-highlighted, &.is-moderated { background: @xf-contentHighlightBg; } &.is-deleted { opacity: .7; .structItem-title > * { text-decoration: line-through; } } &.is-mod-selected { background: @xf-inlineModHighlightColor; opacity: 1; } } .structItem-cell { display: table-cell; vertical-align: top; padding: @_structItem-cellPaddingV @_structItem-cellPaddingV; border-right: 1px solid #f4f4f4; .structItem--middle & { vertical-align: middle; } &.structItem-cell--vote { width: (40px + (@_structItem-cellPaddingH) * 2); } &.structItem-cell--icon { width: 76px; position: relative; &.structItem-cell--iconExpanded { width: ((@_structItem-avatarSizeExpanded) + (@_structItem-cellPaddingH) * 2); } &.structItem-cell--iconEnd { width: ((@_structItem-avatarSizeEnd) + (@_structItem-cellPaddingH) * 2); padding-left: @_structItem-cellPaddingH / 2; .structItem-iconContainer { padding-top: @xf-paddingMedium; } } &.structItem-cell--iconFixedSmall { width: (60px + (@_structItem-cellPaddingH) * 2); } &.structItem-cell--iconFixedSmallest { width: ((@_structItem-avatarSizeEnd) + (@_structItem-cellPaddingH) * 2); } .solutionIcon { padding-left: 0; padding-right: 0; } } &.structItem-cell--meta { width: 180px; } &.structItem-cell--latest { width: 190px; text-align: right; } } .structItem-iconContainer { position: relative; img { display: block; width: 100%; } .avatar { width: 36px; height: 36px; font-size: 22px; &.avatar--xxs { .m-avatarSize(@_structItem-avatarSizeEnd); } } .structItem-secondaryIcon { position: absolute; right: -5px; bottom: -5px; .m-avatarSize(@_structItem-avatarSize / 2 + 2px); } .structItem-cell--iconExpanded & { .avatar { .m-avatarSize(@_structItem-avatarSizeExpanded); } .structItem-secondaryIcon { .m-avatarSize(@_structItem-avatarSizeExpanded / 2 - 2px); } } } .structItem-title { font-size: @xf-fontSizeLarge; font-weight: @xf-fontWeightNormal; margin: 0; padding: 0; .label { font-weight: @xf-fontWeightNormal; } .is-unread & { font-weight: @xf-fontWeightHeavy; } } .structItem-minor { font-size: @xf-fontSizeSmaller; color: @xf-textColorMuted; .m-hiddenLinks(); } .structItem-parts { .m-listPlain(); display: inline; > li { display: inline; margin: 0; padding: 0; &:nth-child(even) { color: @xf-textColorDimmed; } &:before { content: "\00B7\20"; } &:first-child:before { content: ""; display: none; } } } .structItem-pageJump { margin-left: 8px; font-size: @xf-fontSizeSmallest; a { .xf-chip(); text-decoration: none; border-radius: @xf-borderRadiusSmall; padding: 0 3px; opacity: .5; .m-transition(); .structItem:hover &, .has-touchevents & { opacity: 1; } &:hover { text-decoration: none; .xf-chipHover(); } } } .structItem-statuses, .structItem-extraInfo { .m-listPlain(); float: right; > li { float: left; margin-left: 8px; } input[type=checkbox] { .m-checkboxAligner(); } } .structItem-statuses .reactionSummary { vertical-align: -2px; } .structItem-extraInfo .reactionSummary { vertical-align: middle; } .structItem-status { &::before { .m-faBase(); display: inline-block; font-size: 90%; color: @xf-textColorMuted; } &--deleted::before { .m-faContent(@fa-var-trash-alt, .875em); } &--locked::before { .m-faContent(@fa-var-lock, .875em); } &--moderated::before { .m-faContent(@fa-var-shield, 1em); color: @xf-textColorAttention; } &--redirect::before { .m-faContent(@fa-var-external-link, 1em); } &--starred::before { .m-faContent(@fa-var-star, 1.125em); color: @xf-starFullColor; } &--sticky::before { .m-faContent(@fa-var-thumbtack, .75em); } &--watched::before { .m-faContent(@fa-var-bell, .875em); } &--solved::before { .m-faContent(@fa-var-check-circle, 1em); color: @xf-votePositiveColor; } &--attention::before { .m-faContent(@fa-var-bullhorn, 1.125em); color: @xf-textColorAttention; } &--upvoted::before { .m-faContent(@fa-var-thumbs-up, 1em); } &--downvoted::before { .m-faContent(@fa-var-thumbs-down, 1em); } } .structItem.structItem--note { .xf-contentHighlightBase(); color: @xf-textColorFeature; .structItem-cell { padding-top: @_structItem-cellPaddingV / 2; padding-bottom: @_structItem-cellPaddingV / 2; font-size: @xf-fontSizeSmaller; text-align: center; } } @media (max-width: @xf-responsiveWide) { .structItem-cell { vertical-align: top; &.structItem-cell--meta { width: 115px; font-size: @xf-fontSizeSmaller; } &.structItem-cell--latest { width: 140px; font-size: @xf-fontSizeSmaller; } } } @media (max-width: @xf-responsiveMedium) { .structItem-cell { //padding: (@_structItem-cellPaddingV) / 2 @_structItem-cellPaddingH; &.structItem-cell--icon { .structItem-cell + & { padding-left: 0; width: ((@_structItem-avatarSize) + (@_structItem-cellPaddingH)); } } &.structItem-cell--main, &.structItem-cell--newThread { display: block; padding-bottom: .2em; .structItem-cell + & { padding-left: 0; } } &.structItem-cell--meta { display: block; width: auto; float: left; padding-top: 0; padding-left: 0; padding-right: 0; color: @xf-textColorMuted; .structItem-minor { display: none; } .pairs { > dt, > dd { display: inline; float: none; margin: 0; } } } &.structItem-cell--latest { display: block; width: auto; float: left; padding-top: 0; padding-left: 0; &:before { content: "\00A0\00B7\20"; color: @xf-textColorMuted; } a { color: @xf-textColorMuted; } .structItem-minor { display: none; } } &.structItem-cell--iconEnd { display: none; } } .structItem-pageJump, .structItem-extraInfoMinor { display: none; } .is-unread .structItem-latestDate { font-weight: @xf-fontWeightNormal; } } @media (max-width: @xf-responsiveNarrow) { .structItem-parts { .structItem-startDate { display: none; } } .structItem.structItem--quickCreate { .structItem-cell--icon, .structItem-cell--vote { display: none; } .structItem-cell--newThread { padding-left: @_structItem-cellPaddingH; padding-bottom: @_structItem-cellPaddingH; } } } ]]>
</template>
<template title="thread_view" type="public" addon_id="XF" version_id="2021570" version_string="2.2.15">
<![CDATA[ <xf:title page="{$page}">{{ prefix('thread', $thread, 'escaped') }}{$thread.title}</xf:title> <xf:h1>{{ prefix('thread', $thread) }}{$thread.title}</xf:h1> <xf:if is="!$thread.isSearchEngineIndexable()"> <xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head> </xf:if> <xf:description meta="false"> <ul class="listInline listInline--bullet"> <li> <xf:fa icon="fa-user" title="{{ phrase('thread_starter')|for_attr }}" /> <span class="u-srOnly">{{ phrase('thread_starter') }}</span> <xf:username user="{$thread.User}" defaultname="{$thread.username}" class="u-concealed" /> </li> <li> <xf:fa icon="fa-clock" title="{{ phrase('start_date')|for_attr }}" /> <span class="u-srOnly">{{ phrase('start_date') }}</span> <a href="{{ link('threads', $thread) }}" class="u-concealed"><xf:date time="{$thread.post_date}" /></a> </li> <xf:if is="$xf.options.enableTagging AND ($thread.canEditTags() OR $thread.tags)"> <li> <xf:macro template="tag_macros" name="list" arg-tags="{$thread.tags}" arg-tagList="tagList--thread-{$thread.thread_id}" arg-editLink="{{ $thread.canEditTags() ? link('threads/tags', $thread) : '' }}" /> </li> </xf:if> </ul> </xf:description> <xf:set var="$fpSnippet" value="{{ snippet($firstPost.message, 0, {'stripBbCode': true}) }}" /> <xf:macro template="metadata_macros" name="metadata" arg-description="{$fpSnippet}" arg-shareUrl="{{ link('canonical:threads', $thread) }}" arg-canonicalUrl="{{ link('canonical:threads', $thread, {'page': $page}) }}" /> <xf:page option="ldJsonHtml"> <xf:extension name="structured_data_extra_params" value="{{ [] }}" /> <xf:extension name="structured_data"> <xf:set var="$ldJson" value="{{ $thread.getLdStructuredData($firstPost, $page, extension_value('structured_data_extra_params')) }}" /> <xf:if is="$ldJson"> <script type="application/ld+json"> {$ldJson|json(true)|raw} </script> </xf:if> </xf:extension> </xf:page> <xf:extension name="content_top"></xf:extension> <!--[XF:content_top]--> <xf:if is="$pendingApproval"> <div class="blockMessage blockMessage--important">{{ phrase('content_submitted_displayed_pending_approval') }}</div> </xf:if> <xf:if is="$thread.prefix_id"> <xf:if contentcheck="true"> <div class="blockMessage blockMessage--alt blockMessage--small blockMessage--close"> <xf:contentcheck>{{ prefix_description('thread', $thread.prefix_id) }}</xf:contentcheck> </div> </xf:if> </xf:if> <xf:macro template="forum_macros" name="forum_page_options" arg-forum="{$forum}" arg-thread="{$thread}" /> <xf:breadcrumb source="$forum.getBreadcrumbs()" /> <xf:if is="$canInlineMod OR $thread.canUseInlineModeration()"> <xf:js src="xf/inline_mod.js" min="1" /> </xf:if> <xf:extension name="above_messages"></xf:extension> <xf:ad position="thread_view_above_messages" arg-thread="{$thread}" /> <xf:widgetpos id="thread_view_above_messages" context-thread="{$thread}" /> <xf:set var="$threadActionsHtml"> <xf:extension name="thread_actions"> <xf:if contentcheck="true"> <xf:if is="!$isFirstPostPinned"> <xf:macro name="thread_status" arg-thread="{$thread}" arg-wrapperClass="block-outer-status" /> </xf:if> <div class="block-outer-opposite"> <div class="buttonGroup"> <xf:contentcheck> <xf:extension name="thread_action_buttons"> <xf:if is="$canInlineMod"> <xf:macro template="inline_mod_macros" name="button" /> </xf:if> <xf:if is="$thread.discussion_state == 'deleted' AND $thread.canUndelete()"> <xf:button href="{{ link('threads/undelete', $thread) }}" class="button--link" overlay="true"> {{ phrase('undelete') }} </xf:button> </xf:if> <xf:if is="$thread.canApproveUnapprove() AND $thread.discussion_state == 'moderated'"> <xf:button href="{{ link('threads/approve', $thread) }}" class="button--link" overlay="true"> {{ phrase('approve') }} </xf:button> </xf:if> <xf:if is="$xf.visitor.user_id AND $thread.isUnread()"> <xf:button href="{{ ($firstUnread AND $isSimpleDateDisplay) ? ('#post-' . $firstUnread.post_id) : link('threads/unread', $thread, {'new': 1}) }}" class="button--link" data-xf-click="scroll-to" data-silent="true"> {{ phrase('jump_to_new') }} </xf:button> </xf:if> <xf:if is="$thread.canWatch()"> <xf:button href="{{ link('threads/watch', $thread) }}" class="button--link" data-xf-click="switch-overlay" data-sk-watch="{{ phrase('watch') }}" data-sk-unwatch="{{ phrase('unwatch') }}"> <xf:if is="{$thread.Watch.{$xf.visitor.user_id}}"> {{ phrase('unwatch') }} <xf:else /> {{ phrase('watch') }} </xf:if> </xf:button> </xf:if> <xf:if contentcheck="true"> <div class="buttonGroup-buttonWrapper"> <xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true" title="{{ phrase('more_options') }}">&#8226;&#8226;&#8226;</xf:button> <div class="menu" data-menu="menu" aria-hidden="true"> <div class="menu-content"> <h4 class="menu-header">{{ phrase('more_options') }}</h4> <xf:contentcheck> <!--[XF:thread_tools_menu:top]--> <xf:if is="$thread.canEdit()"> <a href="{{ link('threads/edit', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('edit_thread') }}</a> </xf:if> <xf:if is="$thread.canChangeType() AND count($creatableThreadTypes) > 1"> <a href="{{ link('threads/change-type', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('change_thread_type') }}</a> </xf:if> <xf:if is="$thread.canLockUnlock()"> <a href="{{ link('threads/quick-close', $thread) }}" class="menu-linkRow" data-xf-click="switch" data-menu-closer="true"> <xf:if is="$thread.discussion_open"> {{ phrase('lock_thread') }} <xf:else /> {{ phrase('unlock_thread') }} </xf:if> </a> </xf:if> <xf:if is="$thread.canStickUnstick()"> <a href="{{ link('threads/quick-stick', $thread) }}" class="menu-linkRow" data-xf-click="switch" data-menu-closer="true"> <xf:if is="$thread.sticky"> {{ phrase('unstick_thread') }} <xf:else /> {{ phrase('stick_thread') }} </xf:if> </a> </xf:if> <xf:if is="$thread.canCreatePoll()"> <a href="{{ link('threads/poll/create', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('create_poll') }}</a> </xf:if> <xf:if is="$thread.canDelete('soft')"> <a href="{{ link('threads/delete', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('delete_thread') }}</a> </xf:if> <xf:if is="$thread.canMove()"> <a href="{{ link('threads/move', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('move_thread') }}</a> </xf:if> <xf:if is="$thread.canReplyBan()"> <a href="{{ link('threads/reply-bans', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('manage_reply_bans') }}</a> </xf:if> <xf:if is="$thread.canViewModeratorLogs()"> <a href="{{ link('threads/moderator-actions', $thread) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('moderator_actions') }}</a> </xf:if> <!--[XF:thread_tools_menu:before_footer]--> <xf:if is="$thread.canUseInlineModeration()"> <div class="menu-footer" data-xf-init="inline-mod" data-type="thread" data-href="{{ link('inline-mod') }}" data-toggle=".js-threadInlineModToggle"> <xf:checkbox> <xf:option class="js-threadInlineModToggle" value="{$thread.thread_id}">{{ phrase('select_for_moderation') }}</xf:option> </xf:checkbox> </div> </xf:if> <!--[XF:thread_tools_menu:bottom]--> </xf:contentcheck> </div> </div> </div> </xf:if> </xf:extension> </xf:contentcheck> </div> </div> </xf:if> </xf:extension> </xf:set> <xf:set var="$postSortFilterHtml"> <xf:extension name="post_sort_filter"> <xf:if is="($posts is not empty OR $filters)"> <xf:if contentcheck="true"> <div class="tabs tabs--standalone tabs--standalone--small tabs--standalone--inline"> <xf:contentcheck> <xf:if is="$availableSorts AND count($availableSorts) > 1"> <xf:foreach loop="$availableSorts" key="$sortKey" value="$null"> <a href="{{ link('threads', $thread, $pageNavFilters|replace({'order': $sortKey == $defaultOrder ? null : $sortKey})) }}" class="tabs-tab {{ $sortKey == $effectiveOrder ? 'is-active' : '' }}" rel="nofollow"> {{ phrase_dynamic('thread_sort.' . $sortKey) }} </a> </xf:foreach> </xf:if> <xf:extension name="post_sort_filter_end"></xf:extension> </xf:contentcheck> </div> </xf:if> </xf:if> </xf:extension> </xf:set> <xf:if is="$isFirstPostPinned"> <xf:extension name="pinned_block_before"></xf:extension> <xf:extension name="pinned_block_classes" value="" /> <div class="block block--messages {{ extension_value('pinned_block_classes') }}" data-xf-init="lightbox{{ $xf.options.selectQuotable ? ' select-to-quote' : '' }}" data-message-selector=".js-post" data-lb-id="thread-{$thread.thread_id}"> <xf:extension name="pinned_outer_before"> <div class="block-outer"><xf:trim> <xf:macro name="thread_status" arg-thread="{$thread}" arg-wrapperClass="block-outer" /> {$threadActionsHtml} </xf:trim></div> <xf:macro name="thread_custom_fields_status" arg-thread="{$thread}" arg-forum="{$forum}" arg-wrapperClass="block-outer" /> </xf:extension> <div class="block-container"> <div class="block-body"> <xf:extension name="pinned_body"> <xf:macro name="{{ $templateOverrides.pinned_first_post_macro ?: 'post_macros::post' }}" arg-post="{$pinnedPost}" arg-thread="{$thread}" arg-highlightedPosts="{$highlightedPosts}" args="{$templateOverrides.pinned_first_post_macro_args}" /> </xf:extension> </div> </div> <xf:extension name="pinned_outer_after"></xf:extension> </div> </xf:if> <xf:extension name="above_messages_below_pinned"></xf:extension> <xf:extension name="message_block_classes" value="block--messages" /> <div class="block {{ extension_value('message_block_classes') }}" data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}" data-type="post" data-href="{{ link('inline-mod') }}" data-search-target="*"> <span class="u-anchorTarget" id="posts"></span> <div class="block-outer"><xf:extension name="messages_block_outer"><xf:trim> <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$totalPosts}" link="threads" data="{$thread}" params="{$pageNavFilters}" hash="{$pageNavHash}" wrapperclass="block-outer-main" /> <xf:if is="!$isFirstPostPinned"> {$threadActionsHtml} </xf:if> <xf:if contentcheck="true"> <div class="block-outer-opposite"> <xf:contentcheck>{$postSortFilterHtml}</xf:contentcheck> </div> </xf:if> </xf:trim></xf:extension></div> <xf:extension name="messages_block_outer_secondary"></xf:extension> <xf:if is="!$isFirstPostPinned"> <xf:macro name="thread_custom_fields_status" arg-thread="{$thread}" arg-forum="{$forum}" arg-wrapperClass="block-outer" /> </xf:if> <div class="block-container lbContainer" data-xf-init="lightbox{{ $xf.options.selectQuotable ? ' select-to-quote' : '' }}" data-message-selector=".js-post" data-lb-id="thread-{$thread.thread_id}" data-lb-universal="{$xf.options.lightBoxUniversal}"> <div class="block-body js-replyNewMessageContainer"> <xf:if is="$posts is not empty"> <xf:foreach loop="$posts" value="$post"> <xf:extension name="messages_block_body_before_post"></xf:extension> <xf:if is="$post.message_state == 'deleted'"> <xf:macro name="{{ $templateOverrides.post_deleted_macro ?: 'post_macros::post_deleted' }}" arg-post="{$post}" arg-thread="{$thread}" args="{$templateOverrides.post_deleted_macro_args}" /> <xf:else /> <xf:macro name="{{ $templateOverrides.post_macro ?: 'post_macros::post' }}" arg-post="{$post}" arg-thread="{$thread}" arg-highlightedPosts="{$highlightedPosts}" args="{$templateOverrides.post_macro_args}" /> </xf:if> <xf:extension name="messages_block_body_after_post"></xf:extension> </xf:foreach> <xf:else /> <xf:if is="$filters"> <div class="message"> <div class="message-inner"> <div class="message-cell"> {{ phrase('there_no_posts_matching_your_filters') }} </div> </div> </div> </xf:if> </xf:if> </div> </div> <xf:if contentcheck="true"> <xf:contentcheck> <div class="block-outer block-outer--after"> <xf:pagenav page="{$page}" perpage="{$perPage}" total="{$totalPosts}" link="threads" data="{$thread}" params="{$pageNavFilters}" hash="{$pageNavHash}" wrapperclass="block-outer-main" /> <xf:showignored wrapperclass="block-outer-opposite" /> <xf:if is=" !$thread.canReply() AND !$thread.canReplyPreReg() AND $thread.discussion_state == 'visible' AND $thread.discussion_open "> <div class="block-outer-opposite"> <xf:if is="$xf.visitor.user_id"> <span class="button button--wrap is-disabled"> {{ phrase('no_permission_to_reply') }} <!-- this is not interactive so shouldn't be a button element --> </span> <xf:else /> <xf:button href="{{ link('login') }}" class="button--link button--wrap" overlay="true"> {{ phrase('log_in_or_register_to_reply') }} </xf:button> </xf:if> </div> </xf:if> </div> </xf:contentcheck> </xf:if> </div> <xf:ad position="thread_view_below_messages" arg-thread="{$thread}" /> <xf:extension name="below_messages"></xf:extension> <xf:widgetpos id="thread_view_below_messages" context-thread="{$thread}" /> <xf:set var="$isPreRegReply" value="{{ $thread.canReplyPreReg() }}" /> <xf:if is="$thread.canReply() OR $isPreRegReply"> <xf:form action="{{ link('threads/add-reply', $thread) }}" ajax="true" draft="{{ link('threads/draft', $thread) }}" class="block js-quickReply" data-xf-init="attachment-manager quick-reply{{ ($xf.visitor.isShownCaptcha() AND !$isPreRegReply) ? ' guest-captcha' : '' }}" data-captcha-context="xf_guest_thread_quick_reply" data-message-container="div[data-type='post'] .js-replyNewMessageContainer"> <xf:js src="xf/message.js" min="1" /> <xf:js src="xf/captcha.js" min="1" /> <div class="block-container"> <div class="block-body"> <xf:macro template="quick_reply_macros" name="body" arg-message="{$thread.draft_reply.message}" arg-attachmentData="{$attachmentData}" arg-forceHash="{$thread.draft_reply.attachment_hash}" arg-messageSelector=".js-post" arg-multiQuoteHref="{{ link('threads/multi-quote', $thread) }}" arg-multiQuoteStorageKey="multiQuoteThread" arg-lastDate="{$lastPost.post_date}" arg-lastKnownDate="{$thread.last_post_date}" arg-loadExtra="{$isSimpleDateDisplay}" arg-showGuestControls="{{ !$isPreRegReply }}" arg-previewUrl="{{ link('threads/reply-preview', $thread) }}"/> </div> </div> </xf:form> </xf:if> <xf:widgetpos id="thread_view_below_quick_reply" context-thread="{$thread}" /> <xf:extension name="below_quick_reply"></xf:extension> <div class="blockMessage blockMessage--none"> <xf:macro template="share_page_macros" name="buttons" arg-iconic="{{ true }}" arg-label="{{ phrase('share:') }}" /> </div> <xf:extension name="below_share"></xf:extension> <xf:macro name="thread_status" arg-thread="!" arg-wrapperClass=""> <xf:if contentcheck="true"> <div class="{$wrapperClass}"> <dl class="blockStatus"> <dt>{{ phrase('status') }}</dt> <xf:contentcheck> <xf:if is="$thread.discussion_state == 'deleted'"> <dd class="blockStatus-message blockStatus-message--deleted"> <xf:macro template="deletion_macros" name="notice" arg-log="{$thread.DeletionLog}" /> </dd> <xf:elseif is="$thread.discussion_state == 'moderated'" /> <dd class="blockStatus-message blockStatus-message--moderated"> {{ phrase('awaiting_approval_before_being_displayed_publicly') }} </dd> </xf:if> <xf:if is="!$thread.discussion_open"> <dd class="blockStatus-message blockStatus-message--locked"> {{ phrase('not_open_for_further_replies') }} </dd> </xf:if> </xf:contentcheck> </dl> </div> </xf:if> </xf:macro> <xf:macro name="thread_custom_fields_status" arg-thread="!" arg-forum="!" arg-wrapperClass=""> <div class="{$wrapperClass} js-threadStatusField"><xf:trim> <xf:if contentcheck="true"> <div class="blockStatus blockStatus--info"> <xf:contentcheck> <xf:macro template="custom_fields_macros" name="custom_fields_view" arg-type="threads" arg-group="thread_status" arg-onlyInclude="{$forum.field_cache}" arg-set="{$thread.custom_fields}" arg-wrapperClass="blockStatus-message" /> </xf:contentcheck> </div> </xf:if> </xf:trim></div> </xf:macro> <xf:widgetpos id="thread_view_sidebar" context-thread="{$thread}" position="sidebar" /> ]]>
</template>
</templates>
<properties>
<group group_name="amazing_header_settings" title="[Amazing] Header" description="" display_order="0" addon_id=""/>
<group group_name="amazing_animation_settings" title="[Amazing] Animation" description="" display_order="1" addon_id=""/>
<group group_name="amazing_footer_settings" title="[Amazing] Footer" description="" display_order="3" addon_id=""/>
<property property_name="arp_animationNode" group_name="amazing_animation_settings" title="Enable animation on the node" description="" property_type="value" value_type="boolean" depends_on="" value_group="Hover" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="arp_animationThread" group_name="amazing_animation_settings" title="Enable animation on the thread" description="" property_type="value" value_type="boolean" depends_on="" value_group="Hover" display_order="1" addon_id="">
<value>1</value>
</property>
<property property_name="arp_footer1_enable" group_name="amazing_footer_settings" title="Footer column ¹1 enable?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Footer_Column_1" display_order="50" addon_id="">
<value>1</value>
</property>
<property property_name="arp_footer1_links_content" group_name="amazing_footer_settings" title="Footer column ¹1 links" description="" property_type="value" value_type="string" depends_on="arp_footer1_enable" value_group="Footer_Column_1" display_order="80" addon_id="">
<value_parameters>rows=3</value_parameters>
<value>"<a class=\"footer-navigation__section__items__item\" href=\"#\" target=\"_blank\">\u041d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0430\u0442\u044c</a>\n<a class=\"footer-navigation__section__items__item\" href=\"#\" target=\"_blank\">\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430</a>"</value>
</property>
<property property_name="arp_footer1_logo" group_name="amazing_footer_settings" title="Footer column ¹1 logo" description="" property_type="value" value_type="string" depends_on="arp_footer1_enable" value_group="Footer_Column_1" display_order="70" addon_id="">
<value>"/styles/Amazing RP/Image/logotype-roleplay-updated.svg"</value>
</property>
<property property_name="arp_footer1_title" group_name="amazing_footer_settings" title="Footer column ¹1 title" description="" property_type="value" value_type="string" depends_on="arp_footer1_enable" value_group="Footer_Column_1" display_order="60" addon_id="">
<value>"\u041d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442"</value>
</property>
<property property_name="arp_footer2_enable" group_name="amazing_footer_settings" title="Footer column ¹2 enable?" description="" property_type="value" value_type="boolean" depends_on="arp_footerEnable" value_group="Footer_Column_2" display_order="90" addon_id="">
<value>1</value>
</property>
<property property_name="arp_footer2_links_content" group_name="amazing_footer_settings" title="Footer column ¹2 links" description="" property_type="value" value_type="string" depends_on="arp_footer2_enable" value_group="Footer_Column_2" display_order="110" addon_id="">
<value_parameters>rows=3</value_parameters>
<value>"<a class=\"footer-navigation__section__items__item\" href=\"#\" target=\"_blank\">\u0414\u0435\u043d\u044c\u0433\u0438 \u0437\u0430 \u0438\u0433\u0440\u043e\u043a\u0430</a>"</value>
</property>
<property property_name="arp_footer2_title" group_name="amazing_footer_settings" title="Footer column ¹2 title" description="" property_type="value" value_type="string" depends_on="arp_footer2_enable" value_group="Footer_Column_2" display_order="100" addon_id="">
<value>"\u0410\u043a\u0446\u0438\u0438"</value>
</property>
<property property_name="arp_footer3_enable" group_name="amazing_footer_settings" title="Footer column ¹3 enable" description="" property_type="value" value_type="boolean" depends_on="arp_footerEnable" value_group="Footer_Column_3" display_order="120" addon_id="">
<value>1</value>
</property>
<property property_name="arp_footer3_links_content" group_name="amazing_footer_settings" title="Footer column ¹3 links" description="" property_type="value" value_type="string" depends_on="arp_footer3_enable" value_group="Footer_Column_3" display_order="140" addon_id="">
<value_parameters>rows=3</value_parameters>
<value>"<a class=\"footer-navigation__section__items__item\" href=\"#\" target=\"_blank\">\u041c\u0443\u0437\u044b\u043a\u0430 \u0438 \u0440\u0430\u0434\u0438\u043e</a>\n<a class=\"footer-navigation__section__items__item\" href=\"#\" target=\"_blank\">\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0438\u0434\u0435\u044e</a>\n<a class=\"footer-navigation__section__items__item\" href=\"#\" target=\"_blank\">\u0425\u043e\u0447\u0435\u0448\u044c \u0441\u043d\u0438\u043c\u0430\u0442\u044c \u0443 \u043d\u0430\u0441?</a>"</value>
</property>
<property property_name="arp_footer3_title" group_name="amazing_footer_settings" title="Footer column ¹3 title" description="" property_type="value" value_type="string" depends_on="arp_footer3_enable" value_group="Footer_Column_3" display_order="130" addon_id="">
<value>"\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f"</value>
</property>
<property property_name="arp_footerAboutUs" group_name="amazing_footer_settings" title="About us content" description="" property_type="value" value_type="string" depends_on="arp_footerAboutUsEnable" value_group="About_Us" display_order="30" addon_id="">
<value_parameters>rows=4</value_parameters>
<value>"AMAZING ONLINE \u2014 \u044d\u0442\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u043e\u043d\u043b\u0430\u0439\u043d-\u0438\u0433\u0440\u0430 \u043f\u0440\u043e \u041a\u0440\u0438\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0420\u043e\u0441\u0441\u0438\u044e \u0441 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0430\u0442\u043c\u043e\u0441\u0444\u0435\u0440\u043e\u0439, \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0435\u0439 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0433\u0440\u043e\u0432\u044b\u043c \u043c\u0438\u0440\u043e\u043c. \u0420\u0443\u0441\u0441\u043a\u0438\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u0438 \u0434\u0435\u0440\u0435\u0432\u043d\u0438, \u0438\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0442\u0435\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0431\u043e\u0442 \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u0439"</value>
</property>
<property property_name="arp_footerAboutUsColor" group_name="amazing_footer_settings" title="About us color" description="" property_type="value" value_type="color" depends_on="arp_footerAboutUsEnable" value_group="About_Us" display_order="40" addon_id="">
<value>"rgba(0, 0, 0, 0.6)"</value>
</property>
<property property_name="arp_footerAboutUsEnable" group_name="amazing_footer_settings" title="About us enable?" description="" property_type="value" value_type="boolean" depends_on="arp_footerEnable" value_group="About_Us" display_order="20" addon_id="">
<value>1</value>
</property>
<property property_name="arp_footerEnable" group_name="amazing_footer_settings" title="Footer enable" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="arp_footerMobileEnable" group_name="amazing_footer_settings" title="Hide footer on mobile?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
<value>0</value>
</property>
<property property_name="arp_footerSocial_enable" group_name="amazing_footer_settings" title="Footer socials enable?" description="" property_type="value" value_type="boolean" depends_on="arp_footerEnable" value_group="Footer_Social" display_order="150" addon_id="">
<value>1</value>
</property>
<property property_name="arp_footerSocial_links_content" group_name="amazing_footer_settings" title="Footer socials content" description="" property_type="value" value_type="string" depends_on="arp_footerSocial_enable" value_group="Footer_Social" display_order="160" addon_id="">
<value_parameters>rows=6</value_parameters>
<value>"<a class=\"footer-navigation__section__networks__item network-telegram\" href=\"#\" target=\"_blank\"></a>\n<a class=\"footer-navigation__section__networks__item network-vk\" href=\"#\" target=\"_blank\"></a>\n<a class=\"footer-navigation__section__networks__item network-ok\" href=\"#\" target=\"_blank\"></a>\n<a class=\"footer-navigation__section__networks__item network-discrod\" href=\"#\" target=\"_blank\"></a>\n<a class=\"footer-navigation__section__networks__item network-youtube\" href=\"#\" target=\"_blank\"></a>\n<a class=\"footer-navigation__section__networks__item network-tiktok\" href=\"#\" target=\"_blank\"></a>"</value>
</property>
<property property_name="arp_headerAnimation" group_name="amazing_header_settings" title="Header animation" description="" property_type="value" value_type="boolean" depends_on="" value_group="Header" display_order="5" addon_id="">
<value>1</value>
</property>
<property property_name="arp_headerLinksColor" group_name="amazing_header_settings" title="Links Color" description="" property_type="value" value_type="color" depends_on="arp_header_navigation_enable" value_group="Header_Links" display_order="3" addon_id="">
<value>"rgba(255, 255, 255, 0.7)"</value>
</property>
<property property_name="arp_headerLinksHoverColor" group_name="amazing_header_settings" title="Links hover color" description="" property_type="value" value_type="color" depends_on="arp_header_navigation_enable" value_group="Header_Links" display_order="4" addon_id="">
<value>"white"</value>
</property>
<property property_name="arp_headerOnMobile" group_name="amazing_header_settings" title="Hide header on mobile?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Header" display_order="6" addon_id="">
<value>0</value>
</property>
<property property_name="arp_header_link_content" group_name="amazing_header_settings" title="Links content" description="" property_type="value" value_type="string" depends_on="arp_header_navigation_enable" value_group="Header_Links" display_order="1" addon_id="">
<value_parameters>rows=4</value_parameters>
<value>"<a class=\"p-header-navigation--item\" href=\"#\">\u0413\u043b\u0430\u0432\u043d\u0430\u044f</a>\n<a class=\"p-header-navigation--item\" href=\"#\">\u041d\u043e\u0432\u043e\u0441\u0442\u0438</a>\n<a class=\"p-header-navigation--item\" href=\"#\">\u0414\u043e\u043d\u0430\u0442</a>\n<a class=\"p-header-navigation--item\" href=\"#\">\u041f\u043e\u043c\u043e\u0449\u044c</a>\n<a class=\"p-header-navigation--item\" href=\"#\">\u0424\u043e\u0440\u0443\u043c</a>\n<a class=\"p-header-navigation--item\" href=\"#\">\u041d\u0430\u0447\u0430\u0442\u044c \u0438\u0433\u0440\u0430\u0442\u044c</a>\n<a class=\"p-header-navigation--item\" href=\"#\">\u041c\u0443\u0437\u044b\u043a\u0430</a>"</value>
</property>
<property property_name="arp_header_navigation_enable" group_name="amazing_header_settings" title="Header navigation enable?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Header_Links" display_order="0" addon_id="">
<value>1</value>
</property>
<property property_name="arp_hideLogo" group_name="amazing_header_settings" title="Hide logo?" description="" property_type="value" value_type="boolean" depends_on="" value_group="Logo" display_order="6" addon_id="">
<value>1</value>
</property>
<property property_name="bbCodeBlock" group_name="bbCode" title="BB code blocks" description="All BB code blocks within messages make use of these styling rules" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,border_radius,extra" addon_id="XF">
<value>{ "background-color": "whitesmoke", "border-radius": "5px" }</value>
</property>
<property property_name="bbCodeBlockTitle" group_name="bbCode" title="BB code blocks - title" description="Styles the title section of BB code blocks within messages" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColor" }</value>
</property>
<property property_name="blockFilterBar" group_name="block" title="Block filter bar" description="When the content of a block can be filtered, the controls to do so are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20800" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-majorHeadingTextColor", "background-color": "@xf-majorHeadingBg" }</value>
</property>
<property property_name="blockHeader" group_name="block" title="Block header" description="Blocks often have title bars at their tops, which are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "17px", "color": "@xf-majorHeadingTextColor", "background-color": "@xf-majorHeadingBg", "border-top-width": "1px", "border-top-color": "#f5f5f5", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "#f4f4f4", "extra": "padding: 20px 20px;" }</value>
</property>
<property property_name="blockMinorHeader" group_name="block" title="Block minor header" description="Sub-headings in blocks use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "17px", "color": "@xf-textColor", "border-bottom-width": "1px", "border-bottom-color": "#f4f4f4" }</value>
</property>
<property property_name="blockTabHeader" group_name="block" title="Block tab header" description="Occasionally, blocks will have multi-part, tab headers, styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeNormal", "color": "@xf-textColor", "background-color": "@xf-blockTabHeaderBg", "border-top-width": "1px", "border-top-color": "#f5f5f5", "border-bottom-width": "0px", "border-bottom-color": "@xf-borderColor", "extra": "display: flex;\njustify-content: center;" }</value>
</property>
<property property_name="blockTabHeaderBg" group_name="color" title="Block tab header background color" description="" property_type="value" value_type="color" depends_on="" value_group="blockTabHeader" display_order="6500" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="blockTabHeaderSelected" group_name="block" title="Block tab header - selected tab" description="The selected tab in multi-part headers takes additional styling from here" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border_color_simple,extra" addon_id="XF">
<value>{ "color": "@xf-textColor", "background-color": "#f9f9f9", "border-color": "white", "extra": "padding: 19px 20px 20px;" }</value>
</property>
<property property_name="blockTabHeaderTextColor" group_name="color" title="Block tab header text color" description="" property_type="value" value_type="color" depends_on="" value_group="blockTabHeader" display_order="6600" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="borderColor" group_name="color" title="Border color" description="Structural borders around blocks of content generally use this color" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4000" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="borderColorFaint" group_name="color" title="Faint border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4100" addon_id="XF">
<value>"@xf-borderColor"</value>
</property>
<property property_name="borderColorFeature" group_name="color" title="Feature border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderOther" display_order="5100" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="borderColorHeavy" group_name="color" title="Heavy border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4300" addon_id="XF">
<value>"@xf-borderColor"</value>
</property>
<property property_name="borderColorLight" group_name="color" title="Light border color" description="" property_type="value" value_type="color" depends_on="" value_group="borderBasic" display_order="4200" addon_id="XF">
<value>"@xf-borderColor"</value>
</property>
<property property_name="buttonBase" group_name="button" title="Button base" description="Defines the styling for the basic elements that are common to all text-based buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,border_radius,padding,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-textColor", "border-radius": "@xf-borderRadiusMedium", "padding-top": "5px", "padding-right": "10px", "padding-bottom": "5px", "padding-left": "10px", "extra": "text-align: center;" }</value>
</property>
<property property_name="buttonBg" group_name="color" title="Default button background color" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8200" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="buttonCta" group_name="button" title="Button - call to action" description="Call to action buttons sit alone and invite the user to do something, like post a new thread" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,extra" addon_id="XF">
<value>{ "color": "@xf-textColor", "background-color": "@xf-buttonCtaBg" }</value>
</property>
<property property_name="buttonCtaBg" group_name="color" title="Call-to-action button background" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8400" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="buttonDefault" group_name="button" title="Button - default" description="Most buttons use this styling, except for primary form submit buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
<value>{ "color": "@xf-textColor", "background-color": "@xf-buttonBg" }</value>
</property>
<property property_name="buttonPrimary" group_name="button" title="Button - primary" description="These rules are used mostly for the main submit button for forms" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF">
<value>{ "color": "@xf-buttonTextColor", "background-color": "@xf-buttonPrimaryBg", "extra": "min-width: 80px;" }</value>
</property>
<property property_name="buttonPrimaryBg" group_name="color" title="Primary button background color" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8300" addon_id="XF">
<value>"#efbf11"</value>
</property>
<property property_name="buttonTextColor" group_name="color" title="Default button text color" description="" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="8100" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="contentAccentBg" group_name="color" title="Accented content background color" description="This background color is used for further differentiation from regular content" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2400" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="contentAltBg" group_name="color" title="Alternate content background color" description="In order to differentiate it, some content will be presented on this alternative background" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2200" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="contentBg" group_name="color" title="Content background color" description="Most normal content will sit on this background" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2000" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="contentHighlightBg" group_name="color" title="Highlighted content background color" description="When the standard background color is highlighted or selected, it will use this color" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2300" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="editorBg" group_name="rte" title="Editor background" description="The background for the editor before it is activated" property_type="value" value_type="color" depends_on="" value_group="" display_order="1001" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="editorButtonActiveColor" group_name="rte" title="Editor button active color" description="Color for icons when active, such as the 'B' when the cursor is on bold text" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="2102" addon_id="XF">
<value>"fade(mix(@xf-textColor, @xf-majorHeadingTextColor), 85%)"</value>
</property>
<property property_name="editorButtonHoverBg" group_name="rte" title="Editor button hover background" description="Color for button background when hovered" property_type="value" value_type="color" depends_on="" value_group="buttons" display_order="2112" addon_id="XF">
<value>"rgba(46,46,46,0.15)"</value>
</property>
<property property_name="editorFocusBg" group_name="rte" title="Editor background when focused" description="Background color for the editor when activated" property_type="value" value_type="color" depends_on="" value_group="" display_order="1003" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="inlineModHighlightColor" group_name="color" title="Inline moderation highlight color" description="When content is selected for inline moderation, its background color will be replaced with this" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2500" addon_id="XF">
<value>"white"</value>
</property>
<property property_name="input" group_name="input" title="Form input" description="Controls the style of most text-input boxes" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,border_radius,padding,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeNormal", "color": "@xf-inputTextColor", "background-color": "@xf-inputBgColor", "border-width": "@xf-borderSize", "border-color": "@xf-borderColor", "border-radius": "3px", "border-top-color": "var(--input-border-heavy)", "border-right-color": "var(--input-border-light)", "border-bottom-color": "var(--input-border-light)", "border-left-color": "var(--input-border-heavy)", "extra": "padding: 8px 12px;\nborder: none;" }</value>
</property>
<property property_name="inputBgColor" group_name="color" title="Text input box background color" description="" property_type="value" value_type="color" depends_on="" value_group="input" display_order="8500" addon_id="XF">
<value>"#f8f8f8"</value>
</property>
<property property_name="inputFocus" group_name="input" title="Form input - focused" description="These rules are applied to text boxes when they are selected for input" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
<value>{ "background-color": "@xf-inputFocusBgColor", "extra": "box-shadow: 0px 0px 0px 5px #fdfdfd;" }</value>
</property>
<property property_name="inputFocusBgColor" group_name="color" title="Focused text box background color" description="" property_type="value" value_type="color" depends_on="" value_group="input" display_order="8600" addon_id="XF">
<value>"#f8f8f8"</value>
</property>
<property property_name="link" group_name="page" title="Links" description="These are the styling rules for basic hyperlinks throughout the system" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,extra" addon_id="XF">
<value>{ "color": "#2e2e2e", "text-decoration": "none" }</value>
</property>
<property property_name="linkColor" group_name="color" title="Link color" description="Basic hyperlinks on standard background colors will use this style" property_type="value" value_type="color" depends_on="" value_group="links" display_order="1000" addon_id="XF">
<value>"#2e2e2e"</value>
</property>
<property property_name="linkHover" group_name="page" title="Links - hovered" description="When basic links are hovered, they use this set of rules for their styling" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,extra" addon_id="XF">
<value>{ "text-decoration": "none" }</value>
</property>
<property property_name="linkHoverColor" group_name="color" title="Link hover color" description="Basic hyperlinks will turn this color when hovered" property_type="value" value_type="color" depends_on="" value_group="links" display_order="1100" addon_id="XF">
<value>"#2e2e2e"</value>
</property>
<property property_name="majorHeadingTextColor" group_name="color" title="Major heading text color" description="" property_type="value" value_type="color" depends_on="" value_group="heading" display_order="6200" addon_id="XF">
<value>"@xf-textColor"</value>
</property>
<property property_name="menuFooter" group_name="menu" title="Menu footer" description="When a popup menu has a bottom, footer element, it will use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20600" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeSmaller", "color": "@xf-blockFooterTextColor", "border-top-width": "@xf-borderSize", "border-top-color": "#f5f5f5" }</value>
</property>
<property property_name="menuHeader" group_name="menu" title="Menu header" description="Most menus identify themselves with a header just underneath their top border" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeLarge", "color": "@xf-majorHeadingTextColor", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "#f5f5f5" }</value>
</property>
<property property_name="menuTabHeaderSelected" group_name="menu" title="Menu tab header - selected tab" description="Controls the selected tab in multi-part menu headers" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border_color_simple,extra" addon_id="XF">
<value>{ "color": "@xf-textColor", "border-color": "@xf-borderColorFeature" }</value>
</property>
<property property_name="messageSignature" group_name="message" title="Message signature" description="Any rules used to apply styling to users' signatures in their messages are defined here" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,padding,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeSmaller", "color": "@xf-textColorMuted", "border-top-width": "@xf-borderSize", "border-top-color": "#e8e8e8", "padding-top": "15px", "extra": "max-height: 360px;\noverflow: auto;" }</value>
</property>
<property property_name="minorHeadingTextColor" group_name="color" title="Minor heading text color" description="" property_type="value" value_type="color" depends_on="" value_group="heading" display_order="6400" addon_id="XF">
<value>"#2e2e2e"</value>
</property>
<property property_name="nodeIconReadColor" group_name="nodeList" title="Read node icon color" description="When the content within a node has been read, its icon will revert to a less attention-grabbing color, defined here" property_type="value" value_type="color" depends_on="" value_group="" display_order="200" addon_id="XF">
<value>"#b4b4b4"</value>
</property>
<property property_name="nodeIconUnreadColor" group_name="nodeList" title="Unread node icon color" description="Node icons give an at-a-glance indication of whether or not the content housed within the node has been read. The unread icon color should stand out from its background for quick identification" property_type="value" value_type="color" depends_on="" value_group="" display_order="100" addon_id="XF">
<value>"#f3c23f"</value>
</property>
<property property_name="paddingLarge" group_name="borderSpacing" title="Large padding" description="" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="2200" addon_id="XF">
<value>"20px"</value>
</property>
<property property_name="paddingLargest" group_name="borderSpacing" title="Largest padding" description="" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="2300" addon_id="XF">
<value>"20px"</value>
</property>
<property property_name="pageBg" group_name="color" title="Page background color" description="The background of the page itself, on which all other content rests" property_type="value" value_type="color" depends_on="" value_group="contentBackground" display_order="2100" addon_id="XF">
<value>"#f8f8f8"</value>
</property>
<property property_name="publicHeader" group_name="headerNav" title="Header/logo row" description="The header row contains your logo and sits at the top of every public page" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
<value>{ "background-image": "/styles/Amazing RP/Image/new year/rose.jpg", "extra": "display: block;\nbackground-position: center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbox-shadow: inset 0px 30px 100px 0px #000;\nanimation: animation-header-change 14s linear infinite;" }</value>
</property>
<property property_name="publicLogoUrl" group_name="basic" title="Logo URL" description="The web path from your site's XenForo installation directory to your logo image. If you specify an SVG image here, you should set <b>Emails &gt; Email logo URL</b> to point to a PNG image, or similar, for increased compatibility." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="101" addon_id="XF">
<value_parameters>asset=logo</value_parameters>
<value>""</value>
</property>
<property property_name="publicNav" group_name="headerNav" title="Navigation row" description="The navigation row sits below the header and contains the primary site navigation tabs and menus" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
<value>{ "background-color": "white", "extra": "margin-bottom: 40px;\nbox-shadow: 0px 5px 50px -10px rgba(0, 0, 0, 0.1);" }</value>
</property>
<property property_name="publicNavSelected" group_name="headerNav" title="Navigation row - selected tab" description="Additional styling to apply to navigation tabs when they are selected" property_type="css" value_type="" depends_on="" value_group="" display_order="20300" css_components="text,background,border,border_radius,extra" addon_id="XF">
<value>{ "color": "#2e2e2e", "font-weight": "@xf-fontWeightNormal", "border-top-left-radius": "@xf-borderRadiusSmall", "border-top-right-radius": "@xf-borderRadiusSmall" }</value>
</property>
<property property_name="publicNavSticky" group_name="headerNav" title="Sticky navigation element" description="If you intend for some or all of your header to stick to the top of the page when it is scrolled, choose which elements should stick" property_type="value" value_type="radio" depends_on="" value_group="navigation" display_order="1200" addon_id="XF">
<value_parameters>primary={{ phrase('primary_navigation_row_only') }} all={{ phrase('primary_and_sub_navigation_rows') }} none={{ phrase('none') }}</value_parameters>
<value>"none"</value>
</property>
<property property_name="publicNavTab" group_name="headerNav" title="Navigation row - tab" description="Controls the styling of individual tab elements within the navigation row" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF">
<value>{ "color": "#868686", "text-decoration": "none" }</value>
</property>
<property property_name="publicNavTabHover" group_name="headerNav" title="Navigation row - hovered tab" description="Additional styling to apply to navigation tabs when the pointer hovers over them" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF">
<value>{ "text-decoration": "none" }</value>
</property>
<property property_name="publicNavTabMenuOpen" group_name="headerNav" title="Navigation row - menu open" description="Styling applied when the popup menu for the current tab is visible" property_type="css" value_type="" depends_on="" value_group="" display_order="20450" css_components="text,background,extra" addon_id="XF">
<value>{ "text-decoration": "none" }</value>
</property>
<property property_name="publicStaffBar" group_name="headerNav" title="Staff tools bar" description="Visible only to staff, the staff tools bar sits above the header and contains items such as reported content, the moderation queue..." property_type="css" value_type="" depends_on="" value_group="" display_order="20700" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeSmall", "color": "#2e2e2e", "background-color": "white", "extra": "padding: 8px 12px;\ndisplay: inline-flex;" }</value>
</property>
<property property_name="publicSubNav" group_name="headerNav" title="Sub-navigation row" description="Below the main navigation row, this row shows content associated with the selected main navigation tab" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,border,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeSmall", "color": "@xf-subNavTextColor", "background-color": "@xf-subNavBg", "border-bottom-width": "@xf-borderSize", "border-bottom-color": "@xf-borderColorHeavy", "extra": "display: none;" }</value>
</property>
<property property_name="removeBottonPageAction" group_name="page" title="Remove button forum list page actions" description="" property_type="value" value_type="select" depends_on="" value_group="" display_order="300" addon_id="">
<value_parameters>default=Default new-post=New Post create-thread=Create Thread</value_parameters>
<value>"create-thread"</value>
</property>
<property property_name="sidebarSpacer" group_name="page" title="Sidebar and side navigation spacer" description="Distance between the main content and the sidebar" property_type="value" value_type="unit" depends_on="" value_group="sidebar" display_order="1000" addon_id="XF">
<value>"30px"</value>
</property>
<property property_name="sidebarWidth" group_name="page" title="Sidebar and side navigation width" description="Width of any elements that make up the sidebar" property_type="value" value_type="unit" depends_on="" value_group="sidebar" display_order="1100" addon_id="XF">
<value>"250px"</value>
</property>
<property property_name="standaloneTab" group_name="tab" title="Standalone tabs" description="Tabs that are not part of block headers are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
<value>{ "font-size": "@xf-fontSizeNormal", "color": "wihte", "background-color": "@xf-contentAltBg" }</value>
</property>
<property property_name="standaloneTabSelected" group_name="tab" title="Standalone tabs - selected tab" description="The selected tab in groups that are not part of block headers" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border_color_simple,extra" addon_id="XF">
<value>{ "color": "@xf-textColor", "border-color": "@xf-borderColorFeature" }</value>
</property>
<property property_name="textColor" group_name="color" title="Text color" description="Unless otherwise specified, text will be this color" property_type="value" value_type="color" depends_on="" value_group="textBasic" display_order="100" addon_id="XF">
<value>"#2e2e2e"</value>
</property>
<property property_name="textColorAttention" group_name="color" title="Attention-grabbing text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3300" addon_id="XF">
<value>"#2e2e2e"</value>
</property>
<property property_name="textColorMuted" group_name="color" title="Muted text color" description="Text is further de-emphasised using this style" property_type="value" value_type="color" depends_on="" value_group="textBasic" display_order="300" addon_id="XF">
<value>"#2e2e2e"</value>
</property>
</properties>
</style>