mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-24 16:41:21 +08:00
ac736ec0ca
This is the beginning of a longer process to merge our stylesheets under the common directory. I also converted a SCSS variable to a CSS custom property along the way. In the case of the lightbox styles, this seemed more appropriate to distinguish by primary input type (touch vs mouse) rather than breakpoint sizes.
122 lines
2 KiB
SCSS
Vendored
122 lines
2 KiB
SCSS
Vendored
.lightbox-wrapper .lightbox {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
|
|
&:hover .meta {
|
|
opacity: 0.9;
|
|
transition: opacity 0.5s;
|
|
}
|
|
}
|
|
|
|
.d-lazyload-hidden {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.onebox img.d-lazyload-hidden:not(.ytp-thumbnail-image) {
|
|
border: 1px solid var(--primary-low);
|
|
}
|
|
|
|
.cooked img.d-lazyload:not(.animated) {
|
|
transition: opacity 0.4s 0.75s ease;
|
|
}
|
|
|
|
.lightbox-wrapper {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
img {
|
|
object-fit: cover;
|
|
object-position: top;
|
|
}
|
|
|
|
&,
|
|
* {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.meta {
|
|
--meta-element-margin: 0.375em;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
color: var(--secondary);
|
|
background: var(--primary);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@media (pointer: coarse) {
|
|
align-items: center;
|
|
background: var(--secondary);
|
|
color: var(--primary-high);
|
|
height: 25px;
|
|
width: 25px;
|
|
bottom: 0;
|
|
right: 0;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.filename {
|
|
margin: var(--meta-element-margin);
|
|
|
|
@include ellipsis;
|
|
|
|
@media (pointer: coarse) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
margin: var(--meta-element-margin);
|
|
opacity: 0.8;
|
|
color: var(--secondary);
|
|
|
|
+ .filename {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.d-icon-far-image {
|
|
@media (pointer: coarse) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.informations {
|
|
margin: var(--meta-element-margin);
|
|
padding-right: 20px;
|
|
color: var(--secondary-high);
|
|
font-size: var(--font-0);
|
|
flex-shrink: 0;
|
|
flex-grow: 3;
|
|
|
|
@media (pointer: coarse) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.d-icon-discourse-expand {
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mfp-preloader .spinner {
|
|
margin: auto;
|
|
}
|
|
|
|
.discourse-no-touch {
|
|
a.lightbox {
|
|
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
}
|
|
|
|
a.lightbox:hover {
|
|
box-shadow:
|
|
0 2px 5px 0 rgba(var(--always-black-rgb), 0.2),
|
|
0 2px 10px 0 rgba(var(--always-black-rgb), 0.2);
|
|
}
|
|
}
|
