mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
3494fa0635
Add media queries to hide the image actions if on mobile (probably unnecessary to have), and make the image description (name, author) close to full width.
158 lines
2.6 KiB
CSS
158 lines
2.6 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;
|
|
|
|
-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 .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);
|
|
}
|
|
}
|