From ff3fac2ab99699babb60adac02229c208e5c7eec Mon Sep 17 00:00:00 2001 From: Franzz Date: Sat, 6 Jun 2026 16:59:36 +0200 Subject: [PATCH] Harmonize topo background --- src/styles/_page.project.panel.feed.scss | 65 ++++++++++++++---------- 1 file changed, 39 insertions(+), 26 deletions(-) diff --git a/src/styles/_page.project.panel.feed.scss b/src/styles/_page.project.panel.feed.scss index c865517..f24dcf1 100644 --- a/src/styles/_page.project.panel.feed.scss +++ b/src/styles/_page.project.panel.feed.scss @@ -1,3 +1,4 @@ +@use "@styles/common"; @use "@styles/var"; @use "@styles/color"; @@ -26,10 +27,6 @@ } } } - - .post-item { - background: color.$default-bg-light; - } } #feed-posts { @@ -44,11 +41,9 @@ .post-item { margin-bottom: var.$block-spacing; - background: color.$post-bg; - color: color.$post; - border-radius: var.$block-radius; width: calc(100% - var.$block-spacing); box-shadow: var.$map-shadow; + color: color.$default; a { color: color.$post; @@ -62,6 +57,8 @@ align-items: center; padding: 0 var.$block-spacing; position: relative; + border-radius: var.$block-radius var.$block-radius 0 0; + @include common.topo-bg(linear, 0deg, color.$default-bg); div { font-size: 0.8em; @@ -90,23 +87,8 @@ .body { clear: both; padding: 0em var.$block-spacing var.$block-spacing; - } - - &.headerless { - .body { - padding-top: var.$block-spacing; - text-align: center; - - p { - margin: 0; - - .spot-icon { - display: inline-block; - font-size: 2em; - margin: var.$elem-spacing 0; - } - } - } + border-radius: 0 0 var.$block-radius var.$block-radius; + background: color.$default-bg; } .drill { @@ -142,10 +124,36 @@ } } + &.headerless { + .body { + padding-top: var.$block-spacing; + text-align: center; + border-radius: var.$block-radius; + @include common.topo-bg(radial, circle, color.$default-bg-light, 20%); + + p { + margin: 0; + + .spot-icon { + display: inline-block; + font-size: 2em; + margin: var.$elem-spacing 0; + } + } + } + } + &.message { - background: color.$message-bg; color: color.$message; + .header { + @include common.topo-bg(linear, 0deg, color.$message-bg); + } + + .body { + background: color.$message-bg; + } + a { color: color.$message; &:hover { @@ -216,8 +224,11 @@ } &.media { - background: color.$media-bg; color: color.$media; + + .header { + @include common.topo-bg(linear, 0deg, color.$media-bg); + } a { color: color.$media; @@ -227,6 +238,8 @@ } .body { + background: color.$media-bg; + a.media-link { display: inline-block; width: 100%;