Beiträge von Firefox_94.0.1

Firefox_94.0.1

Zitat von Horstmann
Zitat von Firefox_94.0.1

Danke für den Code. Damit werden sie zwar wieder weiß, jedoch habe ich dann immer noch das Problem, dass sich die Farbe bei :hover nicht wie vorgesehen verhält. Die Schaltflächen solllen im Normalzustand zwar alle weiß sein, bei :hover sollen sie jedoch die Farbe auf schwarz ändern, da man sie sonst aufgrund der definierten (und noch funktionierenden) Hintergrundfarben dann nicht mehr erkennt.

Am besten immer den ganzen aktuellen Code einstellen.
Mein Verdacht wäre, das du den Code von Speravir and deinen alten angehängt hast, dann würden vermutlich deine Hover Codes damit überschrieben. An meinem Mac sind diese Buttons anders angelegt, kann ich also nicht testen.
Kannst mal testen, eine Variante von Speravir's Code:
CSS
#main-window .titlebar-buttonbox .titlebar-button:not(:hover) {
    color: #fff !important;
 }
Oder gesamt evtl. sowas:
CSS
/* Icon Farben ändern */

#main-window .titlebar-buttonbox .titlebar-button {
    color: #fff !important;
 }


/* Mouse-over Farbe ändern */

#main-window .titlebar-buttonbox .titlebar-button:hover {
    border-radius: 5px !important;
    color: black !important;
 }

 /***** links *****/
#main-window .titlebar-min:hover{
   background:#66FF66!important; /*Farbe: hellgrün*/
 }
 
/***** mitte *****/  
#main-window .titlebar-max:hover {
   background:#FFFF00!important; /*Farbe: gelb*/
 }
 
#main-window .titlebar-restore:hover {
   background-color:#FFFF00!important; /*Farbe: gelb*/
}
 
/***** rechts *****/  
#main-window .titlebar-close:hover {
   background:#FF0000!important;   /*Farbe: rot*/
 }
Alles anzeigen

Ich bin leider erst jetzt dazu gekommen, den Code zu testen. Mit der zweiten Alternative passt es wieder.

Firefox_94.0.1

Zitat von Speravir
Zitat von Firefox_94.0.1

Doch seit dem neuesten Update funktionieren nur noch die :hover background Einstellungen. Die Symbole selbst bleiben schwarz, obwohl sie als weiß definiert wurden.

Füge auch dort ein !important hinzu. Übrigens kannst du den Code verkürzen, denn alle 3 Schalter besitzen die Klasse titlebar-button. Ich selbst hab noch aus der höheren Ebene titlebar-buttonbox davor gesetzt, um die Spezifität zu erhöhen, benötige aber trotzdem jetzt die Verstärkung. Alles in allem:
CSS
/* 3 Buttons oben rechts Farbe ändern*/
 /***** links *****/
#main-window .titlebar-buttonbox .titlebar-button {
    color: #fff !important;
 }
Sollte irdendwann mal weitere Titlebar-Buttons dazukommen, dann müsste man unter Umständen wieder auf die einzelnen Klassenbezeichner zugreifen.

Zitat von 2002Andreas

Wie du sieht, hier sind sie weiß.

Du benutzt doch ein dunkles Thema, wenn ich nicht irre, dann sind die Knöpfe schon vom Betriebssystem aus weiß. Das ist ja das Neue in Windows, dass sie jetzt nativ übernommen werden (zum Glück aber auch per CSS überregelt werden können).
Edit: Ich merke gerade, dass das wohl nur teilweise zutrifft. Ich habe bei mir selbst auf die beschriebene Weise die Farbe der Knöpfe beeinflussen können. Das scheint aber nicht für jedes Theme zu funktionieren (ich hab hier einige installiert, die ich gelegentlich für Testprofile nutze.)
Alles anzeigen

Danke für den Code. Damit werden sie zwar wieder weiß, jedoch habe ich dann immer noch das Problem, dass sich die Farbe bei :hover nicht wie vorgesehen verhält. Die Schaltflächen solllen im Normalzustand zwar alle weiß sein, bei :hover sollen sie jedoch die Farbe auf schwarz ändern, da man sie sonst aufgrund der definierten (und noch funktionierenden) Hintergrundfarben dann nicht mehr erkennt.

Firefox_94.0.1

Bisher nutze ich für die genannten Symbole folgenden Code:

CSS

/********************* 3 BUTTONS RECHTS OBEN ********************************************/

/*Mouse-over Farbe ändern*/
 /***** links *****/
#main-window .titlebar-min:hover{
   background:#66FF66!important; /*Farbe: hellgrün*/
    border-radius: 5px !important;
    color: black !important;
 }
 
/***** mitte *****/  
#main-window .titlebar-max:hover{
   background:#FFFF00!important; /*Farbe: gelb*/
    border-radius: 5px !important;
    color: black !important;
 }
 
 toolbarbutton.titlebar-restore:hover {
   background-color:#FFFF00!important; /*Farbe: gelb*/
    border-radius: 5px !important;
        color: black !important;
}
 
/***** rechts *****/  
#main-window .titlebar-close:hover{
   background:#FF0000!important;   /*Farbe: rot*/
    border-radius: 5px !important;
    color: black !important;
 }
 
/* 3 Buttons oben rechts Farbe ändern*/
 /***** links *****/
#main-window .titlebar-min{
    color: #fff;
 }
 
/***** mitte *****/  
#main-window .titlebar-max{
    color: #fff;
 }
 toolbarbutton.titlebar-restore {
    color: #fff;
}
 
/***** rechts *****/  
#main-window .titlebar-close{
    color: #fff;
 }

Alles anzeigen

Doch seit dem neuesten Update funktionieren nur noch die :hover background Einstellungen. Die Symbole selbst bleiben schwarz, obwohl sie als weiß definiert wurden.

Firefox_94.0.1

Zitat von .DeJaVu

Ich kann dir frühestens am Wochenende ein Beispiel anbieten.

Brauchst du nicht. So wie ich es in #15 geschildert hatte, funktioniert es wieder.

Firefox_94.0.1

Ich habe jetzt eine Lösung für mich gefunden:

Ich schreibe den Code jetzt vollständig neu und zwar ohne Attribute in den Klammern. Da kann ich zwar nicht so genau adressieren, jedoch besser als der Ist-Zustand und Zukunftssicherer...

Firefox_94.0.1

Zitat von .DeJaVu

Nochmal rübergeschaut, das sind ja keine Klassen oder ID, das sind Schalter, ähnlich wie in Firefox, die auf true|false stehen, in diesem Fall leer "". Ich denke, das wird auf dieser Basis nichts.
Wenn du was machen willst, dann versuch es ohne, aber du wirst wohl ohne Ketten nicht weiterkommen:
div > .class1 > .class2 > #id3 bzw. div .class1 .class2 #id3 usw., ggf. kombiniert mit/ohne >

Könntest du mir hier anhand der obersten Zeile im Kalender ein Beispiel liefern, wie das mit den Ketten funktionieren kann?

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

noch per individueller User-CSS

du hast das aus Beitrag Nr. 6 zumindest mal getestet?

Ja. Bewirkt aber nichts. Hätte mich aber auch gewundert, warum das jetzt nach 2? Jahren Probleme machen sollte.

Firefox_94.0.1

Zitat von .DeJaVu
Das hat hier jetzt keine Minute gedauert im Inspector.
Code
.cal_title[_ngcontent-qrh-c70]
Und vermutlich dürft es an anderen Stellen ebenso sein. Und genau das folgende habe ich mir gedacht für den Reload:
Code
.cal_title[_ngcontent-whv-c70]
haha, sehr witzig. Freunde dich mal mit Wildcards für CSS an
https://www.geeksforgeeks.org/wildcard-selec…ss-for-classes/
Also ich werd das für diesen Wust an CSS nicht durchexerzieren. Und ob man Wildcards kombinieren kann, kann ich dir auch nicht sagen. Falls doch, wird das echt heftige Schlacht mit reichlich Schachteln.

