mirror of
https://github.com/discourse/discourse.git
synced 2025-02-24 21:00:11 +08:00
8ef2085585
When a quote is not expanded and it contains lightboxes, those lightboxes are not displayed and instead we show a link that looks like this `[image_title]` These still have the lightbox CSS class and so they still get the backgrounds we add to lightboxes while they load. Increasing the selector specificity prevents that from happening.
85 lines
2.4 KiB
SCSS
85 lines
2.4 KiB
SCSS
.lightbox-wrapper .lightbox {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
&:hover .meta {
|
|
opacity: 0.9;
|
|
transition: opacity 0.5s;
|
|
}
|
|
background: rgba($primary, 0.25);
|
|
}
|
|
|
|
.d-lazyload-hidden {
|
|
opacity: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cooked img.d-lazyload {
|
|
transition: opacity 0.4s 0.75s ease;
|
|
}
|
|
|
|
.lightbox-wrapper {
|
|
display: inline-block;
|
|
img {
|
|
object-fit: cover;
|
|
object-position: top;
|
|
}
|
|
&,
|
|
* {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.meta {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
color: $secondary;
|
|
background: $primary;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
|
|
span {
|
|
float: left;
|
|
}
|
|
|
|
.filename {
|
|
margin: 6px 6px 2px 6px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
&:before {
|
|
// ideally, the SVG used here should be in HTML and reference the SVG sprite
|
|
content: svg-uri(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$secondary}"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"/></svg>'
|
|
);
|
|
margin-right: 5px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.informations {
|
|
margin: 6px;
|
|
padding-right: 20px;
|
|
color: $secondary-high;
|
|
font-size: $font-0;
|
|
}
|
|
|
|
.expand {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
right: 7px;
|
|
&:before {
|
|
// ideally, the SVG used here should be in HTML and reference the SVG sprite
|
|
// the SVG used here is the "expand" icon from FontAwesome 4.7.0
|
|
content: svg-uri(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 1792 1792" fill="#{$secondary}"><path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"/></svg>'
|
|
);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|