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

   1 .embeddedContent {
   2         background-color: var(--wcfContentBackground);
   3         box-shadow: var(--wcfBoxShadowCard);
   4         border: 1px solid var(--wcfContentBorderInner);
   5         border-radius: var(--wcfBorderRadius);
   6         margin: 10px 0;
   7         max-width: 400px;
   8         overflow: hidden;
   9 }
  10
  11 /* @deprecated 5.4 Use `<img class="embeddedContentImageElement">` instead */
  12 .embeddedContentImage {
  13         background-position: center;
  14         background-repeat: no-repeat;
  15         background-size: cover;
  16         margin: -10px -10px 10px -10px;
  17         min-height: 150px;
  18 }
  19
  20 .embeddedContentImageElement {
  21         margin: -10px -10px 10px -10px;
  22         object-fit: cover;
  23         object-position: center;
  24 }
  25
  26 /* This repetition is required because of `.messageBody > .messageText img`. */
  27 .embeddedContentImageElement.embeddedContentImageElement.embeddedContentImageElement {
  28         height: 150px !important;
  29
  30         // The `100% + 20px` are the result of the negative margins.
  31         max-width: calc(100% + 20px);
  32         width: calc(100% + 20px);
  33 }
  34
  35 .embeddedContentLink {
  36         display: block;
  37         padding: 10px;
  38         position: relative;
  39 }
  40
  41 .embeddedContentTitleLink {
  42         color: inherit;
  43
  44         &::before {
  45                 content: "";
  46                 inset: 0;
  47                 position: absolute;
  48                 z-index: 1;
  49         }
  50
  51         &:hover,
  52         &:focus {
  53                 color: inherit;
  54         }
  55 }
  56
  57 @media (pointer: fine) {
  58         .embeddedContent:hover .embeddedContentTitleLink {
  59                 text-decoration: underline;
  60         }
  61 }
  62
  63 /* @deprecated 6.0 Use `.embeddedContentTitleLink` instead */
  64 .embeddedContentLinkShadow {
  65         inset: 0;
  66         position: absolute;
  67 }
  68
  69 .embeddedContentCategory {
  70         color: var(--wcfContentDimmedText);
  71
  72         @include wcfFontSmall;
  73 }
  74
  75 .embeddedContent .embeddedContentTitle,
  76 .messageBody > .messageText .embeddedContentTitle,
  77 #messagePreview > .htmlContent .embeddedContentTitle {
  78         color: var(--wcfContentHeadlineText);
  79         display: -webkit-box;
  80         margin: 0;
  81         overflow: hidden;
  82         -webkit-line-clamp: 2;
  83         -webkit-box-orient: vertical;
  84
  85         @include wcfFontHeadline;
  86         @include wcfFontBold;
  87 }
  88
  89 .embeddedContentDetails {
  90         margin-top: 5px;
  91
  92         @include wcfFontSmall;
  93 }
  94
  95 .embeddedContentDescription {
  96         color: var(--wcfContentDimmedText);
  97         margin-top: 10px;
  98         max-height: calc(5em * #{var(--wcfFontLineHeight)});
  99         overflow: hidden;
 100         position: relative;
 101
 102         &::after {
 103                 background-image: linear-gradient(
 104                         to top,
 105                         var(--wcfContentBackground),
 106                         rgba(var(--wcfContentBackground-rgb) / 0)
 107                 );
 108                 content: "";
 109                 left: 0;
 110                 height: calc(1em * #{var(--wcfFontLineHeight)});
 111                 position: absolute;
 112                 right: 0;
 113                 top: calc(4em * #{var(--wcfFontLineHeight)});
 114         }
 115 }
 116
 117 .embeddedContentMeta {
 118         align-items: center;
 119         border-top: 1px solid var(--wcfContentBorderInner);
 120         color: var(--wcfContentDimmedText);
 121         display: flex;
 122         padding: 10px;
 123
 124         @include wcfFontSmall;
 125 }
 126
 127 .embeddedContentMetaImage {
 128         flex: 0 auto;
 129         margin-right: 10px;
 130 }
 131
 132 .embeddedContentMetaContent {
 133         flex: 1 auto;
 134 }
 135
 136 .embeddedContentMetaAuthor {
 137         color: var(--wcfContentText);
 138
 139         > a {
 140                 color: inherit;
 141
 142                 &:hover {
 143                         text-decoration: underline;
 144                 }
 145         }
 146 }