Add colored cards and placeholder background customization

app/Widgets/Communities/_communities_posts.tpl

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

app/Widgets/NewsNav/_newsnav.tpl

@@ -38,12 +38,14 @@
 
 {if="$page == 'news' && $c->getUser()->hasPubsub()"}
     <ul class="list thick on_desktop card">
-        <li class="block">
+        <li class="block color indigo">
+            <i class="main material-symbols">share</i>
             <div>
                 <p class="line">{$c->__('hello.share_title')}</p>
                 <p class="all">{$c->__('hello.share_text')}</p>
-                <p class="center">
-                <a class="button" onclick="return false;" href="javascript:(function(){location.href='{$c->route('share', '\'+btoa(location.href);')}})();"><i class="material-symbols">share</i> {$c->__('button.share')}</a></p>
+                <p>
+                    <a class="button oppose color transparent" onclick="return false;" href="javascript:(function(){location.href='{$c->route('share', '\'+btoa(location.href);')}})();"><i class="material-symbols">share</i> {$c->__('button.share')}</a>
+                </p>
             </div>
         </li>
     </ul>

app/Widgets/Search/_search.tpl

@@ -1,30 +1,29 @@
 <section id="search">
     {if="$chatroomactions"}
-        <ul class="list active">
-            <li onclick="RoomsExplore_ajaxSearch();">
-                <span class="primary icon gray">
+        <br />
+        <ul class="list flex active card shadow thick">
+            <li class="block color accent" onclick="RoomsExplore_ajaxSearch();">
+                <i class="main material-symbols">chat</i>
+                <span class="primary icon">
                     <i class="material-symbols">explore</i>
                 </span>
-                <span class="control icon gray">
-                    <i class="material-symbols">chevron_right</i>
-                </span>
                 <div>
-                    <p class="line normal">
+                    <p class="line two">
                         {$c->__('rooms.join')}
                     </p>
+                    <p></p>
                 </div>
             </li>
-            <li onclick="RoomsUtils_ajaxAdd(false, null, true); Drawer.clear()">
-                <span class="primary icon gray">
+            <li class="block" onclick="RoomsUtils_ajaxAdd(false, null, true); Drawer.clear()">
+                <i class="main material-symbols">star</i>
+                <span class="primary icon transparent">
                     <i class="material-symbols">group_add</i>
                 </span>
-                <span class="control icon gray">
-                    <i class="material-symbols">chevron_right</i>
-                </span>
                 <div>
-                    <p class="line normal">
+                    <p class="line two">
                         {$c->__('rooms.create')}
                     </p>
+                    <p></p>
                 </div>
             </li>
         </ul>

public/theme/css/card.css

@@ -16,6 +16,15 @@
     filter: blur(0.4rem);
 }
 
+.card i.main {
+    position: absolute;
+    font-size: 18rem;
+    opacity: 0.2;
+    filter: blur(0.5rem);
+    right: -5rem;
+    bottom: -8rem;
+}
+
 .card li > div > p > span.info {
     margin-right: 0.5rem;
 }

public/theme/css/color.css

@@ -62,14 +62,14 @@ table tr th {
 }
 
 body,
-#drawer .card > .block:not(.subheader):not(.simple) {
+#drawer .card > .block:not(.subheader):not(.simple):not(.color) {
     background-color: rgb(var(--movim-background));
 }
 
 .drawer,
 ul li.date > div > p.normal,
 .dialog, ul.context_menu,
-.card > .block:not(.subheader):not(.simple) {
+.card > .block:not(.subheader):not(.simple):not(.color) {
     background-color: rgb(var(--movim-background-main));
 }
 
@@ -150,6 +150,7 @@ 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); }

public/theme/css/listn.css

@@ -55,11 +55,17 @@ ul.list.active.all li:hover,
 ul.list li.active:hover,
 ul.list.active li.active:not(.subheader),
 ul.tabs>li:hover {
-    background-color: rgba(var(--movim-element-action), 0.1);
     cursor: pointer;
     user-select: none;
 }
 
+ul.list.active li:hover:not(.subheader):not(.color),
+ul.list.active.all li:hover:not(.color),
+ul.list li.active:hover:not(.color),
+ul.list.active li.active:not(.subheader):not(.color) {
+    background-color: rgba(var(--movim-element-action), 0.1);
+}
+
 ul.list li>span.active:hover {
     cursor: pointer;
     user-select: none;