Wenn ich dich richtig verstehe: Das Problem liegt jetzt darin, dass die jetzt in die Bezeichnungen zwischen "_ngcontent" und "c-NUMMER" drei Buchstaben eingebaut haben, welche sich immer ändern? Wenn ja: Kann man dann überhaupt noch per individueller User-CSS den Style vernünftig anpassen? Wenn nein, muss ich mich wohl oder übel nach einem anderen Kalender umsehen, welchen ich dann als iFrame nutze.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

Ich habe gerade wieder etwas getestet:

Ohne deine .html Datei und deinen CSS Code zu kennen, wird Hilfe wohl kaum möglich sein.

Zitat von Firefox_94.0.1

mit einem geänderterten Element durchgeführt

Evtl. ein Zeichen im Code vergessen!?

Ich habe einen Testkalender erstellt. Für diesen wird nachfolgende css genutzt:

CSS

@-moz-document url(https://kalender.digital/3ff6becc91f26c438dc1?iframe=true){
/*Text markieren*/
::selection { background: #0001ba; color: #fff800; }
/*Footer entfernen*/
.container[_ngcontent-c41] {
 background-color: #fafafa;
 height: 25px;
 display: none !important;
 align-items: center;
}
/*Kalendernamenzeile*/
.left[_ngcontent-c36] {
 display: flex;
 align-items: center;
 padding-left: 10px;
 background-color: #00016e !important;
}
.center[_ngcontent-vof-c61] {
 flex-grow: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #00016e !important;
 color: #ffd700 !important;
}
.right[_ngcontent-c36] {
 display: flex;
 align-items: center;
 padding-right: 10px;
 background-color: #00016e !important;
}

/*Rolle (Bearbeiter)*/
.cal_user_role[_ngcontent-c5] {
 display: flex;
 align-items: center;
 white-space: nowrap;
 color: #9c1818 !important;
}

.fa-link::before {
 content: "\f0c1";
 color: #9c1818 !important;
}
/*Menüschaltflächen rechts (Lupe + 3 Striche)*/
.fa-search:hover::before {
 content: "\f002";
 color: red !important;
}
.fa-search::before {
 content: "\f002";
 color: #ffd700 !important;
}
.cal-ctrl-btn-active[_ngcontent-c5] {
 background-color: #9f2323 !important;
 border-color: #9f2323 !important;
}
.fa-bars:hover::before {
 content: "\f0c9";
 color: red !important;
}
.fa-bars::before {
 content: "\f0c9";
 color: #ffd700 !important;
}
/*Zeile mit Monatsangabe*/
###########################################################
.cal_title[_ngcontent-jkf-c70] {
 flex-grow: 1;
 text-overflow: ellipsis;
 overflow: hidden;
 padding: 10px;
 white-space: nowrap;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 font-size: 20px;
 background-color: #00016e !important;
 color: #ffd700 !important;
 border: 5px solid #00016e !important;
}
.displayFlex[_ngcontent-c34] {
 display: flex;
 color: #ffd700 !important;
 background-color: #00016e !important;
 border: none !important;
}
.fixed_box[_ngcontent-c5] {
 position: absolute;
 display: flex;
 align-items: center;
 width: 100%;
 height: 100%;
 background-color: #00016e !important;
 color: #ffd700 !important;
}
/*alter Code*/
/* .displayFlex[_ngcontent-c32] {
 display: flex;
 color: #ffd700 !important;
 background-color: #00016e !important;
} */
.calDateString[_ngcontent-c34] {
 display: flex;
 color: #ffd700 !important;
 background-color: #00016e !important;
 margin-left: 80px !important;
}

.calDateString[_ngcontent-c32]:hover {
 font-size: 20px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 cursor: pointer;
 color: red !important;
}
.content[_ngcontent-c4] {
 display: flex;
 flex-grow: 1;
 border-top: 0px solid #dadce0 !important;
}
.mobile_time_display[_ngcontent-c34] {
 align-items: center;
 justify-content: center;
 cursor: pointer;
 background-color: #fafafa;
 border-bottom: 0px solid #fff !important;
 padding-top: 5px;
 padding-bottom: 5px;
 display: none;
}
###########################################################
.displayFlex[_ngcontent-c31] {
 display: flex;
 background-color: #00016e !important;
 color: #ffd700 !important;
}

.calDateString[_ngcontent-c31]:hover {
 font-size: 20px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 cursor: pointer;
 color: red !important;
}
.content[_ngcontent-c3] {
 display: flex;
 flex-grow: 1;
 border-top: 0px solid #dadce0 !important;
}
.mobile_time_display[_ngcontent-c31] {
 align-items: center;
 justify-content: center;
 cursor: pointer;
 background-color: #fafafa;
 border-bottom: 0px solid #fff !important;
 padding-top: 5px;
 padding-bottom: 5px;
 display: none;
}
/*Zeile mit versch. Schaltflächen*/
#############################################
.btn[_ngcontent-c34] {
 background-color: #5575a7;
 color: #fff;
 border: none !important;
}
.btn[_ngcontent-c34] {
 border: 0px solid #d8d8d8 !important;
 background: #f7f7f7;
 background-color: rgb(247, 247, 247);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #686868;
 cursor: pointer;
 padding-left: 5px;
 padding-right: 5px;
 height: 28px;
 position: relative;
}
.container[_ngcontent-c34] {
 background-color: #00016e !important;
 height: 40px;
 display: flex;
}
.toggle_btn[_ngcontent-c34] {
 font-size: 18px;
 background-color: #00016e !important;
 color: red !important;
}
.toggle_btn[_ngcontent-c34]:hover {
 font-size: 18px;
 background-color: #00016e !important;
 color: #ffd700 !important;
}

.lens_btn[_ngcontent-c34], .print_btn[_ngcontent-c34], .refresh_btn[_ngcontent-c34] {
 margin-left: 5px;
 font-size: 16px;
 background-color: #00016e !important;
 color: red !important;
}
.lens_btn[_ngcontent-c34]:hover, .print_btn[_ngcontent-c34]:hover, .refresh_btn[_ngcontent-c34]:hover {
 margin-left: 5px;
 font-size: 16px;
 background-color: #00016e !important;
 color: #ffd700 !important;
}
.fa-angle-left {
 content: "\f104";
 color: #ffd700 !important;
}
.fa-angle-left:hover {
 content: "\f104";
 color: red !important;
}
.fa-angle-right {
 content: "\f105";
 color: #ffd700 !important;
}
.fa-angle-right:hover {
 content: "\f105";
 color: red !important;
}
.today_btn[_ngcontent-c36] {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 background-color: #00016e !important;
   border-radius: 5px !important;
}
.today_btn[_ngcontent-c36]:hover {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: red !important;
 background-color: #00016e !important;
 border-radius: 5px !important;
}
.square[_ngcontent-c36] {
 height: 28px;
 width: 28px;
 padding: 0;
 color: red !important;
 background-color: #00016e !important;
}
.view_select_btn[_ngcontent-c36] {
 margin-left: 5px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 background-color: #00016e !important;
}
.view_select_btn[_ngcontent-c34]:hover {
 margin-left: 5px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #00016e !important;
 background-color: #ffd !important;
}
.view_select_btn_active[_ngcontent-c34] {
 background-color: lime !important;
 color: red !important;
}
#############################################
.btn[_ngcontent-c31] {
 background-color: #5575a7;
 color: #fff;
 border: none !important;
}
.btn[_ngcontent-c31]:hover {
 background-color: #5575a7;
 color: #fff;
 border: none !important;
}
.btn[_ngcontent-c31] {
 border: 0px solid #d8d8d8 !important;
 background: #f7f7f7;
   background-color: rgb(247, 247, 247);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #686868;
 cursor: pointer;
 padding-left: 5px;
 padding-right: 5px;
 height: 28px;
 position: relative;
}
.container[_ngcontent-c31] {
 background-color: #00016e !important;
 height: 40px;
 display: flex;
}
.toggle_btn[_ngcontent-c31] {
 font-size: 18px;
 background-color: #00016e !important;
 color: red !important;
}
.toggle_btn[_ngcontent-c31]:hover {
 font-size: 18px;
 background-color: #00016e !important;
 color: #ffd700 !important;
}

.lens_btn[_ngcontent-c31], .print_btn[_ngcontent-c31], .refresh_btn[_ngcontent-c31] {
 margin-left: 5px;
 font-size: 16px;
 background-color: #00016e !important;
 color: red !important;
}
.lens_btn[_ngcontent-c31]:hover, .print_btn[_ngcontent-c31]:hover, .refresh_btn[_ngcontent-c31]:hover {
 margin-left: 5px;
 font-size: 16px;
 background-color: #00016e !important;
 color: #ffd700 !important;
}
.fa-angle-left {
 content: "\f104";
 color: #ffd700 !important;
}
.fa-angle-left:hover {
 content: "\f104";
 color: red !important;
}
.fa-angle-right {
 content: "\f105";
 color: #ffd700 !important;
}
.fa-angle-right:hover {
 content: "\f105";
 color: red !important;
}
.today_btn[_ngcontent-c31] {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 background-color: #00016e !important;
}
.today_btn[_ngcontent-c31]:hover {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: red !important;
 background-color: #00016e !important;
}

.square[_ngcontent-c31] {
 height: 28px;
 width: 28px;
 padding: 0;
 color: red !important;
 background-color: #00016e !important;
}
.view_select_btn[_ngcontent-c31] {
 margin-left: 5px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 background-color: #00016e !important;
}
.view_select_btn[_ngcontent-c31]:hover {
 margin-left: 5px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #00016e !important;
 background-color: #ffd !important;
}
.view_select_btn_active[_ngcontent-c31] {
 background-color: lime !important;
 color: red !important;
}
/*Kalender - Tagesansicht*/
#########################################
.container[_ngcontent-c37] {
 background-color: #00016e !important;
 height: 0px !important;
 display: flex;
 align-items: center;
}
.dhx_cal_container {
 position: relative;
 overflow: hidden;
 background-color: #00016e !important;
 font-family: Arial,san-serif;
 font-size: 12px;
 border-right: 0px solid !important;
}
.contentWrapper {
 flex-grow: 1;
 position: relative;
 display: flex;
 flex-direction: column;
 border-top: 0px solid #133475 !important;
}
.dhx_cal_header {
 border-top: 0px solid #9C1818 !important;
 border-right: 0px solid #9C1818 !important;
}
.dhx_cal_data {
 border-top: 0px solid #fff !important;
}
#scheduler {
 width: 100%;
 flex-grow: 1;
 border-left: 0px solid #cecece !important;
 border-bottom: 0px solid #cecece !important;
}
.dhx_scale_hour {
 border-bottom: 1px solid #9C1818 !important;
 background-color: #9c1818 !important;
 text-align: center;
 line-height: 44px;
 color: #ffd700 !important;
 font-size: 18px !important;
 font-weight: inherit;
 overflow: hidden;
}
.dhx_scale_holder_now {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAYAAACkJ9JhAAAC93pUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjarZVtttsoDIb/s4pZApIQEsvBfJwzO+jy5wWT3CTtTNs5NbHBQpaEHkHC+Pb3DH/hokg5JDXPJeeIK5VUuGLg8b7KflJM+xnP26N/kwduZ4IhEvRyv1o9+hVy/frg4YOud3nwM8N+DNHT8L5keV7j/hok5HzLKR1DZdyDXNxeQ72OoXYUdyjnTv6+zPUe3gSGLHWFI2EeQhL30+8I5L4rJIwni0KPJGOMmbBFD2NIyNvyHn2Mrwl6T76epX1m/zn6SD7XI5ePXOaHofzjCdIPuTzd8KtjOaMA8dtEowev75M8Z/c5x726mjIymk9F7WTTwwwUL6Rc9mcZzXArxrZbQfNY4SuhGFq80BoVYlCZgRJ1qjRp7L5RQ4iJBxt65sayZS7GhZssTmk1mmxSpIsDVuMRRCDmZyy0/Zbtr5HDcyeoMsHYwv6vLfzX5O+0MOfabETRT7p1AeaVcISxyK0ntACE5uGmO8GPdvDHl/pBqYKg7jQ7FljjdZu4lL5qSzZngZ6iv7cQBevHAFIE34pgSEAgZhKlTNGYjQh5dACqiJwl8QUCpModQXISyRyMnZdvfGO0dVk58xLjbAIIxW4ysClSASslRf1YctRQVdGkqllNPWjRmiWnrDlny+uQqyaWTC2bmVux6uLJ1bObuxevhYvgDNSSixUvpdTKocJRha0K/QrJxZdc6dIrX3b5Va7aUD4tNW25WfNWWu3cpeOY6Llb9156HRQGToqRho48bPgoo07U2pSZps48bfossz6p0dm2n+03qNGhxpvU0rMnNUiD2cMEreNEFzMQ40QgbosACpoXs+iUEi9yi1ksjE2hjCB1sQmdFjEgTINYJz3ZfZH7JW5B/Ze48c/IhYXuT5ALQPc9tx9Q6+t/rm1i9y5cOY2C3TctV/ZQ+WpdUsQYv/i/+/ATBSoDq5lTOtkUeAW/ipjrVcdIEzuXkpL2GJDBNUzrqOj4Gw3/AI2fziHZLEhfAAABg2lDQ1BJQ0MgcHJvZmlsZQAAeJx9kTtIA0EURU+iokgkhSlULLZQKwOiIpYSRREUQozgr3B3Y6KQXcNugo2lYCtY+GmMWthYa2thKwiCHxArSytFGwnrmySQIMaBYQ535t558wb8+bRpufV9YNlZJzYR0ebmF7TGVwK0EwSGdNPNTM+Mx6k5vu7xqfUurLJqn/tztCRWXBN8mvCImXGywsvq3o1sRvG+cMhc1RPC58K9jhQo/Kh0o8RvilNF9qvMkBOPjQqHhLVUFRtVbK46lvCgcFfCsiXfP1fihOJNxVY6Z5brVC8MrNizM0qX2ckEk0wTRcMgxxppsoRltUVxicl+pIa/o+iPissQ1xqmOMZYx0Iv+lF/8Lu3bnKgv5QUiEDDi+d9dEPjLhR2PO/72PMKJ1D3DFd2xb+eh+FP0XcqWtcRBLfg4rqiGXtwuQ1tTxnd0YtSnUx/MgnvZ/JN89B6C82Lpb6V9zl9gLj0auoGDg6hJyXZSzXe3VTdt3/PlPv3A5MkcrSpYdcqAAAABmJLR0QA/gD7APQNBv93AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AwZDwIUilD34gAAABlJREFUCNdj+P3r8n8mBgYGhuFFPH3GywAAYf0F9jnvRKoAAAAASUVORK5CYII=);
 filter: invert(18%) sepia(9%) saturate(659%) hue-rotate(358deg) brightness(102%) contrast(104%) !important;
}
#########################################
.container[_ngcontent-c36] {
 background-color: #00016e !important;
 height: 0px !important;
 display: flex;
 align-items: center;
}
.dhx_cal_container {
 position: relative;
 overflow: hidden;
 background-color: #00016e !important;
 font-family: Arial,san-serif;
 font-size: 12px;
 border-right: 0px solid !important;
}
.contentWrapper {
 flex-grow: 1;
 position: relative;
 display: flex;
 flex-direction: column;
 border-top: 0px solid #133475 !important;
}
.dhx_cal_header {
 border-top: 0px solid #9C1818 !important;
 border-right: 0px solid #9C1818 !important;
}
.dhx_cal_data {
 border-top: 0px solid #fff !important;
}
#scheduler {
 width: 100%;
 flex-grow: 1;
 border-left: 0px solid #cecece !important;
 border-bottom: 0px solid #cecece !important;
}
.dhx_scale_hour {
 border-bottom: 1px solid #9C1818 !important;
 background-color: #9c1818 !important;
 text-align: center;
 line-height: 44px;
 color: #ffd700 !important;
 font-size: 18px !important;
 font-weight: inherit;
 overflow: hidden;
}
.dhx_scale_holder_now {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAYAAACkJ9JhAAAC93pUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjarZVtttsoDIb/s4pZApIQEsvBfJwzO+jy5wWT3CTtTNs5NbHBQpaEHkHC+Pb3DH/hokg5JDXPJeeIK5VUuGLg8b7KflJM+xnP26N/kwduZ4IhEvRyv1o9+hVy/frg4YOud3nwM8N+DNHT8L5keV7j/hok5HzLKR1DZdyDXNxeQ72OoXYUdyjnTv6+zPUe3gSGLHWFI2EeQhL30+8I5L4rJIwni0KPJGOMmbBFD2NIyNvyHn2Mrwl6T76epX1m/zn6SD7XI5ePXOaHofzjCdIPuTzd8KtjOaMA8dtEowev75M8Z/c5x726mjIymk9F7WTTwwwUL6Rc9mcZzXArxrZbQfNY4SuhGFq80BoVYlCZgRJ1qjRp7L5RQ4iJBxt65sayZS7GhZssTmk1mmxSpIsDVuMRRCDmZyy0/Zbtr5HDcyeoMsHYwv6vLfzX5O+0MOfabETRT7p1AeaVcISxyK0ntACE5uGmO8GPdvDHl/pBqYKg7jQ7FljjdZu4lL5qSzZngZ6iv7cQBevHAFIE34pgSEAgZhKlTNGYjQh5dACqiJwl8QUCpModQXISyRyMnZdvfGO0dVk58xLjbAIIxW4ysClSASslRf1YctRQVdGkqllNPWjRmiWnrDlny+uQqyaWTC2bmVux6uLJ1bObuxevhYvgDNSSixUvpdTKocJRha0K/QrJxZdc6dIrX3b5Va7aUD4tNW25WfNWWu3cpeOY6Llb9156HRQGToqRho48bPgoo07U2pSZps48bfossz6p0dm2n+03qNGhxpvU0rMnNUiD2cMEreNEFzMQ40QgbosACpoXs+iUEi9yi1ksjE2hjCB1sQmdFjEgTINYJz3ZfZH7JW5B/Ze48c/IhYXuT5ALQPc9tx9Q6+t/rm1i9y5cOY2C3TctV/ZQ+WpdUsQYv/i/+/ATBSoDq5lTOtkUeAW/ipjrVcdIEzuXkpL2GJDBNUzrqOj4Gw3/AI2fziHZLEhfAAABg2lDQ1BJQ0MgcHJvZmlsZQAAeJx9kTtIA0EURU+iokgkhSlULLZQKwOiIpYSRREUQozgr3B3Y6KQXcNugo2lYCtY+GmMWthYa2thKwiCHxArSytFGwnrmySQIMaBYQ535t558wb8+bRpufV9YNlZJzYR0ebmF7TGVwK0EwSGdNPNTM+Mx6k5vu7xqfUurLJqn/tztCRWXBN8mvCImXGywsvq3o1sRvG+cMhc1RPC58K9jhQo/Kh0o8RvilNF9qvMkBOPjQqHhLVUFRtVbK46lvCgcFfCsiXfP1fihOJNxVY6Z5brVC8MrNizM0qX2ckEk0wTRcMgxxppsoRltUVxicl+pIa/o+iPissQ1xqmOMZYx0Iv+lF/8Lu3bnKgv5QUiEDDi+d9dEPjLhR2PO/72PMKJ1D3DFd2xb+eh+FP0XcqWtcRBLfg4rqiGXtwuQ1tTxnd0YtSnUx/MgnvZ/JN89B6C82Lpb6V9zl9gLj0auoGDg6hJyXZSzXe3VTdt3/PlPv3A5MkcrSpYdcqAAAABmJLR0QA/gD7APQNBv93AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AwZDwIUilD34gAAABlJREFUCNdj+P3r8n8mBgYGhuFFPH3GywAAYf0F9jnvRKoAAAAASUVORK5CYII=);
 filter: invert(18%) sepia(9%) saturate(659%) hue-rotate(358deg) brightness(102%) contrast(104%) !important;
}
/*Kalender - Wochenansicht*/
.dhx_scale_bar {
 border-left: 0px solid #912f2f !important;
 color: #ffd700 !important;
 background-color: #9C1818 !important;
 font-size: 20px !important;
}
.dhx_multi_day_icon, .dhx_multi_day_icon_small {
 border-right: 0px solid #fff !important;
 background-color: #9C1818 !important;
}
.dhx_cal_event div {
 line-height: normal;
 color: red !important;
 font-size: 15px !important;
}
.dhx_scale_holder {
    background-color: #ffd !important;
}
.dhx_multi_day {
 position: absolute;
 background-color: #9C1818 !important;
 border-right: none;
 box-shadow: none;
 border-top: 0px !important;
 width: 1625px !important;
}
/*Kalender - Monatsansicht*/
/*Anfang des nächsten Monats*/
.notInRangeTableCell > .dhx_month_body, .notInRangeTableCell > .dhx_month_head {
 background: #ffd !important;
 color:##00016e82 !important;
}
/*Wochendend*/
.weekendTableCell > .dhx_month_body, .weekendTableCell > .dhx_month_head {
 background: #4d6b74 !important;
}
/* restl. Werktage des akt. Monat*/
.dhx_month_head {
    background-color: #ffd700  !important;
}
.dhx_month_body {
    background-color: #ffd700  !important;
}
/*aktuller Tag*/
.todayTableCell > .dhx_month_body, .todayTableCell > .dhx_month_head {
    background-color: #a72020 !important;
    color: #fff !important;
}
/*Termin*/
.dhx_cal_event_clear, .dhx_cal_event_line_start, .dhx_cal_event_line_end, .eventBgColor_0 {
    height: 25px !important;
    font-size: 15px !important;
    text-align: center !important;
    margin-left: 2px !important;
}
/*Kalender- Jahresansicht*/
.monthName {
    background-color: #9C1818 !important;
    color: #ffd700 !important;
    font-size: 15px !important;
}
/*Kalender- Listenansicht*/
  .btn[_ngcontent-c37] {
   border: 1px solid #00016e !important;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #000;
   cursor: pointer;
   padding-left: 5px;
   padding-right: 5px;
   height: 28px;
   position: relative;
   margin-left: 10px;
   color: #ffd700 !important;
   background-color: #00016e !important;
}


