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;
}

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;
                max-width: 0.7em;

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