From e40dc4419e4bdfaf91dbb835d8031d63111a45dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Fri, 24 Nov 2023 17:50:42 +0100 Subject: [PATCH] Added support for new profile onboarding --- TangerineUI-cherry.css | 74 +++++++++++++++++++++++++++++++++++++++--- TangerineUI-purple.css | 74 +++++++++++++++++++++++++++++++++++++++--- TangerineUI.css | 74 +++++++++++++++++++++++++++++++++++++++--- 3 files changed, 210 insertions(+), 12 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index f728d70..7d7cb2c 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -372,7 +372,7 @@ body.app-body { .detailed-status__action-bar .icon-close, .account__header__tabs__buttons .icon-close, .icon-sign-out, - .icon-undefined + .account__header__tabs__buttons .icon-undefined ) path { display: none; @@ -421,7 +421,7 @@ body.app-body { .detailed-status__action-bar .icon-close, .account__header__tabs__buttons .icon-close, .icon-sign-out, - .icon-undefined + .account__header__tabs__buttons .icon-undefined ) { background-repeat: no-repeat; background-size: 100%; @@ -711,7 +711,7 @@ body.app-body { .app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } -.app-body .icon-undefined { +.app-body .account__header__tabs__buttons .icon-undefined { background-image: var(--icon-share); } @@ -4164,10 +4164,10 @@ a:is(.active, background-color: var(--color-accent-bg); } .app-body .onboarding__steps__item__icon, -.app-body .onboarding__steps__item__description h6, .app-body .onboarding__link { color: var(--color-accent); } +.app-body .onboarding__steps__item__description h6, .app-body .onboarding__steps__item__description p, .app-body .onboarding__lead, .app-body .onboarding__lead strong { @@ -4178,6 +4178,66 @@ a:is(.active, fill: var(--color-accent); } +.app-body .onboarding__profile .app-form__avatar-input { + border-color: var(--color-content-bg); + border-radius: 50%; + border-width: 5px; +} +.app-body .onboarding__profile .app-form__avatar-input img { + border-radius: 50%; + background: var(--color-content-secondary-bg); +} +.app-body .onboarding__profile .app-form__header-input img { + background: var(--color-secondary-bg); +} +.app-body .simple_form .input.with_block_label > label, +.app-body .simple_form .input.with_block_label .hint, +.app-body .app-form__toggle__label strong, +.app-body .simple_form .hint { + color: var(--color-fg); +} +.app-body .app-form__toggle__toggle > div { + border-color: var(--color-lines); +} +.app-form__avatar-input.selected .icon, +.app-form__header-input.selected .icon { + color: var(--color-accent); +} +.app-body .simple_form + :is( + input[type=datetime-local], + input[type=email], + input[type=number], + input[type=password], + input[type=text], + input[type=url], + textarea + ) { + background-color: var(--color-content-secondary-bg); + border-color: var(--color-lines); + border-radius: 8px; + color: var(--color-content-fg); +} +.app-body .simple_form + :is( + input[type=datetime-local], + input[type=email], + input[type=number], + input[type=password], + input[type=text], + input[type=url], + textarea + ):is(:active, :focus) { + border-color: var(--color-accent); +} +.app-body .column-title { + margin: -20px -20px 30px; + padding: 40px; + background-color: var(--color-content-secondary-bg); +} +.app-body .column-title:has(+ .simple_form) { + margin-bottom: 0; +} .app-body .follow-recommendations { background-color: var(--color-content-bg); } @@ -4481,6 +4541,12 @@ a:is(.active, border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } +@media screen and (min-width:1175px) { + .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } +} diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index c3ea7f8..030a795 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -372,7 +372,7 @@ body.app-body { .detailed-status__action-bar .icon-close, .account__header__tabs__buttons .icon-close, .icon-sign-out, - .icon-undefined + .account__header__tabs__buttons .icon-undefined ) path { display: none; @@ -421,7 +421,7 @@ body.app-body { .detailed-status__action-bar .icon-close, .account__header__tabs__buttons .icon-close, .icon-sign-out, - .icon-undefined + .account__header__tabs__buttons .icon-undefined ) { background-repeat: no-repeat; background-size: 100%; @@ -711,7 +711,7 @@ body.app-body { .app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } -.app-body .icon-undefined { +.app-body .account__header__tabs__buttons .icon-undefined { background-image: var(--icon-share); } @@ -4164,10 +4164,10 @@ a:is(.active, background-color: var(--color-accent-bg); } .app-body .onboarding__steps__item__icon, -.app-body .onboarding__steps__item__description h6, .app-body .onboarding__link { color: var(--color-accent); } +.app-body .onboarding__steps__item__description h6, .app-body .onboarding__steps__item__description p, .app-body .onboarding__lead, .app-body .onboarding__lead strong { @@ -4178,6 +4178,66 @@ a:is(.active, fill: var(--color-accent); } +.app-body .onboarding__profile .app-form__avatar-input { + border-color: var(--color-content-bg); + border-radius: 50%; + border-width: 5px; +} +.app-body .onboarding__profile .app-form__avatar-input img { + border-radius: 50%; + background: var(--color-content-secondary-bg); +} +.app-body .onboarding__profile .app-form__header-input img { + background: var(--color-secondary-bg); +} +.app-body .simple_form .input.with_block_label > label, +.app-body .simple_form .input.with_block_label .hint, +.app-body .app-form__toggle__label strong, +.app-body .simple_form .hint { + color: var(--color-fg); +} +.app-body .app-form__toggle__toggle > div { + border-color: var(--color-lines); +} +.app-form__avatar-input.selected .icon, +.app-form__header-input.selected .icon { + color: var(--color-accent); +} +.app-body .simple_form + :is( + input[type=datetime-local], + input[type=email], + input[type=number], + input[type=password], + input[type=text], + input[type=url], + textarea + ) { + background-color: var(--color-content-secondary-bg); + border-color: var(--color-lines); + border-radius: 8px; + color: var(--color-content-fg); +} +.app-body .simple_form + :is( + input[type=datetime-local], + input[type=email], + input[type=number], + input[type=password], + input[type=text], + input[type=url], + textarea + ):is(:active, :focus) { + border-color: var(--color-accent); +} +.app-body .column-title { + margin: -20px -20px 30px; + padding: 40px; + background-color: var(--color-content-secondary-bg); +} +.app-body .column-title:has(+ .simple_form) { + margin-bottom: 0; +} .app-body .follow-recommendations { background-color: var(--color-content-bg); } @@ -4481,6 +4541,12 @@ a:is(.active, border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } +@media screen and (min-width:1175px) { + .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } +} diff --git a/TangerineUI.css b/TangerineUI.css index 12e73a1..4b75f68 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -372,7 +372,7 @@ body.app-body { .detailed-status__action-bar .icon-close, .account__header__tabs__buttons .icon-close, .icon-sign-out, - .icon-undefined + .account__header__tabs__buttons .icon-undefined ) path { display: none; @@ -421,7 +421,7 @@ body.app-body { .detailed-status__action-bar .icon-close, .account__header__tabs__buttons .icon-close, .icon-sign-out, - .icon-undefined + .account__header__tabs__buttons .icon-undefined ) { background-repeat: no-repeat; background-size: 100%; @@ -711,7 +711,7 @@ body.app-body { .app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } -.app-body .icon-undefined { +.app-body .account__header__tabs__buttons .icon-undefined { background-image: var(--icon-share); } @@ -4164,10 +4164,10 @@ a:is(.active, background-color: var(--color-accent-bg); } .app-body .onboarding__steps__item__icon, -.app-body .onboarding__steps__item__description h6, .app-body .onboarding__link { color: var(--color-accent); } +.app-body .onboarding__steps__item__description h6, .app-body .onboarding__steps__item__description p, .app-body .onboarding__lead, .app-body .onboarding__lead strong { @@ -4178,6 +4178,66 @@ a:is(.active, fill: var(--color-accent); } +.app-body .onboarding__profile .app-form__avatar-input { + border-color: var(--color-content-bg); + border-radius: 50%; + border-width: 5px; +} +.app-body .onboarding__profile .app-form__avatar-input img { + border-radius: 50%; + background: var(--color-content-secondary-bg); +} +.app-body .onboarding__profile .app-form__header-input img { + background: var(--color-secondary-bg); +} +.app-body .simple_form .input.with_block_label > label, +.app-body .simple_form .input.with_block_label .hint, +.app-body .app-form__toggle__label strong, +.app-body .simple_form .hint { + color: var(--color-fg); +} +.app-body .app-form__toggle__toggle > div { + border-color: var(--color-lines); +} +.app-form__avatar-input.selected .icon, +.app-form__header-input.selected .icon { + color: var(--color-accent); +} +.app-body .simple_form + :is( + input[type=datetime-local], + input[type=email], + input[type=number], + input[type=password], + input[type=text], + input[type=url], + textarea + ) { + background-color: var(--color-content-secondary-bg); + border-color: var(--color-lines); + border-radius: 8px; + color: var(--color-content-fg); +} +.app-body .simple_form + :is( + input[type=datetime-local], + input[type=email], + input[type=number], + input[type=password], + input[type=text], + input[type=url], + textarea + ):is(:active, :focus) { + border-color: var(--color-accent); +} +.app-body .column-title { + margin: -20px -20px 30px; + padding: 40px; + background-color: var(--color-content-secondary-bg); +} +.app-body .column-title:has(+ .simple_form) { + margin-bottom: 0; +} .app-body .follow-recommendations { background-color: var(--color-content-bg); } @@ -4481,6 +4541,12 @@ a:is(.active, border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } +@media screen and (min-width:1175px) { + .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } +}