e-Status usable by rdvdev2

/* ==UserStyle==
@name           ka.upc.edu - 12/5/2022, 8:42:46 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me

@var    color       primary-color           "Primary Color"             #0088d1
@var    color       primary-color-light     "Primary Color (Light)"     #5db8ff
@var    color       primary-color-dark      "Primary Color (Dark)"      #005b9f
@var    color       secondary-color         "Secondary Color"           #ffd600
@var    color       secondary-color-light   "Secondary Color (Light)"   #ffff52
@var    color       secondary-color-dark    "Secondary Color (Dark)"    #c7a500
==/UserStyle== */
@-moz-document url-prefix("https://ka.upc.edu/") {
    html,
    body {
        height: 100%;
    }

    body,
    .main {
        background-color: var(--primary-color);
        border-left: none;
    }

    .main h1 img {
        content: url("https://raw.githubusercontent.com/feathericons/feather/master/icons/home.svg");
        filter: invert(100%);
        height: 1.5em;
    }

    #header {
        border-bottom: none;
    }

    .subHeader {
        background-color: var(--primary-color-dark);
    }

    .midHeader {
        background: var(--primary-color);
        display: flex;
        align-items: center;
    }

    .midHeader img {
        height: 85%;
        padding: 5px;
    }

    #side-bar {
        background-color: var(--primary-color-light);
        border: none;
        height: 100%;
    }

    #side-bar div {
        border: none;
    }

    #side-bar a {
        color: black;
        font-weight: bold;
    }

    #side-bar a:hover {
        background-color: var(--primary-color-dark);
        color: white;
        border-radius: 5px
    }

    .sideBarTitle {
        background-color: var(--primary-color-dark);
        color: white;
        margin-bottom: 5px;
    }

    .sideBarTitle span {
        visibility: hidden;
        display: inline-block;
        width: 0;
    }

    .main h1 {
        background-color: var(--primary-color-dark);
    }

    .main .tabla_listado {
        border: none;
        border-collapse: collapse;
        background-color: transparent;
    }

    .main .tabla_listado th {
        font-size: 1.1em;
        background-color: var(--secondary-color-dark);
        color: black;
    }

    .main .tabla_listado th:first-child {
        border-top-left-radius: 10px;
    }

    .main .tabla_listado th:last-child {
        border-top-right-radius: 10px;
    }

    .main .tabla_listado tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    .main .tabla_listado tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }

    .main .tabla_listado tr:nth-child(even) td {
        background-color: var(--secondary-color);
    }

    .main .tabla_listado td {
        vertical-align: middle;
        background-color: var(--secondary-color-light);
        color: black
    }

    .main .tabla_listado td:first-child img[src$="/incorrecto.png"] {
        content: url("https://raw.githubusercontent.com/feathericons/feather/master/icons/x.svg");
        filter: invert(19%) sepia(70%) saturate(6355%) hue-rotate(2deg) brightness(94%) contrast(133%) drop-shadow(1px 1px 1px);
    }

    .main .tabla_listado td:first-child img[src$="/correcto.png"] {
        content: url("https://raw.githubusercontent.com/feathericons/feather/master/icons/check.svg");
        filter: invert(48%) sepia(86%) saturate(1862%) hue-rotate(84deg) brightness(128%) contrast(115%) drop-shadow(1px 1px 1px);
    }

    .main .tabla_listado a {
        color: black
    }

    #footer {
        padding: 0;
    }

    form div {
        display: flex;
        flex-direction: column;
    }

    form div label {
        color: black;
        min-width: auto;
        margin: auto;
        text-align: left;
        padding-bottom: 5px;
    }

    form div select {
        color: black;
        min-width: auto;
        margin: auto;
        border-radius: 15px;
        border: none;
        padding: 5px;
        text-align: center;
    }

    form div input {
        padding: 5px;
        border: none;
        border-radius: 15px;
        text-align: left;
        margin: auto;
    }

    div.submit input,
    form input.submit {
        background-color: var(--secondary-color);
        border: none;
    }

    div.submit input:hover,
    form input.submit:hover {
        background-color: var(--secondary-color-dark);
        color: black;
        border: none;
        box-shadow: 0px 0px 2px;
    }

    form input.submit {
        margin-bottom: 5px;
    }

    .flash_info {
        background-color: var(--primary-color-light);
        color: black;
        border: none;
        border-radius: 15px;
        box-shadow: 1px 1px 1px;
    }

    #problema_preguntas table {
        border-collapse: collapse;
    }

    .fila_pregunta {
        background-color: transparent;
    }

    .fila_pregunta:nth-child(odd) td {
        background-color: var(--secondary-color-light);
    }

    .fila_pregunta:nth-child(even) td {
        background-color: var(--secondary-color);
    }

    .fila_pregunta:first-child td:first-child {
        border-top-left-radius: 10px;
    }

    .fila_pregunta:first-child td:last-child {
        border-top-right-radius: 10px;
    }

    .fila_pregunta:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    .fila_pregunta:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }

    .respuesta div input {
        border: 1px solid var(--secondary-color-dark);
    }

    td:first-child img[src$="/incorrecto.png"] {
        content: url("https://raw.githubusercontent.com/feathericons/feather/master/icons/x.svg");
        filter: invert(19%) sepia(70%) saturate(6355%) hue-rotate(2deg) brightness(94%) contrast(133%) drop-shadow(1px 1px 1px);
        padding-left: 5px;
        padding-top: 5px;
    }

    td:first-child img[src$="/correcto.png"] {
        content: url("https://raw.githubusercontent.com/feathericons/feather/master/icons/check.svg");
        filter: invert(48%) sepia(86%) saturate(1862%) hue-rotate(84deg) brightness(128%) contrast(115%) drop-shadow(1px 1px 1px);
        padding-left: 5px;
        padding-top: 5px;
    }

    .mensaje_respuesta {
        background-color: transparent;
        color: red;
        text-align: left;
    }

    #puntuacion {
        display: flex;
        justify-content: center;
    }

    #puntuacion table {
        border-collapse: collapse;
        margin: auto;
    }

    #puntuacion table th {
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: var(--secondary-color-dark);
        color: black;
    }

    #puntuacion table td {
        padding: 10px;

        background-color: var(--secondary-color-light);
        color: black;
    }

    #puntuacion table tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    #puntuacion table tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }

    div#star_rating {
        visibility: hidden;
        width: 0;
    }

    .tooltip {
        border-radius: 5px;
        box-shadow: 0px 0px 5px;
    }

    .tooltip h1 {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: var(--secondary-color-dark);
        color: black;
    }

    .tooltip p {
        padding-top: 5px;
    }
}