/*Menüleiste*/
.options[_ngcontent-c37] {
 border-bottom: 0px solid #cecece !important;
 display: inline-block;
 width: 100%;
 background-color: #9C1818 !important;
 font-size: 14px;
 color: #ffd700 !important;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
}
/*Felder in Menüleiste*/
div.btn.square.rounded.toggle_btn[_ngcontent-c35] {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}
div.btn.square.rounded.toggle_btn[_ngcontent-c35]:hover {
 background-color: #ffd700 !important;
 color: red !important;
 border-color: #ffd700 !important;
}

div.btn.square.rounded.refresh_btn[_ngcontent-c35] {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}
div.btn.square.rounded.refresh_btn[_ngcontent-c35]:hover {
 background-color: #ffd700 !important;
 color: red !important;
 border-color: #ffd700 !important;
}

div.btn.square.rounded.print_btn[_ngcontent-c35] {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}
div.btn.square.rounded.print_btn[_ngcontent-c35]:hover {
 background-color: #ffd700 !important;
 color: red !important;
 border-color: #ffd700 !important;
}

div.btn.square.left-rounded.back_btn[_ngcontent-c36] {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}
div.btn.square.left-rounded.back_btn[_ngcontent-c36]:hover {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}

div.btn.today_btn[_ngcontent-c35] {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
 border-radius: 5px !important;
}
div.btn.today_btn[_ngcontent-c35]:hover {
 background-color: #ffd700 !important;
 color: red !important;
 border-color: #ffd700 !important;
 border-radius: 5px !important;
}

