· 5 years ago · Feb 29, 2020, 08:32 AM
1<?xml version="1.0" encoding="utf-8"?>
2<style title="Ortem" description="A minimal theme focused around a color-picker." user_selectable="1" export_version="2">
3 <templates>
4 <template title="PAGE_CONTAINER" type="public" addon_id="XF" version_id="2000670" version_string="2.0.6"><![CDATA[<!DOCTYPE html>
5<html id="XF" lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}"
6 data-app="public"
7 data-template="{$template}"
8 data-container-key="{$containerKey}"
9 data-content-key="{$contentKey}"
10 data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
11 data-cookie-prefix="{$xf.cookie.prefix}"
12 data-style-id="{$xf.style.style_id}"
13 data-style-type="{{ property('styleType') }}"
14 class="has-no-js{{ $template ? ' template-' . $template : '' }}"
15 {{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
16<head>
17 <meta charset="utf-8" />
18 <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
19 <meta name="viewport" content="width=device-width, initial-scale=1">
20
21 <xf:set var="$siteName" value="{$xf.options.boardTitle}" />
22 <xf:set var="$h1"><xf:h1 fallback="{$siteName}" /></xf:set>
23 <xf:set var="$description"><xf:description /></xf:set>
24
25 <title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title>
26
27 <xf:foreach loop="$head" value="$headTag">
28 {$headTag}
29 </xf:foreach>
30
31 <xf:if is="!$head.meta_site_name && $siteName is not empty">
32 <xf:macro template="metadata_macros" name="site_name" arg-siteName="{$siteName}" arg-output="{{ true }}" />
33 </xf:if>
34 <xf:if is="!$head.meta_type">
35 <xf:macro template="metadata_macros" name="type" arg-type="website" arg-output="{{ true }}" />
36 </xf:if>
37 <xf:if is="!$head.meta_title">
38 <xf:macro template="metadata_macros" name="title" arg-title="{{ page_title() ?: $siteName }}" arg-output="{{ true }}" />
39 </xf:if>
40 <xf:if is="!$head.meta_description && $description is not empty && $pageDescriptionMeta">
41 <xf:macro template="metadata_macros" name="description" arg-description="{$description}" arg-output="{{ true }}" />
42 </xf:if>
43 <xf:if is="!$head.meta_share_url">
44 <xf:macro template="metadata_macros" name="share_url" arg-shareUrl="{$xf.fullUri}" arg-output="{{ true }}" />
45 </xf:if>
46 <xf:if is="!$head.meta_image_url && property('publicMetadataLogoUrl')">
47 <xf:macro template="metadata_macros" name="image_url"
48 arg-imageUrl="{{ base_url(property('publicMetadataLogoUrl'), true) }}"
49 arg-output="{{ true }}" />
50 </xf:if>
51
52 <xf:if is="property('metaThemeColor')">
53 <meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
54 </xf:if>
55
56 <xf:if is="property('xenfocus_includeCSS')">{{ property('xenfocus_includeCSS') }}</xf:if>
57
58 <xf:macro template="helper_js_global" name="head" arg-app="public" />
59
60 <xf:if is="property('publicFaviconUrl')">
61 <link rel="icon" type="image/png" href="{{ base_url(property('publicFaviconUrl')) }}" sizes="32x32" />
62 </xf:if>
63 <xf:if is="property('publicMetadataLogoUrl')">
64 <link rel="apple-touch-icon" href="{{ base_url(property('publicMetadataLogoUrl'), true) }}" />
65 </xf:if>
66 <xf:include template="google_analytics" />
67
68 <xf:include template="xenfocus_onload_js" />
69
70
71
72 <xf:if is="property('ortem_color_picker')">
73 <style id="colorPickerVar"></style>
74 <script>
75 var colorPickerVar = document.getElementById('colorPickerVar');
76 var colorCookie = getCookie('xenfocusColorVariable-{$xf.style.style_id}');
77 if(colorCookie){
78 console.log("Cookie: " + colorCookie);
79 colorPickerVar.innerHTML = ':root { --ortem: ' + colorCookie + '; }'
80 }
81 </script>
82 </xf:if>
83
84
85
86</head>
87<body data-template="{$template}">
88
89<xf:set var="$userHtml">
90
91 <!-- User bar -->
92
93 <div class='focus-wrap-user'>
94 <div class="p-nav-opposite">
95 <div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
96 <xf:if is="$xf.visitor.user_id">
97 <xf:if is="$xf.visitor.user_state == 'rejected' OR $xf.visitor.user_state == 'disabled'">
98 <a href="{{ link('account') }}"
99 class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user">
100 <xf:avatar user="$xf.visitor" size="xxs" href="" />
101 <span class="p-navgroup-linkText">{$xf.visitor.username}</span>
102 </a>
103
104 <a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="p-navgroup-link">
105 <span class="p-navgroup-linkText">{{ phrase('log_out') }}</span>
106 </a>
107 <xf:else />
108 <a href="{{ link('account') }}"
109 class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--user"
110 data-xf-click="menu"
111 data-xf-key="{{ phrase('shortcut.visitor_menu') }}"
112 data-menu-pos-ref="< .p-navgroup"
113 aria-expanded="false"
114 aria-haspopup="true">
115 <xf:avatar user="$xf.visitor" size="xxs" href="" />
116 <span class="p-navgroup-linkText">{$xf.visitor.username}</span>
117 </a>
118 <div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
119 data-href="{{ link('account/visitor-menu') }}"
120 data-load-target=".js-visitorMenuBody">
121 <div class="menu-content js-visitorMenuBody">
122 <div class="menu-row">
123 {{ phrase('loading...') }}
124 </div>
125 </div>
126 </div>
127
128 <a href="{{ link('conversations') }}"
129 class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
130 data-badge="{$xf.visitor.conversations_unread|number}"
131 data-xf-click="menu"
132 data-xf-key="{{ phrase('shortcut.conversations_menu') }}"
133 data-menu-pos-ref="< .p-navgroup"
134 aria-expanded="false"
135 aria-haspopup="true">
136 <i aria-hidden="true"></i>
137 <span class="p-navgroup-linkText">{{ phrase('inbox') }}</span>
138 </a>
139 <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
140 data-href="{{ link('conversations/popup') }}"
141 data-nocache="true"
142 data-load-target=".js-convMenuBody">
143 <div class="menu-content">
144 <h3 class="menu-header">{{ phrase('conversations') }}</h3>
145 <div class="js-convMenuBody">
146 <div class="menu-row">{{ phrase('loading...') }}</div>
147 </div>
148 <div class="menu-footer menu-footer--split">
149 <span class="menu-footer-main">
150 <a href="{{ link('conversations') }}">{{ phrase('show_all...') }}</a>
151 </span>
152 <span class="menu-footer-opposite">
153 <a href="{{ link('conversations/add') }}">{{ phrase('start_new_conversation') }}</a>
154 </span>
155 </div>
156 </div>
157 </div>
158
159 <a href="{{ link('account/alerts') }}"
160 class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--alerts js-badge--alerts badgeContainer{{ $xf.visitor.alerts_unread ? ' badgeContainer--highlighted' : '' }}"
161 data-badge="{$xf.visitor.alerts_unread|number}"
162 data-xf-click="menu"
163 data-xf-key="{{ phrase('shortcut.alerts_menu') }}"
164 data-menu-pos-ref="< .p-navgroup"
165 aria-expanded="false"
166 aria-haspopup="true">
167 <i aria-hidden="true"></i>
168 <span class="p-navgroup-linkText">{{ phrase('alerts') }}</span>
169 </a>
170 <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
171 data-href="{{ link('account/alerts-popup') }}"
172 data-nocache="true"
173 data-load-target=".js-alertsMenuBody">
174 <div class="menu-content">
175 <h3 class="menu-header">{{ phrase('alerts') }}</h3>
176 <div class="js-alertsMenuBody">
177 <div class="menu-row">{{ phrase('loading...') }}</div>
178 </div>
179 <div class="menu-footer menu-footer--split">
180 <span class="menu-footer-main">
181 <a href="{{ link('account/alerts') }}">{{ phrase('show_all...') }}</a>
182 </span>
183 <span class="menu-footer-opposite">
184 <a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a>
185 </span>
186 </div>
187 </div>
188 </div>
189 </xf:if>
190 <xf:else />
191 <a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn" rel="nofollow" data-xf-click="overlay" data-follow-redirects="on">
192 <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
193 </a>
194 <xf:if is="$xf.options.registrationSetup.enabled">
195 <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register" rel="nofollow" data-xf-click="overlay" data-follow-redirects="on">
196 <span class="p-navgroup-linkText">{{ phrase('register') }}</span>
197 </a>
198 </xf:if>
199 </xf:if>
200 <xf:if is="property('xenfocus_themeEditor') AND property('xenfocus_editorIcon_user')">
201 <a href="#" class="p-navgroup-link" rel="nofollow" data-xf-init="tooltip" title="Customize" data-xenfocus-editor>
202 <span class="p-navgroup-linkText"></span>
203 </a>
204 </xf:if>
205
206 </div>
207
208 <div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">
209 <a href="{{ link('whats-new') }}"
210 class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
211 title="{{ phrase('whats_new')|for_attr }}">
212 <i aria-hidden="true"></i>
213 <span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
214 </a>
215
216 <xf:if is="$xf.visitor.canSearch()">
217 <a href="{{ link('search') }}"
218 class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--search"
219 data-xf-click="menu"
220 data-xf-key="{{ phrase('shortcut.search_menu') }}"
221 aria-label="{{ phrase('search') }}"
222 aria-expanded="false"
223 aria-haspopup="true"
224 title="{{ phrase('search')|for_attr }}">
225 <i aria-hidden="true"></i>
226 <span class="p-navgroup-linkText">{{ phrase('search') }}</span>
227 </a>
228 <div class="menu menu--structural menu--wide" data-menu="menu" aria-hidden="true">
229 <form action="{{ link('search/search') }}" method="post"
230 class="menu-content"
231 data-xf-init="quick-search">
232
233 <h3 class="menu-header">{{ phrase('search') }}</h3>
234 <!--[XF:search_menu:above_input]-->
235 <div class="menu-row">
236 <xf:if is="$searchConstraints">
237 <div class="inputGroup inputGroup--joined">
238 <xf:textbox name="keywords"
239 placeholder="{{ phrase('search...') }}"
240 aria-label="{{ phrase('search') }}"
241 data-menu-autofocus="true" />
242 <xf:select name="constraints"
243 class="js-quickSearch-constraint"
244 aria-label="{{ phrase('search_within') }}">
245
246 <xf:option value="">{{ phrase('everywhere') }}</xf:option>
247 <xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
248 <xf:option value="{$constraint|json}">{$constraintName}</xf:option>
249 </xf:foreach>
250 </xf:select>
251 </div>
252 <xf:else />
253 <xf:textbox name="keywords"
254 placeholder="{{ phrase('search...') }}"
255 aria-label="{{ phrase('search') }}"
256 data-menu-autofocus="true" />
257 </xf:if>
258 </div>
259
260 <!--[XF:search_menu:above_title_only]-->
261 <div class="menu-row">
262 <xf:checkbox standalone="true"><xf:option name="c[title_only]" label="{{ phrase('search_titles_only') }}" /></xf:checkbox>
263 </div>
264 <!--[XF:search_menu:above_member]-->
265 <div class="menu-row">
266 <div class="inputGroup">
267 <span class="inputGroup-text" id="ctrl_search_menu_by_member">{{ phrase('by:') }}</span>
268 <input class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member') }}" aria-labelledby="ctrl_search_menu_by_member" />
269 </div>
270 </div>
271 <div class="menu-footer">
272 <span class="menu-footer-controls">
273 <xf:button type="submit" class="button--primary" icon="search" />
274 <xf:button href="{{ link('search') }}" rel="nofollow">{{ phrase('filters') }}</xf:button>
275 </span>
276 </div>
277
278 <xf:csrf />
279 </form>
280 </div>
281 </xf:if>
282 </div>
283 </div>
284 </div>
285
286</xf:set>
287
288
289
290
291<xf:set var="$xenSearch">
292 <div class='focus-wrap-search'>
293
294 <xf:if is="$xf.visitor.canSearch()">
295 <form action="{{ link('search/search') }}" method="post">
296
297 <!-- Search -->
298 <div class='focus-search'>
299
300 <div class='focus-search-flex'>
301 <input name="keywords" placeholder="{{ phrase('search...') }}" aria-label="{{ phrase('search') }}" data-menu-autofocus="true" type="text" />
302 <div class='focus-search-prefix'><i class="fa fa-search" aria-hidden="true"></i></div>
303 </div>
304
305 </div>
306
307 <xf:if is="property('xenfocus_searchMenu')">
308 <div class="focus-search-menu">
309
310 <!--[XF:search_menu:above_input]-->
311 <xf:if is="$searchConstraints">
312 <div class="menu-row">
313 <xf:select name="constraints"
314 class="js-quickSearch-constraint"
315 aria-label="{{ phrase('search_within') }}">
316
317 <xf:option value="">{{ phrase('everywhere') }}</xf:option>
318 <xf:foreach loop="$searchConstraints" key="$constraintName" value="$constraint">
319 <xf:option value="{$constraint|json}">{$constraintName}</xf:option>
320 </xf:foreach>
321 </xf:select>
322 </div>
323 </xf:if>
324
325 <!--[XF:search_menu:above_title_only]-->
326 <div class="menu-row">
327 <xf:checkbox standalone="true"><xf:option name="c[title_only]" label="{{ phrase('search_titles_only') }}" /></xf:checkbox>
328 </div>
329 <!--[XF:search_menu:above_member]-->
330 <div class="menu-row">
331 <div class="inputGroup">
332 <span class="inputGroup-text">{{ phrase('by:') }}</span>
333 <input class="input" name="c[users]" data-xf-init="auto-complete" placeholder="{{ phrase('member') }}" aria-labelledby="ctrl_search_menu_by_member" />
334 </div>
335 </div>
336 <div class="menu-footer">
337 <span class="menu-footer-controls">
338 <xf:button href="{{ link('search') }}" rel="nofollow">{{ phrase('advanced_search...') }}</xf:button>
339 <xf:button type="submit" class="button--primary" icon="search" />
340 </span>
341 </div>
342
343 </div>
344 </xf:if>
345
346 <xf:csrf />
347
348 </form>
349 </xf:if>
350
351 </div>
352</xf:set>
353
354
355
356
357
358<xf:set var="$navLinks">
359
360 <!-- Navigation wrap -->
361 <nav class='focus-wrap-nav'>
362 <div class="p-nav-scroller hScroller" data-xf-init="h-scroller" data-auto-scroll=".p-navEl.is-selected">
363 <div class="hScroller-scroll">
364 <ul class="p-nav-list js-offCanvasNavSource">
365 <xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
366 <li>
367 <xf:macro name="nav_entry"
368 arg-navId="{$navSection}"
369 arg-nav="{$navEntry}"
370 arg-selected="{{ $navSection == $pageSection }}"
371 arg-shortcut="{$i}" />
372 </li>
373 </xf:foreach>
374 </ul>
375 </div>
376 </div>
377 </nav>
378
379</xf:set>
380
381
382
383
384
385<xf:set var="$nextToLogo">
386
387 <div class='focus-ad'><xf:ad position="container_header" /></div>
388
389 {$userHtml|raw}
390
391</xf:set>
392
393
394
395
396
397<xf:set var="$navHtml">
398
399 <!-- Secondary header -->
400
401 <div class="p-nav">
402 <div class="p-nav-inner">
403
404 <div class='focus-mobile-navigation'>
405 <a class="p-nav-menuTrigger" data-xf-click="off-canvas" data-menu=".js-headerOffCanvasMenu" role="button" tabindex="0">
406 <i aria-hidden="true"></i>
407 <span class="p-nav-menuText">{{ phrase('menu') }}</span>
408 </a>
409 <div class='focus-mobile-logo'>
410 <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
411 <xf:if is="property('publicLogoUrl')">
412 <img src="{{ base_url(property('publicLogoUrl')) }}" alt="{$xf.options.boardTitle}" {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
413 <xf:else />
414 <xf:if is="property('xenfocus_logoText')">{{property('xenfocus_logoText')}}<xf:else />{$xf.options.boardTitle}</xf:if>
415 </xf:if>
416 </a>
417 </div>
418 </div>
419
420 {$userHtml|raw}
421 {$navLinks|raw}
422 {$xenSearch|raw}
423
424 </div>
425 </div>
426
427</xf:set>
428
429
430
431
432<xf:set var="$subNavHtml">
433 <!-- Sub navigation -->
434 <xf:if is="$selectedNavChildren is not empty">
435 <div class="p-sectionLinks">
436 <div class="p-sectionLinks-inner hScroller" data-xf-init="h-scroller">
437 <div class="hScroller-scroll">
438 <ul class="p-sectionLinks-list">
439 <xf:foreach loop="$selectedNavChildren" key="$navId" value="$navEntry" i="$i">
440 <li>
441 <xf:macro name="nav_entry" arg-navId="{$navId}" arg-nav="{$navEntry}" arg-shortcut="alt+{$i}" />
442 </li>
443 </xf:foreach>
444 </ul>
445 </div>
446 </div>
447 </div>
448 <xf:elseif is="{$selectedNavEntry}" />
449 <div class="p-sectionLinks p-sectionLinks--empty"></div>
450 </xf:if>
451</xf:set>
452
453
454
455
456
457
458
459
460
461
462
463
464<div class="p-pageWrapper" id="top">
465
466
467<!-- Logo bar: start -->
468<header class="p-header" id="header">
469 <div class="p-header-inner">
470 <div class="p-header-content">
471
472 <div class="p-header-logo p-header-logo--image">
473 <a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
474
475 <xf:include template="xenfocus_mini_logo" />
476
477 <span>
478 <xf:if is="property('publicLogoUrl')">
479 <img src="{{ base_url(property('publicLogoUrl')) }}" alt="{$xf.options.boardTitle}" {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
480 <xf:else />
481 <span class='focus-logo'><xf:if is="property('xenfocus_logoText')">{{property('xenfocus_logoText')}}<xf:else />{$xf.options.boardTitle}</xf:if></span>
482 <xf:if is="property('xenfocus_logoSlogan')"><span class='focus-logo-slogan'>{{property('xenfocus_logoSlogan')}}</span></xf:if>
483 </xf:if>
484 </span>
485 </a>
486 </div>
487
488 {$nextToLogo|raw}
489
490 </div>
491 </div>
492</header>
493<!-- Logo bar: end -->
494
495<div class='focus-content'>
496
497
498<!-- Secondary header: start -->
499<xf:if is="property('publicNavSticky') == 'primary'">
500 <div class="p-navSticky p-navSticky--primary" data-xf-init="sticky-header">
501 {$navHtml|raw}
502 </div>
503 {$subNavHtml|raw}
504<xf:elseif is="property('publicNavSticky') == 'all'" />
505 <div class="p-navSticky p-navSticky--all" data-xf-init="sticky-header">
506 {$navHtml|raw}
507 {$subNavHtml|raw}
508 </div>
509<xf:else />
510 {$navHtml|raw}
511 {$subNavHtml|raw}
512</xf:if>
513<!-- Secondary header: end -->
514
515
516<div class="p-body">
517 <div class="p-body-inner">
518 <!--XF:EXTRA_OUTPUT-->
519
520 <!-- Staff bar: start -->
521 <xf:if contentcheck="true">
522 <div class="p-staffBar">
523 <div class="p-staffBar-inner hScroller" data-xf-init="h-scroller">
524 <div class="hScroller-scroll">
525 <xf:contentcheck>
526 <xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
527 <a href="{{ link('approval-queue') }}" class="p-staffBar-link badgeContainer badgeContainer--highlighted" data-badge="{$xf.session.unapprovedCounts.total|number}">
528 {{ phrase('approval_queue') }}
529 </a>
530 </xf:if>
531
532 <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
533 <a href="{{ link('reports') }}"
534 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' : '' }}"
535 data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}"
536 title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:') . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">
537 {{ phrase('reports') }}
538 </a>
539 </xf:if>
540
541 <xf:if contentcheck="true">
542 <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>
543 <div class="menu" data-menu="menu" aria-hidden="true">
544 <div class="menu-content">
545 <h4 class="menu-header">{{ phrase('moderator_tools') }}</h4>
546 <xf:contentcheck>
547 <!--[XF:mod_tools_menu:top]-->
548 <xf:if is="$xf.visitor.is_moderator">
549 <a href="{{ link('approval-queue') }}" class="menu-linkRow">{{ phrase('approval_queue') }}</a>
550 </xf:if>
551 <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
552 <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>
553 </xf:if>
554 <!--[XF:mod_tools_menu:bottom]-->
555 </xf:contentcheck>
556 </div>
557 </div>
558 </xf:if>
559
560 <xf:if is="$xf.visitor.is_admin">
561 <a href="{{ base_url('admin.php') }}" class="p-staffBar-link" target="_blank">{{ phrase('admin') }}</a>
562 </xf:if>
563 </xf:contentcheck>
564 </div>
565 </div>
566 </div>
567 </xf:if>
568
569 <xf:include template="xenfocus_guest" />
570
571 <xf:if is="$notices.block">
572 <xf:macro template="notice_macros" name="notice_list" arg-type="block" arg-notices="{$notices.block}" />
573 </xf:if>
574
575 <xf:if is="$notices.scrolling">
576 <xf:macro template="notice_macros" name="notice_list" arg-type="scrolling" arg-notices="{$notices.scrolling}" />
577 </xf:if>
578
579 <xf:ad position="container_breadcrumb_top_above" />
580
581 <div class='focus-breadcrumb'>
582 <xf:macro name="breadcrumbs"
583 arg-breadcrumbs="{$breadcrumbs}"
584 arg-navTree="{$navTree}"
585 arg-selectedNavEntry="{$selectedNavEntry}" />
586 <xf:if is="property('xenfocus_socialEnable')"><xf:include template="xenfocus_social" /></xf:if>
587 </div>
588
589 <xf:include template="xenfocus_countdown" />
590
591 <xf:ad position="container_breadcrumb_top_below" />
592
593 <xf:macro template="browser_warning_macros" name="javascript" />
594 <xf:macro template="browser_warning_macros" name="browser" />
595
596 <xf:if is="$headerHtml is not empty">
597 <div class="p-body-header">
598 {$headerHtml|raw}
599 </div>
600 <xf:elseif contentcheck="true" />
601 <div class="p-body-header">
602 <xf:contentcheck>
603 <xf:if contentcheck="true">
604 <div class="p-title {{ $noH1 ? 'p-title--noH1' : '' }}">
605 <xf:contentcheck>
606 <xf:if is="!$noH1">
607 <h1 class="p-title-value">{$h1}</h1>
608 </xf:if>
609 <xf:if contentcheck="true">
610 <div class="p-title-pageAction"><xf:contentcheck><xf:pageaction /></xf:contentcheck></div>
611 </xf:if>
612 </xf:contentcheck>
613 </div>
614 </xf:if>
615
616 <xf:if is="$description is not empty">
617 <div class="p-description">{$description}</div>
618 </xf:if>
619 </xf:contentcheck>
620 </div>
621 </xf:if>
622
623 <div class="p-body-main {{ $sidebar ? 'p-body-main--withSidebar' : '' }} {{ $sideNav ? 'p-body-main--withSideNav' : '' }}">
624 <xf:if is="$sideNav">
625 <div class="p-body-sideNav">
626 <div class="p-body-sideNavTrigger">
627 <xf:button class="button--link" data-xf-click="off-canvas" data-menu="#js-SideNavOcm">
628 {{ $sideNavTitle ?: phrase('navigation') }}
629 </xf:button>
630 </div>
631 <div class="p-body-sideNavInner" data-ocm-class="offCanvasMenu offCanvasMenu--blocks" id="js-SideNavOcm" data-ocm-builder="sideNav">
632 <div data-ocm-class="offCanvasMenu-backdrop" data-menu-close="true"></div>
633 <div data-ocm-class="offCanvasMenu-content">
634 <div class="p-body-sideNavContent">
635 <xf:ad position="container_sidenav_above" />
636 <xf:foreach loop="$sideNav" value="$sideNavHtml">
637 {$sideNavHtml}
638 </xf:foreach>
639 <xf:ad position="container_sidenav_below" />
640 </div>
641 </div>
642 </div>
643 </div>
644 </xf:if>
645
646 <div class="p-body-content">
647 <xf:ad position="container_content_above" />
648 <div class="p-body-pageContent">{$content|raw}</div>
649 <xf:ad position="container_content_below" />
650 </div>
651
652 <xf:if is="$sidebar">
653 <div class="p-body-sidebar">
654 <xf:ad position="container_sidebar_above" />
655 <xf:foreach loop="$sidebar" value="$sidebarHtml">
656 {$sidebarHtml}
657 </xf:foreach>
658 <xf:ad position="container_sidebar_below" />
659 </div>
660 </xf:if>
661 </div>
662
663 <xf:ad position="container_breadcrumb_bottom_above" />
664 <xf:macro name="breadcrumbs"
665 arg-breadcrumbs="{$breadcrumbs}"
666 arg-navTree="{$navTree}"
667 arg-selectedNavEntry="{$selectedNavEntry}"
668 arg-variant="bottom" />
669 <xf:ad position="container_breadcrumb_bottom_below" />
670
671 </div>
672</div>
673
674
675</div> <!-- End: focus-content -->
676
677
678
679<!-- Mobile off-canvas navigation: start -->
680<div class="offCanvasMenu offCanvasMenu--nav js-headerOffCanvasMenu" data-menu="menu" aria-hidden="true" data-ocm-builder="navigation">
681 <div class="offCanvasMenu-backdrop" data-menu-close="true"></div>
682 <div class="offCanvasMenu-content">
683 <div class="offCanvasMenu-header">
684 {{ phrase('menu') }}
685 <a class="offCanvasMenu-closer" data-menu-close="true" role="button" tabindex="0" aria-label="{{ phrase('close') }}"></a>
686 </div>
687 <xf:if is="$xf.visitor.user_id">
688 <div class="p-offCanvasAccountLink">
689 <div class="offCanvasMenu-linkHolder">
690 <a href="{{ link('account') }}" class="offCanvasMenu-link">
691 <xf:avatar user="$xf.visitor" size="xxs" href="" />
692 {$xf.visitor.username}
693 </a>
694 </div>
695 <hr class="offCanvasMenu-separator" />
696 </div>
697 <xf:else />
698 <div class="p-offCanvasRegisterLink">
699 <div class="offCanvasMenu-linkHolder">
700 <a href="{{ link('login') }}" class="offCanvasMenu-link" rel="nofollow" data-xf-click="overlay" data-menu-close="true">
701 {{ phrase('log_in') }}
702 </a>
703 </div>
704 <hr class="offCanvasMenu-separator" />
705 <xf:if is="$xf.options.registrationSetup.enabled">
706 <div class="offCanvasMenu-linkHolder">
707 <a href="{{ link('register') }}" class="offCanvasMenu-link" rel="nofollow" data-xf-click="overlay" data-menu-close="true">
708 {{ phrase('register') }}
709 </a>
710 </div>
711 <hr class="offCanvasMenu-separator" />
712 </xf:if>
713 </div>
714 </xf:if>
715 <div class="js-offCanvasNavTarget"></div>
716 </div>
717</div>
718<!-- Mobile off-canvas navigation: end -->
719
720<footer class="p-footer" id="footer">
721
722 <xf:include template="xenfocus_footer" />
723
724 <xf:if is="property('xenfocus_footerEnable')"><div class='footer-bottom-wrap'></xf:if>
725 <div class="p-footer-inner">
726
727 <div class="p-footer-row">
728 <xf:if contentcheck="true">
729 <div class="p-footer-row-main">
730 <ul class="p-footer-linkList">
731 <xf:contentcheck>
732 <xf:if is="$xf.visitor.canChangeStyle()">
733 <li><a href="{{ link('misc/style') }}" data-xf-click="overlay"
734 data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow">
735 <i class="fa fa-paint-brush" aria-hidden="true"></i> {$xf.style.title}
736 </a></li>
737 </xf:if>
738 <xf:if is="property('xenfocus_themeEditor') AND property('xenfocus_editorIcon_footer')">
739 <li><a href="#" rel="nofollow" data-xf-init="tooltip" title="Customize" data-xenfocus-editor></a></li>
740 </xf:if>
741 <xf:if is="$xf.visitor.canChangeLanguage()">
742 <li><a href="{{ link('misc/language') }}" data-xf-click="overlay"
743 data-xf-init="tooltip" title="{{ phrase('language_chooser')|for_attr }}" rel="nofollow">
744 <i class="fa fa-globe" aria-hidden="true"></i> {$xf.language.title}</a></li>
745 </xf:if>
746 </xf:contentcheck>
747 </ul>
748 </div>
749 </xf:if>
750 <div class="p-footer-row-opposite">
751 <ul class="p-footer-linkList">
752 <xf:if is="$xf.visitor.canUseContactForm()">
753 <xf:if is="$xf.contactUrl">
754 <li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li>
755 </xf:if>
756 </xf:if>
757
758 <xf:if is="$xf.tosUrl">
759 <li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li>
760 </xf:if>
761
762 <xf:if is="$xf.privacyPolicyUrl">
763 <li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li>
764 </xf:if>
765
766 <xf:if is="$xf.helpPageCount">
767 <li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li>
768 </xf:if>
769
770 <xf:if is="$xf.homePageUrl">
771 <li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li>
772 </xf:if>
773
774 <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>
775 </ul>
776 </div>
777 </div>
778
779 <div class='flex flex-jB flex-wrap flex-column-m'>
780 <div>
781
782 <xf:if contentcheck="true">
783 <div class="p-footer-copyright">
784 <xf:contentcheck>
785 <xf:copyright />
786 {{ phrase('extra_copyright') }}
787 </xf:contentcheck>
788
789 <xf:include template="xenfocus_branding" />
790
791 </div>
792 </xf:if>
793
794 </div>
795 <div>
796
797 <xf:if is="property('xenfocus_socialFooter')"><xf:include template="xenfocus_social" /></xf:if>
798
799 </div>
800 </div>
801
802 <xf:if contentcheck="true">
803 <div class="p-footer-debug">
804 <xf:contentcheck>
805 <xf:macro template="debug_macros" name="debug"
806 arg-controller="{$controller}"
807 arg-action="{$actionMethod}"
808 arg-template="{$template}" />
809 </xf:contentcheck>
810 </div>
811 </xf:if>
812 </div>
813 <xf:if is="property('xenfocus_footerEnable')"></div></xf:if>
814</footer>
815
816</div> <!-- closing p-pageWrapper -->
817
818<xf:include template="xenfocus_editor" />
819
820<div class="u-bottomFixer js-bottomFixTarget">
821 <xf:if is="$notices.floating">
822 <xf:macro template="notice_macros" name="notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
823 </xf:if>
824 <xf:if is="$notices.bottom_fixer">
825 <xf:macro template="notice_macros" name="notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
826 </xf:if>
827</div>
828
829<xf:if is="property('scrollJumpButtons')">
830 <div class="u-scrollButtons js-scrollButtons" data-trigger-type="{{ property('scrollJumpButtons') }}">
831 <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>
832 <xf:if is="property('scrollJumpButtons') != 'up'">
833 <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>
834 </xf:if>
835 </div>
836</xf:if>
837
838<xf:macro template="helper_js_global" name="body" arg-app="public" arg-jsState="{$jsState}" />
839
840<xf:js src="{{ base_url('styles/xenfocus/js/xenfocus.js') }}" />
841<xf:include template="xenfocus_countdown_js" />
842<xf:include template="xenfocus_event_overlay" />
843<xf:include template="xenfocus_extra_js" />
844
845{$ldJsonHtml|raw}
846
847</body>
848</html>
849
850<xf:macro name="nav_entry" arg-navId="!" arg-nav="!" arg-selected="{{ false }}" arg-shortcut="">
851 <div class="p-navEl {{ $selected ? 'is-selected' : '' }}" {{ $nav.children ? 'data-has-children="true"' : '' }}>
852 <xf:if is="$nav.href">
853
854 <xf:macro name="nav_link"
855 arg-navId="{$navId}"
856 arg-nav="{$nav}"
857 arg-class="p-navEl-link {{ $nav.children ? 'p-navEl-link--splitMenu' : '' }}"
858 arg-shortcut="{{ $nav.children ? false : $shortcut }}" />
859
860 <xf:if is="$nav.children"><a data-xf-key="{$shortcut}"
861 data-xf-click="menu"
862 data-menu-pos-ref="< .p-navEl"
863 data-arrow-pos-ref="< .p-navEl"
864 class="p-navEl-splitTrigger"
865 role="button"
866 tabindex="0"
867 aria-label="{{ phrase('toggle_expanded') }}"
868 aria-expanded="false"
869 aria-haspopup="true"></a></xf:if>
870
871 <xf:elseif is="$nav.children" /><a data-xf-key="{$shortcut}"
872 data-xf-click="menu"
873 data-menu-pos-ref="< .p-navEl"
874 data-arrow-pos-ref="< .p-navEl"
875 class="p-navEl-linkHolder"
876 role="button"
877 tabindex="0"
878 aria-expanded="false"
879 aria-haspopup="true">
880 <xf:macro name="nav_link"
881 arg-navId="{$navId}"
882 arg-nav="{$nav}"
883 arg-class="p-navEl-link p-navEl-link--menuTrigger" />
884 </a>
885
886 <xf:else />
887
888 <xf:macro name="nav_link"
889 arg-navId="{$navId}"
890 arg-nav="{$nav}"
891 arg-class="p-navEl-link"
892 arg-shortcut="{$shortcut}" />
893
894 </xf:if>
895 <xf:if is="$nav.children">
896 <div class="menu menu--structural" data-menu="menu" aria-hidden="true">
897 <div class="menu-content">
898 <!--<h4 class="menu-header">{$nav.title}</h4>-->
899 <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
900 <xf:macro name="nav_menu_entry"
901 arg-navId="{$childNavId}"
902 arg-nav="{$child}" />
903 </xf:foreach>
904 </div>
905 </div>
906 </xf:if>
907 </div>
908</xf:macro>
909
910<xf:macro name="nav_link" arg-navId="!" arg-nav="!" arg-class="" arg-titleHtml="" arg-shortcut="{{ false }}">
911 <xf:set var="$tag" value="{{ $nav.href ? 'a' : 'span' }}" />
912 <{$tag} {{ $nav.href ? 'href="' . $nav.href . '"' : '' }}
913 class="{{ trim($class) }} {$nav.attributes.class}"
914 {{ attributes($nav.attributes, ['class']) }}
915 {{ $shortcut !== false ? 'data-xf-key="' . $shortcut . '"' : '' }}
916 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}>
917</xf:macro>
918
919<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
920 <xf:macro name="nav_link"
921 arg-navId="{$navId}"
922 arg-nav="{$nav}"
923 arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy" />
924 <xf:if is="$nav.children">
925 <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
926 <xf:macro name="nav_menu_entry"
927 arg-navId="{$childNavId}"
928 arg-nav="{$child}"
929 arg-depth="{{ $depth + 1 }}" />
930 </xf:foreach>
931 <xf:if is="$depth == 0">
932 <hr class="menu-separator" />
933 </xf:if>
934 </xf:if>
935</xf:macro>
936
937<xf:macro name="breadcrumbs" arg-breadcrumbs="!" arg-navTree="!" arg-selectedNavEntry="{{ null }}" arg-variant="">
938
939 <xf:set var="$rootBreadcrumb" value="{$navTree.{$xf.options.rootBreadcrumb}}" />
940
941 <xf:if contentcheck="true">
942 <ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}"
943 itemscope itemtype="https://schema.org/BreadcrumbList">
944 <xf:contentcheck>
945
946 <xf:if is="$rootBreadcrumb AND $rootBreadcrumb.href != $xf.uri">
947 <xf:macro name="crumb"
948 arg-href="{$rootBreadcrumb.href}"
949 arg-value="{$rootBreadcrumb.title}" />
950 </xf:if>
951
952 <xf:if is="$selectedNavEntry && $selectedNavEntry.href && $selectedNavEntry.href != $xf.uri && $selectedNavEntry.href != $rootBreadcrumb.href">
953 <xf:macro name="crumb"
954 arg-href="{$selectedNavEntry.href}"
955 arg-value="{$selectedNavEntry.title}" />
956 </xf:if>
957 <xf:foreach loop="$breadcrumbs" value="$breadcrumb" if="$breadcrumb.href != $xf.uri">
958 <xf:macro name="crumb"
959 arg-href="{$breadcrumb.href}"
960 arg-value="{$breadcrumb.value}" />
961 </xf:foreach>
962
963 </xf:contentcheck>
964 </ul>
965 <xf:else />
966 <ul class="p-breadcrumbs {{ $variant ? 'p-breadcrumbs--' . $variant : '' }}" itemscope itemtype="https://schema.org/BreadcrumbList">
967 <xf:macro name="crumb"
968 arg-href="{$rootBreadcrumb.href}"
969 arg-value="{$rootBreadcrumb.title}" />
970 </ul>
971 </xf:if>
972</xf:macro>
973
974<xf:macro name="crumb" arg-href="!" arg-value="!">
975 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
976 <a href="{$href}" itemprop="item">
977 <span itemprop="name">{$value}</span>
978 </a>
979 </li>
980</xf:macro>]]></template>
981 <template title="extra.less" type="public" addon_id="XF" version_id="2000036" version_string="2.0.0 Beta 6"><![CDATA[{{ include('xenfocus_base.less') }}
982{{ include('xenfocus_theme.less') }}]]></template>
983 <template title="xenfocus_base.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[/*
984 ----------------
985
986 xenfocus styles
987
988 ----------------
989*/
990
991
992/*
993
994 Global
995 Flexbox
996 Header
997 Logo
998 Navigation
999 User links
1000 Search bar
1001 xenfocus Editor
1002 Breadcrumbs
1003 Social icons
1004 Background picker
1005 Content wrapper
1006 Nodes
1007 Node icons
1008 Node NEW badge
1009 Guest message
1010 Footer
1011 Mega footer
1012 Grid layout for nodes
1013 Blocks
1014 Topic List
1015 Topic View
1016 Profiles
1017 Sidebar
1018 Sticky Sidebar
1019 Animated snow
1020 Holidays
1021 Other
1022 Bug fixes
1023
1024*/
1025
1026// Translate
1027[data-focus-text]:after{ content: attr(data-focus-text); }
1028
1029
1030.node--unread .node-title:before{
1031 content: 'NEW'
1032}
1033
1034.focus-editor-wrap{
1035 content: "Theme Editor"
1036}
1037
1038.focus-guest .focus-guest-header:before{
1039 content: 'Welcome to '
1040}
1041
1042.structItemContainer-group--sticky:before{
1043 content: 'Sticky threads'
1044}
1045.structItemContainer-group--sticky:after{
1046 content: 'Regular threads'
1047}
1048
1049html[lang="de-DE"]{
1050
1051 .node--unread .node-title:before{
1052 content: 'NEU'
1053 }
1054
1055 .focus-editor-wrap{
1056 content: "Themeneditor"
1057 }
1058
1059 .focus-guest .focus-guest-header:before{
1060 content: 'Willkommen zu '
1061 }
1062
1063 .structItemContainer-group--sticky:before{
1064 content: 'Wichtige Threads'
1065 }
1066 .structItemContainer-group--sticky:after{
1067 content: 'Normale Threads'
1068 }
1069
1070 [data-focus-text='Background Picker']:after{
1071 content: 'Hintergrundauswahl'
1072 }
1073
1074 [data-focus-text='Customize layout']:after{
1075 content: 'Layout anpassen'
1076 }
1077
1078 [data-focus-text='Save']:after{
1079 content: 'Speichern'
1080 }
1081
1082 [data-focus-text='Choose color']:after{
1083 content: 'Wahle eine Farbe'
1084 }
1085
1086 [data-toggle-class='focus-fluid'] .focus-editor-text{
1087 &:before{ content: 'Flexible Breite?' }
1088 &:after{ content: 'Wenn Sie dies aktivieren, wird die Breite der Website vergrößert, sodass sie die Breite Ihres Browsers einnimmt. Nützlich für größere Bildschirme.' }
1089 }
1090
1091 [data-toggle-class='focus-grid'] .focus-editor-text{
1092 &:before{ content: 'Gitterstruktur?' }
1093 &:after{ content: 'Wenn diese Option aktiviert ist, werden die Foren als Gitter anstelle einer Tabelle angezeigt.' }
1094 }
1095
1096 [data-toggle-class='focus-sidebar-sticky'] .focus-editor-text{
1097 &:before{ content: 'Klebrige Seitenleiste?' }
1098 &:after{ content: 'Wenn diese Option aktiviert ist, möchte die Seitenleiste für einen einfachen Zugriff oben auf dem Bildschirm bleiben.' }
1099 }
1100
1101 [data-toggle-class='focus-sidebar-flip'] .focus-editor-text{
1102 &:before{ content: 'Seitenleiste umdrehen?' }
1103 &:after{ content: 'Flip die Seitenleiste zwischen den linken und rechten Seiten.' }
1104 }
1105
1106}
1107
1108
1109// Body
1110@focus-wallpaper: true;
1111@body-padding-top: 10px;
1112@body-padding-bottom: 10px;
1113@focus-fluid-width: 96;
1114
1115
1116
1117// Blocks
1118// Move the block wrap from the container to the body
1119@block-container-shift: false;
1120@block-container: ~'.block-container, .block--messages .message';
1121@block-header: ~'.block-header';
1122@block-body: ~'.block-body';
1123@block-minor-header: ~'#XF .block-minorHeader';
1124// When a wallpaper design is used, these blocks will be wrapped with the normal block styles
1125@focus-wallpaper-elements: ~'.p-body-header';
1126@sticky-top: @xf-xenfocus_navHeight;
1127
1128
1129
1130// Header
1131<xf:if is="property('publicHeader--background-color')">
1132 @header-padding: 20px;
1133<xf:else />
1134 @header-padding: 0px;
1135</xf:if>
1136@center-mobile-logo: true;
1137
1138
1139
1140// Logo
1141@logo-slogan-opacity: 0.75;
1142@logo-slogan-size: 0.5em;
1143@logo-slogan-margin: 0.9em;
1144@focus-mobile-logo-color: contrast(@xf-publicNav--background-color, xf-intensify(@xf-publicNav--color, 30%), xf-diminish(@xf-publicNav--color, 20%));
1145
1146
1147
1148// Navigation
1149@nav-icon-size: 14px;
1150
1151// Dropdown menus
1152@focus-dropdown-nav: true;
1153
1154// Navigation scrollers
1155@navigation-arrow-size: 20px;
1156@navigation-arrow-color: @xf-publicNavTab--color;
1157@navigation-arrow-gradient: @xf-publicNav--background-color;
1158
1159
1160
1161// User links
1162<xf:if is="property('xenfocus_userStyles--background-color')">
1163 @user-hover: fade(darken(@xf-xenfocus_userStyles--background-color, 30%), 15%);
1164<xf:elseif is="property('xenfocus_userStyles--color')" />
1165 @user-hover: fade(@xf-xenfocus_userStyles--color, 10%);
1166<xf:else />
1167 @user-hover: rgba(255,255,255,0.1);
1168</xf:if>
1169
1170<xf:if is="property('xenfocus_userStyles--border-color')">
1171 @user-border-color: @xf-xenfocus_userStyles--border-color;
1172<xf:elseif is="property('xenfocus_userStyles--color')" />
1173 @user-border-color: fade(@xf-xenfocus_userStyles--color, 15%);
1174<xf:else />
1175 @user-border-color: transparent;
1176</xf:if>
1177
1178@user-border-width: <xf:if is="property('xenfocus_userStyles--border-width')">@xf-xenfocus_userStyles--border-width<xf:else />0px</xf:if>;
1179@user-border-radius: <xf:if is="property('xenfocus_userStyles--border-radius')">@xf-xenfocus_userStyles--border-radius<xf:else />0px</xf:if>;
1180
1181@user-links-sep: 1px;
1182@user-links-color-mobile: @xf-publicNav--color;
1183@remove-userlink-text: false;
1184@register-offset: 0px;
1185
1186
1187
1188// Search
1189@focus-hide-search-link: true;
1190@search-width: xf-default(@xf-xenfocus_searchWidth, 240)*1px;
1191@search-height: xf-default(@xf-xenfocus_searchHeight, 34)*1px;
1192@search-background-color: xf-default(@xf-xenfocus_searchStyles--background-color, transparent);
1193@search-background-image: xf-default(@xf-xenfocus_searchStyles--background-image, none);
1194@search-color: xf-default(@xf-xenfocus_searchStyles--color, inherit);
1195@search-border: xf-default(@xf-xenfocus_searchStyles--border-width, 0px) solid xf-default(@xf-xenfocus_searchStyles--border-color, transparent);
1196@search-border-left: xf-default(@xf-xenfocus_searchStyles--border-width, 0px);
1197@search-border-right: xf-default(@xf-xenfocus_searchStyles--border-width, 0px);
1198@search-radius: xf-default(@xf-xenfocus_searchStyles--border-radius, 0);
1199@focus-search-arrow: 7px;
1200@focus-search-dropdown: @xf-contentBg;
1201@focus-search-dropdown-border: rgba(0,0,0,0.1);
1202
1203
1204
1205// Mobile navigation menu
1206@mobile-navigation-background: @xf-publicNav--background-color;
1207@mobile-navigation-color: @xf-publicNav--color;
1208
1209
1210
1211// Breadcrumb
1212@focus-breadcrumbs: true;
1213@breadcrumb-height: xf-default(@xf-xenfocus_breadcrumbHeight, 38)*1px;
1214@breadcrumb-border-width: <xf:if is="property('xenfocus_breadcrumb--border-color')">1px<xf:else />0px</xf:if>;
1215@breadcrumb-border-color: xf-default(@xf-xenfocus_breadcrumb--border-color, transparent);
1216@breadcrumb-color: xf-default(@xf-xenfocus_breadcrumb--color, transparent);
1217@breadcrumb-background-hex: xf-default(@xf-xenfocus_breadcrumb--background-color, transparent);
1218@breadcrumb-background-image: xf-default(@xf-xenfocus_breadcrumb--background-image, none);
1219@breadcrumb-radius: xf-default(@xf-xenfocus_breadcrumb--border-radius, 0px);
1220
1221@breadcrumb-highlight: <xf:if is="property('xenfocus_breadcrumbHover--background-color')">fadein(@xf-xenfocus_breadcrumbHover--background-color, 30%)<xf:else />rgba(255,255,255,0.5)</xf:if>;
1222@breadcrumb-shadow: <xf:if is="property('xenfocus_breadcrumb--background-color')">fade(darken(@xf-xenfocus_breadcrumb--background-color, 20%), 80%)<xf:else />rgba(0,0,0,0.2)</xf:if>;
1223@breadcrumb-hover: xf-default(@xf-xenfocus_breadcrumbHover--background-color, rgba(255,255,255,0.3));
1224@breadcrumb-active: <xf:if is="property('xenfocus_breadcrumb--background-color')">fade(darken(@xf-xenfocus_breadcrumb--background-color, 20%), 15%)<xf:else />rgba(0,0,0,0.05)</xf:if>;
1225
1226
1227
1228// Social icons
1229@social-border: 1px;
1230@social-height: @breadcrumb-height;
1231@social-footer-basic: true;
1232
1233
1234
1235// NEW badge
1236@new-badge-color: #fff;
1237@new-badge-background: #ed7a16;
1238@new-badge: true;
1239
1240
1241
1242// Nodes
1243@node-icon-read-filter: grayscale(1);
1244@node-icon-read-opacity: 0.4;
1245@node-extra-padding: 4px;
1246@node-bold-title: true;
1247
1248
1249
1250// Sidebar
1251@focus-sidebar-icons: true;
1252
1253
1254
1255// Topic view
1256@focus-post-buttons: true;
1257@editor-bg: xf-intensify(@xf-contentBg, 1.5%);
1258@editor-text: @xf-textColor;
1259
1260
1261
1262// Footer
1263@mega-footer-copyright: darken(@xf-publicFooter--background-color, 5%);
1264
1265
1266
1267// Pagination
1268@pagination-active: @xf-paletteColor4;
1269
1270
1271/*
1272 ----------------
1273 - Global
1274 ----------------
1275*/
1276
1277
1278.p-pageWrapper{
1279 // Localize z-index
1280 z-index: 1;
1281 // Remove default
1282 background: none;
1283
1284 @media (min-width: (@xf-responsiveMedium + 1px)){
1285 padding-top: @body-padding-top;
1286 padding-bottom: @body-padding-bottom;
1287 }
1288}
1289
1290// The below code makes these classes behave the same as .focus-width
1291@media (min-width: (@xf-responsiveMedium + 1px)){
1292 .p-header-inner,
1293 .p-nav-inner,
1294 .p-sectionLinks-inner,
1295 .p-body-inner,
1296 .p-footer-inner{
1297 width: ~"calc(100% - (@xf-pageEdgeSpacer * 2))";
1298 }
1299}
1300
1301// Reset widths if site is wrapped
1302.focus-width{
1303
1304 @media (min-width: (@xf-responsiveMedium + 1px)){
1305 max-width: @xf-pageWidthMax;
1306 width: ~"calc(100% - (@xf-pageEdgeSpacer * 2))";
1307 margin: 0 auto;
1308
1309 & &{
1310 width: auto;
1311 max-width: none;
1312 margin: 0;
1313 }
1314 }
1315
1316 & .p-staffBar-inner,
1317 & .p-header-inner,
1318 & .p-nav-inner,
1319 & .p-sectionLinks-inner,
1320 & .p-body-inner,
1321 & .p-footer-inner{
1322 max-width: none;
1323 width: auto;
1324 margin: 0;
1325 }
1326
1327 // IE 11 fix
1328 & .p-body-inner{
1329 width: 100%;
1330 }
1331}
1332
1333// Fluid toggle
1334@media (min-width: @xf-responsiveMedium){
1335 .focus-fluid{
1336
1337 .focus-width,
1338 .p-staffBar-inner,
1339 .p-header-inner,
1340 .p-nav-inner,
1341 .p-sectionLinks-inner,
1342 .p-body-inner,
1343 .p-footer-inner{
1344 max-width: @focus-fluid-width * 1%;
1345 }
1346
1347 .focus-width{
1348 .p-staffBar-inner,
1349 .p-header-inner,
1350 .p-nav-inner,
1351 .p-sectionLinks-inner,
1352 .p-body-inner,
1353 .p-footer-inner{
1354 max-width: 100%;
1355 }
1356 }
1357 }
1358}
1359
1360.focus-editor-open{
1361
1362 .focus-width,
1363 .p-staffBar-inner,
1364 .p-header-inner,
1365 .p-nav-inner,
1366 .p-sectionLinks-inner,
1367 .p-body-inner,
1368 .p-footer-inner{
1369 transition: max-width 0.3s linear;
1370 }
1371}
1372
1373/*
1374 ----------------
1375 - Flexbox
1376 ----------------
1377*/
1378
1379.flex,
1380.flex-inline{
1381 display: flex;
1382 align-items: center;
1383 justify-content: flex-start;
1384}
1385
1386.flex-inline{
1387 display: inline-flex;
1388}
1389
1390// Set defaults: elements only occupy necessary space
1391 .flex > *,
1392 .flex-inline > *{
1393 flex: 0 0 auto;
1394 }
1395
1396 .flex-aS{ align-items: flex-start; }
1397 .flex-aC{ align-items: center; }
1398 .flex-aE{ align-items: flex-end; }
1399 .flex-aF{ align-items: stretch; }
1400
1401 .flex-jS{ justify-content: flex-start; }
1402 .flex-jC{ justify-content: center; }
1403 .flex-jE{ justify-content: flex-end; }
1404 .flex-jA{ justify-content: space-around; }
1405 .flex-jB{ justify-content: space-between; }
1406
1407 .flex00{ flex: 0 0 auto; }
1408 .flex10{ flex: 1 0 auto; }
1409 .flex11{ flex: 1 1 auto; }
1410 .flex01{ flex: 0 1 auto; }
1411
1412 .flex-column{ flex-direction: column; }
1413 .flex-wrap{ flex-wrap: wrap; }
1414
1415@media (max-width: @xf-responsiveMedium){
1416
1417 .flex-aS-m{ align-items: flex-start; }
1418 .flex-aC-m{ align-items: center; }
1419 .flex-aE-m{ align-items: flex-end; }
1420 .flex-aF-m{ align-items: stretch; }
1421
1422 .flex-jS-m{ justify-content: flex-start; }
1423 .flex-jC-m{ justify-content: center; }
1424 .flex-jE-m{ justify-content: flex-end; }
1425 .flex-jA-m{ justify-content: space-around; }
1426 .flex-jB-m{ justify-content: space-between; }
1427
1428 .flex00-m{ flex: 0 0 auto; }
1429 .flex10-m{ flex: 1 0 auto; }
1430 .flex11-m{ flex: 1 1 auto; }
1431 .flex01-m{ flex: 0 1 auto; }
1432
1433 .flex-column-m{ flex-direction: column; }
1434
1435 .hide-m{ display: none; }
1436
1437}
1438
1439@media (max-width: @xf-responsiveNarrow){
1440
1441 .flex-aS-n{ align-items: flex-start; }
1442 .flex-aC-n{ align-items: center; }
1443 .flex-aE-n{ align-items: flex-end; }
1444 .flex-aF-n{ align-items: stretch; }
1445
1446 .flex-jS-n{ justify-content: flex-start; }
1447 .flex-jC-n{ justify-content: center; }
1448 .flex-jE-n{ justify-content: flex-end; }
1449 .flex-jA-n{ justify-content: space-around; }
1450 .flex-jB-n{ justify-content: space-between; }
1451
1452 .flex00-n{ flex: 0 0 auto; }
1453 .flex10-n{ flex: 1 0 auto; }
1454 .flex11-n{ flex: 1 1 auto; }
1455 .flex01-n{ flex: 0 1 auto; }
1456
1457 .flex-column-n{ flex-direction: column; }
1458
1459 .hide-n{ display: none; }
1460
1461}
1462
1463
1464
1465/*
1466 ----------------
1467 - Header
1468 ----------------
1469*/
1470
1471// Make header show on all devices
1472#header{
1473 display: block;
1474}
1475
1476// If a header ad exists, hide the search bar
1477#header .focus-ad:empty,
1478#header .focus-ad:not(:empty) + .focus-wrap-search{
1479 display: none;
1480}
1481
1482// Remove default
1483.p-header-inner{
1484 padding: 0;
1485}
1486
1487.p-header-content{
1488 padding: 0;
1489 flex-wrap: nowrap;
1490
1491 @media (min-width: (@xf-responsiveMedium + 1px)){
1492 .focus-width &{
1493 padding: 0 @header-padding;
1494 }
1495 }
1496}
1497
1498/*
1499 ----------------
1500 - Logo
1501 ----------------
1502*/
1503
1504.p-header-logo{
1505 // Remove defaults
1506 margin: 0;
1507 max-width: none;
1508
1509 a{
1510 height: @xf-xenfocus_logoHeight*1px;
1511 color: xf-default(@xf-xenfocus_logoColor, inherit);
1512 display: inline-flex;
1513 align-items: center;
1514 justify-content: center;
1515 font-family: xf-default(@xf-xenfocus_logoFont, inherit);
1516 font-size: @xf-xenfocus_logoSize*1px;
1517 vertical-align: top;
1518
1519 @media (max-width: @xf-responsiveMedium){
1520 font-size: @xf-xenfocus_logoSizeMobile*1px;
1521 }
1522
1523 // Mobile logo height
1524 @media (max-width: @xf-responsiveMedium){
1525 height: @xf-xenfocus_logoHeightMobile*1px;
1526 }
1527 }
1528
1529 // Mini logo
1530 .focus-mini-logo{
1531 display: flex;
1532 align-items: center;
1533 justify-content: flex-start;
1534 height: @xf-xenfocus_logoHeight*1px;
1535 margin-right: 20px;
1536 // Mobile logo height
1537 @media (max-width: @xf-responsiveMedium){
1538 height: @xf-xenfocus_logoHeightMobile*1px;
1539 }
1540 }
1541
1542 // Text logo
1543 span{
1544 line-height: 1;
1545 display: block;
1546 }
1547
1548 .focus-logo-slogan{
1549 opacity: @logo-slogan-opacity;
1550 font-size: @logo-slogan-size;
1551 margin-top: @logo-slogan-margin;
1552 white-space: nowrap;
1553 }
1554
1555
1556 // Restrict logo image
1557 &.p-header-logo--image img{
1558 max-height: @xf-xenfocus_logoHeight*1px;
1559 @media (max-width: @xf-responsiveMedium){
1560 max-width: 100vw;
1561 max-height: @xf-xenfocus_logoHeightMobile*1px;
1562 }
1563 }
1564
1565 // Stretch so we can center logo on mobiles
1566 @media (max-width: @xf-responsiveMedium){
1567 width: 100%;
1568
1569 .center-mobile-logo(@debug) when (@debug = true) {
1570 text-align: center;
1571
1572 a{
1573 align-items: center;
1574 }
1575 }
1576 .center-mobile-logo(@center-mobile-logo);
1577 }
1578
1579}
1580
1581
1582// Mini logo on mobiles
1583.focus-mobile-navigation{
1584 flex: 0 0 auto;
1585 display: flex;
1586 align-self: stretch;
1587
1588 @media (min-width: (@xf-responsiveMedium+1px)){
1589 display: none;
1590 }
1591}
1592
1593.focus-mobile-logo{
1594 display: none;
1595 color: @focus-mobile-logo-color;
1596 font-weight: bold;
1597
1598 a{
1599 display: flex;
1600 align-items: center;
1601 overflow: hidden;
1602 text-decoration: none;
1603 }
1604
1605 img{
1606 max-height: 44px;
1607 }
1608}
1609
1610<xf:if is="!(property('xenfocus_headerOnMobile'))">
1611// Hide header and use mini-logo on mobiles
1612@media (max-width: @xf-responsiveMedium){
1613
1614 #header{
1615 display: none;
1616 }
1617
1618 .focus-mobile-logo{
1619 display: flex;
1620 max-width: ~"calc(100vw - 260px)";
1621 }
1622
1623}
1624
1625@media (max-width: @xf-responsiveMedium){
1626
1627 .focus-mobile-logo{
1628 max-width: ~"calc(100vw - 220px)";
1629 }
1630
1631}
1632</xf:if>
1633
1634
1635
1636
1637/*
1638 ----------------
1639 - Navigation
1640 ----------------
1641*/
1642
1643.focus-wrap-nav{
1644 flex: 0 1 auto;
1645}
1646
1647// Hide header elements on mobiles depending on location
1648@media (max-width: @xf-responsiveMedium){
1649 .p-header{
1650 .focus-wrap-nav,
1651 .focus-wrap-search,
1652 .focus-wrap-user{
1653 display: none;
1654 }
1655 }
1656
1657 .p-nav{
1658 .focus-wrap-nav,
1659 .focus-wrap-search{
1660 display: none;
1661 }
1662 }
1663}
1664
1665// If the user links are the third last child, we can assume they should be hidden on desktops
1666@media (min-width: (@xf-responsiveMedium + 1px)){
1667 .focus-wrap-user:nth-last-child(3){
1668 display: none;
1669 }
1670}
1671
1672// Make sure the logo and navigation don't squash into each other
1673.p-header{
1674 .focus-wrap-nav{
1675 margin-left: 10px;
1676 }
1677}
1678
1679.p-nav{
1680 z-index: 2;
1681 position: relative;
1682
1683 .focus-wrap-nav{
1684 overflow: hidden;
1685 }
1686}
1687
1688.p-nav(){}
1689@media (min-width: (@xf-responsiveMedium + 1px)){
1690 .p-nav{
1691 .p-nav();
1692 }
1693}
1694
1695
1696
1697// Remove box-shadow from sticky nav
1698.p-navSticky.is-sticky{
1699 box-shadow: none;
1700}
1701
1702// Align items into presumably intended layout
1703.p-nav-inner{
1704 align-items: center;
1705 justify-content: space-between;
1706
1707 // Not necessary for flex layout
1708 &::before,
1709 &::after{
1710 display: none;
1711 }
1712}
1713
1714@media (max-width: @xf-responsiveMedium){
1715 .has-js .p-nav-inner{
1716 min-height: 44px;
1717 }
1718}
1719
1720// Remove default
1721.p-nav-scroller{
1722 margin: 0;
1723}
1724
1725.p-nav-list{
1726 // Set navigation height using line-height instead of padding
1727 line-height: @xf-xenfocus_navHeight*1px;
1728 & .p-navEl-link,
1729 & .p-navEl-splitTrigger{
1730 padding-top: 0;
1731 padding-bottom: 0;
1732 }
1733
1734
1735 // Inherit link colour
1736 & a{
1737 color: inherit;
1738 }
1739
1740
1741 // Remove spacers at start and end. Testing required
1742 &::before{ width: 0; }
1743 &::after{ width: 0; }
1744
1745}
1746
1747
1748
1749// Assign font-size
1750.p-nav-list > li{
1751 font-size: xf-default(@xf-publicNavTab--font-size, @xf-fontSizeNormal);
1752
1753 // If margins exists, remove them from the first and last children since they're likely unnecessary
1754
1755 &:first-child .p-navEl{
1756 margin-left: 0;
1757 }
1758 &:last-child .p-navEl{
1759 margin-right: 0;
1760 }
1761}
1762
1763
1764// Inherit border-radius
1765.focus-content .p-navSticky:not(.is-sticky),
1766.focus-content .p-nav{
1767 border-top-left-radius: inherit;
1768 border-top-right-radius: inherit;
1769}
1770
1771.p-navEl,
1772.p-navEl-link,
1773.p-navEl-splitTrigger,
1774.p-nav-list .p-navEl.is-menuOpen{
1775 border-radius: inherit;
1776}
1777
1778 .p-navEl-splitTrigger{
1779 border-top-left-radius: 0;
1780 border-bottom-left-radius: 0;
1781 }
1782
1783
1784// Remove transition effect
1785.p-nav-list .p-navEl,
1786.p-navEl-link,
1787.p-navEl-splitTrigger{
1788 transition: none;
1789}
1790
1791
1792// Assign tab trigger background to a pseudo element for easy inherit
1793.p-navEl-splitTrigger{
1794 position: relative;
1795
1796 &:before{
1797 content: '';
1798 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
1799 background: currentcolor;
1800 border-radius: inherit;
1801 opacity: 0;
1802 }
1803
1804 &.is-menuOpen:before,
1805 &:hover:before{
1806 opacity: 0.07;
1807 }
1808}
1809
1810
1811
1812// Remove hover effect from link sections
1813.p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen){
1814 & .p-navEl-link:hover{
1815 background: none;
1816 }
1817 // .. and reduce the opacity of the arrow hover
1818 & .p-navEl-splitTrigger:hover{
1819 background: none;
1820 }
1821}
1822 // Remove the line which separates the text and arrow, when the menu is sticky
1823 .p-navSticky--primary.is-sticky .p-nav-list .p-navEl.is-selected .p-navEl-splitTrigger::before{
1824 display: none;
1825 }
1826
1827
1828
1829// Always show the dropdown arrow, which also prevents the jolt after scrolling
1830.p-navEl-splitTrigger{
1831 margin-left: -((@xf-publicNavPaddingH) / 1.5);
1832
1833 .p-nav-list .p-navEl.is-selected & {
1834 display: block;
1835 }
1836}
1837
1838#XF .p-navEl-link.p-navEl-link--splitMenu{
1839 padding-right: @xf-publicNavPaddingH;
1840}
1841
1842
1843
1844// Remove sub-navigation menu
1845.focus-dropdown-nav(@debug) when (@debug = true) {
1846 .p-sectionLinks{
1847 display: none;
1848 }
1849}
1850.focus-dropdown-nav(@focus-dropdown-nav);
1851
1852
1853
1854// Navigation icons
1855.navigation-icons(){}
1856
1857<xf:if is="property('xenfocus_navIcons')">
1858.focus-wrap-nav .p-navEl-link{
1859
1860 &:before{
1861 content: '\f02b';
1862 font-family: "FontAwesome";
1863 font-size: @nav-icon-size;
1864 display: inline-block;
1865 transform: translate(0,0);
1866 font-weight: normal;
1867 text-rendering: auto;
1868 -webkit-font-smoothing: antialiased;
1869 -moz-osx-font-smoothing: grayscale;
1870 .navigation-icons();
1871 margin-right: 6px;
1872 }
1873
1874 &[data-nav-id="home"]:before{ content: '\f015'; }
1875 &[data-nav-id="xenfocus_styles"]:before{ content: '\f00a'; }
1876 &[data-nav-id="forums"]:before{ content: '\f086'; }
1877 &[data-nav-id="whatsNew"]:before{ content: '\f005'; }
1878 &[data-nav-id="members"]:before{ content: '\f007'; }
1879 &[data-nav-id="xfmg"]:before{ content: '\f03e'; }
1880 &[data-nav-id="xfrm"]:before{ content: '\f019'; }
1881}
1882</xf:if>
1883
1884
1885
1886// Navigation scrollers: Force the buttons to use the same colours as navigation links
1887.p-nav-scroller .hScroller-action{
1888
1889 color: @navigation-arrow-color;
1890 padding: 0;
1891
1892 html[dir='ltr'] &.hScroller-action--start,
1893 html[dir='rtl'] &.hScroller-action--end{
1894 background-image: linear-gradient(to left, fade(@navigation-arrow-gradient, 0%) 0%, @navigation-arrow-gradient 60%);
1895 }
1896
1897 html[dir='ltr'] &.hScroller-action--end,
1898 html[dir='rtl'] &.hScroller-action--start{
1899 background-image: linear-gradient(to right, fade(@navigation-arrow-gradient, 0%) 0%, @navigation-arrow-gradient 60%);
1900 }
1901
1902 &:hover{
1903 color: lighten(@navigation-arrow-color, 20%);
1904 }
1905
1906 &:after{
1907 font-size: 10px;
1908 border-radius: 4px;
1909 background: fade(@navigation-arrow-color, 25%);
1910 width: @navigation-arrow-size;
1911 line-height: @navigation-arrow-size;
1912 text-align: center;
1913 -webkit-backdrop-filter: blur(5px);
1914 backdrop-filter: blur(5px);
1915 }
1916
1917 &:hover:after{
1918 background: fade(@navigation-arrow-color, 40%);
1919 }
1920}
1921
1922// If the navigation is placed inside the header, change the fade gradient of the navigation scrollers
1923<xf:if is="property('publicHeader--background-color')">
1924
1925 .p-header .p-nav-scroller .hScroller-action{
1926
1927 html[dir='ltr'] &.hScroller-action--start,
1928 html[dir='rtl'] &.hScroller-action--end{
1929 background-image: linear-gradient(to left, fade(@xf-publicHeader--background-color, 0%) 0%, @xf-publicHeader--background-color 60%);
1930 }
1931
1932 html[dir='ltr'] &.hScroller-action--end,
1933 html[dir='rtl'] &.hScroller-action--start{
1934 background-image: linear-gradient(to right, fade(@xf-publicHeader--background-color, 0%) 0%, @xf-publicHeader--background-color 60%);
1935 }
1936 }
1937
1938</xf:if>
1939
1940
1941
1942// Place the scroller arrows outside of the navigation
1943.focus-nav-arrows{
1944
1945 .p-nav-scroller{
1946 display: flex;
1947 align-items: center;
1948 }
1949
1950 .hScroller-scroll{
1951 order: 2;
1952 flex: 1 1 auto;
1953 }
1954
1955 .hScroller-action{
1956 position: relative;
1957 display: block;
1958 flex: 0 0 auto;
1959 }
1960
1961 .hScroller-action:not(.is-active){
1962 opacity: 0.5;
1963 pointer-events: none;
1964 }
1965
1966 .hScroller-action--start{
1967 order: 1;
1968 }
1969
1970 .hScroller-action--end{
1971 order: 3;
1972 }
1973
1974}
1975
1976
1977/*
1978 ----------------
1979 - User links
1980 ----------------
1981*/
1982
1983.focus-wrap-user{
1984 flex: 0 0 auto;
1985
1986 <xf:if is="property('xenfocus_userStyles--color')">
1987 color: @xf-xenfocus_userStyles--color;
1988 </xf:if>
1989
1990 @media (max-width: @xf-responsiveMedium){
1991 .p-nav-inner &{
1992 color: @user-links-color-mobile;
1993 }
1994 }
1995}
1996
1997// Reset default styles
1998.p-nav-opposite{
1999 @media (min-width: (@xf-responsiveMedium + 1px)){
2000 margin: 0;
2001 }
2002}
2003
2004.p-navgroup(){}
2005
2006.p-navgroup{
2007 display: flex;
2008 border-radius: @user-border-radius;
2009 text-transform: none;
2010
2011 @media (min-width: (@xf-responsiveMedium + 1px)){
2012 border-color: @user-border-color;
2013 border-style: solid;
2014 border-width: @user-border-width;
2015
2016 <xf:if is="property('xenfocus_userStyles--border-top-width')">
2017 border-top-width: @xf-xenfocus_userStyles--border-top-width;
2018 </xf:if>
2019 <xf:if is="property('xenfocus_userStyles--border-top-color')">
2020 border-top-color: @xf-xenfocus_userStyles--border-top-color;
2021 </xf:if>
2022 <xf:if is="property('xenfocus_userStyles--border-top-left-radius')">
2023 border-top-left-radius: @xf-xenfocus_userStyles--border-top-left-radius;
2024 </xf:if>
2025
2026 <xf:if is="property('xenfocus_userStyles--border-right-width')">
2027 border-right-width: @xf-xenfocus_userStyles--border-right-width;
2028 </xf:if>
2029 <xf:if is="property('xenfocus_userStyles--border-right-color')">
2030 border-right-color: @xf-xenfocus_userStyles--border-right-color;
2031 </xf:if>
2032 <xf:if is="property('xenfocus_userStyles--border-top-right-radius')">
2033 border-top-right-radius: @xf-xenfocus_userStyles--border-top-right-radius;
2034 </xf:if>
2035
2036 <xf:if is="property('xenfocus_userStyles--border-bottom-width')">
2037 border-bottom-width: @xf-xenfocus_userStyles--border-bottom-width;
2038 </xf:if>
2039 <xf:if is="property('xenfocus_userStyles--border-bottom-color')">
2040 border-bottom-color: @xf-xenfocus_userStyles--border-bottom-color;
2041 </xf:if>
2042 <xf:if is="property('xenfocus_userStyles--border-bottom-right-radius')">
2043 border-bottom-right-radius: @xf-xenfocus_userStyles--border-bottom-right-radius;
2044 </xf:if>
2045
2046 <xf:if is="property('xenfocus_userStyles--border-left-width')">
2047 border-left-width: @xf-xenfocus_userStyles--border-left-width;
2048 </xf:if>
2049 <xf:if is="property('xenfocus_userStyles--border-left-color')">
2050 border-left-color: @xf-xenfocus_userStyles--border-left-color;
2051 </xf:if>
2052 <xf:if is="property('xenfocus_userStyles--border-bottom-left-radius')">
2053 border-bottom-left-radius: @xf-xenfocus_userStyles--border-bottom-left-radius;
2054 </xf:if>
2055
2056 font-size: xf-default(@xf-xenfocus_userStyles--font-size, @xf-fontSizeSmall);
2057 background-color: xf-default(@xf-xenfocus_userStyles--background-color, transparent);
2058 background-image: xf-default(@xf-xenfocus_userStyles--background-image, none);
2059 <xf:if is="property('xenfocus_userStyles--font-weight')">
2060 font-weight: @xf-xenfocus_userStyles--font-weight;
2061 </xf:if>
2062 .p-navgroup();
2063 }
2064}
2065
2066// Overwrite 0 radius on sticky
2067.p-navSticky.is-sticky .p-nav .p-account{
2068 border-radius: @user-border-radius;
2069}
2070
2071.p-navgroup-link{
2072 border-color: @user-border-color;
2073 border-style: solid;
2074 background-clip: padding-box !important;
2075 height: @xf-xenfocus_userHeight*1px;
2076 padding-top: 0;
2077 padding-bottom: 0;
2078 display: flex;
2079 align-items: center;
2080 color: inherit;
2081 float: none;
2082
2083 // Add border to user links
2084 html &{
2085 border: <xf:if is="property('xenfocus_userSep')">@user-links-sep<xf:else />0</xf:if> solid @user-border-color;
2086 border-width: 0px;
2087 border-left-width: <xf:if is="property('xenfocus_userSep')">@user-links-sep<xf:else />0</xf:if>;
2088 &:first-of-type{
2089 border-left-width: 0;
2090 }
2091 }
2092
2093
2094 // Add space after icon
2095 @media (min-width: (@xf-responsiveWide + 1px)){
2096 i{
2097 margin-right: 7px;
2098 }
2099 }
2100
2101
2102 @media (max-width: @xf-responsiveMedium){
2103 // Set height to 40px on mobiles to match hamburger
2104 height: 40px;
2105 }
2106
2107
2108 // If the user panel has a background-color, correctly inherit border-radius for first and last links
2109 @media (min-width: (@xf-responsiveMedium + 1px)){
2110 <xf:if is="property('xenfocus_userStyles--background-color') OR property('xenfocus_userSep')">
2111 #XF &{
2112 border-radius: 0;
2113 }
2114 &:first-of-type,
2115 .p-navgroup-link.p-navgroup-link--whatsnew:first-of-type + &{
2116 border-top-left-radius: inherit;
2117 border-bottom-left-radius: inherit;
2118 }
2119 &:last-of-type{
2120 border-top-right-radius: inherit;
2121 border-bottom-right-radius: inherit;
2122 }
2123 <xf:else />
2124 #XF &{
2125 border-radius: inherit;
2126 }
2127 </xf:if>
2128
2129 // Desktops: Hover and active effects
2130 &.is-menuOpen,
2131 &:hover{
2132 <xf:if is="property('xenfocus_userStyles--color')">
2133 color: lighten(@xf-xenfocus_userStyles--color, 5%);
2134 </xf:if>
2135 background-color: @user-hover;
2136 }
2137 }
2138 @media (max-width: @xf-responsiveMedium){
2139 #XF &{
2140 border-radius: inherit;
2141 }
2142
2143 // Mobiles: Hover and active effects
2144 &.is-menuOpen,
2145 &:hover{
2146 color: @user-links-color-mobile;
2147 background-color: fade(@user-links-color-mobile, 15%);
2148 }
2149 }
2150}
2151
2152// Remove gap from user links and search link
2153.p-navgroup.p-discovery{
2154 margin: 0;
2155}
2156
2157// Bold user links
2158.p-navgroup-linkText{
2159 font-weight: xf-default(@xf-xenfocus_userStyles--font-weight, normal);
2160}
2161
2162// Align avatar
2163.p-navgroup-link--user{
2164 display: flex !important;
2165 align-items: center;
2166
2167 @media (min-width: (@xf-responsiveWide + 1px)){
2168 .avatar{
2169
2170 #XF &{
2171 height: (@xf-xenfocus_userHeight * 1px - 14px);
2172 width: (@xf-xenfocus_userHeight * 1px - 14px);
2173 margin-left: -3px;
2174 margin-right: 9px;
2175 }
2176
2177 &.avatar--default--dynamic{
2178 font-size: inherit;
2179 display: inline-flex;
2180 justify-content: center;
2181 align-items: center;
2182 }
2183 }
2184 }
2185}
2186<xf:if is="property('xenfocus_userStyles--color')">
2187.p-navgroup-link--user .avatar::after{
2188 border-color: fade(@xf-xenfocus_userStyles--color, 15%);
2189}
2190</xf:if>
2191
2192// Hide whats new link since the flex property shows it
2193@media (min-width: (@xf-responsiveMedium + 1px)){
2194 .p-navgroup-link--whatsnew{ display: none; }
2195}
2196
2197// Add icons to guest links
2198.p-navgroup-link--logIn,
2199.p-navgroup-link--register{
2200
2201 .p-navgroup-linkText::before{
2202 content: '\f090';
2203 font-family: "FontAwesome";
2204 text-rendering: auto;
2205 -webkit-font-smoothing: antialiased;
2206 -moz-osx-font-smoothing: grayscale;
2207 font-weight: normal;
2208 margin-right: 8px;
2209 }
2210}
2211
2212.p-navgroup-link--register .p-navgroup-linkText::before{
2213 content: '\f0fe';
2214}
2215
2216<xf:if is="property('xenfocus_userRegister')">
2217.p-navgroup--guest .p-navgroup-link--register{
2218 position: relative;
2219 background-color: transparent !important;
2220 color: #fff;
2221 text-shadow: none;
2222
2223 &::before{
2224 content: '';
2225 position: absolute;
2226 top: @register-offset;
2227 left: 3px;
2228 right: 3px;
2229 bottom: @register-offset;
2230 background: @xf-xenfocus_userRegister;
2231 border-radius: 3px;
2232
2233 @media (max-width: @xf-responsiveMedium){
2234 top: 3px;
2235 bottom: 3px;
2236 }
2237 }
2238
2239 &:hover::before{
2240 background: lighten(@xf-xenfocus_userRegister, 5%);
2241 }
2242
2243 .p-navgroup-linkText{
2244 position: relative;
2245 }
2246}
2247</xf:if>
2248
2249
2250// Remove text and use icons only
2251<xf:if is="property('xenfocus_userIcons')">
2252 @media (min-width: (@xf-responsiveMedium + 1px)){
2253 .p-navgroup-link--conversations,
2254 .p-navgroup-link--alerts{
2255
2256 .p-navgroup-linkText{
2257 display: none;
2258 }
2259
2260 i{
2261 font-size: 18px;
2262 margin: 0;
2263 }
2264
2265 &.badgeContainer::after{
2266 left: auto;
2267 right: 4px;
2268 }
2269
2270 }
2271 .p-navgroup .p-navgroup-link[data-xenfocus-editor] span::before{
2272 margin: 0;
2273 }
2274 }
2275</xf:if>
2276
2277// Change icon of New Content
2278.p-navgroup-link.p-navgroup-link--whatsnew i::after,
2279.button.button--icon--bolt > .button-text::before,
2280a.button.button--icon--bolt > .button-text::before{
2281 content: '\f15c';
2282}
2283
2284 .button.button--icon--bolt > .button-text::before,
2285 a.button.button--icon--bolt > .button-text::before{
2286 width: auto;
2287 }
2288
2289// Remove box-shadow from active links
2290.p-nav-list .p-navEl.is-menuOpen,
2291.p-navgroup-link.is-menuOpen{
2292 box-shadow: none;
2293}
2294
2295// Bug fix: Restore full opacity since separator borders are also faint
2296.p-navgroup-link.badgeContainer{
2297 opacity: 1;
2298}
2299
2300@media (max-width: @xf-responsiveNarrow){
2301 .p-navgroup--member .p-navgroup-link{
2302 margin: 0;
2303 }
2304}
2305
2306// Alter colours of user drop-down menu
2307.js-visitorMenuBody .menu-row--highlighted{
2308 background: @xf-contentAltBg;
2309}
2310
2311
2312// Hide search link
2313.focus-hide-search-link(@debug) when (@debug = true) {
2314 @media (min-width: (@xf-responsiveMedium + 1px)){
2315 .p-discovery{
2316 display: none;
2317 }
2318 }
2319}
2320.focus-hide-search-link(@focus-hide-search-link);
2321
2322
2323
2324
2325
2326/*
2327 ----------------
2328 - Search bar
2329 ----------------
2330*/
2331
2332.xenfocus_searchStyles(){}
2333
2334.focus-wrap-search{
2335 position: relative;
2336 flex: 0 0 auto;
2337
2338 margin-left: 10px;
2339}
2340
2341.focus-search{
2342 width: @search-width;
2343 line-height: @search-height;
2344 background-color: @search-background-color;
2345 background-image: @search-background-image;
2346 color: @search-color;
2347 border: @search-border;
2348 border-radius: @search-radius;
2349 font-size: xf-default(@xf-xenfocus_searchStyles--font-size, inherit);
2350 .xenfocus_searchStyles();
2351
2352 border-left-width: @search-border-left;
2353 border-right-width: @search-border-right;
2354
2355 // Hide search on medium width
2356 @media (max-width: @xf-responsiveMedium){
2357 display: none;
2358 }
2359}
2360
2361.focus-search-flex{
2362 display: flex;
2363 align-items: center;
2364 position: relative;
2365}
2366
2367 .focus-search-prefix{
2368 order: 1;
2369 flex: 0 0 auto;
2370 width: @search-height;
2371 text-align: center;
2372 opacity: 0.7;
2373 transition: opacity 0.2s linear;
2374
2375 .focus-search input:focus ~ &{
2376 opacity: 1;
2377 }
2378 }
2379
2380 .focus-search input{
2381 background: none;
2382 border: 0;
2383 outline: none;
2384 color: inherit;
2385
2386 order: 2;
2387 flex: 1 1 auto;
2388 padding: 0;
2389 display: block;
2390 width: 100%;
2391 min-width: 0;
2392
2393 // IE 11
2394 line-height: @search-height;
2395 height: @search-height;
2396
2397 &::placeholder {
2398 color: inherit;
2399 opacity: 0.7;
2400 }
2401 }
2402
2403.focus-search-menu{
2404 position: absolute;
2405 top: 100%;
2406 z-index: 200;
2407 margin-top: @focus-search-arrow+4px;
2408 left: 0;
2409 width: 100%;
2410 max-width: 300px;
2411 min-width: 200px;
2412 color: @xf-textColor;
2413 background: @focus-search-dropdown;
2414 box-shadow: 0px 10px 20px rgba(0,0,0,0.15), @focus-search-dropdown-border 0px 0px 0px 1px;
2415 border-radius: @xf-blockBorderRadius;
2416
2417 transform: translateY(-12px);
2418 opacity: 0;
2419 pointer-events: none;
2420 visibility: hidden;
2421 transition: all linear 0.2s;
2422
2423 .focus-search-menu-active &{
2424 transform: translateY(0);
2425 opacity: 1;
2426 pointer-events: auto;
2427 visibility: visible;
2428 }
2429
2430 &::before,
2431 &::after{
2432 content: '';
2433 position: absolute;
2434 top: @focus-search-arrow*-2;
2435 left: 10px;
2436 width: @focus-search-arrow*2;
2437 height: @focus-search-arrow*2;
2438 border: @focus-search-arrow solid transparent;
2439 border-bottom-color: @focus-search-dropdown-border;
2440 box-sizing: border-box;
2441 }
2442
2443 &::before{
2444 margin-top: -1px;
2445 }
2446
2447 &::after{
2448 border-bottom-color: @focus-search-dropdown;
2449 }
2450
2451 .menu-row{
2452 padding: 10px;
2453 border-top: 1px solid fade(@xf-textColor, 8%);
2454
2455 &:first-of-type{
2456 border-top-width: 0;
2457 }
2458 }
2459
2460 .menu-footer{
2461 background: xf-intensify(@xf-contentAltBg, 3%);
2462 border-bottom-left-radius: inherit;
2463 border-bottom-right-radius: inherit;
2464 padding: 7px;
2465 }
2466
2467 .menu-footer-controls{
2468 float: none !important;
2469 display: flex;
2470 justify-content: space-between;
2471 align-items: center;
2472 flex-wrap: wrap;
2473
2474 > *{
2475 flex: 1 0 auto;
2476 margin: 3px;
2477 }
2478 }
2479
2480 a.button{
2481 color: @xf-buttonDefault--color;
2482 }
2483
2484 // Button icons
2485 @focus-search-button-height: 30px;
2486 .button{
2487 padding: 0;
2488 line-height: @focus-search-button-height;
2489 }
2490
2491 .button-text{
2492 display: block;
2493 position: relative;
2494 padding-left: @focus-search-button-height;
2495 }
2496
2497 .menu-footer .button-text:before{
2498 font-size: 14px;
2499 line-height: inherit;
2500 position: absolute;
2501 top: 0; left: 0;
2502 margin: 0;
2503 width: @focus-search-button-height;
2504 background: fade(@xf-buttonDefault--color, 20%);
2505 border-top-left-radius: @xf-borderRadiusMedium;
2506 border-bottom-left-radius: @xf-borderRadiusMedium;
2507 }
2508
2509 .menu-footer a .button-text:before{
2510 content: '\f1de';
2511 font-family: "FontAwesome";
2512 text-rendering: auto;
2513 -webkit-font-smoothing: antialiased;
2514 -moz-osx-font-smoothing: grayscale;
2515 }
2516}
2517
2518/*
2519 ----------------
2520 - xenfocus Editor
2521 ----------------
2522*/
2523
2524@focus-editor-icon: "\f205";
2525@focus-editor-save: #2aad55;
2526@focus-editor-width: 1000px;
2527@focus-editor-overlay: fade(xf-intensify(@xf-contentBg, 100%), 40%);
2528@focus-editor-transition: 0.25s;
2529
2530.p-navgroup-link[data-xenfocus-editor] span:before,
2531.p-footer-row [data-xenfocus-editor]:before{
2532 content: @focus-editor-icon;
2533 font-family: "FontAwesome";
2534 transform: translate(0,0);
2535 font-weight: normal;
2536 text-rendering: auto;
2537 -webkit-font-smoothing: antialiased;
2538 -moz-osx-font-smoothing: grayscale;
2539 margin: 0 5px;
2540}
2541
2542@media (max-width: @xf-responsiveWide){
2543 .p-navgroup-link[data-xenfocus-editor] span:before{
2544 margin: 0;
2545 }
2546}
2547
2548[data-xenfocus-editor]{
2549 cursor: pointer;
2550}
2551
2552.focus-editor-wrap{
2553 display: flex;
2554 position: fixed;
2555 top: 0; left: 0; width: 100%; height: 100%;
2556 z-index: 10;
2557 align-items: center;
2558 justify-content: center;
2559
2560 visibility: hidden;
2561 opacity: 0;
2562 transition: all @focus-editor-transition ease-in-out;
2563
2564
2565 .focus-editor-open &{
2566 visibility: visible;
2567 opacity: 1;
2568 }
2569
2570 .focus-editor-overlay{
2571 background: @focus-editor-overlay;
2572 -webkit-backdrop-filter: blur(5px);
2573 backdrop-filter: blur(5px);
2574 position: absolute;
2575 top: 0; left: 0; right: 0; bottom: 0;
2576 cursor: auto;
2577 }
2578
2579
2580}
2581
2582.focus-editor{
2583 box-shadow: rgba(0,0,0,0.3) 0px 10px 10px, rgba(0,0,0,0.4) 0px 15px 50px;
2584 border-radius: 4px;
2585
2586 background: @xf-contentBg;
2587 position: relative;
2588 width: 98%;
2589 max-width: @focus-editor-width;
2590
2591 transition: all @focus-editor-transition ease-in-out;
2592 transform: translateY(-50px);
2593
2594 .focus-editor-scroll{
2595 max-height: ~"calc(100vh - 200px)";
2596 overflow: auto;
2597 border-radius: inherit;
2598 }
2599
2600 .focus-editor-open &{
2601 transform: translateY(0);
2602 }
2603
2604 .focus-editor-panel{
2605 padding: 20px;
2606 display: flex;
2607 align-items: center;
2608 justify-content: flex-start;
2609 }
2610
2611 hr{
2612 display: none;
2613 }
2614
2615 h4{
2616 margin: 0;
2617 display: block;
2618 background: @xf-contentAltBg;
2619 border: 1px solid xf-intensify(@xf-contentAltBg, 10%);
2620 border-width: 1px 0;
2621 padding: 20px;
2622
2623 &:only-child{
2624 display: none;
2625 }
2626 }
2627
2628 .focus-editor-scroll > div:first-of-type h4{
2629 border-top: 0;
2630 }
2631
2632 .focus-editor-save{
2633 padding: 20px;
2634 text-align: right;
2635 background: @xf-contentAltBg;
2636 border-top: 1px solid xf-intensify(@xf-contentAltBg, 10%);
2637 border-bottom-left-radius: inherit;
2638 border-bottom-right-radius: inherit;
2639
2640 button{
2641 display: inline-flex;
2642 border: 0;
2643 <xf:if is="property('styleType') == 'light'">
2644 border: 1px solid rgba(0,0,0,0.2);
2645 </xf:if>
2646 box-shadow: inset rgba(255,255,255,0.16) 0px 1px 0px;
2647 border-radius: 3px;
2648 background-color: @focus-editor-save;
2649 color: #fff;
2650 font-weight: bold;
2651 padding: 0;
2652 line-height: 44px;
2653 position: relative;
2654 transition: background-color 0.2s linear;
2655
2656 &:before{
2657 flex: 0 0 auto;
2658 font-family: "FontAwesome";
2659 text-rendering: auto;
2660 -webkit-font-smoothing: antialiased;
2661 -moz-osx-font-smoothing: grayscale;
2662 font-weight: normal;
2663 font-size: 14px;
2664 content: '\f00c';
2665 padding: 0 12px;
2666 background: rgba(255,255,255,0.18);
2667 background-clip: padding-box;
2668 border-top-left-radius: inherit;
2669 border-bottom-left-radius: inherit;
2670 border: 1px solid rgba(0,0,0,0.12);
2671 border-width: 0 1px 0 0;
2672 }
2673 &:after{
2674 flex: 0 0 auto;
2675 padding: 0 18px;
2676 }
2677
2678 &:hover{
2679 background-color: lighten(@focus-editor-save, 5%);
2680 }
2681
2682 &:active{
2683 top: 1px;
2684 }
2685
2686
2687 }
2688 }
2689
2690}
2691
2692
2693// Hide certain settings from mobiles
2694@media (max-width: @xf-responsiveWide){
2695 .focus-editor .focus-editor-panel[data-toggle-class="focus-sidebar-sticky"],
2696 .focus-editor .focus-editor-panel[data-toggle-class="focus-sidebar-flip"]{
2697 display: none;
2698 }
2699}
2700
2701@media (max-width: @xf-pageWidthMax){
2702 .focus-editor .focus-editor-panel[data-toggle-class="focus-fluid"]{
2703 display: none;
2704 }
2705}
2706
2707@focus-toggle-height: 30px;
2708@focus-toggle-width: 50px;
2709@focus-toggle-transform: @focus-toggle-width - @focus-toggle-height;
2710
2711.focus-editor-toggle{
2712 position: relative;
2713 flex: 0 0 auto;
2714 margin-right: 20px;
2715
2716 i.focus-toggle{
2717 background: xf-intensify(@xf-contentBg, 10%);
2718 display: block;
2719 border-radius: 15px;
2720 position: relative;
2721 z-index: 0;
2722 width: @focus-toggle-width;
2723 height: @focus-toggle-height;
2724
2725 // Background
2726 &:before{
2727 content: '';
2728 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
2729 background: @focus-editor-save;
2730 border-radius: inherit;
2731 /*transform: scale(0);
2732 transform-origin: 50% 50%;
2733 transition: transform 0.25s ease-in-out; */
2734 opacity: 0;
2735 transition: opacity 0.25s linear;
2736 }
2737
2738 i{
2739 position: absolute; top: 0; left: 0; bottom: 0;
2740 width: @focus-toggle-height;
2741 transform: translateX(0);
2742 transition: transform 0.3s ease-in-out;
2743 border-radius: inherit;
2744 padding: 2px;
2745 <xf:if is="property('styleType') == 'dark'">
2746 padding: 4px;
2747 </xf:if>
2748
2749 &:before{
2750 content: '';
2751 <xf:if is="property('styleType') == 'dark'">
2752 background: rgba(255,255,255,0.5);
2753 <xf:else />
2754 background: lighten(@xf-contentBg, 20%);
2755 </xf:if>
2756 box-shadow: rgba(0,0,0,0.25) 0px 3px 6px;
2757 border-radius: inherit;
2758 display: block;
2759 height: 100%;
2760 }
2761 }
2762
2763 &:after{
2764 content: '';
2765 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
2766 border-radius: inherit;
2767 border: 2px solid rgba(0,0,0,0.15);
2768 <xf:if is="property('styleType') == 'dark'">
2769 border-color: rgba(255,255,255,0.2);
2770 </xf:if>
2771 }
2772 }
2773
2774 input[type='radio']{
2775 display: block;
2776 position: absolute; top: 0; left: 0;
2777 width: @focus-toggle-width;
2778 height: @focus-toggle-height;
2779 opacity: 0;
2780 z-index: 5;
2781 border-radius: 0;
2782 -moz-appearance: none;
2783 -webkit-appearance: none;
2784 appearance: none;
2785 cursor: pointer;
2786
2787 &:checked{
2788 display: none;
2789 }
2790
2791
2792 &:nth-of-type(2):checked ~ .focus-toggle{
2793
2794 &:before{
2795 transform: scale(1);
2796 opacity: 1;
2797 }
2798 i{
2799 transform: translateX(@focus-toggle-transform);
2800 }
2801
2802 }
2803
2804 html[dir='rtl'] &:nth-of-type(2):checked ~ .focus-toggle{
2805
2806 i{
2807 transform: translateX(@focus-toggle-transform * -1);
2808 }
2809
2810 }
2811
2812 }
2813
2814}
2815
2816.focus-editor-text{
2817 flex: 1 1 auto;
2818
2819 &:before{
2820 content: attr(data-setting-title);
2821 display: block;
2822 font-weight: bold;
2823 margin-bottom: 4px;
2824 }
2825
2826 &:after{
2827 content: attr(data-setting-desc);
2828 opacity: 0.6;
2829 display: block;
2830 }
2831}
2832
2833
2834
2835/*
2836 ----------------
2837 - Breadcrumbs
2838 ----------------
2839*/
2840
2841// Align breadcrumbs and social icons
2842.focus-breadcrumb{
2843 display: flex;
2844
2845 @media (max-width: @xf-responsiveMedium){
2846 flex-direction: column;
2847 align-items: center;
2848 }
2849
2850 .p-breadcrumbs{
2851 flex: 1 1 auto;
2852 width: 100%;
2853 }
2854}
2855
2856.xenfocus_breadcrumb(){}
2857
2858.focus-breadcrumbs(@debug) when (@debug = true) {
2859 .p-breadcrumbs{
2860 color: @breadcrumb-color;
2861 background-color: @breadcrumb-background-hex;
2862 background-image: @breadcrumb-background-image;
2863 border-radius: @breadcrumb-radius;
2864 font-size: @xf-fontSizeSmall;
2865 overflow: hidden;
2866 line-height: @breadcrumb-height;
2867 margin-bottom: 10px;
2868 position: relative;
2869 z-index: 0;
2870 .xenfocus_breadcrumb();
2871
2872 &::before{
2873 display: block;
2874 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
2875 border-width: @breadcrumb-border-width;
2876 border-style: solid;
2877 border-color: @breadcrumb-border-color;
2878 border-radius: inherit;
2879 pointer-events: none;
2880 z-index: 2;
2881 }
2882
2883 > li{
2884 margin: 0;
2885 font-size: inherit;
2886 padding-left: 15px;
2887
2888
2889 &:first-child{
2890 border-top-left-radius: inherit;
2891 border-bottom-left-radius: inherit;
2892 }
2893
2894 &::before,
2895 &::after{
2896 display: none;
2897 }
2898
2899
2900 a{
2901 padding: 0 15px;
2902 position: relative;
2903 z-index: 1;
2904 display: block;
2905 overflow: visible;
2906 max-width: none;
2907 text-decoration: none;
2908 color: inherit;
2909 margin-left: -15px;
2910
2911 &:hover{
2912 color: xf-default(@xf-xenfocus_breadcrumbHover--color, inherit);
2913 }
2914
2915 &::before,
2916 &::after {
2917 border-style: solid;
2918 border-width: 0;
2919 border-right-width: 1px;
2920 border-color: @breadcrumb-shadow;
2921 color: @breadcrumb-highlight;
2922 box-shadow: inset currentColor -1px 0px 0px 0px;
2923 content: '';
2924 position: absolute;
2925 height: 50%;
2926 width: 100%;
2927 right: 0;
2928 z-index: -1;
2929 box-sizing: border-box;
2930 transform-origin: 100% 50%;
2931 }
2932
2933 html[dir='rtl'] &:before,
2934 html[dir='rtl'] &:after{
2935 box-shadow: inset currentColor 1px 0px 0px 0px;
2936 }
2937
2938 &::before {
2939 top: 0;
2940 transform: skewX(30deg);
2941 }
2942
2943 &::after {
2944 top: 50%;
2945 transform: skewX(-30deg);
2946 }
2947
2948 html[dir='rtl'] &:before{
2949 transform: skewX(-30deg);
2950 }
2951
2952 html[dir='rtl'] &:after{
2953 transform: skewX(30deg);
2954 }
2955
2956 /* Hover */
2957 &:hover::before,
2958 &:hover::after{
2959 background: @breadcrumb-hover;
2960 }
2961
2962 /* Active */
2963 &:active::before,
2964 &:active::after{
2965 background: @breadcrumb-active;
2966 color: rgba(0,0,0,0.05);
2967 box-shadow: inset currentColor -2px 1px 1px;
2968 }
2969
2970 &:active::after{
2971 box-shadow: inset currentColor -2px -1px 1px;
2972 }
2973
2974
2975 }
2976
2977 &:first-of-type a::before,
2978 &:first-of-type a::after {
2979 width: ~"calc(100% + 20px)";
2980 }
2981
2982 }
2983
2984
2985 @media (max-width: @xf-responsiveNarrow){
2986
2987 & > li a{
2988 padding: 0 22px;
2989
2990 &::before,
2991 &::after {
2992 transform: skewX(-30deg);
2993 width: ~"calc(100% + 20px)";
2994 }
2995
2996 &::after {
2997 transform: skewX(30deg);
2998 }
2999 }
3000
3001 }
3002
3003
3004 }
3005
3006}
3007.focus-breadcrumbs(@focus-breadcrumbs);
3008
3009
3010
3011/*
3012 ----------------
3013 - Social icons
3014 ----------------
3015*/
3016
3017.xenfocus-social{
3018 color: #fff;
3019 border-radius: @xf-xenfocus_breadcrumb--border-radius;
3020 display: flex;
3021 align-items: center;
3022 justify-content: flex-start;
3023 flex: 0 0 auto;
3024 margin: 0;
3025 margin-bottom: 10px;
3026 padding: 0;
3027 list-style: none;
3028 text-align: center;
3029 text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
3030
3031 li{
3032 line-height: @social-height;
3033 flex: 0 0 auto;
3034 margin: 0;
3035 padding: 0;
3036 border-radius: inherit;
3037 list-style: none;
3038 padding-left: 4px;
3039 }
3040
3041
3042 a{
3043 color: inherit;
3044 box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
3045 border-radius: inherit;
3046 display: flex;
3047 align-items: center;
3048 text-decoration: none;
3049 outline: none;
3050 position: relative;
3051 font-size: @xf-fontSizeSmall;
3052
3053 padding-right: 12px;
3054
3055
3056 &:active{
3057 box-shadow: inset rgba(0,0,0,0.4) 0px 1px 3px;
3058 top: 1px;
3059 }
3060
3061 // Icon
3062 &:before{
3063 content: "\f1e0";
3064 background-color: rgba(255,255,255,0.12);
3065 border-radius: inherit;
3066 width: @social-height;
3067 flex: 0 0 auto;
3068 text-align: center;
3069 font-family: "FontAwesome";
3070 font-size: 14px;
3071 font-weight: normal;
3072 -webkit-font-smoothing: antialiased;
3073 -moz-osx-font-smoothing: grayscale;
3074 transform: translate(0,0);
3075 pointer-events: none;
3076 border-top-right-radius: 0;
3077 border-bottom-right-radius: 0;
3078 margin-right: 12px;
3079
3080 html[dir='ltr'] &{
3081 box-shadow: inset rgba(255,255,255,0.12) -1px 0px 0px 0px, rgba(0,0,0,0.1) 1px 0px 0px 0px;
3082 }
3083 html[dir='rtl'] &{
3084 box-shadow: inset rgba(255,255,255,0.12) 1px 0px 0px 0px, rgba(0,0,0,0.1) -1px 0px 0px 0px;
3085 }
3086 }
3087
3088 // Border and hover
3089 &:after{
3090 border: @social-border solid rgba(0,0,0,0.2);
3091 <xf:if is="property('styleType') == 'dark'">
3092 border-width: 0px;
3093 </xf:if>
3094 box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px;
3095 content: '';
3096 position: absolute;
3097 top: 0; left: 0; right: 0; bottom: 0;
3098 pointer-events: none;
3099 border-radius: inherit;
3100 }
3101
3102 &:hover:after{
3103 background: rgba(255,255,255,0.2);
3104 }
3105
3106 &:active:after{
3107 background: rgba(0,0,0,0.1);
3108 }
3109
3110
3111
3112 // Icon only
3113 #XF &:empty{
3114 padding: 0;
3115
3116 &:before{
3117 border-radius: inherit;
3118 margin: 0;
3119 box-shadow: none;
3120 background-color: transparent;
3121 }
3122 }
3123
3124 }
3125
3126
3127 a{
3128
3129 background: #999;
3130 &:before{ content: "\f1e0"; }
3131
3132 &[href*='discordapp.com']{
3133 background: #7289da;
3134 &:before{
3135 background: url('styles/xenfocus/images/discord.png') no-repeat 50% 50%;
3136 background-size: 20px auto;
3137 font-size: 0;
3138 }
3139 }
3140
3141 &[href*='dropbox.com']{
3142 background: #007fe5;
3143 &:before{ content: "\f16b"; }
3144 }
3145
3146 &[href*='mailto:']{
3147 background: #444444;
3148 &:before{ content: "\f01c"; }
3149 }
3150
3151 &[href*='facebook.com']{
3152 background: #304c87;
3153 &:before{ content: "\f09a"; }
3154 }
3155
3156 &[href*='flickr.com']{
3157 background: #fe2997;
3158 &:before{ content: "\f16e"; }
3159 }
3160
3161 &[href*='google.com']{
3162 background: #df6b39;
3163 &:before{ content: "\f0d5"; }
3164 }
3165
3166 &[href*='instagram.com']{
3167 background: #de416a;
3168 &:before{ content: "\f16d"; }
3169 }
3170
3171 &[href*='linkedin.com']{
3172 background: #0073b2;
3173 &:before{ content: "\f0e1"; }
3174 }
3175
3176 &[href*='paypal.com']{
3177 background: #253b80;
3178 &:before{ content: "\f1ed"; }
3179 }
3180
3181 &[href*='pinterest.com']{
3182 background: #cd1d1f;
3183 &:before{ content: "\f0d2"; }
3184 }
3185
3186 &[href*='reddit.com']{
3187 background: #609acf;
3188 &:before{ content: "\f1a1"; }
3189 }
3190
3191 &[href$='.rss']{
3192 background: #ff9641;
3193 &:before{ content: "\f09e"; }
3194 }
3195
3196 &[href*='skype.com']{
3197 background: #00b0f0;
3198 &:before{ content: "\f17e"; }
3199 }
3200
3201 &[href*='soundcloud.com']{
3202 background: #ff6900;
3203 &:before{ content: "\f1be"; }
3204 }
3205
3206 &[href*='spotify.com']{
3207 background: #84b301;
3208 &:before{ content: "\f1bc"; }
3209 }
3210
3211 &[href*='steampowered.com']{
3212 background: #457498;
3213 &:before{ content: "\f1b6"; }
3214 }
3215
3216 &[href*='stripe.com']{
3217 background: #58aada;
3218 &:before{ content: "\f1f5"; }
3219 }
3220
3221 &[href*='teamspeak.com']{
3222 background: #8190b1;
3223 &:before{ content: "\f130"; }
3224 }
3225
3226 &[href*='tumblr.com']{
3227 background: #539fcc;
3228 &:before{ content: "\f173"; }
3229 }
3230
3231 &[href*='twitch.tv']{
3232 background: #6441a5;
3233 &:before{ content: "\f1e8"; }
3234 }
3235
3236 &[href*='twitter.com']{
3237 background: #0097d3;
3238 &:before{ content: "\f099"; }
3239 }
3240
3241 &[href*='vimeo.com']{
3242 background: #1bb5ea;
3243 &:before{ content: "\f194"; }
3244 }
3245
3246 &[href*='youtube.com']{
3247 background: #cc332d;
3248 &:before{ content: "\f16a"; }
3249 }
3250
3251 }
3252
3253
3254}
3255
3256#footer .xenfocus-social{
3257 margin: 0;
3258 margin-top: 10px;
3259
3260 li:first-child{
3261 padding: 0;
3262 }
3263
3264 .social-footer-basic(@debug) when (@debug = true) {
3265 color: inherit;
3266 text-shadow: none;
3267
3268 a{
3269 box-shadow: none;
3270 background: none;
3271
3272 &:before{
3273 box-shadow: none;
3274 background-color: rgba(255,255,255,0.05);
3275 }
3276
3277 &:after{
3278 border-width: 0;
3279 box-shadow: none;
3280 opacity: 0.2;
3281 background: currentcolor;
3282 }
3283
3284 &:hover:after{
3285 opacity: 0.3;
3286 }
3287
3288 &:active:after{
3289 opacity: 0.4;
3290 }
3291 }
3292 }
3293 .social-footer-basic(@social-footer-basic);
3294}
3295
3296
3297
3298
3299
3300
3301/*
3302 ----------------
3303 - Background Picker
3304 ----------------
3305*/
3306
3307.focus-picker{
3308 display: flex;
3309 align-items: center;
3310 justify-content: space-between;
3311 padding: 15px;
3312
3313 span{
3314 flex: 1 1 auto;
3315 display: block;
3316 position: relative;
3317 background-color: @xf-pageBg;
3318 background-size: cover;
3319 background-position: 50% 50% ;
3320 border-radius: 4px;
3321 box-shadow: rgba(0,0,0,0.08) 0px 5px 10px;
3322 color: #fff;
3323 font-size: 1.45rem;
3324 text-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
3325 -moz-user-select: none;
3326 -webkit-user-select: none;
3327 -ms-user-select: none;
3328 user-select: none;
3329 min-height: 80px;
3330 max-height: 180px;
3331 margin: 5px;
3332 text-align: center;
3333 cursor: pointer;
3334 overflow: hidden;
3335
3336 // Size
3337 &:before{
3338 content: '';
3339 display: block;
3340 padding-bottom: 56%;
3341 }
3342
3343 // Border
3344 &:after{
3345 content: '';
3346 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
3347 border: 1px solid fade(@xf-textColor, 15%);
3348 border-radius: inherit;
3349 <xf:if is="property('styleType') == 'light'">
3350 box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px;
3351 </xf:if>
3352 }
3353
3354 i{
3355 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
3356 border-radius: inherit;
3357 overflow: hidden;
3358
3359 &:before{
3360 content: '';
3361 display: flex;
3362 align-items: center;
3363 justify-content: center;
3364 content: "\f00c";
3365 font-family: "FontAwesome";
3366 font-size: 72px;
3367 line-height: 1;
3368 -webkit-font-smoothing: antialiased;
3369 -moz-osx-font-smoothing: grayscale;
3370 position: absolute;
3371 top: -20px; left: 0; right: 0; bottom: -20px;
3372 transform: translateY(20px);
3373 transition: all 0.2s ease-in-out;
3374 opacity: 0;
3375 background: rgba(255,255,255,0.15);
3376 pointer-events: none;
3377 }
3378 }
3379 @media screen and (min-width: 980px){
3380 &:hover i:before{
3381 transform: translateY(0);
3382 opacity: 0.8;
3383 }
3384 }
3385 }
3386
3387 span {
3388 .hidethumbs(@xf-xenfocus_pickerNumber + 1);
3389 .hidethumbs(@xf-xenfocus_pickerNumber + 2);
3390 .hidethumbs(@xf-xenfocus_pickerNumber + 3);
3391 .hidethumbs(@xf-xenfocus_pickerNumber + 4);
3392 }
3393 .hidethumbs(@i) {
3394 &:nth-of-type(@{i}) {
3395 display: none;
3396 }
3397 }
3398
3399 // Apply border to selected thumbnail
3400 html[data-focus-bg="1"] & [data-focus-bg="1"]:after,
3401 html[data-focus-bg="2"] & [data-focus-bg="2"]:after,
3402 html[data-focus-bg="3"] & [data-focus-bg="3"]:after,
3403 html[data-focus-bg="4"] & [data-focus-bg="4"]:after,
3404 html[data-focus-bg="5"] & [data-focus-bg="5"]:after,
3405 html[data-focus-bg="6"] & [data-focus-bg="6"]:after{
3406 border-width: 5px;
3407 border-color: fade(@xf-textColor, 35%);
3408 box-shadow: none;
3409 }
3410}
3411
3412.focus-background-1(){
3413 <xf:if is="property('xenfocus_bg1_hex')">
3414 background-color: @xf-xenfocus_bg1_hex;
3415 </xf:if>
3416 <xf:if is="property('xenfocus_bg1_image')">
3417 background-image: url(@xf-xenfocus_bg1_image);
3418 </xf:if>
3419 <xf:if is="property('xenfocus_bg1_size')">
3420 background-size: @xf-xenfocus_bg1_size;
3421 </xf:if>
3422 <xf:if is="property('xenfocus_bg1_position')">
3423 background-position: @xf-xenfocus_bg1_position;
3424 </xf:if>
3425 background-repeat: @xf-xenfocus_bg1_repeat;
3426 background-attachment: @xf-xenfocus_bg1_attachment;
3427}
3428
3429.focus-background-2(){
3430 <xf:if is="property('xenfocus_bg2_hex')">
3431 background-color: @xf-xenfocus_bg2_hex;
3432 </xf:if>
3433 <xf:if is="property('xenfocus_bg2_image')">
3434 background-image: url(@xf-xenfocus_bg2_image);
3435 </xf:if>
3436 <xf:if is="property('xenfocus_bg2_size')">
3437 background-size: @xf-xenfocus_bg2_size;
3438 </xf:if>
3439 <xf:if is="property('xenfocus_bg2_position')">
3440 background-position: @xf-xenfocus_bg2_position;
3441 </xf:if>
3442 background-repeat: @xf-xenfocus_bg2_repeat;
3443 background-attachment: @xf-xenfocus_bg2_attachment;
3444}
3445
3446.focus-background-3(){
3447 <xf:if is="property('xenfocus_bg3_hex')">
3448 background-color: @xf-xenfocus_bg3_hex;
3449 </xf:if>
3450 <xf:if is="property('xenfocus_bg3_image')">
3451 background-image: url(@xf-xenfocus_bg3_image);
3452 </xf:if>
3453 <xf:if is="property('xenfocus_bg3_size')">
3454 background-size: @xf-xenfocus_bg3_size;
3455 </xf:if>
3456 <xf:if is="property('xenfocus_bg3_position')">
3457 background-position: @xf-xenfocus_bg3_position;
3458 </xf:if>
3459 background-repeat: @xf-xenfocus_bg3_repeat;
3460 background-attachment: @xf-xenfocus_bg3_attachment;
3461}
3462
3463.focus-background-4(){
3464 <xf:if is="property('xenfocus_bg4_hex')">
3465 background-color: @xf-xenfocus_bg4_hex;
3466 </xf:if>
3467 <xf:if is="property('xenfocus_bg4_image')">
3468 background-image: url(@xf-xenfocus_bg4_image);
3469 </xf:if>
3470 <xf:if is="property('xenfocus_bg4_size')">
3471 background-size: @xf-xenfocus_bg4_size;
3472 </xf:if>
3473 <xf:if is="property('xenfocus_bg4_position')">
3474 background-position: @xf-xenfocus_bg4_position;
3475 </xf:if>
3476 background-repeat: @xf-xenfocus_bg4_repeat;
3477 background-attachment: @xf-xenfocus_bg4_attachment;
3478}
3479
3480.focus-background-5(){
3481 <xf:if is="property('xenfocus_bg5_hex')">
3482 background-color: @xf-xenfocus_bg5_hex;
3483 </xf:if>
3484 <xf:if is="property('xenfocus_bg5_image')">
3485 background-image: url(@xf-xenfocus_bg5_image);
3486 </xf:if>
3487 <xf:if is="property('xenfocus_bg5_size')">
3488 background-size: @xf-xenfocus_bg5_size;
3489 </xf:if>
3490 <xf:if is="property('xenfocus_bg5_position')">
3491 background-position: @xf-xenfocus_bg5_position;
3492 </xf:if>
3493 background-repeat: @xf-xenfocus_bg5_repeat;
3494 background-attachment: @xf-xenfocus_bg5_attachment;
3495}
3496
3497.focus-background-6(){
3498 <xf:if is="property('xenfocus_bg6_hex')">
3499 background-color: @xf-xenfocus_bg6_hex;
3500 </xf:if>
3501 <xf:if is="property('xenfocus_bg6_image')">
3502 background-image: url(@xf-xenfocus_bg6_image);
3503 </xf:if>
3504 <xf:if is="property('xenfocus_bg6_size')">
3505 background-size: @xf-xenfocus_bg6_size;
3506 </xf:if>
3507 <xf:if is="property('xenfocus_bg6_position')">
3508 background-position: @xf-xenfocus_bg6_position;
3509 </xf:if>
3510 background-repeat: @xf-xenfocus_bg6_repeat;
3511 background-attachment: @xf-xenfocus_bg6_attachment;
3512}
3513
3514.focus-picker [data-focus-bg='1']{
3515 .focus-background-1();
3516}
3517
3518.focus-picker [data-focus-bg='2']{
3519 .focus-background-2();
3520}
3521
3522.focus-picker [data-focus-bg='3']{
3523 .focus-background-3();
3524}
3525
3526.focus-picker [data-focus-bg='4']{
3527 .focus-background-4();
3528}
3529
3530.focus-picker [data-focus-bg='5']{
3531 .focus-background-5();
3532}
3533
3534.focus-picker [data-focus-bg='6']{
3535 .focus-background-6();
3536}
3537
3538// Make sure thumbnail images aren't fixed
3539.focus-picker span[data-focus-bg]{
3540 background-attachment: scroll;
3541}
3542
3543
3544
3545
3546/*
3547 ----------------
3548 - Content wrapper
3549 ----------------
3550*/
3551
3552// Wrap all content
3553.focus-wrapper(){}
3554
3555.focus-wrapper{
3556 flex: 1 1 auto;
3557 display: flex;
3558 flex-direction: column;
3559
3560 .focus-wrapper();
3561
3562 @media (max-width: @xf-responsiveMedium){
3563 border: 0;
3564 border-radius: 0;
3565 }
3566
3567 > *{
3568 flex: 0 0 auto;
3569 }
3570}
3571
3572.focus-content(){}
3573.focus-content{
3574 flex-grow: 1;
3575 display: flex;
3576 flex-direction: column;
3577 position: relative;
3578
3579 // If the content is wrapped, a margin is presumably required
3580 <xf:if is="property('xenfocus_wrapperStyles--background-color')">
3581 @media (min-width: (@xf-responsiveMedium + 1px)){
3582 .focus-width &{
3583 margin-bottom: 10px;
3584 }
3585 }
3586 </xf:if>
3587
3588 .focus-content();
3589
3590 @media (max-width: @xf-responsiveMedium){
3591 border-radius: 0;
3592 }
3593}
3594
3595.p-body-inner{
3596 padding-bottom: ((@xf-elementSpacer) / 2);
3597 @media (min-width: (@xf-responsiveMedium + 1px)){
3598 padding-left: 0;
3599 padding-right: 0;
3600 }
3601 <xf:if is="property('xenfocus_wrapperStyles--background-color')">
3602 @media (min-width: (@xf-responsiveMedium + 1px)){
3603 .focus-width &{
3604 padding-left: ((@xf-elementSpacer) / 2);
3605 padding-right: ((@xf-elementSpacer) / 2);
3606 }
3607 }
3608 </xf:if>
3609}
3610
3611// Inherit border-radius on child elements, just because..
3612.p-body, .p-body-inner{ border-radius: inherit; }
3613
3614
3615
3616/*
3617 ----------------
3618 - Nodes
3619 ----------------
3620*/
3621
3622@node-alt-stats: true;
3623@node-zebra: true;
3624@node-zebra-color: xf-intensify(@xf-contentBg, 2%);
3625@subforum-width: 150px;
3626
3627// Make subforum icons inherit link colour when they're displayed in a list
3628.subNodeLink::before,
3629.subNodeLink.subNodeLink--unread::before{
3630 text-shadow: none;
3631 color: inherit;
3632}
3633
3634// Subforum grid
3635@supports (display: grid){
3636 .node-subNodeFlatList{
3637 display: grid;
3638 grid-gap: 10px;
3639 grid-template-columns: repeat(auto-fill, minmax(@subforum-width, 1fr));
3640
3641 &:before,
3642 &:after{
3643 display: none;
3644 }
3645
3646 a{
3647 display: block;
3648 overflow: hidden;
3649 text-overflow: ellipsis;
3650 white-space: nowrap;
3651 }
3652 }
3653}
3654
3655// Add spacer between stats on smaller screens, when not using grid
3656@media (max-width: 1000px){
3657
3658 html:not(.focus-grid){
3659
3660 .node-statsMeta dl:not(:last-child):after{
3661 content: '/';
3662 margin: 0 10px;
3663 opacity: 0.2;
3664 }
3665
3666 }
3667}
3668
3669.node-title{
3670 font-size: (@xf-fontSizeNormal+1);
3671}
3672
3673.node-bold-title(@debug) when (@debug = true) {
3674
3675 .node-title a{
3676 font-weight: bold;
3677 }
3678
3679}
3680.node-bold-title(@node-bold-title);
3681
3682// Bold topic title
3683.node-extra-title{
3684 font-weight: 600;
3685}
3686
3687
3688// Bold topic title when unread
3689.node--unread .node-extra-title{
3690 font-weight: 600;
3691}
3692
3693// Inherit colour for latest username
3694.node-extra-user a{
3695 color: inherit;
3696}
3697
3698// Add small margin between last topic title and username
3699@media (min-width: (@xf-responsiveMedium + 1px)){
3700 .node-extra-row + .node-extra-row{
3701 margin-top: 3px;
3702 }
3703}
3704
3705@media (max-width: @xf-responsiveMedium){
3706 .node-extra-row:not(:last-child){
3707 margin-right: 4px;
3708 }
3709}
3710
3711// Larger topic and post stats
3712.node-alt-stats(@debug) when (@debug = true) {
3713
3714 .node-stats .pairs{
3715 display: flex;
3716 flex-direction: column;
3717
3718 dd{
3719 font-size: 16px;
3720 line-height: 1.2;
3721 }
3722 dt{
3723 order: 2;
3724 }
3725 }
3726
3727}
3728.node-alt-stats(@node-alt-stats);
3729
3730
3731<xf:if is="property('xenfocus_zebra')">
3732 .block-body > .node:nth-of-type(even),
3733 .structItemContainer-group > .structItem--thread:not(.is-highlighted):not(.is-moderated):not(.is-mod-selected):nth-of-type(even){
3734 background-color: @node-zebra-color;
3735 }
3736</xf:if>
3737
3738// Round off last topic to prevent square corner. Visible when zebra striping is enabled.
3739.structItem:last-child{
3740 border-bottom-left-radius: @xf-blockBorderRadius;
3741 border-bottom-right-radius: @xf-blockBorderRadius;
3742}
3743
3744
3745
3746
3747/*
3748 ----------------
3749 - Node cell spacing
3750 ----------------
3751*/
3752
3753html:not(.focus-grid){
3754
3755 .node-body{
3756 padding: @node-extra-padding;
3757 }
3758
3759 .node-icon{
3760 padding-right: @node-extra-padding;
3761 }
3762
3763}
3764
3765
3766/*
3767 ----------------
3768 - Node icons
3769 ----------------
3770*/
3771
3772<xf:if is="property('xenfocus_iconRead--color')">
3773@node-icon-read-color: @xf-xenfocus_iconRead--color;
3774<xf:elseif is="property('xenfocus_iconStyles--color')" />
3775@node-icon-read-color: @xf-xenfocus_iconStyles--color;
3776<xf:else />
3777@node-icon-read-color: inherit;
3778</xf:if>
3779
3780<xf:if is="property('xenfocus_iconRead--background-color')">
3781@node-icon-read-background: @xf-xenfocus_iconRead--background-color;
3782<xf:else />
3783@node-icon-read-background: transparent;
3784</xf:if>
3785
3786<xf:if is="property('xenfocus_iconStyles--color')">
3787@node-icon-unread-color: @xf-xenfocus_iconStyles--color;
3788<xf:else />
3789@node-icon-unread-color: inherit;
3790</xf:if>
3791
3792<xf:if is="property('xenfocus_iconStyles--background-color')">
3793@node-icon-unread-background: @xf-xenfocus_iconStyles--background-color;
3794<xf:else />
3795@node-icon-unread-background: transparent;
3796</xf:if>
3797
3798.node-icon{
3799 width: @xf-xenfocus_iconWidth*1px;
3800 box-sizing: content-box;
3801
3802 & i{
3803 <xf:if is="property('xenfocus_iconStyles--border-radius')">
3804 border-radius: @xf-xenfocus_iconStyles--border-radius*1px;
3805 </xf:if>
3806 line-height: 1;
3807 height: @xf-xenfocus_iconHeight*1px;
3808 font-size: @xf-xenfocus_iconSize*1px;
3809 width: @xf-xenfocus_iconWidth*1px;
3810 display: flex;
3811 align-items: center;
3812 justify-content: center;
3813 color: @node-icon-read-color;
3814 background-color: @node-icon-read-background;
3815 @xf-xenfocus_iconStyles--extra;
3816
3817 .node--unread &,
3818 html[data-logged-in="false"] .node--read &{
3819 color: @node-icon-unread-color;
3820 background-color: @node-icon-unread-background;
3821 @xf-xenfocus_iconUnread--extra;
3822 }
3823
3824 html[data-logged-in="true"] .node--read &{
3825 @xf-xenfocus_iconRead--extra;
3826 }
3827
3828 // If the "no new content" styles are blank, create a grayscale and faint version
3829 <xf:if is="!property('xenfocus_iconRead--color') AND !property('xenfocus_iconRead--background-color') AND !property('xenfocus_iconStyles--background-image')">
3830 html[data-logged-in="true"] .node--read &,
3831 .node--link &,
3832 .node--page &{
3833 color: @node-icon-unread-color;
3834 background-color: @node-icon-unread-background;
3835 filter: @node-icon-read-filter;
3836 opacity: @node-icon-read-opacity;
3837 }
3838 </xf:if>
3839
3840 .p-body &:before{
3841 text-shadow: inherit;
3842 color: inherit;
3843 display: block;
3844 text-align: center;
3845 width: auto;
3846 line-height: inherit;
3847 }
3848
3849
3850 // Assign FontAwesome icon to nodes
3851 &::before{
3852
3853 <xf:if is="property('xenfocus_iconFA')">
3854 .node--forum &,
3855 .node--category &{
3856 content: '\@xf-xenfocus_iconFA';
3857 }
3858 </xf:if>
3859
3860 <xf:if is="property('xenfocus_iconFAold')">
3861 html[data-logged-in="true"] .node--read &{
3862 content: '\@xf-xenfocus_iconFAold';
3863 }
3864 </xf:if>
3865
3866 }
3867 }
3868
3869 // On mobiles..
3870 <xf:if is="property('xenfocus_iconMobile')">
3871 @media (max-width: @xf-responsiveNarrow){
3872
3873 width: @xf-xenfocus_iconWidth*@xf-xenfocus_iconMobile*1px;
3874
3875 & i{
3876 transform: scale(@xf-xenfocus_iconMobile);
3877 transform-origin: 0 50%;
3878 }
3879
3880 }
3881 </xf:if>
3882}
3883
3884
3885// If an image is uploaded, apply it and remove potential other styles
3886<xf:if is="property('xenfocus_iconStyles--background-image')">
3887#XF{
3888
3889 .node-icon i{
3890 background: @xf-xenfocus_iconStyles--background-image no-repeat 50% 50%;
3891 background-size: contain;
3892 border-radius: 0;
3893 box-shadow: none;
3894
3895 &:before{
3896 display: none;
3897 }
3898 }
3899
3900 html[data-logged-in='true']& .node--read .node-icon i{
3901 <xf:if is="property('xenfocus_iconRead--background-image')">
3902 background-image: @xf-xenfocus_iconRead--background-image;
3903 <xf:else />
3904 filter: @node-icon-read-filter;
3905 opacity: @node-icon-read-opacity;
3906 </xf:if>
3907 }
3908
3909}
3910</xf:if>
3911
3912
3913/*
3914 ----------------
3915 - Node NEW badge
3916 ----------------
3917*/
3918
3919.node--unread .node-title:before{
3920 display: none;
3921}
3922
3923.new-badge(@debug) when (@debug = true) {
3924
3925 .node-title a{
3926 vertical-align: middle;
3927 }
3928
3929 .node--unread .node-title:before{
3930 content: 'NEW';
3931 color: @new-badge-color;
3932 background: @new-badge-background;
3933 display: inline-block;
3934 font-size: 9px;
3935 line-height: 2;
3936 border-radius: 3px;
3937 padding: 0 4px;
3938 margin-right: 4px;
3939 vertical-align: middle;
3940 }
3941
3942}
3943.new-badge(@new-badge);
3944
3945
3946/*
3947 ----------------
3948 - Minimal nodes and topic lists, with hover
3949 ----------------
3950*/
3951
3952// Minimal layout with hover rows
3953@nodeHover-padding: 0px;
3954@nodeHover-opacity: 0.06;
3955@nodeHover-background: @xf-linkColor;
3956
3957@media (min-width: (@xf-responsiveMedium + 1px)){
3958
3959 html:not(.focus-grid) body[data-template="forum_list"] .p-body-pageContent{
3960
3961
3962 // Increase padding of index boxes
3963 <xf:if is="property('xenfocus_tableLayout') == 'minimal'">
3964 .block-body{
3965 padding: @nodeHover-padding;
3966 }
3967 </xf:if>
3968
3969
3970 .node{
3971 <xf:if is="property('xenfocus_tableLayout') == 'minimal'">
3972 border-radius: @xf-blockBorderRadius;
3973 border: 0;
3974 </xf:if>
3975 <xf:if is="property('xenfocus_tableLayout') != 'standard'">
3976 position: relative;
3977
3978 &:before{
3979 content: '';
3980 position: absolute;
3981 top: 0; left: 0; right: 0; bottom: 0;
3982 border-radius: inherit;
3983 background: @nodeHover-background;
3984 opacity: 0;
3985 }
3986
3987 &:hover:before{
3988 opacity: @nodeHover-opacity;
3989 }
3990 </xf:if>
3991 }
3992
3993 <xf:if is="property('xenfocus_tableLayout') != 'standard'">
3994 .node-body{
3995 position: relative;
3996 }
3997
3998 <xf:if is="property('nodeListDescriptionDisplay') != 'tooltip'">
3999 // Clickable rows
4000 .node-main,
4001 .node-description a,
4002 .node-subNodeFlatList a{
4003 position: relative;
4004 }
4005
4006 .node-title a:after{
4007 content: '';
4008 top: -@node-extra-padding; left: 0; right: 0; bottom: -@node-extra-padding;
4009 position: absolute;
4010 }
4011 </xf:if>
4012 </xf:if>
4013
4014 }
4015
4016
4017
4018 <xf:if is="property('xenfocus_tableLayout') == 'minimal'">
4019 html .structItemContainer-group--sticky{
4020 &::before,
4021 &::after{
4022 margin: @nodeHover-padding -@nodeHover-padding;
4023 border-width: 1px 0;
4024 }
4025
4026 &::before{
4027 margin-top: -@nodeHover-padding;
4028 }
4029 &::after{
4030 margin-bottom: -@nodeHover-padding;
4031 }
4032 }
4033 </xf:if>
4034
4035 <xf:if is="property('xenfocus_tableLayout') != 'standard'">
4036
4037 <xf:if is="property('xenfocus_tableLayout') == 'minimal'">
4038 .structItemContainer-group,
4039 form.structItem{
4040 padding: 10px;
4041 }
4042 </xf:if>
4043
4044 .structItem{
4045 <xf:if is="property('xenfocus_tableLayout') == 'minimal'">
4046 border-width: 0;
4047 border-radius: @xf-blockBorderRadius;
4048 </xf:if>
4049 display: flex;
4050 align-items: center;
4051 position: relative;
4052
4053 > *{
4054 flex: 0 0 auto;
4055 position: relative;
4056 }
4057
4058 .structItem-cell--main,
4059 .structItem-cell--newThread{
4060 flex: 1 1 auto;
4061 }
4062
4063 .structItemContainer-group &{
4064
4065 &:before{
4066 content: '';
4067 position: absolute;
4068 top: 0; left: 0; right: 0; bottom: 0;
4069 border-radius: inherit;
4070 background: @nodeHover-background;
4071 opacity: 0;
4072 }
4073
4074 &:hover:before{
4075 opacity: @nodeHover-opacity;
4076 }
4077 }
4078 }
4079 </xf:if>
4080}
4081
4082
4083
4084/*
4085 ----------------
4086 - Guest message
4087 ----------------
4088*/
4089
4090.xenfocus_guestStyle(){};
4091.xenfocus_guestInternalStyle(){};
4092.xenfocus_guestWallpaper(){};
4093
4094.focus-guest{
4095 border-radius: @xf-borderRadiusMedium;
4096 margin-bottom: 10px;
4097 padding: 5px;
4098 padding-bottom: 0;
4099 // Hide message on certain pages
4100 .template-login &,
4101 .template-register_form &{
4102 display: none;
4103 }
4104
4105 a{
4106 color: inherit;
4107 }
4108
4109 .focus-guest-content{
4110 padding: 15px 10px;
4111 flex: 1 1 auto;
4112
4113 p{
4114 margin: 0.6em 0;
4115 }
4116
4117 & p:first-child{
4118 margin-top: 0;
4119 }
4120
4121 & p:last-child{
4122 margin-bottom: 0;
4123 }
4124 }
4125
4126 .focus-guest-buttons{
4127 flex: 0 0 auto;
4128 display: flex;
4129 align-items: center;
4130 justify-content: center;
4131 list-style: none;
4132 font-size: @xf-fontSizeNormal;
4133 font-weight: bold;
4134 text-transform: uppercase;
4135 margin: 0;
4136 padding: 0;
4137
4138 li{
4139 flex: 0 0 auto;
4140 padding: 0;
4141 margin: 0 4px;
4142 }
4143
4144 a{
4145 display: flex;
4146 align-items: center;
4147 text-decoration: none;
4148 border-radius: 3px;
4149 position: relative;
4150
4151 &:active{
4152 top: 1px;
4153 }
4154
4155 &:before{
4156 content: '\f067';
4157 font-family: "FontAwesome";
4158 text-rendering: auto;
4159 -webkit-font-smoothing: antialiased;
4160 -moz-osx-font-smoothing: grayscale;
4161 font-size: 14px;
4162 border-radius: inherit;
4163 border-top-right-radius: 0;
4164 border-bottom-right-radius: 0;
4165 }
4166
4167 &[href$="login/"]:before{
4168 content: '\f084';
4169 }
4170
4171 &:after{
4172 content: '';
4173 position: absolute;
4174 top: 0;
4175 right: 0;
4176 bottom: 0;
4177 left: 0;
4178 pointer-events: none;
4179 border-radius: inherit;
4180 }
4181 }
4182 }
4183
4184
4185 &.focus-guest-alert{
4186
4187 .xf-xenfocus_guestStyle();
4188 <xf:if is="property('xenfocus_guestStyle--background-color')">
4189 border: 1px solid xf-intensify(@xf-xenfocus_guestStyle--background-color, 20%);
4190 border-bottom-color: xf-intensify(@xf-xenfocus_guestStyle--background-color, 30%);
4191 </xf:if>
4192 .xenfocus_guestStyle();
4193
4194 .focus-guest-header{
4195 .xf-xenfocus_guestInternalStyle();
4196 <xf:if is="property('xenfocus_guestInternalStyle--background-color')">
4197 background-image: linear-gradient(to top, lighten(@xf-xenfocus_guestInternalStyle--background-color, 7%) 0%, @xf-xenfocus_guestInternalStyle--background-color 100%);
4198 box-shadow: inset xf-intensify(@xf-xenfocus_guestInternalStyle--background-color, 20%) 0px 1px 4px;
4199 </xf:if>
4200 border-radius: inherit;
4201 padding: 14px;
4202 .xenfocus_guestInternalStyle();
4203 }
4204
4205 .focus-guest-align{
4206 display: flex;
4207 align-items: center;
4208
4209 @media (max-width: @xf-responsiveMedium){
4210 display: block;
4211 }
4212 }
4213
4214 .focus-guest-buttons{
4215 line-height: 34px;
4216 padding: 10px;
4217
4218 a{
4219 background-color: xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color);
4220 color: xf-default(@xf-xenfocus_guestInternalStyle--color, @xf-buttonDefault--color);
4221 border: 1px solid desaturate(darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 15%), 15%);
4222
4223 &:hover{
4224 background-color: darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 5%);
4225 }
4226
4227 &:before{
4228 padding: 0 7px;
4229 background: rgba(255,255,255,0.15);
4230 border-right: 1px solid fade(desaturate(darken(xf-default(@xf-xenfocus_guestInternalStyle--background-color, @xf-buttonDefault--background-color), 15%), 15%), 80%);
4231 }
4232
4233 &:after{
4234 background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
4235 box-shadow: inset rgba(255,255,255,0.13) 0px 1px 0px;
4236 }
4237
4238 span{
4239 padding: 0 12px;
4240 }
4241 }
4242 }
4243 }
4244
4245
4246 &.focus-guest-wallpaper{
4247 position: relative;
4248
4249 <xf:if is="property('xenfocus_guestWallpaper--background-image') AND property('xenfocus_guestWallpaperOpacity')">
4250 &:before{
4251 background-color: inherit;
4252 content: '';
4253 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
4254 border-radius: inherit;
4255 opacity: @xf-xenfocus_guestWallpaperOpacity;
4256 }
4257
4258 > *{
4259 position: relative;
4260 }
4261 </xf:if>
4262
4263 .xf-xenfocus_guestWallpaper();
4264 <xf:if is="property('xenfocus_guestWallpaper--background-color')">
4265 box-shadow: inset fade(xf-intensify(@xf-xenfocus_guestWallpaper--background-color, 40%), 15%) 0px 0px 0px 1px;
4266 </xf:if>
4267 background-size: cover;
4268 background-position: 50% 50%;
4269 padding: 40px 20px;
4270 text-align: center;
4271 font-size: @xf-fontSizeLarge;
4272 .xenfocus_guestWallpaper();
4273
4274 .focus-guest-header{
4275 font-size: @xf-fontSizeLargest;
4276 font-weight: bold;
4277 line-height: 1;
4278 }
4279
4280 .focus-guest-content{
4281 padding: 30px 0;
4282 }
4283
4284 .focus-guest-buttons{
4285 line-height: 38px;
4286 font-size: @xf-fontSizeSmaller;
4287
4288 li:first-child{
4289 order: 1;
4290 }
4291
4292 a{
4293 border: 2px solid currentcolor;
4294 <xf:if is="property('xenfocus_guestWallpaper--color')">
4295 border-color: fade(@xf-xenfocus_guestWallpaper--color, 70%);
4296 </xf:if>
4297 border-radius: 3px;
4298 padding: 0 12px;
4299 transition: all 0.1s linear;
4300
4301 &:hover{
4302 border-color: currentcolor;
4303 <xf:if is="property('xenfocus_guestWallpaper--color')">
4304 background: fade(@xf-xenfocus_guestWallpaper--color, 10%);
4305 </xf:if>
4306 }
4307
4308 &[href$="register/"]{
4309 <xf:if is="property('xenfocus_guestWallpaper--color')">
4310 background: @xf-xenfocus_guestWallpaper--color;
4311 border-color: transparent;
4312 <xf:if is="property('xenfocus_guestWallpaper--background-color')">
4313 color: @xf-xenfocus_guestWallpaper--background-color;
4314 </xf:if>
4315 </xf:if>
4316
4317 &:hover{
4318 <xf:if is="property('xenfocus_guestWallpaper--color')">
4319 background: lighten(@xf-xenfocus_guestWallpaper--color, 10%);
4320 </xf:if>
4321 }
4322 }
4323
4324 span{
4325 padding-left: 7px;
4326 }
4327 }
4328 }
4329 }
4330
4331}
4332
4333
4334/*
4335 ----------------
4336 - Footer
4337 ----------------
4338*/
4339
4340// Footer
4341.p-footer{
4342
4343 > :first-child{
4344 border-top-left-radius: inherit;
4345 border-top-right-radius: inherit;
4346 }
4347
4348 > :last-child{
4349 border-bottom-left-radius: inherit;
4350 border-bottom-right-radius: inherit;
4351 }
4352
4353 @media (max-width: @xf-responsiveEdgeSpacerRemoval){
4354 border-radius: 0;
4355 }
4356
4357}
4358
4359.p-footer-inner{
4360 padding: 15px;
4361}
4362
4363 .p-footer-linkList > li a{
4364 padding: 6px;
4365 border-radius: 3px;
4366 display: inline-block;
4367 }
4368
4369 .p-footer-row-main,
4370 .p-footer-row-opposite{
4371 margin-bottom: 0;
4372 }
4373
4374// Remove the default negative margins
4375.p-footer-row{ margin-bottom: 0; }
4376.p-footer-copyright{
4377 margin-top: 10px;
4378}
4379
4380.xenfocus\3A branding{
4381 white-space: nowrap;
4382
4383 &:not(:first-child)::before,
4384 &:not(:last-child)::after{
4385 content: ' // ';
4386 opacity: 0.35;
4387 margin: 0 8px;
4388 }
4389 a{
4390 color: inherit;
4391 }
4392}
4393
4394
4395/*
4396 ----------------
4397 - Mega footer
4398 ----------------
4399*/
4400
4401.focus-footer{
4402 padding: 15px;
4403 border-bottom: 1px solid fade(@xf-publicFooter--color, 10%);
4404
4405 .focus-footer-col{
4406 flex: 0 0 auto;
4407 padding: 10px;
4408 width: 100%;
4409
4410 @media (min-width: 926px){
4411
4412 &:nth-child(1):nth-last-of-type(4),
4413 &:nth-child(2):nth-last-of-type(3),
4414 &:nth-child(3):nth-last-of-type(2),
4415 &:nth-child(4):nth-last-of-type(1){
4416 width: 25%;
4417 }
4418
4419 &:nth-child(1):nth-last-of-type(3),
4420 &:nth-child(2):nth-last-of-type(2),
4421 &:nth-child(3):nth-last-of-type(1){
4422 width: 33.333%;
4423 }
4424
4425 &:nth-child(1):nth-last-of-type(2),
4426 &:nth-child(2):nth-last-of-type(1){
4427 width: 50%;
4428 }
4429
4430 }
4431
4432 @media (min-width: 500px) and (max-width: 925px){
4433
4434 &:not(:only-child){
4435 width: 50%;
4436 }
4437
4438 }
4439
4440 @media (max-width: 925px){
4441 &:not(:last-of-type){
4442 margin-bottom: 40px;
4443 }
4444 }
4445
4446 }
4447
4448 & h4{
4449 color: fadein(@xf-publicFooter--color, 50%);
4450 display: block;
4451 padding: 0;
4452 margin: 0;
4453 margin-bottom: 20px;
4454 }
4455
4456 & a{
4457 color: inherit;
4458
4459 &:hover{
4460 color: @xf-publicFooterLink--color;
4461 }
4462 }
4463
4464 & h4 + p{
4465 margin-top: 0;
4466 }
4467
4468 & p:last-child{
4469 margin-bottom: 0;
4470 }
4471
4472}
4473
4474.focus-footer-list{
4475 list-style: none;
4476 display: block;
4477 padding: 0;
4478 margin: 0;
4479
4480 & li{
4481 display: block;
4482
4483 &:not(:last-child){
4484 padding-bottom: 5px;
4485 }
4486 }
4487}
4488
4489.focus-footer + .footer-bottom-wrap{
4490 background: @mega-footer-copyright;
4491}
4492
4493
4494/*
4495 ----------------
4496 - Grid layout for nodes
4497 ----------------
4498*/
4499
4500// Hide the grid panel for old browsers, and show it using @supports
4501.focus-editor-panel[data-toggle-class="focus-grid"]{
4502 display: none;
4503}
4504
4505@supports (display: grid){
4506
4507 .focus-editor-panel[data-toggle-class="focus-grid"]{
4508 display: flex;
4509 }
4510
4511 .focus-grid{
4512
4513 .block--category{
4514
4515 .block-body{
4516 display: grid;
4517 grid-gap: 10px;
4518 grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
4519 padding: 10px;
4520
4521 @media (max-width: 415px){
4522 grid-template-columns: 1fr;
4523 }
4524 }
4525
4526 .node{
4527 border: 0;
4528 }
4529
4530 .node-body{
4531 width: auto;
4532 height: 100%;
4533 display: grid;
4534 grid-template-columns: auto 1fr;
4535 grid-template-rows: 1fr minmax(57px, auto);
4536 grid-template-areas:
4537 "nodeicon nodetitle"
4538 "nodeprelatest nodelatest";
4539 align-items: center;
4540 border-radius: @xf-blockBorderRadius;
4541 position: relative;
4542
4543 &:before{
4544 content: '';
4545 display: block;
4546 align-self: stretch;
4547 grid-column-start: nodeprelatest;
4548 grid-column-end: nodelatest;
4549 grid-row-start: nodeprelatest;
4550 grid-row-end: nodeprelatest;
4551 border-bottom-left-radius: inherit;
4552 border-bottom-right-radius: inherit;
4553 }
4554
4555 &:after{
4556 content: '';
4557 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
4558 pointer-events: none;
4559 border-radius: inherit;
4560 }
4561 }
4562
4563 .node--link .node-body,
4564 .node--page .node-body{
4565 grid-template-rows: 1fr;
4566
4567 &:before{
4568 display: none;
4569 }
4570 }
4571
4572 .node-icon{
4573 grid-area: nodeicon;
4574 padding: 15px 0px 15px 15px;
4575
4576 <xf:if is="!(property('xenfocus_iconStyles--background-color')) AND !(property('xenfocus_iconRead--background-color'))">
4577 i{
4578 color: inherit;
4579 }
4580 </xf:if>
4581 }
4582
4583 .node-main{
4584 grid-area: nodetitle;
4585 padding: 15px;
4586 }
4587
4588 .node-subNodeMenu{
4589 display: block;
4590 margin-top: 5px;
4591 }
4592
4593 .node-extra{
4594 grid-area: nodelatest;
4595 width: auto;
4596 margin: 0;
4597 padding-top: 10px;
4598 padding-bottom: 10px;
4599 position: relative;
4600 display: flex;
4601 align-items: center;
4602 flex-wrap: wrap;
4603
4604 .node-extra-row{
4605 flex: 0 0 auto;
4606 width: 100%;
4607 white-space: normal;
4608 height: @xf-lineHeightDefault*1em;
4609 }
4610
4611 .node-extra-row:first-child{
4612 font-weight: bold;
4613 }
4614
4615 .node-extra-user a{
4616 color: inherit;
4617 }
4618 }
4619
4620 .node-statsMeta{
4621 display: flex;
4622 align-items: center;
4623 font-size: 0.9em;
4624 margin-top: 5px;
4625
4626 dl{
4627 padding: 0;
4628 width: auto;
4629 flex: 0 0 auto;
4630 }
4631
4632 dt{
4633 display: none;
4634 }
4635
4636 dd:before{
4637 content: '\f0e5';
4638 font-family: "FontAwesome";
4639 text-rendering: auto;
4640 -webkit-font-smoothing: antialiased;
4641 -moz-osx-font-smoothing: grayscale;
4642 transform: translate(0,0);
4643 margin-right: 5px;
4644 }
4645
4646 dl:last-child{
4647 opacity: 0.4;
4648 margin-left: 15px;
4649
4650 dd:before{
4651 content: '\f0e6';
4652 }
4653 }
4654 }
4655
4656 .node-stats{
4657 display: none;
4658 }
4659
4660
4661
4662 // Colour scheme: normal or wallpaper
4663 <xf:if is="property('xenfocus_gridWallpaper')">
4664 .node-body{
4665 color: @xf-xenfocus_gridColor;
4666 background-color: @xf-xenfocus_gridBackground;
4667 background-size: cover;
4668 background-position: 50% 50%;
4669
4670 &:before{
4671 background: rgba(0,0,0,0.4);
4672 }
4673
4674 &:after{
4675 <xf:if is="property('styleType') === 'light'">
4676 border: 1px solid rgba(0,0,0,0.2);
4677 <xf:else />
4678 border: 1px solid rgba(255,255,255,0.2);
4679 </xf:if>
4680 }
4681
4682 a, .node-description, .node-extra-row{
4683 color: inherit;
4684 }
4685
4686 .node-description, .node-extra-row:nth-of-type(2){
4687 opacity: 0.7;
4688 }
4689 }
4690 <xf:else />
4691 .block-body{
4692 background: @xf-contentAltBg;
4693 }
4694 .node-body{
4695 .xf-contentBase();
4696 .xf-blockBorder();
4697
4698 &:before{
4699 background: xf-intensify(@xf-contentBg, 1%);
4700 border-top: 1px solid xf-intensify(@xf-contentBg, 10%);
4701 }
4702 }
4703 </xf:if>
4704
4705 }
4706
4707 }
4708}
4709
4710// Assign node wallpapers
4711
4712<xf:if is="property('xenfocus_gridImage') AND property('xenfocus_gridWallpaper')">
4713
4714@wallpapernodes: @xf-xenfocus_gridImage;
4715
4716.node-wallpapers-mixin(@i: length(@wallpapernodes)) when (@i > 0) {
4717
4718 .node-wallpapers-mixin(@i - 1);
4719 @wallpapernode: extract(@wallpapernodes, @i);
4720 .node--id@{wallpapernode} .node-body {
4721 background-image: url('styles/xenfocus/images/node-wallpapers/@{wallpapernode}.jpg');
4722 }
4723}
4724
4725@supports (display: grid){
4726 .focus-grid{
4727 .block--category{
4728 .node-wallpapers-mixin();
4729 }
4730 }
4731}
4732
4733</xf:if>
4734
4735/*
4736 ----------------
4737 - Blocks
4738 ----------------
4739*/
4740
4741.focus-block-container(){}
4742.focus-block-header(){}
4743.focus-block-body(){}
4744.focus-block-container-shift(){};
4745.focus-block-header-shift(){};
4746.focus-block-body-shift(){}
4747.focus-block-minor-header(){}
4748
4749@{block-container}{
4750 .focus-block-container();
4751}
4752
4753@{block-header}{
4754 .focus-block-header();
4755 @media (max-width: @xf-responsiveEdgeSpacerRemoval){
4756 border-radius: 0;
4757 border-left-width: 0;
4758 border-right-width: 0;
4759 }
4760}
4761
4762@{block-body}{
4763 .focus-block-body();
4764}
4765
4766@{block-minor-header}{
4767 .focus-block-minor-header();
4768}
4769
4770// If shadows are added to blocks, remove them from ones which don't need them
4771.blockMessage.blockMessage--none,
4772.block--messages .block-container{
4773 box-shadow: none;
4774}
4775
4776.block-header{
4777 .block-desc{
4778 color: inherit;
4779 opacity: 0.7;
4780 }
4781 .button{
4782 text-shadow: none;
4783 }
4784}
4785
4786// Move block wrap from container to body
4787.block-container-shift(@debug) when (@debug = true) {
4788
4789 .block--category{
4790
4791 .block-container{
4792 border-width: 0;
4793 box-shadow: none;
4794 background: none;
4795 .focus-block-container-shift();
4796 }
4797
4798 // The #XF is required to overwrite the border-radius defined by: .block-container:not(.block-container--noStripRadius) > :first-child
4799 #XF & .block-header{
4800 .focus-block-header-shift();
4801 }
4802
4803 .block-body{
4804 .xf-contentBase();
4805 .xf-blockBorder();
4806 border-radius: @xf-blockBorderRadius !important;
4807 .focus-block-container();
4808 .focus-block-body-shift();
4809 }
4810
4811 @media (max-width: @xf-responsiveEdgeSpacerRemoval){
4812 .block-container,
4813 #XF & .block-header,
4814 .block-body{
4815 border-radius: 0;
4816 border-left-width: 0;
4817 border-right-width: 0;
4818 }
4819 }
4820 }
4821}
4822.block-container-shift(@block-container-shift);
4823
4824.p-body-sidebar .block-row:not(:last-child){
4825 border-bottom: 1px solid @xf-borderColorFaint;
4826}
4827
4828// Inherit border-radius for last forum in each category
4829.block-body > .node:last-child{
4830 border-bottom-left-radius: inherit;
4831 border-bottom-right-radius: inherit;
4832}
4833
4834
4835/*
4836 ----------------
4837 - Mobile navigation panel
4838 ----------------
4839*/
4840
4841.offCanvasMenu--nav
4842{
4843 .offCanvasMenu-content
4844 {
4845 background: @mobile-navigation-background;
4846 color: @mobile-navigation-color;
4847 }
4848
4849 .offCanvasMenu-subList{
4850 background: fade(@mobile-navigation-color, 10%);
4851 }
4852
4853 .offCanvasMenu-linkHolder.is-selected{
4854 color: inherit;
4855 font-weight: bold;
4856 background: fade(@mobile-navigation-color, 15%);
4857 }
4858
4859
4860}
4861
4862
4863/*
4864 ----------------
4865 - Countdown
4866 ----------------
4867*/
4868
4869.focus-timer{
4870 text-align: center;
4871 font-size: 1.2em;
4872 display: flex;
4873 flex-direction: column;
4874 justify-content: center;
4875 min-height: 140px;
4876 border-radius: @xf-blockBorderRadius;
4877
4878 <xf:if is="property('xenfocus_countdownColor')">
4879 color: @xf-xenfocus_countdownColor;
4880 <xf:if is="property('xenfocus_wrapperStyles--background-color')">
4881 @media (min-width: (@xf-responsiveMedium + 1px)){
4882 margin-left: -((@xf-elementSpacer) / 2);
4883 margin-right: -((@xf-elementSpacer) / 2);
4884 }
4885 </xf:if>
4886 <xf:else />
4887 .xf-contentBase();
4888 .xf-blockBorder();
4889 .focus-block-container();
4890 </xf:if>
4891
4892 margin-bottom: 10px;
4893 padding: 15px;
4894
4895 html:not(.focus-countdown) &{
4896 display: none;
4897 }
4898
4899 h3{
4900 margin: 0;
4901 padding: 0;
4902 font-size: 1.3em;
4903 line-height: 1;
4904 font-weight: normal;
4905 }
4906
4907 a{
4908 color: inherit;
4909 text-decoration: underline;
4910 }
4911
4912 > div{
4913 padding-top: 12px;
4914 }
4915
4916 .focus-timer-numbers{
4917 line-height: 1em;
4918 min-height: 1em;
4919 opacity: 0.8;
4920
4921 span{
4922 opacity: 0.6;
4923 }
4924 }
4925
4926 .focus-timer-numbers,
4927 .focus-timer-desc,
4928 .focus-timer-desc-done{
4929 display: none;
4930 }
4931
4932 // Hide text depending on countdown state
4933 &.focus-timer-done .focus-timer-desc-done,
4934 &.focus-timer-counting .focus-timer-desc,
4935 &.focus-timer-counting .focus-timer-numbers{
4936 display: block;
4937 }
4938
4939}
4940
4941
4942
4943/*
4944 ----------------
4945 - Topic List
4946 ----------------
4947*/
4948
4949// Align topic avatar to middle
4950.structItem-cell{
4951 vertical-align: middle;
4952}
4953// Restore top alignment for quick topic form
4954form[data-xf-init*="quick-thread"] .structItem-cell--icon{
4955 vertical-align: top;
4956}
4957
4958// Sync Replies and Views text
4959.structItem-cell--meta .pairs{
4960 font-size: @xf-fontSizeSmaller;
4961}
4962
4963 .structItem-minor dd{
4964 color: @xf-textColor;
4965 }
4966
4967
4968// Align last post to left
4969.structItem-cell.structItem-cell--latest{
4970 text-align: inherit;
4971}
4972
4973
4974// Sticky thread separator
4975.structItemContainer-group--sticky:before,
4976.structItemContainer-group--sticky:after{
4977 <xf:if is="property('xenfocus_sticky')">
4978 display: block;
4979 padding: 9px;
4980 font-size: 10px;
4981 font-weight: bold;
4982 background: @xf-contentAltBg;
4983 text-transform: uppercase;
4984 border: @xf-borderSize solid @xf-borderColorFaint;
4985 border-width: 1px 0 0 0;
4986 <xf:else />
4987 display: none;
4988 </xf:if>
4989}
4990
4991// Make topic start date light in colour
4992.structItem-parts > li:nth-child(2n){
4993 color: inherit;
4994}
4995
4996
4997/*
4998 ----------------
4999 - Topic View
5000 ----------------
5001*/
5002
5003// Sticky author
5004<xf:if is="property('xenfocus_stickyAuthor')">
5005@media (min-width: (@xf-responsiveMedium + 1px)){
5006 .message-user{
5007 position: -webkit-sticky;
5008 position: sticky;
5009 <xf:if is="property('publicNavSticky') === 'primary' OR property('publicNavSticky') === 'all'">
5010 top: @sticky-top * 1px + 10px;
5011 <xf:else />
5012 top: 10px;
5013 </xf:if>
5014 }
5015}
5016</xf:if>
5017
5018
5019// Remove arrow, just because..
5020.message-userArrow{
5021 display: none;
5022}
5023
5024
5025// Remove border from post date for minimalism
5026.message-attribution{
5027 border-width: 0;
5028 padding-bottom: 6px;
5029
5030 @media (min-width: (@xf-responsiveMedium + 1px)){
5031 padding-top: 2px;
5032 }
5033}
5034
5035
5036// Post font-size
5037.message-body{
5038 font-size: @xf-fontSizeNormal + 1px;
5039 // Reduce margins above posts because the line separator no longer exists (configured above)
5040 margin-top: 4px;
5041}
5042
5043
5044// Place like bar above buttons
5045.message-footer{
5046 display: flex;
5047 flex-direction: column;
5048
5049 > *{
5050 flex: 0 0 auto;
5051 width: 100%;
5052 }
5053
5054 .likesBar{ order: -1; }
5055}
5056
5057
5058// Style post buttons
5059@focus-post-button: @xf-buttonDefault--background-color;
5060.focus-post-buttons(@debug) when (@debug = true) {
5061
5062 .actionBar-set{
5063 display: flex;
5064
5065 .actionBar-action{
5066 text-decoration: none;
5067 padding-left: 8px;
5068 padding-right: 8px;
5069 }
5070
5071 &.actionBar-set--external{
5072 margin-right: 0;
5073
5074 .actionBar-action{
5075 background: @focus-post-button;
5076 color: @xf-buttonDefault--color;
5077 border-color: xf-intensify(@focus-post-button, 9%);
5078 .m-transition(background-color);
5079
5080 &:hover{
5081 background-color: xf-intensify(@focus-post-button, 5%);
5082 }
5083
5084 &:before{
5085 margin-right: 7px;
5086 display: inline-block;
5087 }
5088
5089 &.actionBar-action--like:before{
5090 content: '\f164';
5091 }
5092
5093 &.actionBar-action--reply:before{
5094 content: '\f10d';
5095 }
5096 }
5097 }
5098
5099 &.actionBar-set--internal{
5100
5101 a.actionBar-action{
5102 color: @xf-linkColor;
5103 margin: 0;
5104
5105 &:hover{
5106 background-color: fade(@xf-linkColor, 10%);
5107 }
5108 }
5109 }
5110 }
5111}
5112.focus-post-buttons(@focus-post-buttons);
5113
5114
5115// Like bar
5116.likesBar{
5117 border-width: 0;
5118 border-radius: @xf-blockBorderRadius;
5119 background-color: @xf-bbCodeBlock--background-color;
5120
5121 .message &{
5122 padding: 8px 12px;
5123 }
5124}
5125
5126 .likeIcon::before{
5127 color: @xf-textColorDimmed;
5128 }
5129
5130
5131// Reply form
5132.fr-box.fr-basic {
5133 .fr-wrapper {
5134 background: @editor-bg;
5135 }
5136 .fr-element{
5137 color: @editor-text;
5138 }
5139}
5140.fr-element{
5141 font-family: @xf-fontFamilyBody;
5142}
5143
5144
5145<xf:if is="property('styleType') == 'dark'">
5146// Fix webkit browser selection
5147.fr-wrapper ::selection {
5148 background: #fff;
5149}
5150</xf:if>
5151
5152
5153// Swap Preview and Post buttons
5154.message--quickReply .formButtonGroup-primary,
5155body[data-template="forum_post_thread"] .formSubmitRow-controls{
5156 display: flex;
5157 align-items: center;
5158
5159 .button--primary{
5160 order: 1;
5161 margin-left: 5px;
5162 }
5163}
5164
5165
5166// Bold primary buttons
5167.button.button--cta,
5168.button--primary{
5169 font-weight: bold;
5170}
5171
5172
5173// Post reply icon
5174.button.button--icon--reply > .button-text::before,
5175a.button.button--icon--reply > .button-text::before{
5176 content: "\f0fe";
5177}
5178
5179
5180// Polls
5181.pollResult-bar{
5182 background: fade(@xf-progressBarColor, 20%);
5183 border-radius: @xf-borderRadiusMedium;
5184
5185 &::after{
5186 content: '';
5187 position: absolute;
5188 top: 0; left: 0; right: 0; bottom: 0;
5189 border-radius: inherit;
5190 border: 1px solid fade(xf-intensify(@xf-progressBarColor, 30%), 10%);
5191 pointer-events: none;
5192 }
5193}
5194
5195.pollResult.pollResult--showVoters:hover{
5196 background: @xf-contentAltBg;
5197}
5198
5199
5200// Space out username in left column
5201@media (min-width: (@xf-responsiveWide + 1px)){
5202 .message-name{
5203 margin-top: 10px;
5204 }
5205}
5206
5207
5208@media (max-width: @xf-responsiveMedium){
5209 // Align username vertically with avatar on mobiles
5210 .message:not(.message--forceColumns) .message-user{
5211 align-items: center;
5212 }
5213}
5214
5215// Remove margin-top from bbcode boxes if they're the first child
5216.bbCodeBlock:first-child{
5217 margin-top: 0;
5218}
5219
5220
5221
5222/*
5223 ----------------
5224 - Profiles
5225 ----------------
5226*/
5227
5228// Inherit border-radius
5229.memberHeader, .memberHeader-main{
5230 border-top-left-radius: inherit;
5231 border-top-right-radius: inherit;
5232}
5233
5234
5235
5236/*
5237 ----------------
5238 - Sidebar
5239 ----------------
5240*/
5241
5242// Sidebar icons
5243.focus-sidebar-icons(@debug) when (@debug = true) {
5244 .p-body-sidebar{
5245
5246 .block-minorHeader::before{
5247 content: '\f141';
5248 font-family: "FontAwesome";
5249 display: inline-block;
5250 transform: translate(0,0);
5251 font-weight: normal;
5252 text-rendering: auto;
5253 font-size: inherit;
5254 margin-right: 6px;
5255 -webkit-font-smoothing: antialiased;
5256 -moz-osx-font-smoothing: grayscale;
5257 opacity: 0.7;
5258 }
5259
5260 }
5261
5262 .block-minorHeader::before{
5263
5264 [data-widget-definition="members_online"] &{
5265 content: '\f007';
5266 }
5267
5268 [data-widget-section="staffMembers"] &{
5269 content: '\f005';
5270 }
5271
5272 [data-widget-definition="new_profile_posts"] &{
5273 content: '\f086';
5274 }
5275
5276 [data-widget-definition="forum_statistics"] &{
5277 content: '\f080';
5278 }
5279
5280 [data-widget-definition="share_page"] &{
5281 content: '\f1e0';
5282 }
5283
5284 }
5285}
5286.focus-sidebar-icons(@focus-sidebar-icons);
5287
5288/*
5289 ----------------
5290 - Sticky sidebar
5291 ----------------
5292*/
5293
5294.focus-editor-panel[data-toggle-class="focus-sidebar-sticky"]{
5295 display: none;
5296}
5297
5298// Recode sidebar into flex layout
5299@media (min-width: (@xf-responsiveWide + 1px)){
5300 .p-body-main--withSidebar{
5301 display: flex;
5302 align-items: flex-start;
5303
5304 .p-body-content{
5305 flex: 1 1 auto;
5306 // IE fix
5307 display: block;
5308 width: ~"calc(100% - @xf-sidebarWidth)";
5309 }
5310
5311 .p-body-sideNav,
5312 .p-body-sidebar{
5313 flex: 0 0 auto;
5314 // IE fix
5315 display: block;
5316 }
5317
5318 }
5319
5320 // Switch sidebar to left side if enabled
5321 .focus-sidebar-flip .p-body-sidebar{
5322 order: -1;
5323 }
5324
5325 // And adjust padding
5326 .focus-sidebar-flip{
5327 .p-body-main--withSidebar .p-body-content{
5328 padding-right: 0;
5329 padding-left: @xf-elementSpacer;
5330 }
5331 }
5332
5333 // Sticky side blocks
5334 <xf:if is="property('xenfocus_stickyBlocks')">
5335 @supports ((position: sticky) or (position: -webkit-sticky)){
5336 .focus-sidebar-sticky .p-body-sidebar{
5337 position: -webkit-sticky;
5338 position: sticky;
5339 <xf:if is="property('publicNavSticky') === 'primary' OR property('publicNavSticky') === 'all'">
5340 top: @sticky-top * 1px + 10px;
5341 <xf:else />
5342 top: 10px;
5343 </xf:if>
5344 }
5345 .focus-editor-panel[data-toggle-class="focus-sidebar-sticky"]{
5346 display: flex;
5347 }
5348 }
5349 </xf:if>
5350
5351
5352}
5353
5354
5355
5356
5357
5358
5359<xf:if is="property('xenfocus_eventOverlay') === 'snow'">
5360
5361
5362/*
5363 ----------------
5364 - Animated snow
5365 ----------------
5366*/
5367
5368@-webkit-keyframes snow_1 {
5369 0% { transform: translate(-250px, 0); }
5370 100% { transform: translate(250px, 300vh); }
5371}
5372@-webkit-keyframes snow_2 {
5373 0% { transform: translate(0, 0); }
5374 100% { transform: translate(-100px, 300vh); }
5375}
5376@-webkit-keyframes snow_3 {
5377 0% { transform: translate(-50px, 0); }
5378 100% { transform: translate(0, 300vh); }
5379}
5380@keyframes snow_1 {
5381 0% { transform: translate(-250px, 0); }
5382 100% { transform: translate(250px, 300vh); }
5383}
5384@keyframes snow_2 {
5385 0% { transform: translate(0, 0); }
5386 100% { transform: translate(-100px, 300vh); }
5387}
5388@keyframes snow_3 {
5389 0% { transform: translate(-50px, 0); }
5390 100% { transform: translate(0, 300vh); }
5391}
5392
5393.xenfocus-snow{
5394 position: fixed;
5395 top: 0; left: 0;
5396 width: 100%; height: 100%;
5397 overflow: hidden;
5398 z-index: 20;
5399 pointer-events: none;
5400}
5401
5402html:not(.focus-snow) .xenfocus-snow{
5403 display: none;
5404}
5405
5406.xenfocus-snow-panel{
5407 height: 200vh;
5408 margin-top: -200vh;
5409 position: relative;
5410 will-change: transform;
5411}
5412
5413.f-sF{
5414 position: absolute;
5415 background: #fff;
5416 border-radius: 50%;
5417 box-shadow: #000 0px 1px 2px;
5418
5419 &:nth-child(1) {
5420 left: 5%;
5421 top: 5%;
5422 width: 4px;
5423 height: 5px;
5424 }
5425 &:nth-child(2) {
5426 left: 15%;
5427 top: 10%;
5428 width: 6px;
5429 height: 5px;
5430 }
5431 &:nth-child(3) {
5432 left: 23%;
5433 top: 40%;
5434 width: 2px;
5435 height: 5px;
5436 }
5437 &:nth-child(4) {
5438 left: 36%;
5439 top: 15%;
5440 width: 3px;
5441 height: 3px;
5442 }
5443 &:nth-child(5) {
5444 left: 47%;
5445 top: 70%;
5446 width: 2px;
5447 height: 5px;
5448 }
5449 &:nth-child(6) {
5450 left: 53%;
5451 top: 50%;
5452 width: 1px;
5453 height: 2px;
5454 }
5455 &:nth-child(7) {
5456 left: 61%;
5457 top: 90%;
5458 width: 2px;
5459 height: 1px;
5460 }
5461 &:nth-child(8) {
5462 left: 78%;
5463 top: 14%;
5464 width: 6px;
5465 height: 4px;
5466 }
5467 &:nth-child(9) {
5468 left: 85%;
5469 top: 86%;
5470 width: 5px;
5471 height: 1px;
5472 }
5473 &:nth-child(10) {
5474 left: 96%;
5475 top: 59%;
5476 width: 3px;
5477 height: 1px;
5478 }
5479 &:nth-child(11) {
5480 left: 3%;
5481 top: 91%;
5482 width: 4px;
5483 height: 4px;
5484 }
5485 &:nth-child(12) {
5486 left: 18%;
5487 top: 31%;
5488 width: 3px;
5489 height: 3px;
5490 }
5491 &:nth-child(13) {
5492 left: 26%;
5493 top: 52%;
5494 width: 5px;
5495 height: 6px;
5496 }
5497 &:nth-child(14) {
5498 left: 38%;
5499 top: 36%;
5500 width: 5px;
5501 height: 3px;
5502 }
5503 &:nth-child(15) {
5504 left: 43%;
5505 top: 81%;
5506 width: 3px;
5507 height: 2px;
5508 }
5509 &:nth-child(16) {
5510 left: 54%;
5511 top: 11%;
5512 width: 2px;
5513 height: 3px;
5514 }
5515 &:nth-child(17) {
5516 left: 67%;
5517 top: 62%;
5518 width: 4px;
5519 height: 1px;
5520 }
5521 &:nth-child(18) {
5522 left: 76%;
5523 top: 9%;
5524 width: 5px;
5525 height: 5px;
5526 }
5527 &:nth-child(19) {
5528 left: 87%;
5529 top: 2%;
5530 width: 3px;
5531 height: 1px;
5532 }
5533 &:nth-child(20) {
5534 left: 98%;
5535 top: 98%;
5536 width: 4px;
5537 height: 1px;
5538 }
5539 &:nth-child(21) {
5540 left: 7%;
5541 top: 60%;
5542 width: 6px;
5543 height: 5px;
5544 }
5545 &:nth-child(22) {
5546 left: 14%;
5547 top: 45%;
5548 width: 2px;
5549 height: 5px;
5550 }
5551 &:nth-child(23) {
5552 left: 25%;
5553 top: 65%;
5554 width: 1px;
5555 height: 3px;
5556 }
5557 &:nth-child(24) {
5558 left: 36%;
5559 top: 11%;
5560 width: 3px;
5561 height: 4px;
5562 }
5563 &:nth-child(25) {
5564 left: 49%;
5565 top: 24%;
5566 width: 3px;
5567 height: 4px;
5568 }
5569 &:nth-child(26) {
5570 left: 58%;
5571 top: 37%;
5572 width: 2px;
5573 height: 5px;
5574 }
5575 &:nth-child(27) {
5576 left: 69%;
5577 top: 49%;
5578 width: 6px;
5579 height: 6px;
5580 }
5581 &:nth-child(28) {
5582 left: 75%;
5583 top: 55%;
5584 width: 6px;
5585 height: 3px;
5586 }
5587 &:nth-child(29) {
5588 left: 84%;
5589 top: 86%;
5590 width: 5px;
5591 height: 3px;
5592 }
5593 &:nth-child(30) {
5594 left: 94%;
5595 top: 90%;
5596 width: 4px;
5597 height: 1px;
5598 }
5599 &:nth-child(31) {
5600 left: 59%;
5601 top: 61%;
5602 width: 4px;
5603 height: 6px;
5604 }
5605}
5606
5607.xenfocus-snow-panel-1 {
5608 -webkit-animation: snow_1 8s linear infinite;
5609 animation: snow_1 8s linear infinite;
5610}
5611.xenfocus-snow-panel-2 {
5612 -webkit-animation: snow_2 13s 0s linear infinite;
5613 animation: snow_2 13s 0s linear infinite;
5614}
5615.xenfocus-snow-panel-3 {
5616 -webkit-animation: snow_3 16s 6s linear infinite;
5617 animation: snow_3 16s 6s linear infinite;
5618}
5619
5620/* Hide snow on tablets and mobiles */
5621@media screen and (max-width:979px){
5622 .focus-editor-panel[data-toggle-class='focus-snow'],
5623 .xenfocus-snow{
5624 display: none;
5625 }
5626}
5627
5628</xf:if>
5629
5630
5631
5632
5633<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
5634
5635/*
5636 ----------------
5637 - Animated confetti
5638 ----------------
5639*/
5640
5641@-webkit-keyframes confetti_1 {
5642 0% { transform: translate(-250px, 0); }
5643 100% { transform: translate(250px, 300vh); }
5644}
5645@-webkit-keyframes confetti_2 {
5646 0% { transform: translate(0, 0); }
5647 100% { transform: translate(-100px, 300vh); }
5648}
5649@-webkit-keyframes confetti_3 {
5650 0% { transform: translate(-50px, 0); }
5651 100% { transform: translate(0, 300vh); }
5652}
5653@keyframes confetti_1 {
5654 0% { transform: translate(-250px, 0); }
5655 100% { transform: translate(250px, 300vh); }
5656}
5657@keyframes confetti_2 {
5658 0% { transform: translate(0, 0); }
5659 100% { transform: translate(-100px, 300vh); }
5660}
5661@keyframes confetti_3 {
5662 0% { transform: translate(-50px, 0); }
5663 100% { transform: translate(0, 300vh); }
5664}
5665
5666.xenfocus-confetti{
5667 position: fixed;
5668 top: 0; left: 0;
5669 width: 100%; height: 100%;
5670 overflow: hidden;
5671 z-index: 20;
5672 pointer-events: none;
5673}
5674
5675html:not(.focus-confetti) .xenfocus-confetti{
5676 display: none;
5677}
5678
5679.xenfocus-confetti-panel{
5680 height: 200vh;
5681 margin-top: -200vh;
5682 position: relative;
5683 will-change: transform;
5684}
5685
5686.f-con{
5687 position: absolute;
5688 width: 9px;
5689 height: 5px;
5690 border-radius: 2px;
5691
5692 &:nth-child(1) {
5693 left: 5%;
5694 top: 5%;
5695 }
5696 &:nth-child(2) {
5697 left: 15%;
5698 top: 10%;
5699 }
5700 &:nth-child(3) {
5701 left: 23%;
5702 top: 40%;
5703 }
5704 &:nth-child(4) {
5705 left: 36%;
5706 top: 15%;
5707 }
5708 &:nth-child(5) {
5709 left: 47%;
5710 top: 40%;
5711 }
5712 &:nth-child(6) {
5713 left: 53%;
5714 top: 50%;
5715 }
5716 &:nth-child(7) {
5717 left: 61%;
5718 top: 90%;
5719 }
5720 &:nth-child(8) {
5721 left: 78%;
5722 top: 14%;
5723 }
5724 &:nth-child(9) {
5725 left: 85%;
5726 top: 86%;
5727 }
5728 &:nth-child(10) {
5729 left: 96%;
5730 top: 59%;
5731 }
5732 &:nth-child(11) {
5733 left: 3%;
5734 top: 91%;
5735 }
5736 &:nth-child(12) {
5737 left: 18%;
5738 top: 31%;
5739 }
5740 &:nth-child(13) {
5741 left: 26%;
5742 top: 52%;
5743 }
5744 &:nth-child(14) {
5745 left: 38%;
5746 top: 36%;
5747 }
5748 &:nth-child(15) {
5749 left: 43%;
5750 top: 81%;
5751 }
5752 &:nth-child(16) {
5753 left: 54%;
5754 top: 11%;
5755 }
5756 &:nth-child(17) {
5757 left: 67%;
5758 top: 62%;
5759 }
5760 &:nth-child(18) {
5761 left: 76%;
5762 top: 9%;
5763 }
5764 &:nth-child(19) {
5765 left: 87%;
5766 top: 2%;
5767 }
5768 &:nth-child(20) {
5769 left: 98%;
5770 top: 98%;
5771 }
5772 &:nth-child(21) {
5773 left: 7%;
5774 top: 60%;
5775 }
5776 &:nth-child(22) {
5777 left: 14%;
5778 top: 45%;
5779 }
5780 &:nth-child(23) {
5781 left: 25%;
5782 top: 65%;
5783 }
5784 &:nth-child(24) {
5785 left: 36%;
5786 top: 1%;
5787 }
5788 &:nth-child(25) {
5789 left: 49%;
5790 top: 24%;
5791 }
5792 &:nth-child(26) {
5793 left: 58%;
5794 top: 32%;
5795 }
5796 &:nth-child(27) {
5797 left: 69%;
5798 top: 49%;
5799 }
5800 &:nth-child(28) {
5801 left: 75%;
5802 top: 55%;
5803 }
5804 &:nth-child(29) {
5805 left: 84%;
5806 top: 86%;
5807 }
5808 &:nth-child(30) {
5809 left: 94%;
5810 top: 90%;
5811 }
5812 &:nth-child(31) {
5813 left: 59%;
5814 top: 61%;
5815 }
5816}
5817
5818.xenfocus-confetti-panel-1 {
5819 -webkit-animation: confetti_1 8s linear infinite;
5820 animation: confetti_1 8s linear infinite;
5821
5822 .f-con{
5823 background: fade(#e84c4c, 80%);
5824 transform: rotate(30deg);
5825 }
5826}
5827.xenfocus-confetti-panel-2 {
5828 -webkit-animation: confetti_2 13s 0s linear infinite;
5829 animation: confetti_2 13s 0s linear infinite;
5830
5831 .f-con{
5832 background: fade(#5ec745, 80%);
5833 transform: rotate(-10deg);
5834 }
5835}
5836.xenfocus-confetti-panel-3 {
5837 -webkit-animation: confetti_3 16s 6s linear infinite;
5838 animation: confetti_3 16s 6s linear infinite;
5839
5840 .f-con{
5841 background: fade(#3895e5, 80%);
5842 transform: rotate(50deg);
5843 }
5844}
5845
5846/* Hide snow on tablets and mobiles */
5847@media screen and (max-width:979px){
5848 .focus-editor-panel[data-toggle-class='focus-confetti'],
5849 .xenfocus-confetti{
5850 display: none;
5851 }
5852}
5853
5854</xf:if>
5855
5856
5857
5858
5859/*
5860 ----------------
5861 - Holidays
5862 ----------------
5863*/
5864
5865// Valentines
5866<xf:if is="property('xenfocus_holiday') === 'valentines'">
5867
5868@-webkit-keyframes valentines{
5869 0%, 30%, 50%, 60%, 80%, 100% {
5870 transform: scale(1);
5871 }
5872 40% {
5873 transform: scale(1.12);
5874 }
5875 70% {
5876 transform: scale(1.06);
5877 }
5878}
5879
5880@keyframes valentines{
5881 0%, 30%, 50%, 60%, 80%, 100% {
5882 transform: scale(1);
5883 }
5884 40% {
5885 transform: scale(1.12);
5886 }
5887 70% {
5888 transform: scale(1.06);
5889 }
5890}
5891
5892.focus-mini-logo .fa-heart{
5893 color: #FF717E;
5894 -webkit-animation: valentines 2s infinite linear;
5895 animation: valentines 2s infinite linear;
5896}
5897
5898</xf:if>
5899
5900// Halloween
5901<xf:if is="property('xenfocus_holiday') === 'halloween'">
5902
5903@keyframes halloween {
5904 0%,100%{
5905 transform: translateY(-7%);
5906 }
5907 50% {
5908 transform: translateY(7%);
5909 }
5910}
5911
5912.p-header-logo .focus-mini-logo img{
5913 max-height: 60%;
5914 -webkit-animation: halloween 3s infinite linear;
5915 animation: halloween 3s infinite linear;
5916}
5917
5918</xf:if>
5919
5920
5921/*
5922 ----------------
5923 - Other
5924 ----------------
5925*/
5926
5927// Media gallery
5928.itemList-itemOverlay {
5929 height: auto;
5930 bottom: -70px;
5931}
5932
5933// Remove transition from social links
5934.shareButtons-button{
5935 transition: none;
5936}
5937
5938// Scroll buttons
5939.button.button--scroll, a.button.button--scroll {
5940 box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.25);
5941 border-color: transparent;
5942}
5943
5944
5945// Pagination
5946.pageNav-page{
5947
5948 a{
5949 padding-left: 10px;
5950 padding-right: 10px;
5951 }
5952
5953 &.pageNav-page--current
5954 {
5955 background: @pagination-active;
5956 color: contrast(@pagination-active, rgba(0,0,0,0.8), #fff);
5957 border-color: xf-intensify(@pagination-active, 10%);
5958
5959 &:hover,
5960 &:active
5961 {
5962 background: xf-intensify(@pagination-active, 3%);
5963 }
5964 }
5965}
5966
5967// Make border-radius inherit from parent
5968.pageNavWrapper{
5969 border-radius: @xf-buttonBase--border-radius;
5970}
5971
5972 .pageNav,
5973 .pageNav-main,
5974 .pageNavSimple,
5975 .pageNav-jump,
5976 .pageNavSimple-el{
5977 border-radius: inherit;
5978 }
5979
5980 .pageNav-page{
5981 &:first-child{
5982 border-top-left-radius: inherit;
5983 border-bottom-left-radius: inherit;
5984 }
5985 &:last-child {
5986 border-top-right-radius: inherit;
5987 border-bottom-right-radius: inherit;
5988 }
5989 }
5990
5991// Add borders even if they've been removed from the block styles
5992.pageNav-jump,
5993.pageNav-page{
5994 background: @xf-contentBg;
5995 border: 1px solid xf-intensify(@xf-contentBg, 20%);
5996 border-color: xf-intensify(@xf-borderColor, 9%);
5997
5998 &:hover,
5999 &:active{
6000 background: xf-intensify(@xf-contentBg, 3%);
6001 }
6002}
6003
6004
6005// Admin and moderator bar
6006.p-staffBar-inner{
6007 padding-left: 4px;
6008 padding-right: 4px;
6009
6010 .hScroller-scroll{
6011 display: flex;
6012 justify-content: space-between;
6013 }
6014}
6015
6016.p-staffBar-link{
6017 padding-left: 10px;
6018 padding-right: 10px;
6019
6020 &:before{
6021 content: '\f023';
6022 font-family: "FontAwesome";
6023 display: inline-block;
6024 transform: translate(0,0);
6025 font-weight: normal;
6026 text-rendering: auto;
6027 font-size: inherit;
6028 margin-right: 6px;
6029 -webkit-font-smoothing: antialiased;
6030 -moz-osx-font-smoothing: grayscale;
6031 }
6032
6033 &[data-xf-key="alt+m"]:before{
6034 content: '\f046';
6035 }
6036}
6037
6038// Add a background to certain boxes if a wallpaper design is used
6039.focus-wallpaper(@debug) when (@debug = true) {
6040 @{focus-wallpaper-elements}{
6041 .xf-contentBase();
6042 .xf-blockBorder();
6043 border-radius: @xf-blockBorderRadius;
6044 padding: 14px;
6045 .focus-block-container();
6046 }
6047}
6048.focus-wallpaper(@focus-wallpaper);
6049
6050
6051// Staff bar
6052.p-staffBar{
6053 border: 0;
6054 border-radius: @xf-blockBorderRadius;
6055 margin-bottom: 10px;
6056}
6057
6058
6059// Node description
6060.node-description{
6061 margin-top: 5px;
6062 color: @xf-textColorMuted;
6063}
6064
6065// Soften shadows on menus
6066.menu{
6067 box-shadow: 0 5px 30px 0 rgba(0,0,0,0.25), rgba(0,0,0,0.15) 0px 3px 5px;
6068}
6069
6070// Tooltip blur
6071.tooltip--basic .tooltip-content{
6072 -webkit-backdrop-filter: blur(5px);
6073 backdrop-filter: blur(5px);
6074}
6075
6076// Avatars
6077.avatar{
6078 position: relative;
6079 box-shadow: rgba(0,0,0,0.1) 0px 3px 10px;
6080 text-shadow: none;
6081
6082 &::after{
6083 content: '';
6084 display: block;
6085 position: absolute;
6086 top: 0; left: 0; right: 0; bottom: 0;
6087 border: 1px solid fade(@xf-textColor, 15%);
6088 border-radius: inherit;
6089 pointer-events: none;
6090 }
6091
6092 // Fix alignment in 'Edit Avatar' box
6093 &.js-avatarCropper{
6094 top: 0 !important;
6095 left: 0 !important;
6096 }
6097}
6098
6099
6100/*
6101 ----------------
6102 - BB code tag
6103 ----------------
6104*/
6105
6106<xf:if is="property('styleType') == 'light'">
6107@bbcode-comment: #a50;
6108@bbcode-tag: #170;
6109@bbcode-boolean: #219;
6110@bbcode-symbol: #708;
6111@bbcode-selector: #05a;
6112@bbcode-deleted: #d44;
6113@bbcode-inserted: #292;
6114@bbcode-string: #a11;
6115@bbcode-number: #164;
6116@bbcode-char: #00c;
6117@bbcode-variable: #05a;
6118@bbcode-class-name: #00f;
6119@bbcode-constant: #05a;
6120<xf:else />
6121@bbcode-comment: #ebe7e3;
6122@bbcode-tag: #e8bd89;
6123@bbcode-boolean: #e8bd89;
6124@bbcode-symbol: #acc47e;
6125@bbcode-selector: #7ea9c4;
6126@bbcode-deleted: 797979;
6127@bbcode-inserted: #292;
6128@bbcode-string: #7ea9c4;
6129@bbcode-number: #e8bd89;
6130@bbcode-char: #df897a;
6131@bbcode-variable: #df897a;
6132@bbcode-class-name: #df897a;
6133@bbcode-constant: #05a;
6134</xf:if>
6135
6136.bbCodeCode
6137{
6138 .prism-token
6139 {
6140 &.prism-comment,
6141 &.prism-prolog,
6142 &.prism-doctype,
6143 &.prism-cdata
6144 {
6145 color: @bbcode-comment;
6146 }
6147
6148 &.prism-tag
6149 {
6150 color: @bbcode-tag;
6151 }
6152
6153 &.prism-boolean
6154 {
6155 color: @bbcode-boolean;
6156 }
6157
6158 &.prism-symbol,
6159 &.prism-atrule,
6160 &.prism-keyword
6161 {
6162 color: @bbcode-symbol;
6163 }
6164
6165 &.prism-selector,
6166 &.prism-function
6167 {
6168 color: @bbcode-selector;
6169 }
6170
6171 &.prism-deleted
6172 {
6173 color: @bbcode-deleted;
6174 }
6175
6176 &.prism-inserted
6177 {
6178 color: @bbcode-inserted;
6179 }
6180
6181 &.prism-string,
6182 &.prism-attr-value
6183 {
6184 color: @bbcode-string;
6185 }
6186
6187 &.prism-number
6188 {
6189 color: @bbcode-number;
6190 }
6191
6192 &.prism-attr-name,
6193 &.prism-char,
6194 &.prism-builtin
6195 {
6196 color: @bbcode-char;
6197 }
6198
6199 &.prism-regex,
6200 &.prism-important,
6201 &.prism-variable,
6202 &.prism-package
6203 {
6204 color: @bbcode-variable;
6205 }
6206
6207 &.prism-class-name,
6208 &.prism-important,
6209 &.prism-bold
6210 {
6211 color: @bbcode-class-name;
6212 }
6213
6214 &.prism-italic,
6215 &.prism-constant
6216 {
6217 color: @bbcode-constant;
6218 }
6219 }
6220}
6221
6222/*
6223 ----------------
6224 - Bug fixes
6225 ----------------
6226*/
6227
6228// Prevent wide menu's from spilling over mobiles: This occurred with the search menu
6229.menu.menu--wide{
6230 max-width: ~"calc(100wv - 6px)";
6231}
6232
6233// Make the css-checkbox inherit colours of surrounding text
6234label.iconic > input + i::before,
6235label.iconic > input + i:hover::before,
6236label.iconic:hover > input + i::before{
6237 color: inherit;
6238}
6239
6240// Clear floated user links
6241.p-nav-opposite{
6242 .m-clearFix();
6243}
6244
6245// Correctly colour the arrows in the date picker
6246.pika-prev, .pika-next{ color: inherit; }
6247
6248// [AL] Original Poster Highlight
6249div.ribbonBox .ribbon-wrapper{ z-index: 1; }
6250
6251
6252// Modify borders and hover color of buttons by using modified mixins
6253.focus-m-buttonColorVariation(@bgColor; @textColor){
6254 .m-buttonBorderColorVariation(@bgColor);
6255
6256 &:hover,
6257 &:active,
6258 &:focus{
6259 background-color: xf-intensify(@bgColor, 5%);
6260 }
6261}
6262
6263.focus-m-buttonBlockColorVariationSimple(@color){
6264 .focus-m-buttonBorderColorVariation(@color);
6265
6266 &:not(.button--splitTrigger),
6267 &.button--splitTrigger > .button-text,
6268 &.button--splitTrigger > .button-menu{
6269 &:hover,
6270 &:focus,
6271 &:active{
6272 background-color: xf-intensify(@color, 5%);
6273 }
6274 }
6275}
6276
6277.focus-m-buttonBorderColorVariation(@borderColor){
6278 border-color: xf-intensify(@borderColor, 9%);
6279
6280 &.button--splitTrigger{
6281 > .button-text { border-right-color: xf-intensify(@borderColor, 9%); }
6282 > .button-menu { border-left-color: xf-intensify(@borderColor, 9%); }
6283 }
6284}
6285
6286.button,
6287a.button{
6288 .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
6289
6290 &.button--primary{
6291 .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonPrimary--background-color, transparent));
6292 }
6293 &.button--cta{
6294 .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonCta--background-color, transparent));
6295 }
6296 &.button--link{
6297 .focus-m-buttonBorderColorVariation(@xf-borderColor);
6298 &:hover,
6299 &:active,
6300 &:focus{
6301 background: xf-intensify(@xf-contentBg, 5%);
6302 }
6303 }
6304 &.is-disabled{
6305 .focus-m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
6306 }
6307}
6308
6309.toggleButton{
6310 > span{
6311 .focus-m-buttonBorderColorVariation(xf-default(@xf-buttonDisabled--background-color, transparent));
6312 }
6313 > input:checked + span{
6314 .focus-m-buttonBlockColorVariationSimple(xf-default(@xf-buttonDefault--background-color, transparent));
6315 }
6316}
6317
6318// Buttons in block-header
6319.block-header .button.button--link{
6320 background: fade(@xf-blockHeader--color, 10%);
6321 color: inherit;
6322 border-color: fade(@xf-blockHeader--color, 40%);
6323
6324 &:hover{
6325 background: fade(@xf-blockHeader--color, 20%);
6326 }
6327}
6328
6329
6330:root{
6331 @media (max-width: @xf-responsiveNarrow){
6332 --responsive: 'Narrow';
6333 }
6334
6335 @media (min-width: (@xf-responsiveNarrow + 1px)) and (max-width: @xf-responsiveMedium){
6336 --responsive: 'Medium';
6337 }
6338
6339 @media (min-width: (@xf-responsiveMedium + 1px)) and (max-width: @xf-responsiveWide){
6340 --responsive: 'Wide';
6341 }
6342
6343 @media (min-width: (@xf-responsiveWide + 1px)){
6344 --responsive: 'Full';
6345 }
6346
6347
6348
6349
6350
6351 --xenfocus-version: '2.0.7';
6352 --xenfocus-date: 'June 22, 2018';
6353}]]></template>
6354 <template title="xenfocus_branding" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<span class='xenfocus:branding'>
6355 <a href='https://prowebber.ru/xf/xfskins/' target='_blank'>XenForo theme by xenfocus</a>
6356</span>]]></template>
6357 <template title="xenfocus_countdown" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_countdownEnable')">
6358
6359 <div class='focus-timer'>
6360
6361 <xf:if is="property('xenfocus_countdownTitle')"><h3>{{property('xenfocus_countdownTitle')}}</h3></xf:if>
6362 <xf:if is="property('xenfocus_countdownDesc')"><div class='focus-timer-desc'>{{property('xenfocus_countdownDesc')}}</div></xf:if>
6363 <xf:if is="property('xenfocus_countdownDone')"><div class='focus-timer-desc-done'>{{property('xenfocus_countdownDone')}}</div></xf:if>
6364 <div class='focus-timer-numbers'></div>
6365
6366 </div>
6367
6368</xf:if>]]></template>
6369 <template title="xenfocus_countdown_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_countdownEnable')">
6370 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
6371 <xf:if is="property('xenfocus_countdownZone')">
6372 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
6373 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
6374 </xf:if>
6375 <script type='text/javascript'>
6376 $(document).ready(function(){
6377
6378 <xf:if is="property('xenfocus_countdownZone')">
6379 var focusTimer = moment.tz("{{property('xenfocus_countdownDate')}}", "{{property('xenfocus_countdownZone')}}");
6380 var focusDate = focusTimer.toDate();
6381 <xf:else />
6382 var focusDate = "{{property('xenfocus_countdownDate')}}";
6383 </xf:if>
6384
6385 $('.focus-timer-numbers').countdown(focusDate)
6386 .on('update.countdown', function(event) {
6387 var format = '%H:%M:%S';
6388 if(event.offset.totalDays > 0) {
6389 format = '%-d <span>day%!d and</span> ' + format;
6390 }
6391 if(event.offset.weeks > 0) {
6392 format = '%-w <span>week%!w,</span> ' + format;
6393 }
6394 $(this).html(event.strftime(format));
6395 $('.focus-timer').addClass('focus-timer-counting');
6396 })
6397 .on('finish.countdown', function(event) {
6398 $('.focus-timer').addClass('focus-timer-done');
6399 });
6400
6401 });
6402 </script>
6403</xf:if>]]></template>
6404 <template title="xenfocus_editor" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_themeEditor')">
6405 <div class='focus-editor-wrap'>
6406 <div class='focus-editor-overlay' data-xenfocus-editor></div>
6407 <div class='focus-editor'>
6408
6409 <div class='focus-editor-scroll'>
6410
6411 <xf:if is="property('xenfocus_picker')">
6412 <div>
6413 <h4 data-focus-text='Background Picker'></h4>
6414 <div class="focus-picker">
6415 <span data-focus-bg='1'><i></i></span>
6416 <span data-focus-bg='2'><i></i></span>
6417 <span data-focus-bg='3'><i></i></span>
6418 <span data-focus-bg='4'><i></i></span>
6419 <span data-focus-bg='5'><i></i></span>
6420 <span data-focus-bg='6'><i></i></span>
6421 </div>
6422 </div>
6423 </xf:if>
6424
6425 <xf:include template="xenfocus_editor_hook_1" />
6426
6427 <div>
6428 <h4 data-focus-text='Customize layout'></h4>
6429
6430 <xf:if is="property('xenfocus_widthToggle')">
6431 <div class='focus-editor-panel' data-toggle-class='focus-fluid' data-default='<xf:if is="property('xenfocus_widthEnable')">on<xf:else />off</xf:if>'>
6432
6433 <div class='focus-editor-toggle'>
6434 <input type='radio' name='focus-width' id='focus-fluid-off' />
6435 <input type='radio' name='focus-width' id='focus-fluid-on' />
6436 <i class='focus-toggle'><i></i></i>
6437 </div>
6438 <div class='focus-editor-text' data-setting-title='Fluid width?' data-setting-desc='Enabling this will increase the width of the site so it occupies the width of your browser. Useful for larger screens.'></div>
6439
6440 </div>
6441 </xf:if>
6442
6443 <xf:if is="property('xenfocus_gridToggle')">
6444 <div class='focus-editor-panel' data-toggle-class='focus-grid' data-default='<xf:if is="property('xenfocus_gridEnable')">on<xf:else />off</xf:if>'>
6445
6446 <div class='focus-editor-toggle'>
6447 <input type='radio' name='focus-grid' id='focus-grid-off' />
6448 <input type='radio' name='focus-grid' id='focus-grid-on' />
6449 <i class='focus-toggle'><i></i></i>
6450 </div>
6451 <div class='focus-editor-text' data-setting-title='Grid layout?' data-setting-desc='If enabled, the forums will be displayed as a grid instead of a table.'></div>
6452
6453 </div>
6454 </xf:if>
6455
6456 <xf:if is="property('xenfocus_stickyToggle')">
6457 <div class='focus-editor-panel' data-toggle-class='focus-sidebar-sticky' data-default='<xf:if is="property('xenfocus_stickyBlocks')">on<xf:else />off</xf:if>'>
6458
6459 <div class='focus-editor-toggle'>
6460 <input type='radio' name='focus-sidebar-sticky' id='focus-sidebar-sticky-off' />
6461 <input type='radio' name='focus-sidebar-sticky' id='focus-sidebar-sticky-on' />
6462 <i class='focus-toggle'><i></i></i>
6463 </div>
6464 <div class='focus-editor-text' data-setting-title='Sticky sidebar?' data-setting-desc='If enabled, the sidebar will stick to the top of the screen for easy access.'></div>
6465
6466 </div>
6467 </xf:if>
6468
6469 <xf:if is="property('xenfocus_sidebarFlipToggle')">
6470 <div class='focus-editor-panel' data-toggle-class='focus-sidebar-flip' data-default='<xf:if is="property('xenfocus_sidebarFlip')">on<xf:else />off</xf:if>'>
6471
6472 <div class='focus-editor-toggle'>
6473 <input type='radio' name='focus-sidebar-flip' id='focus-sidebar-flip-off' />
6474 <input type='radio' name='focus-sidebar-flip' id='focus-sidebar-flip-on' />
6475 <i class='focus-toggle'><i></i></i>
6476 </div>
6477 <div class='focus-editor-text' data-setting-title='Flip sidebar?' data-setting-desc='Flip the sidebar between the left and right sides.'></div>
6478
6479 </div>
6480 </xf:if>
6481
6482 <xf:if is="property('xenfocus_eventOverlay') === 'snow'">
6483 <div class='focus-editor-panel' data-toggle-class='focus-snow' data-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'>
6484
6485 <div class='focus-editor-toggle'>
6486 <input type='radio' name='focus-snow' id='focus-snow-off' />
6487 <input type='radio' name='focus-snow' id='focus-snow-on' />
6488 <i class='focus-toggle'><i></i></i>
6489 </div>
6490 <div class='focus-editor-text' data-setting-title='Enable snow effect?' data-setting-desc='If enabled, animated snow will fall across your browser.'></div>
6491
6492 </div>
6493 </xf:if>
6494
6495 <xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
6496 <div class='focus-editor-panel' data-toggle-class='focus-confetti' data-default='<xf:if is="property('xenfocus_eventOverlayDefault')">on<xf:else />off</xf:if>'>
6497
6498 <div class='focus-editor-toggle'>
6499 <input type='radio' name='focus-confetti' id='focus-confetti-off' />
6500 <input type='radio' name='focus-confetti' id='focus-confetti-on' />
6501 <i class='focus-toggle'><i></i></i>
6502 </div>
6503 <div class='focus-editor-text' data-setting-title='Enable confetti?' data-setting-desc='If enabled, animated confetti will fall across your browser.'></div>
6504
6505 </div>
6506 </xf:if>
6507
6508 <xf:if is="property('xenfocus_countdownEnable') AND property('xenfocus_countdownToggle')">
6509 <div class='focus-editor-panel' data-toggle-class='focus-countdown' data-default='on'>
6510
6511 <div class='focus-editor-toggle'>
6512 <input type='radio' name='focus-countdown' id='focus-countdown-off' />
6513 <input type='radio' name='focus-countdown' id='focus-countdown-on' />
6514 <i class='focus-toggle'><i></i></i>
6515 </div>
6516 <div class='focus-editor-text' data-setting-title='Show countdown?' data-setting-desc='If enabled, a countdown will be visible at the top of your page.'></div>
6517
6518 </div>
6519 </xf:if>
6520
6521 <xf:include template="xenfocus_editor_hook_2" />
6522
6523 </div>
6524
6525 </div>
6526
6527 <div class='focus-editor-save'>
6528 <button data-xenfocus-editor data-focus-text='Save'></button>
6529 </div>
6530
6531 </div>
6532 </div>
6533</xf:if>]]></template>
6534 <template title="xenfocus_editor_hook_1" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('ortem_color_picker')">
6535 <div id='xenfocus-color-picker'>
6536 <h4 data-focus-text="Choose color"></h4>
6537 <ul class='xenfocus-color-picker'>
6538 <li></li>
6539 <li></li>
6540 <li></li>
6541 <li></li>
6542 <li></li>
6543 <li></li>
6544 <li></li>
6545 <li></li>
6546 <li></li>
6547 <li></li>
6548 <li></li>
6549 <li></li>
6550 </ul>
6551 </div>
6552</xf:if>]]></template>
6553 <template title="xenfocus_editor_hook_2" type="public" addon_id="" version_id="0" version_string=""><![CDATA[]]></template>
6554 <template title="xenfocus_event_overlay" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_eventOverlay') === 'snow'">
6555<script>
6556$(document).ready(function(){
6557
6558 $("body").append("<div class='xenfocus-snow'><div class='xenfocus-snow-panel xenfocus-snow-panel-1'><i class='f-sF'></i></div><div class='xenfocus-snow-panel xenfocus-snow-panel-2'><i class='f-sF'></i></div><div class='xenfocus-snow-panel xenfocus-snow-panel-3'><i class='f-sF'></i></div></div>");
6559
6560 $(".xenfocus-snow-panel").each(function(){
6561 var snowlist = $(this);
6562 for ( i = 0; i < 25;i++){
6563 snowlist.find('.f-sF:first').clone().appendTo(snowlist);
6564 }
6565 });
6566
6567});
6568</script>
6569</xf:if>
6570
6571<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
6572<script>
6573$(document).ready(function(){
6574
6575 $("body").append("<div class='xenfocus-confetti'><div class='xenfocus-confetti-panel xenfocus-confetti-panel-1'><i class='f-con'></i></div><div class='xenfocus-confetti-panel xenfocus-confetti-panel-2'><i class='f-con'></i></div><div class='xenfocus-confetti-panel xenfocus-confetti-panel-3'><i class='f-con'></i></div></div>");
6576
6577 $(".xenfocus-confetti-panel").each(function(){
6578 var confettilist = $(this);
6579 for ( i = 0; i < 17;i++){
6580 confettilist.find('.f-con:first').clone().appendTo(confettilist);
6581 }
6582 });
6583
6584});
6585</script>
6586</xf:if>]]></template>
6587 <template title="xenfocus_extra_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('ortem_color_picker')">
6588<script>
6589 function rgb2hex(rgb) {
6590 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
6591 function hex(x) {
6592 return ("0" + parseInt(x).toString(16)).slice(-2);
6593 }
6594 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
6595 }
6596 $(document).ready(function(){
6597 $("#xenfocus-color-picker li").click(function(){
6598 var xenfocusColor = $(this).css("background-color");
6599 var xenfocusColorHex = rgb2hex(xenfocusColor);
6600 console.log(xenfocusColorHex);
6601 $("#colorPickerVar").replaceWith('<style id="colorPickerVar">:root { --ortem: ' + xenfocusColorHex + '; }</style>');
6602 setCookie('xenfocusColorVariable-{$xf.style.style_id}', xenfocusColorHex, 365);
6603 });
6604 });
6605</script>
6606</xf:if>]]></template>
6607 <template title="xenfocus_footer" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_footerEnable')">
6608
6609 <div class='focus-footer'>
6610 <div class='focus-width flex flex-jB flex-aS flex-wrap'>
6611
6612 <xf:if is="property('xenfocus_footer1')"><div class='focus-footer-col'>{{property('xenfocus_footer1')}}</div></xf:if>
6613 <xf:if is="property('xenfocus_footer2')"><div class='focus-footer-col'>{{property('xenfocus_footer2')}}</div></xf:if>
6614 <xf:if is="property('xenfocus_footer3')"><div class='focus-footer-col'>{{property('xenfocus_footer3')}}</div></xf:if>
6615 <xf:if is="property('xenfocus_footer4')"><div class='focus-footer-col'>{{property('xenfocus_footer4')}}</div></xf:if>
6616
6617 </div>
6618 </div>
6619
6620</xf:if>]]></template>
6621 <template title="xenfocus_guest" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="!$xf.visitor.user_id">
6622<xf:if is="property('xenfocus_guestEnable')">
6623<div class='focus-guest focus-guest-{{property("xenfocus_guestLayout")}}'>
6624 <div class='focus-guest-header'>{$xf.options.boardTitle}</div>
6625 <div class='focus-guest-align'>
6626 <div class='focus-guest-content'>{{property('xenfocus_guestContent')}}</div>
6627 <ul class='focus-guest-buttons'>
6628 <li><a href="{{ link('login') }}" rel="nofollow" data-xf-click="overlay"><span>{{ phrase('log_in') }}</span></a></li>
6629 <xf:if is="$xf.options.registrationSetup.enabled"><li><a href="{{ link('register') }}" rel="nofollow" data-xf-click="overlay"><span>{{ phrase('register') }}</span></a></li></xf:if>
6630 </ul>
6631 </div>
6632</div>
6633</xf:if>
6634</xf:if>]]></template>
6635 <template title="xenfocus_mini_logo" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_logoMini') OR (property('xenfocus_holiday') != 'none')">
6636 <span class='focus-mini-logo'>
6637
6638 <xf:if is="property('xenfocus_holiday') === 'valentines'">
6639 <i class="fa fa-heart" aria-hidden="true"></i>
6640
6641 <xf:elseif is="property('xenfocus_holiday') === 'halloween'" />
6642 <img src="{{ base_url('styles/xenfocus/images/holidays/halloween-ghost.png') }}" alt='' />
6643
6644 <xf:else />
6645 <img src="{{ base_url(property('xenfocus_logoMini')) }}" alt="{$xf.options.boardTitle}" />
6646 </xf:if>
6647
6648 </span>
6649</xf:if>]]></template>
6650 <template title="xenfocus_onload_js" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<script type='text/javascript'>
6651var xfhtml = document.getElementById('XF');
6652function addClass(el, className) { if (el.classList) el.classList.add(className); else if (!hasClass(el, className)) el.className += ' ' + className; }
6653function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return v ? v[2] : null; }
6654function setCookie(name, value, days) { var d = new Date; d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString(); }
6655function deleteCookie(name) { setCookie(name, '', -1); }
6656function applySetting(settingName, settingOn, allowToggle){
6657 <xf:if is="property('xenfocus_themeEditor')">
6658 // Theme editor is enabled. Check for selected toggle, otherwise apply default
6659 if(allowToggle === 1){
6660 cookie = getCookie(settingName);
6661 if( (cookie === 'on') || (!cookie && (settingOn === 1)) ){
6662 addClass(xfhtml, settingName);
6663 }
6664 } else if(settingOn === 1){
6665 addClass(xfhtml, settingName);
6666 }
6667 <xf:else />
6668 // Theme editor is disabled, so simply apply the setting if enabled in ACP
6669 if(settingOn === 1){
6670 addClass(xfhtml, settingName);
6671 }
6672 </xf:if>
6673}
6674
6675<xf:if is="property('xenfocus_widthEnable') OR property('xenfocus_widthToggle')">
6676applySetting('focus-fluid', {{ property('xenfocus_widthEnable') }}, {{ property('xenfocus_widthToggle') }});
6677</xf:if>
6678<xf:if is="property('xenfocus_gridEnable') OR property('xenfocus_gridToggle')">
6679applySetting('focus-grid', {{ property('xenfocus_gridEnable') }}, {{ property('xenfocus_gridToggle') }});
6680</xf:if>
6681<xf:if is="property('xenfocus_stickyBlocks') OR property('xenfocus_stickyToggle')">
6682applySetting('focus-sidebar-sticky', {{ property('xenfocus_stickyBlocks') }}, {{ property('xenfocus_stickyToggle') }});
6683</xf:if>
6684<xf:if is="property('xenfocus_sidebarFlip') OR property('xenfocus_sidebarFlipToggle')">
6685applySetting('focus-sidebar-flip', {{ property('xenfocus_sidebarFlip') }}, {{ property('xenfocus_sidebarFlipToggle') }});
6686</xf:if>
6687<xf:if is="property('xenfocus_eventOverlay') === 'snow'">
6688applySetting('focus-snow', {{ property('xenfocus_eventOverlayDefault') }}, 1);
6689</xf:if>
6690<xf:if is="property('xenfocus_eventOverlay') === 'confetti'">
6691applySetting('focus-confetti', {{ property('xenfocus_eventOverlayDefault') }}, 1);
6692</xf:if>
6693<xf:if is="property('xenfocus_countdownEnable')">
6694applySetting('focus-countdown', 1, {{ property('xenfocus_countdownToggle') }});
6695</xf:if>
6696<xf:if is="property('xenfocus_picker')">
6697 var backgroundCookie = getCookie('xenfocusBackground-{$xf.style.style_id}');
6698 if(backgroundCookie){ xfhtml.setAttribute('data-focus-bg', '' + backgroundCookie + ''); } else { xfhtml.setAttribute('data-focus-bg', '{{ property("xenfocus_pickerDefault") }}'); }
6699<xf:else />
6700 xfhtml.setAttribute('data-focus-bg', '{{ property("xenfocus_pickerDefault") }}');
6701</xf:if>
6702</script>
6703<xf:include template="xenfocus_onload_js_extra" />]]></template>
6704 <template title="xenfocus_onload_js_extra" type="public" addon_id="" version_id="0" version_string=""><![CDATA[]]></template>
6705 <template title="xenfocus_picker" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<xf:if is="property('xenfocus_picker')">
6706<div class="focus-pickerWrapPull"><div class="focus-pickerWrap">
6707 <div class="focus-picker">
6708 <span data-focus-bg='1'></span>
6709 <span data-focus-bg='2'></span>
6710 <span data-focus-bg='3'></span>
6711 <span data-focus-bg='4'></span>
6712 <span data-focus-bg='5'></span>
6713 <span data-focus-bg='6'></span>
6714 </div>
6715</div></div>
6716</xf:if>]]></template>
6717 <template title="xenfocus_social" type="public" addon_id="" version_id="0" version_string=""><![CDATA[<ul class='xenfocus-social'>
6718 {{ property('xenfocus_social') }}
6719</ul>]]></template>
6720 <template title="xenfocus_theme.less" type="public" addon_id="" version_id="0" version_string=""><![CDATA[// Colour options
6721.ortem-picker('Strawberry'; #9b4339; 1);
6722.ortem-picker('Chocolate'; #736658; 2);
6723.ortem-picker('Midnight'; #22333c; 3);
6724.ortem-picker('Slate'; #55728b; 4);
6725.ortem-picker('Blueberry'; #336ea6; 5);
6726.ortem-picker('Emerald'; #46a468; 6);
6727
6728@ortem-default: @xf-ortem_color_default;
6729@ortem-colors: 6;
6730@ortem-colors-width: ~"calc(99.9% / @{ortem-colors} - 6px)";
6731@focus-editor-overlay: rgba(0,0,0,0.2);
6732@ortem-header-position: sticky;
6733@body-padding-top: 0px;
6734@body-padding-bottom: 0px;
6735@node-icon-read-filter: grayscale(0.7);
6736@body-overlay: rgba(255,255,255,0.9);
6737
6738@pattern-image: url('styles/xenfocus/ortem/pattern.png');
6739@pattern-repeat: repeat;
6740@pattern-size: auto;
6741@pattern-position: 50% 50%;
6742
6743/*
6744 ----------------
6745 - Translate
6746 ----------------
6747*/
6748
6749html[lang="en-GB"] h4[data-focus-text="Choose color"]:after{
6750 content: 'Choose colour';
6751}
6752
6753/*
6754 ----------------
6755 - Global
6756 ----------------
6757*/
6758
6759.p-body{
6760 background: @body-overlay;
6761}
6762
6763/*
6764 ----------------
6765 - Colour Picker
6766 ----------------
6767*/
6768
6769#xenfocus-color-picker{
6770 display: none;
6771}
6772
6773// Show the colour picker for browsers which support css variables
6774@supports (background-color:var(--ortem)) {
6775 #xenfocus-color-picker{
6776 display: block;
6777 }
6778}
6779
6780.xenfocus-color-picker{
6781 display: flex;
6782 align-items: center;
6783 justify-content: space-between;
6784 flex-wrap: wrap;
6785 margin: 0;
6786 padding: 12px;
6787 text-align: center;
6788 color: #fff;
6789 line-height: 70px;
6790 list-style: none;
6791 text-shadow: rgba(0,0,0,0.16) 0px -1px 0px;
6792
6793 li{
6794 flex: 0 0 auto;
6795 border-radius: 3px;
6796 margin: 3px;
6797 padding: 0;
6798 width: @ortem-colors-width;
6799 cursor: pointer;
6800 border: 1px solid rgba(0,0,0,0.1);
6801
6802 @ortem-colors-crop: @ortem-colors+1;
6803 &:nth-child(n + @{ortem-colors-crop}){
6804 display: none;
6805 }
6806
6807 @media (max-width: 700px){
6808 width: ~"calc(25% - 6px)";
6809 }
6810
6811 @media (max-width: 440px){
6812 width: ~"calc(50% - 6px)";
6813 }
6814
6815 &:hover {
6816 box-shadow: inset rgba(255,255,255,0.25) 0px 100px 0;
6817 }
6818 }
6819}
6820
6821.ortem-picker(@name; @hex; @order){
6822 .xenfocus-color-picker li:nth-child(@{order}){
6823 background: @hex;
6824 &:before{
6825 content: "@{name}";
6826 }
6827 }
6828}
6829
6830
6831
6832
6833
6834:root {
6835 --ortem: @ortem-default;
6836}
6837
6838
6839.focus-content,
6840.p-breadcrumbs,
6841.block-header,
6842.block-minorHeader,
6843<xf:if is="property('xenfocus_iconStyles--background-color')">
6844#XF .node-icon i,
6845#XF .node--unread .node-icon i,
6846</xf:if>
6847<xf:if is="!property('xenfocus_iconRead--background-color')">
6848#XF .node--read .node-icon i, .node--link .node-icon i,
6849</xf:if>
6850.message-cell.message-cell--user,
6851.button.button--primary, a.button.button--primary,
6852.button.button--primary:not(.button--splitTrigger):hover,
6853.button.button--cta, a.button.button--cta,
6854.button.button--cta:not(.button--splitTrigger):hover, a.button.button--cta:not(.button--splitTrigger):hover,
6855.button.button--cta:not(.button--splitTrigger):active, a.button.button--cta:not(.button--splitTrigger):active,
6856.actionBar-set.actionBar-set--external .actionBar-action,
6857.actionBar-set.actionBar-set--external .actionBar-action:hover,
6858.pageNav-page.pageNav-page--current,
6859.p-footer{
6860 background-color: @ortem-default;
6861 background-color: var(--ortem);
6862
6863 .focus-editor-open &{
6864 transition: background-color 0.3s linear;
6865 }
6866}
6867
6868.p-nav-list .p-navEl.is-selected{
6869 color: var(--ortem);
6870
6871 .focus-editor-open &{
6872 transition: color 0.3s linear;
6873 }
6874}
6875
6876
6877// Pattern
6878.p-breadcrumbs,
6879.block-header,
6880.block-minorHeader,
6881.p-footer{
6882 background-image: @pattern-image;
6883 background-repeat: @pattern-repeat;
6884 background-size: @pattern-size;
6885 background-position: @pattern-position;
6886}
6887
6888
6889// Footer
6890.focus-footer + .footer-bottom-wrap{
6891 background-color: rgba(0,0,0,0.1);
6892}
6893
6894// Border
6895.pageNav-page.pageNav-page--current,
6896.p-breadcrumbs::before,
6897.button.button--primary, a.button.button--primary,
6898.button.button--cta, a.button.button--cta,
6899.actionBar-set.actionBar-set--external .actionBar-action{
6900 border-color: rgba(0,0,0,0.15);
6901}
6902
6903// Lighter shade
6904.message-cell.message-cell--user{
6905 background-image: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.95));
6906}
6907
6908// Hover
6909.button.button--primary:not(.button--splitTrigger):hover,
6910.button.button--cta:not(.button--splitTrigger):hover, a.button.button--cta:not(.button--splitTrigger):hover,
6911.actionBar-set.actionBar-set--external .actionBar-action:hover{
6912 background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.1));
6913}
6914
6915
6916
6917/*
6918 ----------------
6919 - Header
6920 ----------------
6921*/
6922
6923#header{
6924 position: -webkit-sticky;
6925 position: @ortem-header-position;
6926 top: 0;
6927}
6928
6929// Background picker
6930html[data-focus-bg='1'] #header{
6931 .focus-background-1();
6932}
6933
6934html[data-focus-bg='2'] #header{
6935 .focus-background-2();
6936}
6937
6938html[data-focus-bg='3'] #header{
6939 .focus-background-3();
6940}
6941
6942html[data-focus-bg='4'] #header{
6943 .focus-background-4();
6944}
6945
6946html[data-focus-bg='5'] #header{
6947 .focus-background-5();
6948}
6949
6950html[data-focus-bg='6'] #header{
6951 .focus-background-6();
6952}
6953
6954// Safari fix for header overlap
6955.focus-content{
6956 transform: translate(0,0);
6957}
6958
6959
6960/*
6961 ----------------
6962 - Search
6963 ----------------
6964*/
6965
6966.focus-search{
6967 border-top-width: 0px;
6968 border-bottom-width: 0px;
6969}
6970
6971
6972/*
6973 ----------------
6974 - Breadcrumbs
6975 ----------------
6976*/
6977
6978@breadcrumb-highlight: <xf:if is="property('xenfocus_breadcrumbHover--background-color')">fadein(@xf-xenfocus_breadcrumbHover--background-color, 30%)<xf:else />rgba(255,255,255,0.5)</xf:if>;
6979@breadcrumb-shadow: rgba(0,0,0,0.25);
6980@breadcrumb-hover: xf-default(@xf-xenfocus_breadcrumbHover--background-color, rgba(255,255,255,0.3));
6981@breadcrumb-active: rgba(0,0,0,0.05);
6982
6983
6984/*
6985 ----------------
6986 - Footer
6987 ----------------
6988*/
6989
6990.p-footer{
6991 border-top: 1px solid rgba(0,0,0,0.15);
6992}
6993
6994
6995/*
6996 ----------------
6997 - Blocks
6998 ----------------
6999*/
7000
7001.focus-block-container(){
7002 box-shadow: rgba(0,0,0,0.06) 0px 0px 8px, rgba(0,0,0,0.08) 0px 1px 3px;
7003 background-clip: padding-box;
7004 border-color: rgba(0,0,0,0.15);
7005}
7006
7007 .focus-block-header(){
7008 padding: 15px;
7009 margin: -1px -1px 0 -1px;
7010 @media (max-width: @xf-responsiveEdgeSpacerRemoval){
7011 border-left-width: 0;
7012 border-right-width: 0;
7013 margin-left: 0;
7014 margin-right: 0;
7015 }
7016 }
7017
7018 .focus-block-minor-header(){
7019 padding: 9px;
7020 margin: -1px -1px 0 -1px;
7021 @media (max-width: @xf-responsiveEdgeSpacerRemoval){
7022 border-left-width: 0;
7023 border-right-width: 0;
7024 margin-left: 0;
7025 margin-right: 0;
7026 }
7027 }
7028
7029/*
7030 ----------------
7031 - Other
7032 ----------------
7033*/
7034
7035.message-content a{ text-decoration: underline; }]]></template>
7036 </templates>
7037 <properties>
7038 <group group_name="xenfocus_color_picker" title="Xenfocus: Ortem Color Picker" description="Enable/disable the color picker and set a default color." display_order="1" addon_id=""/>
7039 <group group_name="xenfocus_logo" title="Xenfocus: Logo and navigation" description="Customize the logo and navigation." display_order="2" addon_id=""/>
7040 <group group_name="xenfocus_themeEditor" title="Xenfocus: Theme editor" description="Enable the theme editor, which allows your users to customize the theme to their own needs." display_order="3" addon_id=""/>
7041 <group group_name="xenfocus_picker" title="Xenfocus: Background picker" description="Allow your members to choose their own background image from a predefined selection." display_order="4" addon_id=""/>
7042 <group group_name="xenfocus_user" title="Xenfocus: User panel" description="Adjust the colors and dimensions of the user panel (username, notifications, inbox, etc)" display_order="5" addon_id=""/>
7043 <group group_name="xenfocus_search" title="Xenfocus: Search bar" description="Adjust the dimensions and colors of the search bar" display_order="6" addon_id=""/>
7044 <group group_name="xenfocus_social" title="Xenfocus: Social icons" description="Enable and customize social links." display_order="7" addon_id=""/>
7045 <group group_name="xenfocus_wrapper" title="Xenfocus: Content wrapper" description="The wrapper wraps your content and can optionally have a background, border or box-shadow." display_order="10" addon_id=""/>
7046 <group group_name="xenfocus_breadcrumb" title="Xenfocus: Breadcrumb navigation" description="Change the colors and style of the breadcrumb bar." display_order="12" addon_id=""/>
7047 <group group_name="xenfocus_guest" title="Xenfocus: Guest message" description="Display a message to your guests, prompting them to sign in or register." display_order="15" addon_id=""/>
7048 <group group_name="xenfocus_countdown" title="Xenfocus: Countdown" description="Configure a countdown timer for local or global events, such as a sporting event or New Years." display_order="16" addon_id=""/>
7049 <group group_name="xenfocus_grid" title="Xenfocus: Grid layout" description="Enable/disable the grid layout and customize its appearance." display_order="20" addon_id=""/>
7050 <group group_name="xenfocus_nodeIcons" title="Xenfocus: Node icons" description="Change the size, FontAwesome icon and colors of your node icons." display_order="35" addon_id=""/>
7051 <group group_name="xenfocus_footer" title="Xenfocus: Mega footer" description="The mega footer can contain up to 4 columns and is placed at the bottom of your site." display_order="40" addon_id=""/>
7052 <group group_name="xenfocus_holidays" title="Xenfocus: Holidays and Events" description="Enable holiday effects, such as animated snow for Christmas" display_order="50" addon_id=""/>
7053 <group group_name="xenfocus_other" title="Xenfocus: Other" description="Customize minor areas of the theme such as zebra rows and sticky topic separation." display_order="60" addon_id=""/>
7054 <property property_name="avatarBorderRadius" group_name="avatar" title="Avatar border radius" description="Controls the size of the rounded corners on avatars - a sufficiently large value will make avatars circular" property_type="value" value_type="unit" depends_on="" value_group="" display_order="200" addon_id="XF">
7055 <value>"3px"</value>
7056 </property>
7057 <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">
7058 <value>{
7059 "color": "@xf-textColorDimmed",
7060 "background-color": "fade(@xf-textColorDimmed, 9%)",
7061 "border-color": "fade(@xf-textColor, 35%)",
7062 "border-radius": "@xf-blockBorderRadius",
7063 "border-left-width": "@xf-borderSizeFeature",
7064 "border-left-color": "@xf-textColorDimmed",
7065 "extra": "padding: 10px;"
7066}</value>
7067 </property>
7068 <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">
7069 <value>{
7070 "font-size": "@xf-fontSizeSmall",
7071 "color": "@xf-textColorDimmed",
7072 "font-weight": "@xf-fontWeightHeavy",
7073 "background-color": "transparent"
7074}</value>
7075 </property>
7076 <property property_name="blockBorder" group_name="block" title="Block border framework" description="Virtually all blocks have their borders styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="border,extra" addon_id="XF">
7077 <value>{
7078 "border-width": "1px",
7079 "border-color": "@xf-borderColor"
7080}</value>
7081 </property>
7082 <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">
7083 <value>{
7084 "font-size": "@xf-fontSizeSmall",
7085 "color": "@xf-textColorEmphasized",
7086 "background-color": "@xf-contentHighlightBg",
7087 "border-bottom-width": "@xf-borderSize",
7088 "border-bottom-color": "xf-intensify(@xf-blockFilterBar--background-color, 4%)"
7089}</value>
7090 </property>
7091 <property property_name="blockFooter" group_name="block" title="Block footer" description="When information needs to be conveyed in a footer element for a block, its style is controlled here" property_type="css" value_type="" depends_on="" value_group="" display_order="21200" css_components="text,background,border,extra" addon_id="XF">
7092 <value>{
7093 "font-size": "@xf-fontSizeSmaller",
7094 "color": "@xf-textColorDimmed",
7095 "background-color": "@xf-contentAltBg",
7096 "border-top-width": "@xf-borderSize",
7097 "border-top-color": "@xf-borderColorLight"
7098}</value>
7099 </property>
7100 <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">
7101 <value>{
7102 "font-size": "15px",
7103 "color": "#fff",
7104 "font-weight": "@xf-fontWeightHeavy",
7105 "background-color": "@xf-paletteColor5",
7106 "border-width": "1px",
7107 "border-color": "rgba(0,0,0,0.15)"
7108}</value>
7109 </property>
7110 <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">
7111 <value>{
7112 "font-weight": "@xf-fontWeightHeavy",
7113 "background-color": "fade(@xf-linkHoverColor, 8%)",
7114 "border-width": "@xf-borderSizeFeature",
7115 "border-color": "currentcolor"
7116}</value>
7117 </property>
7118 <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">
7119 <value>{
7120 "font-size": "inherit",
7121 "color": "#fff",
7122 "font-weight": "@xf-fontWeightHeavy",
7123 "background-color": "@xf-paletteColor4",
7124 "border-width": "1px",
7125 "border-color": "rgba(0,0,0,0.15)"
7126}</value>
7127 </property>
7128 <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">
7129 <value>"@xf-paddingLarge"</value>
7130 </property>
7131 <property property_name="borderRadiusLarge" group_name="borderSpacing" title="Large border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1200" addon_id="XF">
7132 <value>"0px"</value>
7133 </property>
7134 <property property_name="borderRadiusMedium" group_name="borderSpacing" title="Medium border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1100" addon_id="XF">
7135 <value>"0px"</value>
7136 </property>
7137 <property property_name="borderRadiusSmall" group_name="borderSpacing" title="Small border radius" description="" property_type="value" value_type="unit" depends_on="" value_group="borderRadius" display_order="1000" addon_id="XF">
7138 <value>"0px"</value>
7139 </property>
7140 <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">
7141 <value>{
7142 "font-size": "@xf-fontSizeSmall",
7143 "border-radius": "@xf-borderRadiusMedium",
7144 "padding-top": "7px",
7145 "padding-right": "10px",
7146 "padding-bottom": "7px",
7147 "padding-left": "10px",
7148 "extra": "text-align: center;"
7149}</value>
7150 </property>
7151 <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">
7152 <value>{
7153 "color": "contrast(@xf-paletteAccent2)",
7154 "background-color": "@xf-paletteAccent2",
7155 "extra": "min-width: 80px;"
7156}</value>
7157 </property>
7158 <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">
7159 <value>"\"Open Sans\", BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif"</value>
7160 </property>
7161 <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">
7162 <value>"\"Open Sans\", BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif"</value>
7163 </property>
7164 <property property_name="fontSizeLarge" group_name="fonts" title="Large font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1400" addon_id="XF">
7165 <value>"14px"</value>
7166 </property>
7167 <property property_name="fontSizeLarger" group_name="fonts" title="Larger font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1500" addon_id="XF">
7168 <value>"18px"</value>
7169 </property>
7170 <property property_name="fontSizeLargest" group_name="fonts" title="Largest font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1600" addon_id="XF">
7171 <value>"22px"</value>
7172 </property>
7173 <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">
7174 <value>"13px"</value>
7175 </property>
7176 <property property_name="fontSizeSmall" group_name="fonts" title="Small font size" description="" property_type="value" value_type="unit" depends_on="" value_group="size" display_order="1100" addon_id="XF">
7177 <value>"12px"</value>
7178 </property>
7179 <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">
7180 <value>{
7181 "font-size": "@xf-fontSizeNormal",
7182 "color": "@xf-textColor",
7183 "background-color": "@xf-contentAltBg",
7184 "border-width": "@xf-borderSize",
7185 "border-color": "@xf-borderColorHeavy",
7186 "border-radius": "@xf-borderRadiusMedium",
7187 "border-bottom-color": "@xf-borderColorLight",
7188 "padding": "@xf-paddingMedium"
7189}</value>
7190 </property>
7191 <property property_name="inputDisabled" group_name="input" title="Form input - disabled" description="When text boxes are disabled, these rules are applied" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
7192 <value>{
7193 "color": "@xf-textColorMuted",
7194 "background-color": "xf-intensify(@xf-contentAltBg, 3%)"
7195}</value>
7196 </property>
7197 <property property_name="inputFocus" group_name="input" title="Form input - focused" description="These rules are applied to text boxes when they are selected for input" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,extra" addon_id="XF">
7198 <value>{
7199 "background-color": "lighten(@xf-contentAltBg, 3%)"
7200}</value>
7201 </property>
7202 <property property_name="lineHeightDefault" group_name="fonts" title="Line height" description="This value controls the amount of spacing between lines of text" property_type="value" value_type="number" depends_on="" value_group="spacing" display_order="3000" addon_id="XF">
7203 <value_parameters>step=0.1
7204max=5</value_parameters>
7205 <value>"1.5"</value>
7206 </property>
7207 <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">
7208 <value>"@xf-paletteColor5"</value>
7209 </property>
7210 <property property_name="memberHeader" group_name="member" title="Member profile header" description="The member profile page's content header is styled with these settings" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,border,extra" addon_id="XF">
7211 <value>{
7212 "background-color": "@xf-contentAltBg",
7213 "border-bottom-width": "@xf-borderSize",
7214 "border-bottom-color": "@xf-borderColorLight"
7215}</value>
7216 </property>
7217 <property property_name="memberTooltipHeader" group_name="member" title="Member tooltip header" description="The member tooltip, which appears when hovering over user names, is styled with these controls" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,extra" addon_id="XF">
7218 <value>{
7219 "background-color": "@xf-contentAltBg",
7220 "border-bottom-width": "@xf-borderSize",
7221 "border-bottom-color": "@xf-borderColorLight"
7222}</value>
7223 </property>
7224 <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">
7225 <value>{
7226 "font-size": "@xf-fontSizeSmaller",
7227 "color": "@xf-textColorDimmed",
7228 "background-color": "@xf-contentAltBg",
7229 "border-top-width": "@xf-borderSize",
7230 "border-top-color": "@xf-borderColorLight"
7231}</value>
7232 </property>
7233 <property property_name="menuHeader" group_name="menu" title="Menu header" description="Most menus identify themselves with a header just underneath their top border" property_type="css" value_type="" depends_on="" value_group="" display_order="20100" css_components="text,background,border,extra" addon_id="XF">
7234 <value>{
7235 "font-size": "@xf-fontSizeLarge",
7236 "color": "@xf-textColor",
7237 "background-color": "@xf-contentAltBg",
7238 "border-bottom-width": "@xf-borderSize",
7239 "border-bottom-color": "@xf-borderColorLight"
7240}</value>
7241 </property>
7242 <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">
7243 <value>{
7244 "color": "@xf-linkHoverColor",
7245 "text-decoration": "none",
7246 "background-color": "fade(@xf-menuLinkRowSelected--color, 10%)"
7247}</value>
7248 </property>
7249 <property property_name="messageSignature" group_name="message" title="Message signature" description="Any rules used to apply styling to users' signatures in their messages are defined here" property_type="css" value_type="" depends_on="" value_group="" display_order="20200" css_components="text,background,border,padding,extra" addon_id="XF">
7250 <value>{
7251 "font-size": "@xf-fontSizeSmaller",
7252 "color": "@xf-textColorMuted",
7253 "border-top-width": "@xf-borderSize",
7254 "border-top-color": "@xf-borderColorLight",
7255 "padding-top": "12px"
7256}</value>
7257 </property>
7258 <property property_name="metaThemeColor" group_name="misc" title="Chrome meta theme color" description="Chrome on Android allows the address bar color to be changed to fit your site colors. If you want this to be changed, enter a color here." property_type="value" value_type="color" depends_on="" value_group="" display_order="900" addon_id="XF">
7259 <value>"@xf-paletteColor5"</value>
7260 </property>
7261 <property property_name="nodeListDescriptionDisplay" group_name="nodeList" title="Description display style" description="To save vertical space, it is possible to hide node descriptions until the node title is hovered, at which point they are displayed in a tooltip" property_type="value" value_type="radio" depends_on="" value_group="" display_order="400" addon_id="XF">
7262 <value_parameters>tooltip={{ phrase('tooltip') }}
7263inline={{ phrase('inline') }}
7264none={{ phrase('none') }}</value_parameters>
7265 <value>"inline"</value>
7266 </property>
7267 <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">
7268 <value_parameters>menu={{ phrase('popup_menu') }}
7269flat={{ phrase('listed_below_node') }}
7270none={{ phrase('none') }}</value_parameters>
7271 <value>"flat"</value>
7272 </property>
7273 <property property_name="ortem_color_default" group_name="xenfocus_color_picker" title="Default color" description="This color will be used as the default color scheme for your site, until a new value is chosen from the Theme Editor." property_type="value" value_type="color" depends_on="" value_group="" display_order="20" addon_id="">
7274 <value>"#55728b"</value>
7275 </property>
7276 <property property_name="ortem_color_picker" group_name="xenfocus_color_picker" title="Enable color picker?" description="If enabled, your members will be able to change the color scheme of your site by using the Theme Editor." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
7277 <value>1</value>
7278 </property>
7279 <property property_name="paddingLarge" group_name="borderSpacing" title="Large padding" description="" property_type="value" value_type="unit" depends_on="" value_group="padding" display_order="2200" addon_id="XF">
7280 <value>"12px"</value>
7281 </property>
7282 <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">
7283 <value_parameters>hidePalette=true</value_parameters>
7284 <value>"#f1f2f3"</value>
7285 </property>
7286 <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">
7287 <value_parameters>hidePalette=true</value_parameters>
7288 <value>"#787e86"</value>
7289 </property>
7290 <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">
7291 <value_parameters>hidePalette=true</value_parameters>
7292 <value>"#54585e"</value>
7293 </property>
7294 <property property_name="paletteColor1" group_name="palette" title="Color 1" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1000" addon_id="XF">
7295 <value_parameters>hidePalette=true</value_parameters>
7296 <value>"#f4f5f5"</value>
7297 </property>
7298 <property property_name="paletteColor2" group_name="palette" title="Color 2" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1100" addon_id="XF">
7299 <value_parameters>hidePalette=true</value_parameters>
7300 <value>"#d6d9db"</value>
7301 </property>
7302 <property property_name="paletteColor3" group_name="palette" title="Color 3" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1200" addon_id="XF">
7303 <value_parameters>hidePalette=true</value_parameters>
7304 <value>"#919aa0"</value>
7305 </property>
7306 <property property_name="paletteColor4" group_name="palette" title="Color 4" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1300" addon_id="XF">
7307 <value_parameters>hidePalette=true</value_parameters>
7308 <value>"#646c71"</value>
7309 </property>
7310 <property property_name="paletteColor5" group_name="palette" title="Color 5" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1400" addon_id="XF">
7311 <value_parameters>hidePalette=true</value_parameters>
7312 <value>"#4a5054"</value>
7313 </property>
7314 <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">
7315 <value_parameters>hidePalette=true</value_parameters>
7316 <value>"rgb(255, 255, 255)"</value>
7317 </property>
7318 <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">
7319 <value>{
7320 "font-size": "@xf-fontSizeSmall",
7321 "color": "#fff",
7322 "background-color": "@xf-paletteColor5",
7323 "extra": "border-radius: @xf-blockBorderRadius;"
7324}</value>
7325 </property>
7326 <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">
7327 <value>{
7328 "color": "fadein(@xf-publicFooter--color, 50%)"
7329}</value>
7330 </property>
7331 <property property_name="publicHeader" group_name="headerNav" title="Header/logo row" description="The header row contains your logo and sits at the top of every public page" property_type="css" value_type="" depends_on="" value_group="" display_order="20000" css_components="text,background,extra" addon_id="XF">
7332 <value>{
7333 "color": "@xf-contentBg",
7334 "background-color": "rgba(38,38,38,0.85)"
7335}</value>
7336 </property>
7337 <property property_name="publicHeaderAdjustColor" group_name="headerNav" title="Header adjustment color" description="The color of the header background is adjusted to be used as the background for the inbox and alerts area in the header" property_type="value" value_type="color" depends_on="" value_group="header" display_order="100" addon_id="XF">
7338 <value>"rgba(0,0,0,0.1)"</value>
7339 </property>
7340 <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">
7341 <value>""</value>
7342 </property>
7343 <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">
7344 <value>{
7345 "color": "#5e5e5e",
7346 "background-color": "#fff",
7347 "extra": "box-shadow: rgba(0,0,0,0.1) 0px 2px 10px, rgba(0,0,0,0.05) 0px 1px 0px;"
7348}</value>
7349 </property>
7350 <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">
7351 <value>{
7352 "color": "@xf-linkColor",
7353 "background-color": "currentcolor",
7354 "background-image": "linear-gradient(to bottom, fade(@xf-publicNav--background-color, 85%) 0%, @xf-publicNav--background-color 100%)"
7355}</value>
7356 </property>
7357 <property property_name="publicNavSticky" group_name="headerNav" title="Sticky navigation element" description="If you intend for some or all of your header to stick to the top of the page when it is scrolled, choose which elements should stick" property_type="value" value_type="radio" depends_on="" value_group="navigation" display_order="1200" addon_id="XF">
7358 <value_parameters>primary={{ phrase('primary_navigation_row_only') }}
7359all={{ phrase('primary_and_sub_navigation_rows') }}
7360none={{ phrase('none') }}</value_parameters>
7361 <value>"primary"</value>
7362 </property>
7363 <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">
7364 <value>{
7365 "color": "fade(@xf-publicNav--color, 70%)",
7366 "font-weight": "@xf-fontWeightHeavy",
7367 "text-decoration": "none",
7368 "extra": "text-transform: uppercase;"
7369}</value>
7370 </property>
7371 <property property_name="publicNavTabHover" group_name="headerNav" title="Navigation row - hovered tab" description="Additional styling to apply to navigation tabs when the pointer hovers over them" property_type="css" value_type="" depends_on="" value_group="" display_order="20400" css_components="text,background,extra" addon_id="XF">
7372 <value>{
7373 "color": "fadein(@xf-publicNav--color, 100%)",
7374 "text-decoration": "none",
7375 "background-color": "currentcolor",
7376 "background-image": "linear-gradient(to bottom, fade(@xf-publicNav--background-color, 85%) 0%, @xf-publicNav--background-color 100%)"
7377}</value>
7378 </property>
7379 <property property_name="xenfocus_bg1_attachment" group_name="xenfocus_picker" title="Background #1: Attachment" description="" property_type="value" value_type="select" depends_on="" value_group="bg1" display_order="260" addon_id="">
7380 <value_parameters>fixed=fixed
7381scroll=scroll</value_parameters>
7382 <value>"scroll"</value>
7383 </property>
7384 <property property_name="xenfocus_bg1_hex" group_name="xenfocus_picker" title="Background #1: Hex" description="The hex color for image 1" property_type="value" value_type="color" depends_on="" value_group="bg1" display_order="210" addon_id="">
7385 <value>"#333"</value>
7386 </property>
7387 <property property_name="xenfocus_bg1_image" group_name="xenfocus_picker" title="Background #1: Image" description="The URL of image 1" property_type="value" value_type="string" depends_on="" value_group="bg1" display_order="220" addon_id="">
7388 <value>"styles/xenfocus/ortem/backgrounds/mountains.jpg"</value>
7389 </property>
7390 <property property_name="xenfocus_bg1_position" group_name="xenfocus_picker" title="Background #1: Position" description="The background-position value for image 1" property_type="value" value_type="string" depends_on="" value_group="bg1" display_order="240" addon_id="">
7391 <value>"50% 50%"</value>
7392 </property>
7393 <property property_name="xenfocus_bg1_repeat" group_name="xenfocus_picker" title="Background #1: Repeat" description="The background-repeat value for image 1" property_type="value" value_type="select" depends_on="" value_group="bg1" display_order="250" addon_id="">
7394 <value_parameters>repeat=repeat
7395no-repeat=no-repeat
7396repeat-x=repeat-x
7397repeat-y=repeat-y</value_parameters>
7398 <value>"repeat"</value>
7399 </property>
7400 <property property_name="xenfocus_bg1_size" group_name="xenfocus_picker" title="Background #1: Size" description="The background-size value for image 1" property_type="value" value_type="string" depends_on="" value_group="bg1" display_order="230" addon_id="">
7401 <value>"cover"</value>
7402 </property>
7403 <property property_name="xenfocus_bg2_attachment" group_name="xenfocus_picker" title="Background #2: Attachment" description="" property_type="value" value_type="select" depends_on="" value_group="bg2" display_order="360" addon_id="">
7404 <value_parameters>fixed=fixed
7405scroll=scroll</value_parameters>
7406 <value>"scroll"</value>
7407 </property>
7408 <property property_name="xenfocus_bg2_hex" group_name="xenfocus_picker" title="Background #2: Hex" description="The hex color for image 2" property_type="value" value_type="color" depends_on="" value_group="bg2" display_order="310" addon_id="">
7409 <value>"#333"</value>
7410 </property>
7411 <property property_name="xenfocus_bg2_image" group_name="xenfocus_picker" title="Background #2: Image" description="The URL of image 2" property_type="value" value_type="string" depends_on="" value_group="bg2" display_order="320" addon_id="">
7412 <value>"styles/xenfocus/ortem/backgrounds/trees.jpg"</value>
7413 </property>
7414 <property property_name="xenfocus_bg2_position" group_name="xenfocus_picker" title="Background #2: Position" description="The background-position value for image 2" property_type="value" value_type="string" depends_on="" value_group="bg2" display_order="340" addon_id="">
7415 <value>"50% 50%"</value>
7416 </property>
7417 <property property_name="xenfocus_bg2_repeat" group_name="xenfocus_picker" title="Background #2: Repeat" description="The background-repeat value for image 2" property_type="value" value_type="select" depends_on="" value_group="bg2" display_order="350" addon_id="">
7418 <value_parameters>repeat=repeat
7419no-repeat=no-repeat
7420repeat-x=repeat-x
7421repeat-y=repeat-y</value_parameters>
7422 <value>"repeat"</value>
7423 </property>
7424 <property property_name="xenfocus_bg2_size" group_name="xenfocus_picker" title="Background #2: Size" description="The background-size value for image 2" property_type="value" value_type="string" depends_on="" value_group="bg2" display_order="330" addon_id="">
7425 <value>"cover"</value>
7426 </property>
7427 <property property_name="xenfocus_bg3_attachment" group_name="xenfocus_picker" title="Background #3: Attachment" description="" property_type="value" value_type="select" depends_on="" value_group="bg3" display_order="460" addon_id="">
7428 <value_parameters>fixed=fixed
7429scroll=scroll</value_parameters>
7430 <value>"scroll"</value>
7431 </property>
7432 <property property_name="xenfocus_bg3_hex" group_name="xenfocus_picker" title="Background #3: Hex" description="The hex color for image 3" property_type="value" value_type="color" depends_on="" value_group="bg3" display_order="410" addon_id="">
7433 <value>"#333"</value>
7434 </property>
7435 <property property_name="xenfocus_bg3_image" group_name="xenfocus_picker" title="Background #3: Image" description="The URL of image 3" property_type="value" value_type="string" depends_on="" value_group="bg3" display_order="420" addon_id="">
7436 <value>"styles/xenfocus/ortem/backgrounds/city.jpg"</value>
7437 </property>
7438 <property property_name="xenfocus_bg3_position" group_name="xenfocus_picker" title="Background #3: Position" description="The background-position value for image 3" property_type="value" value_type="string" depends_on="" value_group="bg3" display_order="440" addon_id="">
7439 <value>"50% 50%"</value>
7440 </property>
7441 <property property_name="xenfocus_bg3_repeat" group_name="xenfocus_picker" title="Background #3: Repeat" description="The background-repeat value for image 3" property_type="value" value_type="select" depends_on="" value_group="bg3" display_order="450" addon_id="">
7442 <value_parameters>repeat=repeat
7443no-repeat=no-repeat
7444repeat-x=repeat-x
7445repeat-y=repeat-y</value_parameters>
7446 <value>"repeat"</value>
7447 </property>
7448 <property property_name="xenfocus_bg3_size" group_name="xenfocus_picker" title="Background #3: Size" description="The background-size value for image 3" property_type="value" value_type="string" depends_on="" value_group="bg3" display_order="430" addon_id="">
7449 <value>"cover"</value>
7450 </property>
7451 <property property_name="xenfocus_bg4_attachment" group_name="xenfocus_picker" title="Background #4: Attachment" description="" property_type="value" value_type="select" depends_on="" value_group="bg4" display_order="560" addon_id="">
7452 <value_parameters>fixed=fixed
7453scroll=scroll</value_parameters>
7454 <value>"scroll"</value>
7455 </property>
7456 <property property_name="xenfocus_bg4_hex" group_name="xenfocus_picker" title="Background #4: Hex" description="The hex color for image 4" property_type="value" value_type="color" depends_on="" value_group="bg4" display_order="510" addon_id="">
7457 <value>"#888"</value>
7458 </property>
7459 <property property_name="xenfocus_bg4_image" group_name="xenfocus_picker" title="Background #4: Image" description="The URL of image 4" property_type="value" value_type="string" depends_on="" value_group="bg4" display_order="520" addon_id="">
7460 <value>""</value>
7461 </property>
7462 <property property_name="xenfocus_bg4_position" group_name="xenfocus_picker" title="Background #4: Position" description="The background-position value for image 4" property_type="value" value_type="string" depends_on="" value_group="bg4" display_order="540" addon_id="">
7463 <value>""</value>
7464 </property>
7465 <property property_name="xenfocus_bg4_repeat" group_name="xenfocus_picker" title="Background #4: Repeat" description="The background-repeat value for image 4" property_type="value" value_type="select" depends_on="" value_group="bg4" display_order="550" addon_id="">
7466 <value_parameters>repeat=repeat
7467no-repeat=no-repeat
7468repeat-x=repeat-x
7469repeat-y=repeat-y</value_parameters>
7470 <value>"repeat"</value>
7471 </property>
7472 <property property_name="xenfocus_bg4_size" group_name="xenfocus_picker" title="Background #4: Size" description="The background-size value for image 4" property_type="value" value_type="string" depends_on="" value_group="bg4" display_order="530" addon_id="">
7473 <value>""</value>
7474 </property>
7475 <property property_name="xenfocus_bg5_attachment" group_name="xenfocus_picker" title="Background #5: Attachment" description="" property_type="value" value_type="select" depends_on="" value_group="bg5" display_order="660" addon_id="">
7476 <value_parameters>fixed=fixed
7477scroll=scroll</value_parameters>
7478 <value>"scroll"</value>
7479 </property>
7480 <property property_name="xenfocus_bg5_hex" group_name="xenfocus_picker" title="Background #5: Hex" description="The hex color for image 5" property_type="value" value_type="color" depends_on="" value_group="bg5" display_order="610" addon_id="">
7481 <value>"#aaa"</value>
7482 </property>
7483 <property property_name="xenfocus_bg5_image" group_name="xenfocus_picker" title="Background #5: Image" description="The URL of image 5" property_type="value" value_type="string" depends_on="" value_group="bg5" display_order="620" addon_id="">
7484 <value>""</value>
7485 </property>
7486 <property property_name="xenfocus_bg5_position" group_name="xenfocus_picker" title="Background #5: Position" description="The background-position value for image 5" property_type="value" value_type="string" depends_on="" value_group="bg5" display_order="640" addon_id="">
7487 <value>""</value>
7488 </property>
7489 <property property_name="xenfocus_bg5_repeat" group_name="xenfocus_picker" title="Background #5: Repeat" description="The background-repeat value for image 5" property_type="value" value_type="select" depends_on="" value_group="bg5" display_order="650" addon_id="">
7490 <value_parameters>repeat=repeat
7491no-repeat=no-repeat
7492repeat-x=repeat-x
7493repeat-y=repeat-y</value_parameters>
7494 <value>"repeat"</value>
7495 </property>
7496 <property property_name="xenfocus_bg5_size" group_name="xenfocus_picker" title="Background #5: Size" description="The background-size value for image 5" property_type="value" value_type="string" depends_on="" value_group="bg5" display_order="630" addon_id="">
7497 <value>""</value>
7498 </property>
7499 <property property_name="xenfocus_bg6_attachment" group_name="xenfocus_picker" title="Background #6: Attachment" description="" property_type="value" value_type="select" depends_on="" value_group="bg6" display_order="760" addon_id="">
7500 <value_parameters>fixed=fixed
7501scroll=scroll</value_parameters>
7502 <value>"scroll"</value>
7503 </property>
7504 <property property_name="xenfocus_bg6_hex" group_name="xenfocus_picker" title="Background #6: Hex" description="The hex color for image 6" property_type="value" value_type="color" depends_on="" value_group="bg6" display_order="710" addon_id="">
7505 <value>"#bbb"</value>
7506 </property>
7507 <property property_name="xenfocus_bg6_image" group_name="xenfocus_picker" title="Background #6: Image" description="The URL of image 6" property_type="value" value_type="string" depends_on="" value_group="bg6" display_order="720" addon_id="">
7508 <value>""</value>
7509 </property>
7510 <property property_name="xenfocus_bg6_position" group_name="xenfocus_picker" title="Background #6: Position" description="The background-position value for image 6" property_type="value" value_type="string" depends_on="" value_group="bg6" display_order="740" addon_id="">
7511 <value>""</value>
7512 </property>
7513 <property property_name="xenfocus_bg6_repeat" group_name="xenfocus_picker" title="Background #6: Repeat" description="The background-repeat value for image 6" property_type="value" value_type="select" depends_on="" value_group="bg6" display_order="750" addon_id="">
7514 <value_parameters>repeat=repeat
7515no-repeat=no-repeat
7516repeat-x=repeat-x
7517repeat-y=repeat-y</value_parameters>
7518 <value>"repeat"</value>
7519 </property>
7520 <property property_name="xenfocus_bg6_size" group_name="xenfocus_picker" title="Background #6: Size" description="The background-size value for image 6" property_type="value" value_type="string" depends_on="" value_group="bg6" display_order="730" addon_id="">
7521 <value>""</value>
7522 </property>
7523 <property property_name="xenfocus_breadcrumb" group_name="xenfocus_breadcrumb" title="Breadcrumb styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="text,background,border_color_simple,border_radius_simple" addon_id="">
7524 <value>{
7525 "color": "#fff",
7526 "background-color": "@xf-paletteColor5",
7527 "border-color": "fade(xf-intensify(@xf-xenfocus_breadcrumb--background-color, 30%), 25%)",
7528 "border-radius": "0px"
7529}</value>
7530 </property>
7531 <property property_name="xenfocus_breadcrumbHeight" group_name="xenfocus_breadcrumb" title="Breadcrumb height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="5" addon_id="">
7532 <value>"40"</value>
7533 </property>
7534 <property property_name="xenfocus_breadcrumbHover" group_name="xenfocus_breadcrumb" title="Breadcrumb :hover styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="20" css_components="text,background" addon_id="">
7535 <value>{
7536 "color": "lighten(@xf-xenfocus_breadcrumb--color, 10%)",
7537 "background-color": "rgba(255, 255, 255, 0.1)"
7538}</value>
7539 </property>
7540 <property property_name="xenfocus_countdownColor" group_name="xenfocus_countdown" title="Countdown text color" description="By default, the countdown is placed on a transparent background. This setting controls the text color. If left blank, the countdown will be wrapped with the "block" style." property_type="value" value_type="color" depends_on="xenfocus_countdownEnable" value_group="" display_order="70" addon_id="">
7541 <value>""</value>
7542 </property>
7543 <property property_name="xenfocus_countdownDate" group_name="xenfocus_countdown" title="Date and time of event" description="The format must be: YYYY-MM-DD HH:MM<br /> Eg: 2018-03-21 23:45" property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="20" addon_id="">
7544 <value>"2018-10-01 23:45"</value>
7545 </property>
7546 <property property_name="xenfocus_countdownDesc" group_name="xenfocus_countdown" title="Countdown description" description="If you'd like to provide a more detailed description of the countdown, enter it here." property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="50" addon_id="">
7547 <value_parameters>rows=3</value_parameters>
7548 <value>"This is your countdown description."</value>
7549 </property>
7550 <property property_name="xenfocus_countdownDone" group_name="xenfocus_countdown" title="Countdown description (finished)" description="Once the countdown has reached zero, this message will be displayed instead of the original description." property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="60" addon_id="">
7551 <value_parameters>rows=3</value_parameters>
7552 <value>"The event is here!"</value>
7553 </property>
7554 <property property_name="xenfocus_countdownEnable" group_name="xenfocus_countdown" title="Enable countdown?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
7555 <value>0</value>
7556 </property>
7557 <property property_name="xenfocus_countdownTitle" group_name="xenfocus_countdown" title="Countdown title" description="What event are you counting down to?" property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="40" addon_id="">
7558 <value>"Countdown until our main event!"</value>
7559 </property>
7560 <property property_name="xenfocus_countdownToggle" group_name="xenfocus_themeEditor" title="Allow members to hide countdown?" description="If enabled, users will be able to hide the countdown using their theme editor. This setting only applies if you have enabled a countdown." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="150" addon_id="">
7561 <value>1</value>
7562 </property>
7563 <property property_name="xenfocus_countdownZone" group_name="xenfocus_countdown" title="Timezone (optional)" description="If your event is occurring in a specific time zone (such as a sporting event), enter the time zone here. Please check the tutorial category on the xenfocus support forums for further instructions." property_type="value" value_type="string" depends_on="xenfocus_countdownEnable" value_group="" display_order="30" addon_id="">
7564 <value>""</value>
7565 </property>
7566 <property property_name="xenfocus_editorIcon_footer" group_name="xenfocus_themeEditor" title="Show icon in footer?" description="If enabled, the theme editor icon will be shown in the footer." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="65" addon_id="">
7567 <value>1</value>
7568 </property>
7569 <property property_name="xenfocus_editorIcon_user" group_name="xenfocus_themeEditor" title="Show icon in user panel?" description="If enabled, the theme editor icon will be shown in the user panel." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="60" addon_id="">
7570 <value>1</value>
7571 </property>
7572 <property property_name="xenfocus_eventOverlay" group_name="xenfocus_holidays" title="Full-screen effect" description="Select an animated effect to overlay your screen, such as snow for Christmas or confetti for a celebration." property_type="value" value_type="select" depends_on="" value_group="" display_order="5" addon_id="">
7573 <value_parameters>none=None
7574snow=Snow
7575confetti=Confetti</value_parameters>
7576 <value>"none"</value>
7577 </property>
7578 <property property_name="xenfocus_eventOverlayDefault" group_name="xenfocus_holidays" title="Show animated effect by default?" description="If enabled, the animated effect will be shown to all users. They can optionally disable it via the theme editor." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
7579 <value>1</value>
7580 </property>
7581 <property property_name="xenfocus_footer1" group_name="xenfocus_footer" title="Footer column 1" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="30" addon_id="">
7582 <value_parameters>rows=4</value_parameters>
7583 <value>"<h4>Footer Header</h4>\n<p>This is some example content.</p>\n<p>And this is another paragraph..</p>"</value>
7584 </property>
7585 <property property_name="xenfocus_footer2" group_name="xenfocus_footer" title="Footer column 2" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="40" addon_id="">
7586 <value_parameters>rows=4</value_parameters>
7587 <value>"<h4>List with links</h4>\n<p>The below list contains links.</p>\n<ul class='focus-footer-list'>\n<li><a href='#'>Example link 1</a></li>\n<li><a href='#'>Example link 2</a></li>\n<li><a href='#'>Example link 3</a></li>\n</ul>"</value>
7588 </property>
7589 <property property_name="xenfocus_footer3" group_name="xenfocus_footer" title="Footer column 3" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="50" addon_id="">
7590 <value_parameters>rows=4</value_parameters>
7591 <value>"<h4>Footer Header</h4>\n<p>This is some example content.</p>\n<p>And this is another paragraph..</p>"</value>
7592 </property>
7593 <property property_name="xenfocus_footer4" group_name="xenfocus_footer" title="Footer column 4" description="" property_type="value" value_type="string" depends_on="" value_group="" display_order="60" addon_id="">
7594 <value_parameters>rows=4</value_parameters>
7595 <value>"<h4>Footer Header</h4>\n<p>This is some example content.</p>\n<p>And this is another paragraph..</p>"</value>
7596 </property>
7597 <property property_name="xenfocus_footerEnable" group_name="xenfocus_footer" title="Enable mega footer?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
7598 <value>1</value>
7599 </property>
7600 <property property_name="xenfocus_gridBackground" group_name="xenfocus_grid" title="Background color for wallpaper blocks" description="If an image isn't defined (via css), this hex color will be shown instead." property_type="value" value_type="color" depends_on="xenfocus_gridWallpaper" value_group="" display_order="130" addon_id="">
7601 <value>"@xf-paletteColor5"</value>
7602 </property>
7603 <property property_name="xenfocus_gridColor" group_name="xenfocus_grid" title="Text color for wallpaper blocks" description="If the above setting is enabled, grid blocks will use this color for their text color." property_type="value" value_type="color" depends_on="xenfocus_gridWallpaper" value_group="" display_order="120" addon_id="">
7604 <value>"#fff"</value>
7605 </property>
7606 <property property_name="xenfocus_gridEnable" group_name="xenfocus_grid" title="Grid view?" description="If enabled, your forums will be placed into a grid formation. Only compatible in browsers which support css grid." property_type="value" value_type="boolean" depends_on="" value_group="xenfocus_grid" display_order="101" addon_id="">
7607 <value>0</value>
7608 </property>
7609 <property property_name="xenfocus_gridImage" group_name="xenfocus_grid" title="Wallpaper images" description="Assign a wallpaper to node id's, separated by a comma. Node wallpapers should be .jpg, uploaded to /styles/xenfocus/images/node-wallpapers and named according to their id, eg 2.jpg<br /> Expected input: 2,3,7" property_type="value" value_type="string" depends_on="xenfocus_gridWallpaper" value_group="" display_order="140" addon_id="">
7610 <value>"2,3"</value>
7611 </property>
7612 <property property_name="xenfocus_gridToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle "Grid view"?" description="If enabled, your members will be able to toggle the forum layout between grid and table." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="100" addon_id="">
7613 <value>1</value>
7614 </property>
7615 <property property_name="xenfocus_gridWallpaper" group_name="xenfocus_grid" title="Wallpaper design?" description="Enable this if you'd like to assign background images to your grid blocks. The text color is defined below." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="110" addon_id="">
7616 <value>1</value>
7617 </property>
7618 <property property_name="xenfocus_guestContent" group_name="xenfocus_guest" title="Guest message" description="This message is shown to guests, prompting them to register or sign in." property_type="value" value_type="string" depends_on="xenfocus_guestEnable" value_group="" display_order="20" addon_id="">
7619 <value_parameters>rows=5</value_parameters>
7620 <value>"<p>This is a sample guest message. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!</p>"</value>
7621 </property>
7622 <property property_name="xenfocus_guestEnable" group_name="xenfocus_guest" title="Enable guest message?" description="" property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
7623 <value>0</value>
7624 </property>
7625 <property property_name="xenfocus_guestInternalStyle" group_name="xenfocus_guest" title="Alert style: Box header and buttons" description="These colors affect the header and buttons in the guest box." property_type="css" value_type="" depends_on="" value_group="" display_order="40" css_components="text,background" addon_id="">
7626 <value>{
7627 "color": "#9A6200",
7628 "font-weight": "@xf-fontWeightHeavy",
7629 "background-color": "#EDAF5D"
7630}</value>
7631 </property>
7632 <property property_name="xenfocus_guestLayout" group_name="xenfocus_guest" title="Layout" description=""Alert" captures the attention of visitors using brighter colours.<br /> "Wallpaper" uses a large background image instead." property_type="value" value_type="select" depends_on="" value_group="" display_order="15" addon_id="">
7633 <value_parameters>alert=Alert
7634wallpaper=Wallpaper</value_parameters>
7635 <value>"wallpaper"</value>
7636 </property>
7637 <property property_name="xenfocus_guestStyle" group_name="xenfocus_guest" title="Alert style: Box colors" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="30" css_components="text,background" addon_id="">
7638 <value>{
7639 "color": "#9A6200",
7640 "background-color": "#fcefe0"
7641}</value>
7642 </property>
7643 <property property_name="xenfocus_guestWallpaper" group_name="xenfocus_guest" title="Wallpaper: Image and color" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="50" css_components="text,background" addon_id="">
7644 <value>{
7645 "color": "@xf-paletteColor1",
7646 "background-color": "darken(@xf-paletteColor5, 15%)",
7647 "background-image": "styles/xenfocus/images/guest-message/laptop.jpg"
7648}</value>
7649 </property>
7650 <property property_name="xenfocus_guestWallpaperOpacity" group_name="xenfocus_guest" title="Wallpaper image overlay" description="If "Wallpaper" is selected above, and if you've assigned a background image under "Wallpaper: Image and color" below, you can add a semi-transparent overlay here which may result in better contrast with your text. Enter a value between 0 and 1." property_type="value" value_type="string" depends_on="" value_group="" display_order="25" addon_id="">
7651 <value>"0.85"</value>
7652 </property>
7653 <property property_name="xenfocus_headerOnMobile" group_name="xenfocus_logo" title="Show header on mobile?" description="If disabled, the header will be removed and a mini logo will be shown next to the mobile navigation icon." property_type="value" value_type="boolean" depends_on="" value_group="xenfocus_logoMobile" display_order="70" addon_id="">
7654 <value>1</value>
7655 </property>
7656 <property property_name="xenfocus_holiday" group_name="xenfocus_holidays" title="Logo effect" description="Celebrate a holiday or event by enhancing your logo." property_type="value" value_type="select" depends_on="" value_group="" display_order="20" addon_id="">
7657 <value_parameters>none=None
7658valentines=Valentines
7659halloween=Halloween</value_parameters>
7660 <value>"none"</value>
7661 </property>
7662 <property property_name="xenfocus_iconFA" group_name="xenfocus_nodeIcons" title=""New content" FA icon" description="Customize the Font Awesome icon for nodes with new content by entering the unicode value." property_type="value" value_type="string" depends_on="" value_group="xenfocus_iconFA" display_order="105" addon_id="">
7663 <value>"f086"</value>
7664 </property>
7665 <property property_name="xenfocus_iconFAold" group_name="xenfocus_nodeIcons" title=""No new content" FA icon" description="Same as above, but for nodes with no new content." property_type="value" value_type="string" depends_on="" value_group="xenfocus_iconFA" display_order="106" addon_id="">
7666 <value>"f0e6"</value>
7667 </property>
7668 <property property_name="xenfocus_iconHeight" group_name="xenfocus_nodeIcons" title="Node icon height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="xenfocus_iconSize" display_order="140" addon_id="">
7669 <value>"40"</value>
7670 </property>
7671 <property property_name="xenfocus_iconMobile" group_name="xenfocus_nodeIcons" title="Scale icons on mobiles" description="The icons on smaller devices will be displayed at this scale. Eg, 0.5 = half size." property_type="value" value_type="string" depends_on="" value_group="xenfocus_iconSize" display_order="170" addon_id="">
7672 <value>"0.7"</value>
7673 </property>
7674 <property property_name="xenfocus_iconRead" group_name="xenfocus_nodeIcons" title="Node icon (no new content)" description="Change the icon color and background-color of the node icon when no new content exists." property_type="css" value_type="" depends_on="" value_group="" display_order="210" css_components="text,background,extra" addon_id="">
7675 <value>[]</value>
7676 </property>
7677 <property property_name="xenfocus_iconSize" group_name="xenfocus_nodeIcons" title="Node icon font-size (px)" description="" property_type="value" value_type="number" depends_on="" value_group="xenfocus_iconSize" display_order="150" addon_id="">
7678 <value>"24"</value>
7679 </property>
7680 <property property_name="xenfocus_iconStyles" group_name="xenfocus_nodeIcons" title="Node icon" description="Change the icon color, background-color, font-size and border-radius of the node icon. Adding a background image will remove all other styles, allowing you to use an image as the icon." property_type="css" value_type="" depends_on="" value_group="" display_order="200" css_components="text,background,border_radius_simple,extra" addon_id="">
7681 <value>{
7682 "color": "#fff",
7683 "background-color": "@xf-paletteColor4",
7684 "border-radius": "0px"
7685}</value>
7686 </property>
7687 <property property_name="xenfocus_iconWidth" group_name="xenfocus_nodeIcons" title="Node icon width (px)" description="" property_type="value" value_type="number" depends_on="" value_group="xenfocus_iconSize" display_order="130" addon_id="">
7688 <value>"40"</value>
7689 </property>
7690 <property property_name="xenfocus_includeCSS" group_name="xenfocus_other" title="Include CSS file" description="If required, this input can be used to add external CSS files such as Google Fonts. Format must be &lt;link href="xx.css" /&gt;" property_type="value" value_type="string" depends_on="" value_group="" display_order="10" addon_id="">
7691 <value>"<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,700\" rel=\"stylesheet\">"</value>
7692 </property>
7693 <property property_name="xenfocus_logoColor" group_name="xenfocus_logo" title="Logo color" description="Color of the text logo" property_type="value" value_type="color" depends_on="" value_group="xenfocus_logo" display_order="28" addon_id="">
7694 <value>"@xf-publicHeader--color"</value>
7695 </property>
7696 <property property_name="xenfocus_logoFont" group_name="xenfocus_logo" title="Logo font-family" description="Change the font-family used by your logo." property_type="value" value_type="string" depends_on="" value_group="xenfocus_logo" display_order="29" addon_id="">
7697 <value>""</value>
7698 </property>
7699 <property property_name="xenfocus_logoHeight" group_name="xenfocus_logo" title="Logo height" description="Define the height of the logo/header area, in pixels." property_type="value" value_type="number" depends_on="" value_group="xenfocus_logo" display_order="30" addon_id="">
7700 <value>"200"</value>
7701 </property>
7702 <property property_name="xenfocus_logoHeightMobile" group_name="xenfocus_logo" title="Logo height (mobile)" description="Define the height of the logo/header area for mobiles, in pixels." property_type="value" value_type="number" depends_on="xenfocus_headerOnMobile" value_group="xenfocus_logoMobile" display_order="80" addon_id="">
7703 <value>"90"</value>
7704 </property>
7705 <property property_name="xenfocus_logoMini" group_name="xenfocus_logo" title="Mini logo image" description="If you'd like to display a mini logo next to your text logo, insert the image path here." property_type="value" value_type="string" depends_on="" value_group="xenfocus_logo" display_order="27" addon_id="">
7706 <value>""</value>
7707 </property>
7708 <property property_name="xenfocus_logoSize" group_name="xenfocus_logo" title="Logo font size" description="Font size for the text logo in pixels." property_type="value" value_type="number" depends_on="" value_group="xenfocus_logo" display_order="50" addon_id="">
7709 <value>"24"</value>
7710 </property>
7711 <property property_name="xenfocus_logoSizeMobile" group_name="xenfocus_logo" title="Logo font size (mobile)" description="Font size for the text logo in pixels, for mobiles." property_type="value" value_type="number" depends_on="xenfocus_headerOnMobile" value_group="xenfocus_logoMobile" display_order="85" addon_id="">
7712 <value>"18"</value>
7713 </property>
7714 <property property_name="xenfocus_logoSlogan" group_name="xenfocus_logo" title="Logo slogan" description="Enter a slogan to display under your text logo. Leave this field blank to disable." property_type="value" value_type="string" depends_on="" value_group="xenfocus_logo" display_order="26" addon_id="">
7715 <value>"A professional, minimalistic theme for xenforo 2"</value>
7716 </property>
7717 <property property_name="xenfocus_logoText" group_name="xenfocus_logo" title="Text logo" description="If an image hasn't been uploaded as a logo, this will be used instead. If this is left blank, your board name will be displayed." property_type="value" value_type="string" depends_on="" value_group="xenfocus_logo" display_order="25" addon_id="">
7718 <value>"Ortem"</value>
7719 </property>
7720 <property property_name="xenfocus_navHeight" group_name="xenfocus_logo" title="Navigation height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="xenfocus_navigation" display_order="210" addon_id="">
7721 <value>"50"</value>
7722 </property>
7723 <property property_name="xenfocus_navIcons" group_name="xenfocus_logo" title="Show navigation icons?" description="If enabled, each icon is assigned a FontAwesome icon which can be configured via css." property_type="value" value_type="boolean" depends_on="" value_group="xenfocus_navigation" display_order="200" addon_id="">
7724 <value>1</value>
7725 </property>
7726 <property property_name="xenfocus_picker" group_name="xenfocus_picker" title="Enable background picker?" description="If enabled, your members will be able to select their own background/header image using the Theme Editor." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="xenfocus_picker" display_order="110" addon_id="">
7727 <value>1</value>
7728 </property>
7729 <property property_name="xenfocus_pickerDefault" group_name="xenfocus_picker" title="Set default image" description="This image will be used as the default background image, or if the background picker has been disabled." property_type="value" value_type="select" depends_on="" value_group="xenfocus_picker" display_order="115" addon_id="">
7730 <value_parameters>1=1
77312=2
77323=3
77334=4
77345=5
77356=6</value_parameters>
7736 <value>"1"</value>
7737 </property>
7738 <property property_name="xenfocus_pickerNumber" group_name="xenfocus_picker" title="How many background choices?" description="" property_type="value" value_type="select" depends_on="xenfocus_picker" value_group="xenfocus_picker" display_order="113" addon_id="">
7739 <value_parameters>2=2
77403=3
77414=4
77425=5
77436=6</value_parameters>
7744 <value>"3"</value>
7745 </property>
7746 <property property_name="xenfocus_searchHeight" group_name="xenfocus_search" title="Search height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="100" addon_id="">
7747 <value>"50"</value>
7748 </property>
7749 <property property_name="xenfocus_searchMenu" group_name="xenfocus_search" title="Advanced search menu?" description="If enabled, a dropdown menu will appear when your search bar is focused." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="200" addon_id="">
7750 <value>1</value>
7751 </property>
7752 <property property_name="xenfocus_searchStyles" group_name="xenfocus_search" title="Search bar styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="120" css_components="text,background,border_width_simple,border_color_simple,border_radius_simple" addon_id="">
7753 <value>{
7754 "color": "#333",
7755 "border-width": "1px",
7756 "border-color": "fade(@xf-xenfocus_searchStyles--color, 20%)",
7757 "border-radius": "0px"
7758}</value>
7759 </property>
7760 <property property_name="xenfocus_searchWidth" group_name="xenfocus_search" title="Search width (px)" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="150" addon_id="">
7761 <value>"260"</value>
7762 </property>
7763 <property property_name="xenfocus_sidebarFlip" group_name="xenfocus_other" title="Flip sidebar position?" description="Flip the position of the sidebar to the left side of your site (right for RTL languages)." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="50" addon_id="">
7764 <value>0</value>
7765 </property>
7766 <property property_name="xenfocus_sidebarFlipToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle sidebar position?" description="If enabled, users can flip the location of their sidebar between the left and right sides." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="170" addon_id="">
7767 <value>1</value>
7768 </property>
7769 <property property_name="xenfocus_social" group_name="xenfocus_social" title="Social icons" description="Add your social icon code here. Format must be &lt;li&gt;&lt;a href="https://www.site.com/username"&gt;(optional)&lt;/a&gt;&lt;/li&gt;" property_type="value" value_type="string" depends_on="" value_group="" display_order="20" addon_id="">
7770 <value_parameters>rows=3</value_parameters>
7771 <value>"<li><a href='#youtube.com' target='_blank'></a></li>\n<li><a href='#facebook.com/' target='_blank'></a></li>\n<li><a href='#twitter.com' target='_blank'></a></li>\n<li><a href='#discordapp.com' target='_blank'></a></li>"</value>
7772 </property>
7773 <property property_name="xenfocus_socialEnable" group_name="xenfocus_social" title="Display icons next to breadcrumb?" description="If enabled, social network icons will be placed next to your breadcrumb navigation at the top of the page." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="10" addon_id="">
7774 <value>1</value>
7775 </property>
7776 <property property_name="xenfocus_socialFooter" group_name="xenfocus_social" title="Display icons in footer?" description="If enabled, social network icons will be added to the bottom of your site." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="15" addon_id="">
7777 <value>1</value>
7778 </property>
7779 <property property_name="xenfocus_sticky" group_name="xenfocus_other" title="Separate sticky topics" description="If enabled, sticky topics will be separated with dividers." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="30" addon_id="">
7780 <value>1</value>
7781 </property>
7782 <property property_name="xenfocus_stickyAuthor" group_name="xenfocus_other" title="Sticky author column?" description="If enabled, the author column in topics will stick to the top of the browser window when scrolled." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="45" addon_id="">
7783 <value>0</value>
7784 </property>
7785 <property property_name="xenfocus_stickyBlocks" group_name="xenfocus_other" title="Sticky sidebar?" description="If enabled, the sidebar will become stuck to the top of the browser window when scrolled." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="15" addon_id="">
7786 <value>1</value>
7787 </property>
7788 <property property_name="xenfocus_stickyToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle sticky sidebars?" description="If enabled, users will be able to toggle the sticky-state of their sidebar." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="160" addon_id="">
7789 <value>1</value>
7790 </property>
7791 <property property_name="xenfocus_tableLayout" group_name="xenfocus_other" title="Table layout" description="Change the layout of node and topic tables." property_type="value" value_type="select" depends_on="" value_group="" display_order="25" addon_id="">
7792 <value_parameters>standard=Standard
7793standardHover=Standard with hover effect
7794minimal=Minimal</value_parameters>
7795 <value>"minimal"</value>
7796 </property>
7797 <property property_name="xenfocus_themeEditor" group_name="xenfocus_themeEditor" title="Enable theme editor?" description="The theme editor allows your members to modify the theme to their preference, including background images and width." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="50" addon_id="">
7798 <value>1</value>
7799 </property>
7800 <property property_name="xenfocus_userHeight" group_name="xenfocus_user" title="User links height (px)" description="" property_type="value" value_type="number" depends_on="" value_group="" display_order="100" addon_id="">
7801 <value>"42"</value>
7802 </property>
7803 <property property_name="xenfocus_userIcons" group_name="xenfocus_user" title="Hide text?" description="If enabled, the text is hidden for Notifications and Alerts, leaving only the icons." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="140" addon_id="">
7804 <value>0</value>
7805 </property>
7806 <property property_name="xenfocus_userRegister" group_name="xenfocus_user" title="Register button" description="Make the Register button stand out with it's own background color." property_type="value" value_type="color" depends_on="" value_group="" display_order="120" addon_id="">
7807 <value>"rgb(103, 175, 81)"</value>
7808 </property>
7809 <property property_name="xenfocus_userSep" group_name="xenfocus_user" title="Separate links with border?" description="If enabled, borders will divide each user link." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="130" addon_id="">
7810 <value>0</value>
7811 </property>
7812 <property property_name="xenfocus_userStyles" group_name="xenfocus_user" title="User panel styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="100" css_components="text,background,border,border_radius" addon_id="">
7813 <value>{
7814 "color": "rgb(255, 255, 255)",
7815 "font-weight": "@xf-fontWeightHeavy",
7816 "border-radius": "3px"
7817}</value>
7818 </property>
7819 <property property_name="xenfocus_widthEnable" group_name="xenfocus_wrapper" title="Fluid width?" description="If enabled, your site will occupy the full width of the browser." property_type="value" value_type="boolean" depends_on="" value_group="xenfocus_width" display_order="115" addon_id="">
7820 <value>0</value>
7821 </property>
7822 <property property_name="xenfocus_widthToggle" group_name="xenfocus_themeEditor" title="Allow members to toggle "Fluid width"?" description="If enabled, your members will be able to toggle "Fluid width" on and off using the theme editor." property_type="value" value_type="boolean" depends_on="xenfocus_themeEditor" value_group="" display_order="75" addon_id="">
7823 <value>1</value>
7824 </property>
7825 <property property_name="xenfocus_wrapperStyles" group_name="xenfocus_wrapper" title="Wrapper styles" description="" property_type="css" value_type="" depends_on="" value_group="" display_order="10" css_components="background,border_width_simple,border_color_simple,border_radius_simple,extra" addon_id="">
7826 <value>{
7827 "background-color": "@xf-textColor"
7828}</value>
7829 </property>
7830 <property property_name="xenfocus_zebra" group_name="xenfocus_other" title="Zebra rows" description="If enabled, alternating background colours will be used for nodes and topics." property_type="value" value_type="boolean" depends_on="" value_group="" display_order="20" addon_id="">
7831 <value>1</value>
7832 </property>
7833 </properties>
7834</style>