MagicMirror/css/custom.css

/* 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;
}
div.calendar table.daily-overview-table tr {
  opacity: 1 !important;
  font-size: 100% !important;
}
div.calendar table.daily-overview-table tr td {
  font-size: 100% !important;
  text-align: left;
  border-bottom: 5px solid #999 !important;
  padding: 0.2em;
}
div.calendar table.daily-overview-table tr td.symbol {
  display: table-cell;
  color: #fff;
  padding-right: 0;
  min-width: 1.2em;
  max-width: 1.2em;
}
div.calendar table.daily-overview-table tr td.symbol span.fa {
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
}
div.calendar table.daily-overview-table tr td.time {
  font-size: 90%;
}
div.daily-overview header.module-header,
div.rtw-overview header.module-header,
div.nktw-overview header.module-header,
div.ktw-overview header.module-header {
  color: #fff;
  font-size: 2.5em !important;
  border-bottom: none;
  margin-bottom: 1em;
}