Dark theme for Cengage WebAssign

webassign-dark-theme.css

/*
    WebAssign Dark Theme by Fasteroid
    Revision 11
*/
@-moz-document url-prefix("https://www.webassign.net/web/Student") {
.mainContainerLayout {
    display: grid;
    min-height: 100%;
    grid-template-rows: auto 1fr auto;
    background: #222;
}

.waQBox > .qUtility > .standard {
    background: #333;
}

.waQBox > .qUtility > .standard,
.waQBox > .qUtility > .crop {
    margin: 0;
    border: 0px solid #000;
    font: normal 13px/20px verdana, helvetica, sans-serif;
    -moz-border-radius: 0 0 4px 0;
    -webkit-border-radius: 0 0 4px 0;
}

.tex2jax_ignore, .qContent .wa1par,
.qContent .sublabel,
.qContent .wa1ans {
    color: #ddd;
}

.previousAnswersContainer .container.popupWrap .middle .qResponse {
    background: #333;
    border: 1px solid #555;
    border-radius: 2px;
    padding: 15px 0;
    margin-bottom: 20px;
}

.previousAnswersContainer .container.popupWrap, .previousAnswersContainer .container.popupWrap .popupContent, .previousAnswersContainer .container.popupWrap .middle, .allResponses .previousAnswersContainer, .dj_webkit .dj_chrome .dj_contentbox {
    background: #222 !important;
    border-radius: 0px;
}

.previousAnswersContainer .container.popupWrap .middle {
    background: #222;
    border: 20px solid #222;
    border-radius: 0px;
}

.previousAnswersContainer .container.popupWrap .waQBox .top .title {
    align-items: baseline;
    background: #333;
    border-right: 0;
    border-left: 0;
    color: #eee;
    display: flex;
    font: normal 1rem 'Open Sans', sans-serif;
}

.css-jsfayd {
    background: #222;
    border-radius: 10px;
}

.static, .qTextField > input {
    color: #ccc !important;
    display: inline;
    margin: 0.1em;
    padding: 0.1em;
    background: #2a2a2a;
    border: 1px solid #555;
}

font, span[style*="color: #dd0000"]  {
    color: #f22 !important;
    font-weight: bold;
}

article > *, .css-l1j587, .css-1nohyfr, .css-61mckp, .css-1xtak44, .css-tk5eh5, .css-ydjurp {
    background-color: #333 !important;
    border: 0px solid #000 !important;
    color: #ddd !important;
}

.css-2ckidu, .css-lal50k, .css-ksgbli {
    border-color: #222;
}

.css-113dhmn, .css-lal50k, .manualGrading > * > p, .css-ivbv8a  {
    color: #ddd;
}

.waQBox, .waQBox>.qUtility>.qButtons {
    background: #333;
    border: 0px solid #eee;
}

.css-5ijub1 > *, .css-6xh4hr, .css-1d5sdls > div {
    color: #ccc !important;
}
.css-mzz8f4-BaseStyledButton, .css-nvle0d-BaseStyledButton {
    background: rgb(0, 98, 152);
    border: 0px rgb(0, 98, 152);
    color: #ddd;
    text-transform: none;
}

.css-mrxdza-StyledCard.css-mrxdza-StyledCard {
    background: rgb(0, 98, 152);
    border-radius: 0px;
    font-family: "Open Sans", sans-serif;
    border: 3px solid rgb(0, 98, 152);
}

.section_content {
    background-color: rgb(26, 67, 89) !important;
}

.css-1ro0y4x, .css-14spuex, .css-gaa69a{
    background: #2a2a2a;
    border-width: 2px;
    border-color: #222

}

.css-3nzxcx, .css-1elzpo0, .css-16r17sf {
    background: #333;
    border-width: 2px;
    border-color: #222
}

.css-a121ts, .css-11flc95, .css-19dp8pl {
    padding: 0.5rem 0.4rem 1.875rem;
    margin: 0px 0.2rem;
}

a, a:link, a:active, a:visited {
    color: #88f;
    cursor: pointer;
    font-weight: normal;
    text-decoration: none;
}

.waQBox>.qAlert {
    background: #333;
    border-left: 1px solid #ff0;
    border-bottom: 1px solid #ff0;
    border-right: 1px solid #ff0;
}

.css-a121ts {
    background: #333
}

.css-3nzxcx:hover, .css-3nzxcx:focus, .css-3nzxcx:active, .css-1ro0y4x:hover, .css-1ro0y4x:focus, .css-1ro0y4x:active, .css-gaa69a:hover, .css-gaa69a:focus, .css-gaa69a:active, .css-14spuex:hover, .css-14spuex:focus, .css-14spuex:active  {
    background-color: #666;
}

/* Correct/Partial/Incorrect Colors */
.css-19dp8pl, .css-1i1pfxt {
    background: #2c3925;
}

.css-11flc95 {
    background-color: #483e20;
}

.css-1qv5qzw {
    background-color: #402626
}
    
/* Everything below inverts math */
.watexparenimage > img,
.watexsqrtradicalcontent > img,
nobr > img {
    filter: invert(1)
}

.cap-btm-rit > img {
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 2px #ffffff)
}

.watexfraction .watexdenominator, .watexsqrtradicandcontent {
    border-top: 1px solid;
}
}

@RealGitHubAdmin Glad to see you got it working!

This stylesheet is by no means comprehensive—it only covers the meager amount of content I observed in my Physics 282 course. There is no doubt stuff missing that I just never encountered.

I do have an idea though—if you're not up for trying to fix it yourself with Inspect Element, I might be able to fix the missing styles if you send me a copy of the page. Just ctrl+s it and save it as a single-file webpage, like this:

I would not upload it here though, as I'm not sure of the security implications (bad actors might be able to extract stuff out of that file). Google Drive or Discord are preferred—share it with me at fasteroid@hotmail.com or @fasteroid if interested.

Thanks friend, and I hope your Calculus 1 adventures are going well.