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
  99 .contentItemImageLarge {
 100         min-height: 150px;
 101 }
 102
 103 .contentItemBadges,
 104 .contentItemOptions {
 105         align-items: flex-start;
 106         display: flex;
 107         flex-direction: column;
 108 }
 109
 110 .contentItemOptions {
 111         position: absolute;
 112         right: 10px;
 113         top: 10px;
 114         z-index: 1;
 115 }
 116
 117 .contentItemBadge,
 118 .contentItemOption {
 119         flex: 0 auto;
 120
 121         &:not(:first-child) {
 122                 margin-top: 5px;
 123         }
 124 }
 125
 126 .contentItemBadge {
 127         border: 1px solid currentColor;
 128 }
 129
 130 .contentItemOption.button {
 131         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 132 }
 133
 134 .contentItemLabels {
 135         margin-bottom: 5px;
 136 }
 137
 138 .contentItemCategory {
 139         color: $wcfContentDimmedText;
 140         text-transform: uppercase;
 141
 142         @include wcfFontSmall;
 143 }
 144
 145 .contentItemTitle {
 146         color: $wcfContentHeadlineLink;
 147
 148         @include wcfFontHeadline;
 149         @include wcfFontBold;
 150
 151         &:hover {
 152                 color: $wcfContentHeadlineLinkActive;
 153         }
 154 }
 155
 156 .contentItemDescription {
 157         color: $wcfContentText;
 158         margin-top: 10px;
 159
 160         img {
 161                 height: auto !important;
 162                 max-width: 100%;
 163         }
 164 }
 165
 166 .contentItemContentLinks {
 167         padding: 0 10px 10px 10px;
 168 }
 169
 170 .contentItemMeta {
 171         align-items: center;
 172         border-top: 1px solid $wcfContentBorderInner;
 173         color: $wcfContentDimmedText;
 174         display: flex;
 175         flex: 0 auto;
 176         padding: 10px;
 177
 178         .icon {
 179                 color: inherit;
 180         }
 181 }
 182
 183 .contentItemMetaImage {
 184         flex: 0 auto;
 185         margin-right: 10px;
 186 }
 187
 188 .contentItemMetaContent {
 189         flex: 1 auto;
 190         font-size: 12px;
 191 }
 192
 193 .contentItemMetaAuthor {
 194         color: $wcfContentText;
 195
 196         a,
 197         a:hover {
 198                 color: inherit;
 199         }
 200 }
 201
 202 .contentItemMetaIcons {
 203         display: flex;
 204         flex: 0 auto;
 205         margin-left: 10px;
 206 }
 207
 208 .contentItemMetaIcon {
 209         flex: 0 auto;
 210
 211         &:not(:first-child) {
 212                 margin-left: 10px;
 213         }
 214 }
 215
 216 .contentItemImagePreview {
 217         border-radius: 3px;
 218         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 219         margin-bottom: 10px;
 220         max-width: 100%;
 221 }
 222
 223 .contentItemImagePreviewButtons {
 224         display: flex;
 225         flex-wrap: wrap;
 226         margin-left: -10px;
 227
 228         > .button {
 229                 flex: 0 auto;
 230                 margin-left: 10px;
 231         }
 232
 233         > .innerError {
 234                 flex: 0 0 100%;
 235                 margin-left: 10px;
 236         }
 237 }
 238
 239 @include screen-lg {
 240         /* There are no sidebars, use a three column layout. */
 241         .content:first-child:last-child,
 242         .boxesTop,
 243         .boxesBottom {
 244                 .contentItemMultiColumn {
 245                         /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 246                         flex-grow: 0;
 247                         flex-shrink: 0;
 248                         flex-basis: calc(100% / 3 - 20px);
 249                 }
 250         }
 251 }
 252
 253 @include screen-md {
 254         /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
 255         .contentItemMultiColumn {
 256                 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 257                 flex-grow: 0;
 258                 flex-shrink: 0;
 259                 flex-basis: calc(100% / 3 - 20px);
 260         }
 261 }
 262
 263 @include screen-xs {
 264         /* There is not enough space to fit two columns. */
 265         .contentItemList {
 266                 display: block;
 267         }
 268
 269         .contentItemMultiColumn {
 270                 max-width: none;
 271         }
 272 }