MMM-MyCalendar.css

/* MMM-MyCalendar | Anpassung an den OnSpotify Stil */
.MMM-MyCalendar {
  display: flex;
  justify-content: center;
  font-size: var(--ONSP-INTERNAL-PLAYER-FONT-BASE);
}

.MMM-MyCalendar .ONSP-Base {
  /* Verwende die gleichen Styles wie in OnSpotify */
}

.MMM-MyCalendar .player {
  display: flex;
  flex-direction: column;
  position: relative;
  width: var(--ONSP-INTERNAL-PLAYER-SIZE-WIDTH);
  animation: var(--ONSP-INTERNAL-LOWPOWER-FADEIN) var(--ONSP-INTERNAL-PLAYER-TRANSITION-TIME);
  text-align: left;
  gap: 0.3em; /* Reduzierter Abstand zwischen den Einträgen */
  z-index: 1;
  margin-bottom: 0.5em; /* Zusätzliche Reduzierung des Abstands */
}

.MMM-MyCalendar .player .header {
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertikale Zentrierung */
  gap: 0.3em; /* Anpassung des Abstands zwischen den Elementen */
}

.MMM-MyCalendar .player .header .icon {
  font-size: 1.5em; /* Größe des Icons anpassen */
  color: var(--ONSP-INTERNAL-COLOR-MUTED);
}

.MMM-MyCalendar .player .header .visual {
  background-color: var(--ONSP-INTERNAL-PLAYER-COLOR-TITLE);
  width: 0.08em;
  border-radius: 1em;
  height: 2em; /* Höhe an den Text anpassen */
}

.MMM-MyCalendar .player .header .names {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  flex: 1;
  align-items: flex-start;
}

.MMM-MyCalendar .player .header .names .title {
  display: flex;
  align-items: center;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--ONSP-INTERNAL-PLAYER-COLOR-TITLE);
}

.MMM-MyCalendar .player .header .names .subtitle {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: var(--ONSP-INTERNAL-COLOR-MUTED);
  font-weight: 100;
}

:root {
  /* CSS-Variablen aus MMM-OnSpotify */
  --ONSP-INTERNAL-PLAYER-FONT-BASE: inherit;
  --ONSP-INTERNAL-PLAYER-SIZE-WIDTH: 15em;
  --ONSP-INTERNAL-LOWPOWER-FADEIN: none;
  --ONSP-INTERNAL-PLAYER-TRANSITION-TIME: 1500ms;
  --ONSP-INTERNAL-PLAYER-GAP: 0.5em;
  --ONSP-INTERNAL-PLAYER-COLOR-TITLE: #FFF;
  --ONSP-INTERNAL-PLAYER-MEDIA-CORNERS: 0.60em;
  --ONSP-INTERNAL-COVER-FADE-TIME: 2500ms;
  --ONSP-INTERNAL-COVER-FADE-EASING: cubic-bezier(.23,1.12,.95,.9);
  --ONSP-INTERNAL-COLOR-MUTED: #b9b9b9;
  /* Weitere Variablen nach Bedarf */
}

/* Optional: Weitere Anpassungen, falls notwendig */

/* Reduzierung des Abstands zwischen den Einträgen */
.MMM-MyCalendar .player {
  gap: 0.3em;
  margin-bottom: 0.5em;
}

/* Positionierung des Icons links neben der Pipe */
.MMM-MyCalendar .header {
  align-items: center;
  gap: 0.3em;
}

.MMM-MyCalendar .header .icon {
  font-size: 1.5em;
  color: var(--ONSP-INTERNAL-COLOR-MUTED);
}

.MMM-MyCalendar .header .visual {
  height: 2em;
}

/* Anpassung der Titel- und Untertitelstile */
.MMM-MyCalendar .header .names .title {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--ONSP-INTERNAL-PLAYER-COLOR-TITLE);
}

/* Container für den Titel */
.MMM-MyCalendar .header .names .title {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

/* Der animierte Text */
.MMM-MyCalendar .header .names .title .marquee {
  display: inline-block;
  animation: marquee 15s linear infinite;
  animation-delay: 15s;
}

/* Keyframes für den Marquee-Effekt */
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0%);
  }
  90% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.MMM-MyCalendar .header .names .subtitle {
  font-size: 0.9em;
  color: var(--ONSP-INTERNAL-COLOR-MUTED);
  font-weight: 100;
}

/* Falls Sie die Farbe der Pipe basierend auf der Kategorie anpassen möchten,
   können Sie dies hier tun, indem Sie Klassen für jede Kategorie hinzufügen. */
/* Beispiel: */
.MMM-MyCalendar .header .visual.meet-friends {
  background-color: #FF6347; /* Tomatenrot */
}

.MMM-MyCalendar .header .visual.holidays {
  background-color: #FFD700; /* Gold */
}

/* Fügen Sie ähnliche Regeln für andere Kategorien hinzu */

/* Hinweis: Stellen Sie sicher, dass Sie die entsprechende Klasse im JavaScript hinzufügen,
   um diese Styles zu aktivieren. */