Some style improvements
authorAlexander Ebert <ebert@woltlab.com>
Mon, 18 Apr 2016 12:03:23 +0000 (14:03 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 18 Apr 2016 12:03:28 +0000 (14:03 +0200)
wcfsetup/install/files/js/WoltLab/WCF/Ui/Tooltip.js
wcfsetup/install/files/style/layout/pageHeader.scss
wcfsetup/install/files/style/ui/badge.scss
wcfsetup/install/files/style/ui/button.scss
wcfsetup/install/files/style/ui/pageAction.scss
wcfsetup/install/files/style/ui/tooltip.scss
wcfsetup/install/files/style/ui/userProfile.scss

index 26fda8b889ad6efbda5902a82d97e34c33436542..7e31b98bed7de84751761a558459d2342bf84b75 100644 (file)
@@ -102,6 +102,7 @@ define(['Environment', 'Dom/ChangeListener', 'Ui/Alignment'], function(Environme
                        
                        UiAlignment.set(_tooltip, element, {
                                horizontal: 'center',
+                               verticalOffset: 4,
                                pointer: true,
                                pointerClassNames: ['inverse'],
                                vertical: 'top'
index e91bd20aac648853c8534edddbaa3297b85a8450..0eb5a5bdd0d36806654f7a8b69ac279ac853bb24 100644 (file)
@@ -93,6 +93,8 @@
                
                .boxMenuDepth1 {
                        background-color: $wcfHeaderMenuDropdownBackground;
+                       box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+                       border-radius: 0 0 3px 3px;
                        padding: 5px 0;
                        position: absolute;
                        visibility: hidden;
index 3b250ccfb162643b9af459eb6bfd3918a29637b3..e07665c8dc744e610582edaaca24e70dc62c5305 100644 (file)
@@ -1,7 +1,7 @@
 .badge,
 a.badge {
        background-color: $wcfContentText;
-       border-radius: 3px;
+       border-radius: 2px;
        color: $wcfContentBackground;
        display: inline-block;
        padding: 2px 6px;
index 86816915229bc86fbf8768a803f1dbd7b4da1596..d40d056c100b77b4d40bbe6e46f3cf33c743069b 100644 (file)
@@ -5,7 +5,7 @@ input[type="submit"],
 .button,
 a.button { // a.button is required to override link formatting, such as drop-down buttons
        background-color: $wcfButtonBackground;
-       border-radius: 0;
+       border-radius: 2px;
        border-width: 0;
        color: $wcfButtonText;
        cursor: pointer;
@@ -129,13 +129,13 @@ a.button {
                }
                
                &:first-child .button {
-                       border-top-left-radius: 3px;
-                       border-bottom-left-radius: 3px;
+                       border-top-left-radius: 2px;
+                       border-bottom-left-radius: 2px;
                }
                
                &:last-child .button {
-                       border-top-right-radius: 3px;
-                       border-bottom-right-radius: 3px;
+                       border-top-right-radius: 2px;
+                       border-bottom-right-radius: 2px;
                }
                
                .button {
index 0d944cfcaa4a655a58b3815116e34b08e9a6c271..0cfef42e411c2195600d9d62a138fe930864f6b7 100644 (file)
@@ -25,6 +25,7 @@
        > li {
                animation: wcfPageActionOut .3s;
                animation-fill-mode: forwards;
+               display: flex;
                
                // required to animate 'max-width' properly when removing items
                max-width: 400px;
                }
                
                > a {
-                       background-color: rgba(0, 0, 0, .6);
+                       background-color: rgba(0, 0, 0, .7);
+                       border-radius: 2px;
                        color: rgba(224, 224, 224, 1);
                        padding: 5px 10px;
                        
                        > .icon {
-                               color: rgba(224, 224, 224, 1);
+                               color: inherit;
                        }
                }
                
                &.dropdownOpen > a {
                        background-color: rgba(0, 0, 0, 1);
                        color: rgba(255, 255, 255, 1);
-                       
-                       > .icon {
-                               color: rgba(255, 255, 255, 1);
-                       }
                }
        }
 }
index 6bdf15e83398327cc33db927964b541453f820b9..3fe5c8e927d44020f4093b46f2c8310dbc740aee 100644 (file)
@@ -1,5 +1,7 @@
 .balloonTooltip {
        background-color: $wcfTooltipBackground;
+       border-radius: 2px;
+       box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        color: $wcfTooltipText;
        max-width: 300px;
        padding: 5px 10px;
        @include wcfFontSmall;
        
        > .elementPointer {
-               border-color: $wcfTooltipBackground transparent;
-               border-style: solid;
-               border-width: 0 5px 5px;
-               
-               &.flipVertical {
-                       border-width: 5px 5px 0;
-               }
+               display: none;
        }
        
-       @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-       
        &.active {
                visibility: visible;
                
index 11820717246845cef571d6bce83a63731794e23d..09aa65ac8aad49ab4a64944ddcd04f6bf698c6ee 100644 (file)
@@ -94,6 +94,8 @@
                                
                                > .userProfileButtonMenu {
                                        background-color: $wcfHeaderMenuDropdownBackground;
+                                       box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+                                       border-radius: 0 0 3px 3px;
                                        padding: 5px 0;
                                        position: absolute;
                                        right: 0;