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
commit 044c60ecf4
No known key found for this signature in database
4 changed files with 32 additions and 148 deletions
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 { .app-body .media-gallery {
gap: 4px; gap: 4px;
grid-template-columns: calc(50% - 2px) calc(50% - 2px); 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, .app-body .audio-player,
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transition: transform .3s; transition: transform .3s;
} }
.app-body .media-gallery__item { .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), .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 { .app-body .media-gallery__item-thumbnail img {
border-radius: 8px; 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 { .app-body .media-gallery__gifv:is(:active, :hover)::after {
display: none; display: none;
@ -6367,12 +6354,8 @@ a:is(.active,
background-color: rgb(0, 0, 0, .9); background-color: rgb(0, 0, 0, .9);
} }
} }
.app-body .app-body .media-modal__buttons .icon-button,
:is( .app-body .media-modal__nav {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
) {
background-color: #1e1e1e; background-color: #1e1e1e;
color: #777777; color: #777777;
height: 44px; height: 44px;
@ -6384,23 +6367,11 @@ a:is(.active,
transition: .2s all; transition: .2s all;
} }
.app-body .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
:is( .app-body .media-modal__nav:is(:active, :focus, :hover) {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
):is(:active, :focus, :hover) {
background-color: #343434; background-color: #343434;
color: #ffffff; 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 { .app-body .media-modal__close {
top: 24px; top: 24px;
left: 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 { .app-body .media-gallery {
gap: 4px; gap: 4px;
grid-template-columns: calc(50% - 2px) calc(50% - 2px); 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, .app-body .audio-player,
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transition: transform .3s; transition: transform .3s;
} }
.app-body .media-gallery__item { .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), .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 { .app-body .media-gallery__item-thumbnail img {
border-radius: 8px; 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 { .app-body .media-gallery__gifv:is(:active, :hover)::after {
display: none; display: none;
@ -6367,12 +6354,8 @@ a:is(.active,
background-color: rgb(0, 0, 0, .9); background-color: rgb(0, 0, 0, .9);
} }
} }
.app-body .app-body .media-modal__buttons .icon-button,
:is( .app-body .media-modal__nav {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
) {
background-color: #1e1e1e; background-color: #1e1e1e;
color: #777777; color: #777777;
height: 44px; height: 44px;
@ -6384,23 +6367,11 @@ a:is(.active,
transition: .2s all; transition: .2s all;
} }
.app-body .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
:is( .app-body .media-modal__nav:is(:active, :focus, :hover) {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
):is(:active, :focus, :hover) {
background-color: #343434; background-color: #343434;
color: #ffffff; 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 { .app-body .media-modal__close {
top: 24px; top: 24px;
left: 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 { .app-body .media-gallery {
gap: 4px; gap: 4px;
grid-template-columns: calc(50% - 2px) calc(50% - 2px); 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, .app-body .audio-player,
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transition: transform .3s; transition: transform .3s;
} }
.app-body .media-gallery__item { .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), .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 { .app-body .media-gallery__item-thumbnail img {
border-radius: 8px; 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 { .app-body .media-gallery__gifv:is(:active, :hover)::after {
display: none; display: none;
@ -6367,12 +6354,8 @@ a:is(.active,
background-color: rgb(0, 0, 0, .9); background-color: rgb(0, 0, 0, .9);
} }
} }
.app-body .app-body .media-modal__buttons .icon-button,
:is( .app-body .media-modal__nav {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
) {
background-color: #1e1e1e; background-color: #1e1e1e;
color: #777777; color: #777777;
height: 44px; height: 44px;
@ -6384,23 +6367,11 @@ a:is(.active,
transition: .2s all; transition: .2s all;
} }
.app-body .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
:is( .app-body .media-modal__nav:is(:active, :focus, :hover) {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
):is(:active, :focus, :hover) {
background-color: #343434; background-color: #343434;
color: #ffffff; 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 { .app-body .media-modal__close {
top: 24px; top: 24px;
left: 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 { .app-body .media-gallery {
gap: 4px; gap: 4px;
grid-template-columns: calc(50% - 2px) calc(50% - 2px); 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, .app-body .audio-player,
@ -3194,7 +3194,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
transition: transform .3s; transition: transform .3s;
} }
.app-body .media-gallery__item { .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), .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 { .app-body .media-gallery__item-thumbnail img {
border-radius: 8px; 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 { .app-body .media-gallery__gifv:is(:active, :hover)::after {
display: none; display: none;
@ -6367,12 +6354,8 @@ a:is(.active,
background-color: rgb(0, 0, 0, .9); background-color: rgb(0, 0, 0, .9);
} }
} }
.app-body .app-body .media-modal__buttons .icon-button,
:is( .app-body .media-modal__nav {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
) {
background-color: #1e1e1e; background-color: #1e1e1e;
color: #777777; color: #777777;
height: 44px; height: 44px;
@ -6384,23 +6367,11 @@ a:is(.active,
transition: .2s all; transition: .2s all;
} }
.app-body .app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
:is( .app-body .media-modal__nav:is(:active, :focus, :hover) {
.media-modal__close,
.media-modal__nav,
.media-modal__zoom-button
):is(:active, :focus, :hover) {
background-color: #343434; background-color: #343434;
color: #ffffff; 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 { .app-body .media-modal__close {
top: 24px; top: 24px;
left: 24px; left: 24px;