Skip to content

SAE Login/User Interface Dark Theme by p0isonouspurple

Screenshot of SAE Login/User Interface Dark Theme
Write a review Install Get Stylus

Details

Authorp0isonouspurple

LicenseCC-BY-4.0

Categorysae, saecommunity

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Rest your eyes here with the calming dark blue tones :)

Notes

1.2.0 (current)

Big redesign :D

1.1.3

Alerts are now fully supported. Small fix on focus state of buttons.

1.1.2

The Cookie Settings are now also fully supported.

1.1.1

Fixed: removed small white bars on the Central login dashboard on the bottom left and right

1.1.0

This style now also supports the lessons dashboard and login (lesson.sae.edu)!

1.0.1

Changed the color of links when they got already visited once to the classic orange.

1.0.0

Release

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           SAE Login/User Interface Dark Theme
@namespace      login.sae.edu
@version        1.2.0
@description    Rest your eyes here with the calming dark blue tones :)
@author         PoisonousPurple
==/UserStyle== */
@-moz-document domain("login.sae.edu") {
    :root {
        --dtheme-color-primary: #efefef;
        --dtheme-bg-primary: #0d1117;
        --dtheme-bg-secondary: #efefef04;
        --dtheme-border: #efefef10;
        --dtheme-orange-border: #efefef50;
        --dtheme-color-sae-orange: #ff6900;
    }

    .h-100 {
        min-height: 100vh!important;
        height: auto!important;
    }

    h2 {
        color: var(--dtheme-color-sae-orange);
        font-weight: 900;
    }

    h4 {
        margin-bottom: 50px
    }

    body,
    .content,
    .header {
        background: var(--dtheme-bg-primary);
        color: var(--dtheme-color-primary);
    }

    a#ot-sdk-btn.ot-sdk-show-settings,
    a.link-light,
    a.link-light:hover,
    a.link-light:focus,
    a.link-light:active,
    a.link-light:link,
    a.link-light:visited {
        color: var(--dtheme-color-sae-orange) !important;
    }

    a,
    a:hover {
        color: var(--dtheme-color-sae-orange);
    }

    .content {
        padding: 3rem 1rem;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #11151b inset !important;
    }

    input:-webkit-autofill {
        -webkit-text-fill-color: var(--dtheme-color-primary);
    }

    .alert-danger {
        background: #ff2f2f10;
        border-color: #ff2f2f;
        color: #efefef;
    }

    .alert-danger:before {
        content: "Alert! ";
        color: #fd7a7a;
    }

    .alert-success {
        background-color: #3fff3f10;
        border-color: #3fff3f;
        color: #efefef;
    }

    .alert-success:before {
        content: "Success: ";
        color: #3fff3f;
    }

    .alert-warning {
        background-color: #f9f92410;
        border-color: #f9f924;
        color: #efefef;
    }

    .alert-warning:before {
        content: "Warning: ";
        color: #ffff83;
    }

    .alert-info {
        background-color: #3c3cff10;
        border-color: #3c3cff;
        color: #efefef;
    }

    .alert-info:before {
        content: "Info: ";
        color: #8989ff;
    }

    .form-control {
        background: var(--dtheme-bg-secondary);
        border: 1px var(--dtheme-border) solid;
        color: var(--dtheme-color-primary);
    }

    .form-control:hover {
        border-color: var(--dtheme-color-primary);
    }

    .form-control:focus {
        border-color: var(--dtheme-color-sae-orange);
        background: var(--dtheme-bg-secondary);
        color: var(--dtheme-color-primary);
    }

    .form-control:disabled {
        background: var(--dtheme-bg-primary);
        border-color: var(--dtheme-bg-primary);
    }

    .btn {
        border: 1px var(--dtheme-border) solid;
        box-shadow: 0 0 4px 0 #000;
    }

    .btn-primary {
        background: var(--dtheme-bg-secondary);
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:not(.disabled):active {
        border-color: var(--dtheme-color-primary)!important;
        background: var(--dtheme-bg-secondary)!important;
    }

    .btn-danger {
        background: var(--dtheme-color-sae-orange);
        border-color: var(--dtheme-orange-border);
    }

    .btn-danger:hover {
        border-color: var(--dtheme-color-primary);
        background: var(--dtheme-color-sae-orange);
    }

    /* consent sideslide */
    #onetrust-pc-sdk {
        box-shadow: none;
    }

    #onetrust-consent-sdk #onetrust-pc-sdk h3,
    #onetrust-consent-sdk #onetrust-pc-sdk h4,
    #onetrust-consent-sdk #onetrust-pc-sdk h5,
    #onetrust-consent-sdk #onetrust-pc-sdk h6,
    #onetrust-consent-sdk #onetrust-pc-sdk p,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-ven-lst .ot-ven-opts p,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-li-title,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-info,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-fltr-modal #modal-header,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-checkbox label span,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-sel-blk p,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-lst-title span,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .back-btn-handler p,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .ot-ven-name,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-ven-lst .consent-category,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-inactive-leg-btn,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-label-status,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-chkbox label span,
    #onetrust-consent-sdk #onetrust-pc-sdk #clear-filters-handler {
        color: var(--dtheme-color-primary);
    }

    #onetrust-consent-sdk #onetrust-pc-sdk,
    #onetrust-consent-sdk #ot-search-cntr,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-switch.ot-toggle,
    #onetrust-consent-sdk #onetrust-pc-sdk ot-grp-hdr1 .checkbox,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title:after,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-fltr-cnt,
    #onetrust-consent-sdk #onetrust-pc-sdk #ot-anchor,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-acc-grpcntr.ot-acc-txt,
    #onetrust-consent-sdk #onetrust-pc-sdk .ot-acc-txt .ot-subgrp-tgl .ot-switch.ot-toggle {
        background-color: var(--dtheme-bg-primary);
    }

    #onetrust-pc-sdk .ot-pc-header {
        background-color: var(--dtheme-bg-secondary);
    }

    #onetrust-pc-sdk .ot-pc-logo {
        background-image: url(https://otto-spaude.me/canvas-content/consent-logo.png)!important;
    }

    #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item:first-of-type {
        border: none;
    }
}