div.btn.square.right-rounded.forward_btn[_ngcontent-c36] {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}
div.btn.square.right-rounded.forward_btn[_ngcontent-c36]:hover {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}

div.btn.rounded.view_select_btn[_ngcontent-c35] {
 background-color: #00016e !important;
 color: red !important;
 border-color: #00016e !important;
}
div.btn.rounded.view_select_btn[_ngcontent-c35]:hover {
 background-color: #ffd700 !important;
 color: red !important;
 border-color: #ffd700 !important;
}

div.btn.rounded.view_select_btn.view_select_btn_active[_ngcontent-c35] {
 background-color: #ffd700 !important;
 color: #red !important;
}

Terminfeld
.list[_ngcontent-c38] {
 padding: 10px;
 display: flex;
 flex-direction: column;
 background-color: #9C1818;
 color: #ffd700 !important;
}
.list-item[_ngcontent-c38] {
 padding: 10px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 border-radius: 5px;
 margin-bottom: 10px;
 background: #9C1818 !important;
 cursor: pointer;
}
.list-box {
    background-color: #9c1818 !important;
    color: #ffd700 !important;
}
.list-item-head-spacer, .eventBgColor_0 {
    border-radius:15px !important;
}

/*Neuen Termin hinzufügen / neuer Termin*/
/*Hintergrund gesamt*/
.container[_ngcontent-c10] {
 background-color: #9C1818 !important;
 height: 75%;
 width: 50%;
 border-radius: 8px;
 box-shadow: 3px 3px 22px -3px rgba(0,0,0,.75);
 padding: 10px;
 display: flex;
 flex-direction: column;
 z-index: 6;
 position: relative;
}
/*Zeilenüberschriften*/
.form_grp_title[_ngcontent-c10] {
 display: flex;
 align-items: center;
 font-size: 22px !important;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 background-color: #9C1818 !important;
}
/*Symbole vor Überschriften*/
.form_grp_icon[_ngcontent-c10] > i[_ngcontent-c10] {
 font-size: 23px;
 color: #00016e !important;
}
/* .fa-tag::before {
 content: "\f02b";
 color: #00016e !important;
}
.fa-edit::before {
 content: "\f044";
 color: #00016e !important;
}
.fa-clock::before {
 content: "\f017";
 color: #00016e !important;
}
.fa-calendar::before {
 content: "\f133";
 color: #00016e !important;
}
.fa-users::before {
 content: "\f0c0";
 color: #00016e !important;
}
.fa-map-marker-alt::before {
 content: "\f3c5";
 color: #00016e !important;
}
*/
/*Eingabefelder*/
.form_input[_ngcontent-c10] {
 outline: 0;
 border: 1px solid #00016e !important;
 border-radius: 6px;
 padding: 5px;
 font-size: 18px !important;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 -webkit-appearance: none;
 background-color: #00016e !important;
 margin-top: 15px !important;
 color: #ffd700 !important;
}
/*Link hinzufügen-Feld*/
.input-field-action-btn[_ngcontent-c10] {
    background-color: #00016e !important;
    color: #ffd700 !important;
    font-size: 16px !important;
    border-radius: 15px !important;
    border-color:#00016e !important;
}
.input-field-action-btn[_ngcontent-c10]:hover {
    background-color: #ffd700 !important;
    color: #9C1818 !important;
    font-size: 16px !important;
    border-radius: 15px !important;
    border-color: #ffd700 !important;
}
.fa-link::before {
 content: "\f0c1";
 color: #9C1818 !important;
}
/*Zeitraum*/
.date_prelude[_ngcontent-c24] {
 width: 45px;
 color: #ffd700 !important;
 font-size: 17px !important;
}
.date_input_box[_ngcontent-c24] {
 font-size: 16px !important;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 background-color: #00016e !important;
 border-color: #00016e !important;
 color: #ffd700 !important;
}
.date_input_box[_ngcontent-c24]:hover {
 font-size: 16px !important;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 background-color: #ffd700 !important;
 border-color: #ffd700 !important;
 color: #9C1818 !important;
}
.form_input[_ngcontent-c24] {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 font-size: 16px !important;
 background-color: #00016e !important;
 border-color: #00016e !important;
 color: #ffd700 !important;
}
.form_input[_ngcontent-c24]:hover {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 font-size: 16px !important;
 background-color: #ffd700 !important;
 color: #9c1818 !important;
 border-color: #ffd700 !important;
}
.prelude_text[_ngcontent-c24] {
 width: 100px;
 color: #ffd700 !important;
 font-size: 18px !important;
}
.switch[_ngcontent-c24=""] {
    background-color: #00016e !important;
}
.switch_square[_ngcontent-c24] {
 width: 20px;
 height: 20px;
 background-color: #ffd700 !important;
 margin-left: 5px;
 border-radius: 5px !important;
}
.flatpickr-time input {
 background-color: #ffd700 !important;
 box-shadow: none;
 border-radius: 0;
 text-align: center;
 margin: 0;
 padding: 0;
 height: inherit;
 line-height: inherit;
 color: #00016e !important;
 font-size: 16px !important;
 position: relative;
 box-sizing: border-box;
 -webkit-appearance: textfield;
 -moz-appearance: textfield;
 appearance: textfield;
}
.flatpickr-time, .time24hr[tabindex="-1"] {
    background-color:#ffd700 !important;
    color: #00016e !important;
    border: none !important;
}
.flatpickr-calendar.hasTime .flatpickr-time {
 height: 40px;
 border-top: none !important;
 border-bottom: none !important;
}
/*Unterkalender*/
.calendars_box[_ngcontent-c24] {
 font-size: 16px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 border-color: #00016e !important;
 background-color: #00016e !important;
}
/*3 Symbole links*/
.misc-action-btn[_ngcontent-c10] {
 display: flex;
 align-items: center;
 padding-left: 10px;
 padding-right: 10px;
 font-size: 20px;
 border-radius: 5px;
 background-color: #9c1818 !important;
 cursor: pointer;
 border: 1px solid #9c1818 !important;
 color: #ffd700 !important;
 margin-right: 10px;
}
.misc-action-btn[_ngcontent-c10]:hover {
 display: flex;
 align-items: center;
 padding-left: 10px;
 padding-right: 10px;
 font-size: 20px;
 border-radius: 5px;
 background-color: #00016e !important;
 cursor: pointer;
 border: 1px solid #00016e !important;
 color: #ffd700 !important;
 margin-right: 10px;
}
/*Pop-up hinter Symbol ganz links (Legende)*/
.ctrl_box[_ngcontent-c7] {
 padding: 10px;
 display: flex;
 flex-direction: column;
 width: 100%;
 background-color: #9c1818 !important;
 color: #ffd700 !important;
}
.subCalIconInfo[_ngcontent-c7]:hover {
 background-color: #ffd700 !important;
 color: #9c1818 !important;
 border-radius: 25px;
 height: 20px !important;
}


