MagicMirror/css/custom.less

/* Magic Mirror Custom CSS Sample
 *
 * Change color and fonts here.
 *
 * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
 *
 * MIT Licensed.
 */

/* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap');*/

:root {
    --color-text: #999;
    --color-text-dimmed: #666;
    --color-text-bright: #fff;
    --color-background: black;

    --font-primary: "Roboto Condensed";
    --font-secondary: "Roboto";

    --font-size: 20px;
    --font-size-small: 0.75rem;

    --gap-body-top: 60px;
    --gap-body-right: 60px;
    --gap-body-bottom: 60px;
    --gap-body-left: 60px;

    --gap-modules: 30px;
}

div.calendar {
    table.wachenaufgaben {
        font-size: 2.5em !important;
        border-collapse: collapse;

        tr {
            opacity: 1 !important;
            font-size: 100% !important;

            td {
                font-size: 100% !important;
                text-align: left;
                border-bottom: 5px solid #999 !important;
                padding: 0.2em;

                &.symbol {
                    display: table-cell;
                    color: #fff;
                    padding-right: 0;
                    min-width: 1.2em;
                    max-width: 1.2em;

                    span {
                        &.fa {
                            font-family: 'Font Awesome 6 Pro';
                            font-weight: 300;
                        }
                    }
                }

                &.time {
                    font-size: 90%;
                }
            }
        }
    }
}

div {
    &.daily-overview, &.rtw-overview, &.nktw-overview, &.ktw-overview {
        header {
            &.module-header {
                color: #fff;
                font-size: 2.5em !important;
                padding: 0.2em;
                border-bottom: 5px solid #999 !important;
            }
        }
    }
}