chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes to media galleries

Browse source
This commit is contained in:
Niléane 2024-09-27 21:00:50 +02:00
parent bc51e331e7
commit 044c60ecf4
No known key found for this signature in database
4 changed files with 32 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
TangerineUI-cherry.css
View file

@ -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;

45
TangerineUI-lagoon.css
View file

@ -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;

45
TangerineUI-purple.css
View file

@ -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;

45
TangerineUI.css
View file

@ -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;