SURF SAM by baszoetekouw

/* ==UserStyle==
@name         Bruikbare UI voor SURF SAM
@version      20241206.19.39
@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") {
/* 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 #e-side_scroll {
    /* top: 300px!important; */
}
.as12 #mainContent {
    order: 3;
}
.as12 #toc_scroll {
    width: max-content !important;
}

/* remove footer */
#ft {
    height: 0;
    overflow: hidden;
}
#ft .qv-footer-logo {
    height: 0;
    display: none;
}
.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 */
.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; */
}

/*
DECLARATIES
*/
:has(.multiActionsAndShortcutsPanel #gereedmelden) ~ * table {
    /* border: solid magenta; */
}




/* tweak top bar */
/* remove hamburger that's not a hamburger */
.asMetaHamburger {
    display: none;
}
/* 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;
}
}