Anpassungen wegen Proton

/* Tabs rund und farbig */

/**********************************************************
 ********** Vollbildmodus *********************************
 **********************************************************/

/* Damit die Rückkehr aus dem Vollbildmodus mit der Maus klappt:
 * Bei 0 bleiben die URL-Leiste und die Tab-Leiste immer sichtbar,
 * je größer der negative Wert, desto mehr verschwindet aus dem sichtbaren
 * Bereich, ein Pixel muß für den Mauskontakt am oberen Rand immer sichtbar
 * bleiben. Den Wert an die Leistenhöhe anpassen!
 */


#main-window[inFullscreen="true"] #navigator-toolbox {
  margin-top: -80px !important;
}

/* Bei Mauskontakt des noch sichtbaren Pixels die Leisten wieder einblenden
 */
#main-window[inFullscreen="true"] #navigator-toolbox:hover {
  margin-top: 0 !important;
}

/* Etwas schnellere Animation beim ein- und ausblenden, normal ist 1.5s
 */
#navigator-toolbox {
  transition: 0.5s !important;
}

/**********************************************************
 ********** Angaben für die TAB-Leiste ********************
 **********************************************************/

/* TAB normal (inaktiv):
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
 * unten kein Rahmen -> Abschlußrahmen vom Container.
 */

    #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
    border:none!important;}
    
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 14px 14px !important;
    margin: 1px 1px 1px 1px !important;
    padding: 0px 0 !important; 
        }

/* TAB bei Mauskontakt:
 * Hintergrundfarbe, Rahmen
 */
 
    #TabsToolbar .tabbrowser-tab:hover {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 14px 14px !important;
    margin: 1px 1px 1px 1px !important;
    padding: 0px 0 !important; 
        }

/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe, Rahmen,
 * Schriftfarbe.
 */
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    font-weight:bold !important;
    color: black ! important;
        }

/* Tab-Icon etwas größer,
 * links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
 
    #TabsToolbar .tab-icon-image {
    height: 18px !important;
    width:  18px !important;
    margin-left: 4px !important;
    margin-bottom: 0px !important;
        }
        
/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Textfarbe (Kreuz)
 * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
 */
 
    #TabsToolbar .tab-close-button {
    margin-right: -4px !important;
    padding: 0 !important;
    color: black !important;
        }
    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 18px !important;
    width:  18px !important;
    background-color: red !important;
    border-radius: 5px !important;
        }

/* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none}

/* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: none !important;
        } 

/* Tab-Rahmenelemente entfernen (obere Linie aktiver Tab, Seitentrennlinien) */

    #toolbar-menubar:not([autohide="true"]) + 
    #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background, :root:not([tabsintitlebar]) .tab-background, :root[extradragspace] .tab-background {
    border-top-style: none !important;
        }
    .tabbrowser-tab::after, .tabbrowser-tab::before {
    border-left: none !important;
    }
    .searchbar-textbox, #urlbar {
    border-radius: 20px !important;
    min-height: 33px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    }

/* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important;
    }
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important;
    }
    
/* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none
    }    

/* Tabs Proton-Design */

:root {
    --proton-tab-radius: 0px !important;
    --proton-tab-block-margin: 0px !important;
    --inline-tab-padding: 10px !important;
}

#TabsToolbar {
  min-height: 35px !important;
  max-height: 35px !important;
  border-top: 1px solid #B2B2B2 !important;
  border-bottom: 1px solid #B2B2B2 !important; 
  padding-bottom: 1px !important;
  padding-left: 2px !important;
}

#TabsToolbar .toolbarbutton-1 {
margin-top: 2px !important;
margin-bottom: 1px !important;
}
#TabsToolbar .toolbarbutton-1 > image {
  padding: 2px 4px !important;
}

