diff --git a/assets_shared b/assets_shared
index 9d428a82..af61a962 160000
--- a/assets_shared
+++ b/assets_shared
@@ -1 +1 @@
-Subproject commit 9d428a82a5b51c1eec99639f3baebeac3b1f93f9
+Subproject commit af61a962e1a30898279b4efdbb07a2dcb230a257
diff --git a/common/static/common/scripts/galleria.js b/common/static/common/scripts/galleria.js
index 7ccc142f..946b63e2 100644
--- a/common/static/common/scripts/galleria.js
+++ b/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");
diff --git a/common/static/common/styles/_activity.sass b/common/static/common/styles/_activity.sass
index 6cbd973e..c3e66a89 100644
--- a/common/static/common/styles/_activity.sass
+++ b/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)
- height: 1.5rem
+ font-size: var(--fs-sm)
+ 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
diff --git a/common/static/common/styles/_badge.sass b/common/static/common/styles/_badge.sass
index 9a061042..3f6b4681 100644
--- a/common/static/common/styles/_badge.sass
+++ b/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-bg: var(--text-color-tertiary)
+ --badge-color: var(--color-text-secondary)
+ --badge-bg: var(--color-text-tertiary)
background-color: transparent
text-decoration: none !important
&:hover
background-color: transparent
- border-color: var(--text-color)
- color: var(--text-color)
+ border-color: var(--color-text)
+ 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)
diff --git a/common/static/common/styles/_cards.sass b/common/static/common/styles/_cards.sass
new file mode 100644
index 00000000..0d130597
--- /dev/null
+++ b/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)
diff --git a/common/static/common/styles/_comments.sass b/common/static/common/styles/_comments.sass
index ed3e1b2e..54bb1c98 100644
--- a/common/static/common/styles/_comments.sass
+++ b/common/static/common/styles/_comments.sass
@@ -11,33 +11,36 @@
z-index: 0
&:before
- background-color: var(--box-background-color)
- border-radius: .25rem
+ background-color: var(--box-bg-color)
+ border-radius: .4rem
content: ''
display: block
- height: 1rem
+ height: var(--spacer)
left: -.33rem
position: absolute
rotate: 45deg
- top: 1rem
- width: 1rem
+ top: var(--spacer)
+ width: var(--spacer)
z-index: -1
p:last-child
margin-bottom: 0
header
- color: var(--text-color-secondary)
- font-size: var(--font-size-small)
+ color: var(--color-text-secondary)
+ 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)
diff --git a/common/static/common/styles/_extension.sass b/common/static/common/styles/_extension.sass
index dd60c6c8..fa919771 100644
--- a/common/static/common/styles/_extension.sass
+++ b/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
- --font-size-hero-title: clamp(3rem, 4vw + 1rem, 48px)
- --font-size-large: 18px
- --border-width: 2px
- --hero-background-color: hsl(213, 10%, 14%)
+ --hero-min-height: 24.0rem
+ --fs-hero-title: clamp(4.8rem, 4vw + 1.6rem, 4.8rem)
+ --fs-lg: 1.8rem
+ --border-width: .2rem
+ --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-weight-bold
+ font-size: var(--fs-sm)
+ +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-weight-title
- line-height: var(--font-size-title-massive)
+ font-size: var(--fs-title-massive)
+ +fw-title
+ 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)
- font-size: var(--font-size-small)
+ color: var(--color-text-secondary)
+ 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)
- +font-weight-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
+ color: var(--color-text-secondary)
+ +fw-normal
.ext-list-details
@extend .list-inline
align-items: center
- color: var(--text-color-secondary)
- font-size: var(--font-size-small)
+ color: var(--color-text-secondary)
+ 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)
- +font-weight-normal
- gap: 0 1rem
+ color: var(--color-text-secondary)
+ +fw-normal
+ gap: 0 1.6rem
margin: 0
+margin(3, right)
.blender-version
- color: var(--text-color-secondary)
- +font-weight-normal
+ color: var(--color-text-secondary)
+ +fw-normal
+margin(3, left)
- details[open]
- .show-on-collapse
- display: none
+ 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)
- color: var(--text-color-secondary)
+ background-color: var(--input-color-bg)
+ 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)
diff --git a/common/static/common/styles/_forms.sass b/common/static/common/styles/_forms.sass
index 162dedda..0cf8ddc9 100644
--- a/common/static/common/styles/_forms.sass
+++ b/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
diff --git a/common/static/common/styles/_galleria.sass b/common/static/common/styles/_galleria.sass
index b157c32f..a8d447f8 100644
--- a/common/static/common/styles/_galleria.sass
+++ b/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
diff --git a/common/static/common/styles/_hero.sass b/common/static/common/styles/_hero.sass
index 16d682ed..0bb42568 100644
--- a/common/static/common/styles/_hero.sass
+++ b/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
diff --git a/common/static/common/styles/_list.sass b/common/static/common/styles/_list.sass
index 7e61db23..5a50db3b 100644
--- a/common/static/common/styles/_list.sass
+++ b/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)
- +font-weight-bold
+ color: var(--color-text-primary)
+ +fw-bold
a
display: block
&:hover
- color: var(--text-color-primary)
+ color: var(--color-text-primary)
text-decoration: none
diff --git a/common/static/common/styles/_mixins.sass b/common/static/common/styles/_mixins.sass
index 6d029eba..639d71a1 100644
--- a/common/static/common/styles/_mixins.sass
+++ b/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,
- h3:first-of-type,
- h4:first-of-type,
- h5:first-of-type,
- h6:first-of-type
- +margin(0, top)
+ +padding(0, top)
diff --git a/common/static/common/styles/_navigation_global.sass b/common/static/common/styles/_navigation_global.sass
new file mode 100644
index 00000000..78e926e7
--- /dev/null
+++ b/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)
diff --git a/common/static/common/styles/_utilities.sass b/common/static/common/styles/_utilities.sass
index c414e4da..9762587c 100644
--- a/common/static/common/styles/_utilities.sass
+++ b/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
diff --git a/common/static/common/styles/main.sass b/common/static/common/styles/main.sass
index d41299c4..03bf4a51 100644
--- a/common/static/common/styles/main.sass
+++ b/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'
-@import '../../../../assets_shared/src/styles/_mixins.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'
+/* Web Assets. */
+@import '../../../../assets_shared/src/styles/main.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
- font-size: var(--font-size-extra-small)
+ +fw-bold
+ 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
diff --git a/common/static/common/styles/tagger.scss b/common/static/common/styles/tagger.scss
index 8e6859e2..b41cd305 100644
--- a/common/static/common/styles/tagger.scss
+++ b/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;
diff --git a/common/templates/common/base.html b/common/templates/common/base.html
index ce301c91..2db53635 100644
--- a/common/templates/common/base.html
+++ b/common/templates/common/base.html
@@ -125,8 +125,8 @@
{% block nav-upload %}
-
-
+
+
Upload Extension
diff --git a/common/templates/common/components/nav_item.html b/common/templates/common/components/nav_item.html
index e2be84cb..41fc3324 100644
--- a/common/templates/common/components/nav_item.html
+++ b/common/templates/common/components/nav_item.html
@@ -1,3 +1,4 @@
+{# TODO: check if template is used and needed #}
{% include "common/components/nav_link.html" %}
diff --git a/common/templates/common/components/nav_link.html b/common/templates/common/components/nav_link.html
index f181308b..16c5083c 100644
--- a/common/templates/common/components/nav_link.html
+++ b/common/templates/common/components/nav_link.html
@@ -1,5 +1,5 @@
{% if name %}
- {{ title }}
+ {{ title }}
{% elif path %}
- {{ title }}
+ {{ title }}
{% endif %}
diff --git a/common/templates/flatpages/default.html b/common/templates/flatpages/default.html
index e55dde53..1749e1b1 100644
--- a/common/templates/flatpages/default.html
+++ b/common/templates/flatpages/default.html
@@ -14,7 +14,7 @@
{% endblock hero %}
{% block content %}
-
+
{{ flatpage.content|markdown }}
{% endblock content %}
diff --git a/extensions/static/extensions/scripts/manage.js b/extensions/static/extensions/scripts/manage.js
index 99d95338..3a50e1fa 100644
--- a/extensions/static/extensions/scripts/manage.js
+++ b/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 = `
-
+
Extend Blender capabilities with these add-ons by the community.
-
+
{% for extension in addons %}
{% include "extensions/components/card.html" %}
{% endfor %}
@@ -53,12 +53,12 @@
-
+
See all
Blender themes to your liking. Dark, light, flat, colorful, and everything in between.
-
+
{% for extension in themes %}
{% include "extensions/components/card.html" %}
{% endfor %}
@@ -66,7 +66,7 @@
Got an add-on or theme to share with the community?
-
+
Upload
diff --git a/extensions/templates/extensions/list.html b/extensions/templates/extensions/list.html
index 2adb2245..cfe5d83b 100644
--- a/extensions/templates/extensions/list.html
+++ b/extensions/templates/extensions/list.html
@@ -33,7 +33,7 @@
{% endif %}
{% if tag %}
- {% blocktranslate %}Extensions with the tag{% endblocktranslate %}
+ {% blocktranslate %}Extensions with the tag{% endblocktranslate %}
{% include "extensions/components/badge_tag.html" %}
{% endif %}
@@ -47,7 +47,7 @@
{% if object_list %}
-
+
{% for extension in object_list %}
{% include "extensions/components/card.html" with show_type=False %}
{% endfor %}
diff --git a/extensions/templates/extensions/manage/components/add_previews.html b/extensions/templates/extensions/manage/components/add_previews.html
index c4bf3809..bec7c145 100644
--- a/extensions/templates/extensions/manage/components/add_previews.html
+++ b/extensions/templates/extensions/manage/components/add_previews.html
@@ -1,44 +1,42 @@
{% load common %}
{# Upload new preview images #}
{% load i18n %}
-
-
- {{ add_preview_formset.management_form }}
- {{ add_preview_formset.non_form_errors }}
- {% for newform in add_preview_formset %}
- {% with inlineform=newform|add_form_classes %}
-
-
-
-
-
- {% include "common/components/field.html" with field=inlineform.caption label='Caption' %}
-
-
- {% include "common/components/field.html" with field=inlineform.source label='File' %}
-
+
+ {{ add_preview_formset.management_form }}
+ {{ add_preview_formset.non_form_errors }}
+ {% for newform in add_preview_formset %}
+ {% with inlineform=newform|add_form_classes %}
+
+
+
+
+
+ {% include "common/components/field.html" with field=inlineform.caption label='Caption' %}
+
+
+ {% include "common/components/field.html" with field=inlineform.source label='File' %}
+
+
+
- {{ inlineform.non_form_errors }}
- {% endwith %}
- {% endfor %}
-
+
+ {{ inlineform.non_form_errors }}
+ {% endwith %}
+ {% endfor %}
-
+
{% trans 'Add Preview' %}
diff --git a/extensions/templates/extensions/manage/components/card.html b/extensions/templates/extensions/manage/components/card.html
index efc45987..463f4402 100644
--- a/extensions/templates/extensions/manage/components/card.html
+++ b/extensions/templates/extensions/manage/components/card.html
@@ -2,16 +2,17 @@
{% load i18n %}
{% block admin %}
-
-
-
-
- {% include "common/components/status.html" with object=extension %}
-
+
{% endblock admin %}
diff --git a/extensions/templates/extensions/manage/list.html b/extensions/templates/extensions/manage/list.html
index 6d6c07fc..d1380f9b 100644
--- a/extensions/templates/extensions/manage/list.html
+++ b/extensions/templates/extensions/manage/list.html
@@ -25,7 +25,7 @@
{% if object_list %}
-
+
{% for extension in object_list %}
{% include "extensions/manage/components/card.html" with show_type=True %}
{% endfor %}
diff --git a/extensions/templates/extensions/manage/update.html b/extensions/templates/extensions/manage/update.html
index 9acd4ea3..b29e1b12 100644
--- a/extensions/templates/extensions/manage/update.html
+++ b/extensions/templates/extensions/manage/update.html
@@ -68,7 +68,7 @@
Source File
-
+
{% include "common/components/field.html" with field=inlineform.DELETE %}
@@ -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);
diff --git a/extensions/templates/extensions/version_list.html b/extensions/templates/extensions/version_list.html
index bc44bd41..ef2cad78 100644
--- a/extensions/templates/extensions/version_list.html
+++ b/extensions/templates/extensions/version_list.html
@@ -29,7 +29,7 @@
{% include "extensions/components/blender_version.html" with version=version %}
-
+
- {{ version.file.size_bytes|filesizeformat }}
- {{ version.download_count }}
-
diff --git a/playbooks/templates/nginx/errors/5xx.html b/playbooks/templates/nginx/errors/5xx.html
index 876590c3..9f1a9ee4 100644
--- a/playbooks/templates/nginx/errors/5xx.html
+++ b/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;
diff --git a/ratings/static/ratings/styles/_stars.sass b/ratings/static/ratings/styles/_stars.sass
index e4af307c..724f7210 100644
--- a/ratings/static/ratings/styles/_stars.sass
+++ b/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)
diff --git a/ratings/templates/ratings/components/average.html b/ratings/templates/ratings/components/average.html
index 8593824f..dc38b0da 100644
--- a/ratings/templates/ratings/components/average.html
+++ b/ratings/templates/ratings/components/average.html
@@ -2,6 +2,6 @@
{% blocktranslate asvar title with score=score %}Rated {{ score }} out of 5{% endblocktranslate %}
-
+
diff --git a/ratings/templates/ratings/components/rating.html b/ratings/templates/ratings/components/rating.html
index f9deb3a6..18c5b5a1 100644
--- a/ratings/templates/ratings/components/rating.html
+++ b/ratings/templates/ratings/components/rating.html
@@ -14,11 +14,11 @@
{{ rating.user }}
- -
+
-
{% with score_percentage=rating.score %}
-
- {% include "ratings/components/average.html" with score=rating.score %}
-
+
+ {% include "ratings/components/average.html" with score=rating.score %}
+
{% endwith %}
-
diff --git a/ratings/templates/ratings/rating_form.html b/ratings/templates/ratings/rating_form.html
index 79e8857f..3358b2b3 100644
--- a/ratings/templates/ratings/rating_form.html
+++ b/ratings/templates/ratings/rating_form.html
@@ -4,7 +4,7 @@
{% block page_title %}Rate {{ extension.name }}{% endblock page_title %}
{% block content %}
-