Merge pull request #26003 from guardian/ioanna/various-special-report…

…-alt-bugs Fix various SpecialReportAlt bugs
guardian · Mar 23, 2023 · c5c1142 · c5c1142
2 parents 25ae3fc + b47b675
commit c5c1142
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 10 deletions.
diff --git a/static/src/stylesheets/module/facia-garnett/_item.scss b/static/src/stylesheets/module/facia-garnett/_item.scss
@@ -338,6 +338,14 @@ $block-height: 58px;
     color: #ffffff;
 }
 
+.fc-item--pillar-special-report-alt {
+    .fc-item__meta {
+        .inline-icon {
+            fill: $special-report-alt-dark;
+        }
+    }
+}
+
 .fc-item__meta {
     @include fs-textSans(1);
     color: $brightness-46;

diff --git a/static/src/stylesheets/module/facia-garnett/_pillars.scss b/static/src/stylesheets/module/facia-garnett/_pillars.scss
@@ -415,7 +415,7 @@ $pillars: (
     background-color: $special-report-alt-faded;
 
     .fc-item__container.u-faux-block-link--hover {
-        background-color: darken($special-report-alt-faded, 2%);
+        background-color: darken($special-report-alt-pastel, 5%);
 
         .fc-item__timestamp,
         .fc-trail__count--commentcount {

diff --git a/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-comment.scss b/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-comment.scss
@@ -282,12 +282,35 @@
     // if pillar news we override news pallete with opinion palette for comment cards
     &.fc-item--pillar-news {
         @include colours(map-get($pillars, opinion));
+
+        &.fc-item--pillar-special-report-alt {
+            background-color: $special-report-alt-faded;
+
+            .fc-item__timestamp,
+            .fc-trail__count--commentcount {
+                background-color: $special-report-alt-faded;
+            }
+
+            .fc-item__meta {
+                color: $special-report-alt-dark;
+            }
+
+            .fc-item__container.u-faux-block-link--hover {
+                background-color: darken($special-report-alt-pastel, 5%);
+
+                .fc-item__timestamp,
+                .fc-trail__count--commentcount {
+                    background-color: darken($special-report-alt-pastel, 5%);
+
+                }
+            }
+        }
     }
 }
 
 .fc-item--pillar-special-report-alt {
     .fc-item__container > .fc-item__meta {
-        @include multiline(3, rgba(60, 60, 60, .3));
+        @include multiline(3, rgba(112, 112, 112, .3));
 
         display: flex;
         position: absolute;

diff --git a/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-interview.scss b/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-interview.scss
@@ -11,3 +11,4 @@
 @include overide-interview-headline-colours(arts, $culture-dark, $culture-pastel);
 @include overide-interview-headline-colours(lifestyle, $lifestyle-dark, $news-pastel);
 @include overide-interview-headline-colours(special-report, #ffffff, #ffffff);
+@include overide-interview-headline-colours(special-report-alt, $special-report-alt-dark, $special-report-alt-dark);
diff --git a/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-liveblog.scss b/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-liveblog.scss
@@ -61,13 +61,7 @@
         // darken on hover
         .u-faux-block-link--hover {
             @if $pillar == special-report-alt {
-                background-color: darken($color1, 2%);
-            } @else {
-                background-color: darken($color1, 5%);
-            }
-
-            @if $pillar == special-report-alt {
-                background-color: darken($color1, 2%);
+                background-color: darken($special-report-alt-pastel, 5%);
             } @else {
                 background-color: darken($color1, 5%);
             }

diff --git a/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-media.scss b/static/src/stylesheets/module/facia-garnett/item-types/_fc-item--type-media.scss
@@ -121,7 +121,7 @@
 
     &:hover,
     .u-faux-block-link--hover {
-        background-color: darken($special-report-alt-faded, 2%);
+        background-color: darken($special-report-alt-pastel, 5%);
     }
 
     .fc-sublink__link {