From: Luzifr Date: Mon, 13 Feb 2012 19:14:21 +0000 (+0100) Subject: Some simplification X-Git-Tag: 2.0.0_Beta_1~1349 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=1df0736c33daa0abcb01c4bbae36ec0ce55eccaf;p=GitHub%2FWoltLab%2FWCF.git Some simplification The main-menu-submenu is now inherited from the "wcf-menu"-CSS-class. The menu now stretches to fit an unlimited number of items. --- diff --git a/com.woltlab.wcf/template/mainMenuSubMenu.tpl b/com.woltlab.wcf/template/mainMenuSubMenu.tpl index c7d7ee5b7e..cfc498d69b 100644 --- a/com.woltlab.wcf/template/mainMenuSubMenu.tpl +++ b/com.woltlab.wcf/template/mainMenuSubMenu.tpl @@ -1,9 +1,11 @@ {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem} {if $__wcf->getPageMenu()->getMenuItems($menuItem->menuItem)|count > 0} - +
+ +
{/if} {/foreach} \ No newline at end of file diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css index 91e687b8c3..3cf482d4c9 100644 --- a/wcfsetup/install/files/acp/style/wcf.css +++ b/wcfsetup/install/files/acp/style/wcf.css @@ -743,7 +743,9 @@ nav.wcf-topMenu { -/* -- -- -- Header/Footer Navigation & Main Menu Sub Menu -- -- -- */ +/* -- -- -- Header/Footer Navigation -- -- -- */ + +/* Menu Bars */ .wcf-headerNavigation { background-color: #e7f2fd; @@ -793,41 +795,43 @@ nav.wcf-topMenu { clear: both; } -.wcf-headerNavigation ul, -.wcf-footerNavigation ul { - display: block; +/* Icon Menus */ + +.wcf-headerNavigation > div > ul, +.wcf-footerNavigation > div > ul { + float: right; } -.wcf-headerNavigation ul li, -.wcf-footerNavigation ul li { +.wcf-headerNavigation > div > ul > li, +.wcf-footerNavigation > div > ul > li { cursor: pointer; margin: 0 3px; float: right; } -.wcf-headerNavigation ul li a, -.wcf-footerNavigation ul li a { +.wcf-headerNavigation > div > ul > li a, +.wcf-footerNavigation > div > ul > li a { padding: 3px; display: inline-block; } -.wcf-headerNavigation ul li a:hover, -.wcf-footerNavigation ul li a:hover { +.wcf-headerNavigation > div > ul > li a:hover, +.wcf-footerNavigation > div > ul > li a:hover { text-decoration: none; background-color: #d8e7f5; } -.wcf-headerNavigation ul li a:hover:active, -.wcf-headerNavigation ul li a:hover:focus, -.wcf-footerNavigation ul li a:hover:active, -.wcf-footerNavigation ul li a:hover:focus { +.wcf-headerNavigation > div > ul > li a:hover:active, +.wcf-headerNavigation > div > ul > li a:hover:focus, +.wcf-footerNavigation > div > ul > li a:hover:active, +.wcf-footerNavigation > div > ul > li a:hover:focus { background-color: #fff9f4; } /* Special */ -#tplLogin .wcf-pageHeader .wcf-headerNavigation ul li.toBottomLink, -#tplLogin .wcf-pageFooter .wcf-footerNavigation ul li.toTopLink { +#tplLogin .wcf-pageHeader .wcf-headerNavigation > ul > li.toBottomLink, +#tplLogin .wcf-pageFooter .wcf-footerNavigation > ul > li.toTopLink { /* Removes the to-bottom-link on the log-in page */ position: absolute; left: -9000px; @@ -837,17 +841,20 @@ nav.wcf-topMenu { /* Special: Sub Menu */ -.wcf-headerNavigation .wcf-subMenu { - float: left; +.wcf-headerNavigation .wcf-menu { + display: inline; + max-width: 75%; } -.wcf-headerNavigation .wcf-subMenu > li { - line-height: 1.25; +.wcf-headerNavigation .wcf-menu > ul { + text-align: left; + top: -3px; + display: inline; + position: relative; } -.wcf-headerNavigation .wcf-subMenu > li > a { - padding-right: 5px; - padding-left: 5px; +.wcf-headerNavigation .wcf-menu > ul > li { + margin-top: 7px; } @@ -1512,7 +1519,7 @@ table .wcf-label { -/* ############## ToDo: Dropdown Global ############## */ +/* ############## ToDo: Dropdown ############## */ /* Dropdown Caption */ @@ -2692,23 +2699,12 @@ input[type='button'], -/* ############## Pill Menu ############## */ +/* ############## Menu ############## */ /* Standard */ .wcf-menu { color: rgba(102, 102, 102, 1); - border-bottom: 1px solid #ccc; - margin: -15px -23px 0; - padding: 0 7px 10px; -} - -.wcf-tabMenuContent > .wcf-menu { - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); - background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); } .wcf-menu ul { @@ -2765,7 +2761,7 @@ input[type='button'], background-color: rgba(0, 0, 0, .5); } -/* Special */ +/* Special -> Menu within box-title */ .wcf-boxTitle > .wcf-menu { color: rgba(255, 255, 255, 1); @@ -2779,20 +2775,9 @@ input[type='button'], } .wcf-boxTitle > .wcf-menu ul li a { - font-size: 85%; - text-decoration: none; - text-shadow: 0 -1px 0 #000; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 1); color: #eee !important; - border: 1px solid rgba(0, 0, 0, .3); - border-radius: 13px; background-color: rgba(0, 0, 0, .1); - padding: 2px 10px; - - -webkit-transition: color .1s linear; - -moz-transition: color .1s linear; - -ms-transition: color .1s linear; - -o-transition: color .1s linear; - transition: color .1s linear; } .wcf-boxTitle > .wcf-menu ul li a:hover { @@ -2817,6 +2802,22 @@ input[type='button'], color: #369 !important; } +/* Special: Menu below tab-menu */ + +.wcf-tabMenuContainer > .wcf-menu { + border-bottom: 1px solid #ccc; + margin: -15px -23px 0; + padding: 0 7px 10px; +} + +.wcf-tabMenuContainer > .wcf-menu { + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); + background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); +} + /* ############## Bread Crumbs ############## */