.tabbrowser-tab {
  min-height: 28px !important;
  max-height: 28px !important;
  box-shadow: none !important;
  border: 0 !important;
  margin-right: 0 !important;
}
#tabbrowser-tabs:not([positionpinnedtabs]) > 
#tabbrowser-arrowscrollbox > 
.tabbrowser-tab[pinned] + 
.tabbrowser-tab:not([pinned]) {
  margin-inline-start: 6px !important;
}

.tabbrowser-tab .tab-content {
  background-image: linear-gradient(to bottom, dimgrey 0%, dimgrey 14%, dimgrey 14%, dimgrey 100%) !important;
  padding: 0 3px !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
}
.tabbrowser-tab[selected="true"] .tab-content {
  background-image: linear-gradient(to bottom, green 0%, green 14%, dimgrey 14%, dimgrey 100%) !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
}
.tabbrowser-tab:hover .tab-content {
  background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
}
.tabbrowser-tab[selected="true"]:hover .tab-content {
  background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
} 

.tab-throbber:not([pinned]),
.tab-sharing-icon-overlay:not([pinned]),
.tab-icon-pending:not([pinned]),
.tab-icon-image:not([pinned]) {
  margin-top: 2px !important;
  margin-inline-end: 5px !important;
}

.tabbrowser-tab .tab-content .tab-text.tab-label,
.tabbrowser-tab:hover .tab-content .tab-text.tab-label {
  margin-top: 1px !important;
}




.tabbrowser-tab[label*=" - YouTube"] .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
  background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
}
.tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
  background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
}
.tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
 background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
}
.tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
.tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
  background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
}

.tabbrowser-tab .tab-content vbox.tab-label-container.proton {
  -moz-box-orient: horizontal !important;
}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton hbox.tab-icon-sound {
  margin-top: 3px !important;
  margin-right: 0px !important;
}
.tab-icon-sound[soundplaying="true"],
.tab-icon-sound[muted="true"],
.tab-icon-sound[activemedia-blocked="true"] {
  background: #FFF !important;
  padding: 0 1px !important;
}
.tab-icon-sound[soundplaying="true"] .tab-icon-sound-image,
.tab-icon-sound[muted="true"] .tab-icon-sound-image,
.tab-icon-sound[activemedia-blocked="true"] .tab-icon-sound-image {
  fill: #F10 !important;
}

.tab-icon-sound-image {
    height: 1.9em !important;
}
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
.tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
  display: none !important;
}

/***** POPUP und KONTEXT Menus ******/

/* Hintergrund/Umrandung/Ausrichtung - aller Popup */

menupopup {
   background: #87cefa !important; /* Hintergrund */
}

/* Vorgegebene Breite der Popup-Fenster */

.menupopup-arrowscrollbox,
menupopup, 
popup {
   appearance: none!important;
   width: 250px !important; /* Breite in px anpassbar */
} 

/* vorgegebene Höhe der Zeilen */
menupopup > menu ,
menupopup > menuitem,popup > menu ,
popup > menuitem  {
    appearance: none!important;
    min-height: 24px !important; /* Höhe in px anpassbar */
    max-height: 24px !important;
}

/************* SEPARATOREN ***********************/

/* Separatoren werden entfernt (Querlinien) */
menuseparator {
    display: none !important; 
}
    
/************ KONTEXT-MENÜ ****************************

/* Icon Farbe */
#context-navigation > menuitem > hbox.menu-iconic-left {
    appearance: none !important;
    color: #3300ff ! important; /* Farbe */
    font-size: 15px !important;
    padding: 0px  4px 0px 4px !important; /* Ausrichtung */
}

/* Hintergrund hinter den Icons */
#context-navigation {
    background: activecaption !important; /* Farbe */
    padding: 4px  4px 4px 4px !important; /* Ausrichtung */
}

/****************** MENÜBAR ********************/


:is(menu,menuitem)[_moz-menuactive="true"] {
  appearance: none !important;
  --menuitem-hover-background-color: lightblue !important;
} 

/*Höhenverschiebung Menülleiste durch Hovereffekt verhindern*/
#main-menubar {
    height: 28px !important;
}