mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-12-01 00:08:13 +09:00
Code

Merge pull request #44 from nileane/dev

Browse Source 
Fixed: media overlay background was opaque
This commit is contained in:
Niléane 2023-07-22 20:39:49 +02:00 committed by GitHub
commit 10cabc86ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 4 deletions
Show Stats 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 🪻
version: 1.7.3
version: 1.7.4
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
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 */
.layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2);

23
TangerineUI.css
View File

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon
version: 1.7.3
version: 1.7.4
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
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 */
.layout-single-column .picture-in-picture {
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 🪻
version: 1.7.3
version: 1.7.4
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
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 */
.layout-single-column .picture-in-picture {
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
version: 1.7.3
version: 1.7.4
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -2297,6 +2297,27 @@ body.layout-single-column {
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 */
.layout-single-column .picture-in-picture {
box-shadow: 0 0 5px rgba(0, 0, 0, .2);