Style overhaul (WIP)

* new contentHeaderMetaData element
* added some missing transitions
* some minor tweaks

diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 196545db6d37d97850c5d06bac9e1ea7a65f8ce6..09e98076407e8331d96b352a9688bb3ee69f8a61 100644 (file)
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -1,6 +1,7 @@
 .containerList > li {
        padding: 20px;
        position: relative;
+       transition: background-color .2s;
        
        &:not(:last-child) {
                border-bottom: 1px solid $wcfContentBorderInner;
@@ -42,6 +43,7 @@
                position: absolute;
                right: 20px;
                top: 18px;
+               transition: opacity .2s;
                
                > ul {
                        background-color: $wcfContentBackground;

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index abaf4a80c3fc6e27f5548776b389ad9c7e2c74b0..79f4ef721e91ca1277d515f0bc2f312df1b61ae9 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -21,6 +21,32 @@
                        color: $wcfContentHeadlineLinkActive; // todo: rename variable
                }
        }
+       
+       .contentHeaderMetaData {
+               color: $wcfContentDimmedText;
+               
+               &.inlineList {
+                       > li:not(:last-child) {
+                               margin-right: 10px;
+                       }
+                       
+                       .labelList {
+                               display: inline-flex;
+                               
+                               .label {
+                                       top: -1px;
+                               }
+                       }
+               }
+               
+               > li {
+                       a,
+                       a:hover,
+                       .icon {
+                               color: $wcfContentDimmedText;
+                       }
+               }
+       }
 }
 
 /* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
@@ -47,28 +73,6 @@
        }
 }
 
-/* todo
-.boxHeadline {
-       &.labeledHeadline {
-               font-size: 0;
-               
-               > h1,
-               > h2 {
-                       display: inline-block;
-                       margin-right: 10px;
-               }
-               
-               > ul {
-                       display: inline-block;
-                       font-size: 1rem;
-                       
-                       &:not(:empty) {
-                               margin-right: 10px;
-                       }
-               }
-       }
-}*/
-
 /* content sections */
 .section {
        margin-top: 30px;       

diff --git a/wcfsetup/install/files/style/ui/label.scss b/wcfsetup/install/files/style/ui/label.scss
index c7b390411bd5b9dfafd1f6cc72f946f7d2068f0a..333e1d127a4eac89b5ede067951c39dd1b9a778d 100644 (file)
--- a/wcfsetup/install/files/style/ui/label.scss
+++ b/wcfsetup/install/files/style/ui/label.scss
@@ -2,32 +2,26 @@
 /* label list */
 .labelList {
        @extend .inlineList;
-}
-
-.boxHeadline.labeledHeadline {
-       align-items: center;
-       
-       @extend .inlineList;
-       
-       > .statusIcons,
-       > .labelList {
-               flex: 0 0 auto;
-       }
        
-       > .statusIcons:not(:last-child) {
-               margin-right: 10px;
+       > li {
+               &:not(:first-child) {
+                       .label {
+                               border-top-left-radius: 0;
+                               border-bottom-left-radius: 0;
+                       }
+               }
+               
+               &:not(:last-child) {
+                       margin-right: 1px;
+                       
+                       .label {
+                               border-top-right-radius: 0;
+                               border-bottom-right-radius: 0;
+                       }
+               }
        }
 }
 
-.boxHeadline.labeledHeadline > h1,
-.boxSubHeadline.labeledHeadline > h2 {
-       flex: 0 0 auto;
-       margin-right: 10px;
-       
-       /* force a long running title to break instead of overflowing the container */
-       max-width: 100%;
-}
-
 /* ACP label list */
 #labelList > li {
        flex-basis: 30%;

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 3c6e8595acf7cb80b378d444cc94218b95fb0852..4dc6623175a787ae815b93941363a3b99993f086 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -366,7 +366,7 @@
                &::before {
                        display: block;
                        font-family: FontAwesome;
-                       font-size: 48px;
+                       font-size: 42px;
                        position: absolute;
                }
                
@@ -378,15 +378,15 @@
        .messageDeleted .columnAvatar::before {
                color: rgb(180, 0, 0);
                content: $fa-var-trash-o;
-               left: 15px;
-               top: -7px;
+               left: 17px;
+               top: -2px;
        }
        
        .messageDisabled .columnAvatar::before {
                color: rgb(0, 140, 0);
                content: $fa-var-eye-slash;
-               left: 10px;
-               top: -6px;
+               left: 13px;
+               top: -2px;
        }
        
        .columnAvatar {
@@ -397,6 +397,7 @@
                        
                        > p > img {
                                opacity: .6;
+                               transition: opacity .2s;
                        }
                }
                
@@ -404,8 +405,13 @@
                        position: absolute;
                        width: 24px;
                        height: 24px;
-                       bottom: -8px;
-                       right: -8px;
+                       bottom: -2px;
+                       right: -6px;
+                       
+                       > img {
+                               border: 1px solid $wcfContentBackground;
+                               box-sizing: content-box;
+                       }
                }
        }
        
@@ -434,6 +440,7 @@
                        display: flex;
                        float: right;
                        opacity: .6;
+                       transition: opacity .2s;
                        
                        > .statusIcons {
                                align-items: center;
@@ -533,6 +540,7 @@
        .pagination {
                flex: 0 0 auto;
                opacity: 0;
+               transition: opacity .2s;
                
                @extend .wcfFontSmall;
                

diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
index 8de3059e2ee965e3d9e280888e18d9b1fddcdd55..266e1073daf46cd95241136b6576da3361b021b5 100644 (file)
--- a/wcfsetup/install/files/style/ui/tabularBox.scss
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -11,6 +11,7 @@
 .tabularListRow {
        flex: 0 0 auto;
        padding: 5px 0;
+       transition: background-color .2s;
        
        &.divider + li:not(.divider) {
                border-top-color: $wcfContentBorder;