diff --git a/assets/images/utils/check-check.svg b/assets/images/utils/check-check.svg new file mode 100644 index 000000000..d3c06bd92 --- /dev/null +++ b/assets/images/utils/check-check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/utils/list-end.svg b/assets/images/utils/list-end.svg new file mode 100644 index 000000000..06ded6da5 --- /dev/null +++ b/assets/images/utils/list-end.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/message.svg b/assets/images/utils/message.svg new file mode 100644 index 000000000..7b092e81a --- /dev/null +++ b/assets/images/utils/message.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/utils/mic.svg b/assets/images/utils/mic.svg new file mode 100644 index 000000000..a63b99671 --- /dev/null +++ b/assets/images/utils/mic.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/utils/modrinth.svg b/assets/images/utils/modrinth.svg new file mode 100644 index 000000000..a6b2e3807 --- /dev/null +++ b/assets/images/utils/modrinth.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/utils/more-horizontal.svg b/assets/images/utils/more-horizontal.svg new file mode 100644 index 000000000..20338ba75 --- /dev/null +++ b/assets/images/utils/more-horizontal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/utils/reply.svg b/assets/images/utils/reply.svg new file mode 100644 index 000000000..b308a45d5 --- /dev/null +++ b/assets/images/utils/reply.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/utils/sort-asc.svg b/assets/images/utils/sort-asc.svg new file mode 100644 index 000000000..859fb6e60 --- /dev/null +++ b/assets/images/utils/sort-asc.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/sort-desc.svg b/assets/images/utils/sort-desc.svg new file mode 100644 index 000000000..2df482776 --- /dev/null +++ b/assets/images/utils/sort-desc.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/unknown.svg b/assets/images/utils/unknown.svg new file mode 100644 index 000000000..000b3c115 --- /dev/null +++ b/assets/images/utils/unknown.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/styles/components.scss b/assets/styles/components.scss index b3e532536..33d5f037a 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -166,7 +166,6 @@ @extend .padding-lg; position: relative; - min-height: var(--font-size-2xl); background-color: var(--color-raised-bg); border-radius: var(--size-rounded-card); @@ -213,6 +212,11 @@ &.moderation-card { background-color: var(--color-warning-banner-bg); } + + &.recessed { + background-color: var(--color-bg); + box-shadow: none; + } } .universal-labels { @@ -328,7 +332,9 @@ .resizable-textarea-wrapper + *, .input-div + * ) { - margin-block-start: var(--spacing-card-md); + &:not(:empty) { + margin-block-start: var(--spacing-card-md); + } } :where(button, .button, .iconified-button) { @@ -480,6 +486,7 @@ justify-content: space-between; flex-wrap: wrap; row-gap: 0.5rem; + min-height: 3.75rem; } /* @@ -528,6 +535,15 @@ &:active { color: var(--color-link-active); } + + &.no-underline { + text-decoration: none; + + &:hover, + &:focus-visible { + text-decoration: underline; + } + } } .title-link { @@ -767,15 +783,6 @@ } } -.button-animation { - transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out, - outline 0.2s ease-in-out; - - &:active:not(&:disabled) { - transform: scale(0.95); - } -} - .button-base { @extend .button-animation; font-weight: 500; @@ -810,6 +817,14 @@ &:active:not(&:disabled) { background-color: var(--color-raised-bg); } + + &.brand-button { + color: var(--color-brand); + } + + &.danger-button { + color: var(--color-special-red); + } } tr.button-transparent { @@ -851,11 +866,6 @@ tr.button-transparent { filter: brightness(0.8); } - // For some reason this within the above block makes it universal and not only applied to children. SCSS bug maybe? - &:active:not(&.disabled) button:not(&:disabled) { - transform: scale(0.95); - } - &.disabled { cursor: not-allowed; filter: grayscale(50%); @@ -1461,13 +1471,17 @@ button { flex-shrink: 1; } } + + &.right-aligned { + justify-content: end; + } } .input-stack { display: flex; flex-direction: column; - > * { + > *:not(:last-child) { margin-bottom: var(--spacing-card-sm); } @@ -1605,3 +1619,84 @@ button { height: 0; overflow: hidden; } + +.backed-svg { + --size: 2.5rem; + border-radius: var(--size-rounded-sm); + background-color: var(--color-button-bg); + width: var(--size); + height: var(--size); + display: inline-flex; + justify-content: center; + align-items: center; + + svg { + width: calc(0.6 * var(--size)); + height: calc(0.6 * var(--size)); + } + + &.circle { + border-radius: 50%; + } + + &.raised { + background-color: var(--color-raised-bg); + } +} + +a.iconified-link, +a.iconified-stacked-link { + display: contents; + + .space { + opacity: 0; + } + + .title { + font-weight: bold; + } + + .stacked { + display: inline-flex; + flex-direction: column; + } + + &:focus-visible .title, + &:hover .title { + text-decoration: underline; + filter: var(--hover-filter); + } + + &:active .title { + filter: var(--active-filter); + } +} + +a.iconified-link { + &:focus-visible span, + &:hover span { + text-decoration: underline; + filter: var(--hover-filter); + } + + &:active span { + filter: var(--active-filter); + } +} + +a.subtle-link { + &:focus-visible, + &:hover { + text-decoration: underline; + filter: var(--hover-filter); + } + + &:active { + filter: var(--active-filter); + } +} + +.inline-svg svg, +svg.inline-svg { + vertical-align: middle; +} diff --git a/assets/styles/global.scss b/assets/styles/global.scss index f2987b813..b431fb4c3 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -2,12 +2,12 @@ html { @extend .dark-mode; --dark-color-text: #b0bac5; --dark-color-text-dark: #ecf9fb; + --color-text-secondary: var(--color-icon); } .light-mode { --color-icon: #6b7280; --color-text: hsl(221, 39%, 11%); - --color-text-secondary: var(--color-icon); --color-text-inactive: hsl(215, 14%, 34%); --color-text-dark: #1a202c; --color-heading: #2c313d; @@ -260,6 +260,9 @@ html { --landing-green-label-bg: rgba(0, 216, 69, 0.15); --landing-raw-bg: #000; + + --hover-filter: brightness(120%); + --active-filter: brightness(140%); } .oled-mode { @@ -271,6 +274,10 @@ html { --color-button-bg-hover: #2d2d32; --color-button-bg-active: #3c3c40; --color-table-alternate-row: #19191c; + --color-divider-dark: #2c3134; + + --color-warning-banner-bg: hsl(0, 45%, 11%); + --color-ad: #0d1828; } body { diff --git a/components/ui/Avatar.vue b/components/ui/Avatar.vue index 665f4cb96..fbab51c06 100644 --- a/components/ui/Avatar.vue +++ b/components/ui/Avatar.vue @@ -4,7 +4,7 @@ ref="img" :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''} ${ pixelated ? 'pixelated' : '' - }`" + } ${raised ? 'raised' : ''}`" :src="src" :alt="alt" :loading="loading" @@ -12,7 +12,9 @@ /> diff --git a/components/ui/Badge.vue b/components/ui/Badge.vue index d0f9679ce..e7f227d69 100644 --- a/components/ui/Badge.vue +++ b/components/ui/Badge.vue @@ -1,22 +1,23 @@ - + + - - + + + - + - + - + @@ -25,6 +26,9 @@ + + + @@ -43,6 +47,7 @@ import ProcessingIcon from '~/assets/images/utils/updated.svg' import CheckIcon from '~/assets/images/utils/check.svg' import LockIcon from '~/assets/images/utils/lock.svg' import CalendarIcon from '~/assets/images/utils/calendar.svg' +import CloseIcon from '~/assets/images/utils/check-circle.svg' export default { components: { @@ -58,6 +63,7 @@ export default { CheckIcon, LockIcon, CalendarIcon, + CloseIcon, }, props: { type: { @@ -73,13 +79,12 @@ export default { diff --git a/components/ui/NotificationItem.vue b/components/ui/NotificationItem.vue new file mode 100644 index 000000000..89c3908ed --- /dev/null +++ b/components/ui/NotificationItem.vue @@ -0,0 +1,537 @@ + + + + + diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue index 389977c2a..37b4307c4 100644 --- a/components/ui/Pagination.vue +++ b/components/ui/Pagination.vue @@ -141,15 +141,6 @@ a { filter: grayscale(50%); opacity: 0.5; } - - &:hover:not(&:disabled) { - filter: brightness(0.85); - } - - &:active:not(&:disabled) { - transform: scale(0.95); - filter: brightness(0.8); - } } .has-icon { diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue index d550a77e0..b8e9d8674 100644 --- a/components/ui/ProjectCard.vue +++ b/components/ui/ProjectCard.vue @@ -70,7 +70,7 @@