Wie setze ich die Hintergrundfarbe für den ausgewählten Tag bei bereits veränderter Hintergrundfarbe?

In der Nacht vom 30.05. auf den 31.05.2023 werden in der Zeit zwischen 22:00 Uhr und 08:00 Uhr Wartungsarbeiten am Server durchgeführt. Daher wird die Webseite in dieser Zeit nur eingeschränkt erreichbar sein.
  • • Thunderbird-Version: 102.11.0

    • Betriebssystem: Windows 10 22H2

    • Google-Kalender mit "Provider for Google-Calendar": nein

    • Google- oder sonstiger Kalender mit WebDAV / CalDAV: nein


    Dank der Hilfe hier im Forum weiß ich nun, wie ich mit einen Eintrag in userChrome.css Feiertage durch eine andere Hintergrundfarbe hervorheben kann, z.B.

    CSS
    /* Pfingstmontag */
    .calendar-month-day-box-current-month[year="2023"][month="5"][day="29"] .calendar-month-day-box-list {
            background-color: var(--viewWeekendBackground) !important;
    }

    Dieser Eintrag überschreibt allerdings auch die Farbe für den ausgewählten Tag. D.h. wenn ich einen Feiertag im Kalender auswähle, ändert sich dessen Hintergrundfarbe nicht (sondern nur die Farbe des oberen Balkens, in dem die Kalenderwoche und das Datum stehen).


    Ist es möglich, eine Hintergrundfarbe anzugeben, die benutzt werden soll, wenn einer der Feiertage im Kalender ausgewählt wird?

  • Ist es möglich, eine Hintergrundfarbe anzugeben, die benutzt werden soll, wenn einer der Feiertage im Kalender ausgewählt wird?

    Für den aktuellen Tag verwendest Du zusätzlich [relation="today"][selected="true"] und für einen selektierten Tag verwendest Du nur [selected="true"], also ungefähr so *.

    *

    CSS
    /* Aktueller Tag der selektiert ist. */
    .calendar-month-day-box-current-month[year="2023"][month="5"][day="29"][relation="today"][selected="true"] .calendar-month-day-box-list {
            background-color: var(--viewWeekendBackground) !important;
    }
    /* Ein Tag der selektiert ist */
    .calendar-month-day-box-current-month[selected="true"] .calendar-month-day-box-list {
            background-color: #F20 !important;
    }

    und wech

    Dharkness

  • Ah, ich muss für jeden Feiertag, dessen Hintergrundfarbe ich geändert habe, zusätzlich einen Eintrag für die Hintergrundfarbe bei Auswahl machen, also z.B.

    CSS
    /* Pfingstmontag */
    .calendar-month-day-box-current-month[year="2023"][month="5"][day="29"] .calendar-month-day-box-list {
            background-color: var(--viewWeekendBackground) !important;
    }
    .calendar-month-day-box-current-month[year="2023"][month="5"][day="29"][selected="true"] .calendar-month-day-box-list {
            background-color: #F20 !important;
    }

    Denn wenn ich nach all den Einträgen für die Feiertage einen "pauschalen" Eintrag für den ausgewählten Tag mache, etwa so

    CSS
    /* Pfingstmontag */
    .calendar-month-day-box-current-month[year="2023"][month="5"][day="29"] .calendar-month-day-box-list {
            background-color: var(--viewWeekendBackground) !important;
    }
    /* jeder ausgewählte Tag */
    .calendar-month-day-box-current-month[selected="true"] .calendar-month-day-box-list {
            background-color: #F20 !important;
    }

    hat das keine Wirkung auf die Feiertage - zumindest bei meinen Tests.

  • Und was leider auch nicht funktioniert, ist es, die neue Hintergrundfarbe auf nicht ausgewählte Feiertage zu beschränken. Durch einen Eintrag mit dem Zusatz [selected="false"] wie z.B.

    CSS
    .calendar-month-day-box-current-month[year="2023"][month="5"][day="29"][selected="false"] .calendar-month-day-box-list {
            background-color: var(--viewWeekendBackground) !important;
    }

    wird die Hintergrundfarbe des Feiertags überhaupt nicht verändert. Das wundert mich, weil [selected="true"] ja Wirkung zeigt.

  • Zusatzfrage: Wie kann ich zusätzlich zum "großen" Feld eines Feiertags auch den Balken oben, in dem Woche und Datum stehen, eine neue Hintergrundfarbe verpassen? Die Balken haben bislang noch die Farbe "normaler" Tage.

  • Wie kann ich zusätzlich zum "großen" Feld eines Feiertags auch den Balken oben, in dem Woche und Datum stehen, eine neue Hintergrundfarbe verpassen? Die Balken haben bislang noch die Farbe "normaler" Tage.

    Das habe ich so * gelöst.

    CSS
    .calendar-month-day-box-current-month[month="x"][day="x"] .calendar-month-day-box-dates .calendar-month-day-box-week-label,
    .calendar-month-day-box-current-month[month="x"][day="x"] .calendar-month-day-box-dates .calendar-month-day-box-date-label {
        background-color: #8AD1A4 !important;
        color: #000 !important;
    }

    Wobei das x durch den Monat und den Tag zu ersetzen ist.

    und wech

    Dharkness

  • Das habe ich so * gelöst.

    CSS
    .calendar-month-day-box-current-month[month="x"][day="x"] .calendar-month-day-box-dates .calendar-month-day-box-week-label,
    .calendar-month-day-box-current-month[month="x"][day="x"] .calendar-month-day-box-dates .calendar-month-day-box-date-label {
        background-color: #8AD1A4 !important;
        color: #000 !important;
    }

    Ja, danke, das funktioniert so auch bei mir.

  • In diesem Fall gibt es [selected="true"] nicht, es müsste wohl eher :not([selected="true"]) heißen.

    Ich habe versucht, :not([selected="true"]) an verschiedenen Stellen einzusetzen, bislang ohne Erfolg. Wo in

    CSS
    /* Pfingstmontag */
    .calendar-month-day-box-current-month[year="2023"][month="5"][day="29"] .calendar-month-day-box-list {
            background-color: var(--viewWeekendBackground) !important;
    }

    gehört müsste das denn hin?

  • für nicht selektierte Felder muss das nicht verwendet werden

    Ich dachte, ich könnte damit die Änderung der Hintergrundfarbe auf ausgewählte Felder beschränken und mir zusätzliche Einträge für ausgewählteFelder sparen, in denen dann nur wieder die reguläre Auswahlfarbe gesetzt werden. Im Moment habe ich vier Einträge für jeden Feiertag:

    In Wirklichkeit stehen natürlich in den vier Gruppen auch die Einträge für dei anderen Feiertage drin. Aber wenn ich die beiden oberen Gruppen auf nicht ausgewählte Tage beschränken könnte, wären die beiden unteren Gruppen nicht mehr erforderlich.