New "stock theme" roll out

Question

We are rolling out the new "stock theme" to the Stack Exchange network. You all are the lucky first site to get the new theme. It is now live.

What new theme?

If you're like, "What the heck are you talking about?", then you should read the Meta Stack Exchange post entitled Rollout of new network site themes (and maybe the posts it links to for the full background).

How does Code Golf get its own custom theme?

One of the goals of this project is to make customizing sites easier so that all sites can have a personalized look (within limits). First we need to convert all current sites to the new unified theme format. Once that is done we will announce the timing and process to roll out personalized themes to sites using the stock theme. We are hopeful this will happen later this year.

Your help needed

Please help us look for issues/bugs. This theme will ultimately be rolled out to 100+ sites. So, it is important to do this trial to make sure things are working well. Please post any issues you see as answers below.

Answer 1

status-completed

Voting colors on main site very difficult to distinguish

I have extremely light-sensitive eyes, to the point that I sometimes even need to wear sunglasses indoors. As a result, I have my monitor brightness set to absolute minimum. On this setting, it's extremely difficult to distinguish between "voted on this" vs "not voted on this." The two colors are almost the same.

Raising the brightness (to an uncomfortable level), I can see that the "activated" vote button is a slightly blue-ish shade of grey compared to the unactivated vote button, but the difference is negligible.

Can this be updated to present a bit more contrast between the two states, like is done on the Meta design?

Answer 2

status-completed

The box to enter a comment has a red border

Screenshot from meta:

This makes me feel like I'm doing something wrong. I think the blue highlight is enough, similar to how it looks when editing an answer.

Answer 3

status-completed

Scrollbars appear to the right of Mathjax $$-style blocks

^{Image taken from How much is my dice matrix worth?.}

^{Image taken from Calculate the number of primes up to n and provided by DJMcMayhem.}

This happens at least on the Chrome browser for Windows.

Answer 4

status-completed

Badge icons are missing

On the Main site:

On Meta:

Answer 5

status-review I've logged a bug for this, but it is unrelated to the theme change.

If many tags are added to a question, tags scroll away and never come back

If too many tags are added to a question to fit in the tag box, the tags start moving away to the left, rendering them unreachable:

Moreover, if the visible tags are deleted, the tags that moved away to the left don't come back:

Similar problems exist with resizing the window while adding tags - it's easy to end up in a state where you can barely see any tags, even though there's plenty of room.

If you delete the last visible tag, the rest do finally scroll back, but it should scroll back long before that.

Answer 6

status-completed

Meta site colors low contrast

The meta label on the meta site has very low contrast which makes it difficult to read in glare or for those who have harder time seeing low-contrast text. Also it feels unnatural with "meta" being so close to the other text, not sure if by design but 16px seems to make everything feel more natural.

Answer 7

status-review

Search bar font shrinks unnecessarily

As I shrink the horizontal width of the window, when the right navigation bar is removed the font size of the text in the search bar changes abruptly, without the size of the search box itself changing. It goes from this:

To this:

and as far as I can tell there's no reason for the font size to change at all, because the search box size isn't changing.

Answer 8

status-planned we are working on updating all the right side bar elements to use Stacks, our new design system

Inconsistent shadows on yellow boxes

This yellow-box has a shadow & radius on the "Write Question" page:

however a similar yellow box does not:

this feels awkward when navigating between the pages as the two similar elements have different styles.

Answer 9

status-planned

White indentation blocks in the post editor tips

Again, this might be intentional. But even if it is, it gives the feeling that it's a rendering bug -- and doesn't help counting the number of spaces anyway.

Answer 10

status-bydesign Hiding of left nav is a feature of being signed in.

"Global" left nav hiding does not apply to sites not joined

I have hidden the left nav in my preferences on PPCG. (As I need a large font for my eyes, it is (so far) the only issue with the new theme I've found unacceptable.) This setting is supposed to be global, and indeed seems to work automatically for StackOverflow where I have already joined.

However, it does not work for me on Meta StackExchange - the left nav is still shown there. I assume the difference is that I have never joined that site.

Joining to test... Yep, that was it, now it's gone.

This may be easily fixed for a single site, but I often follow links in Hot Network Questions to sites I don't otherwise use, so I foresee that this would become annoying once the new themes start getting rolled out to all sites.

EDIT: Well, that is a disappointment. I don't generally frequent sites that ask me to register just to make their content bearable to read, which means this will discourage me from visiting other SE sites than those I am already registered at. Note that I am signed in, just not to every single site individually. And those sites still show the top menu bar with my account's notices etc., so it's not like you couldn't somehow get hold of my global preferences.

Answer 11

status-bydesign

Border-radius on badge progress bar

Is the top-right/bottom-right border radius on the badge progress bar intentional, or is it accidental? It does look weird to me.

(I will however delete this post if it is intentional, as it is not the right place to talk about looks & feels.)

Answer 12

Tags search page is missing distinguishing features

Tag synonyms are indistinguishable from tags with no usage guidelines and 0-1 answers. Moreover, tags with 0 answers are indistinguishable from tags with 1 answer. On this page, compare anagrams, array and birthday-problem. anagrams is a synonym for the very popular tag permutations. array has no questions at all, which raises the question of why it's on the search page at all. And birthday-problem was just created, and so has 1 question and no usage guidelines.

Also, on any tags with no usage guidelines, the "n asked this year" information is missing. For instance, on page 2, cards has had 2 questions asked this year, but that information is not displayed.

Answer 13

status-completed

I have poor eyesight, and as a result I browse Stack Exchange sites at 150% zoom level in Chrome. On most sites, I see the main content to the left, and to the right is useful stuff such as related questions, "featured on meta" and the hot network questions.

In this new theme, because of my zoom level, all that stuff is pushed to the bottom of the page. This seems to be for the sake of fitting the sidebar onto my screen, but (at least currently) its content is vastly less useful than the right-hand column that it's displacing. It would be much better for the sidebar to disappear before the right-hand column does.

Answer 14

status-planned This is a temporary artifact due to responsive NOT being ready for all pages. So, on a smaller viewport (like a tablet) the left nav will auto hide on some pages (responsive ones) but not others (non-responsive ones). This will be fully addressed when we make all pages responsive, but that will take some time.

There is a curious inconsistency whereby on my tablet the left navigation shows on some pages (e.g. my user page) but not on others (e.g. the homepage).

User page: note the left navigation:

Home page: note the absence of left navigation:

This leaves the homepage apparently with less functionality than it had in the previous design. It turns out that it's still possible to e.g. list questions by criteria other than "Top", but it requires finding which of three "hamburger" icons (circled in screenshot above) opens the menu with that functionality, which I do not consider good discoverability.

I regard this as a removal of useful functionality: previously it took one click to get to a list of questions sorted by Newest, but now it takes at least two, and one of them is not discoverable.

Answer 15

status-declined Fixing existing MathJax issues is out of scope for the themes work.

MathJax delimiters and linefeeds issue

I'm not sure whether this bug was introduced with the new version, but I noticed that adding linefeeds after or before MathJax delimiters breaks the rendering, at least while editing. (See this revision for the correct rendering without any linefeed.)

Answer 16

status-completed

Welcome to Stack Overflow, sign up to our newsletter!

Answer 17

status-completed

Order questions keyboard shortcut doesn't do anything

G Q goes to https://codegolf.stackexchange.com/questions as usual.

After that, however, O A does not "sort by active". ? offers no option to "order questions" at all.

Answer 18

status-planned Currently we still recommend you use the mobile view on small screen devices. There is a good bit of work for us to do to make the responsive pages work well on mobile. That work is planned but we don't have a firm schedule at this time.

The Unanswered tab is partially hidden when loading the page on mobile devices

^{_{Freehand red circles FTW!}}

Answer 19

status-bydesign

Left bar whitespace right of text doesn't go away

As I shrink the horizontal window size, various page elements are removed. However, at no point is the whitespace to the right of the left navigation text removed, up until the point where the left navigation bar is removed.

Answer 20

status-planned Currently we still recommend you use the mobile view on small screen devices. There is a good bit of work for us to do to make the responsive pages work well on mobile. That work is planned but we don't have a firm schedule at this time.

The insert image dialog box cannot be scrolled on mobile

The pop-up that appears when trying to upload an image cannot be scrolled, and you cannot actually insert the picture into the post.

Answer 21

Misleading mouse cursor over the 'Next badge' element

Although the 'Next badge' element is clickable, the mouse cursor is set to either default or text.

All other badge elements set the mouse cursor to pointer when hovered over.

Answer 22

status-bydesign

Watched and Ignored tags can both be open at once

I'm not sure if this is a bug or not, feel free to ignore if it's intended.

There's the watched tags and ignored tags. If you click the edit button, you can add or remove tags. If you click anywhere else, the ability to edit goes away.

However, if you click on the edit button of the other one (watched and ignored) then the first remains editable. This seems inconsistent and surprising.

Here's what it looks like:

Answer 23

Direct link to an answer misaligns the top of the answer second time

(now posted to the main MSE question instead)

Answer 24

Tag buttons in chat focus and unfocus indefinitely

I've only noticed this in PPCG chat rooms so far, but if you hover over a question tag on the bottom most pixel, the entire tag button focuses and unfocuses forever.

Example message