.spBoundary { margin: 0 40px; }
/* ### header ### */
-#spHeader > .spBoundary { display: flex; flex-wrap: wrap; padding: 15px 0; }
+#spHeader > .spBoundary { display: flex; flex-wrap: wrap; padding: 30px 0; }
#spLogo { flex: 0 0 50%; }
#spLogo > img { height: 40px; }
#spSearch { flex: 0 0 50%; }
-#spSearchBox { border: 1px solid #fff; }
-#spMenu { flex: 0 0 50%; }
+#spSearchBox { border-width: 0; }
#spUser { flex: 0 0 50%; }
-#spLogo, #spSearch, #spMenu, #spUser { align-items: center; display: flex; }
+#spLogo, #spSearch { align-items: center; display: flex; }
#spSearch, #spUser { justify-content: flex-end; }
/* ### menu ### */
-#spMenu > ol > li:not(:last-child) { margin-right: 10px; }
-#spMenu > ol > li > a { font-size: 14px; font-weight: 400; padding: 2px 7px; }
-#spMenu > ol > li.active > a { font-weight: 600; }
-#spMenu > ol > li.active > a::after { content: "\f0d7"; display: inline-block; font-family: FontAwesome; margin-left: 5px; }
-#spMenu > ol > li.active { position: relative; }
-#spSubMenu { border-bottom: 1px solid #fff; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); margin-top: 3px; padding: 3px 0; position: absolute; }
+#spHeaderPanel ol.inlineList > li { margin-right: 0; }
+#spHeaderPanel ol.inlineList > li > a { align-items: center; display: flex; font-size: 14px; font-weight: 400; height: 50px; padding: 0 15px; }
+#spHeaderPanel ol.inlineList > li.active > a::after { content: "\f107"; display: inline-block; font-family: FontAwesome; margin-left: 5px; }
+#spHeaderPanel ol.inlineList > li.active { position: relative; }
+#spSubMenu { border-bottom: 1px solid #fff; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); padding: 3px 0; position: absolute; }
#spSubMenu > li > a { display: block; padding: 5px 20px; white-space: nowrap; width: 120px; }
/* ### navigation ### */
/* ### button ### */
#spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; }
+#spButtonPrimary { margin-top: 10px; }
/* ### dropdown ### */
-#spDropdown { display: inline-block; float: none; position: relative; }
+#spDropdown { display: inline-block; float: none; position: relative; visibility: visible; }
/* ### footer box ### */
#spFooterBox > .spBoundary { display: flex; justify-content: space-between; padding: 15px 0; }
.spSidebarBox.pointer { position: relative; }
.spSidebarBox.pointer::before { border: 10px solid transparent; border-right-color: rgb(217, 237, 247); content: ""; display: block; left: -20px; position: absolute; }
.spColor { align-items: center; }
+.spColor:not(:first-child) { margin-top: 5px; }
.spColorBox { background-color: #fff; border: 1px solid #ccc; margin-right: 10px !important; padding: 1px; }
.spColorBox > span { display: block; height: 24px; width: 24px; }
.spVariable, .spDescription { display: block; font-size: 12px; }
{* colors *}
<div id="colors" class="tabMenuContent">
<div class="section">
- <p class="error" style="margin-bottom: 20px">TODO: outdated!</p>
<div id="spWrapper">
<div id="spWindow">
+ <div id="spHeaderPanel" data-region="wcfHeaderMenu">
+ <div class="spBoundary">
+ <ol class="inlineList">
+ <li><a>Lorem</a></li>
+ <li><a>Ipsum Dolor</a></li>
+ <li><a>Sit Amet</a></li>
+ <li><a>Consetetur</a></li>
+
+ <li class="active">
+ <a>Sadipscing</a>
+ <ol id="spSubMenu" data-region="wcfHeaderMenuDropdown">
+ <li><a>Lorem</a></li>
+ <li><a>Ipsum</a></li>
+ <li class="active"><a>Dolor Sit</a></li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ </div>
+
<div id="spHeader" data-region="wcfHeader">
<div class="spBoundary">
<div id="spLogo"><img src="{@$__wcf->getPath()}acp/images/woltlabSuite.png"></div>
<div id="spSearch"><input type="search" id="spSearchBox" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" autocomplete="off" data-region="wcfHeaderSearchBox"></div>
- <div id="spMenu">
- <ol class="inlineList" data-region="wcfHeaderMenu">
- <li><a>Lorem</a></li>
- <li><a>Ipsum Dolor</a></li>
- <li class="active">
- <a>Sit Amet</a>
- <ol id="spSubMenu" data-region="wcfHeaderMenuDropdown">
- <li><a>Lorem</a></li>
- <li><a>Ipsum</a></li>
- <li class="active"><a>Dolor Sit</a></li>
- </ol>
- </li>
- </ol>
- </div>
- <div id="spUser"></div>
</div>
</div>
<div id="spContentWrapper">
<div class="spHeadline" data-region="wcfContentHeadline">Lorem Ipsum</div>
- <p data-region="wcfContent">
+ <div data-region="wcfContent">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a>At vero eos</a> et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div id="spContentBorderInner"></div>
<div id="spContentDimmed" data-region="wcfContentDimmed">
Stet clita kasd gubergren, <a>no sea takimata</a> sanctus est Lorem ipsum dolor sit amet.
</div>
- </p>
+ </div>
<div class="spHeadline">Tabular Box</div>
'wcfHeaderSearchBoxPlaceholder': '#spSearchBox::-webkit-input-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox::-moz-placeholder { color: VALUE; } __COMBO_RULE__ #spSearchBox:-ms-input-placeholder { color: VALUE; }',
'wcfHeaderSearchBoxBackgroundActive': '#spSearchBox:focus, #spSearchBox:hover { background-color: VALUE; }',
'wcfHeaderSearchBoxTextActive': '#spSearchBox:focus, #spSearchBox:hover { color: VALUE; }',
- 'wcfHeaderMenuBackground': '#spMenu > ol > li > a { background-color: VALUE; }',
- 'wcfHeaderMenuLink': '#spMenu > ol > li > a { color: VALUE; }',
- 'wcfHeaderMenuBackgroundActive': '#spMenu > ol > li.active > a, #spMenu > ol > li > a:hover { background-color: VALUE; }',
- 'wcfHeaderMenuLinkActive': '#spMenu > ol > li.active > a, #spMenu > ol > li > a:hover { color: VALUE; }',
+ 'wcfHeaderMenuBackground': '#spHeaderPanel { background-color: VALUE; }',
+ 'wcfHeaderMenuLinkBackground': '#spHeaderPanel ol.inlineList > li > a { background-color: VALUE; }',
+ 'wcfHeaderMenuLinkBackgroundActive': '#spHeaderPanel ol.inlineList > li.active > a, #spHeaderPanel ol.inlineList > li > a:hover { background-color: VALUE; }',
+ 'wcfHeaderMenuLink': '#spHeaderPanel ol.inlineList > li > a { color: VALUE; }',
+ 'wcfHeaderMenuLinkActive': '#spHeaderPanel ol.inlineList > li.active > a, #spHeaderPanel ol.inlineList > li > a:hover { color: VALUE; }',
'wcfHeaderMenuDropdownBackground': '#spSubMenu { background-color: VALUE; }',
'wcfHeaderMenuDropdownBorder': '#spSubMenu { border-color: VALUE; }',
'wcfHeaderMenuDropdownLink': '#spSubMenu li > a { color: VALUE; }',
$this->colors = [
'wcfHeader' => ['background', 'text', 'link', 'linkActive'],
'wcfHeaderSearchBox' => ['background', 'text', 'placeholder', 'backgroundActive', 'textActive'],
- 'wcfHeaderMenu' => ['background', 'link', 'linkActive'],
+ 'wcfHeaderMenu' => ['background', 'linkBackground', 'linkBackgroundActive', 'link', 'linkActive'],
'wcfHeaderMenuDropdown' => ['background', 'border', 'link', 'backgroundActive', 'linkActive'],
'wcfNavigation' => ['background', 'text', 'link', 'linkActive'],
'wcfSidebar' => ['background', 'text', 'link', 'linkActive'],
projects / GitHub / WoltLab / WCF.git / commitdiff