UNSW CSE CGI Dark Theme by psharma04

/* ==UserStyle==
@name         cgi.cse.unsw.edu.au
@version      20231022.02.53
@namespace    ?
==/UserStyle== */

@-moz-document url-prefix("https://cgi.cse.unsw.edu.au/") {
html {
    background-color: #181a1b !important;
}
html {
    color-scheme: dark !important;
}
html,
body {
    background-color: #181a1b;
}
html,
body {
    border-color: #736b5e;
    color: #e8e6e3;
}
a {
    color: #3391ff;
}
table {
    border-color: #545b5e;
}
::placeholder {
    color: #b2aba1;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    background-color: #404400 !important;
    color: #e8e6e3 !important;
}
::selection {
    background-color: #004daa !important;
    color: #e8e6e3 !important;
}
::-moz-selection {
    background-color: #004daa !important;
    color: #e8e6e3 !important;
}

/* Invert Style */
.jfk-bubble.gtx-bubble,
.captcheck_answer_label > input + img,
span#closed_text > img[src^="https://www.gstatic.com/images/branding/googlelogo"],
span[data-href^="https://www.hcaptcha.com/"] > #icon,
#bit-notification-bar-iframe,
::-webkit-calendar-picker-indicator {
    filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
}

/* Variables Style */
:root {
    --darkmode-neutral-background: #131516;
    --darkmode-neutral-text: #d8d4cf;
    --darkmode-selection-background: #004daa;
    --darkmode-selection-text: #e8e6e3;
}

/* Modified CSS */
:root {
    --darkmode-border--blue: #0056b3;
    --indigo: #6610f2;
    --darkmode-bg--purple: #563298;
    --darkmode-border--purple: #4c2c86;
    --pink: #e83e8c;
    --darkmode-bg--red: #a51d2a;
    --darkmode-border--red: #941a25;
    --darkmode-bg--orange: #c05802;
    --darkmode-border--orange: #ac4f01;
    --yellow: #ffc107;
    --darkmode-bg--green: #208637;
    --darkmode-border--green: #259c40;
    --teal: #20c997;
    --darkmode-bg--cyan: #128293;
    --darkmode-border--cyan: #1597ab;
    --darkmode-text--white: #e8e6e3;
    --darkmode-text--gray: #9e9689;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
}
html {
    -webkit-tap-highlight-color: transparent;
}
body {
    color: rgb(209, 205, 199);
    background-color: rgb(24, 26, 27);
}
[tabindex="-1"]:focus:not(:focus-visible) {
    outline-color: initial !important;
}
abbr[data-original-title],
abbr[title] {
    text-decoration-color: initial;
    border-bottom-color: initial;
}
a {
    color: rgb(51, 162, 255);
    text-decoration-color: initial;
    background-color: transparent;
}
a:hover {
    color: rgb(97, 183, 255);
    text-decoration-color: initial;
}
a:not([href]) {
    color: inherit;
    text-decoration-color: initial;
}
a:not([href]):hover {
    color: inherit;
    text-decoration-color: initial;
}
caption {
    color: rgb(158, 150, 137);
}
button:focus {
    outline-color: rgb(186, 123, 0);
}
fieldset {
    border-color: initial;
}
legend {
    color: inherit;
}
hr {
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-top-color: rgba(140, 130, 115, 0.1);
}
.mark,
mark {
    background-color: rgb(47, 40, 5);
}
.list-unstyled {
    list-style-image: initial;
}
.list-inline {
    list-style-image: initial;
}
.blockquote-footer {
    color: rgb(158, 150, 137);
}
.img-thumbnail {
    background-color: rgb(24, 26, 27);
    border-color: rgb(56, 61, 63);
}
.figure-caption {
    color: rgb(158, 150, 137);
}
code {
    color: rgb(233, 74, 147);
}
a > code {
    color: inherit;
}
kbd {
    color: rgb(232, 230, 227);
    background-color: rgb(28, 30, 31);
}
pre {
    color: rgb(209, 205, 199);
}
pre code {
    color: inherit;
}
.table {
    color: rgb(209, 205, 199);
}
.table td,
.table th {
    border-top-color: rgb(56, 61, 63);
}
.table thead th {
    border-bottom-color: rgb(56, 61, 63);
}
.table tbody + tbody {
    border-top-color: rgb(56, 61, 63);
}
.table-bordered {
    border-color: rgb(56, 61, 63);
}
.table-bordered td,
.table-bordered th {
    border-color: rgb(56, 61, 63);
}
.table-borderless tbody + tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
    border-color: initial;
}
.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(0, 0, 0, 0.05);
}
.table-hover tbody tr:hover {
    color: rgb(209, 205, 199);
    background-color: rgba(0, 0, 0, 0.07);
}
.table-primary,
.table-primary > td,
.table-primary > th {
    background-color: rgb(44, 48, 50);
}
.table-primary tbody + tbody,
.table-primary td,
.table-primary th,
.table-primary thead th {
    border-color: rgb(0, 68, 142);
}
.table-hover .table-primary:hover {
    background-color: rgb(51, 55, 57);
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
    background-color: rgb(51, 55, 57);
}
.table-secondary,
.table-secondary > td,
.table-secondary > th {
    background-color: rgb(46, 50, 51);
}
.table-secondary tbody + tbody,
.table-secondary td,
.table-secondary th,
.table-secondary thead th {
    border-color: rgb(68, 74, 77);
}
.table-hover .table-secondary:hover {
    background-color: rgb(53, 58, 60);
}
.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
    background-color: rgb(53, 58, 60);
}
.table-success,
.table-success > td,
.table-success > th {
    background-color: rgb(30, 72, 48);
}
.table-success tbody + tbody,
.table-success td,
.table-success th,
.table-success thead th {
    border-color: rgb(43, 106, 58);
}
.table-hover .table-success:hover {
    background-color: rgb(34, 83, 54);
}
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
    background-color: rgb(34, 83, 54);
}
.table-info,
.table-info > td,
.table-info > th {
    background-color: rgb(24, 71, 78);
}
.table-info tbody + tbody,
.table-info td,
.table-info th,
.table-info thead th {
    border-color: rgb(35, 104, 114);
}
.table-hover .table-info:hover {
    background-color: rgb(28, 81, 89);
}
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
    background-color: rgb(28, 81, 89);
}
.table-warning,
.table-warning > td,
.table-warning > th {
    background-color: rgb(69, 52, 0);
}
.table-warning tbody + tbody,
.table-warning td,
.table-warning th,
.table-warning thead th {
    border-color: rgb(141, 106, 0);
}
.table-hover .table-warning:hover {
    background-color: rgb(81, 61, 0);
}
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
    background-color: rgb(81, 61, 0);
}
.table-danger,
.table-danger > td,
.table-danger > th {
    background-color: rgb(78, 14, 20);
}
.table-danger tbody + tbody,
.table-danger td,
.table-danger th,
.table-danger thead th {
    border-color: rgb(119, 20, 29);
}
.table-hover .table-danger:hover {
    background-color: rgb(91, 16, 24);
}
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
    background-color: rgb(91, 16, 24);
}
.table-light,
.table-light > td,
.table-light > th {
    background-color: rgb(25, 27, 28);
}
.table-light tbody + tbody,
.table-light td,
.table-light th,
.table-light thead th {
    border-color: rgb(49, 53, 55);
}
.table-hover .table-light:hover {
    background-color: rgb(32, 35, 36);
}
.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
    background-color: rgb(32, 35, 36);
}
.table-dark,
.table-dark > td,
.table-dark > th {
    background-color: rgb(55, 60, 62);
}
.table-dark tbody + tbody,
.table-dark td,
.table-dark th,
.table-dark thead th {
    border-color: rgb(77, 83, 87);
}
.table-hover .table-dark:hover {
    background-color: rgb(62, 67, 70);
}
.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
    background-color: rgb(62, 67, 70);
}
.table-active,
.table-active > td,
.table-active > th {
    background-color: rgba(0, 0, 0, 0.07);
}
.table-hover .table-active:hover {
    background-color: rgba(0, 0, 0, 0.07);
}
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
    background-color: rgba(0, 0, 0, 0.07);
}
.table .thead-dark th {
    color: rgb(232, 230, 227);
    background-color: rgb(44, 47, 49);
    border-color: rgb(115, 106, 94);
}
.table .thead-light th {
    color: rgb(181, 175, 166);
    background-color: rgb(35, 38, 39);
    border-color: rgb(56, 61, 63);
}
.table-dark {
    color: rgb(232, 230, 227);
    background-color: rgb(44, 47, 49);
}
.table-dark td,
.table-dark th,
.table-dark thead th {
    border-color: rgb(115, 106, 94);
}
.table-dark.table-bordered {
    border-color: initial;
}
.table-dark.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(24, 26, 27, 0.05);
}
.table-dark.table-hover tbody tr:hover {
    color: rgb(232, 230, 227);
    background-color: rgba(24, 26, 27, 0.07);
}
@media (max-width: 575.98px) {
    .table-responsive-sm > .table-bordered {
        border-color: initial;
    }
}
@media (max-width: 767.98px) {
    .table-responsive-md > .table-bordered {
        border-color: initial;
    }
}
@media (max-width: 991.98px) {
    .tab...