SURF SAM by baszoetekouw

/* ==UserStyle==
@name         Bruikbare UI voor SURF SAM
@version      20241216.08.30
@namespace    https://userstyles.world/user/bas.zoetekouw@surf.nl
@description  Maak de UI wat handiger voor het invullen avn uren.
@author       bas.zoetekouw@surf.nl
@license      MIT
==/UserStyle== */

@-moz-document domain("sam.surf.nl") {
/* headings */
/* grey bar at the top */
.navbar-fixed-top {
    /* border: solid green; */
    border-bottom: thick solid black;
    
    /* remove hamburger that's not a hamburger */
    .asMetaHamburger {
        display: none;
    }
}

/* white bar just below */
.navbar-static-top {
    border: solid red;
    height: 0px;
    
    /* remove white bar */
    .logomenubar-fixed {
        height: 0px!important;
    }
    /* remove "Handboek AOIB" link */
    nav { 
        display: none; 
    }
    
    /* move logo up */
    #logo1 {
        /* border: thin solid red!important; */
        padding: 0!important;
        margin: 0!important;
        position: absolute;
        display: block;
        top: -46px!important;
        z-index: 9999;
    }
}

/* remove footer */
#ft {
    /* make very thin and hide contents */
    height: 0px;
    min-height: 0px!important;
    display: block;
    overflow: hidden;
    /* move to bottom of page */
    top: 100%!important;  
}


/* main */
.qvWrap {
    padding: 0;
    margin: 0;
}
.qvMain{
    #mainContent{
        /* remove inklapknop */
        .qvLayoutTogglePlaceHolder {
            display: none;
        }
        /* make width */
        .group.tools,
        .brwCounter {
            width: fit-content;
        }
        .overflow,
        #fullBrwGrid_c,
        #pageBrw {
            width: max-content;
        }
    }
    #toc {
        /*border: thin solid green; */
        height: 1px!important;
        min-height: 1px!important;
        #toc_scroll {
            /* border: thin solid magenta; */
            height: auto!important;
            position: fixed;
            left: 20px!important;
            top: 64px!important;
            
        }
    }
    #e-side {
        /* border: thin solid red; */
        height: 1px!important;
        min-height: 1px!important;
        #e-side_scroll {
            /* border: thin solid cyan; */
            height: auto!important;
            position: fixed;
            left: 20px!important;
            top: calc(64px + 8em)!important;
        }
    }
    
}


/* remove invisible debug thingy */
#qvDebug {
    display: none;
}



/* remove useless menu box */
/*
x.as12 #toc {
    display: none;
}
td.qvDamper {
    display: none;
}
*/

/* fix width */
/*
.as12 .group.tools,
.as12 .brwCounter {
    width: fit-content;
}
.as12 .overflow,
.as12 #fullBrwGrid_c,
.as12 #pageBrw {
    width: max-content;
}
*/
/*
.as12 .qvDebug,
.as12 .qvWrap.container-fluid {
    display: none;
}
*/

/* move dumb box of tools */
/*
.as12 .row-fluid {
    display: flex;
    border: solid red;
}
.as12 #toc {
    order: 1;
    width: 0;
    margin: 0;
    overflow: visible;
}
.as12 #e-side {
    order: 2;
    margin-left: 0;
    margin-right: 2em;
}
.as12 #mainContent {
    order: 3;
}
.as12 #toc_scroll {
    width: max-content !important;
}
*/


/*
.as12 .qvWrap {
    margin-bottom: 0;
}
*/


/*
URENREGISTRATIE

We schonen de urenregistratietabel op; die heeft te veel zinloze kolommen,
en de kolommen zijn te breed waardoor de tabel onpraktisch breed wordt.
We halen dus kolommen weg, passen de breedte aan, en tweaken het contrast in edit mode.

We matchen op de items in het hamburgermenu bovenaan de tabel; 
dat is een van de weinige elementen in SAM waar een pagina-specifieke id in zit 
(de rest van de specifieke elementen zit alleen in de text() van de elementen, 
en die kan je via css niet matchen).

Daarna zoeken we dan vanuit dat hamburger-menu-element de tabel op waar we aan aan knutselen

match op:
  zoek een element met class .multiActionsAndShortcutsPanel 
  (dat is het hamburgermenu rechts bovenaan de tabel)
  met daarin een #vrijgevenweek element ("Weekstaat wel/niet goedkeuren")
  deze is specifiek voor de urentabel-pagina

  via de :has() zoeken we nu een element waar deze inzit, die een sibling is (~) 
  van een element waar de tabel in zit
   

Binnen die tabel moeten we dan nog onderscheid maken tussen de view- en de edit-versie, 
want die hebben andere kolommen.
De view-tabel heeft class .gqDrill, de edit-tabel niet.

*/
:has(.multiActionsAndShortcutsPanel #vrijgevenweek) ~ * table {
    /*border: solid blue; */
    /* verwijder kolommen, view mode */
    &.qvDrill {
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(6) {
            border: solid green;
            display: none;
        }
    }
    /* verwijder kolommen, edit mode */
    &:not(.qvDrill) {
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(5) {
            border: solid green;
            display: none;
        }
    }
    
    /* zorg dat de headings van tabellen niet de breedte van de kolommen bepalen en zet de breedte van de inputveldjes */
    .qvLabel,
    input {
        width: 2em;
    }
}


/* EDITABLE TABLE TWEAKS
 * general tweaks for alle editable tables 
 */
/* highlight active row  */
.qvEditRow > td {
    /* background-color: #fff !important; */
    background-color: #ff0 !important;
}

/* improve contrast in ureninvoerveldjes */
.as12 select,
.as12 textarea,
.as12 input[type="text"],
.as12 input[type="password"],
.as12 input[type="datetime"],
.as12 input[type="datetime-local"],
.as12 input[type="date"],
.as12 input[type="month"],
.as12 input[type="time"],
.as12 input[type="week"],
.as12 input[type="number"],
.as12 input[type="email"],
.as12 input[type="url"],
.as12 input[type="search"],
.as12 input[type="tel"],
.as12 input[type="color"],
.as12 .uneditable-input {
    border: 2px solid #aaa;
}


/*
INKOOPOPDRACHTEN
In the same way, we can match other tables
*/
:has(.multiActionsAndShortcutsPanel #Indienen) ~ * table {
    /* border: solid cyan; */
    /* make sure labels don't determine column width */
    .qvLabel {
        width: 1em;
    }
    
}

/*
DECLARATIES
*/
:has(.multiActionsAndShortcutsPanel #gereedmelden) ~ * table {
    /* border: solid magenta; */
    /* make sure labels don't determine column width */
    .qvLabel {
        width: 1em;
    }
}




/* tweak top bar */
/* remove inklapknop */
/*
.qvLayoutTogglePlaceHolder {
    display: none;
}
*/
#qvMetaBar {
    /* margin-left: 100px; */
}
/* move link to manual */
#qv-topmenu {
    /*
    float: left;
    margin-left: 20px;
    margin-top: 50px;
    */
}
#qv-topmenu a {
    /*
    font-size: 11.9px!important;
    line-height: 1.1em;
    */
}
/* move main content up a bit */
#mainContent {
    /*
    margin-top: -80px;
    */
}

/* remove logo bar */
.qv-logomenubar {
    /*
    background-color: red;
    height: 10px!important;
    */
}
.qv-logo1 {
    /*
    height: 50px;
    margin-left: -20px;
    margin-top: -50px;
    */
}
}