dark, simple mycpm by bruno

/* ==UserStyle==
@name           mycpm
@namespace      github.com/openstyles/stylus
@version        1.7.0
@description    Stile scuro e moderno per mycpm
@author         bruno
==/UserStyle== */
@-moz-document domain("mycpm.it") {
/* mycpm.it generico */
:root {
    --margine: 25px;
    --bg: hsl(200, 7%, 8%);
    --blu: hsl(196, 70%, 46%);
    --blu-trasp: hsl(195.5, 70.3%, 46.3%);
    --rosa: hsl(354.8, 83.3%, 81.2%);
    --txt-chiaro: hsl(30, 2.8%, 72.2%);
    --txt-scuro: hsl(33.3, 4.7%, 62.5%);
    --txt-piuscuro: hsl(34.3, 5.6%, 51.4%);
    --grigio: hsl(0, 0%, 20%);
    --grigio-scuro: hsl(0, 13.7%, 10%);
    --grigio-meta: hsl(0, 0%, 20.8%);
    /* metà */
    --grigio-puro: hsl(0, 0%, 12.2%);
    --grigio-chiaro: hsl(0, 0%, 20%);
    --grigio-piuchiaro: hsl(0, 0%, 39.6%);
}

/* reset iniziali */
/* per dimostrazioni */
/*  
    *{
    transition: 1.2s
}*/
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
    padding: 0
}

#imgAvatar {
    /* avatar 160px x 160px */
    content: url(https://shrph.altervista.org/img/tigre160px.png);
    margin-top: 12.5px;
    margin-bottom: 2.5px;
    border: 2px solid var(--grigio-meta);
    transition: 0.2s;
    transition-timing-function: ease-in-out;
}

#imgAvatar:hover, .navbar-brand:hover {
    filter: brightness(1.1);
    scale: 1.1;
}

html {
    color-scheme: dark !important;
    scrollbar-color: #373b3e #1a1c1d;
}

body, .sidebar .nav .nav-item .nav-link,
.sidebar {
    color: var(--txt-chiaro) !important;
    line-height: 1;
}


.sidebar .sidebar-header + .sidebar-nav {
    height: max-content !important;
}

/* mini profilo in alto */
/*
.sidebar {
    display: inline-grid;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 20px;
    margin-top: 20px;
}

.sidebar-header {
    order: 2;
}*/
.row,
.card-header {
    margin: 0;
}


.text-muted,
i {
    color: var(--txt-scuro) !important;
}

a {
    color: var(--blu);
    text-decoration: none !important;
}
a:focus, a:hover {
    color: var(--blu-trasp);
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--txt-piuscuro) !important;
}

#background {
    background-image: none
}

.modal-body input, textarea {
    padding: 10px;
}

/*                 logo cpm */
header.navbar .navbar-brand {
    position: absolute;
    right: 0;
    /*       togli commento per centrare              margin: auto; */
    /*       togli commento per centrare              width: 100%; */
}

.sidebar .sidebar-header {
    height: 150px;
}

#lblNomeStudente {
    font-weight: bold;
}

.sidebar-header > div.text-muted {
    /*testo cpm id*/
    visibility: hidden;
}

#lblUsername {
    /* ID cpm */
    visibility: visible !important;
    transform: translateX(-133.3%);
    position: absolute;
    font-weight: initial;
    margin-top: 5px;
}

.card,
.col-sm-5 > h3:nth-child(1) {
    margin-bottom: 0 !important;
}

.col-md-6,
.container-fluid,
.card-block {
    padding: 0 !important;
}

.container-fluid {
    margin-top: 10px;
}

/*spazio extra tra sezioni*/
div.col-md-6:nth-child(2) > div:nth-child(3),
div.row:nth-child(2) {
    margin-top: 25px;
}

@media (400px<width<=580px) {
    .card-group {
        padding: 0 calc(15px + var(--margine));
    }
}

.card-group {
    /*display: grid;*/
    width: 100%;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, 186px);
    margin: auto;

    margin-left: calc(var(--margine));
}


body,
.main,
.app-body,
table,
.card,
header.navbar,
header.navbar .navbar-brand,
.sidebar,
.sidebar .sidebar-header,
.card-header,
#background,
#main-page,
.modal-content {
    background-color: var(--bg);
}

.card,
header.navbar,
.navbar-brand,
.b-r-1,
ul.icons-list li .desc,
.table th,
.table td,
.card-header,
.header,
.email-app main ul.messages-list li:hover {
    border: none !important;
}

.col-sm-7,
hr,
.progress {
    display: none
}

/* testi blu */
#ContentPlaceHolder1_grdViewElencoCorsi > tbody > tr > td > span,
.pull-right > a:nth-child(1) > span:nth-child(1) {
    font-size: 12px !important;
    text-transform: initial !important;
    color: var(--txt-piuscuro) !important;
}

a:hover {
    text-decoration: none;
}

.navbar-nav.b-r-1 {
    /* icona apri menù*/
    position: absolute;
    top: 15px;
}

