diff options
Diffstat (limited to 'packages/frontend/src/components/MkInstanceCardMini.vue')
| -rw-r--r-- | packages/frontend/src/components/MkInstanceCardMini.vue | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue index de726e3aa4..e384b7a0bc 100644 --- a/packages/frontend/src/components/MkInstanceCardMini.vue +++ b/packages/frontend/src/components/MkInstanceCardMini.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]"> +<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended, blue: instance.isSilenced }]"> <img class="icon" :src="getInstanceIcon(instance)" alt="" loading="lazy"/> <div class="body"> <span class="host">{{ instance.name ?? instance.host }}</span> @@ -89,6 +89,12 @@ function getInstanceIcon(instance): string { height: 30px; } + &:global(.blue) { + --c: rgba(0, 42, 255, 0.15); + background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%); + background-size: 16px 16px; + } + &:global(.yellow) { --c: rgb(255 196 0 / 15%); background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%); |