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