Small popover redesign

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 9218c31a66cf3936f4f95c41d1e9a5ab30e62cc6..f3230e652404ea0a2e746bc3f18f9245cb73b643 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -211,18 +211,10 @@ dl.dataList {
        dd {
                text-align: left;
                margin-left: 38%;
-               
-               &:after {
-                       display: table;
-                       content: "";
-                       clear: both;
-               }
        }
 }
 
 dl.statsDataList {
-       display: block;
-       
        dt {
                color: @wcfDimmedColor;
                display: block;
@@ -265,8 +257,6 @@ dl.statsDataList {
 }
 
 dl.inlineDataList {
-       display: inline-block;
-       
        dd {
                display: inline-block;
                margin: 0 4px 0 0;

diff --git a/wcfsetup/install/files/style/popover.less b/wcfsetup/install/files/style/popover.less
index d869475e345b101c33b105630c57ab7540de76af..580fe38263b3f34c03e84373d6369e02e1cae078 100644 (file)
--- a/wcfsetup/install/files/style/popover.less
+++ b/wcfsetup/install/files/style/popover.less
@@ -4,7 +4,6 @@
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 32px;
-       color: @wcfTooltipColor;
        max-width: 450px;
        min-height: 32px;
        min-width: 150px;
@@ -14,7 +13,7 @@
        z-index: 320;
        
        .borderRadius();
-       .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+       .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
        
        &:after {
                border: 10px solid transparent;
@@ -26,12 +25,12 @@
        
        &.top:after {
                border-bottom-width: 0;
-               border-top-color: rgba(0, 0, 0, .2);
+               border-top-color: rgba(0, 0, 0, .4);
                bottom: -10px;
        }
        
        &.bottom:after {
-               border-bottom-color: rgba(0, 0, 0, .2);
+               border-bottom-color: rgba(0, 0, 0, .4);
                border-top-width: 0;
                top: -10px;
        }
@@ -49,7 +48,7 @@
        background-color: @wcfContainerBackgroundColor;
        color: @wcfColor;
        opacity: 0;
-       padding: @wcfGapSmall;
+       padding: @wcfGapSmall @wcfGapMedium;
        
        .borderRadius();
 }
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/user.less b/wcfsetup/install/files/style/user.less
index b47fc77a65a55f43fe9534a31108d5c037a15af6..3b651c17c88d7a6a3cbee5fad1bef818223e6a39 100644 (file)
--- a/wcfsetup/install/files/style/user.less
+++ b/wcfsetup/install/files/style/user.less
@@ -25,11 +25,58 @@
        }
 }
 
+/* user information */
+.userInformation {
+       > hgroup > h2,
+       > .inlineDataList,
+       > .dataList {
+               font-size: @wcfSmallFontSize;
+       }
+}
+
+.userProfilePreview {
+       position: relative;
+
+       > .userInformation {
+               padding-bottom: 16px;// + @wcfGapTiny;
+               
+               > .inlineDataList,
+               > .dataList {
+                       margin-bottom: @wcfGapTiny;
+                       padding-top: @wcfGapTiny;
+                       border-top: 1px dotted @wcfContainerBorderColor;
+               }
+               
+               > .dataList {
+                       padding-bottom: @wcfGapTiny;
+                       border-bottom: 1px dotted @wcfContainerBorderColor;
+               }
+               
+               > .buttonList {
+                       position: absolute;
+                       bottom: 0;
+                       right: 0;
+               }
+       }
+}
 
 /* ##### User List #### */
 .simpleUserList {
-       h2, p, dl {
-               font-size: @wcfSmallFontSize;
+       > li > div > .userInformation {
+               position: relative;
+               
+               > .buttonList {
+                       opacity: 0;
+                       position: absolute;
+                       right: 0;
+                       top: 0;
+                       
+                       .transition(opacity, .1s);
+               }
+       }
+       
+       > li:hover > div > .userInformation > .buttonList {
+               opacity: 1;
        }
 }