65 lines
1.1 KiB
Vue
65 lines
1.1 KiB
Vue
<template>
|
|
<div class="outer center" :class="threshold.calc(threshold.value).toString().toLocaleLowerCase()">
|
|
<div class="inner">
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Threshold } from '~/classes/Threshold';
|
|
|
|
defineProps<{
|
|
threshold: Threshold
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.outer {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border-radius: 0.75rem;
|
|
user-select: none;
|
|
}
|
|
.inner {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
border-radius: 0.5rem;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
.outer.green {
|
|
background-color: rgb(139, 255, 139);
|
|
}
|
|
.outer.green .inner {
|
|
background-color: #11cc11;
|
|
}
|
|
|
|
.outer.orange {
|
|
background-color: rgb(255, 192, 151);
|
|
}
|
|
.outer.orange .inner {
|
|
background-color: rgb(255, 132, 31);
|
|
}
|
|
|
|
.outer.red {
|
|
background-color: rgb(255, 130, 130);
|
|
}
|
|
.outer.red .inner {
|
|
background-color: rgb(219, 12, 12);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style> |