Fixes to media galleries
This commit is contained in:
parent
bc51e331e7
commit
044c60ecf4
4 changed files with 32 additions and 148 deletions
|
@ -3185,7 +3185,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .media-gallery {
|
||||
gap: 4px;
|
||||
grid-template-columns: calc(50% - 2px) calc(50% - 2px);
|
||||
grid-template-rows: calc(50% - 3px) calc(50% - 3px);
|
||||
grid-template-rows: calc(50% - 2px) calc(50% - 2px);
|
||||
}
|
||||
|
||||
.app-body .audio-player,
|
||||
|
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
transition: transform .3s;
|
||||
}
|
||||
.app-body .media-gallery__item {
|
||||
border-radius: 8px;
|
||||
border-radius: 8px !important;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
|
||||
|
@ -3217,21 +3219,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
.app-body .media-gallery__item-thumbnail img {
|
||||
border-radius: 8px;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.app-body .media-gallery__gifv::after,
|
||||
.app-body .video-player::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
border-radius: 8px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: 1px solid var(--color-lines-translucent);
|
||||
z-index: 1;
|
||||
}
|
||||
.app-body .media-gallery__gifv:is(:active, :hover)::after {
|
||||
display: none;
|
||||
|
@ -6367,12 +6354,8 @@ a:is(.active,
|
|||
background-color: rgb(0, 0, 0, .9);
|
||||
}
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
) {
|
||||
.app-body .media-modal__buttons .icon-button,
|
||||
.app-body .media-modal__nav {
|
||||
background-color: #1e1e1e;
|
||||
color: #777777;
|
||||
height: 44px;
|
||||
|
@ -6384,23 +6367,11 @@ a:is(.active,
|
|||
transition: .2s all;
|
||||
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
):is(:active, :focus, :hover) {
|
||||
.app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
|
||||
.app-body .media-modal__nav:is(:active, :focus, :hover) {
|
||||
background-color: #343434;
|
||||
color: #ffffff;
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button)
|
||||
svg {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.app-body .media-modal__close {
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
|
|
|
@ -3185,7 +3185,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .media-gallery {
|
||||
gap: 4px;
|
||||
grid-template-columns: calc(50% - 2px) calc(50% - 2px);
|
||||
grid-template-rows: calc(50% - 3px) calc(50% - 3px);
|
||||
grid-template-rows: calc(50% - 2px) calc(50% - 2px);
|
||||
}
|
||||
|
||||
.app-body .audio-player,
|
||||
|
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
transition: transform .3s;
|
||||
}
|
||||
.app-body .media-gallery__item {
|
||||
border-radius: 8px;
|
||||
border-radius: 8px !important;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
|
||||
|
@ -3217,21 +3219,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
.app-body .media-gallery__item-thumbnail img {
|
||||
border-radius: 8px;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.app-body .media-gallery__gifv::after,
|
||||
.app-body .video-player::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
border-radius: 8px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: 1px solid var(--color-lines-translucent);
|
||||
z-index: 1;
|
||||
}
|
||||
.app-body .media-gallery__gifv:is(:active, :hover)::after {
|
||||
display: none;
|
||||
|
@ -6367,12 +6354,8 @@ a:is(.active,
|
|||
background-color: rgb(0, 0, 0, .9);
|
||||
}
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
) {
|
||||
.app-body .media-modal__buttons .icon-button,
|
||||
.app-body .media-modal__nav {
|
||||
background-color: #1e1e1e;
|
||||
color: #777777;
|
||||
height: 44px;
|
||||
|
@ -6384,23 +6367,11 @@ a:is(.active,
|
|||
transition: .2s all;
|
||||
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
):is(:active, :focus, :hover) {
|
||||
.app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
|
||||
.app-body .media-modal__nav:is(:active, :focus, :hover) {
|
||||
background-color: #343434;
|
||||
color: #ffffff;
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button)
|
||||
svg {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.app-body .media-modal__close {
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
|
|
|
@ -3185,7 +3185,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .media-gallery {
|
||||
gap: 4px;
|
||||
grid-template-columns: calc(50% - 2px) calc(50% - 2px);
|
||||
grid-template-rows: calc(50% - 3px) calc(50% - 3px);
|
||||
grid-template-rows: calc(50% - 2px) calc(50% - 2px);
|
||||
}
|
||||
|
||||
.app-body .audio-player,
|
||||
|
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
transition: transform .3s;
|
||||
}
|
||||
.app-body .media-gallery__item {
|
||||
border-radius: 8px;
|
||||
border-radius: 8px !important;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
|
||||
|
@ -3217,21 +3219,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
.app-body .media-gallery__item-thumbnail img {
|
||||
border-radius: 8px;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.app-body .media-gallery__gifv::after,
|
||||
.app-body .video-player::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
border-radius: 8px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: 1px solid var(--color-lines-translucent);
|
||||
z-index: 1;
|
||||
}
|
||||
.app-body .media-gallery__gifv:is(:active, :hover)::after {
|
||||
display: none;
|
||||
|
@ -6367,12 +6354,8 @@ a:is(.active,
|
|||
background-color: rgb(0, 0, 0, .9);
|
||||
}
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
) {
|
||||
.app-body .media-modal__buttons .icon-button,
|
||||
.app-body .media-modal__nav {
|
||||
background-color: #1e1e1e;
|
||||
color: #777777;
|
||||
height: 44px;
|
||||
|
@ -6384,23 +6367,11 @@ a:is(.active,
|
|||
transition: .2s all;
|
||||
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
):is(:active, :focus, :hover) {
|
||||
.app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
|
||||
.app-body .media-modal__nav:is(:active, :focus, :hover) {
|
||||
background-color: #343434;
|
||||
color: #ffffff;
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button)
|
||||
svg {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.app-body .media-modal__close {
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
|
|
|
@ -3185,7 +3185,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
.app-body .media-gallery {
|
||||
gap: 4px;
|
||||
grid-template-columns: calc(50% - 2px) calc(50% - 2px);
|
||||
grid-template-rows: calc(50% - 3px) calc(50% - 3px);
|
||||
grid-template-rows: calc(50% - 2px) calc(50% - 2px);
|
||||
}
|
||||
|
||||
.app-body .audio-player,
|
||||
|
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
transition: transform .3s;
|
||||
}
|
||||
.app-body .media-gallery__item {
|
||||
border-radius: 8px;
|
||||
border-radius: 8px !important;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
|
||||
|
@ -3217,21 +3219,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
|||
}
|
||||
.app-body .media-gallery__item-thumbnail img {
|
||||
border-radius: 8px;
|
||||
outline: 1px solid var(--color-lines-translucent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
.app-body .media-gallery__gifv::after,
|
||||
.app-body .video-player::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
border-radius: 8px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: 1px solid var(--color-lines-translucent);
|
||||
z-index: 1;
|
||||
}
|
||||
.app-body .media-gallery__gifv:is(:active, :hover)::after {
|
||||
display: none;
|
||||
|
@ -6367,12 +6354,8 @@ a:is(.active,
|
|||
background-color: rgb(0, 0, 0, .9);
|
||||
}
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
) {
|
||||
.app-body .media-modal__buttons .icon-button,
|
||||
.app-body .media-modal__nav {
|
||||
background-color: #1e1e1e;
|
||||
color: #777777;
|
||||
height: 44px;
|
||||
|
@ -6384,23 +6367,11 @@ a:is(.active,
|
|||
transition: .2s all;
|
||||
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button
|
||||
):is(:active, :focus, :hover) {
|
||||
.app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
|
||||
.app-body .media-modal__nav:is(:active, :focus, :hover) {
|
||||
background-color: #343434;
|
||||
color: #ffffff;
|
||||
}
|
||||
.app-body
|
||||
:is(
|
||||
.media-modal__close,
|
||||
.media-modal__nav,
|
||||
.media-modal__zoom-button)
|
||||
svg {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.app-body .media-modal__close {
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
|
|
Loading…
Reference in a new issue