How to change font color on text flipclock.js - flipclock

Question

I'm having some issues trying to change the text, hours, days, months, years, into the color green, I'm using flipclock.js, does anyone know how to change it, if so could you guide me in the right direction.

Answer 1

The question is already answered, but I think this can be useful for other people:
Simple CSS to invert FlipClock.js default colors to white background and black text:
.flip-clock-wrapper ul {
background: #fff;
}
.flip-clock-wrapper ul li a div.up:after {
background-color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
.flip-clock-wrapper ul li a div div.inn {
color: #111;
text-shadow: 0 1px 1px #555;
background-color: #ddd;
}

Answer 2

If your using new version its on line around 225 (css file)
.flip-clock-divider .flip-clock-label {
color: green; }

Answer 3

In case you are looking for advanced solution to change other colors here is an solution posted already here.
This is a solution adapted from one of the repo's closed issue (unsolved). It seems that the dev's promised a new API but that was more than 1 year ago.
It's not perfect as there are some issues when setting $clock-flip-font-size: 120px. Also, when minutes are being displayed as 3 digits, the "Minutes" text is not centered.
Here is the codepen: https://codepen.io/jimasun/pen/PzAqVw/
//
// ------------------------- FlipClock
//
$clock-flip-font-size: 120px
$clock-flip-border-radius: 8px
$clock-digit-gap: 20px
$clock-dot-size: 20px
$clock-height: ($clock-flip-font-size * 1.2)
$clock-flip-width: ($clock-flip-font-size * 0.8)
$clock-flip-margin: ($clock-digit-gap / 2)
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin))
$clock-flip-bg: #607D8B
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7)
$clock-flip-font-color: #F44336
$clock-flip-font-shadow: 0 1px 2px #000
.countdown-wrapper
left: 50%
position: absolute
top: 50%
transform: translate(-50%, -50%)
.countdown.flip-clock-wrapper ul
height: $clock-height
margin: 0 $clock-flip-margin
width: $clock-flip-width
box-shadow: $clock-flip-shadow
.countdown.flip-clock-wrapper ul li
line-height: $clock-height
.countdown.flip-clock-wrapper ul li a div div.inn
background-color: $clock-flip-bg
color: $clock-flip-font-color
font-size: $clock-flip-font-size
text-shadow: $clock-flip-font-shadow
.countdown.flip-clock-wrapper ul,
.countdown.flip-clock-wrapper ul li a div div.inn
border-radius: $clock-flip-border-radius
.countdown.flip-clock-wrapper ul li a div.down
border-bottom-left-radius: $clock-flip-border-radius
border-bottom-right-radius: $clock-flip-border-radius
.countdown.flip-clock-wrapper ul li a div.up:after
top: (($clock-height / 2) - 1px)
.countdown .flip-clock-dot.top
top: ($clock-height / 2 - $clock-flip-font-size * 0.2 - $clock-dot-size / 2)
.countdown .flip-clock-dot.bottom
top: ($clock-height / 2 + $clock-flip-font-size * 0.2 - $clock-dot-size / 2)
.countdown .flip-clock-dot
height: $clock-dot-size
left: $clock-dot-size
width: $clock-dot-size
background: $clock-flip-bg
.countdown .flip-clock-divider
height: $clock-height
width: ($clock-dot-size * 3)
&:first-child
width: 0
.countdown .flip-clock-divider.seconds .flip-clock-label,
.countdown .flip-clock-divider.minutes .flip-clock-label
right: -1 * $clock-flip-section-width
.countdown .flip-clock-divider .flip-clock-label
color: $clock-flip-font-color
font-size: $clock-flip-font-size / 4
width: 2 * $clock-flip-width + 4 * $clock-flip-margin
//
// ------------------------- FlipClock
//