Unverified Commit 64fbc7ea authored by Haelwenn's avatar Haelwenn

app/javascript/styles/mastodon/components.scss: Style media_gallery for the...

app/javascript/styles/mastodon/components.scss: Style media_gallery for the “glitch-soc”-like modification
parent fd018f73
Pipeline #2181 passed with stage
in 5 minutes and 17 seconds
......@@ -842,10 +842,6 @@
margin: 10px 0 10px 10px;
flex: 1;
.media-gallery {
max-width: 250px;
}
.status__content {
padding: 0;
white-space: normal;
......@@ -4207,37 +4203,6 @@ a.status-card {
left: 0;
}
.media-gallery__gifv__label {
display: block;
position: absolute;
color: $primary-text-color;
background: rgba($base-overlay-background, 0.5);
bottom: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
z-index: 1;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
}
.media-gallery__gifv {
&.autoplay {
.media-gallery__gifv__label {
display: none;
}
}
&:hover {
.media-gallery__gifv__label {
opacity: 1;
}
}
}
.attachment-list {
display: flex;
font-size: 14px;
......@@ -4305,72 +4270,48 @@ a.status-card {
/* Media Gallery */
.media-gallery {
box-sizing: border-box;
margin-top: 8px;
margin-top: .5em;
overflow: hidden;
border-radius: 4px;
overflow-y: auto;
position: relative;
width: 100%;
}
.media-gallery__item {
border: none;
box-sizing: border-box;
display: block;
float: left;
position: relative;
border-radius: 4px;
overflow: hidden;
max-height: 40vh;
display: flex;
flex-wrap: wrap;
&.standalone {
.media-gallery__item-gifv-thumbnail {
transform: none;
top: 0;
}
.icon-button {
position: absolute;
top: 4px;
left: 4px;
outline: auto;
}
}
.media-gallery__item-thumbnail {
cursor: zoom-in;
display: block;
text-decoration: none;
color: $secondary-text-color;
line-height: 0;
.attachement {
flex: 1 0 30%;
margin: 4px;
border-radius: 4px;
background-color: black;
display: block;
}
&,
img {
height: 100%;
.attachement, .attachement img {
border: none;
box-sizing: border-box;
overflow: hidden;
cursor: zoom-in;
text-decoration: none;
color: $ui-secondary-color;
line-height: 0;
object-fit: scale-down;
width: 100%;
height: 100%;
}
img {
object-fit: cover;
a.attachement {
width: auto;
height: auto;
}
}
.media-gallery__gifv {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.media-gallery__item-gifv-thumbnail {
cursor: zoom-in;
height: 100%;
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
}
.media-gallery__item-thumbnail-label {
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
/* End Media Gallery */
/* Status Video Player */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment