.gitmodules

@@ -1,3 +1,4 @@
 [submodule "assets_shared"]
 	path = assets_shared
 	url = https://projects.blender.org/infrastructure/web-assets.git
+	branch = v2

abuse/templates/abuse/abusereport_detail.html

@@ -24,7 +24,7 @@
         <div class="ext-detail-tagline">
           <a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
         </div>
-        <div class="ext-detail-authors ml-3">
+        <div class="ext-detail-authors ms-3">
           <a href="{% url 'extensions:by-type' type_slug=extension.type_slug %}">
             {{ extension.get_type_display }}
           </a>
@@ -44,7 +44,7 @@
 
     {% block hero_tabs %}
     <nav class="hero-tabs">
-      <span class="ml-auto"></span>
+      <span class="ms-auto"></span>
 
       <div class="btn-row mb-1">
         {% if request.user.is_staff %}
@@ -88,7 +88,7 @@
             <div class="dl-row">
               <div class="dl-col">
                 <dt>Status</dt>
-                <dd>{% include "common/components/status.html" with class="d-block" %}</dd>
+                <dd>{% include "common/components/status.html" %}</dd>
               </div>
             </div>
             <div class="dl-row">

assets_shared

@@ -1 +1 @@
-Subproject commit 9d428a82a5b51c1eec99639f3baebeac3b1f93f9
+Subproject commit af61a962e1a30898279b4efdbb07a2dcb230a257

common/static/common/scripts/galleria.js

@@ -5,7 +5,7 @@ function galleriaCloneFirstItem() {
   let firstGalleriaItem = galleriaCarrousel.firstElementChild.cloneNode(true);
   firstGalleriaItem.classList.remove('js-galleria-item-preview', 'is-active');
   firstGalleriaItem.classList.add('js-expand-on-click');
-  firstGalleriaItem.id = 'galleria-item-large';
+  firstGalleriaItem.id = 'galleria-item-lg';
 
   document.getElementById("galleria-container").prepend(firstGalleriaItem);
 }
