29

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.

  • Mind sharing your size-fixing code? I've think I've just fixed "the worst" (header is wasting far too much space) with this CSS – but I'm very sure that can be improved. – Izzy Mar 18 '15 at 0:03
  • OK, textarea improvements included here. Hint: improvements needed. Might break style on mature sites – sure does here; so take care for which sites you define the second domain block. – Izzy Mar 18 '15 at 13:46
11

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!)

  • Thanks for digging this all up! When you get a chance, can you figure out how to make the "answered 3 hours ago by Foo 101" part bigger? I was able to get the "answered"/"modified"/etc + timestamp with .started-link, but I can't figure out how to get the user and rep from what I'm seeing in the inspector. (Utter novice with the inspector...) – Monica Cellio Mar 17 '15 at 19:17
  • @MonicaCellio My workflow is to find the element that needs changing, then looking at the tree of HTML elements to ensure I'm picking the right one. As I'm doing that, I go up and down the tree and look at the CSS rules over on the right side of the inspector. Then I make adjustments, with the selector just being a straight copy of the one on the right of the inspector (excepting the tweaks to make the sidebar questions not get bolder). Then it's alot of guess and check. Did I pick the right element? How should I adjust the color? – Keen Mar 17 '15 at 20:10
  • Keen, thanks for the tutorial, and the update! – Monica Cellio Mar 17 '15 at 20:12
  • 1
    @MonicaCellio I wrote a more thorough tutorial over on SuperUser, which you might find useful. – Keen Mar 17 '15 at 20:14
  • 1
    A bit of a tangent, but if anybody else finds the orange flags with white text to be hard to read, this'll fix it: .supernovabg.mod-flag-indicator { background-color: yellow !important; color: black !important; } – Monica Cellio Mar 18 '15 at 3:31
7

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
  • Since you're talking about blue I'm assuming you didn't do this on a meta, which I mentioned as especially problematic? – Monica Cellio Mar 17 '15 at 22:20
  • 1
    I'd like to add that the line height of code blocks has been reduced significantly. I haven't made up my mind yet if this improves or worsens readability for actual code, but it improves ASCII art infinitely. :D (Being mostly active on CodeGolf.SE, this is a good thing to me, but probably useless across most of the network. ;)) – Martin Ender Mar 17 '15 at 22:29
  • @MonicaCellio Yes, I looked at a main site. I also happen to have an old open tab from a beta meta, and I don't see anything specifically problematic there. The main text font is the same as on main, isn't it? Visited vs nonvisited links used to have a barely-noticeable color difference, and now have a barely-noticeable color difference. – Gilles Mar 17 '15 at 22:59
  • 1
    @Gilles on the main question list (not an individual Q), the new style has a barely-perceptible difference in grays between visited & unvisited links. (I don't mean the two oranges that you see for links in posts and comments; I mean the question titles.) Fortunately for me, Keen showed me how to adjust. I couldn't do a side-by-side comparison, but I refreshed a browser tab this morning and got hit with "wow, that's hard to read!". Maybe it's Firefox, my monitor, or the larger fonts I'm already using -- don't know & I'm not saying the new is bad; I just couldn't read it, hence support. – Monica Cellio Mar 17 '15 at 23:17
  • @MonicaCellio Ah, ok. I haven't looked at the main page side by side, but the new visited/not-visited contrast could indeed stand a lot of improvement, both on main and on meta (and on many non-beta sites too). – Gilles Mar 17 '15 at 23:57
6

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.

  • How are those orange flags with small white text working for you? I figured out how to fix that; see comment on Keen's answer. – Monica Cellio Mar 18 '15 at 3:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .