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 %}

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
@@ -64,7 +64,7 @@
       top: 1.25rem
 
   .activity-status-change
-    color: var(--text-color-tertiary)
+    color: var(--color-text-tertiary)
 
     .profile-avatar
       +margin(3, right)
@@ -73,7 +73,7 @@
       left: 0
 
     strong
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
 
     .badge
       border: none
@@ -88,12 +88,12 @@
 
 .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
   justify-content: center
   left: -.66rem

common/static/common/styles/_badge.sass

@@ -1,17 +1,17 @@
 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

common/static/common/styles/_comments.sass

@@ -11,7 +11,7 @@
     z-index: 0
 
     &:before
-      background-color: var(--box-background-color)
+      background-color: var(--box-bg-color)
       border-radius: .25rem
       content: ''
       display: block
@@ -27,8 +27,8 @@
       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

common/static/common/styles/_extension.sass

@@ -1,12 +1,12 @@
 .hero.extension-detail
   --hero-max-height: 0
   --hero-min-height: 240px
-  --font-size-hero-title: clamp(3rem, 4vw + 1rem, 48px)
+  --fs-hero-title: clamp(3rem, 4vw + 1rem, 48px)
-  --font-size-large: 18px
+  --fs-lg: 18px
   --border-width: 2px
-  --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
   flex-direction: column
@@ -24,7 +24,7 @@
 
   .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
@@ -42,8 +42,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 +54,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 +72,7 @@
   flex-wrap: wrap
 
 .ext-detail-authors
-  color: var(--text-color-secondary)
+  color: var(--color-text-secondary)
 
 .ext-detail-tagline
   +margin(2, bottom)
@@ -83,7 +83,7 @@
 
 .ext-detail-info
   dd
-    color: var(--text-color)
+    color: var(--color-text)
     overflow: hidden
     text-overflow: ellipsis
     white-space: nowrap
@@ -93,8 +93,8 @@
     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)
 
   dd
     font-family: var(--font-family-body)
@@ -108,7 +108,7 @@
     white-space: nowrap
 
     &:hover
-      color: var(--text-color-primary)
+      color: var(--color-text-primary)
 
   .dl-col
     overflow: hidden
@@ -134,10 +134,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
@@ -160,16 +160,16 @@
   summary
     .date
       +margin(2, left)
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
-      +font-weight-normal
+      +fw-normal
 
-.cards-list
+.cards
   +media-sm
-    --cards-list-items-per-row: 2
+    --cards-items-per-row: 2
   +media-md
-    --cards-list-items-per-row: 3
+    --cards-items-per-row: 3
   +media-lg
-    --cards-list-items-per-row: 4
+    --cards-items-per-row: 4
 
 .ext-card
   +box-card
@@ -182,13 +182,13 @@
   &:hover
     box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .04), -10px 0 20px 0px rgba(0, 0, 0, .04)
 
-  &.is-background-blur
+  &.is-bg-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)
+      --color-text-secondary: hsla(213, 40%, 90%, .6)
 
       border-bottom-left-radius: var(--border-radius-lg)
       border-bottom-right-radius: var(--border-radius-lg)
@@ -202,11 +202,11 @@
         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)))
+      -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(--text-color-primary)
+        color: var(--color-text-primary)
 
   &.ext-card-row
     flex-direction: row
@@ -264,7 +264,7 @@
     line-height: 1.2
 
 .ext-card-title
-  font-size: var(--font-size-large)
+  font-size: var(--fs-lg)
   +margin(3, bottom)
   transition: color var(--transition-speed)
 
@@ -275,8 +275,8 @@
   @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)
   margin: auto 0 0 0
 
   &+.ext-list-details
@@ -333,7 +333,7 @@
     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)
@@ -344,7 +344,7 @@
     flex: 1
 
     label
-      font-size: var(--font-size-small)
+      font-size: var(--fs-sm)
 
     ul
       +list-unstyled
@@ -365,7 +365,7 @@
 
   .form-control
     &[type="file"]
-      font-size: var(--font-size-extra-small)
+      font-size: var(--fs-xs)
       max-width: 50%
 
 .ext-version-history
@@ -374,15 +374,15 @@
 
     ul
       @extend .list-inline
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
-      +font-weight-normal
+      +fw-normal
       gap: 0 1rem
       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]
@@ -392,31 +392,31 @@
 .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 +430,7 @@
     +margin(2, right)
 
 .ext-review-list
-  color: var(--text-color-secondary)
+  color: var(--color-text-secondary)
 
   th
     +padding(3, x)
@@ -440,7 +440,7 @@
     transition: background-color var(--transition-speed-fast)
 
     a
-      color: var(--text-color)
+      color: var(--color-text)
       +padding(1, y)
       padding-inline: 0 !important
 

common/static/common/styles/_galleria.sass

@@ -1,7 +1,7 @@
 .galleria-container
   --extension-thumbnail-width: 140px
 
