diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
| commit | 9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch) | |
| tree | ce5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkInstanceTicker.vue | |
| parent | wip: retention for dashboard (diff) | |
| download | misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2 misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip | |
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/MkInstanceTicker.vue')
| -rw-r--r-- | packages/client/src/components/MkInstanceTicker.vue | 80 |
1 files changed, 0 insertions, 80 deletions
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue deleted file mode 100644 index 646172fe8d..0000000000 --- a/packages/client/src/components/MkInstanceTicker.vue +++ /dev/null @@ -1,80 +0,0 @@ -<template> -<div :class="$style.root" :style="bg"> - <img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/> - <div :class="$style.name">{{ instance.name }}</div> -</div> -</template> - -<script lang="ts" setup> -import { } from 'vue'; -import { instanceName } from '@/config'; -import { instance as Instance } from '@/instance'; -import { getProxiedImageUrlNullable } from '@/scripts/media-proxy'; - -const props = defineProps<{ - instance?: { - faviconUrl?: string - name: string - themeColor?: string - } -}>(); - -// if no instance data is given, this is for the local instance -const instance = props.instance ?? { - name: instanceName, - themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content, -}; - -const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico'); - -const themeColor = instance.themeColor ?? '#777777'; - -const bg = { - background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`, -}; -</script> - -<style lang="scss" module> -$height: 2ex; - -.root { - display: flex; - align-items: center; - height: $height; - border-radius: 4px 0 0 4px; - overflow: clip; - color: #fff; - text-shadow: /* .866 ≈ sin(60deg) */ - 1px 0 1px #000, - .866px .5px 1px #000, - .5px .866px 1px #000, - 0 1px 1px #000, - -.5px .866px 1px #000, - -.866px .5px 1px #000, - -1px 0 1px #000, - -.866px -.5px 1px #000, - -.5px -.866px 1px #000, - 0 -1px 1px #000, - .5px -.866px 1px #000, - .866px -.5px 1px #000; - mask-image: linear-gradient(90deg, - rgb(0,0,0), - rgb(0,0,0) calc(100% - 16px), - rgba(0,0,0,0) 100% - ); -} - -.icon { - height: $height; - flex-shrink: 0; -} - -.name { - margin-left: 4px; - line-height: 1; - font-size: 0.9em; - font-weight: bold; - white-space: nowrap; - overflow: visible; -} -</style> |