/*Abbrechen-Feld*/
.ctrl_btn[_ngcontent-c10] {
 border-radius: 4px;  
 border-color: #bc0a0a !important;
 background-color: #00016e !important;
 color: #ffd700 !important;
 margin-left: 10px;
 cursor: pointer;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 font-size: 20px;
 border: 1px solid #c9cace;
 padding: 5px 10px;
}
.ctrl_btn[_ngcontent-c10]:hover {
 border-radius: 4px;  
 border-color: #bc0a0a !important;
 background-color: #bc0a0a !important;
 color: #fff !important;
 margin-left: 10px;
 cursor: pointer;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 font-size: 20px;
 border: 1px solid #c9cace;
 padding: 5px 10px;
}

.fa-times::before {
 content: "\f00d";
 color: #fff !important;
}
/*Löschen-Feld*/
.ctrl_btn[_ngcontent-c10]
.fa-trash-alt::before {
 content: "\f2ed";
 color: #0028ff !important;
}
/*Speichern-Feld*/
.save_btn[_ngcontent-c10] {
 background-color: #00016e !important;
 color: #ffd700 !important;
 border: none;
}
.save_btn[_ngcontent-c10]:hover {
 background-color: #0F0 !important;
 color: #9C1818 !important;
 border: none;
}
.fa-check::before {
 content: "\f00c";
 color: #34c7e9 !important;
}
/*Bearbeitungsfenster*/

