I am currently implementing a flip-clock in my nuxt project. It seems to be functional, but I am facing an issue with customizing the style as the changes do not seem to take effect.
Here is the HTML snippet:
<template>
<div class="clock">
<div id="flip-start" v-if="flipStart">
<flip-clock @timer-stop="stopTimer"></flip-clock>
</div>
</div>
</template>
And here is the CSS style snippet:
.flip-clock-wrapper {
width: auto;
margin: auto !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100%;
}
.flip-clock-divider,
.flip-clock-label {
color: #7e92b5 !important;
font-size: 25px !important;
}
.flip-clock-wrapper ul {
width: 100%;
height: 100%;
margin: auto !important;
}
I am specifically trying to modify the flip-clock label without success.