From fbdfa28c6c2ea5472a10141c8703719742f88d6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Fri, 29 Dec 2023 22:15:44 +0100 Subject: [PATCH] Tweaked profile note field --- TangerineUI-cherry.css | 45 +++++++++++++++++++++++++++++++++++++----- TangerineUI-purple.css | 45 +++++++++++++++++++++++++++++++++++++----- TangerineUI.css | 45 +++++++++++++++++++++++++++++++++++++----- 3 files changed, 120 insertions(+), 15 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index 2ca174a..77be17d 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -1093,7 +1093,8 @@ body.app-body { .app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 23px 15px 22px 18px; - background-color: var(--color-content-bg); + position: relative; + background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -1216,6 +1217,7 @@ body.app-body { } .app-body .reply-indicator__line:before { background-color: var(--color-accent); + z-index: 1; opacity: .6; } .app-body .reply-indicator + .navigation-bar { @@ -2641,11 +2643,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); } .app-body article + .timeline-hint:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); - border-left: 1px solid var(--color-lines); - border-right: 1px solid var(--color-lines); } @@ -2817,6 +2815,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: none; } } +.app-body :is(.column-header__back-button, .column-back-button) { + gap: 5px; +} +.app-body .column-back-button__icon { + margin-inline-end: 0; +} +.app-body :is(.column-header__back-button, .column-back-button) span { + position: relative; + display: block; +} +.app-body :is(.column-header__back-button, .column-back-button):hover { + text-decoration: none; +} +.app-body :is(.column-header__back-button, .column-back-button) span::before { + content: " "; + position: absolute; + left: -35px; + right: -12px; + bottom: -11px; + z-index: -1; + top: -10px; + border-radius: 8px; + background-color: transparent; + transition: all .3s; +} +.app-body :is(.column-header__back-button, .column-back-button):hover span::before { + background-color: var(--color-accent-bg); +} +.app-body :is(.column-header__back-button, .column-back-button):active span::before { + transform: scale(.9); +} .app-body .load-gap, .app-body .load-more { @@ -3501,13 +3530,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; + font-style: normal; } .app-body .account__header__account-note textarea { color: var(--color-content-fg); + border-radius: 8px; + font-style: italic; } .app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); } +.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) { + box-shadow: inset 0 0 0 1px var(--color-lines); +} .app-body .account__header__badges .account-role { border-radius: 8px; border-color: var(--color-accent); diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 784c4c0..61b94dd 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1093,7 +1093,8 @@ body.app-body { .app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 23px 15px 22px 18px; - background-color: var(--color-content-bg); + position: relative; + background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -1216,6 +1217,7 @@ body.app-body { } .app-body .reply-indicator__line:before { background-color: var(--color-accent); + z-index: 1; opacity: .6; } .app-body .reply-indicator + .navigation-bar { @@ -2641,11 +2643,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); } .app-body article + .timeline-hint:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); - border-left: 1px solid var(--color-lines); - border-right: 1px solid var(--color-lines); } @@ -2817,6 +2815,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: none; } } +.app-body :is(.column-header__back-button, .column-back-button) { + gap: 5px; +} +.app-body .column-back-button__icon { + margin-inline-end: 0; +} +.app-body :is(.column-header__back-button, .column-back-button) span { + position: relative; + display: block; +} +.app-body :is(.column-header__back-button, .column-back-button):hover { + text-decoration: none; +} +.app-body :is(.column-header__back-button, .column-back-button) span::before { + content: " "; + position: absolute; + left: -35px; + right: -12px; + bottom: -11px; + z-index: -1; + top: -10px; + border-radius: 8px; + background-color: transparent; + transition: all .3s; +} +.app-body :is(.column-header__back-button, .column-back-button):hover span::before { + background-color: var(--color-accent-bg); +} +.app-body :is(.column-header__back-button, .column-back-button):active span::before { + transform: scale(.9); +} .app-body .load-gap, .app-body .load-more { @@ -3501,13 +3530,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; + font-style: normal; } .app-body .account__header__account-note textarea { color: var(--color-content-fg); + border-radius: 8px; + font-style: italic; } .app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); } +.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) { + box-shadow: inset 0 0 0 1px var(--color-lines); +} .app-body .account__header__badges .account-role { border-radius: 8px; border-color: var(--color-accent); diff --git a/TangerineUI.css b/TangerineUI.css index a032642..c296b3b 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1093,7 +1093,8 @@ body.app-body { .app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 23px 15px 22px 18px; - background-color: var(--color-content-bg); + position: relative; + background-color: var(--color-content-secondary-bg); border-top: 1px solid var(--color-lines); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); @@ -1216,6 +1217,7 @@ body.app-body { } .app-body .reply-indicator__line:before { background-color: var(--color-accent); + z-index: 1; opacity: .6; } .app-body .reply-indicator + .navigation-bar { @@ -2641,11 +2643,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-accent); } .app-body article + .timeline-hint:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); - border-left: 1px solid var(--color-lines); - border-right: 1px solid var(--color-lines); } @@ -2817,6 +2815,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: none; } } +.app-body :is(.column-header__back-button, .column-back-button) { + gap: 5px; +} +.app-body .column-back-button__icon { + margin-inline-end: 0; +} +.app-body :is(.column-header__back-button, .column-back-button) span { + position: relative; + display: block; +} +.app-body :is(.column-header__back-button, .column-back-button):hover { + text-decoration: none; +} +.app-body :is(.column-header__back-button, .column-back-button) span::before { + content: " "; + position: absolute; + left: -35px; + right: -12px; + bottom: -11px; + z-index: -1; + top: -10px; + border-radius: 8px; + background-color: transparent; + transition: all .3s; +} +.app-body :is(.column-header__back-button, .column-back-button):hover span::before { + background-color: var(--color-accent-bg); +} +.app-body :is(.column-header__back-button, .column-back-button):active span::before { + transform: scale(.9); +} .app-body .load-gap, .app-body .load-more { @@ -3501,13 +3530,19 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; + font-style: normal; } .app-body .account__header__account-note textarea { color: var(--color-content-fg); + border-radius: 8px; + font-style: italic; } .app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); } +.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) { + box-shadow: inset 0 0 0 1px var(--color-lines); +} .app-body .account__header__badges .account-role { border-radius: 8px; border-color: var(--color-accent);