/*Suchfenster (Lupe)*/
.search-view-headline[_ngcontent-c36] {
 flex-grow: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 background-color: #00016e !important;
}
.options[_ngcontent-c38] {
 border-bottom: 1px solid #cecece;
 display: inline-block;
 width: 100%;
 background-color: #9C1818 !important;
 font-size: 14px;
 color: #ffd700 !important;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
}
.hiddenInput[_ngcontent-bjl-c34], .ng-untouched, .ng-pristine, .ng-valid, .flatpickr-input {
    background-color: #ffd700 !important;
    color: #9C1818 !important;
   border-color: #ffd700 !important;
    font-size: 15px !important;
}  
.btn[_ngcontent-c38] {
 border: 1px solid #00016e !important;
 background: #00016e !important;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #ffd700 !important;
 cursor: pointer;
 padding-left: 5px;
 padding-right: 5px;
 height: 28px;
 position: relative;
 margin-left: 10px;
 font-size: 15px !important;
}
.btn[_ngcontent-c38]:hover {
 border: 1px solid #ffd700 !important;
 background: #ffd700 !important;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #9C1818 !important;
 cursor: pointer;
 padding-left: 5px;
 padding-right: 5px;
 height: 28px;
 position: relative;
 margin-left: 10px;
 font-size: 15px !important;
}

.btn[_ngcontent-c36] {
 border: 1px solid #00016e !important;
 background: #00016e !important;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #ffd700 !important;
 cursor: pointer;
 padding-left: 5px;
 padding-right: 5px;
 height: 28px;
 position: relative;
 margin-left: 10px;
 font-size: 15px !important;
}
.btn[_ngcontent-c36]:hover {
 border: 1px solid #ffd700 !important;
 background: #ffd700 !important;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #9C1818 !important;
 cursor: pointer;
 padding-left: 5px;
 padding-right: 5px;
 height: 28px;
 position: relative;
 margin-left: 10px;
 font-size: 15px !important;
}
.switch_active[_ngcontent-c33] {
 background-color: #00016e !important;
}
.switch_square[_ngcontent-c33] {
 width: 15px;
 height: 15px;
 background-color: #ffd700 !important;
 margin-left: 5px;
 border-radius: 15px !important;
}
.searchEventsBtn[_ngcontent-c38] {
 color: #ffd700 !important;
 background-color: #00016e !important;
 border-radius: 5px;
 cursor: pointer;
 padding: 5px 10px;
 font-size: 15px !important;
}
.searchEventsBtn[_ngcontent-c38]:hover {
 color: #9C1818 !important;
 background-color: #ffd700 !important;
 border-radius: 5px;
 cursor: pointer;
 padding: 5px 10px;
 font-size: 15px !important;
}
.closeViewBtn[_ngcontent-c38] {
 border: 1px solid #00016e !important;
 background: #00016e !important;
 border-radius: 5px;
 cursor: pointer;
 padding: 5px 10px;
 font-size: 15px !important;
}
.closeViewBtn[_ngcontent-c38]:hover {
 border: 1px solid #ffd700 !important;
 background: #ffd700 !important;
 color:#9c1818 !important;
 border-radius: 5px;
 cursor: pointer;
 padding: 5px 10px;
 font-size: 15px !important;
}
/*Suchergebnisse*/
.list-item[_ngcontent-c33] {
 padding: 10px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 border-radius: 5px;
 margin-bottom: 10px;
 background: #00016e !important;
 cursor: pointer;
 color: #ffd700 !important;
}
.list-item[_ngcontent-c33]:hover {
 opacity: 80%;
 background-color: #9c1818 !important;
 color: #00016e !important;
}

/*Suchkalender*/
/*Hintergrund Titelleiste*/
.flatpickr-months .flatpickr-month {
 background-color: #00016e !important;
 color: rgba(0,0,0,.9);
 fill: rgba(0,0,0,.9);
 height: 34px;
 line-height: 1;
 text-align: center;
 position: relative;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 overflow: hidden;
 flex: 1;
}
/*Hintergund Wochentage*/
.flatpickr-weekdays {
 background: 0 0;
 text-align: center;
 overflow: hidden;
 width: 100%;
 display: flex;
 align-items: center;
 height: 28px;
 background-color: #00016e !important;
}

/*Name Wochentage*/
span.flatpickr-weekday {
 cursor: default;
 font-size: 90%;
 background: 0 0;
 color: #ffd700 !important;
 line-height: 1;
 margin: 0;
 text-align: center;
 display: block;
 flex: 1;
 font-weight: bolder;
}
/*Hintergrung Tage*/
.dayContainer {
 padding: 0;
 outline: 0;
 text-align: left;
 width: 307.875px;
 min-width: 307.875px;
 max-width: 307.875px;
 box-sizing: border-box;
 display: inline-block;
 display: flex;
 flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 justify-content: space-around;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
 opacity: 1;
 background-color: #00016e !important;
 border-color: #00016e !important;
}
/*Tage aktueller Monat*/
.flatpickr-current-month > .numInputWrapper > .cur-year, .flatpickr-day, .flatpickr-time {
    color: #ffd !important;
    width: 307.87px !important;
    font-size: 18px !important
}
/*Tage nächster Monat*/
.flatpickr-current-month > .numInputWrapper > .cur-year, .nextMonthDay, .flatpickr-time {
    color: #c91818 !important;
    width: 307.87px !important;
    font-size: 18px !important
}
/*aktueller Tag*/
.flatpickr-day.selected{
 background-color: #A72020 !important;
 box-shadow: none;
 color: #fff;
 border-color: #A72020 !important;
 color: #FFFFDD !important;
}
/*Auswahlmenü Monat*/
.flatpickr-current-month .flatpickr-monthDropdown-months {
 appearance: menulist;
 background-color: #9C1818 !important;
 color: #ffd700 !important;
 border: none;
 border-radius: 5px !important;
 box-sizing: border-box;
 color: inherit;
 cursor: pointer;
 font-size: 18px !important;
 font-family: inherit;
 font-weight: 500 !important;
 text-align: center !important;
 height: auto ;
 line-height: inherit;
 margin: -1px 0 0;
 outline: 0;
 padding: 0 0 0 .5ch;
 position: relative;
 vertical-align: initial;
 -webkit-box-sizing: border-box;
 -webkit-appearance: menulist;
 -moz-appearance: menulist;
 width: auto;
}
/*:hover über Tage*/
.flatpickr-day:hover {
    background-color: #ffd700 !important;
    color: #00016e !important;
    border-color: #ffd700 !important;
}
/*Auswahlmenü Jahr*/
.flatpickr-current-month > .numInputWrapper > .cur-year {
 color: #ffd700 !important;
}
.numInput, .cur-year {
 background-color: #9C1818 !important;
 border-radius: 5px !important;
 font-size: 18px !important;
 font-weight: 500 !important;
 position:relative !important;
 left: 10px !important;
 height: auto;
}
 
