Improved visuals for marked, deleted and disabled

diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index ac2ebf4ee3754947716afa257151a8bcd5d9963f..b6c2535a0962cf68954bdc787aad06841c73d6b7 100644 (file)
--- a/wcfsetup/install/files/style/layout/global.scss
+++ b/wcfsetup/install/files/style/layout/global.scss
@@ -76,7 +76,12 @@
 
 .wcfFontHeadline {
        font-size: $wcfFontSizeHeadline;
-       font-weight: 300;
+       font-weight: 400;
+}
+
+.wcfFontSection {
+       font-size: $wcfFontSizeSection;
+       font-weight: 400;
 }
 
 .wcfFontTitle {

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index fdf29c0c81776e602d8ce85d8ad0749625815e2f..86aeb5d9adef4af20dc8de87619f6c7e8b5a98de 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -246,6 +246,74 @@
                }
        }
        
+       .columnMark > label {
+               cursor: pointer;
+               display: block;
+               height: 24px;
+               width: 24px;
+               
+               &::before {
+                       content: $fa-var-square-o;
+                       font-family: FontAwesome;
+                       font-size: 24px;
+                       position: relative;
+                       top: -6px;
+               }
+               
+               > input {
+                       display: none;
+               }
+       }
+       
+       .jsMarked .columnMark > label{
+               position: relative;
+               
+               &::after {
+                       color: rgb(0, 150, 0);
+                       content: $fa-var-check;
+                       font-family: FontAwesome;
+                       font-size: 13px;
+                       left: 3px;
+                       position: absolute;
+                       top: 1px;
+               }
+       }
+       
+       .tabularListRowHead .columnMark > label::before {
+               top: -3px;
+       }
+       
+       
+       .messageDeleted .columnAvatar,
+       .messageDisabled .columnAvatar {
+               position: relative;
+               
+               &::before {
+                       display: block;
+                       font-family: FontAwesome;
+                       font-size: 48px;
+                       position: absolute;
+               }
+               
+               > div {
+                       visibility: hidden;
+               }
+       }
+       
+       .messageDeleted .columnAvatar::before {
+               color: rgb(180, 0, 0);
+               content: $fa-var-trash-o;
+               left: 15px;
+               top: -7px;
+       }
+       
+       .messageDisabled .columnAvatar::before {
+               color: rgb(0, 140, 0);
+               content: $fa-var-play-circle-o;
+               left: 12px;
+               top: -3px;
+       }
+       
        .columnAvatar {
                div {
                        position: relative;