mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-28 14:58:13 +09:00
Code

Merge pull request #24 from nileane/modals

Browse Source 
Added support for more modals : mute, block, boost
This commit is contained in:
Niléane 2023-07-13 19:12:08 +02:00 committed by GitHub
commit c5d6ec1b44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 82 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
TangerineUI-purple.css
View File

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon ・ Purple variant 🪻
version: 1.2
version: 1.3
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -349,6 +349,10 @@ body.layout-single-column {
opacity: .2;
pointer-events: none;
}
.layout-single-column .boost-modal__action-bar .fa-retweet {
background-image: var(--icon-boost);
vertical-align: middle;
}
/* Replace reply icon */
.layout-single-column i.fa-mail-reply::before,
.layout-single-column i.fa-reply::before,
@ -2078,20 +2082,20 @@ body.layout-single-column {
}
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active,
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value,
.layout-single-column .privacy-dropdown__option.active,
.layout-single-column .privacy-dropdown__option.active:hover,
.layout-single-column .privacy-dropdown__option:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
.layout-single-column .privacy-dropdown__option.active:hover {
background-color: var(--color-accent-focus);
}
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content,
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button,
.layout-single-column .privacy-dropdown .icon-button.inverted.active {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
@ -2150,6 +2154,39 @@ body.layout-single-column {
padding: 7px 18px;
}
.layout-single-column .modal-root__modal,
.layout-single-column .boost-modal__container,
.layout-single-column .mute-modal__container,
.layout-single-column .block-modal__container {
background-color: var(--color-content-bg);
}
.layout-single-column .boost-modal__container {
margin-bottom: -11px;
}
.layout-single-column .confirmation-modal__container,
.layout-single-column .mute-modal__container,
.layout-single-column .block-modal__container {
background-color: var(--color-content-bg);
color: var(--color-content-fg);
}
.layout-single-column .block-modal__action-bar,
.layout-single-column .boost-modal__action-bar,
.layout-single-column .confirmation-modal__action-bar,
.layout-single-column .mute-modal__action-bar {
background-color: var(--color-accent-bg);
}
.layout-single-column .block-modal__action-bar > div,
.layout-single-column .boost-modal__action-bar > div,
.layout-single-column .confirmation-modal__action-bar > div,
.layout-single-column .mute-modal__action-bar > div,
.layout-single-column .boost-modal__container .status__content__text,
.layout-single-column .boost-modal__container .display-name strong.display-name__html,
.layout-single-column .boost-modal__container .status__info,
.layout-single-column .boost-modal__container .status__relative-time time,
.layout-single-column .boost-modal__container .status.light .status__visibility-icon {
color: var(--color-content-fg);
}
/* 📄 Meta
------- */

45
TangerineUI.css
View File

@ -1,5 +1,5 @@
/* TangerineUI 🍊 for Mastodon
version: 1.2
version: 1.3
A Tangerine redesign for Mastodon's Web UI.
https://github.com/nileane/TangerineUI-for-Mastodon/
@ -349,6 +349,10 @@ body.layout-single-column {
opacity: .2;
pointer-events: none;
}
.layout-single-column .boost-modal__action-bar .fa-retweet {
background-image: var(--icon-boost);
vertical-align: middle;
}
/* Replace reply icon */
.layout-single-column i.fa-mail-reply::before,
.layout-single-column i.fa-reply::before,
@ -2078,20 +2082,20 @@ body.layout-single-column {
}
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active,
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value,
.layout-single-column .privacy-dropdown__option.active,
.layout-single-column .privacy-dropdown__option.active:hover,
.layout-single-column .privacy-dropdown__option:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
.layout-single-column .privacy-dropdown__option.active:hover {
background-color: var(--color-accent-focus);
}
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content,
.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button,
.layout-single-column .privacy-dropdown .icon-button.inverted.active {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
@ -2150,6 +2154,39 @@ body.layout-single-column {
padding: 7px 18px;
}
.layout-single-column .modal-root__modal,
.layout-single-column .boost-modal__container,
.layout-single-column .mute-modal__container,
.layout-single-column .block-modal__container {
background-color: var(--color-content-bg);
}
.layout-single-column .boost-modal__container {
margin-bottom: -11px;
}
.layout-single-column .confirmation-modal__container,
.layout-single-column .mute-modal__container,
.layout-single-column .block-modal__container {
background-color: var(--color-content-bg);
color: var(--color-content-fg);
}
.layout-single-column .block-modal__action-bar,
.layout-single-column .boost-modal__action-bar,
.layout-single-column .confirmation-modal__action-bar,
.layout-single-column .mute-modal__action-bar {
background-color: var(--color-accent-bg);
}
.layout-single-column .block-modal__action-bar > div,
.layout-single-column .boost-modal__action-bar > div,
.layout-single-column .confirmation-modal__action-bar > div,
.layout-single-column .mute-modal__action-bar > div,
.layout-single-column .boost-modal__container .status__content__text,
.layout-single-column .boost-modal__container .display-name strong.display-name__html,
.layout-single-column .boost-modal__container .status__info,
.layout-single-column .boost-modal__container .status__relative-time time,
.layout-single-column .boost-modal__container .status.light .status__visibility-icon {
color: var(--color-content-fg);
}
/* 📄 Meta
------- */