e-vzdelavanie-customizer by TruePe4rl

/* ==UserStyle==
@name           UNIZA e-vzdelavanie customizer
@namespace      https://codeberg.org/TruePe4rl
@version        0.7.5
@description    Dark mode with advanced customization options
@author         TruePe4rl
@homepageURL    https://codeberg.org/TruePe4rl/e-vzdelavanie-customizer
@license        CC-BY 4.0
@preprocessor   stylus

@var checkbox   cleanLogin          "Clean login"                1
@var checkbox   scheduleInfoHide    "Hide schedule describtion"         1
@var checkbox   scheduleDescToSide  "Subject describtion not over schedule" 0
@var checkbox   scheduleDescHide    "Hide subject describtion"        1
@var color      baseBg              "Base background"            #22252f
@var color      accentColor         "Accent color"              #903f3f
@var color      stripColor         "Academic strip color"       #c2900a
@var color      borderColor           "Border color"            #ffffff
@var color      textColor           "Text color"               #ffffff
@var color      linkColor           "Link color"              #a1daf7
@var color      scheduleBorderColor   "Schedule borders"        #a0a0a0
@var color      scheduleBlockText   "Schedule (text)"             #ffffff
@var color      scheduleP            "Schedule (p.)"              #5d4230
@var color      scheduleV            "Schedule (v.)"              #2d6243
@var color      schedulePV           "Schedule (p.v.)"            #24808c
@var color      scheduleO            "Schedule (b.)"              #44455c
==/UserStyle== */

mainBg = lighten(baseBg, 10%)

tableBg = lighten(baseBg, 28%)
tableSepBg = lighten(baseBg, 20%)

inputBg = darken(baseBg, 5%)

dropdownBg = lighten(baseBg, 10%)
dropdownBgHover = lighten(baseBg, 30%)

buttonBg = lighten(baseBg, 17%)
buttonBgHover = lighten(baseBg, 12%)

darkAccent = darken(accentColor, 20%)

darkStripColor = darken(stripColor, 20%)

