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

Fixed: media overlay background was opaque

Browse source
This commit is contained in:
Niléane 2023-07-22 20:39:21 +02:00
commit 2a7cf17050
No known key found for this signature in database
4 changed files with 88 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

23
TangerineUI-purple.css
View file

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon ・ Purple variant 🪻 /* TangerineUI 🍊 for Mastodon ・ Purple variant 🪻
version: 1.7.3 version: 1.7.4
A Tangerine redesign for Mastodon's Web UI. A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/ https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
color: var(--color-accent-fg); color: var(--color-accent-fg);
} }
/* Media modals */
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(255, 255, 255, .8);
}
.layout-single-column .media-modal__overlay .picture-in-picture__footer {
background-color: transparent;
}
.layout-single-column .media-modal__nav,
.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button {
color: var(--color-content-fg);
}
.layout-single-column .media-modal__page-dot {
background-color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(0, 0, 0, .6);
}
}
/* 🖼️ Picture in Picture */ /* 🖼️ Picture in Picture */
.layout-single-column .picture-in-picture { .layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2); box-shadow: 0 0 5px rgba(0, 0, 0, .2);

23
TangerineUI.css
View file

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon /* TangerineUI 🍊 for Mastodon
version: 1.7.3 version: 1.7.4
A Tangerine redesign for Mastodon's Web UI. A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/ https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
color: var(--color-accent-fg); color: var(--color-accent-fg);
} }
/* Media modals */
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(255, 255, 255, .8);
}
.layout-single-column .media-modal__overlay .picture-in-picture__footer {
background-color: transparent;
}
.layout-single-column .media-modal__nav,
.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button {
color: var(--color-content-fg);
}
.layout-single-column .media-modal__page-dot {
background-color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(0, 0, 0, .6);
}
}
/* 🖼️ Picture in Picture */ /* 🖼️ Picture in Picture */
.layout-single-column .picture-in-picture { .layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2); box-shadow: 0 0 5px rgba(0, 0, 0, .2);

23
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View file

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon ・ Purple variant 🪻 /* TangerineUI 🍊 for Mastodon ・ Purple variant 🪻
version: 1.7.3 version: 1.7.4
A Tangerine redesign for Mastodon's Web UI. A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/ https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
color: var(--color-accent-fg); color: var(--color-accent-fg);
} }
/* Media modals */
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(255, 255, 255, .8);
}
.layout-single-column .media-modal__overlay .picture-in-picture__footer {
background-color: transparent;
}
.layout-single-column .media-modal__nav,
.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button {
color: var(--color-content-fg);
}
.layout-single-column .media-modal__page-dot {
background-color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(0, 0, 0, .6);
}
}
/* 🖼️ Picture in Picture */ /* 🖼️ Picture in Picture */
.layout-single-column .picture-in-picture { .layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2); box-shadow: 0 0 5px rgba(0, 0, 0, .2);

23
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View file

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon /* TangerineUI 🍊 for Mastodon
version: 1.7.3 version: 1.7.4
A Tangerine redesign for Mastodon's Web UI. A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/ https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
color: var(--color-accent-fg); color: var(--color-accent-fg);
} }
/* Media modals */
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(255, 255, 255, .8);
}
.layout-single-column .media-modal__overlay .picture-in-picture__footer {
background-color: transparent;
}
.layout-single-column .media-modal__nav,
.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button {
color: var(--color-content-fg);
}
.layout-single-column .media-modal__page-dot {
background-color: var(--color-content-fg);
}
@media (prefers-color-scheme: dark) {
.layout-single-column .modal-root__modal.media-modal {
background-color: rgba(0, 0, 0, .6);
}
}
/* 🖼️ Picture in Picture */ /* 🖼️ Picture in Picture */
.layout-single-column .picture-in-picture { .layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2); box-shadow: 0 0 5px rgba(0, 0, 0, .2);