New beta style is much harder on my eyes; looking for CSS overrides to fix

Question

The new beta theme has made some changes to text styling that I find much harder on my eyes. My vision isn't that great to begin with and beta sites, particularly metas, are a lot harder for me to read now. I moderate two beta sites, so access to meta is pretty important to me. (In case it matters, I'm using Firefox.)

I don't have an unrefreshed browser tab to be able to do direct comparisons, but here is what I am seeing: the text, (titles, body, vote counts, but not comments) is "lighter" -- which might be color, weight, face, or who knows what else. (A CSS whiz I am not.) Also, visited questions do not have a visible color difference on the question list on meta at all that I can see, and it's very subtle on main.

I'm willing to use Stylish to override the CSS (I do it already to fix sizes), but I don't know what CSS to override because I don't know what it used to be. I am looking for a Stylish override (or enough information to construct one) that will make the text look the way it used to. I was able to read that.

Answer 1

Here's a few things that could help. Let me know areas that need tweaking, and I can further refine it.

To use, create a new style in Stylish for a beta site, which (if you're using Firefox) creates an empty style with a "@-moz-document domain(BETA URL)" line at the top. Paste the below into the curly braces that follow that. You can make the style apply to other beta sites via a comma-separated list of "domain()" entries (e.g. @-moz-document domain(BETA URL), domain(ANOTHER BETA URL), domain(ONE MORE BETA URL) ). There's a way to accomplish something similar in Stylish for Chrome, but I'm not familiar with it.

  /* Darken votes text */
  .statscontainer .votes, .vote, .vote span, .vote-count-post strong {
    color: black !important;
  }
  .answered, .answered strong, .answered-accepted, .answered-accepted .mini-counts, .answered-accepted .mini-counts span{
    color: DarkGreen !important;
  }
  .narrow .votes, .narrow .mini-counts, .narrow .views {
    color: #222 !important;
  }

  /* Make question titles bolder. */
  #question-mini-list .question-hyperlink, #question-header .question-hyperlink, #questions .question-hyperlink {
    font-weight: bolder !important;
  }

  /* Darken question excerpt */
  .excerpt {
    color: #222 !important;
  }
  /* Darken tag text */
  .post-tag {
    color: #354044 !important;
  }

  /* Darken last-modified user */
  .started-link, .user-details, .started .reputation-score, .badgecount {
    color: #444 !important;
  }
  .started a:not(.started-link), .started .mod-flair {
    color: #1A64BF !important; /*Makes a deeper blue*/
  }

I used aviation.SE for creating this. AFAIK all beta sites use the same CSS, so it should work on all of them.

To override the link color in the question list on meta, add another style like above but for meta.site1, meta.site2, etc with the following:

#question-mini-list .question-hyperlink:visited, #question-header .question-hyperlink:visited, #questions .question-hyperlink:visited {
  color: #777777 !important;
}

The style element is the same as above with ":visited" appended to .question-hyperlink. (Thanks Keen for pointing this out in chat!)

Answer 2

I'm going to have to agree, readability went down in several aspects. I don't have a way to make a direct comparison either, but too many design elements are just too subtle. I find I can see what's going under ideal lighting conditions—square on with my better LED panels in a dimly lit room—but changing any of those factors starts making it hard to see. In particular the sunlight I usually let into my office in the day wreaks havoc on it and I can no longer easily discern what's what. The contrast is between various elements is just to low and too many things are too light.

Answer 3

I'm going to hijack this thread to do a comparison of the two styles on a question page. As it happens, some of your impressions are not validated by a direct comparison — in particular, I don't see any way in which the main text is lighter (maybe different platforms used or now use different fonts?).

I happened to have a tab open from a few days ago, so I compared the old (rev 2015.3.13.2386, CSS f6eec6262290) and new (rev 2015.3.17.2391, CSS fd3ea6a99fc5) appearances (Chrome 40 on Linux). I haven't tried to read the CSS, I'm just going by visual comparison.

The name of the current section at the top is now in bold, which is a convenient discreet clue to navigation. The title bar is on a darker light blue background for some reason.

The question title is now a a lot better contrasted, but no longer bold. This makes the title less wide, so easier to read at a glance. Because of the better contrast (significantly darker blue on white), the title is about as emphasized as it used to be, and it's easier to read.

The new main text font is very slightly larger. As always this makes it slightly easier to read at the cost of cramming less text per square inch.

The vote buttons are a little larger, and the score is less bold. I didn't need the larger vote buttons on the desktop website (whereas I really wish the vote buttons were larger in the mobile app: I keep missing them on my phone). The favorite button now looks inert, it was better before when it looked like something you could click.

The tags are larger. Why?

“Add a comment” has the link color. It used to have the secondary button color. Since this is not a link that opens another web page, secondary button is what it should be. (Or else all secondary buttons — “share”, “edit”, …, should use the same color as links.)

The buttons above the edit box are now markedly larger. I don't see the point (but then again I never use them). They're now in black and white, I think the old colors made them more distinctive. In particular the help button could stand with being something more visible than the new washed out gray. I still can't figure out what some of the buttons do without looking at the tooltip.

The text in the edit box is now markedly larger. Why? I was happy with the old font size.

The larger font combined with a slightly narrower box makes less text fit in the answer preview.

“Asked <date>” and “viewed N times” on the right are in a different font. They're less emphasized, which suits secondary information.

The related links on the right are now in link color. That's better.

There are a few tweaks in the small type at the bottom and to the meta box. I don't care what happens to the bits no one pays attention to.

Summary:

• Top sections: nice new feature, but the old background was better
• Title: significant gain, no real cost
• Main text: neutral
• Vote/favorite buttons: slight regression
• Tags: why are they larger?
• Add comment link: slight regression
• Edit buttons: slight regression
• Edit box: larger font, for better or for worse
• Answer preview: slight regression
• Asked/viewed numbers: improvement
• Related links: improvement