/*Pfeiltasten rechts + links*/
.flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg {
 fill: #9C1818 !important;
}
.flatpickr-months .flatpickr-next-month svg, .flatpickr-months .flatpickr-prev-month svg {
 fill: #ffd700 !important;
}
.flatpickr-months .flatpickr-next-month.flatpickr-next-month, .flatpickr-months .flatpickr-prev-month.flatpickr-next-month {
 right: 0;
 background-color: #00016e !important;
}
/*Termin bestätigen*/
.overlay-box[_ngcontent-c1] {
 width: 30%;
 background-color: #9C1818 !important;
 border: 1px solid #9C1818 !important;
 border-radius: 5px;
 padding: 20px;
}
.overlay-title[_ngcontent-c1] {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 font-size: 14px;
}
.overlay-text[_ngcontent-c1] {
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #ffd700 !important;
 font-size: 20px;
}
/*OK-Button*/
.okBtn[_ngcontent-c1] {
 border-radius: 5px;
 border: 1px solid #00016e !important;
 background-color: #00016e !important;
 color: #ffd700 !important;
}
.okBtn[_ngcontent-c1]:hover {
 border-radius: 5px;
 border: 1px solid #50eb24 !important;
 background-color: #50eb24 !important;
 color: #fff !important;
}
/*Abbrechen-Button*/
.cancelBtn[_ngcontent-c1] {
 background-color: #00016e !important;
 border-radius: 5px;
 border: 1px solid #00016e !important;
 color: #ffd700 !important;
}
.cancelBtn[_ngcontent-c1]:hover {
 background-color: #BC0A0A !important;
 border-radius: 5px;
 border: 1px solid #BC0A0A !important;
 color: #fff !important;
}
/*3 striche untereinander - Menü*/
.box--mobile[_ngcontent-c43]{
 padding: 13px;
 position: absolute;
 top: 50px;
 right: 10px;
 background-color: #9C1818 !important;
 border: 1px solid #9C1818 !important;
 border-radius: 4px;
 box-shadow: none !important;
 min-width: 620px;
 max-width: 640px;
 font-size: 16px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 color: #212529;
 text-align: left;
 display: flex;
 flex-direction: column;
}
.close-btn[_ngcontent-c43] {
 border-radius: 4px;
 padding: 6px 12px;
 text-align: center;
 cursor: pointer;
 border: 1px solid #ffd !important;
 background-color: #ffd !important;
 color:#00016e !important;
}
.close-btn[_ngcontent-c43]:hover {
 border-radius: 4px;
 padding: 6px 12px;
 text-align: center;
 cursor: pointer;
 border: 1px solid #00016e !important;
 background-color: #00016e !important;
 color:#ffd700 !important;
}
.option[_ngcontent-c43] {
 font-size: 16px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 text-align: left;
 background-color: #ffd700 !important;
 border-color: #ffd700 !important;
 color: #00016e !important;
}
.option[_ngcontent-c43]:hover {
 font-size: 16px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 text-align: left;
 background-color: #00016e !important;
 border-color: #00016e !important;
 color: #ffd700 !important;
}
.nav-tab[_ngcontent-c43] {
 font-size: 16px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 text-align: left;
 background-color: #ffd700 !important;
 border-color: #ffd700 !important;
 color: #00016e !important;
}
.nav-tab[_ngcontent-c43]:hover {
 font-size: 16px;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 text-align: left;
 background-color: #00016e !important;
 border-color: #00016e !important;
 color: #ffd700 !important;
}
.switch_square[_ngcontent-c35] {
 width: 20px;
 height: 20px;
 background-color: #ffd700 !important;
 margin-left: 5px;
 border-radius: 5px !important;
}
.switch[_ngcontent-c35] {
 background-color: #9c1818 !important;
 min-width: 60px;
 max-width: 60px;
 height: 30px;
 display: flex;
 align-items: center;
 cursor: pointer;
 border-radius: 5px !important;
}
.event-size-btn--inactive[_ngcontent-c43] {
 background-color: #9c1818 !important;
 color: #ffd !important;
}
.event-size-btns[_ngcontent-c43] > div[_ngcontent-c43]:nth-child(2) {
 background-color: #00016e !important;
 color: #ffd !important;
}
.event-duration-dropdown[_ngcontent-c43] {
 color: #000;
 cursor: pointer;
 background-color: #9c1818 !important;
 color: #fff !important;
 border-color: #9c1818 !important;
}

/*Pop-Up nach Terminerstellung / Änderung*/
.info-banner-box[_ngcontent-c9] {
 width: 315px;
 height: 80px;
 pointer-events: initial;
 z-index: 10;
 position: absolute;
 background-color: #00016e !important;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border: none;
 box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%),0 9px 46px 8px rgb(0 0 0 / 12%),0 11px 15px -7px rgb(0 0 0 / 20%) !important;
 font-family: "Open Sans",sans-serif;
 font-weight: 400;
 font-size: 14px;
 display: flex;
 padding-left: 20px;
 padding-right: 40px;
 padding-top: 20px;
 flex-direction: column;
 color: #ffd700 !important;
}
.btn-filled[_ngcontent-c9] {
 color: #ffd700 !important;
 background-color: #9c1818 !important;
 border: 1px solid #9c1818 !important;
}
.btn-filled[_ngcontent-c9]:hover {
 color: #9c1818 !important;
 background-color: #ffd700 !important;
 border: 1px solid #ffd700 !important;
}
.btn[_ngcontent-c9] {
 background-color: #9c1818 !important;
 font-weight: 400;
 border: 1px solid #9c1818 !important;
 border-radius: 4px;
 cursor: pointer;
 padding: 4px 8px;
 color: #ffd700 !important;
}
.btn[_ngcontent-c9]:hover {
 background-color: #ffd700 !important;
 font-weight: 400;
 border: 1px solid #ffd700 !important;
 border-radius: 4px;
 cursor: pointer;
 padding: 4px 8px;
 color: #9c1818 !important;
}
.close-btn[_ngcontent-c9]:hover {
 height: 36px;
 width: 36px;
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 top: 0;
 right: 0;
 cursor: pointer;
 background-color: #ffd700 !important;
}
.btn[_ngcontent-mpc-c61] {
   background-color: red !important;
   color: green !important;

}




}
}

Alles anzeigen

Diese ist ohne die gewünschten Änderungen.

Nicht mehr greifen tun u.a. der Code für die Zeile, in welcher der Kalendername (hier: "Test") steht, der Code für alles was in der Zeile darunter ist, Teile des Codes für das Fenster um einen neuen Eintrag zu erstellen, ... Man sieht ja, welche Symbole, Hintergründe, Texte nicht zum sonstigen Farbkonzept passen.

Firefox_94.0.1

Zitat von Mira_Belle

Eine lokale .html-Datei. OK.
Eingebunden wird irgendwas von einer externen Seite?
Muss dann der Code dafür nicht in die userContent.css, oder darüber eingebunden werden?
Ist nur so eine Überlegung, wirklich wissen tu’ ich das auch nicht.

Die Einbindung an sich funktioniert ja. Nur die Codeänderungen (neue Adressierung von manchen Seitenelementen) wird nicht übernommen. Die Elemente, von welchen die Adressierung nicht verändert wurde, werden weiterhin wie in meiner .css programmiert, dargestellt.

Edit:

Ich habe gerade wieder etwas getestet:

1. Css komplett geleert

2. ein Element neu eingefügt, von welchem ich weiß, dass dort nichts geändert wurde --> Änderung wird übernommen

3. Schritt 2 mit einem geänderterten Element durchgeführt --> meine Änderung wird ignoriert

Firefox_94.0.1

Ich nutze als Startseite eine selbst gebaute, lokal gespeicherte .html-Datei, in welcher ich einen Kalender als iframe eingebunden habe. Beim Kalender-css werden teilweise einzelne css-Teile immer mal wieder neu benannt. Bisher habe ich die Adressierung der jeweiligen Elemente in meiner .css dazu entsprechend geändert und mein Design wurde wieder übernommen. Jetzt gab es wieder eine Änderung. Wenn ich jedoch jetzt die neuen Adressierungen in meine .css einpflege, wird mein Design trotzdem ignoriert. Woran kann das liegen?

Ein vollständiges leeren der .css und nur der neue Code darin hat auch nichts bewirkt.

Firefox_94.0.1

Zitat von .DeJaVu
wiki ist lese und hirn-freundlich aufgebaut. Das menschliche Hirn kann nur eine bestimmte Anzahl Worte pro Zeile aufnehmen.
Wenn, dann musst du mit diesen Werten spielen:
Code
@media screen and (min-width: 1120px) {
  .mw-body {
    grid-template:
min-content min-content min-content 1fr / minmax(0,59.25rem) min-content;
}

Welche Werte müssen hier geändert werden?

Firefox_94.0.1

Zitat von .DeJaVu

Gibt es bei auch nicht mehr, schon länger nicht mehr. Aktuelles CSS. Ich nutze Stylus, funktioniert ohne Neustart :p

CSS

@-moz-document domain("wikipedia.org") {
:root
{
  --wmde-banner-height: 0 !important;
  --wmde-banner-transition-duration: 0 !important;
}

.wmde-show-banner #mw-page-base,
.wmde-show-banner #mw-mf-viewport,
.wmde-show-banner .vector-header-container,
.wmde-show-banner #mw-panel,
.wmde-show-banner #mw-head,
.wmde-show-banner #mw-mf-page-left
{
  padding-top: 0 !important;
  top: 0 !important;
}

.vector-column-end,
.vector-user-links,
#wmde-banner-app,
.vector-menu-content-list,
#ca-talk,
#p-personal
{
    display: none;
}

#mw-head-base
{
    height: 0 !important;
}


@media (min-width: 961px)
{

    .mw-editsection,
    #page-actions-watch,
    #page-actions-edit,
    #siteNotice
    {
        display: none;
    }

    .thumb,
    .thumbinner
    {
        min-width: 300px;
    }
}

@media (max-width:760px)
{
    
    /*
    html
    {
        font-size: 1.5em;
    }
    */

    [id="bodyContent"],
    .vector-body
    {
        font-size: 1.1em;
    }


    #mw-panel,
    #p-personal,
    .last-modified-bar,
    .mw-footer,
    .page-actions-menu
    {
        display: none;
    }

    .mw-body,
    #mw-data-after-content
    {
        margin-left: 0;
    }

    h2 {
        font-size: 1.1em;
    }

    .content h2, .content h3, .content h4, .content h5, .content h6
    {
        padding: 0 !important;
    }

    .client-js .collapsible-block
    {
        display: block !important;
    }

}

}

Alles anzeigen

Gibt es da auch eine Möglichkeit, dass auf der Artikelseite die Breite standardmäßig "breit" ist?

Firefox_94.0.1

Zitat von milupo

Also ich habe die Erscheinungsbild-Leiste sofort ausgeblendet.

Ich hätte noch folgendes dazu schreiben müssen: Ich nutze FF eig. immer im privaten Modus. Dadurch werden keine Cookies gespeichert und ich müsste die Einstellungen jedes Mal neu vornehmen.

ChatGPT hat mir folgendes, nicht funktionierendes, css dazu generiert:

CSS

/*Wikipedia*/
@-moz-document domain("https://de.wikipedia.org") {
/* Suche wieder rechts*/
div#p-search.vector-search-box-vue.vector-search-box-collapses.vector-search-box-show-thumbnail.vector-search-box-auto-expand-width.vector-search-box {
 margin-left: 400px !important;
}
/* Erscheinungsbild: verbergen */
#mw-panel {
   display: none; /* Versteckt das Seitenpanel */
}
/* Text: klein */
body {
   font-size: small; /* Setzt die Schriftgröße auf klein */
}
/* Breite: breit */
body {
   max-width: 1200px; /* Setzt die maximale Breite des Inhalts */
   margin: 0 auto; /* Zentriert den Inhalt */
}
}

Alles anzeigen

Dieses habe ich per @import in meine userContent.css hinzugefügt. Kann daraus was gemacht werden?

Firefox_94.0.1

Wikipedia hat das neue Design ausgerollt. Jetzt ist rechts eine Leiste, um Anpassungen vorzunehmen. Kann man per css / Skript das ganze so festlegen, dass folgende Einstellungen automatisch geladen werden:

- Erscheinungsbild: verbergen (Leiste ist hinter Button versteckt und nimmt keinen unnötigen Platz ein)

- Text: "klein"

- Breite: "Breit"

Auch möchte ich gerne das Suchfeld wieder mehr rechts haben.

Firefox_94.0.1

Zitat von 2002Andreas
Zitat von Firefox_94.0.1

doch noch nicht gelöst

Und damit?
CSS
.tab-background[selected]  {
 background: #2b2c86 !important;
 outline-color: transparent !important;
 box-shadow: none !important;
}

Damit sieht es aktuell ganz gut aus. Hoffentlich ist das Problem dadurch gelöst.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

das helle Theme wieder aktivere, bleibt der Rahmen trotzdem weg

Ist hier auch so, und sollte auch so sein.

Ich habe jetzt noch eine ganz seltsame Beobachtung gemacht: egal, welches Theme ich einstelle: nach einem neuen Öffnen von Firefox ist der schwarze Rahmen wieder da. Das Problem ist daher (leider) doch noch nicht gelöst...

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

ist der Rahmen weg

Gerade was getestet: wenn ich jetzt aber das helle Theme wieder aktivere, bleibt der Rahmen trotzdem weg... Keine Ahnung was da los war/ist.

Firefox_94.0.1

Zitat von 2002Andreas

Zitat von Firefox_94.0.1

der Rahmen ist trotzdem da:

Standard gibt es den nicht.

Also muss es einen anderen Grund dafür geben.
Wie sieht es im Fehlerbehebungsmodus vom Firefox aus?
Welches Theme nutzt du?
Beispiel hier:

Alles anzeigen

Das war es doch tatsächlich. Das Theme "Hell" war aktiviert, aber mit dem "System-Theme-Automatisch" ist der Rahmen weg. Keine Ahnung, warum da was anderes eingestellt war.

Firefox_94.0.1 · Screenshot 2024-10-15 181152.png

2002Andreas Mira_Belle

Für die Tabs nutze ich nur den oben geposteten Code. Den Hintergrund habe ich hiermit angepasst:

CSS

/********************* Tabs ********************************************/

/*Form und Hintergrundfarbe*/
.tabbrowser-tab:not(image.tab-icon-overlay[role="presentation"]) {
     color: #fff !important;
}
.tab-background[selected]  {
 background: #2b2c86 !important;
}
.tab-background:not([selected])  {
 background: #00016e !important;
}
/*:hover Hintergrund von nicht aktiven Tabs*/
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
 background-color: #15167a !important;
 outline: 1px solid var(--tab-hover-outline-color);
 outline-offset: -1px;
}

/*Lautsprecher (Medienwiedergabe)*/
image.tab-icon-overlay[role="presentation"]{
 background-color: #fff !important;
 color: #00016e !important;
 margin-left: 25px !important;
}
/*Tab schließen*/
.tab-close-button[fadein]:focus-visible {
fill: white !important;
background: #E81123 !important;
}

Alles anzeigen

Ansonsten habe ich mal alles, was css heißt auskommentiert und der Rahmen ist trotzdem da:

Beiträge von Firefox_94.0.1

Code für min, max, close funktioniert nach Update nicht mehr richtig

Code für min, max, close funktioniert nach Update nicht mehr richtig

Code für min, max, close funktioniert nach Update nicht mehr richtig

CSS Änderungen bewirken nichts

CSS Änderungen bewirken nichts

CSS Änderungen bewirken nichts

CSS Änderungen bewirken nichts

CSS Änderungen bewirken nichts

CSS Änderungen bewirken nichts

CSS Änderungen bewirken nichts

CSS Änderungen bewirken nichts

Wikipedia neues Layout anpassen

Wikipedia neues Layout anpassen

Wikipedia neues Layout anpassen

Wikipedia neues Layout anpassen

schwarzer Rahmen um Tabs

schwarzer Rahmen um Tabs

schwarzer Rahmen um Tabs

schwarzer Rahmen um Tabs

schwarzer Rahmen um Tabs