github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-03 05:39:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

A more subtle mobile lightbox hint

Browse Source
This commit is contained in:
Kris 2018-08-28 15:25:54 -04:00
parent 15f657309a
commit 7deb86ad8b
2 changed files with 12 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -3,7 +3,7 @@
display: inline-block; display: inline-block;
&:hover .meta { &:hover .meta {
opacity: 1; opacity: 0.9;
transition: opacity 0.5s; transition: opacity 0.5s;
} }
} }
@ -20,8 +20,8 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
color: dark-light-choose($secondary, $primary); color: $secondary;
background: dark-light-choose($primary, lighten($secondary, 10%)); background: $primary;
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
@ -30,7 +30,7 @@
} }
.filename { .filename {
margin: 5px; margin: 6px 6px 2px 6px;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -45,7 +45,7 @@
.informations { .informations {
margin: 6px; margin: 6px;
padding-right: 20px; padding-right: 20px;
color: blend-primary-secondary(50%); color: $secondary-high;
font-size: $font-0; font-size: $font-0;
} }
@ -59,8 +59,3 @@
} }
} }
} }
// this should be removed once all the posts have been rebaked with the new lightboxes overlays
.lightbox > span {
display: none;
}

14
app/assets/stylesheets/mobile/lightbox.scss
View File

@ -1,21 +1,21 @@
.lightbox .meta, .lightbox .meta,
.lightbox:hover .meta { .lightbox:hover .meta {
opacity: 0.8; opacity: 0.7;
} }
.meta { .meta {
display: flex;
align-items: center;
justify-content: center;
background: $secondary;
color: $primary-high;
height: 25px; height: 25px;
width: 25px; width: 25px;
bottom: 0; bottom: 0;
left: 0; right: 0;
.filename, .filename,
.informations { .informations {
display: none; display: none;
} }
.expand {
bottom: 1px;
right: 6px;
}
} }