@-moz-document url-prefix("https://vzdelavanie.uniza.sk/vzdelavanie/") {
    /*--> Main <--*/
    :root {
        /**/
    }

    * {
        color: textColor;
    }

    body,
    html {
        background: baseBg;
        color: textColor;
    }
    
    .nadpis-card, 
    .hlavicka {
        background-color: accentColor !important;
    }
    
    #id-hamburger {
        background-color: accentColor !important;
        border: 1px solid borderColor;
        
        &:hover {
            background-color: darkAccent !important;
        }
    }
    
    .hl-nadpis-mobile,
    .hl-nadpis-obal {
        background-color: stripColor !important;
        border-color: darkAccent;
        min-height: unset;
    }
    
    .hl-nadpis-obal .centruj {
        height: 100%;
        display: grid;
        grid-template-columns: max-content auto;
        align-items: center;
    }
    
    .hl-nadpis-obal .centruj > * {
        margin: 0 !important;
    }
    
    .e-vzdelavanie a,
    .e-vzdelavanie-mm a {
        /* TODO */
        background-color: stripColor !important;
        padding: 5px;
    }
    
    #txm-lng2:hover,
    .e-vzdelavanie a:hover,
    .e-vzdelavanie-mm a:hover {
        background-color: darkStripColor !important;
        color: white !important;
    }
    
    .ak-rok-obal {
        background-color: stripColor !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
    }
    
    @media (max-width: 540px) {
        .hl-nadpis-obal .centruj {
            grid-template-columns: auto;
        }
        
        .ak-rok-obal {
            justify-content: center;
        }
    }
    
    .ak-rok-text {
        padding: 0;
    }
    
    #ar-custom-select {
        border-radius: 0 !important;
        border: none;
        top: 0;
        background-color: stripColor !important;
        box-shadow: none;
        
        &:hover {
            background-color: darkStripColor !important;
        }
    }
    
    .ar-select-items {
        background-color: stripColor !important;
        border: 1px solid borderColor;
    }
    .ar-select-items > div {
        border: none;
        
         &:hover {
            background-color: darkStripColor !important;
         }
    }
    
    .dropbtn {
        border-color: darkAccent;
        
        &:hover {
            border-color: borderColor;
        }
    }

    table {
        border-collapse: collapse;
    }
    
    th.tform {
        background-color: accentColor !important;
    }
    
    table.tform,
    table.data {
        background-color: tableBg !important;
    }


    a {
        color: linkColor !important;
    }
    

    input[type=text],
    input[type=password] {
        background: inputBg !important;
        border: 1px solid borderColor;
        border-radius: 0;
    }
    
    .viac,
    input[type=submit],
    input[type=button] {
        background: buttonBg !important;
        border: none !important;
        border-radius: 0 !important;
        color: textColor !important;
        
        &:hover {
            background: buttonBgHover !important;
        }
    }

    #custom-select1,
    #custom-select2,
    #custom-select3,
    #custom-select4,
    #custom-select5,
    #custom-select6 {
        border: none;
        background-color: transparent;
    }

    .select-selected {
        color: white !important;
        background-color: buttonBg;
    }

    .select-selected::after {
        /* not worth efffort */
        border-top-color: white;
    }
    
    .select-selected.select-arrow-active::after {
        border-bottom-color: white;
    }
    
    .select-items {
        background-color: dropdownBg;
        border: 1px solid borderColor;
        padding:5px;
    }
    
    .select-items div {
        background-color: dropdownBg;
        color: textColor;
        border: none;
        
    }
    
    .select-items div:hover {
        background-color: dropdownBgHover !important;
        color: textColor;
    }

    .dropdown-content {
        background-color: dropdownBg;
    }
    
    .dropdown-content a:hover {
        background-color: dropdownBgHover;
    }
    
    .accord-hl-polozka {
        margin-right: 0;
    }
    
    .accordion::after {
        background-color: accentColor;
        border-radius: 0;
        margin-right: 50px
    }
    
    a:hover.tlacitko1 {
        background-color: dropdownBgHover !important;
    }
    
    .accord-hl-polozka,
    .accord-hl-polozka::after,
    .tlacitko1 {
        background-color: dropdownBg !important;
        color: textColor !important;
        
        &:hover {
            background-color: dropdownBgHover !important;
        }
    }
    

    .stred {
        background: transparent;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .stlpec,
    .main {
        background: mainBg;
    }

    #hlaska-cookies {
        display: none;
    }

    /*--> Domov <--*/
    .stlpec-card {
        background: tableBg;
    }
    
    .obrazok {
        background-color: white;
        background-position: center !important;
    }
    
    .obr-url2,
     .obr-vzdel_serial {
         background-size: cover;
     }
     
     .obr-url-parkovanie {
        background-color: tableBg;
     }
    
    

    /* Prihlasenie */
    .mch-prihlasenie-box {
        display: flex;
        flex-direction: column;
        align-content: center;
    }
    
    #id-tabulka-loginform {
        background-color: tableBg;
        width: fit-content;
        margin: 0 auto;
    }

    .mch-prihlasenie input {
        background: hsl(0, 0%, 15%);
    }
    
    .mch-prihlasenie-okraje {
        if cleanLogin {
            display: none;
        }
    }

    /* Zapisane predmety */
    .tabulka-predmety-s table {
        background-color: tableBg;
    }

    .sep {
        background-color: tableSepBg;
    }

    .tabulka-predmety-s tr {
        background-color: transparent;
    }

    .tabulka-predmety-s img {
        background-color: white;
    }

    /*--> Ucebne plany <--*/
    h2.plany {
        background-color: accentColor;
    }
        
    #il_menu1,
    #il_menu2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background: tableBg;
    }
    
    #il_menu1 img,
    #il_menu2 img {
        height: 2rem;
        width: 2rem;
        background-color: white;
        margin: 0 4px;
    }
    
    #il_menu1 > * ,
    #il_menu2 > * {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
        

    #scrollme.tabulka-stud-plany {
        background: tableBg !important;
        padding: 5px;
    }
    
    #id-tabulka-studijnych-planov img {
        background: white;
        display: inline;
        margin-left: 5px;
    }
    
    #id-tabulka-inf-list-predmetu {
        border: 1px solid borderColor;
        }
        
    #id-tabulka-inf-list-predmetu > * > * > * {
            border: 1px solid borderColor;
            padding: 5px;
        }
    
    .tbl_data td {
        background-color: transparent;
    }

    .tbl_data {
        background-color: tableBg;
    }
    
    .matica {
        border-collapse: separate !important;
        border-spacing: 5px;
        border: 1px solid borderColor;
    }
    
    .ilstat {
        border: 1px solid borderColor;
    }
    
    .ilstat * {
        border-right: none !important;
        border-left: none !important;
        border-top: none !important;
        border-bottom: none !important;
    }


    /*--> Studijne vysledky <--*/
    .data {
        background-color: tableBg;
    }
    
    .hdr {
        background: accentColor;
    }

    .sep-mch {
        background-color: tableSepBg !important;
    }

    .odd {
        background-color: transparent;
    }

    .evn {
        background-color: transparent;
    }

    .rgreen {
        background-color: hsla(157, 50%, 51%, .29);
    }
    ....