Google Classroom Dark Theme by grahamsh-llk

/* ==UserStyle==
@name         Google Classroom Dark Theme
@version      20230905.1.1
@namespace    userstyles.world/user/grahamsh-llk
@description  A dark theme for Google Classroom
@author       grahamsh-llk
@license      No License
@preprocessor stylus


@var checkbox coloredmissing        "Colored Missing Status"                                                1
@var checkbox coloredassigned       "Colored Assigned Status"                                               0

@var checkbox borders               "Borders on elements (Changes element background color when disabled)"  1

@var color    managedaccountbgcolor "Managed Account BG Color"                                              #292c32
@var color    managedaccountcolor   "Managed Account Text Color"                                            #bbbbbb

@var checkbox colorfix              "Fix invisible text with classrooms with black accent color"            1

==/UserStyle== */

/*
Colors:

#111
#171717
#1e1e1e
#252525
#2c2c2c

*/
@-moz-document domain("classroom.google.com") {
  /* Google Classroom */
  :root {
    /* Define Variables */
    if coloredmissing {
      /* Colored Status */
      --color-missing: #ea4040;
    }
    else {
      --color-missing: #dddddd;
    }
    if coloredassigned {
      /* Colored Status */
      --color-assigned: #3fc045;
    }
    else {
      --color-assigned: #dddddd;
    }
  }
  body {
    /* Background */
    background-color: #111111;
  }
  .joJglb {
    /* Top Nav Bar */
    background-color: #222222;
  }
  .OX4Vcb {
    /* Left Sidebar */
    background-color: #222222!important;
  }
  .YVvGBb {
    /* Classroom Name at Corner */
    color: #eeeeee;
  }
  .J1raN:hover {
    /* Not Selected Button at Top */
    color: #eeeeee !important;
  }
  .d4Fe0d {
    /* Upcoming Box */
    if borders {
      background-color: #111111;
      border-color: #222222;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .WMQb5e .oBSRLe {
    /* Upcoming border */
    border-top-color: #222222
  }
  .sxa9Pc {
    /* Upcoming text */
    color: #eeeeee;
  }
  .oBSRLe,
  .hnID5d {
    /* Due (day of a week) text */
    color: #cccccc;
  }
  .apFsO {
    /* Work in the Upcoming box text */
    color: white !important;
  }
  .TMOcX {
    /* Classroom box in left sidebar */
    border-radius: 0px 50px 50px 0px;
    margin-bottom: 5px;
  }
  .qs41qe {
    /* Current classroom box in left sidebar */
    background-color: #222 !important;
  }
  .Aopndd {
    /* Post/Setting Boxes */
    if borders {
      background-color: #111111;
      border-color: #222222;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .s2g3Xd, .PeGHgb.Q8U8uc .Ono85c+.QGMq0d, .PeGHgb.Q8U8uc .ruTJle+.XNP4U {
    /* Post Boxes */
    if borders {
      background-color: #111111;
      border-top-color: #222222;
    }
    else {
      background-color: #171717;
      border-top: none;
    }
  }
  .a5kY4d {
    /* Class Comment Box */
    if borders {
      background-color: #111111;
      border-color: #222222;
    }
    else {
      background-color: #1d1d1d;
      border-color: #1d1d1d;
    }
  }
  .DkDwHe:hover {
    /* Assignment Box Hovered */
    if borders {
      background-color: #171717 !important;
    }
    else {
      background-color: #1e1e1e !important;
    }
  }
  .n4xnA {
    /* Post Box Data */
    color: #eeeeee;
  }
  .VBEdtc-Wvd9Cc {
    /* Assignment Comment Text */
    color: #eeeeee;
  }
  .bswVrf {
    /* "Add Class Comment" text */
    color: #555555;
  }
  .SFCE1b {
    /* Assignment box in Classwork section */
    background-color: #111111;
  }
  .M4LFnf {
    /* Attached files box in stream */
    if borders {
      background-color: #111;
      border-color: #1e1e1e;
    }
    else {
      background-color: #1e1e1e;
      border-color: #1e1e1e;
    }
  }
  .r0VQac {
    /* Attached files box in assignment/material */
    if borders {
      background-color: #111111;
      border-color: #1e1e1e;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .bqKF7d {
    /* Assignment Text */
    color: #eeeeee;
  }
  .I7OXgf {
    /* Class Comments popup box */
    background-color: #111111;
  }
  .Shk6y {
    /* "Class Comments" in popup box */
    color: #eeeeee;
  }
  .gJItbc {
    /* User names in popup box */
    color: #eeeeee;
  }
  .NjE5zd {
    /* Comments in popup box */
    color: #ededed;
  }
  .TQYOZc,
  .SZ0kZe,
  .rZXyy {
    /* Classroom boxes */
    if borders {
      background-color: #111;
      border-color: #1e1e1e;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
    color: #eeeeee;
  }
  .rZXyy:hover {
    /* Classroom boxes (hovered) */
    box-shadow: 0 1px 2px 0 rgb(23 23 23 / 50%),
      0 2px 6px 2px rgb(23 23 23 / 25%);
  }
  .vRMGwf {
    /* Classroom dropdown */
    color: #ededed;
  }
  .OA0qNb {
    /* Classroom dropdown background */
    background-color: #111111;
  }
  .XGSlvc {
    /* Submit/Unsubmit Popup Box */
    color: #eeeeee;
  }
  .sdDCme {
    /* Upcoming */
    color: #eeeeee;
  }
  .j70YMc {
    /* Assignment Description */
    color: #dddddd;
  }
  .QRiHXd,
  .NMm5M,
  .snByac,
  .tLDEHd {
    /* Class Comments */
    color: #cccccc;
  }
  .editable {
    /* Textboxes */
    color: #cccccc;
  }
  .WOPwXe {
    /* Due Date */
    color: #cccccc;
  }
  .VfPpkd-uusGie-fmcmS {
    /* Classes in To-Do */
    color: #cccccc !important;
  }
  .VfPpkd-StrnGf-rymPhb-b9t22c {
    /* Text in certain popups */
    color: #cccccc;
  }
  .VfPpkd-xl07Ob-XxIAqe {
    /* Class Dropdown Menu */
    background-color: #262626;
  }
  .VfPpkd-StrnGf-rymPhb-ibnC6b:hover {
    /* Class Dropdown Menu Item Hover */
    background-color: #363636
  }
  .JPdR6b {
    /* Post Dropdown Menu */
    background: #262626
  }
  .z80M1.FwR7Pc {
    /* Post Dropdown Menu Item Hover */
    background: #363636
  }
  .z80M1 {
    /* Post Dropdown Menu Text */
    color: #ccc
  }
  img[alt="Google"] {
    /* Google Image */
    box-sizing: border-box;
    padding-left: 74px;
    background: url(https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_light_clr_74x24px.svg)
      left top no-repeat;
  }
  .IqJTee {
    /* Classroom Text */
    color: #dddddd;
  }
  .K6Ovqd {
    /* "Announce something to your class" */
    color: #dddddd;
  }
  .jlVFDe span {
    /* "Not answered" or "Your answer" */
    color: #eeeeee;
  }
  .Yalane,
  .tL9Q4c {
    /* Open ended answer textbox */
    background-color: #222222 !important;
    color: #dddddd;
  }
  .rUtoef,
  .UmiGNb,
  .zQwDwf,
  .ZcoGnf {
    /* Question in Classmate Answers & Classmate names in Classmate Answers & Dates in Classmate Answers */
    color: #dddddd;
  }
  .jZrWoe {
    /* Classmate answers */
    color: #eeeeee;
  }
  .TAjiIf {
    /* Classmates in Classmate Answers */
    background-color: #252525 !important;
  }
  .qk0lee:focus {
    /* Announce something to your class */
    background-color: #222222;
    color: #eeeeee;
  }
  .e8E4Gb {
    /* Announce Box */
    if borders {
      background-color: #111;
    }
    else {
      background-color: #171717;
    }
  }
  .vTcY1d,
  .CIy9F {
    /* Announce Textbox */
    if borders {
      background-color: #171717 !important;
    }
    else {
      background-color: #1e1e1e !important;
    }
  }
  .vTcY1d:hover,
  .CIy9F:hover {
    /* Announce Textbox Hovered */
    if borders {
      background-color: #1e1e1e !important;
    }
    else {
      background-color: #252525 !important;
    }
  }
  .Dy8Cxc span {
    /* "Your Work" */
    color: #dddddd;
  }
  .Kma9Mb {
    /* Missing Status */
    color: var(--color-missing) !important;
  }
  .vzcr8 {
    /* Assigned Status */
    color: var(--color-assigned) !important;
  }
  .E7ZeX {
    /* Rubric */
    if borders {
      background-color: #111111;
      border-color: #171717;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .FMzRdf {
    /* Rubric */
    color: #cccccc;
  }
  .OK1tJe {
    /* Rubric Grades */
    if borders {
      background-color: #171717;
    }
    else {
      background-color: #1e1e1e;
      border-color: #1e1e1e;
    }
  }
  .R5iLrf.u3bW4e,
  .R5iLrf.yXgmRe:hover {
    /* Rubric Grades */
    if borders {
      background-color: #1e1e1e;
    }
    else {
      background-color: #252525;
      border-color: #252525;
    }
  }
  .jlfrG {
    /* Rubric Boxes */
    if borders {
      background-color: #111;
      border-color: #252525;
    }
    else {
      background-color: #1e1e1e;
      border-color: #1e1e1e;
    }
    color: #dddddd;
  }
  .jlfrG:before,
  .jlfrG:after {
    /* Remove Rubric Box Gradient */
    background: none !important;
  }
  .jrhqBd {
    /* Assignment with attachments */
    if borders {
      background-color: #111;
      border-color: #252525;
    }
    else {
      background-color: #171717;
      border-color: #171717;
    }
  }
  .xPAMbf {
    /* Assignment with attachments */
    if borders {
      border-bottom-color: #252525;
    }
    else {
      border-bottom-color: #171717;
    }
  }
  .xPAMbf:hover {
    /* Assignment in specific topic hover */
    if borders {
      background-color: #171717 !important;
    }
    else {
      background-color: #252525 !important;
    }
  }
  .QRiHXd.IMvYId.fXuRkd.UISY8d-Ysl7Fe {
    /* Topic Sidebar */
    background-color: #141414;
    border-radius: 5px;
    margin: 2px;
  }
  .QRiHXd.IMvYId.fXuRkd.UISY8d-Ysl7Fe:hover {
    /* Topic Sidebar Hover */
    background-color: #222;
  }
  .WagS8 {
    /* Event Banner (Ex: Teacher Appreciation Week) */
    background-color: #333;
    border-color: #444;
  }
  .WagS8 p {
    /* Event Banner Text */
    color: #eee;
  }
  .joJglb {
    /* Navigation Bar at Top */
    border-color: #444;
  }
  .asQXV {
    /* "Meet" in Sidebar/Classes in Class notifications setting */
    color: #ddd;
  }
  .wZTANe a:hover, .wZTANe a:focus {
    /* Na...