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 {
        &.daily-overview-table {
            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;
                border-bottom: none;
                margin-bottom: 1em;
            }
        }
    }
}