More template/css fixes

diff --git a/com.woltlab.wcf/template/mainMenu.tpl b/com.woltlab.wcf/template/mainMenu.tpl
index a268c8724ac534269ac758a114a520724c95a8ae..55d3431916c428b8c9cfeb2b4d4203ebb837e6f0 100644 (file)
--- a/com.woltlab.wcf/template/mainMenu.tpl
+++ b/com.woltlab.wcf/template/mainMenu.tpl
@@ -2,7 +2,7 @@
        <nav id="mainMenu" class="mainMenu">
                <ul>
                        {foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=menuItem}
-                               <li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
+                               <li{if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem} class="active"{/if}><a href="{$menuItem->getProcessor()->getLink()}">{lang}{$menuItem->menuItem}{/lang}{if $menuItem->getProcessor()->getNotifications()} <span class="badge {if $__wcf->getPageMenu()->getActiveMenuItem() == $menuItem->menuItem}badgeUpdate{else}badgeInverse{/if}">{#$menuItem->getProcessor()->getNotifications()}</span>{/if}</a></li>
                        {/foreach}
                </ul>
        </nav>

diff --git a/wcfsetup/install/files/style/badge.less b/wcfsetup/install/files/style/badge.less
index 3bd745392af12617c5710b7bc609612850af26f0..522fbb159a1c88f63a4cab9cb86bef9e7a6573ed 100644 (file)
--- a/wcfsetup/install/files/style/badge.less
+++ b/wcfsetup/install/files/style/badge.less
@@ -1,24 +1,38 @@
 /* ############## Badges ############## */
 
 /* Globals */
+// sets default badge shadows depending on background color
+.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
+       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1);
+}
+.badgeShadow(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
+       box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 1);
+}
+
 
 .badge {
-       border-radius: 9px;
+       background-color: @wcfColor;
+       border-radius: 13px;
        color: @wcfPageLinkHoverColor;
        display: inline-block;
        font-size: 11px;
-       font-weight: bold;
-       padding: 2px 6px 2px;
+       padding: 2px 8px;
        position: relative;
        text-shadow: none;
        top: -1px;
        white-space: nowrap;
        
-       .linearGradient(lighten(@wcfPageBackgroundColor, 10%), lighten(@wcfPageBackgroundColor, 20%), lighten(@wcfPageBackgroundColor, 5%));
+       .badgeShadow(@wcfContentBackgroundColor);
+       
+       &.badgeUpdate {
+               background-color: #336699;
+               color: @wcfPageLinkHoverColor;
+       }
        
        &.badgeInverse {
                background-color: @wcfPageLinkHoverColor;
-               background-image: none;
-               color: lighten(@wcfPageBackgroundColor, 10%);
+               color: @wcfPageBackgroundColor;
+               
+               .badgeShadow(@wcfPageBackgroundColor);
        }
 }
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/tabular.less b/wcfsetup/install/files/style/tabular.less
index 6b2d403646adad5f4ec832d3c3c80e8ec0659188..b2e9276cd6b59fd9f5ea03f33658e1428d33829c 100644 (file)
--- a/wcfsetup/install/files/style/tabular.less
+++ b/wcfsetup/install/files/style/tabular.less
@@ -28,6 +28,18 @@
        }
 }
 
+.tabularBox:not(.tabularBoxTitle) .table {
+       thead tr:first-child th {
+               &:first-child {
+                       .borderRadius(@wcfContainerBorderRadius - 1, 0, 0, 0);
+               }
+               
+               &:last-child {
+                       .borderRadius(0, @wcfContainerBorderRadius - 1, 0, 0);
+               }
+       }
+}
+
 .table {
        border-spacing: 0;
        width: 100% !important;
@@ -43,19 +55,19 @@
        /* headline */
        th {
                border-right: @wcfContainerBorderWidth @wcfContainerBorderStyle rgba(0, 0, 0, .2);
+               color: @wcfPageLinkColor;
                font-size: 85%;
                font-weight: bold;
                white-space: nowrap;
                
                .linearGradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+               .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
                
                a {
                        color: @wcfPageLinkColor;
                        display: block;
                        margin: -@wcfGapSmall;
                        
-                       .textShadow(saturate(lighten(@wcfPageBackgroundColor, 20%), 20%));
-                       
                        &:hover {
                                text-decoration: none;
                        }
@@ -167,11 +179,11 @@
 .tabularBox .table {
        tbody tr:last-child td {
                &:first-child {
-                       .borderRadius(0, 0, 0, 4px);
+                       .borderRadius(0, 0, 0, @wcfContainerBorderRadius - 1);
                }
                
                &:last-child {
-                       .borderRadius(0, 0, 4px, 0);
+                       .borderRadius(0, 0, @wcfContainerBorderRadius - 1, 0);
                }
        }
 }

diff --git a/wcfsetup/install/files/style/wbb.less b/wcfsetup/install/files/style/wbb.less
index d20cb2a76bd6750fb919f75567e7bcf83a89ba77..db06c48424907d9484067725051bbef4427a1693 100644 (file)
--- a/wcfsetup/install/files/style/wbb.less
+++ b/wcfsetup/install/files/style/wbb.less
@@ -222,9 +222,8 @@
                }
                
                &:before {
-                       background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, .85)), color-stop(.4, rgba(255, 255, 255, 0)));
-                       
                        .borderRadius(@wcfContainerBorderRadius, 0, 0, 0);
+                       .linearGradientNative(~"left top, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%");
                }
        }
 }