natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

style: 💄 ticker improvements 

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>
<div class="hpaizdrt" :style="bg">
<div class="hpaizdrt" ref="ticker" :style="bg">
<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
<span class="name">{{ instance.name }}</span>
</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
const instance = props.instance ?? {
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
};
const themeColor = instance.themeColor ?? '#777777';
const computedStyle = getComputedStyle(document.documentElement);
const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
const bg = {
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}11)`,
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
};
function getInstanceIcon(instance): string {
@ -38,29 +41,36 @@ function getInstanceIcon(instance): string {
<style lang="scss" scoped>
.hpaizdrt {
$height: 1.1rem;
height: $height;
display: flex;
align-items: center;
height: 1.1em;
justify-self: flex-end;
padding: .1em .7em;
padding: .2em .4em;
border-radius: 100px;
font-size: .8em;
text-shadow: 0 2px 2px var(--shadow);
overflow: hidden;
.header > .body & {
width: max-content;
max-width: 100%;
}
> .icon {
height: 100%;
border-radius: 0.3rem;
}
> .name {
display: none;
margin-left: 4px;
line-height: $height;
font-size: 0.9em;
font-size: 0.85em;
vertical-align: top;
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);
.article > .main &, .header > .body & {
display: unset;
}
}
}
</style>