@-moz-document domain("lesson.sae.edu") {
    :root {
        --dtheme-color-primary: #efefef;
        --dtheme-bg-primary: #0d1117;
        --dtheme-bg-secondary: #efefef0b;
        --dtheme-border: #efefef10;
        --dtheme-orange-border: #efefef50;
        --dtheme-color-sae-orange: #ff6900;
        --dtheme-shadow: 0 0 4px 0 #000;
    }

    ::selection {
        color: var(--dtheme-color-primary);
        background: var(--dtheme-color-sae-orange);
    }

    body,
    .body-content,
    .content {
        background-color: var(--dtheme-bg-primary);
        color: var(--dtheme-color-primary);
    }

    a:hover {
        color: var(--dtheme-color-primary);
        transition: .2s;
    }

    input[type="search"],
    .btn-group,
    .filter-btn {
        border-radius: .3rem;
    }


    .filter-btn {
        background: none;
        color: var(--dtheme-color-primary);
    }

    .fa.fa-star {
        color: var(--dtheme-color-primary);
        margin-left: 0;
    }

    .favlist-filter .btn {
        border: none;
    }

    .favlist-filter:hover {
        opacity: 1;
    }

    .btn-group,
    .favlist-filter {
        border: 1px var(--dtheme-border) solid;
        background: var(--dtheme-bg-secondary);
        box-shadow: var(--dtheme-shadow);
    }

    .btn-group:hover,
    .favlist-filter:hover {
        border-color: var(--dtheme-color-primary);
        transition: .2s;
    }

    .favlist-filter:hover .filter-btn {
        background: none;
    }

    input[type="search"],
    .form-control {
        background-color: var(--dtheme-bg-secondary);
        border: 1px var(--dtheme-border) solid;
        box-shadow: var(--dtheme-shadow);
        color: var(--dtheme-color-primary);
    }

    input[type="search"]:hover,
    .form-control:hover {
        border-color: var(--dtheme-color-primary);
    }

    input[type="search"]:focus,
    .form-control:focus {
        background-color: var(--dtheme-bg-secondary);
        border-color: var(--dtheme-color-sae-orange);
        color: var(--dtheme-color-primary);
    }

    .dropdown-menu {
        border: 1px var(--dtheme-border) solid;
        box-shadow: var(--dtheme-shadow);
    }
    .dropdown-menu,
    .dropdown-item {
        background-color: #11151b;
        color: var(--dtheme-color-primary);
    }

    .dropdown-item:hover {
        color: var(--dtheme-color-sae-orange);
        background-color: var(--dtheme-bg-secondary);
        transition: .2s;
    }

    .dataTables_scroll {
        margin: 4px;
        background: var(--dtheme-bg-secondary);
        border: 1px var(--dtheme-border) solid;
        border-radius: .5rem;
        box-shadow: var(--dtheme-shadow);
    }

    .table,
    table thead tr th {
        border: none;
    }

    thead tr {
        background: transparent!important;
    }

    thead .details-control {
        border-bottom-width: 1px;
    }

    thead .details-control:first-of-type {
        border-radius: .3rem 0 0 0;
    }

    thead .details-control:last-of-type {
        border-radius: 0 .3rem 0 0;
    }

    .dataTables_scrollBody {
        border-radius: 0 0 .3rem .3rem;
    }

    table thead tr th {
        background: none;
    }

    tbody {
        background: var(--dtheme-bg-primary)!important;
    }
    
    div.DTS div.dataTables_scrollBody table,
    div.dataTables_scrollBody {
        background: var(--dtheme-bg-secondary)!important;
    }


    .table-bordered,
    .table-bordered td,
    .table-bordered th {
        border: none;
    }

    .table-striped tbody tr,
    .table-striped tbody tr .sub-table td {
        background-color: var(--dtheme-bg-primary);
    }

    .table-striped tbody tr:nth-of-type(odd),
    .table-striped tbody tr:nth-of-type(odd) .sub-table td {
        background-color: var(--dtheme-bg-secondary);
    }

    .lecturer-info span span:b...

Reviews

No reviews yet.