Fixed header template and updated popover
authorAlexander Ebert <ebert@woltlab.com>
Sat, 24 Oct 2015 13:02:02 +0000 (15:02 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Sat, 24 Oct 2015 13:02:02 +0000 (15:02 +0200)
com.woltlab.wcf/templates/header.tpl
wcfsetup/install/files/style/ui/popover.scss [new file with mode: 0644]

index 93695134e23f00c81b521379274fca7ef292697a..6dd9f0c5877658bdff5ddff082927e619ff60f87 100644 (file)
-<!DOCTYPE html>
-<html dir="{@$__wcf->getLanguage()->getPageDirection()}" lang="{@$__wcf->getLanguage()->getFixedLanguageCode()}">
-<head>
-       <base href="{$baseHref}" />
-       <meta charset="utf-8" />
-       <meta name="robots" content="noindex" />
-       <title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
-       
-       <!-- Stylesheets -->
-       {@$__wcf->getStyleHandler()->getStylesheet(true)}
-       {event name='stylesheets'}
-       
-       <!-- Icons -->
-       <link rel="shortcut icon" href="{@$__wcf->getPath()}images/favicon.ico" />
-       <link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png" />
-       
-       <script>
-               var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
-               var WCF_PATH = '{@$__wcf->getPath()}';
-               var SECURITY_TOKEN = '{@SECURITY_TOKEN}';
-               var LANGUAGE_ID = {@$__wcf->getLanguage()->languageID};
-               var TIME_NOW = {@TIME_NOW};
-               var URL_LEGACY_MODE = {if URL_LEGACY_MODE}true{else}false{/if};
-       </script>
-       
-       {js application='wcf' file='require' bundle='WCF.Core' core='true'}
-       {js application='wcf' file='require.config' bundle='WCF.Core' core='true'}
-       {js application='wcf' file='require.linearExecution' bundle='WCF.Core' core='true'}
-       {js application='wcf' file='wcf.globalHelper' bundle='WCF.Core' core='true'}
-       <script>
-               requirejs.config({
-                       baseUrl: '{@$__wcf->getPath()}js'
-               });
-       </script>
-       <script>
-               document.addEventListener('DOMContentLoaded', function() {
-               require(['Language', 'WoltLab/WCF/Acp/Bootstrap'], function(Language, AcpBootstrap) {
-                       Language.addObject({
-                               '__days': [ '{lang}wcf.date.day.sunday{/lang}', '{lang}wcf.date.day.monday{/lang}', '{lang}wcf.date.day.tuesday{/lang}', '{lang}wcf.date.day.wednesday{/lang}', '{lang}wcf.date.day.thursday{/lang}', '{lang}wcf.date.day.friday{/lang}', '{lang}wcf.date.day.saturday{/lang}' ],
-                               '__daysShort': [ '{lang}wcf.date.day.sun{/lang}', '{lang}wcf.date.day.mon{/lang}', '{lang}wcf.date.day.tue{/lang}', '{lang}wcf.date.day.wed{/lang}', '{lang}wcf.date.day.thu{/lang}', '{lang}wcf.date.day.fri{/lang}', '{lang}wcf.date.day.sat{/lang}' ],
-                               '__months': [ '{lang}wcf.date.month.january{/lang}', '{lang}wcf.date.month.february{/lang}', '{lang}wcf.date.month.march{/lang}', '{lang}wcf.date.month.april{/lang}', '{lang}wcf.date.month.may{/lang}', '{lang}wcf.date.month.june{/lang}', '{lang}wcf.date.month.july{/lang}', '{lang}wcf.date.month.august{/lang}', '{lang}wcf.date.month.september{/lang}', '{lang}wcf.date.month.october{/lang}', '{lang}wcf.date.month.november{/lang}', '{lang}wcf.date.month.december{/lang}' ], 
-                               '__monthsShort': [ '{lang}wcf.date.month.short.jan{/lang}', '{lang}wcf.date.month.short.feb{/lang}', '{lang}wcf.date.month.short.mar{/lang}', '{lang}wcf.date.month.short.apr{/lang}', '{lang}wcf.date.month.short.may{/lang}', '{lang}wcf.date.month.short.jun{/lang}', '{lang}wcf.date.month.short.jul{/lang}', '{lang}wcf.date.month.short.aug{/lang}', '{lang}wcf.date.month.short.sep{/lang}', '{lang}wcf.date.month.short.oct{/lang}', '{lang}wcf.date.month.short.nov{/lang}', '{lang}wcf.date.month.short.dec{/lang}' ],
-                               'wcf.acp.search.noResults': '{lang}wcf.acp.search.noResults{/lang}',
-                               'wcf.clipboard.item.unmarkAll': '{lang}wcf.clipboard.item.unmarkAll{/lang}',
-                               'wcf.date.relative.now': '{lang}wcf.date.relative.now{/lang}',
-                               'wcf.date.relative.minutes': '{capture assign=relativeMinutes}{lang}wcf.date.relative.minutes{/lang}{/capture}{@$relativeMinutes|encodeJS}',
-                               'wcf.date.relative.hours': '{capture assign=relativeHours}{lang}wcf.date.relative.hours{/lang}{/capture}{@$relativeHours|encodeJS}',
-                               'wcf.date.relative.pastDays': '{capture assign=relativePastDays}{lang}wcf.date.relative.pastDays{/lang}{/capture}{@$relativePastDays|encodeJS}',
-                               'wcf.date.dateFormat': '{lang}wcf.date.dateFormat{/lang}',
-                               'wcf.date.dateTimeFormat': '{lang}wcf.date.dateTimeFormat{/lang}',
-                               'wcf.date.shortDateTimeFormat': '{lang}wcf.date.shortDateTimeFormat{/lang}',
-                               'wcf.date.hour': '{lang}wcf.date.hour{/lang}',
-                               'wcf.date.minute': '{lang}wcf.date.minute{/lang}',
-                               'wcf.date.timeFormat': '{lang}wcf.date.timeFormat{/lang}',
-                               'wcf.date.firstDayOfTheWeek': '{lang}wcf.date.firstDayOfTheWeek{/lang}',
-                               'wcf.global.button.add': '{lang}wcf.global.button.add{/lang}',
-                               'wcf.global.button.cancel': '{lang}wcf.global.button.cancel{/lang}',
-                               'wcf.global.button.close': '{lang}wcf.global.button.close{/lang}',
-                               'wcf.global.button.collapsible': '{lang}wcf.global.button.collapsible{/lang}',
-                               'wcf.global.button.delete': '{lang}wcf.global.button.delete{/lang}',
-                               'wcf.global.button.disable': '{lang}wcf.global.button.disable{/lang}',
-                               'wcf.global.button.disabledI18n': '{lang}wcf.global.button.disabledI18n{/lang}',
-                               'wcf.global.button.edit': '{lang}wcf.global.button.edit{/lang}',
-                               'wcf.global.button.enable': '{lang}wcf.global.button.enable{/lang}',
-                               'wcf.global.button.hide': '{lang}wcf.global.button.hide{/lang}',
-                               'wcf.global.button.next': '{lang}wcf.global.button.next{/lang}',
-                               'wcf.global.button.preview': '{lang}wcf.global.button.preview{/lang}',
-                               'wcf.global.button.reset': '{lang}wcf.global.button.reset{/lang}',
-                               'wcf.global.button.save': '{lang}wcf.global.button.save{/lang}',
-                               'wcf.global.button.search': '{lang}wcf.global.button.search{/lang}',
-                               'wcf.global.button.submit': '{lang}wcf.global.button.submit{/lang}',
-                               'wcf.global.button.upload': '{lang}wcf.global.button.upload{/lang}',
-                               'wcf.global.confirmation.cancel': '{lang}wcf.global.confirmation.cancel{/lang}',
-                               'wcf.global.confirmation.confirm': '{lang}wcf.global.confirmation.confirm{/lang}',
-                               'wcf.global.confirmation.title': '{lang}wcf.global.confirmation.title{/lang}',
-                               'wcf.global.decimalPoint': '{capture assign=decimalPoint}{lang}wcf.global.decimalPoint{/lang}{/capture}{$decimalPoint|encodeJS}',
-                               'wcf.global.error.timeout': '{lang}wcf.global.error.timeout{/lang}',
-                               'wcf.global.error.title': '{lang}wcf.global.error.title{/lang}',
-                               'wcf.global.form.error.empty': '{lang}wcf.global.form.error.empty{/lang}',
-                               'wcf.global.form.error.greaterThan': '{lang __literal=true}wcf.global.form.error.greaterThan{/lang}',
-                               'wcf.global.form.error.lessThan': '{lang __literal=true}wcf.global.form.error.lessThan{/lang}',
-                               'wcf.global.loading': '{lang}wcf.global.loading{/lang}',
-                               'wcf.global.page.jumpTo': '{lang}wcf.global.page.jumpTo{/lang}',
-                               'wcf.global.page.jumpTo.description': '{lang}wcf.global.page.jumpTo.description{/lang}',
-                               'wcf.global.page.pageNavigation': '{lang}wcf.global.page.pageNavigation{/lang}',
-                               'wcf.global.page.next': '{capture assign=pageNext}{lang}wcf.global.page.next{/lang}{/capture}{@$pageNext|encodeJS}',
-                               'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}',
-                               'wcf.global.pageDirection': '{lang}wcf.global.pageDirection{/lang}',
-                               'wcf.global.reason': '{lang}wcf.global.reason{/lang}',
-                               'wcf.global.success': '{lang}wcf.global.success{/lang}',
-                               'wcf.global.success.add': '{lang}wcf.global.success.add{/lang}',
-                               'wcf.global.success.edit': '{lang}wcf.global.success.edit{/lang}',
-                               'wcf.global.thousandsSeparator': '{capture assign=thousandsSeparator}{lang}wcf.global.thousandsSeparator{/lang}{/capture}{@$thousandsSeparator|encodeJS}',
-                               'wcf.page.pagePosition': '{lang __literal=true}wcf.page.pagePosition{/lang}'
-                               {event name='javascriptLanguageImport'}
-                       });
-                       
-                       AcpBootstrap.setup();
-               });
-               });
-       </script>
-       {js application='wcf' lib='jquery'}
-       
-       <script>
-               // prevent jQuery and other libraries from utilizing define()
-               __require_define_amd = define.amd;
-               define.amd = undefined;
-       </script>
-       {js application='wcf' lib='jquery-ui'}
-       {js application='wcf' lib='jquery-ui' file='touchPunch' bundle='WCF.Combined'}
-       {js application='wcf' lib='jquery-ui' file='nestedSortable' bundle='WCF.Combined'}
-       {js application='wcf' file='WCF.Assets' bundle='WCF.Combined'}
-       {js application='wcf' file='WCF' bundle='WCF.Combined'}
-       {js application='wcf' acp='true' file='WCF.ACP'}
-       <script>
-               define.amd = __require_define_amd;
-               $.holdReady(true);
-               WCF.User.init({$__wcf->user->userID}, '{@$__wcf->user->username|encodeJS}');
-       </script>
-       <script>
-               $(function() {
-                       {* work-around for unknown core-object during WCFSetup *}
-                       {if PACKAGE_ID}
-                               {assign var=activeMenuItems value=$__wcf->getACPMenu()->getActiveMenuItems()|array_reverse}
-                               var $activeMenuItems = [{implode from=$activeMenuItems item=_menuItem}'{$_menuItem}'{/implode}];
-                               new WCF.ACP.Menu($activeMenuItems);
-                       {/if}
-                       
-                       if (jQuery.browser.touch) $('html').addClass('touch');
-                       
-                       new WCF.Effect.SmoothScroll();
-                       WCF.System.PageNavigation.init('.pageNavigation');
-                       
-                       {if $__wcf->user->userID}
-                               new WCF.ACP.Search();
-                       {/if}
-                       
-                       {event name='javascriptInit'}
-                       
-                       $('form[method=get]').attr('method', 'post');
-               });
-       </script>
-       {event name='javascriptInclude'}
-</head>
+<a id="top"></a>
 
-<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="wcfAcp">
-       <a id="top"></a>
+<div id="pageContainer" class="pageContainer">
+       {event name='beforePageHeader'}
        
        {include file='pageHeader'}
        
-       {*
-       <header id="pageHeader" class="layoutFluid">
-               <div>
-                       {if $__wcf->user->userID}
-                               <nav id="topMenu" class="userPanel">
-                                       <div class="layoutFluid">
-                                               <ul class="userPanelItems">
-                                                       <li id="userMenu" class="dropdown">
-                                                               <a class="dropdownToggle framed" data-toggle="userMenu">{if PACKAGE_ID}{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)} {/if}{lang}wcf.user.userNote{/lang}</a>
-                                                               <ul class="dropdownMenu">
-                                                                       {if PACKAGE_ID > 1}
-                                                                               <li><a href="{link controller='User' object=$__wcf->user forceFrontend=true}{/link}" class="box32">
-                                                                                       <div class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</div>
-                                                                                       
-                                                                                       <div class="containerHeadline">
-                                                                                               <h3>{$__wcf->user->username}</h3>
-                                                                                               <small>{lang}wcf.user.myProfile{/lang}</small>
-                                                                                       </div>
-                                                                               </a></li>
-                                                                               {if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user forceFrontend=true}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
-                                                                               <li><a href="{link controller='Settings' forceFrontend=true}{/link}">{lang}wcf.user.menu.settings{/lang}</a></li>
-                                                                               
-                                                                               {event name='userMenuItems'}
-                                                                               
-                                                                               <li class="dropdownDivider"></li>
-                                                                       {/if}
-                                                                       <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" onclick="WCF.System.Confirmation.show('{lang}wcf.user.logout.sure{/lang}', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">{lang}wcf.user.logout{/lang}</a></li>
-                                                               </ul>
-                                                       </li>
-                                                       
-                                                       {if PACKAGE_ID > 1}
-                                                               <li id="jumpToPage" class="dropdown">
-                                                                       <a href="{link forceFrontend=true}{/link}" class="dropdownToggle" data-toggle="jumpToPage"><span class="icon icon16 icon-home"></span> <span>{lang}wcf.global.jumpToPage{/lang}</span></a>
-                                                                       <ul class="dropdownMenu">
-                                                                               {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=_menuItem}
-                                                                                       <li><a href="{$_menuItem->getProcessor()->getLink()}">{lang}{$_menuItem->menuItem}{/lang}</a></li>
-                                                                               {/foreach}
-                                                                       </ul>
-                                                               </li>
-                                                               
-                                                               {if $__wcf->session->getPermission('admin.system.package.canUpdatePackage') && $__wcf->getAvailableUpdates()}
-                                                                       <li>
-                                                                               <a href="{link controller='PackageUpdate'}{/link}"><span class="icon icon16 icon-refresh"></span> <span>{lang}wcf.acp.package.updates{/lang}</span> <span class="badge badgeInverse">{#$__wcf->getAvailableUpdates()}</span></a>
-                                                                       </li>
-                                                               {/if}
-                                                       {/if}
-                                                                                                               
-                                                       <li id="woltlab" class="dropdown">
-                                                               <a class="dropdownToggle" data-toggle="woltlab"><span class="icon icon16 icon-info-sign"></span> <span>WoltLab&reg;</span></a>
-                                                               
-                                                               <ul class="dropdownMenu">
-                                                                       <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
-                                                                       <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
-                                                                       <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
-                                                                       <li><a class="externalURL" href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://pluginstore.woltlab.com"|rawurlencode}"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
-                                                               </ul>
-                                                       </li>
-                                                       
-                                                       {event name='topMenu'}
-                                               </ul>
-                                               
-                                               {if $__wcf->getSession()->getPermission('admin.general.canUseAcp')}
-                                                       <aside id="search" class="searchBar">
-                                                               <form>
-                                                                       <input type="search" name="q" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" value="" />
-                                                               </form>
-                                                       </aside>
-                                               {/if}
-                                       </div>
-                               </nav>
-                       {/if}
-                       
-                       <div id="logo" class="logo">
-                               <a href="{link}{/link}">
-                                       <h1>{lang}wcf.global.acp{/lang}</h1>
-                                       {if PACKAGE_ID > 1}
-                                               {event name='headerLogo'}
-                                       {else}
-                                               <img src="{@$__wcf->getPath()}acp/images/wcfLogo.png" alt="" style="height: 80px; width: 502px;" />
-                                       {/if}
-                               </a>
-                       </div>
-                       
-                       *}{* work-around for unknown core-object during WCFSetup *}{*
-                       {if PACKAGE_ID && $__wcf->user->userID}
-                               {hascontent}
-                                       <nav id="mainMenu" class="mainMenu">
-                                               <ul>{content}{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_menuItem}<li data-menu-item="{$_menuItem->menuItem}"><a>{lang}{@$_menuItem->menuItem}{/lang}</a></li>{/foreach}{/content}</ul>
-                                       </nav>
-                               {/hascontent}
-                       {/if}
-                       
-                       <nav class="navigation navigationHeader">
-                               <ul class="navigationIcons">
-                                       <li id="toBottomLink" class="toBottomLink"><a href="{@$__wcf->getAnchor('bottom')}" title="{lang}wcf.global.scrollDown{/lang}" class="jsTooltip"><span class="icon icon16 icon-arrow-down"></span> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
-                                       {event name='navigationIcons'}
-                               </ul>
-                       </nav>
-               </div>
-       </header>
-       *}
+       {event name='afterPageHeader'}
+       
+       {include file='pageNavbarTop'}
        
-       <div id="main" class="layoutFluid{if PACKAGE_ID && $__wcf->user->userID && $__wcf->getACPMenu()->getMenuItems('')|count} sidebarOrientationLeft{/if}">
-               <div>
-                       <div>
-                               {hascontent}
-                                       <aside class="sidebar collapsibleMenu">
-                                               <div>
-                                                       {content}
-                                                               {* work-around for unknown core-object during WCFSetup *}
-                                                               {if PACKAGE_ID && $__wcf->user->userID}
-                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_parentMenuItem}
-                                                                               <div id="{$_parentMenuItem->menuItem}-container" style="display: none;" class="menuGroup collapsibleMenus" data-parent-menu-item="{$_parentMenuItem->menuItem}">
-                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($_parentMenuItem->menuItem) item=_menuItem}
-                                                                                               <fieldset>
-                                                                                                       <legend class="menuHeader" data-menu-item="{$_menuItem->menuItem}">{@$_menuItem}</legend>
-                                                                                                       
-                                                                                                       <nav class="menuGroupItems">
-                                                                                                               <ul id="{$_menuItem->menuItem}">
-                                                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem) item=menuItemCategory}
-                                                                                                                               {if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
-                                                                                                                                       {foreach from=$__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem) item=subMenuItem}
-                                                                                                                                               <li id="{$subMenuItem->menuItem}" data-menu-item="{$subMenuItem->menuItem}"><a href="{$subMenuItem->getLink()}">{@$subMenuItem}</a></li>
-                                                                                                                                       {/foreach}
-                                                                                                                               {else}
-                                                                                                                                       <li id="{$menuItemCategory->menuItem}" data-menu-item="{$menuItemCategory->menuItem}"><a href="{$menuItemCategory->getLink()}">{@$menuItemCategory}</a></li>
-                                                                                                                               {/if}
-                                                                                                                       {/foreach}
-                                                                                                               </ul>
-                                                                                                       </nav>
-                                                                                               </fieldset>
-                                                                                       {/foreach}
-                                                                               </div>
-                                                                       {/foreach}
-                                                               {/if}
-                                                       {/content}
-                                               </div>
+       <section id="main" class="main" role="main">
+               <div class="{if $__wcf->getStyleHandler()->getStyle()->getVariable('useFluidLayout')}layoutFluid{else}layoutFixed{/if}">
+                       {capture assign='__sidebar'}
+                               {if $sidebar|isset}
+                                       <aside class="sidebar"{if $sidebarOrientation|isset && $sidebarOrientation == 'right'} data-is-open="{if $sidebarCollapsed}false{else}true{/if}" data-sidebar-name="{$sidebarName}"{/if}>
+                                               {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.top')}{/if}
+                                               
+                                               {event name='sidebarBoxesTop'}
+                                               
+                                               {@$sidebar}
+                                               
+                                               {event name='sidebarBoxesBottom'}
+                                               
+                                               {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.sidebar.bottom')}{/if}
                                        </aside>
-                               {/hascontent}
                                
-                               <section id="content" class="content">
+                               {if $sidebarOrientation|isset && $sidebarOrientation == 'right'}
+                                       <script data-relocate="true">
+                                               require(['WoltLab/WCF/Ui/Collapsible/Sidebar'], function(UiCollapsibleSidebar) {
+                                                       UiCollapsibleSidebar.setup();
+                                               });
+                                       </script>
+                               {/if}
+                               {/if}
+                       {/capture}
+                       
+                       {if !$sidebarOrientation|isset || $sidebarOrientation == 'left'}
+                               {@$__sidebar}
+                       {/if}
+                       
+                       <div id="content" class="content">
+                               {if MODULE_WCF_AD && $__disableAds|empty}{@$__wcf->getAdHandler()->getAds('com.woltlab.wcf.header.content')}{/if}
                                
+                               {event name='contents'}
diff --git a/wcfsetup/install/files/style/ui/popover.scss b/wcfsetup/install/files/style/ui/popover.scss
new file mode 100644 (file)
index 0000000..abe8880
--- /dev/null
@@ -0,0 +1,116 @@
+.popover {
+       background-color: $wcfContentBackground;
+       border: 1px solid $wcfContentBorder;
+       opacity: 0;
+       position: absolute;
+       top: 0;
+       vertical-align: middle;
+       visibility: hidden;
+       width: 400px !important;
+       z-index: 500;
+       
+       @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
+       
+       transition: visibility 0s linear .3s, opacity .3s linear;
+       
+       &.active {
+               opacity: 1;
+               visibility: visible;
+               
+               transition-delay: 0s;
+       }
+       
+       &.disableAnimation {
+               transition: none !important;
+               
+               > .popoverContent {
+                       transition: none !important;
+               }
+               
+               > .elementPointer > span {
+                       transition: none !important;
+               }
+       }
+       
+       > .popoverContent {
+               background-color: $wcfContentBackground;
+               border-radius: 3px;
+               color: $wcfContentText;
+               max-height: 320px;
+               min-height: 36px;
+               opacity: 1;
+               overflow: hidden;
+               padding: 10px;
+               
+               transition: opacity .3s linear;
+               
+               a {
+                       color: $wcfContentLink;
+                       
+                       &:hover {
+                               color: $wcfContentLinkActive;
+                       }
+               }
+               
+               &:not(.loading) {
+                       ~ .fa-spinner {
+                               display: none;
+                       }
+                       
+                       ~ .elementPointer {
+                               > span {
+                                       border-color: $wcfContentBackground $wcfContentBorder;
+                                       border-style: solid;
+                                       border-width: 0 5px 5px;
+                                       left: -5px;
+                                       opacity: 1;
+                                       position: absolute;
+                                       top: 3px;
+                                       
+                                       transition: opacity .3s linear;
+                               }
+                               
+                               &.flipVertical > span {
+                                       border-width: 5px 5px 0;
+                                       bottom: 3px;
+                                       top: auto;
+                               }
+                       }
+               }
+               
+               &.loading {
+                       opacity: 0;
+                       transition: height .3s linear, opacity 0s;
+                       
+                       ~ .elementPointer > span {
+                               opacity: 0;
+                               
+                               transition: opacity 0s;
+                       }
+               }
+       }
+       
+       > .elementPointer {
+               border-color: rgba(0, 0, 0, .4) transparent;
+               border-style: solid;
+               border-width: 0 6px 6px;
+               top: -2px;
+               
+               &.flipVertical {
+                       border-width: 6px 6px 0;
+                       bottom: -2px;
+                       top: auto;
+               }
+       }
+       
+       > .fa-spinner {
+               color: rgba(255, 255, 255, 1);
+               left: 50%;
+               margin-left: -14px;
+               margin-top: -14px;
+               position: absolute;
+               top: 50%;
+               
+               @include textShadow(black);
+       }
+}