Kittens Game Eyestrain Reducer

0-README.md

Kittens Game Eyestrain Reducer

For Kittens Game Ver 1.4.6.1

How to use it

1. Install an extension on your browser that enables custom CSS to be applied on a per-page or per-site basis. (e.g. Stylebot for Chrome).
2. Add the CSS from only one of the following files:
   • For classic theme ONLY: classic-theme.css
   • For inverted, grassy, or sleek theme: other-themes.css

Do not try to put both of them together. If you do, some of the Classic theme stuff will override the other themes.

What it does

• Make faint text (e.g. max resources, disabled buttons) easier to read.
  • To compensate for the fact that disabled buttons may be tougher to distinguish, the changes in border color or background color are exaggerated.
• Maxed out resources may be changed to colors that are easier to read.
  • In some cases, font weight is used to help highlight maxed resources.
  • I couldn't find any shade of orange that was legible for the grassy theme so I changed its maxed out resources to dark green.

What it doesn't do

• The colors of resource names on the left hand side are too difficult to change using CSS.
• I'd love to change the minus buttons (and -5, -25, -all) to use MINUS SIGN '−' (U+2212), but they're too difficult to tweak with CSS.

1-classic-theme.css

/* * * * * * * * * * * * * * * * * *
 * Kittens Game Eyestrain Reducer  *
 * FOR CLASSIC THEME ONLY          *
 * * * * * * * * * * * * * * * * * */

/* Make faint text easier to read */

.maxRes {
    color: #555 !important;
}

.trade-race .ammount,
.attitude {
    color: #555 !important;
}

.disabled div {
    color: #555 !important;
}

#tooltip .effectName,
#tooltip .desc {
    color: #555 !important;
}

/*
  Exaggerate change in button border darkness to compensate for 
  the reduced difference in text darkness.
*/

.btn {
    border-color: rgba(0, 0, 0, 0.8) !important;
}

.btn.disabled {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Use font weight to signal complete resources */

.resLimitWarn {
    color: DarkRed !important;
}

.resLimitNotice {
    color: Tomato !important;
    font-weight: bold !important;
}

1-other-themes.css

/* * * * * * * * * * * * * * * * * *
 * Kittens Game Eyestrain Reducer  *
 * for all themes EXCEPT CLASSIC   *
 * * * * * * * * * * * * * * * * * */

/********************
    DARK THEME
********************/

/* Make faint text easier to read */

.scheme_dark .maxRes {
    color: #888 !important;
}

.scheme_dark .trade-race .ammount,
.scheme_dark .attitude {
    color: #888 !important;
}

.scheme_dark .disabled div {
    color: #888 !important;
}

.scheme_dark a {
    color: #888 !important;
}

/*
  Exaggerate change in button border brightness to compensate for 
  the reduced difference in text brightness.
*/

.scheme_dark .btn.disabled {
    border: solid 1px #604316 !important;
}

.scheme_dark #tooltip .effectName,
.scheme_dark #tooltip .desc {
    color: #999 !important;
}

/*
  This is for "Highlight buildings limited by storage space" which
  looks terrible by default in the dark theme.
  
  Change it to match the color used for missing resources in the tooltip.
*/

.scheme_dark .limited {
    color: #FF3030 !important;
}

/********************
    GRASSY THEME
********************/

/* Make faint text easier to read */

.scheme_grassy .maxRes {
    color: #555 !important;
}

.scheme_grassy .trade-race .ammount,
.scheme_grassy .attitude {
    color: #555 !important;
}

.scheme_grassy .disabled div {
    color: #555 !important;
}

.scheme_grassy #tooltip .effectName, .scheme_grassy #tooltip .desc {
    color: #555 !important;
}

/*
  Exaggerate change in button border darkness to compensate for 
  the reduced difference in text darkness.
*/

.scheme_grassy .btn {
    border-color: rgba(0, 0, 0, 0.8) !important;
}

.scheme_grassy .btn.disabled {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Easier to read dark green on green than orange on green. */

.scheme_grassy .resLimitWarn {
    color: #046a0e !important;
}

.scheme_grassy .resLimitNotice {
    color: #048a0e !important;
    font-weight: bold !important;
}

/********************
    SLEEK THEME
********************/

/* Make faint text easier to read */

.scheme_sleek .maxRes {
    color: #777 !important;
}

.scheme_sleek .trade-race .ammount,
.scheme_sleek .attitude {
    color: #777 !important;
}

.scheme_sleek .disabled div {
    color: #777 !important;
}

/*
  To compensate for the loss of change in button text color,
  exaggerate the change in background color.
*/

.scheme_sleek .btn.modern.disabled {
    background-color: rgba(21, 24, 35, 0.69) !important;
}

/* Make the resource warnings a big bigger */

.scheme_sleek .resLimitWarn:after,
.scheme_sleek .resLimitNotice:after {
    content: "‼" !important;
}

2-classic.png

2-dark.png

2-grassy.png

2-sleek.png