wcfsetup/install/files/style/ui/contentItem.scss

   1 .contentItemList {
   2         display: flex;
   3         flex-wrap: wrap;
   4         margin: 0 0 -20px -20px;
   5 }
   6
   7 .contentItem {
   8         background-color: $wcfContentBackground;
   9         border-radius: 3px;
  10         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  11         display: flex;
  12         flex-direction: column;
  13         margin: 0 0 20px 20px;
  14         position: relative;
  15         overflow: hidden;
  16 }
  17
  18 .contentItemSingleColumn {
  19         /* The `flex` shorthand fails in IE11 if `calc()` is used. */
  20         flex-grow: 0;
  21         flex-shrink: 0;
  22         flex-basis: calc(100% - 20px);
  23 }
  24
  25 .contentItemMultiColumn {
  26         /* The `flex` shorthand fails in IE11 if `calc()` is used. */
  27         flex-grow: 0;
  28         flex-shrink: 0;
  29         flex-basis: calc(50% - 20px);
  30 }
  31
  32 .contentItemLink {
  33         flex: 1 auto;
  34 }
  35
  36 .contentItemTitleLink {
  37         color: inherit;
  38
  39         &::before {
  40                 bottom: 0;
  41                 content: "";
  42                 left: 0;
  43                 position: absolute;
  44                 right: 0;
  45                 top: 0;
  46         }
  47
  48         &:hover,
  49         &:focus {
  50                 color: inherit;
  51         }
  52 }
  53
  54 /* Deprecated: use contentItemTitleLink instead. */
  55 .contentItemLinkShadow {
  56         bottom: 0;
  57         left: 0;
  58         position: absolute;
  59         right: 0;
  60         top: 0;
  61 }
  62
  63 .contentItemContent {
  64         padding: 10px;
  65 }
  66
  67 .contentItemContentTruncate {
  68         max-height: 150px;
  69         overflow: hidden;
  70         position: relative;
  71
  72         &::after {
  73                 background-image: linear-gradient(to top, $wcfContentBackground, transparentize($wcfContentBackground, 1));
  74                 bottom: 0;
  75                 content: "";
  76                 height: 30px;
  77                 left: 0;
  78                 pointer-events: none;
  79                 position: absolute;
  80                 right: 0;
  81                 /* The `top` value is important, because it prevents the last line from being affected
  82                    when the content isn't too long. */
  83                 top: 120px;
  84         }
  85 }
  86
  87 .contentItemImage {
  88         background-position: center;
  89         background-repeat: no-repeat;
  90         background-size: cover;
  91         padding: 10px;
  92         position: relative;
  93 }
  94
  95 .contentItemImageSmall {
  96         min-height: 75px;
  97
  98         .contentItemImageElement {
  99                 height: 75px;
 100         }
 101 }
 102
 103 .contentItemImageLarge {
 104         min-height: 150px;
 105
 106         .contentItemImageElement {
 107                 height: 150px;
 108         }
 109 }
 110
 111 .contentItemImageElement {
 112         margin: -10px -10px -10px -10px;
 113         object-fit: cover;
 114         object-position: center;
 115
 116         // The `100% + 20px` are the result of the negative margins.
 117         max-width: calc(100% + 20px);
 118 }
 119
 120 .contentItemBadges,
 121 .contentItemOptions {
 122         align-items: flex-start;
 123         display: flex;
 124         flex-direction: column;
 125 }
 126
 127 .contentItemImageElement + .contentItemBadges {
 128         left: 10px;
 129         position: absolute;
 130         top: 10px;
 131         z-index: 1;
 132 }
 133
 134 .contentItemOptions {
 135         position: absolute;
 136         right: 10px;
 137         top: 10px;
 138         z-index: 1;
 139 }
 140
 141 .contentItemBadge,
 142 .contentItemOption {
 143         flex: 0 auto;
 144
 145         &:not(:first-child) {
 146                 margin-top: 5px;
 147         }
 148 }
 149
 150 .contentItemBadge {
 151         border: 1px solid currentColor;
 152 }
 153
 154 .contentItemOption.button {
 155         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 156 }
 157
 158 .contentItemLabels {
 159         margin-bottom: 5px;
 160 }
 161
 162 .contentItemCategory {
 163         color: $wcfContentDimmedText;
 164
 165         @include wcfFontSmall;
 166 }
 167
 168 .contentItemTitle {
 169         color: $wcfContentHeadlineLink;
 170
 171         @include wcfFontHeadline;
 172         @include wcfFontBold;
 173
 174         &:hover {
 175                 color: $wcfContentHeadlineLinkActive;
 176         }
 177 }
 178
 179 .contentItemDescription {
 180         color: $wcfContentDimmedText;
 181         margin-top: 5px;
 182
 183         img {
 184                 height: auto !important;
 185                 max-width: 100%;
 186         }
 187 }
 188
 189 .contentItemContentLinks {
 190         padding: 0 10px 10px 10px;
 191 }
 192
 193 .contentItemMeta {
 194         align-items: center;
 195         border-top: 1px solid $wcfContentBorderInner;
 196         color: $wcfContentDimmedText;
 197         display: flex;
 198         flex: 0 auto;
 199         padding: 10px;
 200         white-space: nowrap;
 201
 202         .icon {
 203                 color: inherit;
 204         }
 205 }
 206
 207 .contentItemMetaImage {
 208         flex: 0 auto;
 209         margin-right: 10px;
 210 }
 211
 212 .contentItemMetaContent {
 213         flex: 1 auto;
 214         font-size: 12px;
 215 }
 216
 217 .contentItemMetaAuthor {
 218         color: $wcfContentText;
 219
 220         a,
 221         a:hover {
 222                 color: inherit;
 223         }
 224 }
 225
 226 .contentItemMetaIcons {
 227         align-items: center;
 228         display: flex;
 229         flex: 0 auto;
 230         margin-left: 10px;
 231
 232         @include wcfFontSmall;
 233 }
 234
 235 .contentItemMetaIcon {
 236         flex: 0 auto;
 237
 238         &:not(:first-child) {
 239                 margin-left: 10px;
 240         }
 241
 242         .topReactionShort {
 243                 align-items: center;
 244                 display: flex;
 245         }
 246
 247         .reactionType {
 248                 margin-right: 3px;
 249         }
 250 }
 251
 252 .contentItemImagePreview {
 253         border-radius: 3px;
 254         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 255         margin-bottom: 10px;
 256         max-width: 100%;
 257 }
 258
 259 .contentItemImagePreviewButtons {
 260         display: flex;
 261         flex-wrap: wrap;
 262         margin-left: -10px;
 263
 264         > .button {
 265                 flex: 0 auto;
 266                 margin-left: 10px;
 267         }
 268
 269         > .innerError {
 270                 flex: 0 0 100%;
 271                 margin-left: 10px;
 272         }
 273 }
 274
 275 @include screen-lg {
 276         /* There are no sidebars, use a three column layout. */
 277         .content:first-child:last-child,
 278         .boxesTop,
 279         .boxesBottom {
 280                 .contentItemMultiColumn {
 281                         /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 282                         flex-grow: 0;
 283                         flex-shrink: 0;
 284                         flex-basis: calc(100% / 3 - 20px);
 285                 }
 286         }
 287 }
 288
 289 @include screen-md {
 290         /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
 291         .contentItemMultiColumn {
 292                 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 293                 flex-grow: 0;
 294                 flex-shrink: 0;
 295                 flex-basis: calc(100% / 3 - 20px);
 296         }
 297 }
 298
 299 @include screen-xs {
 300         /* There is not enough space to fit two columns. */
 301         .contentItemList {
 302                 display: block;
 303         }
 304
 305         .contentItemMultiColumn {
 306                 max-width: none;
 307         }
 308 }