Message sidebar overhaul

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index 356a24ace03360d2548b642eaca1e3cd8ffab7af..39a872bbac99d772a9be8611995717e38375a0e0 100644 (file)
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -28,7 +28,7 @@ button:not([disabled]) {
        .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);
        .linearGradient(lighten(@wcfButtonBackgroundColor, 5%), lighten(@wcfButtonBackgroundColor, 10%), lighten(@wcfButtonBackgroundColor, 5%) 2px, @wcfButtonBackgroundColor);
        .textShadow(@wcfButtonBackgroundColor);
-       .transition(~"background-color, background-image, border, box-shadow, color", .2s);
+       .transition(~"background-color, background-image, border, box-shadow, color", .1s);
 }
 
 /* primary */
@@ -59,7 +59,7 @@ button:not([disabled]):hover {
        .textShadow(@wcfButtonHoverBackgroundColor);
 }
 
-/* active */
+/* active (pressed) */
 .button:active,
 input[type='reset']:not([disabled]):active,
 input[type='submit']:not([disabled]):active,
@@ -88,6 +88,21 @@ button:disabled {
        .textShadow(@wcfButtonBackgroundColor);
 }
 
+/* active (permanently) */
+.button.active,
+input[type='button'].active,
+button.active,
+.button.active:hover,
+input[type='button'].active:hover,
+button.active:hover {
+       border-color: darken(@wcfButtonColor, 5%);
+       color: lighten(@wcfButtonBackgroundColor, 5%);
+       
+       .boxShadow(0, 1px, rgba(0, 0, 0, .1), 3px);     
+       .linearGradient(@wcfButtonColor, darken(@wcfButtonColor, 10%), @wcfButtonColor 3px);
+       .textShadow(darken(@wcfButtonColor, 10%));
+}
+
 
 /* button list */
 .buttonList {

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 9c45c2c190b41b8ff9fbf68e120e5e9415f0dbaa..42143d744e58a4368fbdeaa47dec436eaf958899 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -199,6 +199,28 @@ img {
 .icon256 { .icon(256px); }
 
 dl.dataList {
+       dt {
+               float: left;
+               overflow: hidden;
+               text-align: right;
+               text-overflow: ellipsis;
+               white-space: nowrap;
+               width: 35%;
+       }
+       
+       dd {
+               text-align: left;
+               margin-left: 38%;
+               
+               &:after {
+                       display: table;
+                       content: "";
+                       clear: both;
+               }
+       }
+}
+
+dl.statsDataList {
        display: block;
        
        dt {
@@ -210,7 +232,7 @@ dl.dataList {
                overflow: hidden;
                text-align: left;
                white-space: nowrap;
-               width: 68%;
+               width: 62%;
                
                a {
                        color: @wcfDimmedColor;
@@ -227,7 +249,7 @@ dl.dataList {
                text-align: right;
                text-overflow: ellipsis;
                white-space: nowrap;
-               width: 30%;
+               width: 35%;
                
                a {
                        color: @wcfColor;

diff --git a/wcfsetup/install/files/style/message.less b/wcfsetup/install/files/style/message.less
index e87506cfa0122efcced9dc503c2a574387dc7909..d9bdf0877398d316ae04100c99db5e727ec26de0 100644 (file)
--- a/wcfsetup/install/files/style/message.less
+++ b/wcfsetup/install/files/style/message.less
@@ -67,22 +67,8 @@
 }
 
 .message.dividers {
-       .userAvatar,
-       .userRank,
-       .userCredits,
-       .userStatus {
-               border-bottom: 1px dotted darken(@wcfContainerBorderColor, 10%);
-       }
-       
-       .messageSidebar div:last-child {
-               border: 0;
-       }
-       
-       .messageSidebar > div {
-               > div,
-               > .messageHeader {
-                       vertical-align: top;
-               }
+       .userCredits {
+               border-top: 1px dotted darken(@wcfContainerBorderColor, 10%);
        }
 }
 
@@ -141,6 +127,10 @@
        > *:last-child {
                //padding-bottom: @wcfGapMedium;
        }
+       
+       > footer {
+               padding-bottom: @wcfGapMedium;
+       }
 }
 
 .message .messageContent {
@@ -203,6 +193,7 @@
        
        .userTitle {
                /* todo */
+               margin: 7px 0 0;
        }
        
        .userRank {
@@ -211,59 +202,38 @@
        }
        
        .userAvatar {
-               display: block;
+               display: inline-block;
                margin: @wcfGapSmall 0 0;
-               padding: 0 0 @wcfGapSmall;
        }
        
        .userCredits {
-               color: @wcfLinkColor;
-               display: block;
-               margin: @wcfGapSmall 0 0;
-               padding: 0 0 @wcfGapSmall;
-       }
-       
-       .userStatus,
-       .userContacts {
-               color: @wcfLinkColor;
                font-size: @wcfSmallFontSize;
-               display: block;
                margin: @wcfGapSmall 0 0;
-               padding: 0 0 @wcfGapSmall;
-       }
-       
-       .userStatus ul,
-       .userContact ul {
-               list-style-type: none;
+               padding: @wcfGapSmall 0 0;
                
-               li {
-                       display: inline;
+               .dataList {
+                       dt {
+                               width: 47%;
+                       }
                        
-                       a {
-                               display: inline-block;
-                               margin: 0 -3px;
-                               padding: 1px 3px 0;
-                               text-align: left;
-                               text-decoration: none;
-                               
-                               .transition(background-color, .2s);
-                               
-                               &:hover {
-                                       background-color: @wcfContainerBorderColor;
-                                       
-                                       .borderRadius(7px);
-                                       .boxShadow(0, 1px, #eee, 7px);
-                               }
-                               
-                               span {
-                                       display: block;
-                                       left: -9000px;
-                                       position: absolute;
-                                       top: -9000px;
-                               }
+                       dd {
+                               margin-left: 50%;
                        }
                }
        }
+       
+       &.online {
+               .userAvatar {
+                       .boxShadow(0, 0, @wcfSuccessBackgroundColor, 10px);
+                       
+                       /* todo */
+                       -webkit-animation-name: onlineStatus;
+                       -webkit-animation-duration: 2s;
+                       -webkit-animation-iteration-count: infinite;
+                       -webkit-animation-direction: alternate;
+                       -webkit-animation-timing-function: ease-in-out;
+               }
+       }
 }
 
 .message {
@@ -298,4 +268,14 @@ li:nth-child(2n+1) .message {
 /*todo: move*/
 .highlight {
        background-color: rgba(255, 200, 0, 1);
-}
\ No newline at end of file
+}
+
+/* todo */
+@-webkit-keyframes onlineStatus {
+       0% {
+               -webkit-box-shadow: 0 0 10px @wcfSuccessBackgroundColor;
+       }
+       100% {
+               -webkit-box-shadow: 0 0 20px @wcfSuccessBackgroundColor;
+       }
+} 
\ No newline at end of file