From 56abab8390a50b026433793befc67587c08d5a21 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 25 Jan 2023 18:41:15 +1100
Subject: Tweak styling

Highlight current timeline when there are multiple
Make 'From Wikipedia' info-modal label grayer
make horizontal tick labels closer to mainline
---
 src/components/TimeLine.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/TimeLine.vue')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 18ae107..e767074 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -2,7 +2,8 @@
 <div class="relative overflow-hidden z-0" ref="rootRef"
 	@pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp"
 	@pointercancel="onPointerUp" @pointerout="onPointerUp" @pointerleave="onPointerUp"
-	@wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel">
+	@wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel"
+	:style="{backgroundColor: !current && closeable ? 'rgba(0,0,0,0.3)' : store.color.bg}">
 
 	<!-- Event density indicators -->
 	<template v-if="store.showEventCounts">
@@ -229,7 +230,7 @@ function initScale(){
 
 // ========== Tick data ==========
 
-const tickLabelMargin = computed(() => vert.value ? 20 : 30); // Distance from label to mainline
+const tickLabelMargin = computed(() => vert.value ? 20 : 18); // Distance from label to mainline
 const tickLabelSpan = computed( // Leftover breadth in half-mainline-area for tick label
 	() => store.mainlineBreadth - store.largeTickLen / 2 - tickLabelMargin.value);
 
-- 
cgit v1.2.3

