mirror of
https://github.com/zulip/zulip.git
synced 2026-07-15 21:03:26 +08:00
10f7146ddd
The lightbox will now distinguish between whether or not something is a photo and a YouTube video by the class name of the message inline preview. It embeds the YouTube video in the lightbox as an iFrame rather than previewing the video screenshot.
173 lines
2.9 KiB
CSS
173 lines
2.9 KiB
CSS
#overlay {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
|
|
background-color: #19203a;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.2);
|
|
z-index: 101;
|
|
|
|
transition: all 0.2s ease;
|
|
overflow: auto;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
#overlay.show {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
#overlay .image-preview {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100% - 65px - 30px);
|
|
margin: 0px;
|
|
|
|
background-color: #19203a;
|
|
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
#overlay .exit {
|
|
float: right;
|
|
|
|
color: rgba(255,255,255,0.8);
|
|
font-size: 2rem;
|
|
font-weight: 200;
|
|
margin: 24px 20px 0px 0px;
|
|
|
|
transform: scaleY(0.75);
|
|
font-weight: 300;
|
|
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#overlay .exit {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
#overlay .image-info-wrapper {
|
|
background-color: transparent;
|
|
}
|
|
|
|
#overlay .image-description,
|
|
#overlay .image-actions {
|
|
float: left;
|
|
margin: 20px 20px;
|
|
}
|
|
|
|
#overlay .image-actions {
|
|
float: right;
|
|
}
|
|
|
|
#overlay .image-actions a {
|
|
margin-bottom: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
#overlay .image-actions .icon {
|
|
font-size: 1.1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
#overlay .image-actions .icon .text {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#overlay .image-actions span:nth-of-type(2) {
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
#overlay .image-actions .open span:nth-of-type(2) {
|
|
top: 2px;
|
|
}
|
|
|
|
#overlay .image-description {
|
|
/* approx width of screen minus action buttons on the side. */
|
|
width: calc(100% - 320px);
|
|
|
|
font-size: 1.3rem;
|
|
color: #fff;
|
|
}
|
|
|
|
#overlay .image-description .title {
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
max-width: calc(100%);
|
|
|
|
/* Required for text-overflow */
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#overlay .player-container {
|
|
height: calc(100vh - 71px);
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#overlay .player-container iframe {
|
|
width: 80vw;
|
|
height: 45vw;
|
|
margin: auto;
|
|
}
|
|
|
|
#overlay .image-description .user {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.image-actions .button {
|
|
font-size: 0.8rem;
|
|
min-width: inherit;
|
|
padding: 4px 10px;
|
|
border: 1px solid rgba(255,255,255,0.6);
|
|
background-color: transparent;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.image-actions .button:hover {
|
|
background-color: #fff;
|
|
color: #19203a;
|
|
}
|
|
|
|
.image-actions a.button {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button .download {
|
|
top: 1px;
|
|
}
|
|
|
|
#overlay .clear-float {
|
|
clear: both;
|
|
}
|
|
|
|
@media (max-width: 450px) {
|
|
#overlay .image-actions {
|
|
display: none;
|
|
}
|
|
|
|
#overlay .image-description {
|
|
width: calc(100% - 100px);
|
|
}
|
|
}
|