Improved styling of tags

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 9657dd227ac155feb7e3ca2467b4b42c80e69ff5..519bc035ff0b4d1171988a7180056fbfbad29e36 100644 (file)
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -103,9 +103,9 @@
        </div>
        
        {if !$tags|empty}
-               <ul class="tagList articleTagList">
+               <ul class="tagList articleTagList section">
                        {foreach from=$tags item=tag}
-                               <li><a href="{link controller='Tagged' object=$tag}objectType=com.woltlab.wcf.article{/link}" class="articleTag">{$tag->name}</a></li>
+                               <li><a href="{link controller='Tagged' object=$tag}objectType=com.woltlab.wcf.article{/link}" class="tag">{$tag->name}</a></li>
                        {/foreach}
                </ul>
        {/if}

diff --git a/wcfsetup/install/files/style/element/list.scss b/wcfsetup/install/files/style/element/list.scss
index 6beb95396ea4817b87636180cb6832478af175af..be839e1f8854499594f29f445a8f464b7459d71d 100644 (file)
--- a/wcfsetup/install/files/style/element/list.scss
+++ b/wcfsetup/install/files/style/element/list.scss
@@ -24,6 +24,45 @@ ol.nativeList {
        
        align-items: baseline;
        
+       > li:not(:last-child) {
+               margin-right: 8px;
+       }
+       
+       .tag {
+               background-color: $wcfButtonBackground;
+               color: $wcfButtonText;
+               display: inline-block;
+               margin-left: 11px;
+               padding: 3px 6px 2px 2px;
+               position: relative;
+               text-decoration: none;
+               text-transform: uppercase;
+               
+               @include wcfFontSmall;
+               @include wcfFontBold;
+               
+               &::before {
+                       border: 11px solid transparent;
+                       border-left-width: 0;
+                       border-right-color: $wcfButtonBackground;
+                       content: "";
+                       display: block;
+                       left: -11px;
+                       position: absolute;
+                       top: 0;
+               }
+               
+               &:hover {
+                       background-color: $wcfButtonPrimaryBackgroundActive;
+                       color: $wcfButtonPrimaryTextActive;
+                       text-decoration: none;
+                       
+                       &::before {
+                               border-right-color: $wcfButtonPrimaryBackgroundActive;
+                       }
+               }
+       }
+       
        .tagWeight1 {
                font-size: 12px;
        }

diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index ac8e348abafa091ede627e327d4dbaba16dd9dcf..1aa234818e66cedda49ad0eab7b0c04f0e895bc7 100644 (file)
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -24,46 +24,6 @@
                @include wcfFontBold;
        }
        
-       .articleTagList {
-               margin-top: 20px;
-               
-               > li {
-                       padding-left: 11px;
-               }
-               
-               .articleTag {
-                       background-color: $wcfButtonBackground;
-                       color: $wcfButtonText;
-                       display: inline-block;
-                       padding: 3px 6px 2px 2px;
-                       position: relative;
-                       text-transform: uppercase;
-                       
-                       @include wcfFontSmall;
-                       @include wcfFontBold;
-                       
-                       &::before {
-                               border: 11px solid transparent;
-                               border-left-width: 0;
-                               border-right-color: $wcfButtonBackground;
-                               content: "";
-                               display: block;
-                               left: -11px;
-                               position: absolute;
-                               top: 0;
-                       }
-                       
-                       &:hover {
-                               background-color: $wcfButtonPrimaryBackgroundActive;
-                               color: $wcfButtonPrimaryTextActive;
-                               
-                               &::before {
-                                       border-right-color: $wcfButtonPrimaryBackgroundActive;
-                               }
-                       }
-               }
-       }
-       
        .articleLikesSummery:not(:empty) {
                margin-top: 20px;
        }