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