/*eventi nel mese di*/
div.col-md-6:nth-child(2) > div:nth-child(1) {
    display: none;
}



/* testo prenotazione attiva in home*/
div.col-md-6 div.card div.card-block ul.icons-list li div.desc small {
    display: none;
}

.bg-primary {
    background-color: #0000 !important;
}

ul.icons-list li .desc .title {
    transform: translateY(35%);
}

div.col-md-6 div.card div.card-block ul.icons-list li div.value strong {
    transform: translateY(-30%);
}

.col-sm-5 {
    margin: auto;
}

button.navbar-toggler.mobile-sidebar-toggler.hidden-lg-up {
    outline: none;
    z-index: 99;
}

div.card-block div.h2.text-muted.text-right.mb-2 i {
    display: none;
}

/* vedi tutte le prenotazioni */
.pull-right > a:nth-child(1) > span:nth-child(1) {
    position: relative;
    left: 10px;
    visibility: hidden;
}

.pull-right > a:nth-child(1) > span:nth-child(1):after {
    visibility: visible;
    position: absolute;
    left: 0px;
    content: 'Mie prenotazioni';
    color: var(--blu);
    font-weight: bold;
}

/* le date in home delle pronotazioni */
div.container-fluid div.animated.fadeIn div.row div.col-md-6 div.card div.card-block ul.icons-list li div.value div.small.text-muted > span {
    position: relative;
    right: 123%;
    top: 10px;
}

@media only screen and (max-width: 750px) {


    .container-fluid > .row > .col-md-6 {
        width: 100%;
    }
}

.h2.text-muted.mb-2 {
    width: max-content;
}

h2,
.h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

div.card-block div.h2.text-muted.text-right.mb-2 {
    text-align: left !important;
    margin-left: -2px;
    font-size: 1.5rem;
}

.icon-book-open {
    visibility: hidden;
}

/* spazio sotto a Avvisi casting mat didattico in home  (e si spera non altrove)*/
.card-block > .mb-2 {
    margin-bottom: 5px !important;
}

.card-group > .card > div:nth-child(1) > .text-muted.text-uppercase.font-weight-bold {
    visibility: hidden;
}

.card-group > .card > div:nth-child(1) > small:nth-child(3) > a:nth-child(1):after {
    content: 'Apri';
    visibility: visible;
    position: absolute;
    left: 0;
    text-transform: initial;
}

footer {
    display: none;
}

.sidebar .nav .nav-item.nav-dropdown.open {
    background-color: var(--grigio-scuro);
    background-image: none;
}


.badge {
    background-color: var(--grigio-meta)
}

/** solo MOBILE**/
@media only screen and (max-width: 600px) {
    :root {
        --margine: 1px;
    }

    .sidebar-header > div:nth-child(2) {
        /*                         permette al testo di andare a capo per nomi/cognomi lunghi */
        line-height: 13px;
        margin-bottom: 10px;
    }



    i.icon-book-open {
        display: none !important;
    }

    div.container-fluid div.animated.fadeIn div.row div.col-md-6 div.card div.card-block ul.icons-list li div.value div.small.text-muted > span {
        position: initial;
    }

    div.card-block ul.icons-list li div.desc {
        margin: 10px;
    }

    .col-md-6 > div > div > ul > li {
        width: 100%;
    }

    ul.icons-list li .value {
        right: 10px;
    }

    ul.icons-list li div.value div.small.text-muted {
        position: relative;
        right: 100px;
        top: 10px;
    }

    .pull-right > a:nth-child(1) > span:nth-child(1) {
        left: 0;
    }

    #ContentPlaceHolder1_grdViewElencoCorsi {
        width: 100%;
    }

    /* fine mobile */
}

/*transizioni + rapide*/
.app-header,
.app-footer,
.sidebar,
.main,
.aside-menu {
    transition-duration: 0.1s;
    /* transition-property: margin-left, margin-right; */
}

.card-group > div > div:nth-child(1) > div:nth-child(1) {
    /*                     controfix  */
    visibility: visible;
}

header.navbar .navbar-brand {
    background-color: rgb(19, 21, 22);
    background-image: url(https://shrph.altervista.org/img/cpmlight.png);
    transition: .2s;
}


/* CORSI */
.card-header {
    padding-bottom: 0;
}

div#ContentPlaceHolder1_UpdatePanel1 div.row div.col-sm-6 div.card div.card-header h3.h2.text-muted.mb-2 {
    margin: 10px !important;
}




/* AVVISI */
.email-app main .toolbar {
    border: 0;
}

div.card.email-app main div.toolbar {
    display: none;
}

.email-app main {
    padding: 0;
}

.email-app main ul.messages-list li a {
    color: var(--txt-chiaro)
}


.email-app main ul.messages-list li .action {
    visibility: hidden;
}

.email-app main ul.messages-list li:hover {
    background-color: var(--grigio-puro)
}

.email-app main .message .header .avatar {
    content: url(https://shrph.altervista.org/img/mailcpm2.png);
}

/* Rotellina dropdown */
.dropdown-menu,
.dropdown-header {
    background-color: var(--bg);
}
...