@@ -13,7 +13,7 @@ function galleriaCloneFirstItem() {
 
 function galleriaSetLargePreview(item) {
   let previewsContainer = document.getElementById('galleria-items');
-  let previewLarge = document.getElementById('galleria-item-large');
+  let previewLarge = document.getElementById('galleria-item-lg');
   let thumbnails = document.getElementsByClassName("js-galleria-item-preview");
   [].forEach.call(thumbnails, function(el) {
     el.classList.remove("is-active");

common/static/common/styles/_activity.sass

@@ -4,7 +4,7 @@
   z-index: 0
 
   > li
-    --border-color: var(--box-background-color)
+    --border-color: var(--box-bg-color)
     position: relative
 
     &:first-child
@@ -16,7 +16,7 @@
     &:last-child
       /* Remove bottom half of the vertical line for last item. */
       .comment-card:before
-        height: calc(50% - 1rem)
+        height: calc(50% - var(--spacer))
       .activity-status-change:before
         height: calc(50% + var(--border-width))
 
@@ -50,21 +50,25 @@
       left: var(--border-width)
       position: absolute
       top: 50%
-      width: 2rem
+      width: calc(var(--spacer) * 2)
       z-index: -1
 
+    .activity-icon
+      top: 1.2rem
+
     .profile-avatar
       border: var(--border-width) solid var(--border-color)
       background-color: var(--border-color)
 
   .comment-card
     &:after
-      top: 2rem
+      top: 3.2rem
+
     .activity-icon
-      top: 1.25rem
+      top: 2.2rem
 
   .activity-status-change
-    color: var(--text-color-tertiary)
+    color: var(--color-text-tertiary)
 
     .profile-avatar
       +margin(3, right)
@@ -73,7 +77,7 @@
       left: 0
 
     strong
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
 
     .badge
       border: none
@@ -83,22 +87,22 @@
     &.activity-status-approved
       .activity-icon
         border-color: var(--color-success)
-        box-shadow: 0 0 1rem var(--color-success-bg)
+        box-shadow: 0 0 var(--spacer) var(--color-success-bg)
         color: var(--color-success-text)
 
 .activity-icon
   align-items: center
-  background-color: var(--background-color)
+  background-color: var(--color-bg)
   border-radius: 100%
   border: var(--border-width) solid var(--border-color)
-  color: var(--text-color-tertiary)
+  color: var(--color-text-tertiary)
   display: flex
-  font-size: var(--font-size-small)
+  font-size: var(--fs-sm)
-  height: 1.5rem
+  height: var(--spacer-4)
   justify-content: center
   left: -.66rem
   position: absolute
-  width: 1.5rem
+  width: var(--spacer-4)
 
 /* Comment form */
 .comment-form
@@ -112,9 +116,6 @@
   select
     width: auto
 
-  button[type="submit"]
-    min-width: 50%
-
   textarea
     height: calc(var(--spacer) * 8)
     max-height: 0

common/static/common/styles/_badge.sass

@@ -1,17 +1,24 @@
+.badge-card
+  +border-radius(lg)
+  border-bottom-left-radius: 0
+  border-bottom-right-radius: 0
+  display: flex
+  +padding(2, y)
+
 a.badge-tag
-  --badge-color: var(--text-color-secondary)
+  --badge-color: var(--color-text-secondary)
-  --badge-bg: var(--text-color-tertiary)
+  --badge-bg: var(--color-text-tertiary)
 
   background-color: transparent
   text-decoration: none !important
 
   &:hover
     background-color: transparent
-    border-color: var(--text-color)
+    border-color: var(--color-text)
-    color: var(--text-color)
+    color: var(--color-text)
 
 .badge-tag
-  font-size: var(--font-size-extra-small)
+  font-size: var(--fs-xs)
 
 .badge-status
   &-approved
@@ -24,10 +31,3 @@ a.badge-tag
   &-disabled-by-staff,
   &-disabled-by-author
     @extend .badge-secondary
-
-.card-badge
-  +border-radius(lg)
-  border-bottom-left-radius: 0
-  border-bottom-right-radius: 0
-  display: flex
-  +padding(2, y)

common/static/common/styles/_cards.sass

@@ -0,0 +1,29 @@
+.card
+  @extend .box
+
+  +media-sm
+    --cards-items-per-row: 2
+
+  +media-md
+    --cards-items-per-row: 3
+
+  +media-lg
+    --cards-items-per-row: 4
+
+.cards-item-content
+  overflow: hidden
+
+.crads-item-excerpt
+  line-height: calc(24 / 18)
+
+.cards-item-extra
+  text-transform: none
+
+  .cards-item-extra-rating-stars
+    margin-bottom: .2rem
+
+    .stars
+      font-size: 1.4rem
+
+.cards-item-title
+  +padding(0, y)

common/static/common/styles/_comments.sass

@@ -11,33 +11,36 @@
     z-index: 0
 
     &:before
-      background-color: var(--box-background-color)
+      background-color: var(--box-bg-color)
-      border-radius: .25rem
+      border-radius: .4rem
       content: ''
       display: block
-      height: 1rem
+      height: var(--spacer)
       left: -.33rem
       position: absolute
       rotate: 45deg
-      top: 1rem
+      top: var(--spacer)
-      width: 1rem
+      width: var(--spacer)
       z-index: -1
 
     p:last-child
       margin-bottom: 0
 
   header
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
-    font-size: var(--font-size-small)
+    font-size: var(--fs-sm)
     +margin(2, bottom)
 
     ul
       align-items: center
       display: flex
       +list-unstyled
-      gap: 1rem
+      gap: var(--spacer)
       margin: 0
 
+      li
+        line-height: var(--lh-sm)
+
   aside
     +margin(2, top)
 

common/static/common/styles/_extension.sass

@@ -1,14 +1,17 @@
+\:root
+  --lh-sm: 2.4rem
+
 .hero.extension-detail
   --hero-max-height: 0
-  --hero-min-height: 240px
+  --hero-min-height: 24.0rem
-  --font-size-hero-title: clamp(3rem, 4vw + 1rem, 48px)
+  --fs-hero-title: clamp(4.8rem, 4vw + 1.6rem, 4.8rem)
-  --font-size-large: 18px
+  --fs-lg: 1.8rem
-  --border-width: 2px
+  --border-width: .2rem
-  --hero-background-color: hsl(213, 10%, 14%)
+  --hero-bg-color: hsl(213, 10%, 14%)
 
-  background-color: var(--hero-background-color)
+  background-color: var(--hero-bg-color)
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%233e4248' fill-opacity='0.21'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
-  background-size: 40px
+  background-size: 4.0rem
   flex-direction: column
   overflow: initial
   text-shadow: none
@@ -24,10 +27,10 @@
 
   .hero-overlay
     background-color: transparent
-    background-image: linear-gradient(0deg, var(--background-color), hsla(213, 10%, 14%, 0))
+    background-image: linear-gradient(0deg, var(--color-bg), hsla(213, 10%, 14%, 0))
 
   &.extension-review
-    --hero-min-height: 210px
+    --hero-min-height: 21.0rem
 
 .ext-detail-download-danger
   background-color: var(--color-danger-bg)
@@ -42,8 +45,8 @@
   @extend .alert
   @extend .alert-danger
   border-radius: 0
-  font-size: var(--font-size-small)
+  font-size: var(--fs-sm)
-  +font-weight-bold
+  +fw-bold
   +padding(1, y)
   text-align: center
 
@@ -54,17 +57,17 @@
   color: var(--color-warning-text);
 
 .hero-breadcrumbs
-  font-size: var(--font-size-small)
+  font-size: var(--fs-sm)
 
   a
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
     display: inline-block
     +padding(2)
 
 .ext-detail-name
-  font-size: var(--font-size-title-massive)
+  font-size: var(--fs-title-massive)
-  +font-weight-title
+  +fw-title
-  line-height: var(--font-size-title-massive)
+  line-height: var(--fs-title-massive)
   margin-bottom: 0
 
 .ext-detail-info-authors
@@ -72,7 +75,7 @@
   flex-wrap: wrap
 
 .ext-detail-authors
-  color: var(--text-color-secondary)
+  color: var(--color-text-secondary)
 
 .ext-detail-tagline
   +margin(2, bottom)
@@ -81,9 +84,12 @@
   +padding(4)
   +style-rich-text
 
+  pre
+    +margin(3, bottom)
+
 .ext-detail-info
   dd
-    color: var(--text-color)
+    color: var(--color-text)
     overflow: hidden
     text-overflow: ellipsis
     white-space: nowrap
@@ -93,8 +99,9 @@
     margin-bottom: 0
 
   dt
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
-    font-size: var(--font-size-small)
+    font-size: var(--fs-sm)
+    line-height: calc(24 / 14)
 
   dd
     font-family: var(--font-family-body)
@@ -108,7 +115,7 @@
     white-space: nowrap
 
     &:hover
-      color: var(--text-color-primary)
+      color: var(--color-text-primary)
 
   .dl-col
     overflow: hidden
@@ -134,10 +141,10 @@
       padding: 0
 
   strong
-    font-size: var(--font-size-large)
+    font-size: var(--fs-lg)
 
   i
-    font-size: var(--font-size-large)
+    font-size: var(--fs-lg)
     +margin(3, right)
 
 .ext-detail-download
@@ -145,7 +152,7 @@
     +padding(2, y)
 
   .btn-accent
-    box-shadow: 2px 5px 5px rgba(0,82,255,.102), 1px 10px 15px rgba(0,82,255,.102), 2px 10px 30px rgba(0,82,255,.349)
+    box-shadow: .2rem .8rem .8rem rgba(0,82,255,.102), 1.6rem 1.0rem 1.8rem rgba(0,82,255,.102), 3.2rem 1.0rem 3.2rem rgba(0,82,255,.349)
 
   .btn-install-drag,
   .btn-install-drag:active
@@ -160,134 +167,21 @@
   summary
     .date
       +margin(2, left)
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
-      +font-weight-normal
+      +fw-normal
-
-.cards-list
-  +media-sm
-    --cards-list-items-per-row: 2
-  +media-md
-    --cards-list-items-per-row: 3
-  +media-lg
-    --cards-list-items-per-row: 4
-
-.ext-card
-  +box-card
-  display: flex
-  flex-direction: column
-  height: 100%
-  overflow: hidden
-  transition: box-shadow ease-in-out 1s
-
-  &:hover
-    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .04), -10px 0 20px 0px rgba(0, 0, 0, .04)
-
-  &.is-background-blur
-    background-color: hsl(213, 10%, 21%)
-    border: thin solid hsl(213, 10%, 20%)
-    position: relative
-
-    .ext-card-body
-      --text-color-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-image: -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(--text-color-primary)
-
-  &.ext-card-row
-    flex-direction: row
-    +margin(3, bottom)
-
-    .ext-card-thumbnail
-      --card-thumbnail-width: 240px
-      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(50px)
-  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: 1.2
-
-.ext-card-title
-  font-size: var(--font-size-large)
-  +margin(3, bottom)
-  transition: color var(--transition-speed)
-
-  a
-    text-decoration: none
 
 .ext-list-details
   @extend .list-inline
 
   align-items: center
-  color: var(--text-color-secondary)
+  color: var(--color-text-secondary)
-  font-size: var(--font-size-small)
+  font-size: var(--fs-sm)
+  line-height: var(--lh-sm)
   margin: auto 0 0 0
 
   &+.ext-list-details
     +margin(2, top)
 
-.ext-card-tags
-  display: flex
-  flex-wrap: wrap
-  gap: .25rem
-  justify-content: flex-start
-
 /* Show only on row list view.*/
 .ext-blender-version
   display: none
@@ -295,19 +189,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)
@@ -316,27 +197,29 @@
 .previews-list
   display: flex
   flex-direction: column
-  gap: .5rem
+  gap: .8rem
 
 .previews-list-item
-  --preview-thumbnail-max-size: 180px
+  --preview-thumbnail-max-size: calc(12.4rem * 16 / 9)
 
-  align-items: center
+  align-items: start
   background-color:
   border-radius: var(--border-radius-lg)
   border: var(--border-width) solid var(--border-color)
   display: flex
-  +padding(1, y)
+  +padding(2, y)
 
   .previews-list-item-thumbnail
     margin: 0
+    +margin(2, y)
     width: var(--preview-thumbnail-max-size)
 
     .previews-list-item-thumbnail-img
-      background-color: var(--background-color)
+      background-color: var(--color-bg)
       background-position: center
       background-size: cover
       border-radius: var(--border-radius)
+      height: 12.4rem
       +make-aspect-ratio('16x9')
 
   .details
@@ -344,7 +227,8 @@
     flex: 1
 
     label
-      font-size: var(--font-size-small)
+      font-size: var(--fs-sm)
+      line-height: var(--lh-sm)
 
     ul
       +list-unstyled
@@ -365,7 +249,7 @@
 
   .form-control
     &[type="file"]
-      font-size: var(--font-size-extra-small)
+      font-size: var(--fs-xs)
       max-width: 50%
 
 .ext-version-history
@@ -374,49 +258,52 @@
 
     ul
       @extend .list-inline
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
-      +font-weight-normal
+      +fw-normal
-      gap: 0 1rem
+      gap: 0 1.6rem
       margin: 0
       +margin(3, right)
 
   .blender-version
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
-    +font-weight-normal
+    +fw-normal
     +margin(3, left)
 
-  details[open]
+  details
+    padding: 0
+
+    &[open]
       .show-on-collapse
         display: none
 
 .ext-detail-info
   .ext-detail-permissions
     strong
-      font-size: var(--font-size-normal)
+      font-size: var(--fs-normal)
 
     small
       display: block
 
     i
-      font-size: var(--font-size-normal)
+      font-size: var(--fs-normal)
       +margin(2, right)
 
 /* Settings */
 .settings
   .form-control
     &[disabled]
-      --input-bg-color: var(--background-color)
+      --input-color-bg: var(--color-bg)
 
-      background-color: var(--input-bg-color)
+      background-color: var(--input-color-bg)
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
 
       &:hover
-        --input-bg-color-hover: var(--input-bg-color)
+        --input-color-bg-hover: var(--input-color-bg)
 
         cursor: not-allowed
 
       & + i.i-lock
-        color: var(--text-color-secondary)
+        color: var(--color-text-secondary)
         position: absolute
         right: var(--spacer)
 
@@ -430,7 +317,7 @@
     +margin(2, right)
 
 .ext-review-list
-  color: var(--text-color-secondary)
+  color: var(--color-text-secondary)
 
   th
     +padding(3, x)
@@ -440,7 +327,7 @@
     transition: background-color var(--transition-speed-fast)
 
     a
-      color: var(--text-color)
+      color: var(--color-text)
       +padding(1, y)
       padding-inline: 0 !important
 
@@ -456,3 +343,36 @@
   .ext-review-list-activity
     display: flex
     +padding(0, x)
+
+.rating-form
+  select
+    color: var(--color-warning)
+
+    &:active,
+    &:hover,
+    &:focus
+      color: var(--color-warning)
+
+// TODO: consider adding component boxed nav generic to web-assets, and make variants on top of that
+.nav-pills
+  @extend .dropdown-menu
+
+  box-shadow: none
+  display: block
+  position: relative
+
+.nav-pills-item
+  @extend .dropdown-item
+
+  +margin(1, bottom)
+
+  &.active
+    background-color: var(--color-accent-bg)
+
+  &:last-child
+    +margin(0, bottom)
+
+.nav-pills-divider
+  @extend .dropdown-divider
+
+  +margin(0, top)

common/static/common/styles/_forms.sass

@@ -1,3 +1,18 @@
+.form-check-input,
+.form-check-label
+  &:hover
+    cursor: pointer
+
+.form-check-input
+  height: var(--spacer-4)
+
+.form-check-label
+  +margin(2, left)
+
+.form-control
+  &[type="file"]
+    height: calc(var(--spacer) * 2.5)
+
 /* Override Tagger's styling. */
 .was-validated .form-control:invalid,
 .form-control.is-invalid

common/static/common/styles/_galleria.sass

@@ -1,7 +1,7 @@
 .galleria-container
-  --extension-thumbnail-width: 140px
+  --extension-thumbnail-width: 14.0rem
 
-  background-color: var(--background-color-secondary)
+  background-color: var(--color-bg-secondary)
   border-radius: var(--border-radius-lg)
   +padding(2)
 
@@ -12,7 +12,7 @@
 
 .galleria-items
   display: flex
-  gap: .5rem
+  gap: var(--spacer-2)
   overflow-x: auto
   +padding(2, top)
   scroll-behavior: smooth
@@ -25,7 +25,7 @@
     display: none
 
   &::-webkit-scrollbar
-    height: 10px
+    height: 1.0rem
     width: 100%
 
   &::-webkit-scrollbar-thumb
@@ -33,7 +33,7 @@
     border-radius: 999em
 
   &::-webkit-scrollbar-track
-    background-color: hsl(var(--background-color-h), var(--background-color-s), 80%)
+    background-color: hsl(var(--color-bg-h), var(--color-bg-s), 80%)
 
   .galleria-item
     cursor: pointer
@@ -43,7 +43,7 @@
 
   .galleria-item-type-video
     &::after
-      font-size: 2rem
+      font-size: calc(var(--spacer) * 2)
 
 .galleria-item
   +border-radius
@@ -69,14 +69,14 @@
       transform: translate(-50%, -50%)
       width: initial
       height: initial
-      gap: 1rem
+      gap: var(--spacer)
 
 
   &.is-active
-    background-color: var(--color-primary)
+    background-color: var(--color-accent)
 
     img
-      clip-path: inset(0.2rem 0.2rem 0.2rem 0.2rem)
+      clip-path: inset(.2rem .2rem .2rem .2rem)
 
   img
     clip-path: inset(0 0 0 0)
@@ -92,7 +92,7 @@
     color: white
     content: '\e83e'
     font-family: 'fontutti'
-    font-size: 4rem
+    font-size: 5.6rem
     left: 50%
     top: 50%
     pointer-events: none
@@ -120,7 +120,7 @@
     background: transparent
     border: none
     cursor: pointer
-    font-size: 4rem
+    font-size: 5.6rem
     height: 100vh
     max-width: 200px
     opacity: .6
@@ -143,7 +143,7 @@
 
     &.btn-close
       fill: white
-      font-size: 2rem
+      font-size: 3.2rem
       height: 20vh
       max-height: 80px
       max-width: 80px
@@ -174,9 +174,9 @@
 
   .indicator
     background-color: rgba(black, .5)
-    bottom: 1rem
+    bottom: var(--spacer)
     color: white
-    +font-weight-bold
+    +fw-bold
     min-width: 3ch
     +padding(2, x)
     position: absolute
@@ -184,10 +184,10 @@
     text-align: right
 
   .caption
-    backdrop-filter: blur(25px)
+    backdrop-filter: blur(2.8rem)
     background-color: rgba(black, .5)
     border-radius: var(--border-radius)
-    bottom: 1rem
+    bottom: var(--spacer)
     color: white
     +font-weight(500)
     line-height: 1.5
@@ -195,7 +195,7 @@
     +padding(2, x)
     position: absolute
     text-align: center
-    text-shadow: 1px 1px 0 black, 2px 2px 3px rgba(black, .5)
+    text-shadow: .1rem .1rem 0 black, .2rem .2rem rgba(black, .5)
 
 body.is-galleria-active
   overflow: hidden

common/static/common/styles/_hero.sass

@@ -4,7 +4,7 @@
 
   &.is-flatpage
     --hero-max-height: 0
-    --hero-min-height: 240px
+    --hero-min-height: 24.0rem
     background: transparent
 
     .hero-content
@@ -23,7 +23,7 @@
   > a:not(.btn)
     background-color: transparent
     border-radius: 0
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
     display: inline-block
     +padding(4, x)
     +padding(2, y)
@@ -32,7 +32,7 @@
 
     &::after
       background-color: currentColor
-      bottom: -1px
+      bottom: -.1rem
       content: ''
       height: var(--border-width)
       left: 0
@@ -48,7 +48,7 @@
         opacity: 1
 
     &.is-active
-      +font-weight-bold
+      +fw-bold
       color: white
 
       &::after

common/static/common/styles/_list.sass

@@ -1,14 +1,23 @@
+.dl-col
+  margin-bottom: -.1rem // Compensate border-bottom height
+
 .dl-col-2
   flex-grow: 2
 
+.dl-row
+  +padding(2, bottom)
+
+  &:first-child
+    +padding(0, top)
+
 .list-filters
   +box-card
-  background-color: var(--background-color-tertiary)
+  background-color: var(--color-bg-tertiary)
   +padding(3)
 
   h3
     border-bottom: var(--border-width) solid var(--border-color)
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
     +padding(2, bottom)
 
   ul
@@ -17,12 +26,12 @@
 
     li
       &.is-active
-        color: var(--text-color-primary)
+        color: var(--color-text-primary)
-        +font-weight-bold
+        +fw-bold
 
     a
       display: block
 
       &:hover
-        color: var(--text-color-primary)
+        color: var(--color-text-primary)
         text-decoration: none

common/static/common/styles/_mixins.sass

@@ -7,7 +7,8 @@
   h4,
   h5,
   h6
-    +margin(4, top)
+    +margin(3, bottom)
+    +padding(3, top)
 
   img
     +border-radius(lg)
@@ -19,9 +20,4 @@
 
   & >
     h1:first-of-type,
-    h2:first-of-type,
+      +padding(0, top)
-    h3:first-of-type,
-    h4:first-of-type,
-    h5:first-of-type,
-    h6:first-of-type
-      +margin(0, top)

common/static/common/styles/_navigation_global.sass

@@ -0,0 +1,17 @@
+.nav-global
+  --nav-global-border-radius: var(--border-radius)
+  --nav-global-border-radius-lg: var(--border-radius-lg)
+  --nav-global-button-height: calc(var(--spacer) * 2.5)
+  --nav-global-font-size: var(--fs-sm)
+  --nav-global-link-padding-y: var(--nav-global-spacer-xs);
+  --nav-global-navbar-height: var(--navbar-primary-height, var(--spacer-6));
+  --nav-global-spacer: var(--spacer)
+  --nav-global-spacer-sm: var(--spacer-2)
+  --nav-global-spacer-xs: var(--spacer-1)
+
+  .btn-primary
+    color: var(--color-accent) !important
+
+  input,
+  .form-control
+    height: var(--nav-global-button-height)

common/static/common/styles/_utilities.sass

@@ -1,22 +1,23 @@
 .background-color
-  background-color: var(--background-color)
+  background-color: var(--color-bg)
 
 .background-color-primary
-  background-color: var(--background-color-primary)
+  background-color: var(--color-bg-primary)
 
 .background-color-secondary
-  background-color: var(--background-color-secondary)
+  background-color: var(--color-bg-secondary)
 
 .background-color-tertiary
-  background-color: var(--background-color-tertiary)
+  background-color: var(--color-bg-tertiary)
 
 .border-bottom-tertiary
-  border-bottom: thin solid var(--background-color-tertiary)
+  border-bottom: thin solid var(--color-bg-tertiary)
 
 .cursor-move
   &:hover
     cursor: move !important
 
+// TODO: move utilities 'fade' and 'show' to web-assets
 .fade
   opacity: 0
   // TODO: make variable 'transition-speed-slow' work
@@ -36,6 +37,13 @@
 .show
   opacity: 1
 
+.text-accent
+  color: var(--color-accent)
+
+a.text-accent
+  &:hover
+    color: var(--color-accent)
+
 .text-underline
   text-decoration: underline !important
 

common/static/common/styles/main.sass

@@ -2,41 +2,13 @@
 $font-path: '/static/fonts'
 
 /* Import variables.*/
-$grid-breakpoints: (xs: 0,sm: 768px,md: 1020px,lg: 1220px,xl: 1380px,xxl: 1680px) !default
+$grid-breakpoints: (xs: 0,sm: 768px,md: 1020px,lg: 1220px,xl: 1380px,xxl: 1680px)
 
 $container-max-widths: (sm: 760px, md: 1020px, lg: 1070px, xl: 1320px, xxl: 1600px)
 $container-width: map-get($container-max-widths, 'xl')
 
-@import '../../../../assets_shared/src/styles/_media_queries.sass'
+/* Web Assets. */
-@import '../../../../assets_shared/src/styles/_mixins.sass'
+@import '../../../../assets_shared/src/styles/main.sass'
-@import '../../../../assets_shared/src/styles/_variables.sass'
-
-/* Import Bootstrap. */
-@import '../../../../assets_shared/src/styles/bootstrap/bootstrap.scss'
-
-@import '../../../../assets_shared/src/styles/_utilities.sass'
-@import '../../../../assets_shared/src/styles/_fonts.sass'
-
-@import '../../../../assets_shared/src/styles/_bootstrap_overrides.sass'
-
-@import '../../../../assets_shared/src/styles/_alert.sass'
-@import '../../../../assets_shared/src/styles/_badge.sass'
-@import '../../../../assets_shared/src/styles/_base.sass'
-@import '../../../../assets_shared/src/styles/_box.sass'
-@import '../../../../assets_shared/src/styles/_button.sass'
-@import '../../../../assets_shared/src/styles/_cards.sass'
-@import '../../../../assets_shared/src/styles/_code.sass'
-@import '../../../../assets_shared/src/styles/_details.sass'
-@import '../../../../assets_shared/src/styles/_footer.sass'
-@import '../../../../assets_shared/src/styles/_forms.sass'
-@import '../../../../assets_shared/src/styles/_hero.sass'
-@import '../../../../assets_shared/src/styles/_list.sass'
-@import '../../../../assets_shared/src/styles/_navigation.sass'
-@import '../../../../assets_shared/src/styles/_navigation_global.scss'
-@import '../../../../assets_shared/src/styles/_pagination.sass'
-@import '../../../../assets_shared/src/styles/_sidebar.sass'
-@import '../../../../assets_shared/src/styles/_table.sass'
-@import '../../../../assets_shared/src/styles/_type.sass'
 
 /* Extension Platform specific styling. */
 @import '_mixins.sass'
@@ -46,6 +18,7 @@ $container-width: map-get($container-max-widths, 'xl')
 @import '_alert.sass'
 @import '_badge.sass'
 @import '_box.sass'
+@import '_cards.sass'
 @import '_code.sass'
 @import '_comments.sass'
 @import '_extension.sass'
@@ -54,6 +27,7 @@ $container-width: map-get($container-max-widths, 'xl')
 @import '_galleria.sass'
 @import '_hero.sass'
 @import '_list.sass'
+@import '_navigation_global.sass'
 @import '_table.sass'
 @import 'ratings/static/ratings/styles/_review.sass'
 @import 'ratings/static/ratings/styles/_stars.sass'
@@ -66,7 +40,7 @@ $container-width: map-get($container-max-widths, 'xl')
   +media-xs
     width: 60px
 
-/* Temporarily here until it can be moved to web-assets v2. */
+/* TODO: temporarily here until it can be moved to web-assets v2. */
 .nav-global-links-right
   gap: 0 var(--spacer-2)
   .navbar-search
@@ -77,11 +51,11 @@ $container-width: map-get($container-max-widths, 'xl')
 
 .profile-avatar
   border-radius: 50%
+  height: var(--spacer-4)
   pointer-events: none
-  width: 26px
 
 .search-highlight
-  background-color: var(--btn-bg-color)
+  background-color: var(--btn-color-bg)
   border-radius: var(--border-radius)
   color: var(--btn-color)
   font-style: normal
@@ -97,13 +71,13 @@ $container-width: map-get($container-max-widths, 'xl')
   border-radius: var(--border-radius)
   color: hsl(0, 100%, 90%) !important
   display: flex
-  +font-weight-bold
+  +fw-bold
-  font-size: var(--font-size-extra-small)
+  font-size: var(--fs-xs)
   justify-content: center
   padding-block: .1rem
-  padding-inline: .4rem
+  padding-inline: var(--spacer-1)
   position: absolute
-  top: -.4rem
+  top: calc(var(--spacer-2) * -1)
   transition: background-color var(--transition-speed), box-shadow 500ms, color var(--transition-speed)
   right: -.5rem
 

common/static/common/styles/tagger.scss

@@ -40,12 +40,12 @@
 .tagger > ul > li:not(.tagger-new) a:visited,
 .tagger-new ul a,
 .tagger-new ul a:visited {
-    color: var(--text-color);
+    color: var(--color-text);
 }
 .tagger > ul > li:not(.tagger-new) > a,
 .tagger li:not(.tagger-new) > span,
 .tagger .tagger-new ul {
-    background: var(--btn-bg-color);
+    background: var(--btn-color-bg);
     border-radius: var(--border-radius);
     padding: 4px 4px 4px 8px;
 

common/templates/common/base.html

@@ -125,8 +125,8 @@
             </li>
 
             {% block nav-upload %}
-            <li>
+            <li class="me-2">
-              <a href="{% url 'extensions:submit' %}" class="btn btn-primary text-primary">
+              <a href="{% url 'extensions:submit' %}" class="btn btn-primary">
                 <i class="i-upload"></i>
                 <span>Upload Extension</span>
               </a>

common/templates/common/components/nav_item.html

@@ -1,3 +1,4 @@
+{# TODO: check if template is used and needed #}
 <li class="nav-item {% include "common/components/_nav_item_active" %}">
   {% include "common/components/nav_link.html" %}
 </li>

common/templates/common/components/nav_link.html

@@ -1,5 +1,5 @@
 {% if name %}
-  <a class="nav-link {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{% url name %}">{{ title }}</a>
+  <a class="nav-pills-item {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{% url name %}">{{ title }}</a>
 {% elif path %}
-  <a class="nav-link {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{{ path }}">{{ title }}</a>
+  <a class="nav-pills-item {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{{ path }}">{{ title }}</a>
 {% endif %}

common/templates/flatpages/default.html

@@ -14,7 +14,7 @@
 {% endblock hero %}
 
 {% block content %}
-<div class="box p-5 my-3 is-flatpage">
+<div class="box my-3 is-flatpage">
   {{ flatpage.content|markdown }}
 </div>
 {% endblock content %}

extensions/static/extensions/scripts/manage.js

@@ -1,8 +1,8 @@
 // TODO: improve and refactor variable namings
 
-const formsetContainer = document.getElementById('add-image-container');
+const formsetContainer = document.getElementById('add-img-container');
 const form = document.getElementById('update-extension-form');
-const btnAddImage = document.getElementById('btn-add-image');
+const btnAddImage = document.getElementById('btn-add-img');
 const formsetPrefix = 'form';
 const inputTotalForms = document.getElementById(`id_${formsetPrefix}-TOTAL_FORMS`);
 const tagInput = document.getElementById('id_tags');
@@ -28,7 +28,7 @@ function appendImageUploadForm() {
   const formRow = document.createElement('div');
   const newFormHTML = `
   <div class="previews-list-item">
-    <div class="align-items-center d-flex previews-list-item-thumbnail pl-3">
+    <div class="align-items-center d-flex previews-list-item-thumbnail ps-3">
       <div class="js-input-img-thumbnail previews-list-item-thumbnail-img" title="Preview">
         <div class="align-items-center d-flex js-input-img-thumbnail-icon justify-content-center">
           <i class="i-image"></i>
@@ -44,10 +44,10 @@ function appendImageUploadForm() {
         <input accept="image/jpg,image/jpeg,image/png,image/webp,video/mp4" class="form-control js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source">
         <ul class="pt-0">
           <li>
-            <button class="btn btn-link btn-sm js-btn-reset-img-upload-form pl-2 pr-0"><i class="i-refresh"></i> Reset</button>
+            <button class="btn btn-link btn-sm js-btn-reset-img-upload-form ps-2 pe-0"><i class="i-refresh"></i> Reset</button>
           </li>
           <li>
-            <button class="btn btn-link btn-sm js-btn-remove-img-upload-form pl-2 pr-0"><i class="i-trash"></i> Delete</button>
+            <button class="btn btn-link btn-sm js-btn-remove-img-upload-form ps-2 pe-0"><i class="i-trash"></i> Delete</button>
           </li>
         </ul>
       </div>

extensions/templates/extensions/base.html

@@ -71,7 +71,7 @@
         {% trans "Version History" %}
       </a>
 
-      <span class="ml-auto"></span>
+      <span class="ms-auto"></span>
 
       <div class="btn-row">
         {% if is_maintainer %}

extensions/templates/extensions/components/badge_support.html

@@ -1,5 +1,5 @@
 <a href="{% url "extensions:by-support" support_slug=slug %}" title="Support: {{ name }}"
   class="badge text-decoration-none align-middle {% if not small %}px-3 py-2 my-1{% endif %} badge-dark{#% if slug == 'official' %}primary{% elif slug == 'community' %}success{% else %}warning{% endif % #}"
-  style="{% if not small %}font-size: var(--font-size-base);{% endif %}">
+  style="{% if not small %}font-size: var(--fs-base);{% endif %}">
   <b>{{ name }}</b>
 </a>

extensions/templates/extensions/components/card.html

@@ -1,25 +1,23 @@
 {% load common filters %}
-{% with latest=extension.latest_version thumbnail_360p_url=extension.get_previews.0.thumbnail_360p_url %}
+{% with latest=extension.latest_version thumbnail_360p_url=extension.previews.listed.first.thumbnail_360p_url %}
-
+  <div class="cards-item">
-<div class="ext-card {% if blur %}is-background-blur{% endif %}">
+    <div class="cards-item-content">
-  {% if blur %}
+      <a href="{{ extension.get_absolute_url }}">
-  <div class="ext-card-thumbnail-blur" style="background-image: url({{ thumbnail_360p_url }});"></div>
+        <div class="cards-item-thumbnail">
-  {% endif %}
+          <img alt="{{ extension.name }}" src="{{ thumbnail_360p_url }}" title="{{ extension.name }}">
-
+        </div>
-  <a class="ext-card-thumbnail" href="{{ extension.get_absolute_url }}">
-    <div class="ext-card-thumbnail-img" style="background-image: url({{ thumbnail_360p_url }});" title="{{ extension.name }}"></div>
       </a>
-
+      <h3 class="cards-item-title">
-  <div class="ext-card-body">
-    <h3 class="ext-card-title">
         <a href="{{ extension.get_absolute_url }}">{{ extension.name }}</a>
       </h3>
+      <div class="cards-item-excerpt">
         <p>
           {{ latest.tagline }}
         </p>
-
+      </div>
-    <ul class="ext-list-details">
+      <div class="cards-item-extra">
-      <li class="ext-card-author">
+        <ul>
+          <li>
           {% if extension.team %}
             {% with team=extension.team %}
             <a href="{{ team.get_absolute_url }}" title="{{ team.name }}">{{ team.name }}</a>
@@ -30,10 +28,10 @@
           </li>
         </ul>
 
-    <ul class="ext-list-details mt-1">
+        <ul class="cards-item-extra-rating-stars">
           {% if extension.average_score %}
           <li>
-        <a href="{{ extension.get_ratings_url }}">
+            <a class="align-items-center d-flex" href="{{ extension.get_ratings_url }}">
             {% include "ratings/components/average.html" with score=extension.average_score %}
             ({{ extension.text_ratings_count|int_compact }})
             </a>
@@ -47,22 +45,25 @@
           {% endif %}
 
           {% if show_type %}
-      <li class="ml-auto">
+          <li class="ms-auto">
             {{ extension.get_type_display }}
           </li>
           {% endif %}
         </ul>
 
         {% if latest.tags.count %}
-    <ul class="ext-list-details ext-card-tags">
+        <ul>
-      <li class="ext-card-tags">
+          {% for tag in latest.tags.all %}
-        {% include "extensions/components/tags.html" with small=True version=latest %}
+            <li>
+              {% include "extensions/components/badge_tag.html" with small=True version=latest %}
             </li>
+          {% endfor %}
         </ul>
         {% endif %}
-  </div>
 
+      </div>
       {# Author/admin tools can be added here in an extending template #}
       {% block admin %}{% endblock admin %}
     </div>
+  </div>
 {% endwith %}

extensions/templates/extensions/components/extension_edit_detail_card.html

@@ -2,9 +2,9 @@
 
 {# Info Summary #}
 <section class="ext-detail-info">
-  <div class="card">
+  <div class="card p-0">
     {% if is_initial %}
-    <div class="badge badge-info card-badge">
+    <div class="badge badge-card badge-info">
       Information retrieved from manifest
     </div>
     {% else %}

extensions/templates/extensions/detail.html

@@ -19,11 +19,13 @@
 
       {# Description #}
       {% block extension_description %}
+        {% if extension.description %}
           <section id="about" class="mt-3">
             <div class="box ext-detail-description">
               {{ extension.description|markdown }}
             </div>
           </section>
+        {% endif %}
       {% endblock extension_description %}
 
       {# What's New #}
@@ -82,7 +84,7 @@
           </ul>
         </div>
         {% else %}
-        <p class="mb-0"><i class="i-check mr-0"></i> This extension does not require special permissions.</p>
+        <p class="mb-0"><i class="i-check me-0"></i> This extension does not require special permissions.</p>
         {% endif %}
       </section>
       {% endif %}
@@ -125,7 +127,7 @@
                   <dt>{% trans 'Rating' %}</dt>
                   <dd>
                     {% if extension.average_score %}
-                    <a href="{{ extension.get_ratings_url }}" class="text-decoration-none">
+                    <a href="{{ extension.get_ratings_url }}" class="align-items-center d-flex stars-helper-detail text-decoration-none">
                       {% include "ratings/components/average.html" with score=extension.average_score %}
                       ({{ extension.ratings.listed.count }})
                     </a>
@@ -274,7 +276,7 @@
               {% trans 'Reviews' %}
             </a>
           </h2>
-          <a href="{{ extension.get_ratings_url }}" class="ml-auto">See all</a>
+          <a href="{{ extension.get_ratings_url }}" class="ms-auto">See all</a>
         </div>
       </div>
     </div>

extensions/templates/extensions/draft_finalise.html

@@ -82,7 +82,7 @@
 
                   <section class="card p-3 mt-3">
                     <div class="btn-col">
-                      <button type="submit" name="save_draft" class="btn btn-primary btn-warning">
+                      <button type="submit" name="save_draft" class="btn btn-warning">
                         <i class="i-check"></i>
                         <span>{% trans 'Save Draft' %}</span>
                       </button>

extensions/templates/extensions/home.html

@@ -25,7 +25,7 @@
     </div>
 
   </div>
-  <div class="hero-background" style="background-image: url(https://www.blender.org/wp-content/uploads/2022/08/piotr-krynski-scanislands-blender-33lts-crop.jpg); background-position-y: 50%"></div>
+  <div class="hero-bg" style="background-image: url(https://www.blender.org/wp-content/uploads/2022/08/piotr-krynski-scanislands-blender-33lts-crop.jpg); background-position-y: 50%"></div>
   <div class="hero-overlay"></div>
   <div class="hero-credits"></div>
 </div>
@@ -38,10 +38,10 @@
       <h2>
         <a href="{% url 'extensions:by-type' type_slug='add-ons' %}">Add-ons</a>
       </h2>
-      <a href="{% url 'extensions:by-type' type_slug='add-ons' %}" class="ml-auto">See all</a>
+      <a href="{% url 'extensions:by-type' type_slug='add-ons' %}" class="ms-auto">See all</a>
     </div>
     <p>Extend Blender capabilities with these add-ons by the community.</p>
-    <div class="cards-list mt-3">
+    <div class="cards cards-lg-4 cards-md-3 cards-sm-2 mt-3">
       {% for extension in addons %}
         {% include "extensions/components/card.html" %}
       {% endfor %}
@@ -53,12 +53,12 @@
       <h2>
         <a href="{% url 'extensions:by-type' type_slug='themes' %}">Themes</a>
       </h2>
-      <a href="{% url 'extensions:by-type' type_slug='themes' %}" class="ml-auto fw-normal">
+      <a href="{% url 'extensions:by-type' type_slug='themes' %}" class="ms-auto fw-normal">
         See all
       </a>
     </div>
     <p>Blender themes to your liking. Dark, light, flat, colorful, and everything in between.</p>
-    <div class="cards-list mt-3">
+    <div class="cards cards-lg-4 cards-md-3 cards-sm-2 mt-3">
       {% for extension in themes %}
         {% include "extensions/components/card.html" %}
       {% endfor %}
@@ -66,7 +66,7 @@
 
     <div class="my-5 text-center">
       Got an add-on or theme to share with the community?
-      <a href="{% url 'extensions:submit' %}" class="text-primary ml-2">
+      <a href="{% url 'extensions:submit' %}" class="text-accent ms-2">
         Upload
         <i class="i-chevron-right"></i>
       </a>

extensions/templates/extensions/list.html

@@ -33,7 +33,7 @@
     {% endif %}
     {% if tag %}
       <h2 class="d-flex align-items-center">
-        <span class="mr-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
+        <span class="me-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
         {% include "extensions/components/badge_tag.html" %}
       </h2>
     {% endif %}
@@ -47,7 +47,7 @@
     <div class="row">
       <div class="col">
         {% if object_list %}
-        <div class="cards-list card-layout-horizontal cards-3">
+        <div class="cards cards-3">
           {% for extension in object_list %}
             {% include "extensions/components/card.html" with show_type=False %}
           {% endfor %}

extensions/templates/extensions/manage/components/add_previews.html

@@ -1,15 +1,14 @@
 {% load common %}
 {# Upload new preview images #}
 {% load i18n %}
-<div class="previews-upload">
+<div id="add-img-container" class="previews-list">
-  <div id="add-image-container" class="previews-list">
   {{ add_preview_formset.management_form }}
   {{ add_preview_formset.non_form_errors }}
   {% for newform in add_preview_formset %}
     {% with inlineform=newform|add_form_classes %}
       <div  class="ext-edit-field-row js-ext-edit-field-row">
         <div class="previews-list-item">
-            <div class="align-items-center d-flex previews-list-item-thumbnail pl-3">
+          <div class="d-flex previews-list-item-thumbnail ps-3">
             <div class="js-input-img-thumbnail previews-list-item-thumbnail-img" title="Preview">
               <div class="align-items-center d-flex js-input-img-thumbnail-icon justify-content-center">
                 <i class="i-image"></i>
@@ -24,7 +23,7 @@
               {% include "common/components/field.html" with field=inlineform.source label='File' %}
               <ul class="pt-0">
                 <li>
-                    <button class="btn btn-link btn-sm js-btn-reset-img-upload-form pl-2 pr-0"><i class="i-refresh"></i> Reset</button>
+                  <button class="btn btn-link btn-sm js-btn-reset-img-upload-form ps-2 pe-0"><i class="i-refresh"></i> Reset</button>
                 </li>
               </ul>
             </div>
@@ -35,10 +34,9 @@
     {% endwith %}
   {% endfor %}
 </div>
-</div>
 <div class="row">
   <div class="col text-right mt-3">
-    <a id="btn-add-image" class="btn">
+    <a id="btn-add-img" class="btn">
       <i class="i-plus"></i>
       <span>{% trans 'Add Preview' %}</span>
     </a>

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

@@ -2,16 +2,17 @@
 {% load i18n %}
 
 {% block admin %}
-<div class="ext-card-admin p-3">
+<div class="bg-secondary cards-item-extra pt-3">
-  <div>
+  <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">
         <i class="i-edit"></i>
         <span>{% trans 'Edit' %}</span>
       </a>
+      <div class="align-items-center d-flex">
+        {% include "common/components/status.html" with object=extension class="badge-tag" %}
       </div>
-
+    </li>
-  <div>
+  </ul>
-    {% include "common/components/status.html" with object=extension %}
-  </div>
 </div>
 {% endblock admin %}

extensions/templates/extensions/manage/list.html

@@ -25,7 +25,7 @@
   <div class="row mt-4">
     <div class="col">
       {% if object_list %}
-      <div class="cards-list">
+      <div class="cards">
         {% for extension in object_list %}
           {% include "extensions/manage/components/card.html" with show_type=True %}
         {% endfor %}

extensions/templates/extensions/manage/update.html

@@ -68,7 +68,7 @@
                         <small>Source File</small>
                       </a>
                     </li>
-                    <li class="ml-auto">
+                    <li class="ms-auto">
                       {% include "common/components/field.html" with field=inlineform.DELETE %}
                     </li>
                     <li>
@@ -153,7 +153,7 @@
 const previewDragContainer = document.querySelector('.js-previews-drag-container');
 const previewDragClass = 'js-preview-drag';
 
-{% comment %} dragula([document.querySelector('.js-preview-drag'), document.querySelector('.cards-list')]); {% endcomment %}
+{% comment %} dragula([document.querySelector('.js-preview-drag'), document.querySelector('.cards')]); {% endcomment %}
 dragula([previewDragContainer, previewDragContainer], {
   moves: function (el, container, handle) {
     return handle.className.includes(previewDragClass);

extensions/templates/extensions/version_list.html

@@ -29,7 +29,7 @@
             <span class="show-on-collapse blender-version">
               {% include "extensions/components/blender_version.html" with version=version %}
             </span>
-            <ul class="ml-auto">
+            <ul class="ms-auto">
               <li class="show-on-collapse">{{ version.file.size_bytes|filesizeformat }}</li>
               <li class="show-on-collapse"><i class="i-download"></i> {{ version.download_count }}</li>
               <li>

playbooks/templates/nginx/errors/5xx.html

@@ -32,7 +32,7 @@
       h1 {
         background: linear-gradient(to right, #0cc, violet);
         background-clip: text;
-        -webkit-background-clip: text;
+        -webkit-bg-clip: text;
         -webkit-text-fill-color: transparent;
         font-weight: 300;
         font-size: 1.6em;

ratings/static/ratings/styles/_stars.sass

@@ -51,6 +51,7 @@
   -webkit-mask-size: var(--star-size) var(--star-size)
   mask-size: var(--star-size) var(--star-size)
   text-align: left
+  transform: translateY(-.2rem)
   width: var(--stars-number)
 
   span
@@ -62,6 +63,11 @@
     --star-size: 1.6em
     width: 8em
 
+// TODO: refactor stars-helper
+.stars-helper
+  max-height: 1.4rem
+  transform: translateY(-.1rem)
+
 .ratings-summary
   display: flex
   flex-direction: column
@@ -87,9 +93,9 @@
       text-decoration: none
 
   span
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
     display: block
-    font-size: var(--font-size-base)
+    font-size: var(--fs-base)
 
   .stars
     +margin(auto, x)

ratings/templates/ratings/components/average.html

@@ -2,6 +2,6 @@
 
 {% blocktranslate asvar title with score=score %}Rated {{ score }} out of 5{% endblocktranslate %}
 
-<span class="stars{% if size %} {{ size }}{% endif %}" title="{{ title }}">
+<span class="stars me-1 {% if size %} {{ size }}{% endif %}" title="{{ title }}">
   <span style="width: {% widthratio score 5 100 %}%"></span>
 </span>

ratings/templates/ratings/components/rating.html

@@ -14,9 +14,9 @@
             {{ rating.user }}
           </a>
         </li>
-        <li class="mr-auto">
+        <li class="align-items-center d-flex me-auto">
           {% with score_percentage=rating.score %}
-          <a href="{{ extension.get_ratings_url }}?score={{ rating.score }}">
+            <a class="stars-helper" href="{{ extension.get_ratings_url }}?score={{ rating.score }}">
               {% include "ratings/components/average.html" with score=rating.score %}
             </a>
           {% endwith %}

ratings/templates/ratings/rating_form.html

@@ -4,7 +4,7 @@
 {% block page_title %}Rate {{ extension.name }}{% endblock page_title %}
 
 {% block content %}
-<div class="container">
+<div class="container rating-form">
   <form method="post" enctype="multipart/form-data">
   {% csrf_token %}
   {% with form=form|add_form_classes %}

ratings/templates/ratings/rating_list.html

@@ -13,7 +13,7 @@
         {% endif %}
       </h2>
       {% if score %}
-      <div class="ml-auto">
+      <div class="ms-auto">
         <a href="{{ extension.get_ratings_url }}" class="text-muted">See all</a>
       </div>
       {% endif %}

reviewers/templates/reviewers/components/review_list_item.html

@@ -12,7 +12,7 @@
     <a href="{{ extension.get_review_url }}#activity">
       <span>{{ stats.count }}</span>
     </a>
-    <a href="{{ extension.get_review_url }}#activity-{{ stats.last_activity.id }}" class="ml-3">
+    <a href="{{ extension.get_review_url }}#activity-{{ stats.last_activity.id }}" class="ms-3">
       <span>{{ stats.last_activity.date_created|naturaltime_compact }}</span>
     </a>
     {% include "files/components/scan_details_flag.html" with suspicious_files=extension.suspicious_files %}

reviewers/templates/reviewers/extensions_review_detail.html

@@ -24,7 +24,7 @@
     {% trans "Version History" %}
   </a>
 
-  <span class="ml-auto"></span>
+  <span class="ms-auto"></span>
 
   <div class="btn-row">
     {% if is_maintainer %}
@@ -138,7 +138,7 @@
                   {{ activity.user }}
                 </a>
               </li>
-              <li class="ml-auto">
+              <li class="ms-auto">
                 <a href="#activity-{{ activity.id }}" title="{{ activity.date_created }}">
                   {{ activity.date_created|naturaltime_compact }}
                 </a>
@@ -166,8 +166,11 @@
       {% include "common/components/field.html" with field=form.message %}
 
       <div class="d-flex align-items-center">
-        <div class="btn-row ml-3 w-100 justify-content-end">
+        <div class="btn-row ms-3 w-100 justify-content-end">
+          {% if is_maintainer or request.user.is_moderator %}
             {% include "common/components/field.html" with field=form.type %}
+          {% endif %}
+
           <button type="submit" id="activity-submit" class="btn btn-primary">
             <span>{% trans "Comment" %}</span>
           </button>

users/templates/users/components/badges.html

@@ -1,3 +1,3 @@
 {% for _slug, badge in badges.items %}
-  <img class="mr-2" width="{{ width }}" src="{{ badge.image }}" title="{{ badge.description }}" label="{{ badge.label }}" />
+  <img class="me-2" width="{{ width }}" src="{{ badge.image }}" title="{{ badge.description }}" label="{{ badge.label }}" />
 {% endfor %}

users/templates/users/components/profile_display.html

@@ -1,7 +1,7 @@
 {% load static %}
 <img src="{% if user.image %}{{ user.image.url }}{% else %}{% static 'common/images/blank-profile-pic.png' %}{% endif %}" class="profile-avatar {{ classes }}">
 {% if show_name %}
-  <span class="ml-2">
+  <span class="ms-2">
     {% firstof user.full_name user.username %}
   </span>
 {% endif %}

users/templates/users/settings/base.html

@@ -12,7 +12,7 @@
       <div class="row">
         <div class="d-none d-md-block col-md-3">
           <div class="is-sticky pt-4">
-            <nav class="box nav-drawer-nested">
+            <nav class="box nav-drawer-nested p-3">
               <div class="nav-drawer-body fw-bold">
                 {% include 'users/settings/tabs.html' %}
               </div>

users/templates/users/settings/profile.html

@@ -27,12 +27,12 @@
       </div>
       <div class="col-md-6 mb-4">
         <label class="mb-2 h3" for="email">
-          <span class="mr-1">Email</span>
+          <span class="me-1">Email</span>
 
           {% if user.confirmed_email_at %}
-            <span class="align-middle badge badge-sm badge-success"><i class="i-check"></i>Confirmed</span>
+            <span class="align-middle badge badge-success fs-xs"><i class="i-check"></i>Confirmed</span>
           {% else %}
-          <span class="align-middle badge badge-sm badge-warning"><i class="i-alert-triangle"></i>Not yet confirmed</span>
+          <span class="align-middle badge badge-warning fs-xs"><i class="i-alert-triangle"></i>Not yet confirmed</span>
           {% endif %}
         </label>
         <div class="align-items-center d-flex position-relative">

users/templates/users/settings/tabs.html

@@ -3,9 +3,11 @@
     {% include "common/components/nav_link.html" with name="users:my-profile" title="Profile" classes="i-home py-2" %}
 
     {% if user.teams.count %}
-    {% include "common/components/nav_link.html" with name="teams:list" title="Teams" classes="i-people py-2" %}
+      {% include "common/components/nav_link.html" with name="teams:list" title="Teams" classes="i-users py-2" %}
     {% endif %}
 
+    <div class="nav-pills-divider"></div>
+
     {% include "common/components/nav_link.html" with name="users:my-profile-delete" title="Delete account" classes="i-trash py-2" %}
   </div>
 {% endspaceless %}