Fixed: overlay color when a media modal was opened was inconsistent with interaction modals
This commit is contained in:
parent
6141480316
commit
c8483ce4d3
3 changed files with 36 additions and 42 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue