Restyling the build details page

Description

I’ve had a bit of CSS I inject into the builds page for ReadTheDocs locally to make them nicer. And well… I think it’s nice+stable enough by now, that it might be worth upstreaming this content.

Click to see the CSS

#build-commands {
    padding: 3px 0;
    border-radius: 3px;
    background: #2f333d;
}

div.build-command {
    border: none;
    border-radius: 0;
    background: transparent;
    color: white;
    padding: 0;
    margin: 0;
}
div.build-command-successful .build-command-run span:hover {
    background: #282c34;
}
div.build-command-failed .build-command-run span:hover {
    background: #944;
}
div.build-command-run {
    margin: 0;
    padding: 0;
    border-radius: 0;
}
div.build-command-run span {
    margin: 0;
    padding: 0.25em 0.5em;
}
div.build-command-run span::before {
    content: "$ ";
}
div.build-command div.build-command-run span,
div.build-command div.build-command-output span {
    white-space: pre-wrap;
}
div.build-command div.build-command-output {
    background: #1d1f23;
    margin: 0;
}
div.build-command-output span {
    white-space: pre-wrap;
}

div.build-command div.build-command-meta {
    background: #21252b;
}

Screenshots

Regular output, with one element “expanded” and hovering on the git clean statement

(current)

(proposed)

When there’s a failure

(current)

(proposed)

Additional context

Relevant CSS lives here: https://github.com/readthedocs/readthedocs.org/blob/43073b15999d18f96532682ba838717521119abf/readthedocs/builds/static/builds/css/detail.css

[ericholscher]

@pradyunsg Sorry for this, and I appreciate your frustration. We’re taking some steps to prioritize getting the beta dashboard out, and I agree it’s an unfortunate wait on that. I really hope we have some more things to show there in the next couple weeks. I’m not going to push forward with this change quite yet, but hopefully within 2-4 weeks we’ll have a link to share with you to help us beta test the new dashboard.

[pradyunsg]

I’ll flag that it’s almost midway through 2022 – and this was rejected since there is a new theme under development in late 2020. Have there been any public updates on the new theme’s rollout?

If it’s not coming out in the order of weeks, may I suggest adding the ~50 lines of CSS that the issue description has? There have been no changes to the UI for over an year now, and this is a very quick win that will have no ongoing costs.