From 044c60ecf4720e6e39e955a2afeb77f11dd3ad77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nile=CC=81ane?= Date: Fri, 27 Sep 2024 21:00:50 +0200 Subject: [PATCH] Fixes to media galleries --- TangerineUI-cherry.css | 45 ++++++++---------------------------------- TangerineUI-lagoon.css | 45 ++++++++---------------------------------- TangerineUI-purple.css | 45 ++++++++---------------------------------- TangerineUI.css | 45 ++++++++---------------------------------- 4 files changed, 32 insertions(+), 148 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 6380e1c..7969e73 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -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; diff --git a/TangerineUI-lagoon.css b/TangerineUI-lagoon.css index fba4613..ec642ba 100644 --- a/TangerineUI-lagoon.css +++ b/TangerineUI-lagoon.css @@ -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; diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 4dd47fc..06b8631 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -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; diff --git a/TangerineUI.css b/TangerineUI.css index 8636bda..b3beb10 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -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;