<?xml version="1.0" encoding="utf-8"?>
<style title="Technetium" description="" user_selectable="1" export_version="2">
<templates>
<template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![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}"
class="has-no-js{{ $template ? ' template-' . $template : '' }}"
{{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
<xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
<xf:set var="$description"><xf:description /></xf:set>
<title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title>
<xf:foreach loop="$head" value="$headTag">
{$headTag}
</xf:foreach>
<xf:if is="!$head.meta_site_name && $siteName is not empty">
<xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_type">
<xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_title">
<xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
<xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_share_url">
<xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
</xf:if>
<xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
<xf:macro template="metadata_macros" name="image_url"
arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
arg-output="{{ true }}" />
</xf:if>
<xf:if is="property('metaThemeColor')">
<meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
</xf:if>
<xf:macro template="helper_js_global" name="head" arg-app="public" />
<xf:if is="property('publicFaviconUrl')">
<link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl'), true) }}" sizes="32x32" />
</xf:if>
<xf:if is="property('publicMetadataLogoUrl')">
<link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" />
</xf:if>
<xf:include template="google_analytics" />
<link href="{{ base_url(property('fontFamilyLink')) }}" rel="stylesheet">
</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:') . ' ' . 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:') . ' ' . 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>
<header class="p-header" id="header">
<div class="p-header-inner">
<div class="p-header-content">
<div class="p-header-logo p-header-logo--image">
<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
<img src="{{ base_url(property('publicLogoUrl')) }}"
alt="{$xf.options.boardTitle}"
{{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
</a>
</div>
<xf:ad position="container_header" />
</div>
</div>
</header>
<xf:set var="$navHtml">
<nav class="p-nav">
<div class="p-nav-inner">
<a class="p-nav-menuTrigger" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0">
<i aria-hidden="true"></i>
<span class="p-nav-menuText">{{ phrase('menu') }}</span>
</a>
<div class="p-nav-smallLogo">
<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
<img src="{{ base_url(property('publicLogoUrl')) }}"
alt="{$xf.options.boardTitle}"
{{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
</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="" />
<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
</a>
<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link">
<span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
</a>
<xf:else />
<a href="{{ link('account') }}"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user"
data-xf-click="menu"
data-xf-key="{{ phrase('shortcut.visitor_menu')|for_attr }}"
data-menu-pos-ref="< .p-navgroup"
aria-expanded="false"
aria-haspopup="true">
<xf:avatar user="$xf.visitor" size="xxs" href="" />
<span class="p-navgroup-linkText">{$xf.visitor.username}</span>
</a>
<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
data-href="{{ link('account/visitor-menu') }}"
data-load-target=".js-visitorMenuBody">
<div class="menu-content js-visitorMenuBody">
<div class="menu-row">
{{ phrase('loading...') }}
</div>
</div>
</div>
<a href="{{ link('conversations') }}"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
data-badge="{$xf.visitor.conversations_unread|number}"
data-xf-click="menu"
data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
data-menu-pos-ref="< .p-navgroup"
aria-expanded="false"
aria-haspopup="true">
<i aria-hidden="true"></i>
<span class="p-navgroup-linkText">{{ phrase('inbox') }}</span>
</a>
<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
data-href="{{ link('conversations/popup') }}"
data-nocache="true"
data-load-target=".js-convMenuBody">
<div class="menu-content">
<h3 class="menu-header">{{ phrase('conversations') }}</h3>
<div class="js-convMenuBody">
<div class="menu-row">{{ phrase('loading...') }}</div>
</div>
<div class="menu-footer menu-footer--split">
<span class="menu-footer-main">
<a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a>
</span>
<span class="menu-footer-opposite">
<a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a>
</span>
</div>
</div>
</div>
<a href="{{ link('account/alerts') }}"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unread ? ' badgeContainer--highlighted' : '' }}"
data-badge="{$xf.visitor.alerts_unread|number}"
data-xf-click="menu"
data-xf-key="{{ phrase('shortcut.alerts_menu')|for_attr }}"
data-menu-pos-ref="< .p-navgroup"
aria-expanded="false"
aria-haspopup="true">
<i aria-hidden="true"></i>
<span class="p-navgroup-linkText">{{ phrase('alerts') }}</span>
</a>
<div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
data-href="{{ link('account/alerts-popup') }}"
data-nocache="true"
data-load-target=".js-alertsMenuBody">
<div class="menu-content">
<h3 class="menu-header">{{ phrase('alerts') }}</h3>
<div class="js-alertsMenuBody">
<div class="menu-row">{{ phrase('loading...') }}</div>
</div>
<div class="menu-footer menu-footer--split">
<span class="menu-footer-main">
<a href="{{ link('account/alerts') }}">{{ phrase('show_all...') }}</a>
</span>
<span class="menu-footer-opposite">
<a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a>
</span>
</div>
</div>
</div>
</xf:if>
<xf:else />
<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
data-xf-click="overlay" data-follow-redirects="on">
<span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
</a>
<xf:if is="$xf.options.registrationSetup.enabled">
<a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register"
data-xf-click="overlay" data-follow-redirects="on">
<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
</a>
</xf:if>
</xf:if>
</div>
<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
<a href="{{ link('whats-new') }}"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
title="{{ phrase('whats_new')|for_attr }}">
<i aria-hidden="true"></i>
<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
</a>
</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>
</div>
<div class="p-breadcrumbs--outer p-breadcrumbs--outer-top">
<div class="p-breadcrumbs--inner">
<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" />
</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:macro template="browser_warning_macros" name="javascript" />
<xf:macro template="browser_warning_macros" name="browser" />
<xf:if is="$headerHtml is not empty">
<div class="p-body-header">
{$headerHtml|raw}
</div>
<xf:elseif contentcheck="true" />
<div class="p-body-header">
<xf:contentcheck>
<xf:if contentcheck="true">
<div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}">
<xf:contentcheck>
<xf:if is="!$noH1">
<h1 class="p-title-value">{$h1}</h1>
</xf:if>
<xf:if contentcheck="true">
<div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<xf:if is="$description is not empty">
<div class="p-description">{$description}</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">
<xf:if is="$sideNav">
<div class="p-body-sideNav">
<div class="p-body-sideNavTrigger">
<xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm">
{{ $sideNavTitle ?: phrase('navigation') }}
</xf:button>
</div>
<div class="p-body-sideNavInner" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
<div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div>
<div data-ocm-class="offCanvasMenu-content">
<div class="p-body-sideNavContent">
<xf:ad position="container_sidenav_above" />
<xf:foreach loop="$sideNav" value="$sideNavHtml">
{$sideNavHtml}
</xf:foreach>
<xf:ad position="container_sidenav_below" />
</div>
</div>
</div>
</div>
</xf:if>
<div class="p-body-content">
<xf:ad position="container_content_above" />
<div class="p-body-pageContent">{$content|raw}</div>
<xf:ad position="container_content_below" />
</div>
<xf:if is="$sidebar">
<div class="p-body-sidebar">
<xf:if is="$xf.visitor.canSearch()">
<div class="block search-area" aria-hidden="true">
<a class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search" aria-expanded="false" aria-haspopup="true">
<i aria-hidden="true"></i>
<span class="p-navgroup-linkText">{{ phrase('search') }}</span>
</a>
<form action="{{ link('search/search') }}" method="post"
class="menu-content"
data-xf-init="quick-search">
<!--[XF:search_menu:above_input]-->
<div class="menu-row search-input">
<xf:if is="$searchConstraints">
<div class="inputGroup inputGroup--joined">
<xf:textbox name="keywords"
placeholder="{{ phrase('search...') }}"
aria-label="{{ phrase('search') }}"
data-menu-autofocus="true" />
</div>
<xf:else />
<xf:textbox name="keywords"
placeholder="{{ phrase('search...') }}"
aria-label="{{ phrase('search') }}"
data-menu-autofocus="true" />
</xf:if>
</div>
<div class="search-option">
<div class="menu-arrow"></div>
<xf:if contentcheck="true">
<div class="menu-row">
<xf:contentcheck>
<xf:if is="$searchConstraints">
<div class="__inputGroup inputGroup--joined">
<xf:select name="constraints"
class="js-quickSearch-constraint"
aria-label="{{ phrase('search_within') }}">
<xf:option value="">{{ phrase('everywhere') }}</xf:option>
<xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
<xf:option value="{$constraint|json}">{$constraintName}</xf:option>
</xf:foreach>
</xf:select>
</div>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
<!--[XF:search_menu:above_title_only]-->
<div class="menu-row">
<xf:checkbox standalone="true"><xf:option name="c[title_only]" label="{{ phrase('search_titles_only') }}" /></xf:checkbox>
</div>
<!--[XF:search_menu:above_member]-->
<div class="menu-row">
<div class="inputGroup">
<span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span>
<input 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>
</div>
<xf:csrf />
</form>
</div>
</xf:if>
<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>
</div>
</div>
<div class="p-breadcrumbs--outer">
<div class="p-breadcrumbs--inner">
<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="p-footer" id="footer">
<div class="p-footer-top">
<div class="p-footer-inner">
<div class="p-footer-custom">
<div class="footer-column footer-column-1">{{ property('FooterColumn1') }}</div>
<div class="footer-column footer-column-2">{{ property('FooterColumn2') }}</div>
<div class="footer-column footer-column-3">{{ property('FooterColumn3') }}</div>
<div class="footer-column footer-column-4">{{ property('FooterColumn4') }}</div>
</div>
</div>
</div>
<div class="p-footer-middle">
<div class="p-footer-inner">
<div class="p-footer-row">
<xf:if contentcheck="true">
<div class="p-footer-row-main">
<ul class="p-footer-linkList">
<xf:contentcheck>
<xf:if is="$xf.visitor.canChangeStyle()">
<li><a href="{{ link('misc/style') }}" data-xf-click="overlay"
data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow">
<i class="fa fa-paint-brush" aria-hidden="true"></i> {$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">
<i class="fa fa-globe" aria-hidden="true"></i> {$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"><i class="fa fa-rss"></i><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
</ul>
</div>
</div>
<xf:if contentcheck="true">
<div class="p-footer-copyright">
<xf:contentcheck>
<xf:copyright />
{{ phrase('extra_copyright') }}
</xf:contentcheck>
</div>
</xf:if>
<xf:if contentcheck="true">
<div class="p-footer-debug">
<xf:contentcheck>
<xf:macro template="debug_macros" name="debug"
arg-controller="{$controller}"
arg-action="{$actionMethod}"
arg-template="{$template}" />
</xf:contentcheck>
</div>
</xf:if>
</div>
</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>
<xf:if is="property('scrollJumpButtons')">
<div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
<xf:button href="#top" class="button--scroll" data-xf-click="scroll-to"><i class="fa fa-arrow-up"></i><span class="u-srOnly">{{ phrase('top') }}</span></xf:button>
<xf:if is="property('scrollJumpButtons') != 'up'">
<xf:button href="#footer" class="button--scroll" data-xf-click="scroll-to"><i class="fa fa-arrow-down"></i><span class="u-srOnly">{{ phrase('bottom') }}</span></xf:button>
</xf:if>
</div>
</xf:if>
<xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />
{$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"
data-arrow-pos-ref="< .p-navEl"
class="p-navEl-splitTrigger"
role="button"
tabindex="0"
aria-label="{{ phrase('toggle_expanded') }}"
aria-expanded="false"
aria-haspopup="true"></a></xf:if>
<xf:elseif is="$nav.children" /><a data-xf-key="{$shortcut}"
data-xf-click="menu"
data-menu-pos-ref="< .p-navEl"
data-arrow-pos-ref="< .p-navEl"
class="p-navEl-linkHolder"
role="button"
tabindex="0"
aria-expanded="false"
aria-haspopup="true">
<xf:macro name="nav_link"
arg-navId="{$navId}"
arg-nav="{$nav}"
arg-class="p-navEl-link p-navEl-link--menuTrigger" />
</a>
<xf:else />
<xf:macro name="nav_link"
arg-navId="{$navId}"
arg-nav="{$nav}"
arg-class="p-navEl-link"
arg-shortcut="{$shortcut}" />
</xf:if>
<xf:if is="$nav.children">
<div class="menu menu--structural" data-menu="menu" aria-hidden="true">
<div class="menu-content">
<!--<h4 class="menu-header">{$nav.title}</h4>-->
<xf:foreach loop="$nav.children" key="$childNavId" value="$child">
<xf:macro name="nav_menu_entry"
arg-navId="{$childNavId}"
arg-nav="{$child}" />
</xf:foreach>
</div>
</div>
</xf:if>
</div>
</xf:macro>
<xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}">
<xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" />
<{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }}
class="{{ trim($class) }} {$nav.attributes.class}"
{{ attributes($nav.attributes, ['class']) }}
{{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
data-nav-id="{$navId}"><xf:if is="$nav.icon"><i class="fa {$nav.icon}" aria-hidden="true"></i> </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:if is="$__globals.template == 'forum_list'">
<span class="block-control block-control--sideBar"><i></i></span>
</xf:if>
<xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
<xf:if is="$rootBreadcrumb AND $rootBreadcrumb.href != $xf.uri">
<xf:set var="$position" value="{{ $position + 1 }}" />
<xf:macro name="crumb"
arg-position="{$position}"
arg-href="{$rootBreadcrumb.href}"
arg-value="{$rootBreadcrumb.title}" />
</xf:if>
<xf:if is="$selectedNavEntry && $selectedNavEntry.href && $selectedNavEntry.href != $xf.uri && $selectedNavEntry.href != $rootBreadcrumb.href">
<xf:set var="$position" value="{{ $position + 1 }}" />
<xf:macro name="crumb"
arg-position="{$position}"
arg-href="{$selectedNavEntry.href}"
arg-value="{$selectedNavEntry.title}" />
</xf:if>
<xf:foreach loop="$breadcrumbs" value="$breadcrumb" if="$breadcrumb.href != $xf.uri">
<xf:set var="$position" value="{{ $position + 1 }}" />
<xf:macro name="crumb"
arg-position="{$position}"
arg-href="{$breadcrumb.href}"
arg-value="{$breadcrumb.value}" />
</xf:foreach>
</xf: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>
<xf:js src="brivium/technetium/extra.js" />]]></template>
<template title="account_avatar.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[.avatarControl
{
}
.avatarControl-preview
{
display: block;
float: left;
position: relative;
img
{
display: inline-block;
position: relative;
}
}
.avatarControl-inputs
{
margin-left: 110px;
}
.avatarCropper
{
display: inline-block;
vertical-align: bottom;
direction: ltr;
label
{
display: block;
overflow: hidden;
position: relative;
img
{
cursor: move;
}
}
.avatar--o
{
.m-avatarSize(96px);
}
}
@media (max-width: @xf-responsiveNarrow)
{
.avatarControl-preview
{
display: block;
float: none;
text-align: center;
}
.avatarControl-inputs
{
display: block;
margin-left: 0;
}
}
// classes from the cropping JS
.cropFrame
{
overflow: hidden;
position: relative;
}
.cropImage
{
position: absolute;
top: 0;
left: 0;
cursor: move;
max-width: none;
}
.cropControls
{
display: none;
}]]></template>
<template title="account_visitor_menu" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[<div class="menu-row __menu-row--highlighted">
<xf:macro name="visitor_panel_row" />
</div>
<xf:macro name="visitor_panel_row">
<div class="contentRow">
<div class="contentRow-figure">
<xf:avatar user="{$xf.visitor}" size="m" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />
</div>
<div class="contentRow-main">
<h3 class="contentRow-header"><xf:username user="$xf.visitor" rich="true" notooltip="true" /></h3>
<div class="contentRow-lesser">
<xf:usertitle user="$xf.visitor" />
</div>
<div class="contentRow-minor">
<!--[XF:stats_pairs:above_messages]-->
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('messages') }}</dt>
<dd>
<a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.message_count|number}
</a>
</dd>
</dl>
<!--[XF:stats_pairs:above_likes]-->
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('likes') }}</dt>
<dd>
<a href="{{ link('account/likes') }}" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.like_count|number}
</a>
</dd>
</dl>
<!--[XF:stats_pairs:above_points]-->
<xf:if is="$xf.options.enableTrophies">
<dl class="pairs pairs--justified fauxBlockLink">
<dt>{{ phrase('trophy_points') }}</dt>
<dd>
<a href="{{ link('members/trophies', $xf.visitor) }}" data-xf-click="overlay" class="fauxBlockLink-linkRow u-concealed">
{$xf.visitor.trophy_points|number}
</a>
</dd>
</dl>
</xf:if>
</div>
</div>
</div>
</xf:macro>
<!--[XF:menu_separator:below_visitor_panel]-->
<hr class="menu-separator menu-separator--hard" />
<ul class="listPlain listColumns listColumns--narrow listColumns--together">
<!--[XF:content_links:top]-->
<xf:if is="$xf.options.enableNewsFeed">
<li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
</xf:if>
<li><a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="menu-linkRow">{{ phrase('your_content') }}</a></li>
<li><a href="{{ link('account/likes') }}" class="menu-linkRow">{{ phrase('likes_received') }}</a></li>
<!--[XF:content_links:bottom]-->
</ul>
<!--[XF:menu_separator:below_content_links]-->
<hr class="menu-separator" />
<ul class="listPlain listColumns listColumns--narrow listColumns--together">
<!--[XF:account_links:top]-->
<li><a href="{{ link('account/account-details') }}" class="menu-linkRow">{{ phrase('account_details') }}</a></li>
<li><a href="{{ link('account/security') }}" class="menu-linkRow">{{ phrase('password_and_security') }}</a></li>
<li><a href="{{ link('account/privacy') }}" class="menu-linkRow">{{ phrase('privacy') }}</a></li>
<li><a href="{{ link('account/preferences') }}" class="menu-linkRow">{{ phrase('preferences') }}</a></li>
<xf:if is="$xf.visitor.canEditSignature()">
<li><a href="{{ link('account/signature') }}" class="menu-linkRow">{{ phrase('signature') }}</a></li>
</xf:if>
<xf:if is="$xf.app.userUpgradeCount">
<li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
</xf:if>
<xf:if is="$xf.app.connectedAccountCount">
<li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
</xf:if>
<li><a href="{{ link('account/following') }}" class="menu-linkRow">{{ phrase('following') }}</a></li>
<li><a href="{{ link('account/ignored') }}" class="menu-linkRow">{{ phrase('ignoring') }}</a></li>
<!--[XF:account_links:bottom]-->
</ul>
<!--[XF:menu_separator:below_account_links]-->
<hr class="menu-separator" />
<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>
<xf:if is="$xf.visitor.canPostOnProfile()">
<xf:form action="{{ link('members/post', $xf.visitor) }}" ajax="true"
data-redirect="off"
data-reset-complete="true"
data-no-auto-focus="true"
class="menu-footer">
<span class="u-srOnly" id="ctrl_message">{{ phrase('update_your_status:') }}</span>
<xf:textarea name="message" rows="1" autosize="true"
maxlength="{$xf.options.profilePostMaxLength}"
placeholder="{{ phrase('update_your_status...') }}"
data-xf-init="focus-trigger user-mentioner" data-display="< :next" aria-labelledby="ctrl_message" />
<div class="u-hidden u-hidden--transition u-inputSpacer">
<xf:button type="submit" class="button--primary">{{ phrase('post_verb') }}</xf:button>
</div>
</xf:form>
</xf:if>]]></template>
<template title="app_body.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// ######################################### MAIN BODY #################################
.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();
padding: @xf-elementSpacer;
background: @xf-contentBg;
}
.p-body-header
{
margin-bottom: ((@xf-elementSpacer) / 2);
}
.p-body-main
{
display: table;
table-layout: fixed;
width: 100%;
margin-bottom: auto;
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: (@xf-elementSpacer) / 2;
}
}
.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;
}
.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-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, .86em);
}
.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="2000770" version_string="2.0.7"><![CDATA[.p-breadcrumbs--outer
{
&.p-breadcrumbs--outer-top
{
margin-top: @xf-elementSpacer;
}
&:not(.p-breadcrumbs--outer-top)
{
margin-bottom: @xf-elementSpacer;
.p-breadcrumbs--inner
{
border-radius: 0;
border-bottom-left-radius: @xf-borderRadiusMedium;
border-bottom-right-radius: @xf-borderRadiusMedium;
}
}
}
.p-breadcrumbs--inner
{
.m-pageWidth();
.m-clearFix();
padding: 0;
background: @xf-paletteAccent1;
border-top-left-radius: @xf-borderRadiusMedium;
border-top-right-radius: @xf-borderRadiusMedium;
}
.p-breadcrumbs
{
.m-listPlain();
.m-clearFix();
/// margin-bottom: 5px;
/// line-height: 1.5;
position: relative;
&.p-breadcrumbs--bottom
{
/// margin-top: @xf-elementSpacer;
margin-bottom: 0;
border: 0;
border-top: @xf-borderSize solid @xf-borderColor;
}
> li
{
float: left;
margin-right: .8em;
font-size: @xf-fontSizeSmall;
a
{
display: inline-block;
vertical-align: bottom;
max-width: 300px;
.m-overflowEllipsis();
color: @xf-paletteNeutral1;
}
&:after,
&:before
{
display: inline-block;
}
&:after
{
content: '/';
margin-left: .5em;
color: @xf-paletteNeutral1;
}
&:last-child
{
margin-right: 0;
a
{
/// font-weight: @xf-fontWeightHeavy;
}
&:after
{
content: '';
}
}
}
padding: @xf-paddingLarge @xf-elementSpacer;
background-image: linear-gradient(to top, fade(@xf-paletteNeutral3, 5%) 0%, fade(@xf-paletteNeutral1, 5%) 100%);
border-bottom: @xf-borderSize solid @xf-borderColor;
}
@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, .72em, ltr);
/// .m-faContent(@fa-var-chevron-right, .72em, rtl);
/// margin-right: .5em;
}
}
}
}]]></template>
<template title="app_footer.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[.p-footer
{
.xf-publicFooter();
a
{
.xf-publicFooterLink();
}
}
.p-footer-middle
{
background: @xf-paletteAccent3;
}
.p-footer-inner
{
.m-pageWidth();
.m-clearFix();
padding: @xf-paddingLarge @xf-elementSpacer @xf-paddingLarge;
&:empty { display: none; }
}
.p-footer-custom
{
justify-content: space-between;
display: flex;
flex-direction: column;
flex-flow: row wrap;
color: xf-intensify(@xf-paletteNeutral1, 8.5%);
a { color: inherit; }
}
.footer-column
{
margin-top: 15px;
margin-bottom: 5px;
&.footer-column-1
{
width: 360px;
}
&.footer-column-2,
&.footer-column-3
{
width: 105px;
}
&.footer-column-4
{
width: 205px;
}
}
.footer-header
{
font-size: @xf-fontSizeNormal;
font-weight: @xf-fontWeightHeavy;
text-transform: uppercase;
color: @xf-paletteNeutral1;
}
.footer-body
{
font-weight: @xf-fontWeightLight;
}
.social-link
{
.m-clearFix();
margin-top: 25px;
margin-bottom: -5px;
a
{
float: left;
width: 32px;
line-height: 28px;
text-align: center;
color: #fff;
border-radius: 32px;
margin-right: 10px;
position: relative;
margin-bottom: 5px;
border: @xf-borderSizeMinorFeature solid @xf-paletteNeutral1;
}
}
.extra-link,
.contact-link
{
margin: 1em 0;
li{margin-bottom: 6px;}
i{margin-right: 15px;}
}
.p-footer-row
{
.m-clearFix();
/// margin-bottom: -@xf-paddingLarge;
float: right;
}
.p-footer-row-main
{
float: left;
margin: 1px 5px 1px 0;
display: inline-block;
}
.p-footer-row-opposite
{
float: left;
margin: 1px 0;
display: inline-block;
}
.p-footer-linkList
{
.m-listPlain();
.m-clearFix();
> li
{
float: left;
margin-right: .5em;
&:last-child
{
margin-right: 0;
}
a
{
padding: 2px 4px;
border-radius: @xf-borderRadiusSmall;
&:hover
{
text-decoration: none;
background-color: fade(@xf-publicFooterLink--color, 10%);
}
}
}
}
.p-footer-rssLink
{
> span
{
position: relative;
top: -1px;
display: inline-block;
width: 1.44em;
height: 1.44em;
line-height: 1.44em;
text-align: center;
font-size: .8em;
background-color: #FFA500;
border-radius: 2px;
}
.fa-rss
{
color: white;
}
}
.p-footer-copyright
{
/// margin-top: @xf-elementSpacer;
text-align: left;
font-size: @xf-fontSizeSmaller;
float: left;
margin: 2px 0;
}
.p-footer-debug
{
/// margin-top: @xf-paddingLarge;
text-align: right;
font-size: @xf-fontSizeSmallest;
.pairs > dt { color: inherit; }
}
@media (max-width: 1024px)
{
.p-footer-copyright,
.p-footer-row
{
float: none;
text-align: center;
}
.p-footer-row-main,
.p-footer-row-opposite
{
float: none;
}
}
@media (max-width: @xf-responsiveMedium)
{
.p-footer-row-main,
.p-footer-row-opposite
{
/// float: none;
}
.p-footer-copyright
{
text-align: left;
padding: 0 4px; // aligns with other links
}
.p-footer-row
{
float: none;
}
}]]></template>
<template title="app_nav.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[// navEl / Navigation Elements for header navigation
@user_avatarSize: 38px;
.m-navElHPadding(@padding)
{
.p-navEl-link
{
padding: 0 @padding;
&.p-navEl-link--splitMenu
{
padding-right: ((@padding) / 4);
}
&.p-navEl-link--menuTrigger
{
padding-right: ((@padding) / 3); // equal to splitTrigger padding-right
&:after
{
padding-left: ((@padding) / 4 + (@padding) / 3); // equal to splitMenu padding-right + splitTrigger padding-left
}
}
}
.p-navEl-splitTrigger
{
padding: 0 ((@padding) / 3);
}
}
.p-navEl
{
.m-clearFix();
}
.p-navEl-linkHolder
{
float: left;
}
.p-navEl-link
{
float: left;
.m-transition(all, @_nav-elTransitionSpeed);
.m-transitionProperty(opacity, background;);
&.p-navEl-link--menuTrigger
{
cursor: pointer;
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, .58em);
opacity: .5;
.m-transition(opacity, @_nav-elTransitionSpeed);
unicode-bidi: isolate; // try to keep this in the right position in RTL with LTR text
}
&:hover:after
{
opacity: 1;
}
}
}
.p-navEl-splitTrigger
{
float: left;
opacity: .5;
cursor: pointer;
text-decoration: none;
.m-transition(all, @_nav-elTransitionSpeed);
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, .58em);
}
&: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-clearFix();
display: flex;
align-items: flex-end;
padding-left: 0;
padding-right: 0;
}
.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;
&:hover
{
text-decoration: none;
}
i:after
{
.m-faBase();
font-size: @xf-fontSizeLargest;
.m-faContent(@fa-var-navicon, .86em);
vertical-align: bottom;
}
.p-nav-menuText
{
display: none;
}
}
.p-nav-smallLogo
{
/// display: none;
/// max-width: 100px;
align-self: center;
img
{
display: block;
/// max-height: @header-navHeight;
}
}
.p-nav-scroller
{
margin-right: auto;
max-width: 100%;
.has-no-flexbox &
{
float: left;
}
.hScroller-scroll:not(.is-calculated)
{
// IE11 seems to want to flash a vertical scrollbar without this here
overflow: hidden;
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-publicNav--background-color, transparent),
@xf-publicNav--color,
xf-intensify(@xf-publicNav--color, 10%)
);
}
}
.p-nav-list
{
.m-listPlain();
.m-clearFix();
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: none;
}
}
&:not(.is-selected):not(.is-menuOpen)
{
&: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*2;
padding-bottom: @xf-publicNavPaddingV*2;
line-height: 1.43;
}
}
.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;
.has-no-flexbox &
{
float: right;
}
}
.p-navgroup
{
float: left;
.m-clearFix();
/// background: @xf-publicHeaderAdjustColor;
border-top-left-radius: @xf-borderRadiusMedium;
border-top-right-radius: @xf-borderRadiusMedium;
&.p-discovery
{
/// margin-left: .5em;
&.p-discovery--noSearch
{
margin-left: 0;
}
}
}
.p-navgroup-link
{
float: right;
padding: 17.5px;
/// border-left: 1px solid @xf-publicHeaderAdjustColor;
&:first-of-type
{
/// border-top-left-radius: @xf-borderRadiusMedium;
border-left: none;
}
&:last-of-type
{
/// border-top-right-radius: @xf-borderRadiusMedium;
}
&:hover
{
text-decoration: none;
/// background: xf-intensify(@xf-publicHeaderAdjustColor, 5%);
}
&.p-navgroup-link--user
{
.m-overflowEllipsis();
max-width: 200px;
position: relative;
float: right;
padding: 11px 40px 11px 20px;
border-left: @xf-borderSize solid fade(@xf-paletteNeutral1, 5%);
.avatar { .m-avatarSize(@user_avatarSize); }
.p-navgroup-linkText
{
margin-left: 1em;
line-height: @user_avatarSize;
}
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down);
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
}
&.is-menuOpen
{
background: transparent;
}
}
&.badgeContainer
{
/// opacity: .6;
position: relative;
&:after
{
position: absolute;
right: 18px;
top: 12px;
padding: 1px 3.5px;
margin: 0;
font-size: 10px;
line-height: 11px;
border-radius: 100%;
}
&:hover,
&.badgeContainer--highlighted
{
opacity: 1;
}
}
&.is-menuOpen
{
.xf-publicNavTabMenuOpen();
/// .m-dropShadow(0, 5px, 10px, 0, .35);
opacity: 1;
}
&.p-navgroup-link--iconic
{
i:after
{
display: inline-block;
margin-bottom: -2px;
background: url('styles/brivium/technetium/extra/nav-icons.png');
}
}
&.p-navgroup-link--conversations i:after
{
content: '';
width: 28px;
height: 23px;
background-position: -38px center;
}
&.p-navgroup-link--alerts i:after
{
content: '';
width: 18px;
height: 23px;
background-position: -10px center;
}
&.p-navgroup-link--whatsnew i:after
{
/// .m-faContent(@fa-var-bolt, .5em);
}
&.p-navgroup-link--search i:after
{
content: '';
width: 16px;
height: 23px;
background-position: -76px center;
}
&.p-navgroup-link--conversations,
&.p-navgroup-link--alerts,
&.p-navgroup-link--search
{
.p-navgroup-linkText { display: none; }
}
}
.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--user
{
padding: 11px;
&:after { 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 - @_navAccount-hPadding);
.p-navgroup
{
background: none;
margin-left: 0;
}
.p-navgroup-link
{
border: none;
border-radius: @xf-borderRadiusMedium;
&.is-menuOpen
{
.m-borderBottomRadius(0);
}
}
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.p-navgroup-link
{
.p-navgroup--member &
{
margin-left: 5px;
&:first-of-type
{
margin-left: 0;
}
}
}
}
@media (max-width: 359px)
{
.p-navgroup-link&.p-navgroup-link--user
{
/// display: none;
}
}
@media (max-width: 374px)
{
.p-navgroup-link.p-navgroup-link--register
{
display: none;
}
}]]></template>
<template title="app_sectionlinks.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// SUB SECTION LINKS
.p-sectionLinks
{
.xf-publicSubNav();
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-publicSubNav--background-color, transparent),
@xf-publicSubNav--color,
@xf-publicSubNavElHover--color
);
}
&.p-sectionLinks--empty
{
height: 10px;
}
}
.p-sectionLinks-inner
{
.m-clearFix();
.m-pageWidth();
padding-left: max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
padding-right: max(0px, @xf-pageEdgeSpacer - @xf-publicSubNavPaddingH);
}
.p-sectionLinks-list
{
.m-listPlain();
font-size: 0;
a
{
color: inherit;
}
> li
{
display: inline-block;
}
.m-navElHPadding(@xf-publicSubNavPaddingH);
.p-navEl
{
font-size: @xf-publicSubNav--font-size;
&:hover
{
.xf-publicSubNavElHover();
a
{
text-decoration: @xf-publicSubNavElHover--text-decoration;
}
}
&.is-menuOpen
{
.xf-publicSubNavElMenuOpen();
.m-borderBottomRadius(0);
/// .m-dropShadow(0, 5px, 10px, 0, .35);
}
}
.p-navEl-link,
.p-navEl-splitTrigger
{
padding-top: @xf-publicSubNavPaddingV;
padding-bottom: @xf-publicSubNavPaddingV;
}
}
@media (max-width: @xf-publicNavCollapseWidth)
{
.has-js .p-sectionLinks
{
display: none;
}
}]]></template>
<template title="app_title.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[.p-title
{
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
margin-bottom: -5px;
&.p-title--noH1
{
flex-direction: row-reverse;
}
.has-no-flexbox &
{
.m-clearFix();
}
}
.p-title-value
{
padding: 0;
margin: 0 0 5px 0;
font-size: @xf-fontSizeLarger;
font-weight: @xf-fontWeightHeavy;
min-width: 0;
margin-right: auto;
.has-no-flexbox &
{
float: left;
}
.label
{
vertical-align: 3px;
}
}
.p-title-pageAction
{
margin-bottom: 5px;
.has-no-flexbox &
{
float: right;
}
}
.p-description
{
margin: 5px 0 0;
padding: 0;
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
}
@media (max-width: @xf-responsiveNarrow)
{
.p-title-value
{
font-size: @xf-fontSizeLarger;
}
}]]></template>
<template title="app_user_banners.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[.m-userBannerVariation(@color; @bg; @border: false)
{
color: @color;
background: @bg;
border-color: xf-intensify(@bg, 10%);
& when (iscolor(@border))
{
border-color: @border;
}
}
.userBanner
{
font-size: @xf-fontSizeSmaller;
font-weight: @xf-fontWeightNormal;
font-style: normal;
padding: 4px @xf-paddingMedium;
/// border: 1px solid transparent;
border-radius: @xf-borderRadiusSmall;
text-align: center;
display: inline-block;
line-height: 1.4;
strong
{
font-weight: inherit;
}
// variations
&.userBanner--hidden
{
background: none;
border: none;
box-shadow: none;
}
&.userBanner--staff,
&.userBanner--primary
{
.m-userBannerVariation(white, @xf-paletteAccent1, @xf-paletteAccent1);
}
&.userBanner--accent
{
.m-userBannerVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
}
&.userBanner--red { .m-userBannerVariation(white, #d80000); }
&.userBanner--green { .m-userBannerVariation(white, green); }
&.userBanner--olive { .m-userBannerVariation(white, olive); }
&.userBanner--lightGreen { .m-userBannerVariation(black, #ccf9c8, #bee8ba); }
&.userBanner--blue { .m-userBannerVariation(white, #0008e3); }
&.userBanner--royalBlue { .m-userBannerVariation(white, royalblue); }
&.userBanner--skyBlue { .m-userBannerVariation(white, #7cc3e0); }
&.userBanner--gray { .m-userBannerVariation(white, gray); }
&.userBanner--silver { .m-userBannerVariation(black, silver); }
&.userBanner--yellow { .m-userBannerVariation(black, #ffff91, #e6e687); }
&.userBanner--orange { .m-userBannerVariation(black, #ffcb00); }
}]]></template>
<template title="attachment_macros" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[<xf:macro name="attachment_list_item" arg-attachment="!" arg-canView="!">
<li class="attachment">
<div class="attachment-figure">
<xf:if is="$attachment.has_thumbnail">
<xf:macro template="lightbox_macros" name="setup" arg-canViewAttachments="{$canView}" />
<div class="attachment-icon attachment-icon--img">
<a href="{{ link('attachments', $attachment) }}" target="_blank" class="{{ $canView ? 'js-lbImage' : '' }}">
<img src="{$attachment.thumbnail_url}" alt="{$attachment.filename}" />
</a>
</div>
<xf:else />
<div class="attachment-icon" data-extension="{$attachment.extension}">
<a href="{{ link('attachments', $attachment) }}" target="_blank"><i aria-hidden="true"></i></a>
</div>
</xf:if>
</div>
<div class="attachment-main">
<div class="attachment-name">
<a href="{{ link('attachments', $attachment) }}" target="_blank" title="{$attachment.filename}">{$attachment.filename}</a>
</div>
<div class="attachment-details">
<dl class="pairs pairs--justified">
<dt>File size</dt>
<dd><span class="attachment-details-size">{$attachment.file_size|file_size}</span></dd>
</dl>
<dl class="pairs pairs--justified">
<dt>Download</dt>
<dd><span class="attachment-details-views">{$attachment.view_count|number}</span></dd>
</dl>
</div>
</div>
</li>
</xf:macro>]]></template>
<template title="attachments.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[/// @_attach-thumbSize: xf-option('attachmentThumbnailDimensions', px);
@_attach-thumbSize: 60px;
.attachment
{
display: inline-block;
.xf-minorBlockContent(no-border);
border-radius: @xf-borderRadiusSmall;
padding: @xf-paddingLargest;
width: 290px;
background: @xf-paletteNeutral3;
}
.attachment-icon
{
overflow: hidden;
text-align: center;
height: @_attach-thumbSize;
line-height: @_attach-thumbSize;
font-size: 0;
background: @xf-paletteAccent1;
border-radius: @xf-borderRadiusSmall;
min-width: @_attach-thumbSize;
a:hover
{
text-decoration: none;
}
&.attachment-icon--img
{
a,
img
{
display: inline-block;
vertical-align: middle;
}
img
{
max-height: @_attach-thumbSize;
max-width: 100%;
}
}
i
{
display: block;
height: @_attach-thumbSize;
&:before
{
display: inline-block;
.m-faBase();
.m-faContent(@fa-var-file-o, .86em);
font-size: min(.66 * @_attach-thumbSize, 100px);
vertical-align: middle;
color: @xf-paletteNeutral1;
border-radius: 100%;
}
}
// text files
&[data-extension="txt"],
&[data-extension="patch"],
&[data-extension="diff"]
{
i:before {
.m-faContent(@fa-var-file-o, .86em); }
}
// code files
&[data-extension="c"],
&[data-extension="cpp"],
&[data-extension="h"],
&[data-extension="htm"],
&[data-extension="html"],
&[data-extension="js"],
&[data-extension="json"],
&[data-extension="php"],
&[data-extension="pl"],
&[data-extension="py"],
&[data-extension="xml"]
{
i:before {
.m-faContent(@fa-var-file-code-o, .86em); }
}
// archive files
&[data-extension="7z"],
&[data-extension="gz"],
&[data-extension="rar"],
&[data-extension="tar"],
&[data-extension="zip"]
{
i:before
{
display: inline-block;
content: "";
width: @_attach-thumbSize;
height: @_attach-thumbSize;
background: url(styles/brivium/technetium/extra/archive-files-icon.png) no-repeat top;
}
}
// image files
&[data-extension="gif"],
&[data-extension="jpe"],
&[data-extension="jpeg"],
&[data-extension="jpg"],
&[data-extension="png"]
{
i:before {
.m-faContent(@fa-var-file-text, .86em); }
}
// audio files
&[data-extension="aac"],
&[data-extension="mp3"],
&[data-extension="ogg"],
&[data-extension="wav"]
{
i:before {
.m-faContent(@fa-var-file-sound-o, .86em); }
}
// video files
&[data-extension="avi"]
{
i:before {
.m-faContent(@fa-var-file-video-o, .86em); }
}
// special files
&[data-extension="xls"],
&[data-extension="xlsx"]
{
i:before {
.m-faContent(@fa-var-file-excel-o, .86em); }
}
&[data-extension="pdf"]
{
i:before {
.m-faContent(@fa-var-file-pdf-o, .86em); }
}
&[data-extension="ppt"],
&[data-extension="pptx"]
{
i:before {
.m-faContent(@fa-var-file-powerpoint-o, .86em); }
}
&[data-extension="doc"],
&[data-extension="docx"]
{
i:before {
.m-faContent(@fa-var-file-word-o, .86em); }
}
}
.attachment-main
{
.m-clearFix();
margin-left: @xf-paddingLargest;
flex: 1;
min-width: 0;
&:before
{
/// content: "";
display: block;
margin-top: -5px;
}
}
.attachment-name
{
margin-top: 1px;
.m-overflowEllipsis();
font-size: @xf-fontSizeSmall;
a{ color: @xf-paletteNeutral1; }
}
.attachment-details
{
font-size: @xf-fontSizeSmall;
color: rgb(137, 164, 199);
.m-clearFix();
.pairs > dt
{
color: rgb(137, 164, 199);
}
line-height: 24px;
margin-top: 4px;
margin-bottom: -6px;
}
.attachment-details-size { float: left; }
.attachment-details-views { float: right; }
.attachmentList
{
.m-listPlain();
display: flex;
flex-wrap: wrap;
align-items: stretch;
/// margin-bottom: -5px;
padding: @xf-paddingLarge;
.attachment
{
margin: @xf-paddingLarge;
min-width: 0;
display: flex;
/// flex-direction: column;
}
.attachment-icon
{
flex-grow: 1;
display: flex;
height: auto;
/// line-height: 1;
align-items: center;
a
{
margin: auto;
}
i
{
height: auto;
}
}
}
.attachUploadList
{
.m-listPlain();
.xf-contentAltBase();
border: @xf-borderSize solid @xf-borderColor;
border-radius: @xf-borderRadiusSmall;
margin-bottom: @xf-paddingLarge;
&.attachUploadList--spaced
{
margin-top: @xf-paddingLarge;
}
> li
{
border-bottom: @xf-borderSize solid @xf-borderColorLight;
padding: @xf-paddingMedium;
&:last-child
{
border-bottom: none;
}
&.is-uploadError
{
.contentRow-title span // span needed due to opacity creating new stacking context
{
text-decoration: line-through;
opacity: .5;
}
.contentRow-figure
{
opacity: .5;
}
}
}
}
.attachUploadList-insertAll,
.attachUploadList-insertRow
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
span
{
vertical-align: middle;
}
}
.attachUploadList-figure.contentRow-figure
{
width: 100px;
min-height: 50px;
img
{
max-height: 100px;
max-width: 100px;
}
}
.attachUploadList-placeholder
{
display: block;
width: 100px;
&:before
{
display: inline-block;
.m-faBase();
.m-faContent(@fa-var-file-o, .86em);
font-size: 60px;
vertical-align: middle;
color: @xf-textColorFeature;
border-radius: 100%;
}
}
.attachUploadList-progress
{
position: relative;
i
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: @xf-progressBarColor;
color: contrast(@xf-progressBarColor);
border-radius: @xf-borderRadiusMedium;
padding-right: .2em;
text-align: right;
font-style: normal;
white-space: nowrap;
min-width: 2em;
.m-transition(width);
}
}
.attachUploadList-error
{
color: @xf-textColorAttention;
}
@media (max-width: @xf-responsiveNarrow)
{
.attachUploadList-figure.contentRow-figure
{
width: 50px;
img
{
max-height: 50px;
max-width: 50px;
}
}
.attachUploadList-placeholder
{
display: block;
width: 50px;
&:before
{
font-size: 30px;
}
}
}]]></template>
<template title="bb_code.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[@_bbCodeBlock-spacing: .75em;
@_bbCodeBlock-paddingV: @xf-paddingLargest;
@_bbCodeBlock-paddingH: @xf-paddingLargest;
@_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2;
.bbCodeBlock
{
margin: @_bbCodeBlock-spacing 0;
.xf-bbCodeBlock();
&.bbCodeBlock--quote
{
.bbCodeBlock-content
{
font-size: @xf-fontSizeSmall;
}
}
}
.bbCodeBlock-title
{
padding: 8px @_bbCodeBlock-paddingH;
.xf-bbCodeBlockTitle();
.m-clearFix();
position: relative;
}
a.bbCodeBlock-sourceJump
{
color: inherit;
text-decoration: none;
&:hover
{
text-decoration: underline;
}
&:after
{
.m-faBase();
.m-faContent(@fa-var-arrow-circle-up, .86em);
display: inline-block;
margin-left: 5px;
}
}
.bbCodeBlock-content
{
position: relative;
padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
}
.bbCodeBlock-expandLink
{
display: none;
position: absolute;
top: (@xf-bbCodeBlockExpandHeight) + (@_bbCodeBlock-paddingV * 2) - (@_bbCodeBlock-expandTriggerHeight);
left: 0;
right: 0;
height: @_bbCodeBlock-expandTriggerHeight;
cursor: pointer;
.m-gradient(
fade(@xf-bbCodeBlock--background-color, 0%),
xf-default(@xf-bbCodeBlock--background-color, transparent),
transparent,
0%,
80%
);
a
{
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
font-size: @xf-fontSizeSmall;
color: fade(@xf-textColorAttention, 90%);
text-decoration: none;
}
}
.bbCodeBlock--screenLimited
{
.bbCodeBlock-content
{
max-height: 300px;
max-height: 70vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
.bbCodeBlock--expandable
{
overflow: hidden;
.m-transition();
.m-transitionProperty(-xf-height, height, padding, margin, border;);
.bbCodeBlock-content
{
overflow: hidden;
.bbCodeBlock:not(.bbCodeBlock--expandable) .bbCodeBlock-content
{
overflow: visible;
}
.bbCodeBlock.bbCodeBlock--screenLimited .bbCodeBlock-content
{
overflow: auto;
}
}
.bbCodeBlock-expandContent
{
max-height: @xf-bbCodeBlockExpandHeight;
overflow: hidden;
}
&.is-expandable
{
.bbCodeBlock-expandLink
{
display: block;
}
}
&.is-expanded
{
.bbCodeBlock-expandContent
{
max-height: none;
}
.bbCodeBlock-expandLink
{
display: none;
}
}
}
.bbCodeCode
{
margin: 0;
padding: 0;
font-family: @xf-fontFamilyCode;
font-size: @xf-fontSizeSmall;
line-height: @xf-lineHeightDefault;
-ltr-rtl-text-align: left;
direction: ltr;
white-space: pre;
position: relative;
.m-tabSize();
code
{
font-family: inherit;
}
.prism-token
{
&.prism-comment,
&.prism-prolog,
&.prism-doctype,
&.prism-cdata
{
color: #a50;
}
&.prism-constant
{
color: #05a;
}
&.prism-tag
{
color: #170;
}
&.prism-boolean
{
color: #219;
}
&.prism-symbol,
&.prism-atrule,
&.prism-keyword
{
color: #708;
}
&.prism-selector,
&.prism-function
{
color: #05a;
}
&.prism-deleted
{
color: #d44;
}
&.prism-inserted
{
color: #292;
}
&.prism-string,
&.prism-attr-value
{
color: #a11;
}
&.prism-number
{
color: #164;
}
&.prism-attr-name,
&.prism-char,
&.prism-builtin
{
color: #00c;
}
&.prism-regex,
&.prism-important,
&.prism-variable,
&.prism-package
{
color: #05a;
}
&.prism-class-name,
&.prism-important,
&.prism-bold
{
color: #00f;
}
&.prism-bold
{
font-weight: bold;
}
&.prism-italic,
&.prism-constant
{
color: #05a;
font-style: italic;
}
&.prism-entity
{
cursor: help;
}
}
}
.bbCodeInline
{
margin: 0;
.xf-bbCodeInlineCode();
font-family: @xf-fontFamilyCode;
line-height: @xf-lineHeightDefault;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.bbCodeSpoiler
{
margin: @_bbCodeBlock-spacing 0;
}
.bbCodeSpoiler-button
{
.has-no-js & { display: none; }
}
.bbCodeSpoiler-content
{
.m-hiddenEl(true);
.has-no-js & { display: block !important; }
> .bbCodeBlock--spoiler
{
margin: .2em 0 0;
}
}]]></template>
<template title="core_action_bar.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[.actionBar
{
.m-clearFix();
}
.actionBar-set
{
&.actionBar-set--internal
{
float: left;
margin-left: -3px;
> .actionBar-action:first-child
{
margin-left: 0;
}
color: @xf-textColorMuted;
.message-attribution-main
{
margin-right: 6px;
}
.actionBar-action
{
color: @xf-paletteAccent1;
}
}
&.actionBar-set--external
{
float: right;
margin-right: -3px;
> .actionBar-action:last-child
{
margin-right: 0;
}
.message-attribution-opposite
{
margin-left: 12px;
}
}
}
.actionBar-action
{
padding: 3px;
border: 1px solid transparent;
border-radius: @xf-borderRadiusMedium;
margin-left: 5px;
color: @xf-paletteAccent2;
&:before
{
.m-faBase();
font-size: 90%;
}
&.actionBar-action--menuTrigger
{
display: none;
&:after
{
.m-faBase();
.m-faContent(" @{fa-var-caret-down}");
}
&.is-menuOpen
{
// get rid of text decoration when the menu opens
text-decoration: none;
}
}
&.actionBar-action--inlineMod input
{
.m-checkboxAligner();
}
&.actionBar-action--mq
{
&:before { .m-faContent("@{fa-var-plus}\20"); }
&.is-selected
{
background-color: @xf-contentHighlightBg;
border-color: @xf-borderColorHighlight;
&:before { .m-faContent("@{fa-var-minus}\20"); }
}
}
&.actionBar-action--reply:before { .m-faContent("@{fa-var-comments-o}\20"); }
&.actionBar-action--like:before { .m-faContent("@{fa-var-thumbs-o-up}\20"); }
&.actionBar-action--report:before { .m-faContent("@{fa-var-files-o}\20"); }
&.actionBar-action--edit:before { .m-faContent("@{fa-var-pencil}\20"); }
&.actionBar-action--delete:before { .m-faContent("@{fa-var-trash-o}\20"); }
&.actionBar-action--ip:before { .m-faContent("@{fa-var-thumb-tack}\20"); }
&.actionBar-action--warn:before { .m-faContent("@{fa-var-exclamation-triangle}\20"); }
&.actionBar-action--history:before { .m-faContent("@{fa-var-clock-o}\20"); }
}
@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="2000770" version_string="2.0.7"><![CDATA[// ################################# BLOCKS ##################
.blocks
{
margin-bottom: @xf-elementSpacer;
&:last-child
{
margin-bottom: 0;
}
.block
{
margin-bottom: (@xf-elementSpacer / 2);
&:last-child
{
margin-bottom: 0;
}
}
}
.blocks-header
{
font-size: @xf-fontSizeLarger;
font-weight: @xf-fontWeightNormal;
color: @xf-textColorMuted;
margin-bottom: 5px;
}
.blocks-textJoiner
{
display: table;
width: 100%;
margin-bottom: (@xf-elementSpacer / 2);
padding: 0 @xf-paddingMedium;
> span
{
display: table-cell;
position: relative;
&:before
{
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: @xf-borderSize solid @xf-borderColor;
}
}
> em
{
display: table-cell;
padding: 0 @xf-paddingLarge;
width: 1%;
white-space: nowrap;
font-size: @xf-fontSizeLargest;
line-height: 1;
font-style: normal;
text-align: center;
}
}
.block
{
margin-bottom: @xf-elementSpacer;
&.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
{
.block-outer:not(.block-outer--after) { margin-top: -10px; }
}
}
.block-outer
{
padding-bottom: @xf-blockPaddingV;
.m-clearFix();
&:empty
{
display: none;
}
&.block-outer--after
{
padding-top: @xf-blockPaddingV;
padding-bottom: 0;
}
.block-outer-hint
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
}
.button
{
background: transparent !important;
color: @xf-paletteAccent1 !important;
padding-top: @xf-paddingMedium;
padding-bottom: @xf-paddingMedium;
}
.block--messages &
{
+ .block-container.lbContainer
{
border-top: @xf-borderSize solid @xf-borderColor;
border-radius: 0;
}
}
}
.block-outer-main { float: left; }
.block-outer-opposite { float: right; }
.block-outer-middle { text-align: center; }
.block-container
{
.xf-contentBase();
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
.m-transition(); .m-transitionProperty(border margin); // edgeSpacerRemoval
.overlay &
{
border-radius: 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
{
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*1.5;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-blockHeader();
.m-clearFix();
.m-hiddenLinks();
position: relative;
&.block-header--separated
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
.block-desc
{
color: fade(@xf-blockHeader--color, 70);
.m-textColoredLinks();
}
.overlay &
{
border-radius: 0;
}
}
.block-minorHeader
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-blockMinorHeader();
.m-clearFix();
.m-hiddenLinks();
position: relative;
.block-body + &
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
.block-desc
{
.m-textColoredLinks();
}
&--small
{
font-size: @xf-fontSizeSmall;
}
}
.block-tabHeader
{
padding: 0;
margin: 0;
font-weight: @xf-fontWeightNormal;
.xf-blockTabHeader();
.m-tabsTogether(xf-default(@xf-blockTabHeader--font-size, @xf-fontSizeNormal));
.tabs-tab
{
padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
&:hover
{
color: @xf-blockTabHeaderSelected--color;
background: fade(@xf-blockTabHeaderSelected--color, 10%);
}
&.is-active
{
background: none;
.xf-blockTabHeaderSelected();
}
}
.block-tabHeader-extra
{
float: right;
color: inherit;
font-size: @xf-blockTabHeader--font-size;
padding: @xf-blockPaddingV @xf-blockPaddingH;
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-blockTabHeader--background-color, transparent),
@xf-blockTabHeader--color,
@xf-blockTabHeaderSelected--color
);
}
}
.block-minorTabHeader
{
padding: 0;
margin: 0;
font-weight: @xf-fontWeightNormal;
.xf-blockMinorTabHeader();
.m-tabsTogether(xf-default(@xf-blockMinorTabHeader--font-size, @xf-fontSizeNormal));
.tabs-tab
{
padding: @xf-blockPaddingV @xf-blockPaddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
&:hover
{
color: @xf-blockMinorTabHeaderSelected--color;
}
&.is-active
{
background: none;
.xf-blockMinorTabHeaderSelected();
}
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-blockMinorTabHeader--background-color, transparent),
@xf-blockMinorTabHeader--color,
@xf-blockMinorTabHeaderSelected--color
);
}
}
.block-filterBar
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
.xf-blockFilterBar();
.filterBar-filterToggle
{
background: mix(
xf-default(@xf-blockFilterBar--color, @xf-linkColor),
xf-default(@xf-blockFilterBar--background-color, transparent),
8%
);
}
.filterBar-filterToggle,
.filterBar-menuTrigger
{
&:hover
{
text-decoration: none;
background: mix(
xf-default(@xf-blockFilterBar--color, @xf-linkColor),
xf-default(@xf-blockFilterBar--background-color, transparent),
16%
);
}
}
.filterBar-menuTrigger
{
margin-right: -5px;
}
}
.block-textHeader
{
margin: @xf-blockPaddingV/2 0;
padding: 0;
font-weight: @xf-fontWeightNormal;
.xf-blockTextHeader();
.m-clearFix();
.m-hiddenLinks();
&.block-textHeader--scaled
{
font-size: inherit;
}
.block-textHeader-highlight
{
color: @xf-textColor;
}
.block-desc
{
.m-textColoredLinks();
}
&:first-child
{
margin-top: 0;
}
}
.block-formSectionHeader
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-formSectionHeader();
.m-clearFix();
.m-hiddenLinks();
.block-desc
{
.m-textColoredLinks();
}
.block-container > &:first-child
{
border-top: none;
}
.block-formSectionHeader-aligner
{
@_blockPaddingShift: (unit(@xf-formLabelWidth) / 100) * (@xf-blockPaddingH);
display: inline-block;
text-align: right;
min-width: @xf-formLabelWidth;
min-width: ~"calc((@{xf-formLabelWidth}) - (@{_blockPaddingShift}) - (@{xf-formRowPaddingHInner}) - (@{xf-borderSize}))";
max-width: 100%;
@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;
}
}
.block-desc
{
display: block;
font-size: @xf-fontSizeSmaller;
font-weight: @xf-fontWeightNormal;
.block-tooltip &
{
display: none;
font-size: @xf-tooltip--font-size;
font-weight: @xf-fontWeightNormal;
color: @xf-tooltip--color;
position: absolute;
background: @xf-tooltip--background-color;
padding: @xf-tooltip--padding-top @xf-tooltip--padding-right @xf-tooltip--padding-bottom @xf-tooltip--padding-left;
border-radius: @xf-tooltip--border-radius;
top: 50%;
transform: translateY(-50%);
&:before
{
display: inline-block;
content: "";
position: absolute;
top: 50%;
right: 100%;
border: 5px solid transparent;
border-left-width: 0;
border-right-color: @xf-tooltip--background-color;
transform: translateY(-50%);
}
}
}
.block-icon
{
display: inline-block;
i
{
line-height: 0;
font-size: @xf-fontSizeLarge;
&:before
{
.m-faBase();
.m-faContent(@fa-var-th-list);
margin-right: 10px;
}
.block[data-widget-section="staffMembers"] &:before
{
.m-faContent(@fa-var-users);
}
.block[data-widget-section="onlineNow"] &:before
{
.m-faContent(@fa-var-users);
}
.block[data-widget-key="forum_overview_forum_statistics"] &:before
{
.m-faContent(@fa-var-bar-chart);
}
.block[data-widget-definition="share_page"] &:before
{
.m-faContent(@fa-var-share-alt);
}
}
}
.block-control
{
position: absolute;
top: ~"calc(50%)";
right: @xf-blockPaddingH * 1.5;
transform: translateY(-50%);
cursor: pointer;
line-height: 0;
i:after
{
.m-faBase();
}
&.block-control--collapse i:after
{
.m-faContent(@fa-var-angle-up);
}
.active &
{
&.block-control--collapse i:after
{
.m-faContent(@fa-var-angle-down);
}
}
&.block-control--sideBar
{
i:after
{
.m-faContent(@fa-var-sliders);
color: @xf-paletteNeutral1;
}
@media (max-width: @xf-responsiveWide)
{
display: none;
}
}
}
.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-row
{
margin: 0;
padding: @xf-blockPaddingV @xf-blockPaddingH;
.m-clearFix();
&.block-row--alt
{
.xf-contentAltBase();
}
&.block-row--minor
{
font-size: @xf-fontSizeSmall;
}
&.block-row--separated
{
padding-top: (@xf-blockPaddingV) * 2;
padding-bottom: (@xf-blockPaddingV) * 2;
+ .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-row--separator
{
margin: auto @xf-blockPaddingH;
padding: 0;
border: none;
border-top: @xf-borderSize solid @xf-borderColorLight;
}
.block-footer
{
padding: @xf-blockPaddingV @xf-blockPaddingH;
.xf-blockFooter();
.m-clearFix();
&:first-child
{
border: none;
}
[data-app=admin] &
{
.block-footer-counter,
.block-footer-select
{
line-height: 30px;
}
}
&:not(.block-footer--split)
{
.block-footer-counter
{
float: left;
}
.block-footer-controls
{
float: right;
}
}
&.block-footer--split
{
display: flex;
align-items: center;
.block-footer-main,
.block-footer-counter
{
flex-grow: 1;
.has-no-flexbox &
{
float: left;
}
}
.block-footer-select:not(:last-child)
{
margin: 0 1em;
}
.block-footer-opposite,
.block-footer-controls
{
margin-left: auto;
.has-no-flexbox &
{
float: right;
}
}
.block-footer-controls
{
display: flex;
align-items: center;
flex-flow: row wrap;
margin: -5px -10px;
.input, .button
{
margin: 5px;
max-width: 175px;
}
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.block-outer
{
text-align: center;
}
.block-outer-main,
.block-outer-opposite
{
float: none;
text-align: center;
}
.block-outer-main + .block-outer-opposite
{
margin-top: @xf-paddingMedium;
}
}]]></template>
<template title="core_blockend.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// This contains rules that apply to various block and block-related systems. This file should be included
// after all of the primary definitions to ensure the rules override.
.blockMessage,
.blockStatus,
.block-row
{
p:first-child
{
margin-top: 0;
}
p:last-child
{
margin-bottom: 0;
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.block-container,
.blockMessage
{
margin-left: -@xf-pageEdgeSpacer;
margin-right: -@xf-pageEdgeSpacer;
border-radius: 0;
/// border-left: none;
/// border-right: none;
}
.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_button.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// ############################ BUTTONS #################
.button,
a.button // needed for specificity over a:link
{
.m-buttonBase();
a
{
color: inherit;
text-decoration: none;
}
.xf-buttonDefault();
/// .m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
&:hover,
&:focus,
&:active
{
background-color: @xf-paletteNeutral3;
}
&.button--primary
{
.xf-buttonPrimary();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));
}
&.button--cta
{
.xf-buttonCta();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));
}
&.button--link
{
// block colors
background: rgb(127, 127, 127);
color: @xf-paletteNeutral1;
.m-buttonBorderColorVariation(@xf-borderColor);
&:hover,
&:active,
&:focus
{
text-decoration: none;
/// background: @xf-contentHighlightBg;
}
}
&.button--longText
{
white-space: normal;
text-align: left;
}
&.is-disabled
{
.xf-buttonDisabled();
.m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
&:hover,
&:active,
&:focus
{
background: xf-default(@xf-buttonDisabled--background-color, transparent) !important;
}
}
&.button--scroll
{
background: fade(xf-default(@xf-buttonDefault--background-color, transparent), 75%);
padding: 5px 8px;
.m-dropShadow();
}
&.button--small
{
font-size: @xf-fontSizeSmaller;
padding: 3px 6px;
}
&.button--fullWidth
{
display: block;
}
&.button--icon
{
> .button-text:before
{
.m-faBase();
font-size: 120%;
vertical-align: -.1em;
display: inline-block;
margin: -.255em 6px -.255em 0;
}
&.button--iconOnly > .button-text
{
&:before
{
margin: 0;
}
}
&--add { .m-buttonIcon(@fa-var-plus-square, .79em); }
&--confirm { .m-buttonIcon(@fa-var-check, 1em); }
&--write { .m-buttonIcon(@fa-var-pencil-square-o, 1em); }
&--import { .m-buttonIcon(@fa-var-upload, .93em); }
&--export { .m-buttonIcon(@fa-var-download, .93em); }
&--download { .m-buttonIcon(@fa-var-download, .93em); }
&--disable { .m-buttonIcon(@fa-var-power-off); }
&--edit { .m-buttonIcon(@fa-var-pencil, .86em); }
&--save { .m-buttonIcon(@fa-var-save, .86em); }
&--reply { .m-buttonIcon(@fa-var-mail-reply, 1em); }
&--quote { .m-buttonIcon(@fa-var-quote-left, .93em); }
&--purchase { .m-buttonIcon(@fa-var-credit-card, 1.11em); }
&--payment { .m-buttonIcon(@fa-var-credit-card, 1.08em); }
&--convert { .m-buttonIcon(@fa-var-flash, .5em); }
&--search { .m-buttonIcon(@fa-var-search, .93em); }
&--sort { .m-buttonIcon(@fa-var-sort, .58em); }
&--upload { .m-buttonIcon(@fa-var-upload, .93em); }
&--attach { .m-buttonIcon(@fa-var-paperclip, .79em); }
&--login { .m-buttonIcon(@fa-var-lock, .65em); }
&--rate { .m-buttonIcon(@fa-var-star-half-empty, .93em); }
&--config { .m-buttonIcon(@fa-var-cog, .86em); }
&--refresh { .m-buttonIcon(@fa-var-refresh, .86em); }
&--translate { .m-buttonIcon(@fa-var-globe, .86em); }
&--vote { .m-buttonIcon(@fa-var-check-circle-o, .86em); }
&--result { .m-buttonIcon(@fa-var-bar-chart-o, 1.15em); }
&--history { .m-buttonIcon(@fa-var-history, .86em); }
&--cancel { .m-buttonIcon(@fa-var-remove, .86em); }
&--preview { .m-buttonIcon(@fa-var-eye, 1em); }
&--conversation { .m-buttonIcon(@fa-var-comments-o, 1em); }
&--bolt { .m-buttonIcon(@fa-var-bolt, .5em); }
&--list { .m-buttonIcon(@fa-var-list, .86em); }
&--prev { .m-buttonIcon(@fa-var-chevron-left, .71em); }
&--next { .m-buttonIcon(@fa-var-chevron-right, .71em); }
&--markRead { .m-buttonIcon(@fa-var-check-square-o, .93em); }
&--notificationsOn { .m-buttonIcon(@fa-var-bell-o, 1em); }
&--notificationsOff { .m-buttonIcon(@fa-var-bell-slash-o, 1.15em); }
// for inline mod confirmations
&--merge { .m-buttonIcon(@fa-var-compress, .86em); }
&--move { .m-buttonIcon(@fa-var-share, 1em); }
&--copy { .m-buttonIcon(@fa-var-clone, 1em); }
&--approve, &--unapprove { .m-buttonIcon(@fa-var-shield, .72em); }
&--delete, &--undelete { .m-buttonIcon(@fa-var-trash-o, .79em); }
&--stick, &--unstick { .m-buttonIcon(@fa-var-thumb-tack, .65em); }
&--lock { .m-buttonIcon(@fa-var-lock, .65em); }
&--unlock { .m-buttonIcon(@fa-var-unlock, .93em); }
//&--login:hover, &--login:active { .m-buttonIcon(@fa-var-unlock-alt, .65em); }
}
&.button--provider
{
> .button-text:before
{
.m-faBase();
font-size: 120%;
vertical-align: middle;
display: inline-block;
margin: -4px 6px -4px 0;
}
&--facebook
{
.m-buttonColorVariation(#3B5998, white);
.m-buttonIcon(@fa-var-facebook, .58em);
}
&--twitter
{
.m-buttonColorVariation(#1DA1F3, white);
.m-buttonIcon(@fa-var-twitter, .93em);
}
&--google
{
.m-buttonColorVariation(#4285F4, white);
.m-buttonIcon(@fa-var-google, .86em);
}
&--github
{
.m-buttonColorVariation(#666666, white);
.m-buttonIcon(@fa-var-github, .86em);
}
&--linkedin
{
.m-buttonColorVariation(#0077b5, white);
.m-buttonIcon(@fa-var-linkedin, .86em);
}
&--microsoft
{
.m-buttonColorVariation(#00bcf2, white);
.m-buttonIcon(@fa-var-windows, .93em);
}
&--yahoo
{
.m-buttonColorVariation(#410093, white);
.m-buttonIcon(@fa-var-yahoo, .86em);
}
}
&.button--splitTrigger
{
// button-text and button-menu are always children of button--splitTrigger
// but are defined here for reasons of specificity, as these border colors
// are overwritten by .m-buttonBorderColorVariation()
> .button-text { border-right: @xf-borderSize solid transparent; }
> .button-menu { border-left: @xf-borderSize solid transparent; }
.m-clearFix();
padding: 0;
font-size: 0;
button.button-text
{
background: transparent;
border: none;
border-right: @xf-borderSize solid transparent;
color: inherit;
}
> .button-text,
> .button-menu
{
.xf-buttonBase();
display: inline-block;
&:hover
{
&:after
{
opacity: 1;
}
}
}
> .button-text
{
.m-borderRightRadius(0);
}
> .button-menu
{
.m-borderLeftRadius(0);
padding-right: xf-default(@xf-buttonBase--padding-right, 0);// * (2/3);
padding-left: xf-default(@xf-buttonBase--padding-left, 0);// * (2/3);
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, .58em);
unicode-bidi: isolate;
opacity: .5;
}
}
}
}
.buttonGroup
{
display: inline-block;
vertical-align: top;
.m-clearFix();
&.buttonGroup--aligned
{
vertical-align: middle;
}
> .button
{
float: left;
&:not(:first-child)
{
border-left: none;
}
&:not(:first-child):not(:last-child)
{
border-radius: 0;
}
&:first-child:not(:last-child)
{
.m-borderRightRadius(0);
}
&:last-child:not(:first-child)
{
.m-borderLeftRadius(0);
}
}
> .buttonGroup-buttonWrapper
{
float: left;
&:not(:first-child) > .button
{
border-left: none;
}
&:not(:first-child):not(:last-child) > .button
{
border-radius: 0;
}
&:first-child:not(:last-child) > .button
{
.m-borderRightRadius(0);
}
&:last-child:not(:first-child) > .button
{
.m-borderLeftRadius(0);
}
}
}
.toggleButton
{
> input
{
display: none;
}
> span
{
.xf-buttonDisabled();
.m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
}
&.toggleButton--small > span
{
font-size: @xf-fontSizeSmaller;
padding: @xf-paddingSmall;
}
> input:checked + span
{
.xf-buttonDefault();
.m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
}
}
.u-scrollButtons
{
position: fixed;
bottom: 30px;
right: (@xf-pageEdgeSpacer) / 2;
.has-hiddenscroll &
{
right: 20px;
}
z-index: @zIndex-9;
.m-transition(opacity, @xf-animationSpeed);
opacity: 0;
display: none;
&.is-transitioning
{
display: block;
}
&.is-active
{
display: block;
opacity: 1;
}
.button
{
display: block;
+ .button
{
margin-top: (@xf-pageEdgeSpacer) / 2;
}
}
}]]></template>
<template title="core_labels.less" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[.label
{
display: inline-block;
padding: 2px .5em;
/// border: 1px solid transparent;
border-radius: @xf-borderRadiusSmall;
font-size: @xf-fontSizeSmallest;
/// line-height: ((@xf-lineHeightDefault) * .9);
text-decoration: none;
&:hover,
a:hover &
{
text-decoration: none;
}
&.label--fullSize
{
font-size: 100%;
}
&.label--small
{
font-size: @xf-fontSizeSmall;
}
&.label--smallest
{
font-size: @xf-fontSizeSmallest;
}
// Label variations
&.label--hidden
{
// this has to essentially undo all the adjustments made by .label
padding: inherit;
border: none;
font-size: inherit;
line-height: inherit;
text-decoration: inherit;
&:hover
{
text-decoration: underline;
}
}
&.label--subtle
{
.m-labelVariation(@xf-textColorMuted, @xf-contentAltBg);
}
&.label--primary
{
.m-labelVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
}
&.label--accent
{
.m-labelVariation(@xf-textColorAccentContent, @xf-contentAccentBg, @xf-borderColorAccentContent);
}
&.label--red { .m-labelVariation(white, #e20000); }
&.label--green { .m-labelVariation(white, green); }
&.label--olive { .m-labelVariation(white, olive); }
&.label--lightGreen { .m-labelVariation(black, #ccf9c8, #bee8ba); }
&.label--blue { .m-labelVariation(white, #0008e3); }
&.label--royalBlue { .m-labelVariation(white, royalblue); }
&.label--skyBlue { .m-labelVariation(white, #7cc3e0); }
&.label--gray { .m-labelVariation(white, gray); }
&.label--silver { .m-labelVariation(black, silver); }
&.label--yellow { .m-labelVariation(black, #ffff91, #e6e687); }
&.label--orange { .m-labelVariation(black, #ffcb00); }
&.label--error { .m-labelVariation(#c84448, #fde9e9, #c84448); }
}
.label-append
{
display: inline-block;
}
.labelLink,
.labelLink:hover
{
text-decoration: none;
}]]></template>
<template title="core_menu.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// ###################################### MENUS ######################
@_menu-arrowSize: 8px;
@_menu-edgePadding: @xf-pageEdgeSpacer;
@_menu-paddingV: @xf-paddingMedium;
@_menu-paddingH: @xf-paddingLargest;
.menuTrigger
{
cursor: pointer;
&:after
{
.m-faBase();
.m-faContent(" @{fa-var-caret-down}");
unicode-bidi: isolate; // this is needed to ensure correct positioning in RTL with LTR text
}
}
.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: @xf-menuBorderRadius;
.m-dropShadow(0, 5px, 10px, 0, .35);
&.menu--structural
{
margin-top: @xf-borderSizeFeature;
// when menus nudge up against structure, the joined corner should not be radiused
&.menu--left
{
border-top-left-radius: 0;
}
&.menu--right
{
border-top-right-radius: 0;
}
}
&.menu--veryWide
{
width: 500px;
max-width: 100%;
}
&.menu--wide
{
width: 350px;
max-width: 100%;
}
&.menu--medium
{
width: 300px;
max-width: 100%;
}
&.menu--potentialFixed
{
z-index: @zIndex-4;
}
}
.menu-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(@xf-menuHeader--background-color, @_menu-arrowSize);
.menu--structural &
{
top: -@_menu-arrowSize;
}
.menu--up &
{
display: none;
}
}
.menu-content
{
margin: 0;
padding: 0;
list-style: none;
text-align: left;
.xf-menu();
border-radius: @xf-menuBorderRadius;
/// border-top: @xf-borderSizeFeature solid @xf-menuFeatureBorderColor;
// when menus nudge up against structure, the joined corner should not be radiused
.menu--structural.menu--left &
{
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.menu--structural.menu--right &
{
border-top-right-radius: 0;
border-top-left-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;
}
ul
{
padding: 10px 0;
}
}
.menu--pageJump
{
width: auto;
min-width: 0;
}
.menu-header
{
padding: @xf-blockPaddingV @_menu-paddingH;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-menuHeader();
.m-clearFix();
.m-hiddenLinks();
}
.menu-tabHeader
{
padding: 0;
margin: 0;
font-weight: @xf-fontWeightNormal;
text-decoration: none;
.xf-menuTabHeader();
.m-tabsTogether(xf-default(@xf-menuTabHeader--font-size, @xf-fontSizeNormal));
.tabs-tab
{
padding: @xf-blockPaddingV @_menu-paddingH max(0px, @xf-blockPaddingV - @xf-borderSizeFeature);
border-bottom: @xf-borderSizeFeature solid transparent;
&:hover
{
color: @xf-blockMinorTabHeaderSelected--color;
}
&.is-active
{
.xf-menuTabHeaderSelected();
}
}
.hScroller-action
{
.m-hScrollerActionColorVariation(
xf-default(@xf-menuTabHeader--background-color, transparent),
@xf-menuTabHeader--color,
@xf-blockMinorTabHeaderSelected--color
);
}
}
.menu-scroller
{
overflow: auto;
max-height: 300px;
max-height: 60vh;
}
.menu-row
{
margin: 0;
padding: @_menu-paddingV @_menu-paddingH;
.m-clearFix();
&.menu-row--alt
{
.xf-contentAltBase();
}
&.menu-row--highlighted
{
.xf-contentHighlightBase();
}
&.menu-row--separated
{
+ .menu-row
{
border-top: @xf-borderSize solid @xf-borderColorLight;
}
}
&.menu-row--clickable:hover
{
background: @xf-contentHighlightBg;
}
&:empty
{
padding: 0;
}
}
.menu-linkRow
{
display: block;
padding: 7px @_menu-paddingH;
/// border-left: @xf-borderSizeFeature solid transparent;
.xf-menuLinkRow();
&.menu-linkRow--alt
{
.xf-contentAltBase();
}
&.is-selected,
&:hover,
&:focus
{
.xf-menuLinkRowSelected();
border-left-color: fade(@xf-borderColorFeature, 50%);
&:focus
{
outline: 0;
}
&.is-selected
{
border-left-color: @xf-borderColorFeature;
}
}
i[aria-hidden=true]
{
font-size: @xf-fontSizeSmall;
display: inline-block;
width: 23px; // about 1.75em at this font size
&:after
{
.m-faBase();
color: @xf-textColorMuted;
left: @xf-blockPaddingH;
}
& ~ .menu-linkRow-hint
{
padding-left: 23px;
}
}
&:hover i[aria-hidden=true]:after
{
color: @xf-linkHoverColor;
}
}
.menu-linkRow-hint
{
font-style: inherit;
font-size: @xf-fontSizeSmallest;
color: @xf-textColorMuted;
display: block;
}
.menu-separator
{
margin: 0 (@_menu-paddingH) / 2;
padding: 0;
border: none;
border-top: @xf-borderSize solid @xf-borderColorLight;
&.menu-separator--hard
{
margin: 0;
}
& + .menu-separator,
&:last-child
{
display: none;
}
}
.menu-footer
{
padding: @xf-blockPaddingV @_menu-paddingH;
.xf-menuFooter();
.m-clearFix();
&: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;
.has-no-flexbox &
{
float: left;
}
}
.menu-footer-select:not(:last-child)
{
margin: 0 1em;
}
.menu-footer-opposite,
.menu-footer-controls
{
margin-left: auto;
.has-no-flexbox &
{
float: right;
}
}
}
}]]></template>
<template title="core_overlay.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// #################################### OVERLAYS ################################
.overlay-container
{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: @zIndex-6;
background: @xf-overlayMaskColor;
-webkit-overflow-scrolling: touch;
opacity: 0;
.m-transition(opacity);
&.is-transitioning
{
display: block;
}
&.is-active
{
display: block;
opacity: 1;
}
}
.overlay
{
position: relative;
margin: 40px auto 10px;
margin-top: @xf-overlayTopMargin;
width: 100%;
max-width: 800px;
.xf-pageBackground();
color: @xf-textColor;
/// .xf-blockBorder();
border-radius: @xf-blockBorderRadius;
.m-dropShadow(0, 5px, 15px, 0, .5);
outline: none;
background: @xf-paletteNeutral1;
> .overlay-title:first-child,
.overlay-firstChild
{
border-top-left-radius: @xf-blockBorderRadius;
border-top-right-radius: @xf-blockBorderRadius;
}
> .overlay-content > *:last-child,
.overlay-lastChild
{
border-bottom-left-radius: @xf-blockBorderRadius;
border-bottom-right-radius: @xf-blockBorderRadius;
}
}
@media (max-width: 820px)
{
.overlay
{
max-width: ~"calc(100% - 20px)";
}
}
.overlay-title
{
.m-clearFix();
display: none;
margin: 0;
font-weight: @xf-fontWeightNormal;
.xf-overlayHeader();
.overlay &
{
display: block;
}
}
.overlay-titleCloser
{
float: right;
cursor: pointer;
margin-left: 5px;
text-decoration: none;
opacity: .5;
.m-transition();
color: @xf-paletteNeutral1;
&:after
{
.m-faBase();
.m-faContent(@fa-var-close, .79em);
}
&:hover
{
text-decoration: none;
opacity: 1;
color: @xf-paletteNeutral1;
}
}
.overlay-content
{
.m-clearFix();
}
// when displaying a modal, prevent scrolling on the main content but allow it on the overlay
body.is-modalOpen
{
overflow: hidden !important;
.overlay-container,
.offCanvasMenu
{
overflow-y: scroll !important;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.overlay-title
{
font-size: @xf-fontSizeLarger;
}
}
// ############################### OVERLAY/BLOCK NESTING ##############################
.block-container > .tabPanes > li,
.block-container > .block-body,
.block-container > .block-body > .block-row,
.overlay-content
{
> .blocks > .block > .block-container,
> .block > .block-container,
> .blockMessage
{
margin-left: 0;
margin-right: 0;
border-left: none;
border-right: none;
}
> .blocks > .block:first-child,
> .block:first-child,
> .blockMessage:first-child
{
margin-top: 0;
.block-outer:not(.block-outer--after)
{
border-bottom: @xf-borderSize solid @xf-borderColorLight;
padding: @xf-blockPaddingV;
}
}
> .blocks > .block:last-child,
> .block:last-child,
> .blockMessage:last-child
{
margin-bottom: 0;
.block-outer.block-outer--after
{
border-top: @xf-borderSize solid @xf-borderColorLight;
padding: @xf-blockPaddingV;
}
}
> .blocks > .block:first-child > .block-container,
> .block:first-child > .block-container,
> .blockMessage:first-child
{
border-top: none;
}
> .blocks > .block:last-child > .block-container,
> .block:last-child > .block-container,
> .blockMessage:last-child
{
border-bottom: none;
}
> .blocks > .block:not(:first-child) > .block-container,
> .block:not(:first-child) > .block-container,
> .blockMessage:not(:first-child)
{
.m-borderTopRadius(0);
}
> .blocks > .block:not(:last-child) > .block-container,
> .block:not(:last-child) > .block-container,
> .blockMessage:not(:last-child)
{
.m-borderBottomRadius(0);
}
}]]></template>
<template title="core_pagenav.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[// ####################################### PAGE NAVIGATION ########################
@_page-paddingV: 4px;
@_page-paddingH: 8.5px;
@_page-paddingHSimple: 10px;
.pageNavWrapper {}
.pageNav
{
display: flex;
padding: 3px 0;
}
.m-pageNavElCore()
{
background: rgb(170, 170, 170);
color: @xf-paletteNeutral1;
/// .xf-blockBorder();
font-size: @xf-fontSizeSmaller;
white-space: nowrap;
&:hover,
&:active
{
background: @xf-paletteAccent1;
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();
font-size: 80%;
word-wrap: normal;
unicode-bidi: isolate; // maintain position in RTL with LTR text
}
&.pageNav-jump--prev:before
{
/// .m-faContent("@{fa-var-caret-left}\00a0", .61em, ltr);
/// .m-faContent("@{fa-var-caret-right}\00a0", .61em, rtl);
}
&.pageNav-jump--next:after
{
/// .m-faContent("\00a0@{fa-var-caret-right}", .61em, ltr);
/// .m-faContent("\00a0@{fa-var-caret-left}", .61em, rtl);
}
&.pageNav-jump--next { margin-left: 10px; }
&.pageNav-jump--prev { margin-right: 10px; }
color: @xf-textColor;
background: transparent;
&:hover
{
background: transparent;
color: @xf-paletteColor5;
}
}
.pageNav-main
{
.m-listPlain();
display: inline-flex;
}
.pageNav-page
{
display: inline-block;
.m-pageNavElCore();
float: left;
margin-right: 10px;
border-radius: 100%;
&: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);
margin-right: 0;
}
> a
{
display: block;
padding: @_page-paddingV @_page-paddingH;
text-decoration: none;
color: inherit;
}
&.pageNav-page--current
{
background: @xf-paletteAccent1;
color: @xf-paletteNeutral1;
/// border: @xf-borderSize solid @xf-borderColorAccentContent;
cursor: pointer;
&:hover,
&:active
{
background: xf-intensify(@xf-contentAccentBg, 3%);
}
+ .pageNav-page
{
border-left: none;
}
}
&.pageNav-page--skip
{
background: transparent;
a { color: @xf-textColor; }
}
}
// 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();
}
}
&.pageNavSimple-el--prev i:before
{
/// .m-faContent(@fa-var-caret-left, .37em, ltr);
/// .m-faContent(@fa-var-caret-right, .37em, rtl);
}
&.pageNavSimple-el--next i:before
{
/// .m-faContent(@fa-var-caret-right, .37em, ltr);
/// .m-faContent(@fa-var-caret-left, .37em, rtl);
}
&.pageNavSimple-el--first,
&.pageNavSimple-el--last
{
border-color: transparent;
padding-left: (@_page-paddingHSimple / 2);
padding-right: (@_page-paddingHSimple / 2);
color: fade(@xf-linkColor, 60%);
&:hover,
&:active
{
.xf-blockBorder();
background: xf-intensify(@xf-contentHighlightBg, 3%);
color: @xf-linkColor;
text-decoration: none;
}
i:before
{
.m-faBase();
}
}
&.pageNavSimple-el--first i:before
{
.m-faContent(@fa-var-backward, .93em, ltr);
.m-faContent(@fa-var-forward, .93em, rtl);
}
&.pageNavSimple-el--last i:before
{
.m-faContent(@fa-var-forward, .93em, ltr);
.m-faContent(@fa-var-backward, .93em, rtl);
}
&.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="editor_base.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[/***** froala.less *****/
/***** variables.less *****/
// Theme Name.
@theme: 'theme';
// UI colors
@ui-color: #1E88E5;
@ui-text: #222222;
@ui-hover-light-color: mix(@white, #999, 90%);
@ui-hover-color: mix(@white, #999, 80%);
@ui-focused-color: mix(@white, #999, 60%);
@ui-disabled-color: mix(@white, #000, 74%);
@ui-bg: @white;
@ui-font-size: 14px;
@ui-border-color: #222222;
@ui-border-top: 5px solid @ui-border-color;
// Separator
@separator-size: 1px;
@separator-color: mix(@white, #999, 80%);
// Generic.
@white: #FFF;
@black: #000;
@gray: #CCCCCC;
@font-family: Arial, Helvetica, sans-serif;
@border-radius: 2px;
@arrow-size: 5px;
@transition-timing: 0.2s ease 0s;
// Screen sizes.
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
@screen-lg-max: 'auto';
// Tooltip
@tooltip-bg: #222222;
@tooltip-text: #FFFFFF;
@tooltip-font-size: 11px;
@tooltip-line-height: 22px;
// Editor properties.
@editor-padding: 16px;
@editor-bg: #FFF;
@editor-text: #000;
@editor-shadow-level: 1;
@editor-border: 0px;
// Text selection colors.
@selection-bg: #b5d6fd;
@selection-text: #000;
// Placeholder properties.
@placeholder-size: 12px;
@placeholder-color: #AAA;
// Button colors.
@btn-text: #222222;
@btn-hover-text: #222222;
@btn-hover-bg: @ui-hover-color;
@btn-active-text: @ui-color;
@btn-active-bg: transparent;
@btn-active-hover-text: @ui-color;
@btn-active-hover-bg: @btn-hover-bg;
@btn-selected-text: @btn-text;
@btn-selected-bg: @ui-focused-color;
@btn-active-selected-text: @ui-color;
@btn-active-selected-bg: @btn-selected-bg;
@btn-disabled-color: @ui-disabled-color;
// Button size.
@btn-width: 38px;
@btn-height: 38px;
@btn-margin: 2px;
@btn-font-size: 14px;
// Image.
@image-margin: 5px;
// Image and Video
@handler-size: 12px;
@handler-size-lg: 10px;
// Code View
@code-view-bg: #FFF;
@code-view-text: #000;
// Table properties.
@table-border: 1px solid #DDD;
@table-resizer: 1px solid @ui-color;
// Insert table grid.
@insert-table-grid: @table-border;
// Quick insert.
@floating-btn-bg: #FFF;
@floating-btn-text: @ui-color;
@floating-btn-hover-bg: @ui-hover-color;
@floating-btn-hover-text: @ui-color;
@floating-btn-size: 32px;
@floating-btn-font-size: 14px;
@floating-btn-border: none;
// List menu.
@dropdown-arrow-width: 4px;
@dropdown-item-active-bg: @ui-focused-color;
@dropdown-max-height: 275px;
// Image manager.
@modal-bg: @white;
@modal-overlay-color: #000;
// Destroy buttons (delete in image manager).
@modal-destroy-btn-bg: #B8312F;
@modal-destroy-btn-text: @white;
@modal-destroy-btn-hover-bg: mix(contrast(@modal-destroy-btn-bg, @black, @white, 50%), @modal-destroy-btn-bg, 10%);
@modal-destroy-btn-hover-text: @white;
// Popups.
@popup-layer-width: 300px;
// Inputs.
@input-border-color: mix(@white, #000, 74%);
@input-label-color: mix(@white, #000, 50%);
// Quote.
@blockquote-level1-color: #5E35B1;
@blockquote-level2-color: #00BCD4;
@blockquote-level3-color: #43A047;
// Char counter.
@char-counter-border: solid 1px mix(@white, #999, 80%);
@drag-helper-border: solid 1px @ui-color;
@drag-helper-bg: @ui-color;
// ################# CUSTOM OVERRIDES ################
{{ include('editor_override.less') }}
/***** mixins.less *****/
.resize(@val) {
resize: @val;
-moz-resize: @val;
-webkit-resize: @val;
}
.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
}
.transform(@string){
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
}
.box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.border-radius (@radius: 0) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.user-select(@select) {
user-select: @select;
-o-user-select:@select;
-moz-user-select: @select;
-khtml-user-select: @select;
-webkit-user-select: @select;
-ms-user-select: @select;
}
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 0) {
.box-shadow(none);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 1) {
@shadow: 0 (@direction * 1px) 3px rgba(0,0,0,0.12), 0 (@direction * 1px) 1px 1px rgba(0,0,0,0.16);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 2) {
@shadow: 0 (@direction * 3px) 6px rgba(0,0,0,0.16), 0 (@direction * 2px) 2px 1px rgba(0,0,0,0.14);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 3) {
@shadow: 0 (@direction * 5px) 8px rgba(0,0,0,0.19), 0 (@direction * 4px) 3px 1px rgba(0,0,0,0.14);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level = 4) {
@shadow: 0 (@direction * 8px) 12px rgba(0,0,0,0.25), 0 (@direction * 6px) 3px 1px rgba(0,0,0,0.12);
.box-shadow(@shadow);
}
.material-box-shadow (@level: 1, @direction: 1) when (@level >= 5) {
@shadow: 0 (@direction * 10px) 16px rgba(0,0,0,0.30), 0 (@direction * 6px) 8px rgba(0,0,0,0.22);
.box-shadow(@shadow);
}
.clearfix {
&::after {
clear: both;
display: block;
content: "";
height: 0;
}
}
.column-count(@count) {
column-count: @count;
-moz-column-count: @count;
-webkit-column-count: @count;
}
.column-gap(@gap) {
column-gap: @gap;
-moz-column-gap: @gap;
-webkit-column-gap: @gap;
}
.animation (@val) {
-webkit-animation: @val;
-moz-animation: @val;
-o-animation: @val;
animation: @val;
}
.handler-size(@size) {
.fr-handler {
width: @size;
height: @size;
&.fr-hnw {
left: (-@size / 2);
top: (-@size / 2);
}
&.fr-hne {
right: (-@size / 2);
top: (-@size / 2);
}
&.fr-hsw {
left: (-@size / 2);
bottom: (-@size / 2);
}
&.fr-hse {
right: (-@size / 2);
bottom: (-@size / 2);
}
}
}
.font-smoothing() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hide-by-clipping {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.display-inline-flex() {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
/***** core/element.less *****/
.fr-element, .fr-element:focus {
outline: 0px solid transparent;
}
.fr-box.fr-basic {
.fr-element {
color: @editor-text;
padding: @editor-padding;
.box-sizing(border-box);
overflow-x: auto;
min-height: (20px + (2 * @editor-padding));
}
&.fr-rtl {
.fr-element {
text-align: right;
}
}
}
.fr-element {
background: transparent;
position: relative;
z-index: 2;
// CSS rule for iPad not being able to select sometimes.
-webkit-user-select: auto;
// Fix bootstrap select.
a {
.user-select(auto);
}
&.fr-disabled {
.user-select(none);
}
[contenteditable="true"] {
outline: 0px solid transparent;
}
}
.fr-box {
a.fr-floating-btn {
.material-box-shadow (@editor-shadow-level);
.border-radius(100%);
height: @floating-btn-size;
width: @floating-btn-size;
text-align: center;
background: @floating-btn-bg;
color: @floating-btn-text;
.transition(background @transition-timing, color @transition-timing, transform @transition-timing;);
outline: none;
left: 0;
top: 0;
line-height: (@floating-btn-size);
.transform(scale(0));
text-align: center;
display: block;
.box-sizing(border-box);
border: @floating-btn-border;
svg {
.transition(transform @transition-timing;);
fill: @floating-btn-text;
}
i, svg {
font-size: @floating-btn-font-size;
line-height: @floating-btn-size;
}
&.fr-btn + .fr-btn {
margin-left: 10px;
}
&:hover {
background: @floating-btn-hover-bg;
cursor: pointer;
svg {
fill: @floating-btn-hover-text;
}
}
}
.fr-visible {
a.fr-floating-btn {
.transform(scale(1));
}
}
}
/***** core/iframe.less *****/
iframe.fr-iframe {
width: 100%;
border: none;
position: relative;
display: block;
z-index: 2;
.box-sizing(border-box);
}
/***** core/wrapper.less *****/
.fr-wrapper {
position: relative;
z-index: 1;
.clearfix();
.fr-placeholder {
position: absolute;
font-size: @placeholder-size;
color: @placeholder-color;
z-index: 1;
display: none;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
&.show-placeholder {
.fr-placeholder {
display: block;
}
}
::-moz-selection {
background: @selection-bg;
color: @selection-text;
}
::selection {
background: @selection-bg;
color: @selection-text;
}
}
.fr-box.fr-basic {
.fr-wrapper {
background: @editor-bg;
border: @editor-border;
border-top: 0;
top: 0;
left: 0;
}
}
.fr-box.fr-basic {
&.fr-top .fr-wrapper {
border-top: 0;
.border-radius(0 0 @border-radius @border-radius);
.material-box-shadow(@editor-shadow-level);
}
&.fr-bottom .fr-wrapper {
border-bottom: 0;
.border-radius(@border-radius @border-radius 0 0);
.material-box-shadow(@editor-shadow-level, -1);
}
}
/***** tooltip.less *****/
.fr-tooltip {
position: absolute;
top: 0;
left: 0;
padding: 0 8px;
.border-radius(@border-radius);
.material-box-shadow(((@editor-shadow-level + 1) * min(@editor-shadow-level, 1)));
background: @tooltip-bg;
color: @tooltip-text;
font-size: @tooltip-font-size;
line-height: @tooltip-line-height;
font-family: @font-family;
.transition(opacity @transition-timing);
.opacity(0);
left: -3000px;
.user-select(none);
z-index: 2147483647;
text-rendering: optimizelegibility;
.font-smoothing();
&.fr-visible {
.opacity(1);
}
}
/***** ui/buttons.less *****/
// Command button.
.fr-toolbar, .fr-popup {
.fr-command.fr-btn {
background: transparent;
color: @btn-text;
-moz-outline: 0;
outline: 0;
border: 0;
line-height: 1;
cursor: pointer;
text-align: left;
margin: 0px @btn-margin;
.transition(background @transition-timing);
.border-radius(0);
z-index: 2;
position: relative;
.box-sizing(border-box);
text-decoration: none;
.user-select(none);
float: left;
padding: 0;
width: @btn-width;
height: @btn-height;
&::-moz-focus-inner {
border: 0;
padding: 0
}
&.fr-btn-text {
width: auto;
}
i, svg {
display: block;
font-size: @btn-font-size;
width: @btn-font-size;
margin: ((@btn-height - @btn-font-size) / 2) ((@btn-width - @btn-font-size) / 2);
text-align: center;
float: none;
}
// Used for accessibility instead of aria-label.
span.fr-sr-only {
.hide-by-clipping();
}
span {
font-size: @ui-font-size;
display: block;
line-height: (@ui-font-size + 3px);
min-width: (@btn-width - 2 * @btn-margin);
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: (@btn-font-size + 3px);
font-weight: bold;
padding: 0 @btn-margin;
}
img {
margin: ((@btn-height - @btn-font-size) / 2) ((@btn-width - @btn-font-size) / 2);
width: @btn-font-size;
}
// Button is active.
&.fr-active {
color: @btn-active-text;
background: @btn-active-bg;
}
&.fr-dropdown {
&.fr-selection {
width: auto;
span {
font-weight: normal;
}
}
i, span, img, svg {
margin-left: (((@btn-width - @btn-font-size) / 2) - @dropdown-arrow-width);
margin-right: (((@btn-width - @btn-font-size) / 2) + @dropdown-arrow-width);
}
// Dropdown is visible.
&.fr-active {
color: @btn-text;
background: @btn-selected-bg;
&:hover, &:focus {
background: @btn-selected-bg !important;
color: @btn-selected-text !important;
&::after {
border-top-color: @btn-selected-text !important;
}
}
}
&::after {
position: absolute;
width: 0;
height: 0;
border-left: @dropdown-arrow-width solid transparent;
border-right: @dropdown-arrow-width solid transparent;
border-top: @dropdown-arrow-width solid @btn-text;
right: (((@btn-width - @btn-font-size) / 2 - @dropdown-arrow-width) / 2);
top: ((@btn-height - @dropdown-arrow-width) / 2);
content: "";
}
}
&.fr-disabled {
color: @btn-disabled-color;
cursor: default;
&::after {
border-top-color: @btn-disabled-color !important;
}
}
&.fr-hidden {
display: none;
}
}
&.fr-disabled {
.fr-btn, .fr-btn.fr-active {
color: @btn-disabled-color;
&.fr-dropdown::after {
border-top-color: @btn-disabled-color;
}
}
}
&.fr-rtl {
.fr-command.fr-btn {
float: right;
}
}
}
.fr-toolbar.fr-inline {
.fr-command.fr-btn:not(.fr-hidden) {
.display-inline-flex();
float: none;
}
}
.fr-desktop {
.fr-command {
// Hover.
&:hover, &:focus {
outline: 0;
color: @btn-hover-text;
background: @btn-hover-bg;
&::after {
border-top-color: @btn-hover-text !important;
}
}
// Button is selected.
&.fr-selected {
color: @btn-selected-text;
background: @btn-selected-bg;
}
&.fr-active {
&:hover, &:focus {
color: @btn-active-hover-text;
background: @btn-active-hover-bg;
}
&.fr-selected {
color: @btn-active-selected-text;
background: @btn-active-selected-bg;
}
}
&.fr-disabled {
&:hover, &:focus, &.fr-selected {
background: transparent;
}
}
}
&.fr-disabled {
.fr-command {
&:hover, &:focus, &.fr-selected {
background: transparent;
}
}
}
}
.fr-toolbar.fr-mobile, .fr-popup.fr-mobile {
.fr-command.fr-blink {
background: @btn-active-bg;
}
}
/***** ui/dropdown.less *****/
.fr-command.fr-btn {
+ .fr-dropdown-menu {
display: inline-block;
position: absolute;
right: auto;
bottom: auto;
height: auto;
z-index: 4;
-webkit-overflow-scrolling: touch;
overflow: hidden;
zoom: 1;
.border-radius(0 0 @border-radius @border-radius);
&.test-height {
.fr-dropdown-wrapper {
.transition(none);
height: auto;
max-height: @dropdown-max-height;
}
}
.fr-dropdown-wrapper {
background: @ui-bg;
padding: 0;
margin: auto;
display: inline-block;
text-align: left;
position: relative;
.box-sizing(border-box);
.transition(max-height @transition-timing);
margin-top: 0;
float: left;
max-height: 0;
height: 0;
margin-top: 0 !important;
.fr-dropdown-content {
overflow: auto;
position: relative;
max-height: @dropdown-max-height;
ul.fr-dropdown-list {
list-style-type: none;
margin: 0;
padding: 0;
li {
padding: 0;
margin: 0;
font-size: 15px;
a {
padding: 0 24px;
line-height: 200%;
display: block;
cursor: pointer;
white-space: nowrap;
color: inherit;
text-decoration: none;
&.fr-active {
background: @dropdown-item-active-bg;
}
&.fr-disabled {
color: @btn-disabled-color;
cursor: default;
}
}
}
}
}
}
}
&:not(.fr-active) {
+ .fr-dropdown-menu {
left: -3000px !important;
}
}
&.fr-active {
+ .fr-dropdown-menu {
display: inline-block;
.material-box-shadow(((@editor-shadow-level + 1) * min(@editor-shadow-level, 1)));
.fr-dropdown-wrapper {
height: auto;
max-height: @dropdown-max-height;
}
}
}
}
.fr-bottom > .fr-command.fr-btn {
+ .fr-dropdown-menu {
.border-radius(@border-radius @border-radius 0 0);
.material-box-shadow((@editor-shadow-level + 1) * min(@editor-shadow-level, 1), -1);
}
}
.fr-toolbar, .fr-popup {
&.fr-rtl {
.fr-dropdown-wrapper {
text-align: right !important;
}
}
}
/***** ui/modal.less *****/
body.prevent-scroll {
overflow: hidden;
&.fr-mobile {
position: fixed;
-webkit-overflow-scrolling: touch;
}
}
.fr-modal {
color: @ui-text;
font-family: @font-family;
position: fixed;
overflow-x: auto;
overflow-y: scroll;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
z-index: 2147483640;
text-rendering: optimizelegibility;
.font-smoothing();
text-align: center;
line-height: 1.2;
&.fr-middle {
.fr-modal-wrapper {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
top: 50%;
left: 50%;
.transform(translate(-50%, -50%));
position: absolute;
}
}
.fr-modal-wrapper {
.border-radius(@border-radius);
margin: 20px auto;
display: inline-block;
background: @modal-bg;
min-width: 300px;
.material-box-shadow(((@editor-shadow-level + 2) * min(@editor-shadow-level, 1)));
border: @editor-border;
border-top: @ui-border-top;
overflow: hidden;
width: 90%;
position: relative;
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
margin: 30px auto;
width: 70%;
}
@media (min-width: @screen-md) {
margin: 50px auto;
width: 600px;
}
.fr-modal-head {
background: @ui-bg;
.material-box-shadow(((@editor-shadow-level + 1) * min(@editor-shadow-level, 1)));
border-bottom: @editor-border;
overflow: hidden;
position: absolute;
width: 100%;
min-height: 42px;
z-index: 3;
.transition(height @transition-timing);
.fr-modal-close {
padding: 12px;
width: 20px;
font-size: 16px;
cursor: pointer;
line-height: 18px;
color: @ui-text;
.box-sizing(content-box);
position: absolute;
top: 0;
right: 0;
.transition(color @transition-timing);
}
h4 {
font-size: 18px;
padding: 12px 10px;
margin: 0;
font-weight: 400;
line-height: 18px;
display: inline-block;
float: left;
}
}
div.fr-modal-body {
height: 100%;
min-height: 150px;
overflow-y: scroll;
padding-bottom: 10px;
&:focus {
outline: 0;
}
button.fr-command {
height: 36px;
line-height: 1;
color: @ui-color;
padding: 10px;
cursor: pointer;
text-decoration: none;
border: none;
background: none;
font-size: 16px;
outline: none;
.transition(background @transition-timing);
.border-radius(@border-radius);
+ button {
margin-left: 24px;
}
&:hover, &:focus {
background: @ui-hover-color;
color: @ui-color;
}
&:active {
background: @ui-focused-color;
color: @ui-color;
}
}
button::-moz-focus-inner {
border: 0;
}
}
}
}
&.fr-desktop .fr-modal-wrapper {
.fr-modal-head {
i:hover {
background: @ui-hover-color;
}
}
}
// Overlay that appears with modal.
.fr-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: @modal-overlay-color;
.opacity(0.5);
z-index: 2147483639;
}
/***** ui/popup.less *****/
.fr-popup {
position: absolute;
display: none;
color: @ui-text;
background: @ui-bg;
.material-box-shadow(@editor-shadow-level);
.border-radius(@border-radius);
font-family: @font-family;
.box-sizing(border-box);
.user-select(none);
margin-top: 10px;
z-index: 2147483635;
text-align: left;
border: @editor-border;
border-top: @ui-border-top;
text-rendering: optimizelegibility;
.font-smoothing();
line-height: 1.2;
.fr-input-focus {
background: @ui-hover-light-color;
}
&.fr-above {
margin-top: -10px;
border-top: 0;
border-bottom: @ui-border-top;
.material-box-shadow(@editor-shadow-level, -1);
}
&.fr-active {
display: block;
}
&.fr-hidden {
.opacity(0);
}
&.fr-empty {
display: none !important;
}
.fr-hs {
display: block !important;
&.fr-hidden {
display: none !important;
}
}
.fr-input-line {
position: relative;
padding: 8px 0;
input[type="text"], textarea {
width: 100%;
margin: 0px 0 1px 0;
border: none;
border-bottom: solid 1px @input-border-color;
color: @ui-text;
font-size: 14px;
padding: 6px 0 2px;
background: rgba(0, 0, 0, 0);
position: relative;
z-index: 2;
.box-sizing(border-box);
&:focus {
border-bottom: solid 2px @ui-color;
margin-bottom: 0px;
}
}
input + label, textarea + label {
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: rgba(0, 0, 0, 0);
.transition(color @transition-timing);
z-index: 3;
width: 100%;
display: block;
background: @ui-bg;
}
input.fr-not-empty:focus + label, textarea.fr-not-empty:focus + label {
color: @ui-color;
}
input.fr-not-empty + label, textarea.fr-not-empty + label {
color: @input-label-color;
}
}
input, textarea {
.user-select(text);
.border-radius(0);
outline: none;
}
textarea {
resize: none;
}
.fr-buttons {
.clearfix();
.material-box-shadow(@editor-shadow-level);
padding: 0 @btn-margin;
white-space: nowrap;
line-height: 0;
border-bottom: @editor-border;
.fr-btn {
display: inline-block;
float: none;
i {
float: left;
}
}
.fr-separator {
display: inline-block;
float: none;
}
}
.fr-layer {
width: (@popup-layer-width * 0.75);
@media (min-width: @screen-sm) {
width: @popup-layer-width;
}
.box-sizing(border-box);
margin: 10px;
display: none;
&.fr-active {
display: inline-block;
}
}
.fr-action-buttons {
z-index: 7;
height: 36px;
text-align: right;
button.fr-command {
height: 36px;
line-height: 1;
color: @ui-color;
padding: 10px;
cursor: pointer;
text-decoration: none;
border: none;
background: none;
font-size: 16px;
outline: none;
.transition(background @transition-timing);
.border-radius(@border-radius);
+ button {
margin-left: 24px;
}
&:hover, &:focus {
background: @ui-hover-color;
color: @ui-color;
}
&:active {
background: @ui-focused-color;
color: @ui-color;
}
}
button::-moz-focus-inner {
border: 0;
}
}
.fr-checkbox {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
line-height: 1;
.box-sizing(content-box);
vertical-align: middle;
svg {
margin-left: 2px;
margin-top: 2px;
display: none;
width: 10px;
height: 10px;
}
span {
border: solid 1px @ui-text;
.border-radius(@border-radius);
width: 16px;
height: 16px;
display: inline-block;
position: relative;
z-index: 1;
.box-sizing(border-box);
.transition(background @transition-timing, border-color @transition-timing;);
}
input {
position: absolute;
z-index: 2;
.opacity(0);
border: 0 none;
cursor: pointer;
height: 16px;
margin: 0;
padding: 0;
width: 16px;
top: 1px;
left: 1px;
&:checked + span {
background: @ui-color;
border-color: @ui-color;
svg {
display: block;
}
}
&:focus + span {
border-color: @ui-color;
}
}
}
.fr-checkbox-line {
font-size: 14px;
line-height: 1.4px;
margin-top: 10px;
label {
cursor: pointer;
margin: 0 5px;
vertical-align: middle;
}
}
&.fr-rtl {
direction: rtl;
text-align: right;
.fr-action-buttons {
text-align: left;
}
.fr-input-line {
input + label, textarea + label {
left: auto;
right: 0;
}
}
.fr-buttons .fr-separator.fr-vs {
float: right;
}
}
.fr-arrow {
width: 0;
height: 0;
border-left: @arrow-size solid transparent;
border-right: @arrow-size solid transparent;
border-bottom: @arrow-size solid @ui-border-color;
position: absolute;
top: ((-@arrow-size * 2) + 1);
left: 50%;
margin-left: (-@arrow-size);
display: inline-block;
}
&.fr-above {
.fr-arrow {
top: auto;
bottom: ((-@arrow-size * 2) + 1);
border-bottom: 0;
border-top: @arrow-size solid @ui-border-color;
}
}
}
/***** ui/text_edit.less *****/
.fr-text-edit-layer {
width: 250px;
.box-sizing(border-box);
display: block !important;
}
/***** ui/toolbar.less *****/
.fr-toolbar {
color: @ui-text;
background: @ui-bg;
position: relative;
z-index: 4;
font-family: @font-family;
.clearfix();
.box-sizing(border-box);
.user-select(none);
padding: 0 @btn-margin;
.border-radius(@border-radius);
.material-box-shadow(@editor-shadow-level);
text-align: left;
border: @editor-border;
/// border-top: @ui-border-top;
text-rendering: optimizelegibility;
.font-smoothing();
line-height: 1.2;
&.fr-rtl {
text-align: right;
}
&.fr-inline {
display: none;
white-space: nowrap;
position: absolute;
margin-top: 10px;
.fr-arrow {
width: 0;
height: 0;
border-left: @arrow-size solid transparent;
border-right: @arrow-size solid transparent;
border-bottom: @arrow-size solid @ui-border-color;
position: absolute;
top: ((-@arrow-size * 2) + 1);
left: 50%;
margin-left: (-@arrow-size);
display: inline-block;
}
&.fr-above {
margin-top: -10px;
.material-box-shadow(@editor-shadow-level, -1);
border-bottom: @ui-border-top;
border-top: 0;
.fr-arrow {
top: auto;
bottom: ((-@arrow-size * 2) + 1);
border-bottom: 0;
border-top-color: inherit;
border-top-style: solid;
border-top-width: @arrow-size;
}
}
}
&.fr-top {
top: 0;
.border-radius(@border-radius @border-radius 0 0);
.material-box-shadow(@editor-shadow-level);
}
&.fr-bottom {
bottom: 0;
.border-radius(0 0 @border-radius @border-radius);
.material-box-shadow(@editor-shadow-level);
}
}
.fr-separator {
background: @separator-color;
display: block;
vertical-align: top;
float: left;
+ .fr-separator {
display: none;
}
&.fr-vs {
height: (@btn-height - 2 * @btn-margin);
width: @separator-size;
margin: @btn-margin;
}
&.fr-hs {
clear: both;
height: @separator-size;
width: calc(100% - (2 * @btn-margin));
margin: 0 @btn-margin;
}
&.fr-hidden {
display: none !important;
}
}
.fr-rtl .fr-separator {
float: right;
}
.fr-toolbar.fr-inline .fr-separator.fr-hs {
float: none;
}
.fr-toolbar.fr-inline .fr-separator.fr-vs {
float: none;
display: inline-block;
}
/***** helpers.less *****/
.fr-visibility-helper {
display: none;
margin-left: 0px !important;
@media (min-width: @screen-sm) {
margin-left: 1px !important;
}
@media (min-width: @screen-md) {
margin-left: 2px !important;
}
@media (min-width: @screen-lg) {
margin-left: 3px !important;
}
}
.fr-opacity-0 {
.opacity(0);
}
.fr-box {
position: relative;
}
/**
* Postion sticky hacks.
*/
.fr-sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}
.fr-sticky-off {
position: relative;
}
.fr-sticky-on {
position: fixed;
&.fr-sticky-ios {
position: absolute;
left: 0;
right: 0;
width: auto !important;
}
}
.fr-sticky-dummy {
display: none;
}
.fr-sticky-on + .fr-sticky-dummy, .fr-sticky-box > .fr-sticky-dummy {
display: block;
}
// Used for accessibility instead of aria-label.
span.fr-sr-only {
.hide-by-clipping();
}
/***** plugins/colors.less *****/
.fr-popup {
.fr-colors-tabs {
.material-box-shadow(@editor-shadow-level);
margin-bottom: 5px;
line-height: 16px;
margin-left: -2px;
margin-right: -2px;
.fr-colors-tab {
display: inline-block;
width: 50%;
cursor: pointer;
text-align: center;
color: @ui-text;
font-size: 13px;
padding: 8px 0;
position: relative;
&:hover, &:focus {
color: @ui-color;
}
&[data-param1="background"]::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: @ui-color;
content: '';
.transition(transform @transition-timing);
}
&.fr-selected-tab {
color: @ui-color;
&[data-param1="text"] ~ [data-param1="background"]::after {
.transform(translate3d(-100%,0,0));
}
}
}
}
.fr-color-hex-layer {
width: 100%;
margin: 0px;
padding: 10px;
.fr-input-line {
float: left;
width: calc(100% - 50px);
padding: 8px 0 0;
}
.fr-action-buttons {
float: right;
width: 50px;
}
.fr-action-buttons {
button {
background-color: @ui-color;
color: #FFF;
.border-radius(@border-radius);
font-size: 13px;
height: 32px;
&:hover {
background-color: darken(@ui-color, 10%);
color: #FFF;
}
}
}
}
.fr-separator + .fr-colors-tabs {
.material-box-shadow(0, 0);
margin-left: 2px;
margin-right: 2px;
}
.fr-color-set {
line-height: 0;
display: none;
&.fr-selected-set {
display: block;
}
> span {
display: inline-block;
width: 32px;
height: 32px;
position: relative;
z-index: 1;
> i, > svg {
text-align: center;
line-height: 32px;
height: 32px;
width: 32px;
font-size: 13px;
position: absolute;
bottom: 0;
cursor: default;
left: 0;
}
.fr-selected-color {
color: @white;
font-family: FontAwesome;
font-size: 13px;
font-weight: 400;
line-height: 32px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
text-align: center;
cursor: default;
}
&:hover, &:focus {
outline: 1px solid @ui-text;
z-index: 2;
}
}
}
}
.fr-rtl .fr-popup {
.fr-colors-tabs {
.fr-colors-tab {
&.fr-selected-tab {
&[data-param1="text"] ~ [data-param1="background"]::after {
.transform(translate3d(100%,0,0));
}
}
}
}
}
/***** plugins/draggable.less *****/
.fr-drag-helper {
background: @drag-helper-bg;
height: 2px;
margin-top: -1px;
.opacity(0.2);
position: absolute;
z-index: 2147483640;
display: none;
&.fr-visible {
display: block;
}
}
.fr-dragging {
.opacity(0.4);
}
/***** plugins/file.less *****/
.fr-popup {
.fr-file-upload-layer {
border: dashed 2px @ui-disabled-color;
padding: 25px 0;
position: relative;
font-size: 14px;
letter-spacing: 1px;
line-height: 140%;
.box-sizing(border-box);
text-align: center;
&:hover {
background: @ui-hover-color;
}
&.fr-drop {
background: @ui-hover-color;
border-color: @ui-color;
}
.fr-form {
.opacity(0);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483640;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
input {
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 500%;
height: 100%;
margin: 0px;
font-size: 400px;
}
}
}
.fr-file-progress-bar-layer {
.box-sizing(border-box);
> h3 {
font-size: 16px;
margin: 10px 0;
font-weight: normal;
}
> div.fr-action-buttons {
display: none;
}
> div.fr-loader {
background: mix(@white, @ui-color, 70%);
height: 10px;
width: 100%;
margin-top: 20px;
overflow: hidden;
position: relative;
span {
display: block;
height: 100%;
width: 0%;
background: @ui-color;
.transition(width @transition-timing);
}
&.fr-indeterminate {
span {
width: 30% !important;
position: absolute;
top: 0;
.animation(loading 2s linear infinite);
}
}
}
&.fr-error {
> div.fr-loader {
display: none;
}
> div.fr-action-buttons {
display: block;
}
}
}
}
@keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-webkit-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-moz-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-o-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
/***** plugins/image.less *****/
.fr-element img {
cursor: pointer;
}
.fr-image-resizer {
position: absolute;
border: solid 1px @ui-color;
display: none;
.user-select(none);
.box-sizing(content-box);
&.fr-active {
display: block;
}
.fr-handler {
display: block;
position: absolute;
background: @ui-color;
border: solid 1px @white;
z-index: 4;
.box-sizing(border-box);
&.fr-hnw {
cursor: nw-resize;
}
&.fr-hne {
cursor: ne-resize;
}
&.fr-hsw {
cursor: sw-resize;
}
&.fr-hse {
cursor: se-resize;
}
}
.handler-size(@handler-size);
@media(min-width: @screen-lg) {
.handler-size(@handler-size-lg);
}
}
.fr-image-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2147483640;
display: none;
}
.fr-popup {
.fr-image-upload-layer {
border: dashed 2px @ui-disabled-color;
padding: 25px 0;
position: relative;
font-size: 14px;
letter-spacing: 1px;
line-height: 140%;
text-align: center;
&:hover {
background: @ui-hover-color;
}
&.fr-drop {
background: @ui-hover-color;
border-color: @ui-color;
}
.fr-form {
.opacity(0);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483640;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
input {
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 500%;
height: 100%;
margin: 0px;
font-size: 400px;
}
}
}
.fr-image-progress-bar-layer {
> h3 {
font-size: 16px;
margin: 10px 0;
font-weight: normal;
}
> div.fr-action-buttons {
display: none;
}
> div.fr-loader {
background: mix(@white, @ui-color, 70%);
height: 10px;
width: 100%;
margin-top: 20px;
overflow: hidden;
position: relative;
span {
display: block;
height: 100%;
width: 0%;
background: @ui-color;
.transition(width @transition-timing);
}
&.fr-indeterminate {
span {
width: 30% !important;
position: absolute;
top: 0;
.animation(loading 2s linear infinite);
}
}
}
&.fr-error {
> div.fr-loader {
display: none;
}
> div.fr-action-buttons {
display: block;
}
}
}
}
.fr-image-size-layer {
.fr-image-group {
.fr-input-line {
width: calc(50% - 5px);
display: inline-block;
+ .fr-input-line {
margin-left: 10px;
}
}
}
}
.fr-uploading {
.opacity(0.4);
}
@keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-webkit-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-moz-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
@-o-keyframes loading {
from {left: -25%;}
to {left: 100%}
}
/* Files: froala.less, plugins/colors.less, plugins/draggable.less, plugins/file.less, plugins/image.less */]]></template>
<template title="extra.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[/* Setup */
.p-header { display: none; }
.itemList-itemOverlayTop { z-index: @zIndex-2; }
.js-visitorMenuBody
{
.menu-row
{
padding: @xf-paddingLargest;
background: transparent;
}
}
/* Setup -- End */
/* Sidebar */
.contentRow-main.contentRow-main--close
{
padding-left: @xf-paddingLarge;
}
.contentRow-minor
{
font-size: @xf-fontSizeSmaller;
line-height: 18px;
margin-top: 2px;
margin-bottom: -2px;
}
.block[data-widget-section="staffMembers"]
{
.contentRow { align-items: center; }
.avatar.avatar--xs
{
.m-avatarSize(45px);
}
}
.block[data-widget-definition="forum_statistics"]
{
.block-row
{
padding-top: @xf-paddingLarge;
padding-bottom: @xf-paddingLarge;
}
.pairs
{
font-size: @xf-fontSizeSmaller;
line-height: 18px;
}
}
/* Sidebar -- End */
/* Thread view */
body[data-template="thread_view"]
{
.message--post,
.message--quickReply
{
.message-cell
{
padding: 20px 0;
&.message-cell--user
{
.m-fixedWidthFlex((@xf-messageUserBlockWidth));
}
&.message-cell--main
{
padding-left: @xf-messagePadding*2 + 5px;
}
}
}
.block--messages
{
.message,
.block-row,
{
background: transparent;
border: 0;
border-radius: 0;
+ .message,
+ .block-row
{
margin-top: unset;
border-top: @xf-borderSize solid @xf-borderColorFaint;
}
}
+ .js-quickReply
{
border-top: @xf-borderSize solid @xf-borderColorFaint;
}
}
.js-quickReply .block-container
{
background: none;
border: none;
border-radius: 0;
}
@media(max-width: @xf-messageSingleColumnWidth)
{
.message--post,
.message--quickReply
{
.message-cell
{
&.message-cell--main
{
padding-left: 0;
}
}
}
}
}
/* Thread view end*/
/* Form-row */
.formButtonGroup
{
justify-content: center;
.button { margin-right: 15px; margin-bottom: 5px; }
.formButtonGroup-primary,
.formButtonGroup-extra
{
display: flex;
margin-bottom: 0;
margin-left: 0;
flex-direction: column;
justify-content: center;
flex-flow: row wrap;
}
}
dd.formButtonGroup
{
.button { margin-right: 10px; }
}
.formSubmitRow-controls
{
padding-bottom: 0;
.button
{
margin-bottom: 5px;
margin-right: 10px;
}
}
/* Form-row end */
/* Fix widget full size view */
.p-body-sidebar
{
.block[data-widget-definition="new_posts"]
{
.structItem-cell
{
//padding: (@_structItem-cellPaddingV) / 2 @_structItem-cellPaddingH;
&.structItem-cell--main
{
display: block;
padding-bottom: .2em;
padding-left: 0;
}
&.structItem-cell--meta
{
display: block;
width: auto;
float: left;
padding-top: 0;
padding-left: 0;
padding-right: 0;
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmaller;
background: transparent;
border: 0;
.structItem-minor
{
display: none !important;
}
.pairs
{
float: none;
display: inline-block;
width: auto;
> dt,
> dd
{
display: inline;
float: none;
margin: 0;
}
}
}
&.structItem-cell--latest
{
display: block;
width: auto;
float: left;
padding-top: 0;
padding-left: 0;
font-size: @xf-fontSizeSmaller;
&:before
{
content: "\00A0\00B7\20";
color: @xf-textColorMuted;
}
a
{
color: @xf-textColorMuted;
}
.structItem-minor
{
display: none;
}
}
}
.structItem-pageJump,
.structItem-extraInfoMinor
{
display: none;
}
.is-unread .structItem-latestDate
{
font-weight: @xf-fontWeightNormal;
}
}
.block[data-widget-definition="new_profile_posts"]
{
.message:not(.message--forceColumns)
{
.message-attribution-user .avatar
{
display: inline-block;
.m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
}
.message-content
{
// this is 1px to workaround an IE11 issue - see #139187
min-height: 1px;
}
.message-inner
{
display: block;
}
.message-cell
{
display: block;
.m-clearFix();
&.message-cell--user
{
width: auto;
border-right: none;
border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
}
&.message-cell--main
{
padding-left: @xf-messagePadding;
}
}
}
.message--simple:not(.message--forceColumns),
.message--quickReply:not(.message--forceColumns)
{
.message-cell.message-cell--user
{
display: none;
}
}
.actionBar-action
{
&.actionBar-action--menuItem { display: none; }
&.actionBar-action--menuTrigger { display: inline; }
}
}
}
/* Fix widget full size view end */
/* Search */
.search-area
{
position: relative;
width: 100%;
.menu-content
{
border: 0;
border-radius: 0;
background-color: transparent;
}
}
.p-navgroup-link--search
{
padding: 0;
margin: 0;
position: absolute;
left: 10px;
top: 19px;
transform: translateY(-50%);
z-index: 1;
}
.search-input
{
position: relative;
padding: 0;
input
{
font-size: @xf-fontSizeNormal;
color: @xf-textColor;
padding: 9px 20px 10px 35px;
background: @xf-contentBg;
&::placeholder{color: @xf-textColor;}
&:focus,
&:active
{
&::placeholder{color: fade(@xf-textColor, 50%);}
}
}
}
.search-option
{
position: absolute;
width: @xf-sidebarWidth;
background: @xf-paletteNeutral1;
margin-top: 10px;
padding: 10px 0;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.35);
z-index: 99999;
display: none;
opacity: 0;
&.active
{
display: block;
}
a { color: @xf-paletteNeutral1; }
.menu-arrow
{
border-bottom-color: @xf-paletteNeutral1;
}
.menu-row,
.menu-footer
{
padding-left: 10px;
padding-right: 10px;
}
}
/* Search end */
.block[data-widget-definition="visitor_panel"]
{
.block-body
{
background-image: linear-gradient(to bottom, @xf-paletteNeutral3 0%, fade(@xf-paletteNeutral3, 0%) 100%),
url('styles/brivium/technetium/extra/visitor-panel-bg.png');
background-repeat: no-repeat;
background-position: top, bottom;
background-size: cover;
padding: @xf-elementSpacer;
}
.avatar
{
.m-avatarSize(78px);
border: @xf-borderSizeFeature solid fade(@xf-paletteNeutral1, 20%);
border-radius: 10px;
}
.contentRow { align-items: center; }
.contentRow-main { padding-left: @xf-elementSpacer; }
.contentRow-header
{
.m-clearFix();
font-size: @xf-fontSizeNormal;
.username
{
float: left;
color: @xf-paletteNeutral1;
.m-overflowEllipsis();
max-width: 100%;
}
}
.contentRow-lesser
{
color: @xf-paletteNeutral1;
}
.contentRow-minor
{
color: @xf-paletteNeutral1;
.pairs > dt { color: @xf-paletteNeutral1; }
}
.block-footer
{
border: 0;
background: @xf-paletteAccent1;
}
}]]></template>
<template title="message.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[@_message-actionColumnWidth: 40px;
@_messageSimple-userColumnWidth: 70px;
@_messageAvatar-border: 4px;
@_messageAvatar-padding: 10px;
.message
{
+ .message,
&.message--bordered
{
border-top: @xf-borderSize solid @xf-borderColor;
}
}
.message,
.block--messages .message
{
&.is-mod-selected
{
background: @xf-inlineModHighlightColor !important;
.message-userArrow:after
{
border-right-color: @xf-inlineModHighlightColor;
}
}
}
.message-inner
{
display: flex;
.has-no-flexbox &
{
display: table;
table-layout: fixed;
width: 100%;
}
}
.message-cell
{
display: block;
vertical-align: top;
padding: @xf-messagePadding;
.has-no-flexbox &
{
display: table-cell;
}
.message--quickReply &
{
//padding-bottom: 35px; // for the submit row
> .formRow:last-child
{
> dd
{
padding-bottom: 0;
}
}
}
&.message-cell--closer
{
padding: @xf-messagePaddingSmall;
&.message-cell--main
{
padding-left: 0;
}
&.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, no-background);
/// border-right: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
min-width: 0;
}
&.message-cell--user
{
.m-fixedWidthFlex((@xf-messageUserBlockWidth) + 2 * (@xf-messagePadding));
.message--simple &
{
.m-fixedWidthFlex(@_messageSimple-userColumnWidth + 2 * @xf-messagePadding);
}
}
&.message-cell--action
{
.m-fixedWidthFlex((@_message-actionColumnWidth) + 2 * (@xf-messagePadding));
}
&.message-cell--main
{
padding-left: 0;
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-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;
}
@media (max-width: @xf-messageSingleColumnWidth)
{
.message:not(.message--forceColumns)
{
.message-inner
{
display: block;
}
.message-cell
{
display: block;
.m-clearFix();
&.message-cell--user
{
width: auto;
border-right: none;
border-bottom: @xf-messageUserBlock--border-width solid @xf-messageUserBlock--border-color;
}
&.message-cell--main
{
padding-left: @xf-messagePadding;
}
}
}
.message--simple:not(.message--forceColumns),
.message--quickReply:not(.message--forceColumns)
{
.message-cell.message-cell--user
{
display: none;
}
}
}
// ######################## USER COLUMN #########################
.message-user
{
padding: @_messageAvatar-padding;
border: @xf-borderSize solid @xf-borderColor;
border-radius: @xf-borderRadiusSmall;
}
.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);
}
display: none;
}
.message-avatar
{
text-align: center;
/// margin-bottom: 3px;
.avatar
{
vertical-align: bottom;
}
}
.message-avatar-wrapper
{
position: relative;
display: inline-block;
vertical-align: bottom;
.message-avatar-online
{
position: absolute;
top: -1px;
left: -1px;
border: 7px solid transparent;
border-left-color: rgb(127, 185, 0);
border-top-color: rgb(127, 185, 0);
border-radius: (@xf-avatarBorderRadius + 1) max(0px, @xf-avatarBorderRadius - 1px) 0 max(0px, @xf-avatarBorderRadius - 1);
}
}
.message-userDetails
{
margin-top: 5px;
}
.message-name
{
font-weight: @xf-fontWeightHeavy;
font-size: inherit;
/// text-align: center;
margin: 0;
a { color: @xf-paletteAccent2; }
}
.message-userTitle
{
font-size: @xf-fontSizeSmaller;
font-weight: normal;
/// text-align: center;
margin: 0;
color: @xf-textColorMuted;
}
.message-userBanner.userBanner
{
display: block;
margin-top: 8px;
margin-right: -(@_messageAvatar-padding + 4px);
margin-left: -(@_messageAvatar-padding + 4px);
border-radius: 0;
position: relative;
position: relative;
&:after,
&:before
{
display: inline-block;
content: "";
background-color: transparent;
border: 2px solid;
border-color: inherit;
top: -4px;
position: absolute;
}
&:after
{
right: 0;
border-right-color: transparent !important;
border-top-color: transparent !important;
}
&:before
{
left: 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
}
@media(max-width: @xf-messageSingleColumnWidth)
{
&:after,&:before
{
display: none;
}
}
}
.message-userExtras
{
margin-top: 3px;
font-size: 10px;
}
.message--deleted
{
.message-userDetails
{
display: none;
}
.message-avatar .avatar
{
.m-avatarSize(@avatar-s);
}
}
.message-cell--user
{
.message-date,
.message-permalink
{
display: none;
}
}
@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;
.has-no-flexbox &
{
display: table;
width: 100%;
}
}
.message-avatar
{
margin-bottom: 0;
.has-no-flexbox &
{
display: table-cell;
width: 1%;
}
.avatar
{
.m-avatarSize(@avatar-s);
}
}
.message-userDetails
{
flex: 1;
min-width: 0;
padding-left: @xf-messagePadding;
margin: 0 0 -5px;
.has-no-flexbox &
{
display: table-cell;
}
}
.message-name
{
text-align: left;
}
.message-userTitle
{
display: block;
text-align: left;
margin: 0;
}
.message-userBanner.userBanner
{
display: inline-block;
text-align: left;
margin: 0 0 5px;
}
.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-main { float: left; }
.message-attribution-opposite
{
float: right;
color: @xf-paletteColor4;
}
.message-attribution-source
{
font-size: @xf-fontSizeSmaller;
margin-bottom: @xf-paddingSmall;
}
.message-attribution-user
{
font-weight: @xf-fontWeightHeavy;
.avatar
{
display: none;
}
.attribution
{
display: inline;
font-size: inherit;
font-weight: inherit;
margin: 0;
}
}
.message-newIndicator
{
.xf-messageNewIndicator();
}
.message-minorHighlight
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorFeature;
}
.message-fields
{
margin: @xf-messagePadding 0;
}
.message-body
{
margin: @xf-messagePadding 0;
font-family: @xf-fontFamilyBody;
.message--simple &
{
margin-top: @xf-messagePaddingSmall;
margin-bottom: @xf-messagePaddingSmall;
}
&:last-child
{
margin-bottom: 0;
}
}
.message-attachments
{
.xf-bbCodeBlock();
.block-textHeader
{
margin: 0;
padding: 8px @xf-paddingLargest;
.xf-bbCodeBlockTitle();
.m-clearFix();
position: relative;
}
}
.message-attachments-list
{
.m-listPlain();
}
.message-lastEdit
{
margin-top: .5em;
color: @xf-textColorMuted;
font-size: @xf-fontSizeSmallest;
text-align: right;
}
.message-signature
{
margin-top: @xf-messagePadding;
.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-historyTarget
{
margin-top: @xf-messagePadding;
}
.message-gradient
{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
.m-gradient(fade(@xf-contentBg, 0%), @xf-contentBg, @xf-contentBg, 0%, 90%);
}
.message-responses
{
margin-top: @xf-messagePaddingSmall;
font-size: @xf-fontSizeSmall;
}
.message-responseRow
{
margin-top: -@xf-minorBlockContent--border-width;
.xf-minorBlockContent();
padding: @xf-messagePaddingSmall;
// note that border radiuses are very difficult to do here due to a lot of dynamic showing/hiding
&.message-responseRow--likes
{
.m-transitionFadeDown();
}
}
@media (max-width: @xf-messageSingleColumnWidth)
{
.message:not(.message--forceColumns)
{
.message-attribution-user .avatar
{
display: inline-block;
.m-avatarSize((@xf-fontSizeNormal) * (@xf-lineHeightDefault));
}
.message-content
{
// this is 1px to workaround an IE11 issue - see #139187
min-height: 1px;
}
}
}
@media (max-width: @xf-responsiveNarrow)
{
.message-signature
{
display: none;
}
}
// MESSAGE MENU
.message-menuGroup
{
display: inline-block;
}
.message-menuTrigger
{
display: inline-block;
&:after
{
.m-faBase();
.m-faContent(@fa-var-caret-down, 1em);
//font-size: 120%;
text-align: right;
}
&:hover:after
{
color: black;
}
}
.message-menu-section
{
&--editDelete
{
.menu-linkRow
{
font-weight: @xf-fontWeightHeavy;
font-size: @xf-fontSizeNormal;
}
}
}
.message-menu-link
{
&--delete i:after
{
.m-faContent(@fa-var-trash-o);
}
&--edit i:after
{
.m-faContent(@fa-var-edit);
}
&--report i:after
{
.m-faContent(@fa-var-frown-o);
}
&--warn i:after
{
.m-faContent(@fa-var-warning);
}
&--spam i:after
{
.m-faContent(@fa-var-ban);
}
&--ip i:after
{
.m-faContent(@fa-var-sitemap);
}
&--history i:after
{
.m-faContent(@fa-var-history);
}
&--follow i:after
{
.m-faContent(@fa-var-user-plus);
}
&--ignore i:after
{
.m-faContent(@fa-var-user-times);
}
&--share i:after
{
.m-faContent(@fa-var-share-alt);
}
}
// ############################# COMMENTS ###############
.comment
{
}
.comment-inner
{
display: table;
table-layout: fixed;
width: 100%;
}
.comment-avatar
{
display: table-cell;
width: 24px;
vertical-align: top;
.avatar,
img
{
vertical-align: bottom;
}
}
.comment-main
{
display: table-cell;
padding-left: @xf-messagePadding;
vertical-align: top;
}
.comment-contentWrapper
{
margin-bottom: @xf-messagePaddingSmall;
}
.comment-user
{
font-weight: @xf-fontWeightHeavy;
}
.comment-body
{
display: inline;
}
.comment-input
{
display: block;
height: 2.34em;
margin-bottom: @xf-messagePaddingSmall;
}
.comment-actionBar .actionBar-set
{
margin-top: @xf-messagePaddingSmall;
color: @xf-textColorMuted;
}
.comment-likes
{
.m-transitionFadeDown();
margin-top: @xf-messagePaddingSmall;
font-size: @xf-fontSizeSmaller;
}
// ################################## 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;
a,
a:hover
{
.xf-contentAccentLink();
}
&:first-child
{
margin-top: 0;
}
&:before
{
display: inline-block;
.m-faBase();
padding-right: .2em;
font-size: 125%;
color: @xf-textColorAttention;
}
&.messageNotice--deleted:before { .m-faContent(@fa-var-trash, .79em); }
&.messageNotice--moderated:before { .m-faContent(@fa-var-shield, .72em); }
&.messageNotice--warning:before { .m-faContent(@fa-var-warning, 1em); }
&.messageNotice--ignored:before { .m-faContent(@fa-var-microphone-slash, .79em); }
}
// ##################### MESSAGE VARIANTS/RESPONSIVE ##################
@media (min-width: @xf-responsiveEdgeSpacerRemoval)
{
.block:not(.block--messages)
{
@{block-noStripSel} > .block-body:first-child > .message:first-child,
.block-topRadiusContent.message,
.block-topRadiusContent > .message:first-child
{
.message-cell:first-child { border-top-left-radius: @block-borderRadius-inner; }
.message-cell:last-child { border-top-right-radius: @block-borderRadius-inner; }
}
@{block-noStripSel} > .block-body:last-child > .message:last-child,
.block-bottomRadiusContent.message,
.block-bottomRadiusContent > .message:last-child
{
.message-cell:first-child { border-bottom-left-radius: @block-borderRadius-inner; }
.message-cell:last-child { border-bottom-right-radius: @block-borderRadius-inner; }
}
}
}
.block--messages
{
.block-container
{
background: none;
border: none;
}
.message,
.block-row
{
.xf-contentBase();
.xf-blockBorder();
border-radius: @xf-blockBorderRadius;
+ .message,
+ .block-row
{
margin-top: @xf-blockPaddingV;
}
}
.message-cell
{
&:first-child
{
border-radius: 0;
/// border-top-left-radius: @block-borderRadius-inner;
/// border-bottom-left-radius: @block-borderRadius-inner;
}
&:last-child
{
border-radius: 0;
/// border-top-right-radius: @block-borderRadius-inner;
/// border-bottom-right-radius: @block-borderRadius-inner;
}
&:first-child:last-child
{
border-radius: @block-borderRadius-inner;
}
}
@media (max-width: @xf-messageSingleColumnWidth)
{
.message:not(.message--forceColumns)
{
.message-cell
{
&:first-child
{
border-radius: 0;
border-top-left-radius: @block-borderRadius-inner;
border-top-right-radius: @block-borderRadius-inner;
}
&:last-child
{
border-radius: 0;
border-bottom-left-radius: @block-borderRadius-inner;
border-bottom-right-radius: @block-borderRadius-inner;
}
&:first-child:last-child
{
border-radius: @block-borderRadius-inner;
}
}
}
.message--simple:not(.message--forceColumns) .message-cell--user + .message-cell
{
border-radius: 0;
border-top-left-radius: @block-borderRadius-inner;
border-top-right-radius: @block-borderRadius-inner;
}
}
@media (max-width: @xf-responsiveEdgeSpacerRemoval)
{
.message,
.block-row
{
border-left: none;
border-right: none;
border-radius: 0;
}
.message-cell
{
border-radius: 0;
&:first-child,
&:last-child
{
border-radius: 0;
}
}
.message--simple .message-cell--user + .message-cell
{
border-radius: 0;
}
}
}]]></template>
<template title="node_list.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[@_nodeList-statsCellBreakpoint: 1000px;
.node
{
& + .node
{
border-top: @xf-borderSize solid @xf-borderColorFaint;
}
}
.node-body
{
display: table;
table-layout: fixed;
width: 100%;
}
.node-icon
{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 47px;
padding: @xf-paddingLarge 0 @xf-paddingLarge @xf-paddingLarge;
i
{
display: block;
line-height: 1;
font-size: 0px;
&:before
{
display: inline-block;
content: '';
width: 32px;
height: 32px;
background: url('styles/brivium/technetium/extra/node-icons.png') no-repeat;
}
.node--forum &:before,
.node--category &:before
{
background-position: -52px center;
}
.node--page &:before
{
background-position: -94px center;
}
.node--link &:before
{
background-position: -136px center;
}
}
}
.node--unread
{
&.node--forum .node-icon i:before,
&.node--category .node-icon i:before
{
background-position: -10px center;
}
}
.node-main
{
display: table-cell;
vertical-align: middle;
padding: @xf-paddingLarge;
&:before,
&:after
{
display: block;
content: '';
margin: -3px 0;
}
}
.node-stats
{
display: none;
width: 170px;
vertical-align: middle;
text-align: center;
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;
}
}
.node-extra
{
display: table-cell;
vertical-align: middle;
width: 230px;
padding: @xf-paddingLarge;
font-size: @xf-fontSizeSmall;
&:before,
&:after
{
display: block;
content: '';
margin: -3px 0;
}
}
.node-extra-row
{
.m-overflowEllipsis();
color: @xf-textColorMuted;
&:first-child
{
font-weight: @xf-fontWeightHeavy;
line-height: 1.4;
&:before
{
display: inline-block;
content: "";
width: 14px;
height: 17px;
margin-bottom: -4px;
margin-right: 5px;
background: url('styles/brivium/technetium/extra/node-extra-icon.png') no-repeat top;
}
}
&:last-child
{
font-size: @xf-fontSizeSmallest;
line-height: ~"calc(18/11)";
}
.node-extra-user .username
{
color: @xf-paletteAccent2;
}
.listInline.listInline--bullet
{
>li:before { display: none; }
>li:after { content: ','; }
>li:last-child:after { content: ''; }
}
}
.node-extra-placeholder
{
font-style: italic;
}
.node-title
{
margin: 0;
padding: 0;
font-size: @xf-fontSizeSmall;
font-weight: @xf-fontWeightHeavy;
.node--unread &
{
/// font-weight: @xf-fontWeightHeavy;
}
}
.node-description
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorDimmed;
&.node-description--tooltip
{
.has-js.has-no-touchevents &
{
display: none;
}
}
}
.node-meta
{
font-size: @xf-fontSizeSmallest;
line-height: ~"calc(18/11)";
}
.node-statsMeta
{
/// display: none;
@media (max-width: @_nodeList-statsCellBreakpoint)
{
/// display: inline;
}
.pairs
{
+ .pairs,
+ .node-subNodeMenu
{
margin-left: 15px;
}
}
}
.node-bonus
{
font-size: @xf-fontSizeSmall;
color: @xf-textColorMuted;
text-align: right;
}
.node-subNodesFlat
{
font-size: @xf-fontSizeSmallest;
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-extra
{
display: block;
width: auto;
// this gives an equivalent of medium padding between main and extra, with main still having large
margin-top: (@xf-paddingMedium - @xf-paddingLarge);
padding-top: 0;
}
.node-extra-row
{
display: inline-block;
vertical-align: top;
max-width: 100%;
}
.node-description,
.node-stats,
.node-subNodesFlat
{
display: none;
}
}
@media (max-width: @xf-responsiveNarrow)
{
.node-subNodeMenu
{
display: none;
}
}
.subNodeLink
{
color: rgb(0, 28, 81);
font-weight: @xf-fontWeightHeavy;
&:before
{
display: inline-block;
.m-faBase();
width: 1em;
padding-right: .3em;
text-decoration: none;
color: rgb(0, 28, 81);
/// text-shadow: 1px 1px 0 fade(xf-intensify(@xf-nodeIconReadColor, 50%), 50%);
}
&:hover:before
{
text-decoration: none;
}
&.subNodeLink--unread
{
font-weight: @xf-fontWeightHeavy;
&:before
{
/// color: @xf-nodeIconUnreadColor;
/// text-shadow: 1px 1px 0 fade(xf-intensify(@xf-nodeIconUnreadColor, 50%), 50%);
}
}
&.subNodeLink--forum:before,
&.subNodeLink--category:before
{
.m-faContent(@fa-var-circle, 2em);
font-size: 5px;
transform: translateY(-50%);
}
&.subNodeLink--page:before
{
.m-faContent(@fa-var-file-text);
}
&.subNodeLink--link:before
{
.m-faContent(@fa-var-link);
}
}
.node-subNodeFlatList
{
.m-listPlain();
.m-clearFix();
> li
{
display: inline-block;
margin-right: .5em;
margin-bottom: .5em;
padding: 6px 1em 6px;
border-radius: @xf-borderRadiusSmall;
float: left;
&:last-child
{
margin-right: 0;
}
&:hover
{
background: rgb(0, 28, 81);
cursor: pointer;
a
{
color: @xf-paletteNeutral1;
text-decoration: none;
&:before { color: inherit; }
}
}
}
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="node_list_category" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<div class="block block--category block--category{$node.node_id}">
<span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
<div class="block-container">
<h2 class="block-header">
<a href="{{ link('categories', $node) }}">{$node.title}</a>
<xf:if is="property('CategoryDescriptionDisplay') == 'tooltip'">
<div class="block-tooltip">
<xf:if is="{$node.description}">
<span class="block-desc">{$node.description|raw}</span>
</xf:if>
</div>
</xf:if>
<xf:if is="property('CategoryDescriptionDisplay') == 'inline'">
<xf:if is="{$node.description}">
<span class="block-desc">{$node.description|raw}</span>
</xf:if>
</xf:if>
</h2>
<div class="block-body">
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}"
arg-extras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</div>
</div>
</div>
</xf:macro>
<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<div class="node node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
<div class="node-body">
<span class="node-icon" aria-hidden="true"><i></i></span>
<div class="node-main js-nodeMain">
<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
<h3 class="node-title">
<a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
</h3>
<xf:if is="$descriptionDisplay != 'none' && $node.description">
<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
</xf:if>
<div class="node-meta">
<xf:if is="!{$extras.privateInfo}">
<div class="node-statsMeta">
<dl class="pairs pairs--inline">
<dt>{{ phrase('threads') }}</dt>
<dd>{$extras.discussion_count|number}</dd>
</dl>
<dl class="pairs pairs--inline">
<dt>{{ phrase('messages') }}</dt>
<dd>{$extras.message_count|number}</dd>
</dl>
</div>
</xf:if>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
<xf:macro template="forum_list" name="sub_nodes_menu"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</div>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
<xf:macro template="forum_list" name="sub_nodes_flat"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</div>
<xf:if is="!{$extras.privateInfo}">
<div class="node-stats">
<dl class="pairs pairs--rows">
<dt>{{ phrase('threads') }}</dt>
<dd>{$extras.discussion_count|number}</dd>
</dl>
<dl class="pairs pairs--rows">
<dt>{{ phrase('messages') }}</dt>
<dd>{$extras.message_count|number}</dd>
</dl>
</div>
</xf:if>
<div class="node-extra">
<xf:if is="{$extras.privateInfo}">
<span class="node-extra-placeholder">{{ phrase('private') }}</span>
<xf:elseif is="{$extras.last_post_date}" />
<div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
<div class="node-extra-row">
<ul class="listInline listInline--bullet">
<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
<xf:else />
<li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
</xf:if>
<li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
</ul>
</div>
<xf:else />
<span class="node-extra-placeholder">{{ phrase('none') }}</span>
</xf:if>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<li>
<a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
<xf:macro template="forum_list" name="sub_node_list"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</li>
</xf:macro>]]></template>
<template title="node_list_forum" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<div class="block">
<div class="block-container">
<div class="block-body">
<xf:macro name="forum"
arg-node="{$node}"
arg-extras="{$extras}"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{$depth}" />
</div>
</div>
</div>
</xf:macro>
<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<xf:macro name="forum"
arg-node="{$node}"
arg-extras="{$extras}"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{$depth}" />
</xf:macro>
<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
<li>
<a href="{{ link('forums', $node) }}" class="subNodeLink subNodeLink--forum {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
<xf:macro template="forum_list" name="sub_node_list"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</li>
</xf:macro>
<xf:macro name="forum"
arg-node="!"
arg-extras="!"
arg-children="!"
arg-childExtras="!"
arg-depth="!"
arg-chooseName=""
arg-bonusInfo="">
<div class="node node--id{$node.node_id} node--depth{$depth} node--forum {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
<div class="node-body">
<span class="node-icon" aria-hidden="true"><i></i></span>
<div class="node-main js-nodeMain">
<xf:if is="$chooseName">
<xf:checkbox standalone="true">
<xf:option labelclass="u-pullRight" class="js-chooseItem" name="{$chooseName}[]" value="{$node.node_id}" />
</xf:checkbox>
</xf:if>
<xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
<h3 class="node-title">
<a href="{{ link('forums', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
</h3>
<xf:if is="$descriptionDisplay != 'none' && $node.description">
<div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
</xf:if>
<div class="node-meta">
<xf:if is="!{$extras.privateInfo}">
<div class="node-statsMeta">
<dl class="pairs pairs--inline">
<dt>{{ phrase('threads') }}</dt>
<dd>{$extras.discussion_count|number}</dd>
</dl>
<dl class="pairs pairs--inline">
<dt>{{ phrase('messages') }}</dt>
<dd>{$extras.message_count|number}</dd>
</dl>
</div>
</xf:if>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
<xf:macro template="forum_list" name="sub_nodes_menu"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</div>
<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
<xf:macro template="forum_list" name="sub_nodes_flat"
arg-children="{$children}"
arg-childExtras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
<xf:if is="$bonusInfo is not empty">
<div class="node-bonus">{$bonusInfo}</div>
</xf:if>
</div>
<xf:if is="!{$extras.privateInfo}">
<div class="node-stats">
<dl class="pairs pairs--rows">
<dt>{{ phrase('threads') }}</dt>
<dd>{$extras.discussion_count|number}</dd>
</dl>
<dl class="pairs pairs--rows">
<dt>{{ phrase('messages') }}</dt>
<dd>{$extras.message_count|number}</dd>
</dl>
</div>
</xf:if>
<div class="node-extra">
<xf:if is="{$extras.privateInfo}">
<span class="node-extra-placeholder">{{ phrase('private') }}</span>
<xf:elseif is="{$extras.last_post_date}" />
<div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
<div class="node-extra-row">
<ul class="listInline listInline--bullet">
<xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
<li class="node-extra-user">{{ phrase('ignored_member') }}</li>
<xf:else />
<li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
</xf:if>
<li><xf:date time="{$extras.last_post_date}" class="node-extra-date" />
</ul>
</div>
<xf:else />
<span class="node-extra-placeholder">{{ phrase('none') }}</span>
</xf:if>
</div>
</div>
</div>
<xf:if is="{$depth} == 1">
<xf:macro template="forum_list" name="node_list"
arg-children="{$children}"
arg-extras="{$childExtras}"
arg-depth="{{ $depth + 1 }}" />
</xf:if>
</xf:macro>]]></template>
<template title="setup.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![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: 100px;
@avatar-l: (@_avatarBaseSize) * 2;
@avatar-o: (@_avatarBaseSize) * 4;
@rtl: xf-isRtl;
@ltr: xf-isLtr;
{{ include('setup_fa_variables.less') }}
// ####################################### MIXINS ##################################
.m-clearFix()
{
&:before,
&:after
{
content: " ";
display: table;
}
&:after
{
clear: both;
}
}
.m-hideText()
{
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
}
.m-overflowEllipsis()
{
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
}
.m-appendColon()
{
&:after
{
content: "{$xf.language.label_separator}";
}
&.is-sentence:after
{
content: "";
}
}
.m-tooltipArrow(@color, @size, @variation: ~'', @fillColor: false)
{
@{variation}.tooltip--top &
{
bottom: 0;
left: 50%;
margin-left: -@size;
.m-triangleDown(@color, @size);
}
@{variation}.tooltip--bottom &
{
top: 0;
left: 50%;
margin-left: -@size;
.m-triangleUp(@color, @size);
}
@{variation}.tooltip--right &
{
top: 50%;
left: 0;
margin-top: -@size;
.m-triangleLeft(@color, @size);
}
@{variation}.tooltip--left &
{
top: 50%;
right: 0;
margin-top: -@size;
.m-triangleRight(@color, @size);
}
& when (iscolor(@fillColor))
{
@{variation} &:after
{
position: absolute;
content: '';
}
@{variation}.tooltip--top &:after
{
bottom: 1px;
left: -@size + 1px;
.m-triangleDown(@fillColor, @size - 1px);
}
@{variation}.tooltip--bottom &:after
{
top: 1px;
left: -@size + 1px;
.m-triangleUp(@fillColor, @size - 1px);
}
@{variation}.tooltip--right &:after
{
left: 1px;
bottom: -@size + 1px;
.m-triangleLeft(@fillColor, @size - 1px);
}
@{variation}.tooltip--left &:after
{
right: 1px;
bottom: -@size + 1px;
.m-triangleRight(@fillColor, @size - 1px);
}
}
}
.m-triangleUp(@color; @size)
{
border: @size solid transparent;
border-top-width: 0;
border-bottom-color: @color;
}
.m-triangleDown(@color; @size)
{
border: @size solid transparent;
border-bottom-width: 0;
border-top-color: @color;
}
.m-triangleLeft(@color; @size)
{
border: @size solid transparent;
border-left-width: 0;
border-right-color: @color;
}
.m-triangleRight(@color; @size)
{
border: @size solid transparent;
border-right-width: 0;
border-left-color: @color;
}
.m-dropShadow(@x: 1px; @y: 2px; @blur: 2px; @spread: 0; @alpha: 0.25)
{
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.m-textOutline(@fillColor: white; @strokeColor: black; @width: 1px;)
{
-webkit-text-fill-color: @fillColor;
-webkit-text-stroke-color: @strokeColor;
-webkit-text-stroke-width: @width;
}
.m-gradient(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%)
{
background: @fallback;
background: linear-gradient(to bottom, @startColor @startPos, @stopColor @endPos);
}
.m-gradientHorizontal(@startColor; @stopColor; @fallback; @startPos: 0%; @endPos: 100%)
{
background: @fallback;
& when(@ltr)
{
background: linear-gradient(to right, @startColor @startPos, @stopColor @endPos);
}
& when(@rtl)
{
background: linear-gradient(to left, @startColor @startPos, @stopColor @endPos);
}
}
.m-tabSize(@size: 4)
{
-moz-tab-size: @size;
tab-size: @size;
}
.m-transition(@prop: all; @duration: @xf-animationSpeed; @ease: ease)
{
-webkit-transition: @prop @duration @ease;
transition: @prop @duration @ease;
}
.m-transitionProperty(@props)
{
-webkit-transition-property: @props;
transition-property: @props;
}
.m-animation(@props)
{
-webkit-animation: @props;
animation: @props;
}
.m-transform(@props)
{
-webkit-transform: @props;
-ms-transform: @props;
transform: @props;
}
.m-keyframes(@name, @rules)
{
@-webkit-keyframes @name { @rules(); }
@keyframes @name { @rules(); }
}
.m-columns(@count; @breakWidth: 0; @gap: 1em)
{
-moz-column-count: @count;
-webkit-column-count: @count;
column-count: @count;
-moz-column-gap: @gap;
-webkit-column-gap: @gap;
column-gap: @gap;
& when(@breakWidth > 0)
{
@media (max-width: @breakWidth)
{
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
}
.m-columnBreakAvoid()
{
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
page-break-inside: avoid;
}
.m-borderLeftRadius(@radius)
{
border-top-left-radius: @radius;
border-bottom-left-radius: @radius;
}
.m-borderRightRadius(@radius)
{
border-top-right-radius: @radius;
border-bottom-right-radius: @radius;
}
.m-borderTopRadius(@radius)
{
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}
.m-borderBottomRadius(@radius)
{
border-bottom-left-radius: @radius;
border-bottom-right-radius: @radius;
}
.m-hiddenLinks()
{
a
{
color: inherit;
text-decoration: none;
&:hover
{
text-decoration: underline;
}
}
}
.m-textColoredLinks()
{
a
{
color: inherit;
text-decoration: underline;
}
}
.m-placeholder(@rules)
{
&::-webkit-input-placeholder { @rules(); }
&::-moz-placeholder { @rules(); }
&:-moz-placeholder { @rules(); }
&:-ms-input-placeholder { @rules(); }
}
.m-autoCompleteList()
{
.m-listPlain();
cursor: default;
.xf-menu();
min-width: 180px;
max-width: 95%;
border: @xf-borderSize solid @xf-borderColor;
.m-dropShadow(0, 3px, 5px, 0, .3);
li
{
padding: @xf-paddingMedium;
line-height: 24px;
.m-clearFix();
&.is-selected
{
background: @xf-contentHighlightBg;
}
.autoCompleteList-icon
{
float: left;
margin-right: @xf-paddingMedium;
width: 24px;
height: 24px;
}
}
}
.m-listPlain()
{
list-style: none;
margin: 0;
padding: 0;
}
// makes direct children display: inline-block, removing white-space between elements (mostly used on ul > li)
.m-inlineBlocks(@fontSize: @xf-fontSizeNormal)
{
font-size: 0;
> *
{
display: inline-block;
font-size: @fontSize;
}
}
.m-tabsTogether(@fontSize: @xf-fontSizeNormal)
{
font-size: 0;
.tabs-tab,
.tabs-extra,
.hScroller-action
{
font-size: @fontSize;
}
}
.m-hiddenEl(@transition: true)
{
display: none;
&.is-active
{
display: block;
}
& when(@transition = true)
{
.m-transitionFadeDown();
}
}
.m-transitionFade(@speed: @xf-animationSpeed)
{
display: none;
opacity: 0;
.m-transition(all, @speed);
.m-transitionProperty(all, -xf-opacity;);
&.is-active
{
display: block;
opacity: 1;
}
&.is-transitioning
{
display: block;
}
}
.m-transitionFadeDown(@speed: @xf-animationSpeed)
{
.m-transitionFade(@speed);
overflow-y: hidden;
height: 0;
.m-transitionProperty(all, -xf-height;);
&.is-active
{
height: auto;
overflow-y: visible;
}
&.is-transitioning
{
overflow-y: hidden;
}
}
.m-visuallyHidden()
{
position: absolute;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
.m-faBase()
{
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.m-faContent(@content, @width: false, @direction: false)
{
& when (@direction = false) {
content: @content;
}
& when (@direction = ltr) {
-ltr-content: @content;
}
& when (@direction = rtl) {
-rtl-content: @content;
}
& when (isnumber(@width)) {
display: inline-block;
width: @width;
}
}
.m-faBefore(@icon, @width: false)
{
&:before
{
.m-faContent(@icon, @width);
}
}
.m-faAfter(@icon, @width: false)
{
&:after
{
.m-faContent(@icon, @width);
}
}
.m-buttonIcon(@icon, @width: false)
{
& > .button-text
{
.m-faBefore(@icon, @width);
}
}
.m-avatarSize(@avatarSize)
{
width: @avatarSize;
height: @avatarSize;
font-size: (@avatarSize) * (@xf-avatarDynamicTextPercent / 100);
}
.m-buttonBase()
{
display: inline-block;
text-decoration: none;
cursor: pointer;
border: 0;
white-space: nowrap;
.m-transition(background-color);
.xf-buttonBase();
}
.m-buttonColorVariation(@bgColor; @textColor)
{
color: @textColor;
background-color: @bgColor;
.m-buttonBorderColorVariation(@bgColor);
&:hover,
&:active,
&:focus
{
background-color: saturate(xf-intensify(@bgColor, 4%), 12%);
}
}
.m-buttonBlockColorVariationSimple(@color)
{
.m-buttonBorderColorVariation(@color);
&:not(.button--splitTrigger),
&.button--splitTrigger > .button-text,
&.button--splitTrigger > .button-menu
{
&:hover,
&:focus,
&:active
{
background-color: saturate(xf-intensify(@color, 4%), 12%);
}
}
}
.m-buttonBorderColorVariation(@borderColor)
{
border-color: xf-diminish(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-intensify(@borderColor, 5%) xf-diminish(@borderColor, 5%);
&.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;
.has-no-flexbox &
{
width: @width;
}
}
.m-labelVariation(@color; @bg; @border: false)
{
color: @color;
background: @bg;
border-color: xf-intensify(@bg, 10%);
& when (iscolor(@border))
{
border-color: @border;
}
a&:hover,
a:hover &
{
background: xf-intensify(@bg, 4%);
border-color: xf-intensify(@bg, 14%);
& when (iscolor(@border))
{
border-color: xf-intensify(@border, 4%);
}
}
}
// STICKY HEADER STUFF
// Note that to access the height and offset, you need to call the mixin and use the variables locally.
@header-navHeight: 2 * (@xf-publicNavPaddingV)
+ (xf-default(@xf-publicNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault));
@header-subNavHeight: 2 * (@xf-publicSubNavPaddingV)
+ (xf-default(@xf-publicSubNav--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault))
+ xf-default(@xf-publicSubNav--border-top-width, 0)
+ xf-default(@xf-publicSubNav--border-bottom-width, 0);
.m-stickyHeaderConfig(@type)
{
@_stickyHeader-offset: 10px;
@_stickyHeader-height: 0;
}
.m-stickyHeaderConfig(@type) when(@type = primary)
{
@_stickyHeader-height: @header-navHeight;
}
.m-stickyHeaderConfig(@type) when(@type = all)
{
@_stickyHeader-height: @header-navHeight + @header-subNavHeight;
}]]></template>
<template title="structured_list.less" type="public" addon_id="XF" version_id="2000770" version_string="2.0.7"><![CDATA[@_structItem-avatarSize: 48px;
@_structItem-avatarSizeExpanded: 48px;
@_structItem-cellPaddingH: @xf-paddingLarge;
@_structItem-cellPaddingV: @xf-paddingLargest;
.structItemContainer
{
border-collapse: collapse;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.structItemContainer-group
{
}
.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-borderColor;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
&.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-cellPaddingH;
.structItem--middle &
{
vertical-align: middle;
}
&.structItem-cell--icon
{
width: ((@_structItem-avatarSize) + (@_structItem-cellPaddingH) * 2);
position: relative;
&.structItem-cell--iconExpanded
{
width: ((@_structItem-avatarSizeExpanded) + (@_structItem-cellPaddingH) * 2);
}
&.structItem-cell--iconFixedSmall
{
width: (60px + (@_structItem-cellPaddingH) * 2);
}
padding: @_structItem-cellPaddingH;
}
&.structItem-cell--main,
&.structItem-cell--newThread
{
padding-left: @_structItem-cellPaddingH/2;
}
&.structItem-cell--meta
{
width: 150px;
background: rgba(229, 229, 237, 0.5);
border-left: @xf-borderSize solid @xf-borderColor;
border-right: @xf-borderSize solid @xf-borderColor;
}
&.structItem-cell--latest
{
width: 190px;
text-align: right;
.username
{
color: @xf-paletteAccent2;
font-weight: @xf-fontWeightHeavy;
}
}
}
.structItem-iconContainer
{
position: relative;
img
{
display: block;
width: 100%;
}
.avatar
{
.m-avatarSize(@_structItem-avatarSize);
}
.structItem-secondaryIcon
{
position: absolute;
right: -5px;
bottom: -5px;
.m-avatarSize(@_structItem-avatarSize / 2 + 2px);
}
.structItem-cell--iconExpanded &
{
.avatar
{
.m-avatarSize(@_structItem-avatarSizeExpanded);
}
.structItem-secondaryIcon
{
.m-avatarSize(@_structItem-avatarSizeExpanded / 2 - 2px);
}
}
}
.structItem-title
{
font-size: @xf-fontSizeNormal;
font-weight: @xf-fontWeightHeavy;
margin: 0;
padding: 0;
a { color: @xf-textColorFeature; }
.label
{
font-weight: @xf-fontWeightNormal;
vertical-align: 1px;
margin-right: 5px;
}
.is-unread &
{
font-weight: 700;
}
}
.structItem-minor
{
font-size: @xf-fontSizeSmaller;
color: @xf-textColorMuted;
.m-hiddenLinks();
margin-top: 2px;
}
.structItem-parts
{
.m-listPlain();
display: inline;
> li
{
display: inline;
margin: 0;
padding: 0;
&:nth-child(even)
{
color: @xf-textColorMuted;
}
&:before
{
content: "\00B7\20";
}
&:first-child:before
{
content: "";
display: none;
}
}
.username
{
color: @xf-textColor;
}
}
.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-status
{
&::before
{
.m-faBase();
display: inline-block;
font-size: 90%;
color: @xf-textColorMuted;
}
&--deleted::before { .m-faContent(@fa-var-trash-o, .79em); }
&--locked::before { .m-faContent(@fa-var-lock, .65em); }
&--moderated::before { .m-faContent(@fa-var-shield, .72em); color: @xf-textColorAttention; }
&--redirect::before { .m-faContent(@fa-var-external-link, 1em); }
&--starred::before { .m-faContent(@fa-var-star, .93em); color: @xf-starFullColor; }
&--sticky::before { .m-faContent(@fa-var-thumb-tack, .65em); }
&--watched::before { .m-faContent(@fa-var-eye, 1.04em); color: @xf-textColorFeature; }
&--poll::before { .m-faContent(@fa-var-bar-chart, 1.15em); }
&--attention::before { .m-faContent(@fa-var-bullhorn, 1.04em); color: @xf-textColorAttention; }
}
.structItem.structItem--note
{
.xf-contentHighlightBase();
color: @xf-textColorFeature;
.structItem-cell
{
padding-top: @_structItem-cellPaddingV / 2;
padding-bottom: @_structItem-cellPaddingV / 2;
font-size: @xf-fontSizeSmaller;
text-align: center;
}
}
@media (max-width: @xf-responsiveWide)
{
.structItem-cell
{
vertical-align: top;
&.structItem-cell--meta
{
width: 120px;
font-size: @xf-fontSizeSmaller;
}
&.structItem-cell--latest
{
width: 140px;
font-size: @xf-fontSizeSmaller;
}
}
}
@media (max-width: @xf-responsiveMedium)
{
.structItem-cell
{
//padding: (@_structItem-cellPaddingV) / 2 @_structItem-cellPaddingH;
&.structItem-cell--main
{
display: block;
padding-bottom: .2em;
padding-left: 0;
}
&.structItem-cell--newThread
{
padding-left: 0;
}
&.structItem-cell--meta
{
display: block;
width: auto;
float: left;
padding-top: 0;
padding-left: 0;
padding-right: 0;
color: @xf-textColorMuted;
border: none;
background: transparent;
margin-top: 2px;
.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: inline-block;
}
.username
{
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;
}
}
}]]></template>
<template title="thread_list_macros" type="public" addon_id="XF" version_id="2001070" version_string="2.0.10"><![CDATA[<xf:macro name="item"
arg-thread="!"
arg-forum=""
arg-forceRead="{{ false }}"
arg-showWatched="{{ true }}"
arg-allowInlineMod="{{ true }}"
arg-chooseName=""
arg-extraInfo=""
arg-allowEdit="{{ true }}">
<xf:css src="structured_list.less" />
<div class="structItem structItem--thread{{ $thread.prefix_id ? ' is-prefix' . $thread.prefix_id : '' }}{{ $thread.isIgnored() ? ' is-ignored' : '' }}{{ ($thread.isUnread() AND !$forceRead) ? ' is-unread' : '' }}{{ $thread.discussion_state == 'moderated' ? ' is-moderated' : '' }}{{ $thread.discussion_state == 'deleted' ? ' is-deleted' : '' }} js-inlineModContainer js-threadListItem-{$thread.thread_id}" data-author="{{ $thread.User.username ?: $thread.username }}">
<div class="structItem-cell structItem-cell--icon">
<div class="structItem-iconContainer">
<xf:avatar user="$thread.User" size="s" defaultname="{$thread.username}" />
<xf:if is="property('MiniAvatar')">
<xf:if is="$thread.getUserPostCount()">
<xf:avatar user="$xf.visitor" size="s"
href=""
class="avatar--separated structItem-secondaryIcon"
title="{{ phrase('you_have_posted_x_messages_in_this_thread', {'count': $thread.getUserPostCount() }) }}" />
</xf:if>
</xf:if>
</div>
</div>
<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">
<xf:if contentcheck="true">
<ul class="structItem-statuses">
<xf:contentcheck>
<xf:if is="$thread.discussion_state == 'moderated'">
<li>
<i class="structItem-status structItem-status--moderated" aria-hidden="true" title="{{ phrase('awaiting_approval')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('awaiting_approval') }}</span>
</li>
</xf:if>
<xf:if is="$thread.discussion_state == 'deleted'">
<li>
<i class="structItem-status structItem-status--deleted" aria-hidden="true" title="{{ phrase('deleted')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('deleted') }}</span>
</li>
</xf:if>
<xf:if is="!$thread.discussion_open">
<li>
<i class="structItem-status structItem-status--locked" aria-hidden="true" title="{{ phrase('locked')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('locked') }}</span>
</li>
</xf:if>
<xf:if is="$thread.discussion_type == 'redirect'">
<li>
<i class="structItem-status structItem-status--redirect" aria-hidden="true" title="{{ phrase('redirect')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('redirect') }}</span>
</li>
<xf:elseif is="$thread.discussion_type == 'poll'" />
<li>
<i class="structItem-status structItem-status--poll" aria-hidden="true" title="{{ phrase('poll')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('poll') }}</span>
</li>
</xf:if>
<xf:if is="{$showWatched} AND {$xf.visitor.user_id}">
<xf:if is="{$thread.Watch.{$xf.visitor.user_id}}">
<li>
<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('thread_watched')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('thread_watched') }}</span>
</li>
<xf:elseif is="!$forum AND {$thread.Forum.Watch.{$xf.visitor.user_id}}" />
<li>
<i class="structItem-status structItem-status--watched" aria-hidden="true" title="{{ phrase('forum_watched')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('forum_watched') }}</span>
</li>
</xf:if>
</xf:if>
<xf:if is="$thread.sticky">
<li>
<i class="structItem-status structItem-status--sticky" aria-hidden="true" title="{{ phrase('sticky')|for_attr }}"></i>
<span class="u-srOnly">{{ phrase('sticky') }}</span>
</li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<div class="structItem-title">
<xf:set var="$canPreview" value="{{ $thread.canPreview() }}" />
<xf:if is="$thread.prefix_id">
<xf:if is="$forum">
<a href="{{ link('forums', $forum, {'prefix_id': $thread.prefix_id}) }}" class="labelLink" rel="nofollow">{{ prefix('thread', $thread, 'html', '') }}</a>
<xf:else />
{{ prefix('thread', $thread, 'html', '') }}
</xf:if>
</xf:if>
<a href="{{ link('threads' . (($thread.isUnread() AND !$forceRead) ? '/unread' : ''), $thread) }}" class="" data-tp-primary="on" data-xf-init="{{ $canPreview ? 'preview-tooltip' : '' }}" data-preview-url="{{ $canPreview ? link('threads/preview', $thread) : '' }}">{$thread.title}</a>
</div>
<div class="structItem-minor">
<xf:if contentcheck="true">
<ul class="structItem-extraInfo">
<xf:contentcheck>
<xf:if is="{$extraInfo}">
<li>{$extraInfo}</li>
<xf:elseif is="$thread.canEdit() AND $thread.canUseInlineModeration() AND {$allowEdit}" />
<xf:if is="!$allowInlineMod OR !$forum">
<xf:set var="$editParams" value="{{ {
'_xfNoInlineMod': !$allowInlineMod ? 1 : null,
'_xfForumName': !$forum ? 1 : 0
} }}" />
<xf:else />
<xf:set var="$editParams" value="{{ [] }}" />
</xf:if>
<xf:if is="$thread.discussion_type != 'redirect'">
<li class="structItem-extraInfoMinor">
<a href="{{ link('threads/edit', $thread) }}" data-xf-click="overlay" data-href="{{ link('threads/edit', $thread, $editParams) }}">
{{ phrase('edit') }}
</a>
</li>
</xf:if>
</xf:if>
<xf:if is="$chooseName">
<li><xf:checkbox standalone="true">
<xf:option name="{$chooseName}[]" value="{$thread.thread_id}" class="js-chooseItem" />
</xf:checkbox></li>
<xf:elseif is="$allowInlineMod AND $thread.canUseInlineModeration()" />
<li><xf:checkbox standalone="true">
<xf:option value="{$thread.thread_id}" class="js-inlineModToggle"
data-xf-init="tooltip"
title="{{ phrase('select_for_moderation') }}"
label="{{ phrase('select_for_moderation') }}"
hiddenlabel="true"
/>
</xf:checkbox></li>
</xf:if>
</xf:contentcheck>
</ul>
</xf:if>
<xf:if is="$thread.discussion_state == 'deleted'">
<xf:if is="{$extraInfo}"><span class="structItem-extraInfo">{$extraInfo}</span></xf:if>
<xf:macro template="deletion_macros" name="notice" arg-log="{$thread.DeletionLog}" />
<xf:else />
<ul class="structItem-parts">
<li><xf:username user="$thread.User" defaultname="{$thread.username}" /></li>
<li class="structItem-startDate"><a href="{{ link('threads', $thread) }}" rel="nofollow"><xf:date time="{$thread.post_date}" /></a></li>
<xf:if is="!$forum">
<li><a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a></li>
</xf:if>
</ul>
<xf:if is="property('pageJump')">
<xf:if is="$thread.discussion_type != 'redirect' && $thread.reply_count >= $xf.options.messagesPerPage && $xf.options.lastPageLinks">
<span class="structItem-pageJump">
<xf:foreach loop="{{ last_pages($thread.reply_count + 1, $xf.options.messagesPerPage, $xf.options.lastPageLinks) }}" value="$p">
<a href="{{ link('threads', $thread, {'page': $p}) }}">{$p}</a>
</xf:foreach>
</span>
</xf:if>
</xf:if>
</xf:if>
</div>
</div>
<div class="structItem-cell structItem-cell--meta" title="{{ phrase('first_message_likes:')|for_attr }} {$thread.first_post_likes|number}">
<dl class="pairs pairs--justified">
<dt>{{ phrase('replies') }}</dt>
<dd>{{ $thread.discussion_type == 'redirect' ? '–' : $thread.reply_count|number }}</dd>
</dl>
<dl class="pairs pairs--justified structItem-minor">
<dt>{{ phrase('views') }}</dt>
<dd>{{ $thread.discussion_type == 'redirect' ? '–' : ($thread.view_count > $thread.reply_count ? $thread.view_count|number : number($thread.reply_count+1)) }}</dd>
</dl>
</div>
<div class="structItem-cell structItem-cell--latest">
<xf:if is="$thread.discussion_type == 'redirect'">
{{ phrase('n_a') }}
<xf:else />
<xf:if is="$xf.visitor.isIgnoring($thread.last_post_user_id)">
{{ phrase('ignored_member') }}
<xf:else />
<xf:username user="{$thread.last_post_cache}" />
</xf:if>
<div class="structItem-minor">
<a href="{{ link('threads/latest', $thread) }}" rel="nofollow"><xf:date time="{$thread.last_post_date}" class="structItem-latestDate" /></a>
</div>
</xf:if>
</div>
</div>
</xf:macro>
<xf:macro name="item_new_posts" arg-thread="!">
<div class="contentRow">
<div class="contentRow-figure">
<xf:avatar user="$thread.LastPoster" size="xxs" defaultname="{$thread.last_post_username}" />
</div>
<div class="contentRow-main contentRow-main--close">
<xf:if is="$thread.isUnread()">
<a href="{{ link('threads/unread', $thread) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
<xf:else />
<a href="{{ link('threads/post', $thread, {'post_id': $thread.last_post_id}) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
</xf:if>
<div class="contentRow-minor contentRow-minor--hideLinks">
<ul class="listInline listInline--bullet">
<li>{{ phrase('latest_x', {'name': $thread.last_post_cache.username}) }}</li>
<li><xf:date time="{$thread.last_post_date}" /></li>
</ul>
</div>
<div class="contentRow-minor contentRow-minor--hideLinks">
<a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="item_new_threads" arg-thread="!">
<div class="contentRow">
<div class="contentRow-figure">
<xf:avatar user="$thread.User" size="xxs" defaultname="{$thread.username}" />
</div>
<div class="contentRow-main contentRow-main--close">
<a href="{{ link('threads', $thread) }}">{{ prefix('thread', $thread) }}{$thread.title}</a>
<div class="contentRow-minor contentRow-minor--hideLinks">
<ul class="listInline listInline--bullet">
<li>{{ phrase('started_by_x', {'name': $thread.username}) }}</li>
<li><xf:date time="{$thread.post_date}" /></li>
<li>{{ phrase('replies:') }} {$thread.reply_count|number}</li>
</ul>
</div>
<div class="contentRow-minor contentRow-minor--hideLinks">
<a href="{{ link('forums', $thread.Forum) }}">{$thread.Forum.title}</a>
</div>
</div>
</div>
</xf:macro>
<xf:macro name="quick_thread"
arg-forum="!"
arg-page="1"
arg-order="last_post_date"
arg-direction="desc">
<xf:css src="structured_list.less" />
<xf:if is="$forum.canCreateThread()">
<xf:js src="xf/thread.js" min="1" />
<xf:set var="$inlineMode" value="{{ ($page == 1 && $order == 'last_post_date' && $direction == 'desc') ? true : false }}" />
<xf:form action="{{ link('forums/post-thread', $forum, {'inline-mode': $inlineMode}) }}" class="structItem" ajax="true"
draft="{{ link('forums/draft', $forum) }}"
data-xf-init="quick-thread"
data-focus-activate=".js-titleInput"
data-focus-activate-href="{{ link('forums/post-thread', $forum, {'inline-mode': true}) }}"
data-focus-activate-target=".js-quickThreadFields"
data-insert-target=".js-threadList"
data-replace-target=".js-emptyThreadList">
<div class="structItem-cell structItem-cell--icon">
<div class="structItem-iconContainer">
<xf:avatar user="$xf.visitor" size="s" />
</div>
</div>
<div class="structItem-cell structItem-cell--newThread js-prefixListenContainer">
<xf:formrow rowtype="noGutter noLabel fullWidth noPadding mergeNext"
label="{{ phrase('title') }}">
<xf:prefixinput maxlength="{{ max_length('XF:Thread', 'title') }}"
placeholder="{$forum.thread_prompt}"
title="{{ phrase('post_new_thread_in_this_forum') }}"
prefix-value="{$forum.default_prefix_id}"
type="thread"
prefixes="{{ $forum.getUsablePrefixes() }}"
data-xf-init="tooltip"
rows="1"/>
</xf:formrow>
<div class="js-quickThreadFields inserter-container is-hidden"><!--{{ phrase('loading...') }}--></div>
</div>
</xf:form>
</xf:if>
</xf:macro>]]></template>
</templates>
<properties>
<group group_name="BriviumSettings" title="[Brivium]-Settings" description="" display_order="10" addon_id=""/>
<group group_name="BriviumFooter" title="[Brivium]-Footer" description="" display_order="20" addon_id=""/>
<property property_name="CategoryDescriptionDisplay" group_name="BriviumSettings" title="Category description display style" description="" property_type="value" value_type="radio" depends_on="" value_group="" display_order="300" addon_id="">
<value_parameters>tooltip={{ phrase('tooltip') }}
inline={{ phrase('inline') }}
none={{ phrase('none') }}</value_parameters>
<value>"tooltip"</value>
</property>
<property property_name="FooterColumn1" group_name="BriviumFooter" title="Footer Column 1" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="100" addon_id="">
<value>"<div class=\"footer-header\">About Us</div> <div class=\"footer-body\"> \t<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> \t<div class=\"social-link\"> \t\t<a href=\"#\" class=\"s-facebook\"><i class=\"fa fa-facebook\" aria-hidden=\"true\"></i></a> \t\t<a href=\"#\" class=\"s-youtube\"><i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i></a> \t\t<a href=\"#\" class=\"s-vimeo\"><i class=\"fa fa-vimeo\" aria-hidden=\"true\"></i></a> \t\t<a href=\"#\" class=\"s-google-plus\"><i class=\"fa fa-google-plus\" aria-hidden=\"true\"></i></a> \t\t<a href=\"#\" class=\"s-flickr\"><i class=\"fa fa-flickr\" aria-hidden=\"true\"></i></a> \t</div> </div>"</value>
</property>
<property property_name="FooterColumn2" group_name="BriviumFooter" title="Footer Column 2" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="200" addon_id="">
<value>"<div class=\"footer-header\">Related Link</div> <div class=\"footer-body\"> \t<ul class=\"listPlain extra-link\"> \t\t<li><a href=\"#\">Link Demo 01</a></li> \t\t<li><a href=\"#\">Link Demo 02</a></li> \t\t<li><a href=\"#\">Link Demo 03</a></li> \t\t<li><a href=\"#\">Link Demo 04</a></li> \t\t<li><a href=\"#\">Link Demo 05</a></li> \t</ul> </div>"</value>
</property>
<property property_name="FooterColumn3" group_name="BriviumFooter" title="Footer Column 3" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="300" addon_id="">
<value>"<div class=\"footer-header\">Related Link</div> <div class=\"footer-body\"> \t<ul class=\"listPlain extra-link\"> \t\t<li><a href=\"#\">Link Demo 01</a></li> \t\t<li><a href=\"#\">Link Demo 02</a></li> \t\t<li><a href=\"#\">Link Demo 03</a></li> \t\t<li><a href=\"#\">Link Demo 04</a></li> \t\t<li><a href=\"#\">Link Demo 05</a></li> \t</ul> </div>"</value>
</property>
<property property_name="FooterColumn4" group_name="BriviumFooter" title="Footer Column 4" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="400" addon_id="">
<value>"<div class=\"footer-header\">Contact Us</div> <div class=\"footer-body\"> \t<ul class=\"listPlain contact-link\"> \t\t<li class=\"home\"><i class=\"fa fa-home\" aria-hidden=\"true\"></i>15 Str., 4844, Ipsum, State, UK</li> \t\t<li class=\"phone\"><i class=\"fa fa-phone\" aria-hidden=\"true\"></i>+30-2106019311</li> \t\t<li class=\"envelope\"><i class=\"fa fa-envelope\" aria-hidden=\"true\"></i>support@brivium.com</li> \t\t<li class=\"globe\"><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>www.brivium.com</li> \t</ul> </div>"</value>
</property>
<property property_name="MiniAvatar" group_name="BriviumSettings" title="Mini Avatar" description="Show/ Hide mini avatar in thread list." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="100" addon_id="">
<value>0</value>
</property>
<property property_name="badgeHighlighted" group_name="misc" title="Badge - highlighted" description="Highlighted badges grab the viewer's attention more and tend to indicate new items to be reviewed" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
<value>{
"color": "@xf-paletteAccent2",
"background-color": "@xf-paletteNeutral1"
}</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": "@xf-contentBg",
"border-width": "@xf-borderSize",
"border-color": "@xf-borderColorLight"
}</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",
"background-color": "@xf-contentBg",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "@xf-borderColor",
"extra": "line-height: 1.5;\nbackground: linear-gradient(to top, rgba(0, 0, 0, .05) 0%, rgba(255, 255, 255, .05) 100%);"
}</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-fontSizeNormal",
"color": "@xf-textColor",
"background-color": "@xf-paletteNeutral1",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "@xf-borderColorLight",
"extra": "line-height: ~\"calc(20/14)\";\nbackground: linear-gradient(to top, rgba(0, 0, 0, .05) 0%, rgba(255, 255, 255, .05) 100%);"
}</value>
</property>
<property property_name="blockHeader" group_name="block" title="Block header" description="Blocks often have title bars at their tops, which are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-textColor",
"background-color": "@xf-contentBg",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "@xf-borderColorLight",
"extra": "line-height: ~\"calc(20/14)\";\nbackground: linear-gradient(to top, rgba(0, 0, 0, .05) 0%, rgba(255, 255, 255, .05) 100%);"
}</value>
</property>
<property property_name="blockLinkSelected" group_name="misc" title="Block link - selected" description="Styling for block-type links when in their selected state" property_type="css" value_type="" depends_on="" value_group="" display_order="21000" css_components="text,background,border_width_simple,border_color_simple,extra" addon_id="XF">
<value>{
"font-weight": "@xf-fontWeightHeavy",
"background-color": "@xf-contentHighlightBg",
"border-width": "@xf-borderSizeFeature",
"border-color": "@xf-paletteAccent1"
}</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": "@xf-fontSizeNormal",
"color": "@xf-textColor",
"background-color": "@xf-contentBg",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "@xf-borderColorLight",
"extra": "text-transform: uppercase;\nline-height: ~\"calc(20/14)\";\nbackground: linear-gradient(to top, rgba(0, 0, 0, .05) 0%, rgba(255, 255, 255, .05) 100%);"
}</value>
</property>
<property property_name="blockPaddingV" group_name="block" title="Block padding vertical" description="The vertical space between a block's content and its edges" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="200" addon_id="XF">
<value>"@xf-paddingLarge"</value>
</property>
<property property_name="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-paletteAccent1",
"border-bottom-width": "@xf-borderSize",
"border-bottom-color": "@xf-borderColor",
"extra": "background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);"
}</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-paletteAccent3",
"border-color": "@xf-paletteAccent3"
}</value>
</property>
<property property_name="buttonBase" group_name="button" title="Button base" description="Defines the styling for the basic elements that are common to all text-based buttons" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,border_radius,padding,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmall",
"border-radius": "@xf-borderRadiusSmall",
"padding-top": "@xf-paddingMedium",
"padding-right": "@xf-paddingLarge",
"padding-bottom": "@xf-paddingMedium",
"padding-left": "@xf-paddingLarge",
"extra": "text-align: center;"
}</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-paletteColor1",
"background-color": "rgb(127, 127, 127)"
}</value>
</property>
<property property_name="buttonPrimary" group_name="button" title="Button - primary" description="These rules are used mostly for the main submit button for forms" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "contrast(@xf-paletteColor3)",
"background-color": "@xf-paletteAccent1",
"extra": "min-width: 80px;"
}</value>
</property>
<property property_name="fontFamilyBody" group_name="fonts" title="Body Text Font" description="This font is used for the text of messages etc." property_type="value" value_type="string" depends_on="" value_group="font" display_order="200" addon_id="XF">
<value>"'Open Sans', sans-serif"</value>
</property>
<property property_name="fontFamilyCode" group_name="fonts" title="Code Font" description="The font list used for mono-spaced text input and output" property_type="value" value_type="string" depends_on="" value_group="font" display_order="300" addon_id="XF">
<value>"'Open Sans', sans-serif"</value>
</property>
<property property_name="fontFamilyLink" group_name="fonts" title="Font Family Link" description="Font family your want add from Google Font" property_type="value" value_type="string" depends_on="" value_group="" display_order="400" addon_id="">
<value>"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"</value>
</property>
<property property_name="fontFamilyUi" group_name="fonts" title="User Interface Font" description="The font list for your main text" property_type="value" value_type="string" depends_on="" value_group="font" display_order="100" addon_id="XF">
<value>"'Open Sans', sans-serif"</value>
</property>
<property property_name="fontSizeNormal" group_name="fonts" title="Normal font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1000" addon_id="XF">
<value>"14px"</value>
</property>
<property property_name="fontWeightHeavy" group_name="fonts" title="Heavy font weight" description="" property_type="value" value_type="number" depends_on="" value_group="weight" display_order="2200" addon_id="XF">
<value_parameters>step=100
min=100
max=900</value_parameters>
<value>"600"</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-fontSizeSmaller",
"color": "@xf-textColor",
"background-color": "mix(@xf-contentBg, @xf-paletteColor1, 60%)",
"border-width": "@xf-borderSize",
"border-radius": "@xf-borderRadiusMedium",
"border-top-color": "@xf-borderColorHeavy",
"border-right-color": "@xf-borderColorLight",
"border-bottom-color": "@xf-borderColorLight",
"border-left-color": "@xf-borderColorHeavy",
"padding-top": "7px",
"padding-right": "1em",
"padding-bottom": "7px",
"padding-left": "1em"
}</value>
</property>
<property property_name="linkColor" group_name="color" title="Link color" description="Basic hyperlinks on standard background colors will use this style" property_type="value" value_type="color" depends_on="" value_group="link" display_order="1000" addon_id="XF">
<value>"@xf-paletteNeutral3"</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>{
"color": "@xf-linkHoverColor",
"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="link" display_order="1100" addon_id="XF">
<value>"@xf-paletteAccent1"</value>
</property>
<property property_name="menuFooter" group_name="menu" title="Menu footer" description="When a popup menu has a bottom, footer element, it will use these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20600" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmaller",
"color": "@xf-textColorDimmed",
"border-top-width": "@xf-borderSize",
"border-top-color": "@xf-borderColorLight"
}</value>
</property>
<property property_name="menuLinkRowSelected" group_name="menu" title="Menu link row - selected" description="Styling for link rows in menus, when selected or hovered" property_type="css" value_type="" depends_on="" value_group="" display_order="20500" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "@xf-paletteAccent3",
"text-decoration": "none"
}</value>
</property>
<property property_name="messageUserBlockWidth" group_name="message" title="Message user info block width" description="Controls the width of the (left) user info column on the full size message block" property_type="value" value_type="unit" depends_on="" value_group="user" display_order="500" addon_id="XF">
<value>"122px"</value>
</property>
<property property_name="nodeListSubDisplay" group_name="nodeList" title="Sub-forums display style" description="Choose the style in which sub-forums will be displayed within a particular node element, according to the amount of space you want them to occupy" property_type="value" value_type="radio" depends_on="" value_group="" display_order="300" addon_id="XF">
<value_parameters>menu={{ phrase('popup_menu') }}
flat={{ phrase('listed_below_node') }}
none={{ phrase('none') }}</value_parameters>
<value>"flat"</value>
</property>
<property property_name="overlayHeader" group_name="overlay" title="Overlay header" description="Overlays use a header element to identify their contents, styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,padding,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-paletteNeutral1",
"background-color": "@xf-paletteAccent1",
"padding-top": "@xf-paddingLarge",
"padding-right": "@xf-paddingLargest",
"padding-bottom": "@xf-paddingLarge",
"padding-left": "@xf-paddingLargest"
}</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="contentBg" display_order="2100" addon_id="XF">
<value>"@xf-paletteNeutral3"</value>
</property>
<property property_name="pageJump" group_name="BriviumSettings" title="Page Jump" description="Show/ Hide page jump in thread list." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="200" addon_id="">
<value>0</value>
</property>
<property property_name="paletteAccent1" group_name="palette" title="Accent 1" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2000" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"rgb(3, 167, 70)"</value>
</property>
<property property_name="paletteAccent2" group_name="palette" title="Accent 2" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2100" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"rgb(255, 58, 59)"</value>
</property>
<property property_name="paletteAccent3" group_name="palette" title="Accent 3" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2200" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"rgb(0, 130, 53)"</value>
</property>
<property property_name="paletteNeutral1" group_name="palette" title="Neutral 1" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3000" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"rgb(255, 255, 255)"</value>
</property>
<property property_name="paletteNeutral3" group_name="palette" title="Neutral 3" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3200" addon_id="XF">
<value_parameters>hidePalette=true</value_parameters>
<value>"rgb(0, 9, 26)"</value>
</property>
<property property_name="publicFooter" group_name="footer" title="Footer" description="The footer is the primary element that sits below the main content on all public pages" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmall",
"color": "rgb(233, 237, 238)",
"background-color": "@xf-paletteAccent1"
}</value>
</property>
<property property_name="publicFooterLink" group_name="footer" title="Footer links" description="Controls styling for individual links within the footer" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,extra" addon_id="XF">
<value>{
"color": "rgb(233, 237, 238)"
}</value>
</property>
<property property_name="publicLogoUrl" group_name="basic" title="Logo URL" description="The web path from your site's XenForo installation directory to your logo image." property_type="value" value_type="string" depends_on="" value_group="logo" display_order="100" addon_id="XF">
<value>"styles/brivium/technetium/extra/technetium-logo.png"</value>
</property>
<property property_name="publicNav" group_name="headerNav" title="Navigation row" description="The navigation row sits below the header and contains the primary site navigation tabs and menus" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "@xf-paletteNeutral1",
"background-color": "@xf-paletteAccent1"
}</value>
</property>
<property property_name="publicNavPaddingV" group_name="headerNav" title="Navigation padding vertical" description="This value defines the amount of padding applied to the main navigational tabs in the header" property_type="value" value_type="unit" depends_on="" value_group="navPad" display_order="4000" addon_id="XF">
<value>"10px"</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>{
"background-color": "@xf-paletteAccent3"
}</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": "@xf-paletteNeutral1",
"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": "@xf-paletteNeutral1",
"background-color": "xf-intensify(@xf-paletteColor5, 12%)"
}</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-paletteNeutral1",
"background-color": "@xf-paletteAccent3"
}</value>
</property>
<property property_name="publicSubNavElHover" group_name="headerNav" title="Sub-navigation row - hovered element" description="Additional styling applied to sub-navigation tabs when the pointer hovers over them" property_type="css" value_type="" depends_on="" value_group="" display_order="20600" css_components="text,extra" addon_id="XF">
<value>{
"color": "rgb(255, 203, 0)"
}</value>
</property>
<property property_name="publicSubNavElMenuOpen" group_name="headerNav" title="Sub-navigation row - menu-open element" description="Styles sub-navigation elements whose popup menu is currently open" property_type="css" value_type="" depends_on="" value_group="" display_order="20650" css_components="text,background,extra" addon_id="XF">
<value>{
"color": "rgb(255, 203, 0)",
"text-decoration": "none"
}</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>"20px"</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>"245px"</value>
</property>
<property property_name="standaloneTab" group_name="tab" title="Standalone tabs" description="Tabs that are not part of block headers are styled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeNormal",
"color": "@xf-paletteNeutral3",
"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": "rgb(6, 161, 70)",
"border-color": "@xf-paletteAccent1"
}</value>
</property>
<property property_name="starFullColor" group_name="misc" title="Full rating star color" description="This is the color of the full portion of each rating star." property_type="value" value_type="color" depends_on="" value_group="" display_order="800" addon_id="XF">
<value>"rgb(242, 147, 13)"</value>
</property>
<property property_name="textColorAccentContent" group_name="color" title="Accented content text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3200" addon_id="XF">
<value>"@xf-paletteNeutral1"</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>"rgb(75, 66, 118)"</value>
</property>
<property property_name="textColorFeature" group_name="color" title="Feature text color" description="" property_type="value" value_type="color" depends_on="" value_group="textOther" display_order="3000" addon_id="XF">
<value>"rgb(45, 66, 92)"</value>
</property>
<property property_name="tooltip" group_name="tooltip" title="Tooltip" description="Certain elements have special floating tooltips, which are controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border_radius,padding,extra" addon_id="XF">
<value>{
"font-size": "@xf-fontSizeSmallest",
"color": "@xf-paletteNeutral1",
"background-color": "@xf-paletteAccent1",
"border-radius": "@xf-borderRadiusSmall",
"padding-top": "5px",
"padding-right": "5px",
"padding-bottom": "5px",
"padding-left": "5px"
}</value>
</property>
</properties>
</style>