From c8483ce4d36b3ad1226884466722ec10d1568ec6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Fri, 15 Dec 2023 15:27:38 +0100 Subject: [PATCH] Fixed: overlay color when a media modal was opened was inconsistent with interaction modals --- TangerineUI-cherry.css | 26 ++++++++++++-------------- TangerineUI-purple.css | 26 ++++++++++++-------------- TangerineUI.css | 26 ++++++++++++-------------- 3 files changed, 36 insertions(+), 42 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 3dec9dd..7581919 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -4035,6 +4035,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .interaction-modal { background-color: var(--color-content-bg); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, .25), + 0 8px 10px -6px rgba(0, 0, 0, .25); } .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { @@ -4088,14 +4091,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 8px 18px; } .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 23.5%, 0.7); + background-color: rgba(255, 255, 255, .9) !important; } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 0%, 0.7); + background-color: rgba(3, 3, 3, .8) !important; } } -.app-body .modal-root__modal, +.app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { @@ -4146,12 +4149,6 @@ a:is(.active, /* Media modals */ -.app-body .modal-root__overlay { - background-color: transparent !important; -} -.app-body .modal-root__modal.media-modal { - background-color: rgba(255, 255, 255, .9); -} .app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } @@ -4172,11 +4169,6 @@ a:is(.active, .app-body .media-modal__page-dot { background-color: var(--color-content-fg); } -@media (prefers-color-scheme: dark) { - .app-body .modal-root__modal.media-modal { - background-color: rgba(3, 3, 3, .8); - } -} .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -4801,6 +4793,12 @@ a:is(.active, background-color: var(--color-content-secondary-bg); } +@media screen and (min-width:1175px) { + .app-body .about :is(.link-footer, .about__footer) { + display: none; + } +} + /* Privacy Policy page */ diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 3495e55..6c58acf 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -4034,6 +4034,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .interaction-modal { background-color: var(--color-content-bg); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, .25), + 0 8px 10px -6px rgba(0, 0, 0, .25); } .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { @@ -4087,14 +4090,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 8px 18px; } .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 23.5%, 0.7); + background-color: rgba(255, 255, 255, .9) !important; } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 0%, 0.7); + background-color: rgba(3, 3, 3, .8) !important; } } -.app-body .modal-root__modal, +.app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { @@ -4145,12 +4148,6 @@ a:is(.active, /* Media modals */ -.app-body .modal-root__overlay { - background-color: transparent !important; -} -.app-body .modal-root__modal.media-modal { - background-color: rgba(255, 255, 255, .9); -} .app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } @@ -4171,11 +4168,6 @@ a:is(.active, .app-body .media-modal__page-dot { background-color: var(--color-content-fg); } -@media (prefers-color-scheme: dark) { - .app-body .modal-root__modal.media-modal { - background-color: rgba(3, 3, 3, .8); - } -} .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -4800,6 +4792,12 @@ a:is(.active, background-color: var(--color-content-secondary-bg); } +@media screen and (min-width:1175px) { + .app-body .about :is(.link-footer, .about__footer) { + display: none; + } +} + /* Privacy Policy page */ diff --git a/TangerineUI.css b/TangerineUI.css index 3258bb3..c31d3e1 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -4034,6 +4034,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .app-body .interaction-modal { background-color: var(--color-content-bg); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, .25), + 0 8px 10px -6px rgba(0, 0, 0, .25); } .app-body .interaction-modal, .app-body .interaction-modal__lead h3 { @@ -4087,14 +4090,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu padding: 8px 18px; } .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 23.5%, 0.7); + background-color: rgba(255, 255, 255, .9) !important; } @media (prefers-color-scheme: dark) { .app-body .modal-root__overlay { - background-color: hsla(0, 0%, 0%, 0.7); + background-color: rgba(3, 3, 3, .8) !important; } } -.app-body .modal-root__modal, +.app-body .interaction-modal, .app-body .boost-modal__container, .app-body .mute-modal__container, .app-body .block-modal__container { @@ -4145,12 +4148,6 @@ a:is(.active, /* Media modals */ -.app-body .modal-root__overlay { - background-color: transparent !important; -} -.app-body .modal-root__modal.media-modal { - background-color: rgba(255, 255, 255, .9); -} .app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } @@ -4171,11 +4168,6 @@ a:is(.active, .app-body .media-modal__page-dot { background-color: var(--color-content-fg); } -@media (prefers-color-scheme: dark) { - .app-body .modal-root__modal.media-modal { - background-color: rgba(3, 3, 3, .8); - } -} .app-body .media-modal__overlay .icon-external-link path { fill: var(--color-accent); } @@ -4800,6 +4792,12 @@ a:is(.active, background-color: var(--color-content-secondary-bg); } +@media screen and (min-width:1175px) { + .app-body .about :is(.link-footer, .about__footer) { + display: none; + } +} + /* Privacy Policy page */