New look for search result section headers

nileane · Oct 9, 2023 · 2ec8eeb · 2ec8eeb
1 parent 33a05d7
commit 2ec8eeb
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {