style: 💄 ticker improvements

premature partial from #9415

packages/client/src/components/MkInstanceTicker.vue

@@ -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>