diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-11 14:52:04 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-11 14:52:04 +0900 |
| commit | d185785f20a2c3e58054fd61afd94dd05ba0b207 (patch) | |
| tree | 328551ec9cfa4864ce36d5b914d8b440c582ef1f /packages/frontend/src/components/MkFeatureBanner.vue | |
| parent | 🎨 (diff) | |
| download | misskey-d185785f20a2c3e58054fd61afd94dd05ba0b207.tar.gz misskey-d185785f20a2c3e58054fd61afd94dd05ba0b207.tar.bz2 misskey-d185785f20a2c3e58054fd61afd94dd05ba0b207.zip | |
enhance(frontend): improve settings page
Diffstat (limited to 'packages/frontend/src/components/MkFeatureBanner.vue')
| -rw-r--r-- | packages/frontend/src/components/MkFeatureBanner.vue | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkFeatureBanner.vue b/packages/frontend/src/components/MkFeatureBanner.vue new file mode 100644 index 0000000000..e990ffc8f0 --- /dev/null +++ b/packages/frontend/src/components/MkFeatureBanner.vue @@ -0,0 +1,43 @@ +<!-- +SPDX-FileCopyrightText: syuilo and other misskey contributors +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div v-panel :class="$style.root"> + <img :class="$style.img" :src="icon"/> + <div :class="$style.text"> + <slot></slot> + </div> +</div> +</template> + +<script setup lang="ts"> +withDefaults(defineProps<{ + icon: string; + color: string; +}>(), { +}); +</script> + +<style module lang="scss"> +.root { + padding: 20px 24px; + text-align: center; + border-radius: var(--MI-radius); + background: linear-gradient(180deg, color(from v-bind(color) srgb r g b / 0.1), color(from v-bind(color) srgb r g b / 0)); +} + +.img { + display: block; + margin: 0 auto; + width: 40px; + aspect-ratio: 1; +} + +.text { + margin-top: 12px; + font-size: 85%; + mix-blend-mode: luminosity; +} +</style> |