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

Added support for the new onboarding experience in Mastodon 4.2

Browse Source
This commit is contained in:
Niléane 2023-09-21 21:15:48 +02:00
parent c9b2bd51cc
commit d976680a84
No known key found for this signature in database
4 changed files with 272 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
TangerineUI-purple.css
View File

@ -533,6 +533,17 @@ body.layout-single-column {
.layout-single-column .navigation-bar strong {
color: var(--color-content-fg);
}
.layout-single-column .compose-form__highlightable.active {
box-shadow: none;
}
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active),
.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper,
.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within),
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
border-color: var(--color-accent);
}
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
.layout-single-column .compose-form .autosuggest-textarea__textarea,
.layout-single-column .compose-form .autosuggest-textarea__suggestions__item,
@ -3499,7 +3510,7 @@ body.layout-single-column {
/* 🤗 Onboarding suggestions */
/* 🤗 Onboarding */
.layout-single-column .scrollable.follow-recommendations-container,
.layout-single-column .column-list {
background-color: var(--color-content-bg);
@ -3518,7 +3529,63 @@ body.layout-single-column {
color: var(--color-content-fg-muted);
}
.layout-single-column .onboarding__steps__item,
.layout-single-column .onboarding__link {
background-color: var(--color-content-secondary-bg);
transition: all .2s;
}
.layout-single-column .onboarding__steps__item:active,
.layout-single-column .onboarding__steps__item:focus,
.layout-single-column .onboarding__steps__item:hover,
.layout-single-column .onboarding__link:active,
.layout-single-column .onboarding__link:focus,
.layout-single-column .onboarding__link:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .onboarding__steps__item__icon,
.layout-single-column .onboarding__steps__item__description h6,
.layout-single-column .onboarding__link {
color: var(--color-accent);
}
.layout-single-column .onboarding__steps__item__description p,
.layout-single-column .onboarding__lead,
.layout-single-column .onboarding__lead strong {
color: var(--color-content-fg);
}
.layout-single-column .onboarding__steps__item__go svg path,
.layout-single-column .onboarding__link svg path {
fill: var(--color-accent);
}
.layout-single-column .follow-recommendations {
background-color: var(--color-content-bg);
}
.layout-single-column .follow-recommendations .account {
border-left: 0;
border-right: 0;
margin-bottom: 15px;
}
.layout-single-column .follow-recommendations .account__note {
color: var(--color-content-fg);
opacity: .7;
}
.layout-single-column .follow-recommendations .account__note p {
overflow: hidden;
}
.layout-single-column .copy-paste-text {
background-color: var(--color-accent-bg);
border-color: var(--color-accent-lines);
color: var(--color-content-fg);
}
.layout-single-column .copy-paste-text:focus,
.layout-single-column .copy-paste-text:active,
.layout-single-column .tip-carousel:focus {
border-color: var(--color-accent);
}
.layout-single-column .copy-paste-text:has(textarea:focus) {
border-color: var(--color-accent);
}
/* 📢 Announcements */
.layout-single-column .announcements,

69
TangerineUI.css
View File

@ -533,6 +533,17 @@ body.layout-single-column {
.layout-single-column .navigation-bar strong {
color: var(--color-content-fg);
}
.layout-single-column .compose-form__highlightable.active {
box-shadow: none;
}
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active),
.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper,
.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within),
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
border-color: var(--color-accent);
}
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
.layout-single-column .compose-form .autosuggest-textarea__textarea,
.layout-single-column .compose-form .autosuggest-textarea__suggestions__item,
@ -3499,7 +3510,7 @@ body.layout-single-column {
/* 🤗 Onboarding suggestions */
/* 🤗 Onboarding */
.layout-single-column .scrollable.follow-recommendations-container,
.layout-single-column .column-list {
background-color: var(--color-content-bg);
@ -3518,7 +3529,63 @@ body.layout-single-column {
color: var(--color-content-fg-muted);
}
.layout-single-column .onboarding__steps__item,
.layout-single-column .onboarding__link {
background-color: var(--color-content-secondary-bg);
transition: all .2s;
}
.layout-single-column .onboarding__steps__item:active,
.layout-single-column .onboarding__steps__item:focus,
.layout-single-column .onboarding__steps__item:hover,
.layout-single-column .onboarding__link:active,
.layout-single-column .onboarding__link:focus,
.layout-single-column .onboarding__link:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .onboarding__steps__item__icon,
.layout-single-column .onboarding__steps__item__description h6,
.layout-single-column .onboarding__link {
color: var(--color-accent);
}
.layout-single-column .onboarding__steps__item__description p,
.layout-single-column .onboarding__lead,
.layout-single-column .onboarding__lead strong {
color: var(--color-content-fg);
}
.layout-single-column .onboarding__steps__item__go svg path,
.layout-single-column .onboarding__link svg path {
fill: var(--color-accent);
}
.layout-single-column .follow-recommendations {
background-color: var(--color-content-bg);
}
.layout-single-column .follow-recommendations .account {
border-left: 0;
border-right: 0;
margin-bottom: 15px;
}
.layout-single-column .follow-recommendations .account__note {
color: var(--color-content-fg);
opacity: .7;
}
.layout-single-column .follow-recommendations .account__note p {
overflow: hidden;
}
.layout-single-column .copy-paste-text {
background-color: var(--color-accent-bg);
border-color: var(--color-accent-lines);
color: var(--color-content-fg);
}
.layout-single-column .copy-paste-text:focus,
.layout-single-column .copy-paste-text:active,
.layout-single-column .tip-carousel:focus {
border-color: var(--color-accent);
}
.layout-single-column .copy-paste-text:has(textarea:focus) {
border-color: var(--color-accent);
}
/* 📢 Announcements */
.layout-single-column .announcements,

69
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View File

@ -533,6 +533,17 @@ body.layout-single-column {
.layout-single-column .navigation-bar strong {
color: var(--color-content-fg);
}
.layout-single-column .compose-form__highlightable.active {
box-shadow: none;
}
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active),
.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper,
.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within),
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
border-color: var(--color-accent);
}
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
.layout-single-column .compose-form .autosuggest-textarea__textarea,
.layout-single-column .compose-form .autosuggest-textarea__suggestions__item,
@ -3499,7 +3510,7 @@ body.layout-single-column {
/* 🤗 Onboarding suggestions */
/* 🤗 Onboarding */
.layout-single-column .scrollable.follow-recommendations-container,
.layout-single-column .column-list {
background-color: var(--color-content-bg);
@ -3518,7 +3529,63 @@ body.layout-single-column {
color: var(--color-content-fg-muted);
}
.layout-single-column .onboarding__steps__item,
.layout-single-column .onboarding__link {
background-color: var(--color-content-secondary-bg);
transition: all .2s;
}
.layout-single-column .onboarding__steps__item:active,
.layout-single-column .onboarding__steps__item:focus,
.layout-single-column .onboarding__steps__item:hover,
.layout-single-column .onboarding__link:active,
.layout-single-column .onboarding__link:focus,
.layout-single-column .onboarding__link:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .onboarding__steps__item__icon,
.layout-single-column .onboarding__steps__item__description h6,
.layout-single-column .onboarding__link {
color: var(--color-accent);
}
.layout-single-column .onboarding__steps__item__description p,
.layout-single-column .onboarding__lead,
.layout-single-column .onboarding__lead strong {
color: var(--color-content-fg);
}
.layout-single-column .onboarding__steps__item__go svg path,
.layout-single-column .onboarding__link svg path {
fill: var(--color-accent);
}
.layout-single-column .follow-recommendations {
background-color: var(--color-content-bg);
}
.layout-single-column .follow-recommendations .account {
border-left: 0;
border-right: 0;
margin-bottom: 15px;
}
.layout-single-column .follow-recommendations .account__note {
color: var(--color-content-fg);
opacity: .7;
}
.layout-single-column .follow-recommendations .account__note p {
overflow: hidden;
}
.layout-single-column .copy-paste-text {
background-color: var(--color-accent-bg);
border-color: var(--color-accent-lines);
color: var(--color-content-fg);
}
.layout-single-column .copy-paste-text:focus,
.layout-single-column .copy-paste-text:active,
.layout-single-column .tip-carousel:focus {
border-color: var(--color-accent);
}
.layout-single-column .copy-paste-text:has(textarea:focus) {
border-color: var(--color-accent);
}
/* 📢 Announcements */
.layout-single-column .announcements,

69
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View File

@ -533,6 +533,17 @@ body.layout-single-column {
.layout-single-column .navigation-bar strong {
color: var(--color-content-fg);
}
.layout-single-column .compose-form__highlightable.active {
box-shadow: none;
}
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active),
.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper,
.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper,
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within,
.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within),
.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper {
border-color: var(--color-accent);
}
.layout-single-column .compose-form .autosuggest-textarea__suggestions,
.layout-single-column .compose-form .autosuggest-textarea__textarea,
.layout-single-column .compose-form .autosuggest-textarea__suggestions__item,
@ -3499,7 +3510,7 @@ body.layout-single-column {
/* 🤗 Onboarding suggestions */
/* 🤗 Onboarding */
.layout-single-column .scrollable.follow-recommendations-container,
.layout-single-column .column-list {
background-color: var(--color-content-bg);
@ -3518,7 +3529,63 @@ body.layout-single-column {
color: var(--color-content-fg-muted);
}
.layout-single-column .onboarding__steps__item,
.layout-single-column .onboarding__link {
background-color: var(--color-content-secondary-bg);
transition: all .2s;
}
.layout-single-column .onboarding__steps__item:active,
.layout-single-column .onboarding__steps__item:focus,
.layout-single-column .onboarding__steps__item:hover,
.layout-single-column .onboarding__link:active,
.layout-single-column .onboarding__link:focus,
.layout-single-column .onboarding__link:hover {
background-color: var(--color-accent-bg);
}
.layout-single-column .onboarding__steps__item__icon,
.layout-single-column .onboarding__steps__item__description h6,
.layout-single-column .onboarding__link {
color: var(--color-accent);
}
.layout-single-column .onboarding__steps__item__description p,
.layout-single-column .onboarding__lead,
.layout-single-column .onboarding__lead strong {
color: var(--color-content-fg);
}
.layout-single-column .onboarding__steps__item__go svg path,
.layout-single-column .onboarding__link svg path {
fill: var(--color-accent);
}
.layout-single-column .follow-recommendations {
background-color: var(--color-content-bg);
}
.layout-single-column .follow-recommendations .account {
border-left: 0;
border-right: 0;
margin-bottom: 15px;
}
.layout-single-column .follow-recommendations .account__note {
color: var(--color-content-fg);
opacity: .7;
}
.layout-single-column .follow-recommendations .account__note p {
overflow: hidden;
}
.layout-single-column .copy-paste-text {
background-color: var(--color-accent-bg);
border-color: var(--color-accent-lines);
color: var(--color-content-fg);
}
.layout-single-column .copy-paste-text:focus,
.layout-single-column .copy-paste-text:active,
.layout-single-column .tip-carousel:focus {
border-color: var(--color-accent);
}
.layout-single-column .copy-paste-text:has(textarea:focus) {
border-color: var(--color-accent);
}
/* 📢 Announcements */
.layout-single-column .announcements,