This repository has been archived on 2024-03-13. You can view files and clone it, but cannot push or open issues or pull requests.
timekeeper/components/TimeHeader.vue

68 lines
1.5 KiB
Vue
Raw Normal View History

<template>
<header
2022-01-15 07:13:20 +00:00
class="grid grid-cols-3 w-full font-semibold h-10 m-auto relative rounded-bl-full rounded-br-full px-4 z-10"
:class="colorClasses"
>
2022-01-10 10:15:23 +00:00
<div class="text-center pt-2 pb-1 border-r border-gray-600 select-none">
{{ $store.getters.gameMonth }}
{{ Math.floor($store.state.gameDate / 12) }}
</div>
<div
2022-01-10 10:15:23 +00:00
class="text-center pt-2 pb-1 border-r border-gray-600 relative select-none"
>
<progress
class="absolute top-0 left-0 right-0 h-1 w-full"
:max="$store.state.playerAgeMax"
:value="$store.state.playerAge"
/>
{{ $store.getters.ageText }}
</div>
<div
class="text-center pt-2 pb-1 select-none"
v-text="$store.getters.ageMaxText"
/>
</header>
</template>
<script>
export default {
computed: {
colorClasses() {
const { lightColor, darkColor } = this.$store.getters.activeTab
return `bg-${darkColor} text-${lightColor}`
},
},
}
</script>
<style scoped>
header {
min-width: 18rem;
transition: background-color 2000ms, color 2000ms;
2022-01-13 21:02:43 +00:00
font-family: 'Roboto Slab', serif;
}
@media (min-width: 768px) {
header {
width: 32rem;
}
}
2022-01-10 10:15:23 +00:00
/* progress for all browsers */
progress::-webkit-progress-bar {
background-color: rgba(255, 255, 255, 0.1);
width: 100%;
}
progress {
background-color: rgba(255, 255, 255, 0.1);
2022-01-10 10:15:23 +00:00
color: currentColor;
}
progress::-webkit-progress-value {
background-color: currentColor;
}
progress::-moz-progress-bar {
background-color: currentColor;
}
</style>