text-decoration: underline;
}
-a.externalLink {
- background-image: url("../../icon/externalLink.svg");
+a.externalURL {
+ background-image: url("../../icon/externalURL.svg");
background-position: right center;
background-repeat: no-repeat;
padding-right: 17px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin: 0 23px;
- padding: 3px 7px;
position: relative;
+ min-width: 800px;
}
nav.headerNavigation:after {
clear: both;
}
+nav.headerNavigation > div {
+ padding: 3px 7px;
+}
+
+nav.headerNavigation > div:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
nav.headerNavigation ul {
display: block;
}
div.main {
margin: 0 23px;
+ min-width: 800px;
}
/* -- -- -- -- -- Content -- -- -- -- -- */
position: relative;
text-align: center;
position: relative;
+ min-width: 800px;
}
footer.pageFooter:after {
+/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
+/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
+
+/* Tab Menu */
+
+.tabMenu {
+ text-shadow: 0 1px 0 #fff;
+ background-color: none;
+ white-space: nowrap;
+ position: relative;
+ display: block;
+ text-align: center;
+ padding: 0 5px;
+}
+
+.tabMenu:after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+.tabMenu li {
+ list-style: none;
+ display: inline-block;
+ white-space: nowrap;
+ z-index: 90; /* Prevents border overlay during transition */
+}
+
+.tabMenu li a {
+ color: #999;
+ font-size: 110%;
+ padding: 10px 15px 7px;
+ text-decoration: none;
+ border: 1px solid #ccc;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ display: inline-block;
+ background-color: rgba(245, 245, 245, .5);
+}
+
+.tabMenu li a:hover {
+ color: #666;
+}
+
+.tabMenu li.ui-tabs-selected {
+ margin-bottom: 0;
+ padding-bottom: 1px;
+}
+
+.tabMenu li.ui-state-active a {
+ color: #333 !important;
+ font-weight: bold;
+ font-size: 130%;
+ border-bottom: 1px solid #fff;
+ background-color: rgba(255, 255, 255, 1);
+}
+
+.tabMenu li.ui-state-active a,
+.tabMenu li.ui-state-disabled a,
+.tabMenu li.ui-state-processing a {
+ cursor: default;
+}
+
+.tabMenu li a,
+.ui-tabs .ui-tabs-collapsible .ui-tabs-nav li.ui-state-active a {
+ cursor: pointer;
+}
+
+/* Tab Menu Content */
+
+.tabMenuContent {
+ border: 1px solid #ccc;
+ background-color: rgba(255, 255, 255, 1);
+ z-index: 89; /* Prevents border overlay during transition */
+ display: block;
+ margin: -2px 0 0;
+ padding: 15px 23px;
+}
+
+/* ToDo: 2x hidden? */
+
+.ui-tabs .ui-tabs-hide {
+ display: none !important;
+}
+
+.ui-helper-hidden {
+ display: none;
+}
+
+.ui-helper-hidden-accessible {
+ position: absolute !important;
+ clip: rect(1px 1px 1px 1px);
+ clip: rect(1px,1px,1px,1px);
+}
+
+.ui-helper-clearfix:after {
+ content: "";
+ display: block;
+ height: 0;
+ clear: both;
+}
+
+
+
/* -- -- -- -- -- Menu -- -- -- -- -- */
.menu {
- color: #fff;
- padding: 6px 7px;
+ color: #666;
+ margin: -15px -23px 0 -23px;
+ padding: 10px 7px;
+ border-bottom: 1px solid #ccc;
}
.menu ul {
.menu ul li {
display: inline;
+ white-space: nowrap;
}
.menu ul li a {
+ color: #666 !important;
+ font-size: 85%;
+ text-decoration: none;
+ text-shadow: 0 1px 0 #fff;
+ border: 1px solid rgba(0, 0, 0, .3);
+ background-color: rgba(0, 0, 0, .05);
+ padding: 2px 10px;
+ border-radius: 13px;
+
+ -webkit-transition: color .1s linear;
+ -moz-transition: color .1s linear;
+ -ms-transition: color .1s linear;
+ -o-transition: color .1s linear;
+ transition: color .1s linear;
+}
+
+.menu ul li a:hover {
+ color: #333;
+ background-color: rgba(255, 255, 255, 1);
+}
+
+.menu ul li a:active,
+.menu ul li a:focus {
+ border: 1px solid rgba(0, 0, 0, .3);
+ background-color: rgba(255, 255, 255, 1);
+}
+
+.menu ul li.ui-state-active a {
+ border: 1px solid rgba(0, 0, 0, .3);
+ background-color: rgba(255, 255, 255, 1);
+ cursor: default;
+}
+
+/* Special */
+
+.boxTitle > .menu {
+ color: #fff;
+ margin: 0 !important;
+ padding: 6px 7px;
+ border: none;
+}
+
+.boxTitle > .menu ul li a {
color: #eee !important;
font-size: 85%;
text-decoration: none;
transition: color .1s linear;
}
-.menu ul li a:hover {
+.boxTitle > .menu ul li a:hover {
color: #fff !important;
border: 1px solid rgba(0, 0, 0, .3);
background-color: rgba(0, 0, 0, .2);
}
-.menu ul li a:active, .menu ul li a:focus, .menu ul li a.active {
+.boxTitle > .menu ul li a:active,
+.boxTitle > .menu ul li a:focus,
+.boxTitle > .menu ul li.ui-state-active a {
border: 1px solid rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 0 2px 15px rgba(0, 0, 0, .5);
-/* -- -- -- -- -- Tab Menu -- -- -- -- -- */
-/* Parts taken from jQuery UI @ themes/base/jquery.ui.tabs.css */
-
-/* Tab Menu */
-
-.tabMenu {
- text-shadow: 0 1px 0 #fff;
- background-color: none;
- white-space: nowrap;
- position: relative;
- display: block;
- text-align: center;
- padding: 0 5px;
-}
-
-.tabMenu:after {
- content: "";
- display: block;
- clear: both;
-}
-
-.tabMenu li {
- list-style: none;
- display: inline-block;
- white-space: nowrap;
- z-index: 90; /* Prevents border overlay during transition */
-}
-
-.tabMenu li a {
- color: #999;
- font-size: 110%;
- padding: 10px 15px 7px;
- text-decoration: none;
- border: 1px solid #ccc;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- display: inline-block;
- /*
- background-color: #fefefe;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
- background-image: -moz-linear-gradient(0% 0% 270deg, #fefefe, #eee);
- background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#eee));
- background-image: -o-linear-gradient(#fefefe, #eee);
- background-image: linear-gradient(#fefefe, #eee);
- */
-}
-
-.tabMenu li a:hover {
- color: #666;
-}
-
-.tabMenu li.ui-tabs-selected {
- margin-bottom: 0;
- padding-bottom: 1px;
-}
-
-.tabMenu li.ui-state-active a {
- color: #333 !important;
- font-weight: bold;
- background-color: rgba(255, 255, 255, .015);
-}
-
-.tabMenu li.ui-tabs-selected a {
- background-color: #fefefe;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(253, 253, 253, 1)));
- background-image: -moz-linear-gradient(0% 0% 270deg, rgba(255, 255, 255, 1), rgba(253, 253, 253, 1));
- background-image: -ms-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(253, 253, 253, 1)));
- background-image: -o-linear-gradient(rgba(255, 255, 255, 1), rgba(253, 253, 253, 1));
- background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(253, 253, 253, 1));
-
- border-bottom: 1px solid rgba(253, 253, 253, 1);
-}
-
-.tabMenu li.ui-tabs-selected a,
-.tabMenu li.ui-state-disabled a,
-.tabMenu li.ui-state-processing a {
- cursor: default;
-}
-
-.tabMenu li a,
-.ui-tabs .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
- cursor: pointer;
-}
-
-/* Tab Menu Content */
-
-.tabMenuContent {
- border: 1px solid #ccc !important;
- background-color: rgba(253, 253, 253, 1);
- z-index: 89; /* Prevents border overlay during transition */
- display: block;
- margin: -2px 0 0;
- padding: 15px 23px;
-}
-
-/* ToDo: 2x hidden? */
-
-.ui-tabs .ui-tabs-hide {
- display: none !important;
-}
-
-.ui-helper-hidden {
- display: none;
-}
-
-.ui-helper-hidden-accessible {
- position: absolute !important;
- clip: rect(1px 1px 1px 1px);
- clip: rect(1px,1px,1px,1px);
-}
-
-.ui-helper-clearfix:after {
- content: "";
- display: block;
- height: 0;
- clear: both;
-}
-
-
-
/* ToDo: Is all that really necessary? We wanted to support good browsers only */
.ui-helper-clearfix {
{/if}
<form method="post" action="index.php?form=Option&categoryID={@$category->categoryID}">
- <div class="tabMenuContainer" data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem">
- <nav>
- <ul class="tabMenu">
+ <div data-active="{$activeTabMenuItem}" data-store="activeTabMenuItem" class="tabMenuContainer">
+ <nav class="tabMenu">
+ <ul>
{foreach from=$optionTree item=categoryLevel1}
<li><a href="#{@$categoryLevel1[object]->categoryName}">{*<span>*}{lang}wcf.acp.option.category.{@$categoryLevel1[object]->categoryName}{/lang}{*</span>*}</a></li>
{/foreach}
{if $package->packageURL != ''}
<dl>
<dt>{lang}wcf.acp.package.view.url{/lang}</dt>
- <dd><a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->packageURL|rawurlencode}" class="externalLink">{$package->packageURL}</a></dd>
+ <dd><a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->packageURL|rawurlencode}" class="externalURL">{$package->packageURL}</a></dd>
</dl>
{/if}
{if $package->parentPackageID}
{/if}
<dl>
<dt>{lang}wcf.acp.package.view.author{/lang}</dt>
- <dd>{if $package->authorURL}<a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->authorURL|rawurlencode}" class="externalLink">{$package->author}</a>{else}{$package->author}{/if}</dd>
+ <dd>{if $package->authorURL}<a href="{@RELATIVE_WCF_DIR}acp/dereferrer.php?url={$package->authorURL|rawurlencode}" class="externalURL">{$package->author}</a>{else}{$package->author}{/if}</dd>
</dl>
{if $additionalFields|isset}{@$additionalFields}{/if}
<!-- ToDo: Something's wrong with the structure of the tab-menu and the enclosed sub-menu! Tab-menus should have the same mark-up as on other pages and allow for an active state -->
<div class="tabMenuContainer" data-active="{$activeSubTabMenuItem}" data-store="activeTabMenuItem">
- <nav>
- <ul class="tabMenu">
+ <nav class="tabMenu">
+ <ul>
{foreach from=$optionTree item=categoryLevel1}
<li id="{@$categoryLevel1[object]->categoryName}"><a href="#{@$categoryLevel1[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel1[object]->categoryName}{/lang}</a></li>
{/foreach}
</nav>
{foreach from=$optionTree item=categoryLevel1}
- <div class="tabMenuContainer" id="{@$categoryLevel1[object]->categoryName}" data-active="{$activeTabMenuItem}" data-store="activeSubTabMenuItem">
- <nav>
- <ul class="menu">
+ <div id="{@$categoryLevel1[object]->categoryName}" data-active="{$activeTabMenuItem}" data-store="activeSubTabMenuItem" class="tabMenuContainer border tabMenuContent ">
+ <nav class="menu">
+ <ul>
{foreach from=$categoryLevel1[categories] item=$categoryLevel2}
<li><a href="#{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}">{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</a></li>
{/foreach}
</nav>
{foreach from=$categoryLevel1[categories] item=categoryLevel2}
- <div class="border tabMenuContent hidden" id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}">
+ <div id="{@$categoryLevel1[object]->categoryName}-{@$categoryLevel2[object]->categoryName}" class="hidden">
<hgroup class="subHeading">
<h1>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}{/lang}</h1>
<h2>{lang}wcf.acp.group.option.category.{@$categoryLevel2[object]->categoryName}.description{/lang}</h2>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8"?>\r
-<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" xml:space="preserve">\r
- \r
- <title>External Link</title> \r
- <desc>External Link</desc> \r
- \r
- <!--\r
- @author Harald Szekely \r
- @copyright 2011 WoltLab GmbH \r
- @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> \r
- --> \r
- \r
- <defs>\r
- \r
- </defs>\r
- \r
- <g id="IconExternalLink">\r
- <g class="Lower">\r
- <path id="LargeSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M4.4545898,3\r
- C4.2045898,3,4,3.2045898,4,3.4545898v9.0913086C4,12.7958984,4.2045898,13,4.4545898,13h9.0913086\r
- C13.7958984,13,14,12.7958984,14,12.5458984V3.4545898C14,3.2045898,13.7958984,3,13.5458984,3H4.4545898z M13,11.5146484\r
- C13,11.7822266,12.7822266,12,12.5146484,12H5.484375C5.2182617,12,5,11.7822266,5,11.5146484V4.484375\r
- C5,4.2182617,5.2182617,4,5.484375,4h7.0302734C12.7822266,4,13,4.2182617,13,4.484375V11.5146484z"/>\r
- <path id="SmallSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M9,13.5\r
- C9,13.7753906,8.7749023,14,8.5,14h-5C3.2250977,14,3,13.7753906,3,13.5v-5C3,8.2246094,3.2250977,8,3.5,8V7h-1\r
- C2.2250977,7,2,7.2250977,2,7.5v7C2,14.7753906,2.2250977,15,2.5,15h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
- </g>\r
- <g class="Upper">\r
- <path id="LargeSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M4.4545898,2\r
- C4.2045898,2,4,2.2045898,4,2.4545898v9.0913086C4,11.7958984,4.2045898,12,4.4545898,12h9.0913086\r
- C13.7958984,12,14,11.7958984,14,11.5458984V2.4545898C14,2.2045898,13.7958984,2,13.5458984,2H4.4545898z M13,10.5146484\r
- C13,10.7822266,12.7822266,11,12.5146484,11H5.484375C5.2182617,11,5,10.7822266,5,10.5146484V3.484375\r
- C5,3.2182617,5.2182617,3,5.484375,3h7.0302734C12.7822266,3,13,3.2182617,13,3.484375V10.5146484z"/>\r
- <path id="SmallSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M9,12.5C9,12.7753906,8.7749023,13,8.5,13\r
- h-5C3.2250977,13,3,12.7753906,3,12.5v-5C3,7.2250977,3.2250977,7,3.5,7V6h-1C2.2250977,6,2,6.2250977,2,6.5v7\r
- C2,13.7753906,2.2250977,14,2.5,14h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
- </g>\r
- </g>\r
-</svg>\r
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>\r
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" xml:space="preserve">\r
+ \r
+ <title>External Link</title> \r
+ <desc>External Link</desc> \r
+ \r
+ <!--\r
+ @author Harald Szekely \r
+ @copyright 2011 WoltLab GmbH \r
+ @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> \r
+ --> \r
+ \r
+ <defs>\r
+ \r
+ </defs>\r
+ \r
+ <g id="IconExternalLink">\r
+ <g class="Lower">\r
+ <path id="LargeSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M4.4545898,3\r
+ C4.2045898,3,4,3.2045898,4,3.4545898v9.0913086C4,12.7958984,4.2045898,13,4.4545898,13h9.0913086\r
+ C13.7958984,13,14,12.7958984,14,12.5458984V3.4545898C14,3.2045898,13.7958984,3,13.5458984,3H4.4545898z M13,11.5146484\r
+ C13,11.7822266,12.7822266,12,12.5146484,12H5.484375C5.2182617,12,5,11.7822266,5,11.5146484V4.484375\r
+ C5,4.2182617,5.2182617,4,5.484375,4h7.0302734C12.7822266,4,13,4.2182617,13,4.484375V11.5146484z"/>\r
+ <path id="SmallSquare1" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M9,13.5\r
+ C9,13.7753906,8.7749023,14,8.5,14h-5C3.2250977,14,3,13.7753906,3,13.5v-5C3,8.2246094,3.2250977,8,3.5,8V7h-1\r
+ C2.2250977,7,2,7.2250977,2,7.5v7C2,14.7753906,2.2250977,15,2.5,15h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
+ </g>\r
+ <g class="Upper">\r
+ <path id="LargeSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M4.4545898,2\r
+ C4.2045898,2,4,2.2045898,4,2.4545898v9.0913086C4,11.7958984,4.2045898,12,4.4545898,12h9.0913086\r
+ C13.7958984,12,14,11.7958984,14,11.5458984V2.4545898C14,2.2045898,13.7958984,2,13.5458984,2H4.4545898z M13,10.5146484\r
+ C13,10.7822266,12.7822266,11,12.5146484,11H5.484375C5.2182617,11,5,10.7822266,5,10.5146484V3.484375\r
+ C5,3.2182617,5.2182617,3,5.484375,3h7.0302734C12.7822266,3,13,3.2182617,13,3.484375V10.5146484z"/>\r
+ <path id="SmallSquare2" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M9,12.5C9,12.7753906,8.7749023,13,8.5,13\r
+ h-5C3.2250977,13,3,12.7753906,3,12.5v-5C3,7.2250977,3.2250977,7,3.5,7V6h-1C2.2250977,6,2,6.2250977,2,6.5v7\r
+ C2,13.7753906,2.2250977,14,2.5,14h7c0.2753906,0,0.5-0.2246094,0.5-0.5v-1H9z"/>\r
+ </g>\r
+ </g>\r
+</svg>\r