HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

style: 💄 ticker improvements

Browse source 
premature partial from #9415
This commit is contained in:
ThatOneCalculator 2023-01-24 19:20:38 -08:00
parent ce3308a290
commit ed85d065b0
No known key found for this signature in database
GPG key ID: 8703CACD01000000
1 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/client/src/components/MkInstanceTicker.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="hpaizdrt" :style="bg"> <div class="hpaizdrt" ref="ticker" :style="bg">
<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/> <img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
<span class="name">{{ instance.name }}</span> <span class="name">{{ instance.name }}</span>
</div> </div>
@ -18,6 +18,8 @@ const props = defineProps<{
} }
}>(); }>();
let ticker = $ref<HTMLElement | null>(null);
// if no instance data is given, this is for the local instance // if no instance data is given, this is for the local instance
const instance = props.instance ?? { const instance = props.instance ?? {
faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico', faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
@ -25,10 +27,11 @@ const instance = props.instance ?? {
themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
}; };
const themeColor = instance.themeColor ?? '#777777'; const computedStyle = getComputedStyle(document.documentElement);
const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
const bg = { const bg = {
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}11)`, background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
}; };
function getInstanceIcon(instance): string { function getInstanceIcon(instance): string {
@ -38,29 +41,36 @@ function getInstanceIcon(instance): string {
<style lang="scss" scoped> <style lang="scss" scoped>
.hpaizdrt { .hpaizdrt {
$height: 1.1rem; display: flex;
align-items: center;
height: $height; height: 1.1em;
justify-self: flex-end; justify-self: flex-end;
padding: .1em .7em; padding: .2em .4em;
border-radius: 100px; border-radius: 100px;
font-size: .8em; font-size: .8em;
text-shadow: 0 2px 2px var(--shadow); text-shadow: 0 2px 2px var(--shadow);
overflow: hidden; overflow: hidden;
.header > .body & {
width: max-content;
max-width: 100%;
}
> .icon { > .icon {
height: 100%; height: 100%;
border-radius: 0.3rem;
} }
> .name { > .name {
display: none;
margin-left: 4px; margin-left: 4px;
line-height: $height; font-size: 0.85em;
font-size: 0.9em;
vertical-align: top; vertical-align: top;
font-weight: bold; font-weight: bold;
text-overflow: clip; text-overflow: ellipsis;
white-space: nowrap;
text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg); text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
.article > .main &, .header > .body & {
display: unset;
}
} }
} }
</style> </style>