diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-21 20:06:29 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-21 20:26:01 +1100 |
| commit | 4404b650d136382097aba6f471b80cc96c4bd787 (patch) | |
| tree | 0ebf921488f362a0575fff77630e789b7cca7a57 /src/components/BaseLine.vue | |
| parent | ac4bb9210616343bdca0d2f7e1620e66d15f1c95 (diff) | |
Adjust coloring and spacing
Diffstat (limited to 'src/components/BaseLine.vue')
| -rw-r--r-- | src/components/BaseLine.vue | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index 53ab6bd..f8227dc 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -4,6 +4,7 @@ <!-- Time periods --> <div v-for="p in periods" :key="p.label" class="relative" :style="periodStyles(p)"> <div :style="labelStyles">{{p.label}}</div> + <!-- Fade-out div for overflowing text --> <div v-if="props.vert" class="absolute bottom-0 w-full h-6" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1))"></div> </div> @@ -86,7 +87,7 @@ function periodStyles(period: Period){ const labelStyles = computed((): Record<string, string> => ({ transform: props.vert ? 'rotate(90deg) translate(50%, 0)' : 'none', whiteSpace: 'nowrap', - width: props.vert ? '40px' : 'auto', + width: props.vert ? '40px' : 'auto', // Chose vertical value to roughly match height in horizontal mode padding: props.vert ? '0' : '4px', })); @@ -140,11 +141,10 @@ function spanStyles(stateIdx: number){ return { ...styles, transition: skipTransition.value ? 'none' : 'all 300ms ease-out', - color: 'black', backgroundColor: store.color.alt, opacity: 0.6, borderWidth: '1px', - borderColor: store.color.bg, + borderColor: store.color.bgDark2, }; } </script> |