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, .12), 0 1px 2px rgba(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         position: relative;
  35 }
  36
  37 .contentItemLinkShadow {
  38         bottom: 0;
  39         left: 0;
  40         position: absolute;
  41         right: 0;
  42         top: 0;
  43 }
  44
  45 .contentItemContent {
  46         padding: 10px;
  47 }
  48
  49 .contentItemContentTruncate {
  50         max-height: 150px;
  51         overflow: hidden;
  52         position: relative;
  53
  54         &::after {
  55                 background-image: linear-gradient(to top, $wcfContentBackground, transparent);
  56                 bottom: 0;
  57                 content: "";
  58                 height: 30px;
  59                 left: 0;
  60                 pointer-events: none;
  61                 position: absolute;
  62                 right: 0;
  63                 /* The `top` value is important, because it prevents the last line from being affected
  64                    when the content isn't too long. */
  65                 top: 120px;
  66         }
  67 }
  68
  69 .contentItemImage {
  70         background-position: center;
  71         background-repeat: no-repeat;
  72         background-size: cover;
  73         padding: 10px;
  74         position: relative;
  75 }
  76
  77 .contentItemImageSmall {
  78         min-height: 75px;
  79 }
  80
  81 .contentItemImageLarge {
  82         min-height: 150px;
  83 }
  84
  85 .contentItemBadges,
  86 .contentItemOptions {
  87         align-items: flex-start;
  88         display: flex;
  89         flex-direction: column;
  90 }
  91
  92 .contentItemOptions {
  93         position: absolute;
  94         right: 10px;
  95         top: 10px;
  96         z-index: 1;
  97 }
  98
  99 .contentItemBadge,
 100 .contentItemOption {
 101         flex: 0 auto;
 102
 103         &:not(:first-child) {
 104                 margin-top: 5px;
 105         }
 106 }
 107
 108 .contentItemBadge {
 109         border: 1px solid currentColor;
 110 }
 111
 112 .contentItemOption.button {
 113         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 114 }
 115
 116 .contentItemLabels {
 117         margin-bottom: 5px;
 118 }
 119
 120 .contentItemCategory {
 121         color: $wcfContentDimmedText;
 122         text-transform: uppercase;
 123
 124         @include wcfFontSmall;
 125 }
 126
 127 .contentItemTitle {
 128         color: $wcfContentHeadlineLink;
 129
 130         @include wcfFontHeadline;
 131         @include wcfFontBold;
 132
 133         &:hover {
 134                 color: $wcfContentHeadlineLinkActive;
 135         }
 136 }
 137
 138 .contentItemDescription {
 139         color: $wcfContentText;
 140         margin-top: 10px;
 141
 142         img {
 143                 height: auto !important;
 144                 max-width: 100%;
 145         }
 146 }
 147
 148 .contentItemContentLinks {
 149         padding: 0 10px 10px 10px;
 150 }
 151
 152 .contentItemMeta {
 153         align-items: center;
 154         border-top: 1px solid $wcfContentBorderInner;
 155         color: $wcfContentDimmedText;
 156         display: flex;
 157         flex: 0 auto;
 158         padding: 10px;
 159
 160         .icon {
 161                 color: inherit;
 162         }
 163 }
 164
 165 .contentItemMetaImage {
 166         flex: 0 auto;
 167         margin-right: 10px;
 168 }
 169
 170 .contentItemMetaContent {
 171         flex: 1 auto;
 172         font-size: 12px;
 173 }
 174
 175 .contentItemMetaAuthor {
 176         color: $wcfContentText;
 177
 178         a,
 179         a:hover {
 180                 color: inherit;
 181         }
 182 }
 183
 184 .contentItemMetaIcons {
 185         display: flex;
 186         flex: 0 auto;
 187         margin-left: 10px;
 188 }
 189
 190 .contentItemMetaIcon {
 191         flex: 0 auto;
 192
 193         &:not(:first-child) {
 194                 margin-left: 10px;
 195         }
 196 }
 197
 198 .contentItemImagePreview {
 199         border-radius: 3px;
 200         box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
 201         margin-bottom: 10px;
 202         max-width: 100%;
 203 }
 204
 205 .contentItemImagePreviewButtons {
 206         display: flex;
 207         flex-wrap: wrap;
 208         margin-left: -10px;
 209
 210         > .button {
 211                 flex: 0 auto;
 212                 margin-left: 10px;
 213         }
 214
 215         > .innerError {
 216                 flex: 0 0 100%;
 217                 margin-left: 10px;
 218         }
 219 }
 220
 221 @include screen-lg {
 222         /* There are no sidebars, use a three column layout. */
 223         .content:first-child:last-child,
 224         .boxesTop,
 225         .boxesBottom {
 226                 .contentItemMultiColumn {
 227                         /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 228                         flex-grow: 0;
 229                         flex-shrink: 0;
 230                         flex-basis: calc(100% / 3 - 20px);
 231                 }
 232         }
 233 }
 234
 235 @include screen-md {
 236         /* The sidebar, if any, is not adjacent to the content, use a three column layout. */
 237         .contentItemMultiColumn {
 238                 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
 239                 flex-grow: 0;
 240                 flex-shrink: 0;
 241                 flex-basis: calc(100% / 3 - 20px);
 242         }
 243 }
 244
 245 @include screen-xs {
 246         /* There is not enough space to fit two columns. */
 247         .contentItemList {
 248                 display: block;
 249         }
 250
 251         .contentItemMultiColumn {
 252                 max-width: none;
 253         }
 254 }