From c2c919f11042d045411541b45e54c26c3b45df42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Fri, 15 Mar 2024 15:49:13 +0100 Subject: [PATCH] Support for the new domain information dialog in profiles (https://github.com/mastodon/mastodon/pull/29602) --- TangerineUI-cherry.css | 73 ++++++++++++++++++++++++++++++++++++++---- TangerineUI-purple.css | 73 ++++++++++++++++++++++++++++++++++++++---- TangerineUI.css | 73 ++++++++++++++++++++++++++++++++++++++---- 3 files changed, 201 insertions(+), 18 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index f618a84..c36ea02 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -799,7 +799,8 @@ body.app-body { .icon-eye, .icon-eraser, .icon-pencil, - .app-form__header-input .icon + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon ) path { display: none; @@ -859,7 +860,8 @@ body.app-body { .icon-eye, .icon-eraser, .icon-pencil, - .app-form__header-input .icon + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon ) { background-repeat: no-repeat; background-size: 100%; @@ -4000,7 +4002,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__tabs__name h1 > span { font-size: 18px; } -.app-body .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1 small > span:first-child { opacity: .7; } .app-body .account__header__tabs__name .icon-lock { @@ -4056,12 +4058,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: 2px 3px var(--color-accent-bg); } .app-body .account__header__badges .account-role { - border-radius: 8px; - border-color: var(--color-accent); - color: var(--color-accent); + color: var(--color-content-fg); + border: 0; + border-radius: 50px; + padding: 0 10px; + height: 29px; + background-color: var(--color-content-secondary-bg); + gap: 5px; +} +.app-body .account__header__badges .account-role span:not(.account-role__domain) { + font-weight: 500; } .app-body .account-role svg { opacity: 1; + color: var(--color-accent); } .app-body .account__header__extra__links a, .app-body .account__header__bio .account__header__content, @@ -4160,6 +4170,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: scale(.95); } +.app-body .account__domain-pill, +.app-body .account__domain-pill__popout__handle { + background-color: color-mix(in srgb, var(--color-accent), transparent 88%); + color: var(--color-accent); + border-color: var(--color-accent); + border-radius: 8px; + font-weight: 500; + transition: all .2s; +} +.app-body .account__domain-pill:hover { + background-color: var(--color-accent-bg); +} +.app-body .account__domain-pill.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.app-body .dropdown-animation.account__domain-pill__popout { + animation: none; +} +.app-body .account__domain-pill__popout { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border: 1px solid var(--color-lines); + border-radius: 8px; +} +.app-body .account__domain-pill__popout__header__icon { + background-color: var(--color-accent); +} +.app-body .account__domain-pill__popout__handle { + padding: 12px; +} +.app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) { + color: var(--color-content-fg); + font-weight: 600; +} +.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon { + align-items: start; + padding-top: 2px; +} +.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon { + width: 28px; + height: 28px; +} +.app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon { + background-image: var(--icon-direct-messages-accent); +} +.app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon { + background-image: var(--icon-globe-accent); +} + + /* ✨ Explore tab -------------- */ diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 59adf47..adac722 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -799,7 +799,8 @@ body.app-body { .icon-eye, .icon-eraser, .icon-pencil, - .app-form__header-input .icon + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon ) path { display: none; @@ -859,7 +860,8 @@ body.app-body { .icon-eye, .icon-eraser, .icon-pencil, - .app-form__header-input .icon + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon ) { background-repeat: no-repeat; background-size: 100%; @@ -4000,7 +4002,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__tabs__name h1 > span { font-size: 18px; } -.app-body .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1 small > span:first-child { opacity: .7; } .app-body .account__header__tabs__name .icon-lock { @@ -4056,12 +4058,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: 2px 3px var(--color-accent-bg); } .app-body .account__header__badges .account-role { - border-radius: 8px; - border-color: var(--color-accent); - color: var(--color-accent); + color: var(--color-content-fg); + border: 0; + border-radius: 50px; + padding: 0 10px; + height: 29px; + background-color: var(--color-content-secondary-bg); + gap: 5px; +} +.app-body .account__header__badges .account-role span:not(.account-role__domain) { + font-weight: 500; } .app-body .account-role svg { opacity: 1; + color: var(--color-accent); } .app-body .account__header__extra__links a, .app-body .account__header__bio .account__header__content, @@ -4160,6 +4170,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: scale(.95); } +.app-body .account__domain-pill, +.app-body .account__domain-pill__popout__handle { + background-color: color-mix(in srgb, var(--color-accent), transparent 88%); + color: var(--color-accent); + border-color: var(--color-accent); + border-radius: 8px; + font-weight: 500; + transition: all .2s; +} +.app-body .account__domain-pill:hover { + background-color: var(--color-accent-bg); +} +.app-body .account__domain-pill.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.app-body .dropdown-animation.account__domain-pill__popout { + animation: none; +} +.app-body .account__domain-pill__popout { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border: 1px solid var(--color-lines); + border-radius: 8px; +} +.app-body .account__domain-pill__popout__header__icon { + background-color: var(--color-accent); +} +.app-body .account__domain-pill__popout__handle { + padding: 12px; +} +.app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) { + color: var(--color-content-fg); + font-weight: 600; +} +.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon { + align-items: start; + padding-top: 2px; +} +.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon { + width: 28px; + height: 28px; +} +.app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon { + background-image: var(--icon-direct-messages-accent); +} +.app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon { + background-image: var(--icon-globe-accent); +} + + /* ✨ Explore tab -------------- */ diff --git a/TangerineUI.css b/TangerineUI.css index c516517..86d5d4b 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -799,7 +799,8 @@ body.app-body { .icon-eye, .icon-eraser, .icon-pencil, - .app-form__header-input .icon + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon ) path { display: none; @@ -859,7 +860,8 @@ body.app-body { .icon-eye, .icon-eraser, .icon-pencil, - .app-form__header-input .icon + .app-form__header-input .icon, + .account__domain-pill__popout__parts__icon .icon ) { background-repeat: no-repeat; background-size: 100%; @@ -4000,7 +4002,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__tabs__name h1 > span { font-size: 18px; } -.app-body .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1 small > span:first-child { opacity: .7; } .app-body .account__header__tabs__name .icon-lock { @@ -4056,12 +4058,20 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: 2px 3px var(--color-accent-bg); } .app-body .account__header__badges .account-role { - border-radius: 8px; - border-color: var(--color-accent); - color: var(--color-accent); + color: var(--color-content-fg); + border: 0; + border-radius: 50px; + padding: 0 10px; + height: 29px; + background-color: var(--color-content-secondary-bg); + gap: 5px; +} +.app-body .account__header__badges .account-role span:not(.account-role__domain) { + font-weight: 500; } .app-body .account-role svg { opacity: 1; + color: var(--color-accent); } .app-body .account__header__extra__links a, .app-body .account__header__bio .account__header__content, @@ -4160,6 +4170,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: scale(.95); } +.app-body .account__domain-pill, +.app-body .account__domain-pill__popout__handle { + background-color: color-mix(in srgb, var(--color-accent), transparent 88%); + color: var(--color-accent); + border-color: var(--color-accent); + border-radius: 8px; + font-weight: 500; + transition: all .2s; +} +.app-body .account__domain-pill:hover { + background-color: var(--color-accent-bg); +} +.app-body .account__domain-pill.active { + background-color: var(--color-accent); + color: var(--color-accent-fg); +} +.app-body .dropdown-animation.account__domain-pill__popout { + animation: none; +} +.app-body .account__domain-pill__popout { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + border: 1px solid var(--color-lines); + border-radius: 8px; +} +.app-body .account__domain-pill__popout__header__icon { + background-color: var(--color-accent); +} +.app-body .account__domain-pill__popout__handle { + padding: 12px; +} +.app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) { + color: var(--color-content-fg); + font-weight: 600; +} +.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon { + align-items: start; + padding-top: 2px; +} +.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon { + width: 28px; + height: 28px; +} +.app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon { + background-image: var(--icon-direct-messages-accent); +} +.app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon { + background-image: var(--icon-globe-accent); +} + + /* ✨ Explore tab -------------- */