Darken a bit the colored cards

app/Widgets/Communities/_communities_posts.tpl

@@ -1,7 +1,7 @@
 <br />
 <ul class="list flex third middle active card shadow">
     {if="$type == 'all' && ($page == 1 || $posts->count() < $limit)"}
-        <li class="block color accent" onclick="MovimUtils.reload('{$c->route('explore', 'servers')}')">
+        <li class="block color" onclick="MovimUtils.reload('{$c->route('explore', 'servers')}')">
             <i class="material-symbols main">view_cozy</i>
             <span class="primary icon bubble color transparent">
                 <i class="material-symbols">view_agenda</i>

app/Widgets/Search/_search.tpl

@@ -2,7 +2,7 @@
     {if="$chatroomactions"}
         <br />
         <ul class="list flex active card shadow thick">
-            <li class="block color accent" onclick="RoomsExplore_ajaxSearch();">
+            <li class="block color" onclick="RoomsExplore_ajaxSearch();">
                 <i class="main material-symbols">chat</i>
                 <span class="primary icon">
                     <i class="material-symbols">explore</i>

public/theme/css/card.css

@@ -29,6 +29,10 @@
     margin-right: 0.5rem;
 }
 
+.card li.block.color {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5));
+}
+
 .card > .block:not(.subheader):not(.simple) {
     animation: fadein 0.3s;
     border-radius: 1rem;

public/theme/css/color.css

@@ -125,7 +125,7 @@ ul li div > p > span.moderator,
 .button.black,  .icon.black , span.resource.black    { color: var(--p-black); }
 .button.gray,   .icon.gray  , span.resource.gray     { color: var(--p-gray); }
 
-.color,
+.color          { color: white; background-color: var(--movim-accent); border-color: var(--movim-accent) }
 .color.gray     { color: white; background-color: var(--p-gray); border-color: var(--p-gray) }
 .color.dorange  { color: white; background-color: var(--p-dorange); border-color: var(--p-dorange) }
 .color.orange   { color: white; background-color: var(--p-orange); border-color: var(--p-orange) }
@@ -150,7 +150,6 @@ span.icon:not(.composing):not([data-counter]):not(.story).status.xa:after,
 span.icon:not(.composing):not([data-counter]):not(.story).status.dnd:after,
 .color.red      { color: white; background-color: var(--p-red); border-color: var(--p-red) }
 .color.black    { color: white; background-color: var(--p-black); border-color: var(--p-black) }
-.color.accent   { color: white; background-color: var(--movim-accent); border-color: var(--movim-accent) }
 
 .color.none { color: white; background-color: transparent; }
 .color.transparent { color: white; backdrop-filter: blur(1rem); background-color: rgba(0, 0, 0, 0.25); }