-  background-color: var(--background-color-secondary)
+  background-color: var(--color-bg-secondary)
   border-radius: var(--border-radius-lg)
   +padding(2)
 
@@ -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
@@ -73,7 +73,7 @@
 
 
   &.is-active
-    background-color: var(--color-primary)
+    background-color: var(--color-accent)
 
     img
       clip-path: inset(0.2rem 0.2rem 0.2rem 0.2rem)
@@ -176,7 +176,7 @@
     background-color: rgba(black, .5)
     bottom: 1rem
     color: white
-    +font-weight-bold
+    +fw-bold
     min-width: 3ch
     +padding(2, x)
     position: absolute

common/static/common/styles/_hero.sass

@@ -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)
@@ -48,7 +48,7 @@
         opacity: 1
 
     &.is-active
-      +font-weight-bold
+      +fw-bold
       color: white
 
       &::after

common/static/common/styles/_list.sass

@@ -3,12 +3,12 @@
 
 .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 +17,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/_utilities.sass

@@ -1,17 +1,17 @@
 .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

common/static/common/styles/main.sass

@@ -47,7 +47,7 @@ $container-width: map-get($container-max-widths, 'xl')
   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
@@ -63,8 +63,8 @@ $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

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

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

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,10 +28,10 @@ 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>
+          <i class="i-img"></i>
         </div>
       </div>
     </div>
@@ -44,10 +44,10 @@ function appendImageUploadForm() {
         <input accept="image/*" 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/badge_tag.html

@@ -1,6 +1,6 @@
 {% load extensions %}
 
 <a href="{% url "extensions:by-tag" tag_slug=tag.slug %}" title="{{ tag.name }}"
-  class="badge badge-tag{% if not small %} badge-lg{% endif %} {{ class }}">
+  class="badge badge-tag{% if not small %} badgefs-lg{% endif %} {{ class }}">
   {{ tag.name }}
 </a>

extensions/templates/extensions/components/card.html

@@ -1,7 +1,7 @@
 {% load common filters %}
 {% with latest=extension.latest_version %}
 
-<div class="ext-card {% if blur %}is-background-blur{% endif %}">
+<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 %}
@@ -47,7 +47,7 @@
       {% endif %}
 
       {% if show_type %}
-      <li class="ml-auto">
+      <li class="ms-auto">
         {{ extension.get_type_display }}
       </li>
       {% endif %}

extensions/templates/extensions/detail.html

@@ -80,7 +80,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 %}
@@ -272,7 +272,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/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>
@@ -37,10 +37,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 mt-3">
       {% for extension in addons %}
         {% include "extensions/components/card.html" %}
       {% endfor %}
@@ -52,12 +52,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 mt-3">
       {% for extension in themes %}
         {% include "extensions/components/card.html" %}
       {% endfor %}
@@ -65,7 +65,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-primary ms-2">
         Upload
         <i class="i-chevron-right"></i>
       </a>

extensions/templates/extensions/list.html

@@ -35,7 +35,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 %}
@@ -49,7 +49,7 @@
     <div class="row">
       <div class="col">
         {% if object_list %}
-        <div class="cards-list card-layout-horizontal cards-3">
+        <div class="cards card-layout-horizontal 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

@@ -2,17 +2,17 @@
 {# Upload new preview images #}
 {% load i18n %}
 <div class="previews-upload">
-  <div id="add-image-container" class="previews-list">
+  <div id="add-img-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="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>
+                  <i class="i-img"></i>
                 </div>
               </div>
             </div>
@@ -24,7 +24,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>
@@ -38,7 +38,7 @@
 </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/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>
@@ -157,7 +157,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

@@ -87,9 +87,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/rating.html

@@ -14,7 +14,7 @@
             {{ rating.user }}
           </a>
         </li>
-        <li class="mr-auto">
+        <li class="me-auto">
           {% with score_percentage=rating.score %}
           <a href="{{ extension.get_ratings_url }}?score={{ rating.score }}">
           {% include "ratings/components/average.html" with score=rating.score %}

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

@@ -18,7 +18,7 @@
     </a>
 
     {% if extension.review_activity.all %}
-    <a href="{{ extension.get_review_url }}#activity-{{ extension.review_activity.all.last.id }}" class="ml-3">
+    <a href="{{ extension.get_review_url }}#activity-{{ extension.review_activity.all.last.id }}" class="ms-3">
       <span>{{ extension.review_activity.all.last.date_created|naturaltime_compact }}</span>
     </a>
     {% endif %}

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 %}
@@ -137,7 +137,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>
@@ -165,7 +165,7 @@
       {% 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 %}

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/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 badgefs-xs badge-success"><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 badgefs-xs badge-warning"><i class="i-alert-triangle"></i>Not yet confirmed</span>
           {% endif %}
         </label>
         <div class="align-items-center d-flex position-relative">