b3by / atom-clock

Place a clock or calendar in your status bar

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom font size and color

2manyvcos opened this issue · comments

commented

Hi there,

I would love an option for setting the font size and text color.
What do you think about this?

commented

You can do this already by editing your stylesheet and using the .atom-clock selector. For example:

.atom-clock {
  color: red;
  font-size: 2rem;
  font-family: "Comic Sans MS";
}

screen shot 2017-06-23 at 21 04 41

If you want it to fit into your UI theme then if you import ui-variables in your stylesheet you can then use the colours set by your theme which you can see in your Styleguide (Packages → Styleguide → Show). For example

@import 'ui-variables';

.atom-clock {
  color: @text-color-success;
}

screen shot 2017-06-23 at 17 31 58

commented

Awesome!
Thanks for your help. 👍

It's possible to customize the tooltip?
Thx.

commented

Currently it is not possible to customise the style of the tooltip as atom-clock does not set a custom class on the tooltip however according to the Atom docs this is something which could be added. I'll add it later and submit a pull request.

Oki, thx.

commented

That's been added now so you can style the tooltip text however you want by using the .atom-clock-tooltip > .tooltip-inner selector. See the pull request for more info.