Ich würde sagen so:
/* add search icon overlay on embedded attachments/images */
.embeddedAttachmentLink,
.embeddedImageLink {
display: inline-block;
position: relative;
&::after {
background-color: rgba(0, 0, 0, .8);
border-radius: 2px;
bottom: @wcfGapSmall;
color: white;
content: @fa-var-search;
display: block;
font-family: FontAwesome;
font-size: 21px;
opacity: .5;
padding: 2px 8px;
position: absolute;
right: @wcfGapSmall;
text-decoration: none;
.boxShadow(0, 0, rgba(0, 0, 0, .15), 0, 3px);
.transition(opacity, .1s);
}
&:hover {
&::after {
opacity: .8;
}
}
}
Alles anzeigen
https://github.com/WoltLab/WCF/co…c7ed8ba9660e11f
Falls das nicht funktioniert:
.messageBody a.embeddedAttachmentLink {
position: relative;
display: inline-block;
.transition(all, .2s);
margin-right: 7px;
margin-bottom: 7px;
}
.messageBody a.embeddedAttachmentLink:after {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
right: 10px;
bottom: 10px;
position:absolute;
background-color: rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 0.85);
width: 30px;
height: 30px;
border-radius: 3px;
line-height: 30px;
text-align:center;
.transition(all, .2s);
}
.messageBody a.embeddedAttachmentLink:hover:after {
background-color: rgba(0, 0, 0, 0.85);
box-shadow:
0px 0px 0px 2px rgba(255, 255, 255, 0.5),
0px 0px 15px rgba(0, 0, 0, 0.35);
.transition(all, .2s);
}
Alles anzeigen
So habe ich das hier im Forum:
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen.