LaTeX-Praxisbericht-Template/studienuebersicht/style.css

body {
    margin: 0;
    padding: 0;
}

.figure {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

.table {
    width: 100%;
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "sem1 sem2 sem3 sem4 sem5 sem6"
}

.table,
.table .sem {
    grid-gap: 3mm;
}

.table .cell {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    color: #fff;
    word-wrap: break-word;
    padding: 10px;
}

.table .sem {
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr repeat(5, 2fr);
    grid-template-areas:
    "header header"
    "cell1 pra"
    "cell2 pra"
    "cell3 pra"
    "cell4 pra"
    "cell5 pra";
}

.table .sem .sem1 {
    grid-area: sem1
}
.table .sem .sem2 {
    grid-area: sem2
}
.table .sem .sem3 {
    grid-area: sem3
}
.table .sem .sem4 {
    grid-area: sem4
}
.table .sem .sem5 {
    grid-area: sem5
}
.table .sem .sem6 {
    grid-area: sem6
}

.table .sem6 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr repeat(5, 2fr);
    grid-template-areas:
        "header header"
        "pra1 pra2"
        "pra1 pra2"
        "pra1 pra2"
        "pra1 pra2"
        "pra1 pra2";
}

.table .sem6 .pra1 {
    grid-area: pra1;
}

.table .sem6 .pra2 {
    grid-area: pra2;
}

.table .sem .cell.header {
    grid-area: header;
}

.table .sem .cell.cell1 {
    grid-area: cell1;
}
.table .sem .cell.cell2 {
    grid-area: cell2;
}
.table .sem .cell.cell3 {
    grid-area: cell3;
}
.table .sem .cell.cell4 {
    grid-area: cell4;
}
.table .sem .cell.cell5 {
    grid-area: cell5;
}
.table .sem .cell.cell6 {
    grid-area: cell6;
}
.table .sem .cell.cell-pra {
    grid-area: pra;
}
.table .sem .cell > .text-vertical {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: scale(-1);
}

body {
    --col-passed: #2e9635;
    --col-failed-once: #a6a620;
    --col-failed-twice: #b43825;
    --col-pending: #6725b8;
    --col-upcoming: #2c6cd4;
    --col-not-listed: #8b8b8b;
}

.table .cell.header {
    background-color: #333;
}
.table .cell.passed {
    background-color: var(--col-passed);
}
.table .cell.failed-once {
    background-color: var(--col-failed-once);
}
.table .cell.failed-twice {
    background-color: var(--col-failed-twice);
}
.table .cell.pending {
    background-color: var(--col-pending);
}
.table .cell.upcoming {
    background-color: var(--col-upcoming);
}
.table .cell.not-listed {
    background-color: var(--col-not-listed);
}

.legend {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    padding: 0.5em;
    padding-left: 0;
}

.legend > span {
    text-decoration: underline;
}

.legend .passed {
    color: var(--col-passed);
}
.legend .failed-once {
    color: var(--col-failed-once);
}
.legend .failed-twice {
    color: var(--col-failed-twice);
}
.legend .pending {
    color: var(--col-pending);
}
.legend .upcoming {
    color: var(--col-upcoming);
}
.legend .not-listed {
    color: var(--col-not-listed);
}