Splitted up the CSS for more flexibility

diff --git a/wcfsetup/install/files/style/ui/contentItem.scss b/wcfsetup/install/files/style/ui/contentItem.scss
index 1a98b5e9269078f6095341dada6ee2af31fc57cc..dd2c35bba4b5eb42b8072c4d4266813af66770b4 100644 (file)
--- a/wcfsetup/install/files/style/ui/contentItem.scss
+++ b/wcfsetup/install/files/style/ui/contentItem.scss
@@ -10,22 +10,32 @@
        border-radius: 3px;
        box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
        display: flex;
-       flex: 0 0 calc(50% - 10px);
        flex-direction: column;
        margin-bottom: 20px;
-       max-width: calc(50% - 10px); /* IE 11 */
        position: relative;
        overflow: hidden;
 }
 
+.contentItemSingleColumn {
+       flex: 0 0 100%;
+}
+
+.contentItemMultiColumn {
+       flex: 0 0 calc(50% - 10px);
+       max-width: calc(50% - 10px); /* IE 11 */
+}
+
 .contentItemLink {
        flex: 1 auto;
 }
 
 .contentItemContent {
+       padding: 10px;
+}
+
+.contentItemContentTruncate {
        max-height: 150px;
        overflow: hidden;
-       padding: 10px;
        position: relative;
        
        &::after {
@@ -47,10 +57,17 @@
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
-       height: 150px;
        position: relative;
 }
 
+.contentItemImageSmall {
+       height: 75px;
+}
+
+.contentItemImageLarge {
+       height: 150px;
+}
+
 .contentItemBadges,
 .contentItemOptions {
        align-items: flex-start;
@@ -82,10 +99,21 @@
        border: 1px solid currentColor;
 }
 
+.contentItemOption.button {
+       box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
 .contentItemLabels {
        margin-bottom: 5px;
 }
 
+.contentItemCategory {
+       color: $wcfContentDimmedText;
+       text-transform: uppercase;
+       
+       @include wcfFontSmall;
+}
+
 .contentItemTitle {
        color: $wcfContentHeadlineLink;