kopia lustrzana https://github.com/Aonrud/ila-microblog.pub
fix: correct sensitive attachment layout to prevent overflow
rodzic
b950478541
commit
98756c816c
|
@ -256,27 +256,11 @@ header.microblog {
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.attachment-item, .attachment-wrapper {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
max-height: 360px;
|
|
||||||
padding: 5px;
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-content: center;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.single {
|
&.single {
|
||||||
.attachment-item, .attachment-wrapper {
|
.attachment-item, .attachment-wrapper {
|
||||||
max-height: fit-content;
|
max-height: fit-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -290,6 +274,59 @@ header.microblog {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.attachment-item, .attachment-wrapper {
|
||||||
|
flex: 1 1 50%;
|
||||||
|
max-height: 360px;
|
||||||
|
padding: 5px;
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-wrapper, .attachment-wrapper > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-wrapper > div {
|
||||||
|
max-height: calc(100% - 1.5em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-hide-sensitive-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sensitive-attachment {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-height: 100%;
|
||||||
|
.sensitive-attachment-state {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sensitive-attachment-state:checked ~ .sensitive-attachment-box div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sensitive-attachment-box {
|
||||||
|
position: relative;
|
||||||
|
max-height: 100%;
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
backdrop-filter: blur(2em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.video-gif-overlay {
|
.video-gif-overlay {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -342,10 +379,6 @@ header.microblog {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*******************************************************************
|
|
||||||
* Straight from main.scss
|
|
||||||
*/
|
|
||||||
|
|
||||||
.emoji, .custom-emoji {
|
.emoji, .custom-emoji {
|
||||||
max-width: 25px;
|
max-width: 25px;
|
||||||
}
|
}
|
||||||
|
@ -383,30 +416,6 @@ header.microblog {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-hide-sensitive-btn {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sensitive-attachment {
|
|
||||||
display: inline-block;
|
|
||||||
.sensitive-attachment-state {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.sensitive-attachment-state:checked ~ .sensitive-attachment-box div {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
.sensitive-attachment-box {
|
|
||||||
position: relative;
|
|
||||||
div {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
backdrop-filter: blur(2em);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.public-interactions {
|
.public-interactions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
Ładowanie…
Reference in New Issue