barkey/packages/frontend/src/components/MkPolkadots.vue
syuilo f1f24e39d2
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
2025-03-24 21:32:46 +09:00

40 lines
1 KiB
Vue

<!--
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>