From 2ec8eeb984497756af0acf3d7a979ff783f0e45a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Mon, 9 Oct 2023 13:58:59 +0200 Subject: [PATCH] New look for search result section headers --- TangerineUI-purple.css | 19 +++++++++++-------- TangerineUI.css | 19 +++++++++++-------- .../layout-single-column.scss | 19 +++++++++++-------- .../tangerineui/layout-single-column.scss | 19 +++++++++++-------- 4 files changed, 44 insertions(+), 32 deletions(-) diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 5f67f30..450c902 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -832,7 +832,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, +.layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { @@ -848,7 +849,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, + .layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } @@ -938,7 +940,8 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ .layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ .layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before { +.layout-single-column .hashtag-header + article .status::before, +.layout-single-column .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ @@ -2661,11 +2664,11 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .search-results__section__header { - background-color: var(--color-accent-bg); - border-top: 1px solid var(--color-accent-lines); - border-left: 1px solid var(--color-accent-lines); - border-right: 1px solid var(--color-accent-lines); - border-bottom: 1px solid var(--color-accent-lines); + 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); + border-bottom: 0; color: var(--color-content-fg); } .layout-single-column .search-results__section__header button { diff --git a/TangerineUI.css b/TangerineUI.css index 5706cc7..6e11913 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -832,7 +832,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, +.layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { @@ -848,7 +849,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, + .layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } @@ -938,7 +940,8 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ .layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ .layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before { +.layout-single-column .hashtag-header + article .status::before, +.layout-single-column .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ @@ -2661,11 +2664,11 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .search-results__section__header { - background-color: var(--color-accent-bg); - border-top: 1px solid var(--color-accent-lines); - border-left: 1px solid var(--color-accent-lines); - border-right: 1px solid var(--color-accent-lines); - border-bottom: 1px solid var(--color-accent-lines); + 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); + border-bottom: 0; color: var(--color-content-fg); } .layout-single-column .search-results__section__header button { diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index 5f67f30..450c902 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -832,7 +832,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, +.layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { @@ -848,7 +849,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, + .layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } @@ -938,7 +940,8 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ .layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ .layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before { +.layout-single-column .hashtag-header + article .status::before, +.layout-single-column .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ @@ -2661,11 +2664,11 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .search-results__section__header { - background-color: var(--color-accent-bg); - border-top: 1px solid var(--color-accent-lines); - border-left: 1px solid var(--color-accent-lines); - border-right: 1px solid var(--color-accent-lines); - border-bottom: 1px solid var(--color-accent-lines); + 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); + border-bottom: 0; color: var(--color-content-fg); } .layout-single-column .search-results__section__header button { diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 5706cc7..6e11913 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -832,7 +832,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { +.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, +.layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { @@ -848,7 +849,8 @@ body.layout-single-column { } .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper { + .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, + .layout-single-column .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } @@ -938,7 +940,8 @@ body.layout-single-column { .layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ .layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ .layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before { +.layout-single-column .hashtag-header + article .status::before, +.layout-single-column .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ @@ -2661,11 +2664,11 @@ body.layout-single-column { border-bottom: 0; } .layout-single-column .search-results__section__header { - background-color: var(--color-accent-bg); - border-top: 1px solid var(--color-accent-lines); - border-left: 1px solid var(--color-accent-lines); - border-right: 1px solid var(--color-accent-lines); - border-bottom: 1px solid var(--color-accent-lines); + 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); + border-bottom: 0; color: var(--color-content-fg); } .layout-single-column .search-results__section__header button {