diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-24 21:32:46 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-03-24 21:32:46 +0900 |
| commit | f1f24e39d2df3135493e2c2087230b428e2d02b7 (patch) | |
| tree | a5ae0e9d2cf810649b2f4e08ef4d00ce7ea91dc9 /packages/frontend/src/components/MkPolkadots.vue | |
| parent | fix(frontend): fix broken styles (diff) | |
| download | misskey-f1f24e39d2df3135493e2c2087230b428e2d02b7.tar.gz misskey-f1f24e39d2df3135493e2c2087230b428e2d02b7.tar.bz2 misskey-f1f24e39d2df3135493e2c2087230b428e2d02b7.zip | |
Feat: Chat (#15686)
* wip
* wip
* wip
* wip
* wip
* wip
* Update types.ts
* Create 1742203321812-chat.js
* wip
* wip
* Update room.vue
* Update home.vue
* Update home.vue
* Update ja-JP.yml
* Update index.d.ts
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* Update CHANGELOG.md
* wip
* Update home.vue
* clean up
* Update misskey-js.api.md
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* lint fixes
* lint
* Update UserEntityService.ts
* search
* wip
* 🎨
* wip
* Update home.ownedRooms.vue
* wip
* Update CHANGELOG.md
* Update style.scss
* wip
* improve performance
* improve performance
* Update timeline.test.ts
Diffstat (limited to 'packages/frontend/src/components/MkPolkadots.vue')
| -rw-r--r-- | packages/frontend/src/components/MkPolkadots.vue | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkPolkadots.vue b/packages/frontend/src/components/MkPolkadots.vue new file mode 100644 index 0000000000..285c4d0b79 --- /dev/null +++ b/packages/frontend/src/components/MkPolkadots.vue @@ -0,0 +1,40 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div :class="[$style.root, accented ? $style.accented : null]"></div> +</template> + +<script lang="ts" setup> +const props = withDefaults(defineProps<{ + accented?: boolean; +}>(), { + accented: false, +}); +</script> + +<style lang="scss" module> +.root { + --c: var(--MI_THEME-divider); + + &.accented { + --c: var(--MI_THEME-accent); + opacity: 0.5; + } + + --dot-size: 2px; + --gap-size: 40px; + --offset: calc(var(--gap-size) / 2); + + height: 200px; + margin-bottom: -200px; + + background-image: linear-gradient(transparent 60%, transparent 100%), radial-gradient(var(--c) var(--dot-size), transparent var(--dot-size)), radial-gradient(var(--c) var(--dot-size), transparent var(--dot-size)); + background-position: 0 0, 0 0, var(--offset) var(--offset); + background-size: 100% 100%, var(--gap-size) var(--gap-size), var(--gap-size) var(--gap-size); + mask-image: linear-gradient(to bottom, black 0%, transparent 100%); + pointer-events: none; +} +</style> |