diff --git a/.github/workflows/docker-compile.yml b/.github/workflows/docker-compile.yml deleted file mode 100644 index 6f124a740..000000000 --- a/.github/workflows/docker-compile.yml +++ /dev/null @@ -1,56 +0,0 @@ -name: docker-build - -on: - push: - branches: - - '**' - tags: - - 'v*' - pull_request: - -jobs: - docker: - runs-on: ubuntu-latest - steps: - - - name: Checkout - uses: actions/checkout@v2 - - - name: Docker meta - id: docker_meta - uses: crazy-max/ghaction-docker-meta@v1 - with: - images: ghcr.io/modrinth/knossos - - - name: Get branch name - id: vars - run: echo ::set-output name=short_ref::${GITHUB_REF#refs/*/} - - - name: Get short SHA - id: slug - run: echo "::set-output name=sha8::$(echo ${GITHUB_SHA} | cut -c1-8)" - - - name: Set up QEMU - uses: docker/setup-qemu-action@v1 - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v1 - - - name: Login to GHCR - if: github.event_name != 'pull_request' - uses: docker/login-action@v1 - with: - registry: ghcr.io - username: ${{ github.actor }} - password: ${{ secrets.GITHUB_TOKEN }} - - - name: Build and push - uses: docker/build-push-action@v2 - with: - context: . - file: ./Dockerfile - push: ${{ github.event_name != 'pull_request' }} - tags: ${{ steps.docker_meta.outputs.tags }} - labels: ${{ steps.docker_meta.outputs.labels }} - build-args: | - VERSION_ID=${{ steps.vars.outputs.short_ref }}-${{ steps.slug.outputs.sha8 }} diff --git a/.github/workflows/regenerate.yml b/.github/workflows/regenerate.yml new file mode 100644 index 000000000..b5a9c0b59 --- /dev/null +++ b/.github/workflows/regenerate.yml @@ -0,0 +1,14 @@ +name: Regenerate tags + +on: + schedule: + - cron: '*/30 * * * *' + +jobs: + regenerate: + runs-on: ubuntu-latest + steps: + - name: Re-deploy site + run: | + curl -X POST \ + ${{ secrets.VERCEL_DEPLOY_URL }} diff --git a/.gitignore b/.gitignore index 0078fd28d..c027f3d69 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +generated/ +!.gitkeep + # Created by .ignore support plugin (hsz.mobi) ### Node template # Logs @@ -91,4 +94,4 @@ sw.* *.swp # pnpm files -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml diff --git a/COPYING.md b/COPYING.md index 2ec7f52d5..d41b4d753 100644 --- a/COPYING.md +++ b/COPYING.md @@ -9,6 +9,7 @@ assets/images/text-logo-white.svg
static/favicon.ico
components/ui/search/LogoAnimated.vue
assets/images/landing.svg
+assets/images/404.svg
## Logo Licenses All rights reserved. ©2020-2022 Rinth, Inc. diff --git a/assets/images/404.svg b/assets/images/404.svg new file mode 100644 index 000000000..a372dacfd --- /dev/null +++ b/assets/images/404.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/search-dark.mp4 b/assets/images/search-dark.mp4 deleted file mode 100644 index 76e85e767..000000000 Binary files a/assets/images/search-dark.mp4 and /dev/null differ diff --git a/assets/images/search.mp4 b/assets/images/search.mp4 deleted file mode 100644 index 53ff19771..000000000 Binary files a/assets/images/search.mp4 and /dev/null differ diff --git a/assets/images/utils/bell-ring.svg b/assets/images/utils/bell-ring.svg new file mode 100644 index 000000000..0611c0b0d --- /dev/null +++ b/assets/images/utils/bell-ring.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/bell.svg b/assets/images/utils/bell.svg new file mode 100644 index 000000000..c8b1cd588 --- /dev/null +++ b/assets/images/utils/bell.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/utils/chart.svg b/assets/images/utils/chart.svg new file mode 100644 index 000000000..1300b435d --- /dev/null +++ b/assets/images/utils/chart.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/clipboard-copy.svg b/assets/images/utils/clipboard-copy.svg new file mode 100644 index 000000000..4d1827d95 --- /dev/null +++ b/assets/images/utils/clipboard-copy.svg @@ -0,0 +1 @@ + diff --git a/assets/images/utils/currency.svg b/assets/images/utils/currency.svg new file mode 100644 index 000000000..221d05fcd --- /dev/null +++ b/assets/images/utils/currency.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/utils/dashboard.svg b/assets/images/utils/dashboard.svg new file mode 100644 index 000000000..94c0ceb3e --- /dev/null +++ b/assets/images/utils/dashboard.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/filter.svg b/assets/images/utils/filter.svg new file mode 100644 index 000000000..38a47e043 --- /dev/null +++ b/assets/images/utils/filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/utils/heart-handshake.svg b/assets/images/utils/heart-handshake.svg new file mode 100644 index 000000000..336bb00ac --- /dev/null +++ b/assets/images/utils/heart-handshake.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/list.svg b/assets/images/utils/list.svg new file mode 100644 index 000000000..10bfe7538 --- /dev/null +++ b/assets/images/utils/list.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/lock.svg b/assets/images/utils/lock.svg new file mode 100644 index 000000000..de09d9db3 --- /dev/null +++ b/assets/images/utils/lock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/utils/paintbrush.svg b/assets/images/utils/paintbrush.svg new file mode 100644 index 000000000..7b3371125 --- /dev/null +++ b/assets/images/utils/paintbrush.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/images/utils/slash.svg b/assets/images/utils/slash.svg new file mode 100644 index 000000000..f4131b85f --- /dev/null +++ b/assets/images/utils/slash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/utils/transfer.svg b/assets/images/utils/transfer.svg new file mode 100644 index 000000000..8929f6ca3 --- /dev/null +++ b/assets/images/utils/transfer.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/assets/images/utils/undo.svg b/assets/images/utils/undo.svg new file mode 100644 index 000000000..dfda16c24 --- /dev/null +++ b/assets/images/utils/undo.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/styles/components.scss b/assets/styles/components.scss index fe14e96e7..4b558d654 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -5,74 +5,25 @@ display: inline-flex; position: relative; - &:hover:not([disabled]):not(:focus-within) { - input:not(:focus) { - background-color: var(--color-button-bg-hover); - color: var(--color-button-text-hover); - border-color: var(--color-divider-dark); - } - - svg { - color: var(--color-button-text-hover); - } - } - - &:focus-within { - input { - outline: none !important; - border-color: var(--color-brand); - } - - svg { - color: var(--color-button-text-active) !important; - } - } - input { - padding-left: 2rem; + padding-left: 2.25rem; width: 100%; } + &:focus-within svg { + color: var(--color-button-text-active); + opacity: 1; + } + svg { position: absolute; - left: 0.6rem; - height: 1rem; + left: 0.75rem; + height: 1.25rem; + width: 1.25rem; z-index: 1; - color: var(--color-text); - margin-right: -2rem; - } -} - -.iconified-button { - display: flex; - padding: 0.25rem 1rem; - margin: 0 0.25rem 0 0; - font-size: var(--font-size-nm); - align-items: center; - cursor: pointer; - - box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1); - - color: var(--color-button-text); - background-color: var(--color-button-bg); - text-decoration: none; - border-radius: 2rem; - - &:hover, - &:focus-visible { - background-color: var(--color-button-bg-hover); - color: var(--color-button-text-hover); - } - - &:active { - background-color: var(--color-button-bg-active); - color: var(--color-button-text-active); - } - - svg { - width: 1.25rem; - margin-right: 0.5rem; + color: var(--color-button-text); + opacity: 0.6; } } @@ -133,6 +84,10 @@ } .markdown-body { + h1:first-child { + margin-top: 0; + } + blockquote, details, dl, @@ -150,8 +105,6 @@ p { padding: 0; line-height: 1.5; - word-wrap: break-word; - overflow-wrap: anywhere; } h1, @@ -160,6 +113,11 @@ border-bottom: 1px solid var(--color-header-underline); } + h1, h2, h3, h4, h5, h6, li, p { + word-wrap: break-word; + overflow-wrap: anywhere; + } + blockquote { padding: 0 1em; color: var(--color-text); @@ -195,7 +153,7 @@ pre { margin-top: 1rem; padding: 14px; - border-radius: var(--size-rounded-control); + border-radius: var(--size-rounded-sm); background-color: var(--color-code-bg); overflow-x: auto; @@ -209,7 +167,7 @@ code { padding: 0.2em 0.4em; font-size: 80%; - border-radius: var(--size-rounded-control); + border-radius: var(--size-rounded-sm); background-color: var(--color-code-bg); color: var(--color-code-text); } @@ -224,8 +182,11 @@ width: max-content; max-width: 100%; overflow: auto; - border-collapse: collapse; + border-collapse: separate; + border-spacing: 0; line-height: 1.5; + border: 0.05rem solid var(--color-table-border); + border-radius: var(--size-rounded-sm); th { font-weight: 600; @@ -234,17 +195,33 @@ td, th { padding: 0.4rem 0.85rem; - border: 0.1rem solid var(--color-table-border); + border: 0.05rem solid var(--color-table-border); } tr:nth-child(2n) { background-color: var(--color-table-alternate-row); } + + th:first-of-type { + border-top-left-radius: var(--size-rounded-sm); + } + + th:last-of-type { + border-top-right-radius: var(--size-rounded-sm); + } + + tr:last-of-type td:first-of-type { + border-bottom-left-radius: var(--size-rounded-sm); + } + + tr:last-of-type td:last-of-type { + border-bottom-right-radius: var(--size-rounded-sm); + } } details { border: 0.15rem solid var(--color-button-bg); - border-radius: var(--size-rounded-control); + border-radius: var(--size-rounded-sm); padding: 0.5rem 0.5rem 0; summary { @@ -253,6 +230,7 @@ padding: 0.5rem 0.8rem; cursor: pointer; background-color: var(--color-button-bg); + border-radius: var(--size-rounded-xs); &:hover { background-color: var(--color-button-bg-hover); @@ -264,6 +242,7 @@ summary { margin-bottom: 0.5rem; + border-radius: var(--size-rounded-xs) var(--size-rounded-xs) 0 0; } } } @@ -284,13 +263,14 @@ .tooltip { display: block !important; z-index: 10000; + transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out; .tooltip-inner { background: var(--color-tooltip-bg); color: var(--color-tooltip-text); padding: 5px 10px 4px; border-radius: var(--size-rounded-tooltip); - box-shadow: var(--shadow-tooltip); + box-shadow: var(--shadow-floating); font-size: 0.9rem; } @@ -367,101 +347,199 @@ &[aria-hidden='true'] { visibility: hidden; opacity: 0; - transition: opacity 0.15s, visibility 0.15s; } &[aria-hidden='false'] { visibility: visible; opacity: 1; - transition: opacity 0.15s; } } -.button { - //width: max-content; - margin: auto 0; - padding: 6px 20px; - border-radius: var(--size-rounded-control); - color: var(--color-button-text); - background-color: var(--color-button-bg); - font-weight: var(--font-weight-medium); - font-size: var(--font-size-nm); +.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; - &:focus-visible, - &:hover { - background-color: var(--color-button-bg-hover); + &:active:not(&:disabled) { + transform: scale(0.95); + } +} + +.button-base { + @extend .button-animation; + font-weight: 500; + + &:focus-visible:not(&:disabled), + &:hover:not(&:disabled) { + cursor: pointer; + filter: brightness(0.85); } - &:active { - background-color: var(--color-button-bg-active); + &:active:not(&:disabled) { + filter: brightness(0.8); } &:disabled, &[disabled] { - background-color: transparent; - box-shadow: inset 0 0 0 1px var(--color-button-bg-disabled); - color: var(--color-button-text-disabled); - pointer-events: none; - cursor: default; + cursor: not-allowed; + filter: grayscale(50%); + opacity: 0.5; + box-shadow: none; } } -.transparent-button { - border-radius: var(--size-rounded-control); - color: var(--color-text); +:not(tr).button-transparent { + @extend .button-base; background-color: transparent; + border-radius: var(--size-rounded-sm); - &:focus-visible, - &:hover, - &.selected, - &.nuxt-link-exact-active, - &.active-path { - color: var(--color-transparent-button-text-hover); - background-color: var(--color-transparent-button-bg-hover); + &:focus-visible:not(&:disabled), + &:hover:not(&:disabled), + &:active:not(&:disabled) { + background-color: var(--color-raised-bg); + } +} + +tr.button-transparent { + @extend .button-animation; + background-color: transparent; + border-radius: var(--size-rounded-sm); + + &:focus-visible:not(&:disabled) > *, + &:hover:not(&:disabled) > * { + cursor: pointer; + filter: brightness(0.85); + background-color: var(--color-raised-bg); + } + + &:active:not(&:disabled) > * { + filter: brightness(0.8); + background-color: var(--color-raised-bg); + } + + &:disabled > *, + &[disabled] > * { + cursor: not-allowed; + filter: grayscale(50%); + opacity: 0.5; + box-shadow: none; + } +} + +.button-within { + 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; + + &:focus-visible:not(&.disabled), + &:hover:not(&.disabled) { + filter: brightness(0.85); } - &:active { - color: var(--color-transparent-button-text-active); - background-color: var(--color-transparent-button-bg-active); + &:active:not(&.disabled) { + filter: brightness(0.8); } - margin: auto 0; - padding: 6px 20px; - text-decoration: underline; + // 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%); + opacity: 0.5; + box-shadow: none; + + &disabled, + &[disabled] { + cursor: not-allowed; + box-shadow: none; + } + } +} + +.iconified-button { + @extend .button-base; + + --text-color: var(--color-button-text); + --background-color: var(--color-button-bg); + + box-sizing: border-box; + display: flex; + padding: var(--spacing-card-sm) var(--spacing-card-bg); + margin: 0; + font-size: var(--font-size-nm); + align-items: center; + cursor: pointer; + box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent; + width: fit-content; + height: fit-content; + + color: var(--text-color); + background-color: var(--background-color); + text-decoration: none; + border-radius: var(--size-rounded-sm); + + svg { + width: 1.1rem; + height: 1.1rem; + margin-right: 0.5rem; + } + + &.icon-only { + padding: 0 0.5rem; + + svg { + margin-right: 0; + } + } + + &.transparent { + background: none; + box-shadow: none; + } + + &.bold-button { + font-weight: bold; + } +} + +.header-button { + @extend .iconified-button; + + box-sizing: content-box; + min-height: unset; + border-radius: var(--size-rounded-max); + white-space: nowrap; + padding: 0.5rem 0.75rem; + max-height: 1.75rem; + + svg { + vertical-align: middle; + margin-right: 0.5rem; + height: 1.25rem; + width: 1.25rem; + } +} + +.raised-button { + --background-color: var(--color-raised-bg); + box-shadow: var(--shadow-inset-sm), var(--shadow-raised); +} + +.danger-button { + --background-color: var(--color-badge-red-bg); + --text-color: var(--color-brand-inverted); } .brand-button { - @extend .button; - color: var(--color-brand-inverted); - background-color: var(--color-brand); - - &:focus-visible, - &:hover { - background-color: var(--color-brand-hover); - color: var(--color-brand-inverted); - } - - &:active { - background-color: var(--color-brand-active); - color: var(--color-brand-inverted); - } + --background-color: var(--color-brand); + --text-color: var(--color-brand-inverted); } -.brand-button-colors { - box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.25); - color: var(--color-brand-inverted); - background-color: var(--color-brand); - - &:focus-visible, - &:hover { - background-color: var(--color-brand-hover); - color: var(--color-brand-inverted); - } - - &:active { - background-color: var(--color-brand-active); - color: var(--color-brand-inverted); - } +.button-group { + display: flex; + grid-gap: var(--spacing-card-sm); + flex-wrap: wrap; } .multiselect--above .multiselect__content-wrapper { @@ -484,6 +562,7 @@ input { background: transparent; + box-shadow: none; } input::placeholder { @@ -491,15 +570,17 @@ } .multiselect__tags { - border-radius: 1.25rem; + border-radius: var(--size-rounded-sm); background: var(--color-dropdown-bg); + box-shadow: var(--shadow-inset-sm); border: none; cursor: pointer; - padding-left: 1rem; + padding-left: 7px; padding-top: 10px; - &:active, - &:hover { + transition: background-color .1s ease-in-out; + + &:active { background: var(--color-button-bg-hover); .multiselect__spinner { @@ -512,7 +593,7 @@ } .multiselect__tag { - border-radius: 2rem; + border-radius: var(--size-rounded-sm); color: var(--color-text-dark); background: transparent; border: 2px solid var(--color-brand); @@ -527,7 +608,9 @@ } .multiselect__placeholder { - color: var(--color-text); + color: var(--color-button-text); + margin-left: 8px; + opacity: 0.6; font-size: 16px; line-height: 20px; } @@ -537,8 +620,9 @@ background: var(--color-dropdown-bg); border: none; overflow-x: hidden; - border-bottom-left-radius: var(--size-rounded-card); - border-bottom-right-radius: var(--size-rounded-card); + border-bottom-left-radius: var(--size-rounded-sm); + border-bottom-right-radius: var(--size-rounded-sm); + box-shadow: var(--shadow-inset-sm), var(--shadow-floating); .multiselect__element { .multiselect__option--highlight { @@ -557,8 +641,7 @@ .multiselect__spinner { background: var(--color-dropdown-bg); - &:active, - &:hover { + &:active { background: var(--color-button-bg-hover); } } @@ -573,60 +656,6 @@ } } -label { - display: flex; - flex-direction: column; - - @media screen and (min-width: 1024px) { - flex-direction: row; - align-items: center; - } - - span { - flex: 2; - padding-right: var(--spacing-card-lg); - - &.no-padding { - padding-right: 0; - } - } - - input, - .multiselect, - .input-group { - flex: 3; - height: fit-content; - } - - input[type='button'] { - height: fit-content; - flex: 1; - } - - input[type='button']:hover { - cursor: pointer; - } - - div, - a { - height: fit-content; - flex: 1; - } - - div:hover { - cursor: pointer; - } -} - -.input-group { - display: flex; - flex-direction: column; - - * { - margin-bottom: var(--spacing-card-sm); - } -} - .switch { -webkit-appearance: none; -moz-appearance: none; @@ -640,71 +669,65 @@ label { } .stylized-toggle { + @extend .button-base; + + box-sizing: content-box; min-height: 32px; height: 32px; width: 52px; max-width: 52px; - border-radius: 16px; + border-radius: var(--size-rounded-max); display: inline-block; position: relative; margin: 0; - border: 2px solid var(--color-button-bg); transition: all 0.2s ease; background: var(--color-button-bg); &:after { content: ''; position: absolute; - top: 2px; - left: 2px; - width: 24px; - height: 24px; + top: 7px; + left: 7px; + width: 18px; + height: 18px; border-radius: 50%; - background: white; - box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2); + background: var(--color-toggle-handle); transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35); + + @media (prefers-reduced-motion) { + transition: none; + } } &:checked { - background: var(--color-brand); - border: 2px solid var(--color-brand); + background-color: var(--color-brand); &:after { transform: translatex(20px); + background: var(--color-brand-inverted); } } &:hover &:focus { background: var(--color-button-bg); - border: 2px solid var(--color-button-bg); - } - - &:hover:checked &:focus:checked { - background: var(--color-brand); - border: 2px solid var(--color-brand); } } .download-button { + @extend .button-base; + display: flex; align-items: center; - height: 1.75rem; - width: 1.75rem; - border-radius: 1.5rem; + height: 2.25rem; + width: 2.25rem; + border-radius: var(--size-rounded-sm); color: var(--color-brand-inverted); background-color: var(--color-brand); margin-right: var(--spacing-card-sm); - &:hover { - background-color: var(--color-brand-hover); - } - - &:active { - background-color: var(--color-brand-active); - } - svg { width: 1.25rem; + height: 1.25rem; margin: auto; } @@ -725,71 +748,6 @@ label { } } -.styled-tabs { - align-items: center; - display: flex; - flex-wrap: wrap; - row-gap: var(--spacing-card-sm); - font-weight: bold; - color: var(--color-text-inactive); - overflow-x: scroll; - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } - - .tab { - padding: 0; - margin-right: var(--spacing-card-bg); - - &:last-child { - margin-right: 0; - } - - span { - font-weight: bold; - display: inline-block; - padding-bottom: 6px; - position: relative; - } - - span::before { - background-color: transparent; - content: ''; - position: absolute; - width: 60%; - height: 4px; - bottom: 0; - left: 20%; - border-radius: var(--size-rounded-max); - } - - &:hover, - &:focus { - color: var(--color-text); - - span::before { - background-color: var(--tab-underline-hovered); - } - } - - &.nuxt-link-active, - &.selected { - color: var(--color-text); - - span::before { - background-color: var(--color-brand); - box-shadow: 0 0 1px 0 var(--color-brand); - } - } - } - - .right { - margin-left: auto; - } -} - .error { display: flex; flex-direction: column; @@ -810,11 +768,13 @@ label { } .link { + cursor: pointer; text-decoration: underline; } } .card { + position: relative; min-height: var(--font-size-2xl); padding: var(--spacing-card-md) var(--spacing-card-lg); @@ -823,7 +783,18 @@ label { margin-bottom: var(--spacing-card-md); - // box-shadow: var(--shadow-card); + box-shadow: var(--shadow-card); + + .card__overlay { + position: absolute; + top: 1rem; + right: 1rem; + display: flex; + flex-direction: column; + align-items: flex-end; + grid-gap: .5rem; + z-index: 2; + } &.warning { border-left: 0.5rem solid var(--color-banner-side); @@ -905,9 +876,10 @@ label { margin: var(--spacing-card-bg) 0; } +.text-input-wrapper.known-error, input.known-error, textarea.known-error { - border-color: var(--color-badge-red-bg) !important; + outline: 2px solid var(--color-badge-red-bg); background-color: var(--color-warning-bg) !important; &::placeholder { @@ -917,4 +889,381 @@ textarea.known-error { .known-errors { color: var(--color-badge-red-bg); + + ul { + margin: 0; + } +} + +.goto-link { + display: flex; + align-items: center; + gap: 3px; + + color: var(--color-link); +} + +.goto-link:hover, +.goto-link:focus-visible { + color: var(--color-link-hover); +} + +.goto-link:active { + color: var(--color-link-active); +} + +h1 { + .beta-badge { + font-size: 0.4em; + } +} + +.beta-badge { + font-size: 0.7em; + padding: 0.25rem 0.5rem; + background-color: transparent; + box-sizing: border-box; + border: 2px solid var(--color-text); + color: var(--color-text); + border-radius: var(--size-rounded-max); + margin-left: 0.5rem; + font-weight: bold; +} + +.nuxt-link-exact-active, h1, h2, h3 { + .beta-badge { + background-color: var(--color-button-text-active); + box-sizing: border-box; + outline: none; + color: var(--color-raised-bg); + } +} + +@media (prefers-reduced-motion) { + .button-animation, button { + transform: none !important; + } +} + +.base-card { + @extend .padding-lg; + + position: relative; + min-height: var(--font-size-2xl); + + background-color: var(--color-raised-bg); + border-radius: var(--size-rounded-card); + + margin-bottom: var(--spacing-card-md); + + box-shadow: var(--shadow-card); + + .card__overlay { + position: absolute; + top: 1rem; + right: 1rem; + display: flex; + flex-direction: column; + align-items: flex-end; + grid-gap: .5rem; + z-index: 2; + } + + &.warning { + border-left: 0.5rem solid var(--color-banner-side); + padding: 1.5rem; + line-height: 1.5; + background-color: var(--color-banner-bg); + color: var(--color-banner-text); + min-height: 0; + + a { + /* Uses active color to increase contrast */ + color: var(--color-link-active); + text-decoration: underline; + } + } +} + +.universal-labels { + label, .label { + .label__title { + display: block; + margin-block: var(--spacing-card-md) var(--spacing-card-sm); + + // Same styling as h3 + color: var(--color-text-dark); + font-size: 1.17em; + font-weight: bold; + + .required { + color: var(--color-badge-red-bg); + } + } + .label__description { + display: block; + margin-block-end: var(--spacing-card-sm); + } + } +} + +.padding-lg { + padding: var(--spacing-card-lg); +} + +.padding-md { + padding: var(--spacing-card-md); +} + +.padding-sm { + padding: var(--spacing-card-sm); +} + +.padding-block-lg { + padding-block: var(--spacing-card-lg); +} + +.padding-block-md { + padding-block: var(--spacing-card-md); +} + +.padding-block-sm { + padding-block: var(--spacing-card-sm); +} + +.padding-inline-lg { + padding-inline: var(--spacing-card-lg); +} + +.padding-inline-md { + padding-inline: var(--spacing-card-md); +} + +.padding-inline-sm { + padding-inline: var(--spacing-card-sm); +} + +.universal-card { + @extend .base-card; + @extend .universal-labels; + + .multiselect { + width: 15rem; + } + + input + *, .input-group + * { + margin-block-start: var(--spacing-card-md); + } + + button, .button, .iconified-button { + width: fit-content; + } + + input { + box-sizing: border-box; + max-height: 40px; + width: 24rem; + flex-basis: 24rem; + + &:not(.stylized-toggle) { + max-width: 100%; + } + } + + .adjacent-input, &.adjacent-input { + display: flex; + flex-direction: row; + align-items: center; + + .iconified-button, .input-group { + flex-shrink: 0; + } + + input { + flex-shrink: 1; + } + + > :first-child { + flex-shrink: 2; + flex-grow: 1; + margin-right: var(--spacing-card-md); + } + + @media screen and (max-width: 750px) { + &:not(&.small) { + flex-direction: column; + align-items: start; + margin-bottom: var(--spacing-card-sm); + + .stylized-toggle { + flex-basis: 0; + } + + > :first-child { + margin-right: 0; + margin-bottom: var(--spacing-card-md); + } + } + } + } + + h1 { + display: flex; + align-items: center; + } + + > :first-child { + margin-block-start: 0; + } + + > :last-child { + margin-block-end: 0; + } +} + +.push-right { + margin-left: auto; + margin-right: 0; +} + +input, +button { + &:disabled { + cursor: not-allowed !important; + } +} + +.header-card { + @extend .universal-card; + + .header__row { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-card-sm); + + * { + flex-shrink: 0; + } + + .header__title { + margin: 0; + flex-grow: 1; + } + + &:not(:last-child) { + margin-bottom: var(--spacing-card-md); + } + } +} + +.legacy-label-styles { + label { + display: flex; + flex-direction: column; + margin-bottom: 0.5rem; + + &.no-margin { + margin-bottom: 0; + } + + @media screen and (min-width: 1024px) { + flex-direction: row; + align-items: center; + } + + > span { + flex: 2; + padding-right: var(--spacing-card-lg); + + &.no-padding { + padding-right: 0; + } + } + + > input, + > .multiselect, + > .input-group { + flex: 3; + height: fit-content; + } + + > input[type='button'] { + height: fit-content; + flex: 1; + } + + > input[type='button']:hover { + cursor: pointer; + } + + > div, + > a { + height: fit-content; + flex: 1; + } + + > div:hover { + cursor: pointer; + } + } +} + +.input-group { + display: flex; + flex-direction: row; + grid-gap: var(--spacing-card-sm); + flex-wrap: wrap; + max-width: 100%; + align-items: center; + + .multiselect { + width: 15rem; + } + + input { + flex-shrink: 2; + } +} + +.text-input-wrapper { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + background: var(--color-button-bg); + width: fit-content; + border-radius: var(--size-rounded-sm); + box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent; + transition: box-shadow 0.1s ease-in-out; + overflow: hidden; + max-width: 100%; + + .text-input-wrapper__before { + display: flex; + color: var(--color-text); + padding: 0.5rem 0 0.5rem 1rem; + font-weight: var(--font-weight-medium); + min-height: 40px; + box-sizing: border-box; + width: fit-content; + align-items: center; + filter: grayscale(50%); + opacity: 0.5; + box-shadow: none; + flex-shrink: 0; + } + + input, textarea { + border-radius: 0; + background-color: transparent; + box-shadow: unset; + padding-left: 0; + flex-grow: 1; + } + + &:focus, &:focus-visible, &:focus-within { + box-shadow: inset 0 0 0 transparent, 0 0 0 .25rem var(--color-brand-shadow); + color: var(--color-button-text-active); + } } diff --git a/assets/styles/global.scss b/assets/styles/global.scss index becef9d5a..e7d534e34 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -11,7 +11,7 @@ html { --color-text-inactive: hsl(215, 14%, 34%); --color-text-dark: #1a202c; --color-heading: #2c313d; - --color-bg: hsl(220, 13%, 91%); + --color-bg: #e5e7eb; --color-raised-bg: #ffffff; --color-divider: hsl(220, 13%, 91%); --color-divider-dark: #c8cdd3; @@ -19,32 +19,25 @@ html { --color-text-inverted: var(--color-bg); --color-bg-inverted: var(--color-text); - --color-brand: #30b27b; - --color-brand-hover: #1e9565; - --color-brand-active: #177955; + --color-brand: #00af5c; + --color-brand-highlight: rgba(0, 175, 92, 0.25); + --color-brand-shadow: rgba(0, 175, 92, 0.7); --color-brand-inverted: #ffffff; --tab-underline-hovered: #e2e8f0; - --color-button-bg: #e0e0e5; + --color-button-bg: hsl(220, 13%, 91%); --color-button-text: var(--color-text-dark); --color-button-bg-hover: #d9dce0; --color-button-text-hover: #1b1e24; --color-button-bg-active: #c3c6cb; --color-button-text-active: var(--color-button-text-hover); - --color-button-bg-disabled: #cacdd2; - --color-button-text-disabled: #9da3ac; - --color-transparent-button-bg-hover: var(--color-button-bg); - --color-transparent-button-text-hover: var(--color-text-dark); - --color-transparent-button-bg-active: var(--color-button-bg-hover); - --color-transparent-button-text-active: var(--color-text-dark); + + --color-toggle-handle: var(--color-icon); --color-dropdown-bg: var(--color-button-bg); --color-dropdown-text: var(--color-button-text); - --color-category-bg: var(--color-bg); - --color-category-text: var(--color-text-dark); - --color-tooltip-bg: var(--color-text); --color-tooltip-text: var(--color-bg); @@ -56,14 +49,10 @@ html { --color-ad: #d6e6f9; --color-ad-raised: #b1c8e4; - --shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15); - --shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3); - --shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15); - --color-grey-link: var(--color-text); --color-grey-link-hover: var(--color-heading); --color-grey-link-active: var(--color-text-dark); - --color-link: #2089ff; + --color-link: #0d60bb; --color-link-hover: #1a76e7; --color-link-active: #146fd7; @@ -76,11 +65,11 @@ html { --color-badge-yellow-text: #755920; --color-badge-yellow-bg: #f7bb43; - --color-warning-text: hsl(358, 57%, 20%); - --color-warning-bg: hsl(358, 57%, 80%); + --color-warning-bg: hsl(355, 70%, 88%); + --color-warning-text: hsl(342, 70%, 35%); --color-banner-text: hsl(0, 11%, 16%); - --color-banner-bg: hsl(356, 59%, 77%); + --color-banner-bg: hsl(0, 100%, 95%); --color-banner-side: hsl(357, 78%, 40%); --color-block-quote: var(--color-tooltip-bg); @@ -90,12 +79,18 @@ html { --color-table-border: #dfe2e5; --color-table-alternate-row: #f6f8fa; - --shadow-card: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.1), - inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05); - --shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2), - inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1); + --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1); + --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05); + --shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15); - --color-card-link-bg: rgba(0, 0, 0, 7%); + --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2); + --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15), + 1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12), + 4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09); + --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, + hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px; + + --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px; } .dark-mode { @@ -113,33 +108,26 @@ html { --color-bg-inverted: var(--color-text); --color-brand: #1bd96a; - --color-brand-hover: #2de391; - --color-brand-active: #55f5ae; + --color-brand-highlight: rgba(27, 217, 106, 0.25); + --color-brand-shadow: rgba(27, 217, 106, 0.7); --color-brand-inverted: #000; --tab-underline-hovered: #414146; - --color-button-bg: #3e434b; + --color-button-bg: hsl(222, 13%, 30%); --color-button-text: var(--color-text); --color-button-bg-hover: #494f58; --color-button-text-hover: #ffffff; --color-button-bg-active: #616570; --color-button-text-active: var(--color-button-text-hover); - --color-button-bg-disabled: #3a434d; - --color-button-text-disabled: #555d65; - --color-transparent-button-bg-hover: var(--color-button-bg); - --color-transparent-button-text-hover: var(--color-text-dark); - --color-transparent-button-bg-active: var(--color-button-bg-hover); - --color-transparent-button-text-active: var(--color-text-dark); + + --color-toggle-handle: var(--color-button-text); --color-dropdown-bg: var(--color-button-bg); --color-dropdown-text: var(--color-button-text); - --color-category-bg: var(--color-button-bg); - --color-category-text: var(--color-text-dark); - - --color-tooltip-bg: var(--color-text); - --color-tooltip-text: var(--color-bg); + --color-tooltip-bg: var(--color-button-bg); + --color-tooltip-text: var(--color-text); --color-code-bg: var(--color-button-bg); --color-code-text: var(--color-text-dark); @@ -149,10 +137,6 @@ html { --color-ad: #1f324a; --color-ad-raised: #2e4057; - --shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15); - --shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15); - --shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15); - --color-link: #74b6f3; --color-link-hover: #92c0f5; --color-link-active: #b5d5fd; @@ -166,8 +150,8 @@ html { --color-badge-yellow-text: #dba22d; --color-badge-yellow-bg: #f7bb43; - --color-warning-text: hsl(358, 57%, 85%); - --color-warning-bg: hsl(358, 57%, 25%); + --color-warning-bg: hsl(355, 70%, 20%); + --color-warning-text: hsl(342, 70%, 75%); --color-banner-text: hsl(0, 100%, 96%); --color-banner-bg: hsl(356, 18%, 18%); @@ -180,7 +164,16 @@ html { --color-table-border: #4f5864; --color-table-alternate-row: #262a30; - --color-card-link-bg: rgb(255, 255, 255, 15%); + --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1); + --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05); + --shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25); + + --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2); + --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1); + --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, + hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; + + --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px; } .oled-mode { @@ -193,15 +186,21 @@ html { --color-button-bg-active: #3c3c40; } +.midas-mode { + @extend .dark-mode; + --color-brand: #fac413; + --color-brand-shadow: rgba(250, 196, 19, 0.7); +} + body { // Defaults background-color: var(--color-bg); color: var(--color-text); - --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, - Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; font-family: var(--font-standard); font-size: 16px; - font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-regular); margin: 0; padding: 0; @@ -219,12 +218,13 @@ body { --size-navbar-height: 3.5rem; --size-mobile-navbar-height: 3.5rem; - --size-mobile-navbar-height-expanded: 10rem; + --size-mobile-navbar-height-expanded: 11.75rem; --spacing-card-lg: 1.5rem; --spacing-card-bg: 1rem; --spacing-card-md: 0.75rem; --spacing-card-sm: 0.5rem; + --spacing-card-xs: 0.25rem; // Font Sizes --font-size-xxs: 0.625rem; //10px @@ -247,14 +247,18 @@ body { --font-weight-heading: var(--font-weight-extrabold); --font-weight-title: var(--font-weight-extrabold); - @media screen and (min-width: 501px) { + @media screen and (min-width: 318px) { + --size-mobile-navbar-height-expanded: 9.25rem; + } + + @media screen and (min-width: 517px) { --size-mobile-navbar-height-expanded: 7rem; } } svg { - height: 24px; - width: 24px; + height: 1em; + width: 1em; } a { @@ -262,6 +266,10 @@ a { text-decoration: none; } +h1 { + color: var(--color-text-dark); +} + h2 { margin-top: 0; margin-bottom: 1rem; @@ -269,19 +277,17 @@ h2 { } h3 { - margin-top: 0.5rem; - margin-bottom: 0.25rem; + margin-block: var(--spacing-card-md) var(--spacing-card-sm); color: var(--color-text-dark); } -button { - cursor: pointer; - @extend .button; -} - input { - border-radius: 2rem; + border-radius: var(--size-rounded-sm); box-sizing: border-box; + border: 2px solid transparent; + // safari iOS rounds inputs by default + // set the appearance to none to prevent this + appearance: none !important; } pre { @@ -293,17 +299,15 @@ textarea { background: var(--color-button-bg); color: var(--color-text); padding: 0.5rem 1rem; - border: 2px solid transparent; + font-weight: var(--font-weight-medium); + border: none; + outline: none; + box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent; + transition: box-shadow 0.1s ease-in-out; + min-height: 40px; - &:hover:not([disabled]):not(:focus) { - background: var(--color-button-bg-hover); - color: var(--color-button-text-hover); - border-color: var(--color-divider-dark); - } - - &:focus { - outline: none !important; - border-color: var(--color-brand); + &:focus, &:focus-visible { + box-shadow: inset 0 0 0 transparent, 0 0 0 .25rem var(--color-brand-shadow); color: var(--color-button-text-active); } @@ -313,26 +317,21 @@ textarea { pointer-events: none; cursor: not-allowed; } + + &:focus::placeholder { + opacity: 0.8; + } + + &::placeholder { + color: var(--color-button-text); + opacity: 0.6; + } } -button { - padding: 0.5rem 0; - //outline: none; Bad for accessibility - color: var(--color-button-text); - background-color: var(--color-button-bg); +button, input[type=button] { + cursor: pointer; border: none; - border-radius: var(--size-rounded-control); - - &:focus-visible, - &:hover { - background-color: var(--color-button-bg-hover); - color: var(--color-button-text-hover); - } - - &:active { - background-color: var(--color-button-bg-active); - color: var(--color-button-text-active); - } + outline: none; } kbd { @@ -345,10 +344,13 @@ kbd { font-size: 0.85em !important; } -// @import "vue-select/src/scss/vue-select.scss"; - @import '~assets/styles/highlightjs.scss'; @import '~assets/styles/layout.scss'; @import '~assets/styles/utils.scss'; @import '~assets/styles/components.scss'; @import '~assets/styles/normalize.scss'; + +button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { + outline: .25rem solid #ea80ff; + border-radius: .25rem; +} diff --git a/assets/styles/layout.scss b/assets/styles/layout.scss index 5eec133b2..2b5b4abf2 100644 --- a/assets/styles/layout.scss +++ b/assets/styles/layout.scss @@ -43,6 +43,10 @@ margin: 0 0.75rem; } +.site-header { + margin: 0 0.75rem; +} + @media (min-width: 1024px) { .normal-page { flex-direction: row; @@ -56,10 +60,16 @@ } .normal-page__sidebar { + min-width: 20rem; width: 20rem; } .normal-page__content { width: 60rem; + max-width: 60rem; + } + + .site-header { + margin: 0 auto; } } diff --git a/assets/styles/normalize.scss b/assets/styles/normalize.scss index e61b39b81..192eb9ce4 100644 --- a/assets/styles/normalize.scss +++ b/assets/styles/normalize.scss @@ -165,7 +165,7 @@ textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ - margin: 2px; /* 2 */ + margin: 0; /* 2 */ } /** diff --git a/assets/styles/utils.scss b/assets/styles/utils.scss index 039875109..df98baf2f 100644 --- a/assets/styles/utils.scss +++ b/assets/styles/utils.scss @@ -1,5 +1,5 @@ .hidden { - display: none; + display: none !important; } .w-100 { @@ -13,4 +13,4 @@ body { .text-container p { line-height: 1.3; -} \ No newline at end of file +} diff --git a/components/ui/Avatar.vue b/components/ui/Avatar.vue new file mode 100644 index 000000000..4adc180f6 --- /dev/null +++ b/components/ui/Avatar.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/components/ui/Badge.vue b/components/ui/Badge.vue index ee9ddb693..8ea013c83 100644 --- a/components/ui/Badge.vue +++ b/components/ui/Badge.vue @@ -6,7 +6,7 @@ + + diff --git a/components/ui/ConfirmPopup.vue b/components/ui/ConfirmPopup.vue deleted file mode 100644 index dfc661da9..000000000 --- a/components/ui/ConfirmPopup.vue +++ /dev/null @@ -1,157 +0,0 @@ - - - - - diff --git a/components/ui/CopyCode.vue b/components/ui/CopyCode.vue new file mode 100644 index 000000000..d8b272cc2 --- /dev/null +++ b/components/ui/CopyCode.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/components/ui/SmartFileInput.vue b/components/ui/FileInput.vue similarity index 56% rename from components/ui/SmartFileInput.vue rename to components/ui/FileInput.vue index f249b2fb5..9ae4f80fd 100644 --- a/components/ui/SmartFileInput.vue +++ b/components/ui/FileInput.vue @@ -1,15 +1,17 @@