diff --git a/theme/themes/eea/views/item.overrides b/theme/themes/eea/views/item.overrides index 743a00a05..c62c8c8f7 100644 --- a/theme/themes/eea/views/item.overrides +++ b/theme/themes/eea/views/item.overrides @@ -71,6 +71,10 @@ } // color item images that are svg files + +.content-box[class*='ary'] .item img { + filter: @itemWhiteFilterColor; +} .item.primary img { filter: @itemPrimaryFilterColor; } @@ -266,16 +270,19 @@ .ui.items > .item { &.primary, > .icon.primary { - color: @primaryColor; + --text-color: @primaryColorCSSVar; + color: @primaryColorCSSVar; } &.secondary, > .icon.secondary { - color: @secondaryColor; + --text-color: @secondaryColorCSSVar; + color: @secondaryColorCSSVar; } &.tertiary, > .icon.tertiary { - color: @tertiaryColor; + --text-color: @tertiaryColorCSSVar; + color: @tertiaryColorCSSVar; } } diff --git a/theme/themes/eea/views/item.variables b/theme/themes/eea/views/item.variables index 867536758..634521fc2 100644 --- a/theme/themes/eea/views/item.variables +++ b/theme/themes/eea/views/item.variables @@ -22,6 +22,7 @@ @zIndex: ''; @transition: box-shadow @defaultDuration @defaultEasing; // black to desired color filter option resulted from https://codepen.io/sosuke/pen/Pjoqqp +@itemWhiteFilterColor: invert(100%) sepia(100%) saturate(1%) hue-rotate(306deg) brightness(103%) contrast(101%); @itemPrimaryFilterColor: invert(9%) sepia(89%) saturate(5332%) hue-rotate(194deg) brightness(98%) contrast(101%); @itemSecondaryFilterColor: invert(33%) sepia(14%) saturate(5566%) hue-rotate(139deg) brightness(98%) contrast(101%); @itemTertiaryFilterColor: invert(27%) sepia(15%) saturate(1161%) hue-rotate(167deg) brightness(93%) contrast(80%); @@ -106,7 +107,7 @@ @headerLinkHoverColor: @linkHoverColor; @metaLinkColor: @lightTextColor; @metaLinkHoverColor: @textColor; -@contentLinkColor: ''; +@contentLinkColor: inherit; @contentLinkHoverColor: ''; @contentLinkTransition: color @defaultDuration @defaultEasing;