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

Fixed: overlay color when a media modal was opened was inconsistent with interaction modals

Browse source
This commit is contained in:
Niléane 2023-12-15 15:27:38 +01:00
commit c8483ce4d3
No known key found for this signature in database
3 changed files with 36 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

26
TangerineUI-cherry.css
View file

@ -4035,6 +4035,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .interaction-modal { .app-body .interaction-modal {
background-color: var(--color-content-bg); 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,
.app-body .interaction-modal__lead h3 { .app-body .interaction-modal__lead h3 {
@ -4088,14 +4091,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding: 8px 18px; padding: 8px 18px;
} }
.app-body .modal-root__overlay { .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) { @media (prefers-color-scheme: dark) {
.app-body .modal-root__overlay { .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 .boost-modal__container,
.app-body .mute-modal__container, .app-body .mute-modal__container,
.app-body .block-modal__container { .app-body .block-modal__container {
@ -4146,12 +4149,6 @@ a:is(.active,
/* Media modals */ /* 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 { .app-body .media-modal__overlay .picture-in-picture__footer {
background-color: transparent; background-color: transparent;
} }
@ -4172,11 +4169,6 @@ a:is(.active,
.app-body .media-modal__page-dot { .app-body .media-modal__page-dot {
background-color: var(--color-content-fg); 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 { .app-body .media-modal__overlay .icon-external-link path {
fill: var(--color-accent); fill: var(--color-accent);
} }
@ -4801,6 +4793,12 @@ a:is(.active,
background-color: var(--color-content-secondary-bg); 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 */ /* Privacy Policy page */

26
TangerineUI-purple.css
View file

@ -4034,6 +4034,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .interaction-modal { .app-body .interaction-modal {
background-color: var(--color-content-bg); 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,
.app-body .interaction-modal__lead h3 { .app-body .interaction-modal__lead h3 {
@ -4087,14 +4090,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding: 8px 18px; padding: 8px 18px;
} }
.app-body .modal-root__overlay { .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) { @media (prefers-color-scheme: dark) {
.app-body .modal-root__overlay { .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 .boost-modal__container,
.app-body .mute-modal__container, .app-body .mute-modal__container,
.app-body .block-modal__container { .app-body .block-modal__container {
@ -4145,12 +4148,6 @@ a:is(.active,
/* Media modals */ /* 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 { .app-body .media-modal__overlay .picture-in-picture__footer {
background-color: transparent; background-color: transparent;
} }
@ -4171,11 +4168,6 @@ a:is(.active,
.app-body .media-modal__page-dot { .app-body .media-modal__page-dot {
background-color: var(--color-content-fg); 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 { .app-body .media-modal__overlay .icon-external-link path {
fill: var(--color-accent); fill: var(--color-accent);
} }
@ -4800,6 +4792,12 @@ a:is(.active,
background-color: var(--color-content-secondary-bg); 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 */ /* Privacy Policy page */

26
TangerineUI.css
View file

@ -4034,6 +4034,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
} }
.app-body .interaction-modal { .app-body .interaction-modal {
background-color: var(--color-content-bg); 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,
.app-body .interaction-modal__lead h3 { .app-body .interaction-modal__lead h3 {
@ -4087,14 +4090,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding: 8px 18px; padding: 8px 18px;
} }
.app-body .modal-root__overlay { .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) { @media (prefers-color-scheme: dark) {
.app-body .modal-root__overlay { .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 .boost-modal__container,
.app-body .mute-modal__container, .app-body .mute-modal__container,
.app-body .block-modal__container { .app-body .block-modal__container {
@ -4145,12 +4148,6 @@ a:is(.active,
/* Media modals */ /* 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 { .app-body .media-modal__overlay .picture-in-picture__footer {
background-color: transparent; background-color: transparent;
} }
@ -4171,11 +4168,6 @@ a:is(.active,
.app-body .media-modal__page-dot { .app-body .media-modal__page-dot {
background-color: var(--color-content-fg); 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 { .app-body .media-modal__overlay .icon-external-link path {
fill: var(--color-accent); fill: var(--color-accent);
} }
@ -4800,6 +4792,12 @@ a:is(.active,
background-color: var(--color-content-secondary-bg); 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 */ /* Privacy Policy page */