common/static/common/styles/_extension.sass

@@ -175,105 +175,8 @@
   +media-lg
     --cards-items-per-row: 4
 
-.ext-card
-  +box-card
-  display: flex
-  flex-direction: column
-  height: 100%
+.cards-item-content
   overflow: hidden
-  transition: box-shadow ease-in-out 1s
-
-  &:hover
-    box-shadow: 1.0rem 1.0rem 2.0rem 0px rgba(0, 0, 0, .04), -1.0rem 0 2.0rem 0px rgba(0, 0, 0, .04)
-
-  &.is-bg-blur
-    background-color: hsl(213, 10%, 21%)
-    border: thin solid hsl(213, 10%, 20%)
-    position: relative
-
-    .ext-card-body
-      --color-text-secondary: hsla(213, 40%, 90%, .6)
-
-      border-bottom-left-radius: var(--border-radius-lg)
-      border-bottom-right-radius: var(--border-radius-lg)
-      +padding(1, top)
-      mix-blend-mode: screen
-      position: relative
-      z-index: 1
-
-    &:has(.ext-card-admin)
-      .ext-card-body
-        border-radius: 0
-
-    .ext-card-thumbnail-img
-      -webkit-mask-img: -webkit-gradient(linear, left 60%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
-
-    .ext-card-thumbnail:hover
-      &+.ext-card-body .ext-card-title
-        color: var(--color-text-primary)
-
-  &.ext-card-row
-    flex-direction: row
-    +margin(3, bottom)
-
-    .ext-card-thumbnail
-      --card-thumbnail-width: 24.0rem
-      border-top-right-radius: 0
-      border-bottom-left-radius: var(--border-radius-lg)
-      height: 100%
-
-      img
-        border-top-right-radius: 0
-        border-bottom-left-radius: var(--border-radius-lg)
-
-    .ext-blender-version
-      display: inline-block
-
-.ext-card-thumbnail-blur
-  bottom: 0
-  filter: blur(5.0rem)
-  left: 0
-  position: absolute
-  right: 0
-  transform: scale(1.25)
-  top: 0
-  z-index: 0
-  opacity: .5
-
-.ext-card-thumbnail
-  --card-thumbnail-width: 100%
-
-  align-items: center
-  border-top-left-radius: var(--border-radius-lg)
-  border-top-right-radius: var(--border-radius-lg)
-  display: block
-  justify-content: center
-  max-width: var(--card-thumbnail-width)
-  overflow: hidden
-
-  .ext-card-thumbnail-img
-    background-position: center
-    background-size: cover
-    +make-aspect-ratio('16x9')
-    transition: transform ease-out var(--transition-speed)
-
-.ext-card-body
-  display: flex
-  flex: 1
-  flex-direction: column
-  justify-content: space-between
-  +padding(3)
-
-  p
-    line-height: calc(24 / 18)
-
-.ext-card-title
-  font-size: var(--fs-lg)
-  +margin(3, bottom)
-  transition: color var(--transition-speed)
-
-  a
-    text-decoration: none
 
 .ext-list-details
   @extend .list-inline
@@ -287,12 +190,6 @@
   &+.ext-list-details
     +margin(2, top)
 
-.ext-card-tags
-  display: flex
-  flex-wrap: wrap
-  gap: var(--spacer-1)
-  justify-content: flex-start
-
 /* Show only on row list view.*/
 .ext-blender-version
   display: none
@@ -300,19 +197,6 @@
 .ext-edit-field-row
   +margin(2, top)
 
-.ext-card-admin
-  align-items: center
-  background-color: hsla(213, 80%, 1%, .33)
-  border-bottom-left-radius: var(--border-radius-lg)
-  border-bottom-right-radius: var(--border-radius-lg)
-  border-top: var(--border-width) solid var(--border-color)
-  display: flex
-  justify-content: space-between
-  z-index: 1
-
-  dd
-    font-family: var(--font-body)
-
 .previews-upload
   +box-card
   +padding(3)

extensions/templates/extensions/components/card.html

@@ -1,15 +1,5 @@
 {% load common filters %}
 {% with latest=extension.latest_version %}
-  {# TODO: add conditional if is bg blur to web-assets component card #}
-  {% comment %}
-  <div class="ext-card {% if blur %}is-bg-blur{% endif %}">
-    {% if blur %}
-    <div class="ext-card-thumbnail-blur" style="background-image: url({{ extension.previews.listed.first.source.url }});"></div>
-    {% endif %}
-
-  </div>
-  {% endcomment %}
-
   <div class="cards-item">
     <div class="cards-item-content">
       <a href="{{ extension.get_absolute_url }}">
@@ -27,7 +17,7 @@
       </div>
       <div class="cards-item-extra">
         <ul>
-          <li class="ext-card-author">
+          <li>
           {% if extension.team %}
             {% with team=extension.team %}
             <a href="{{ team.get_absolute_url }}" title="{{ team.name }}">{{ team.name }}</a>
@@ -62,10 +52,12 @@
         </ul>
 
         {% if latest.tags.count %}
-        <ul class="ext-card-tags">
-          <li class="ext-card-tags">
-            {% include "extensions/components/tags.html" with small=True version=latest %}
-          </li>
+        <ul>
+          {% for tag in latest.tags.all %}
+            <li>
+              {% include "extensions/components/badge_tag.html" with small=True version=latest %}
+            </li>
+          {% endfor %}
         </ul>
         {% endif %}
 

extensions/templates/extensions/manage/components/card.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block admin %}
-<div class="cards-item-extra ext-card-admin pt-3">
+<div class="bg-secondary cards-item-extra pt-3">
   <ul class="w-100">
     <li class="d-flex justify-content-between me-0 w-100">
       <a href="{{ extension.get_manage_url }}" class="btn btn-sm">