Firefox View

:host {
 --page-nav-button-border-radius: var(--button-border-radius);
 --page-nav-button-text-color: var(--button-text-color-ghost);
 --page-nav-button-text-color-hover: var(--button-text-color-ghost-hover);
 --page-nav-button-text-color-active: var(--button-text-color-ghost-active);
 --page-nav-button-background-color: var(--button-background-color-ghost);
 --page-nav-button-background-color-hover: var(--button-background-color-ghost-hover);
 --page-nav-button-background-color-active: var(--button-background-color-ghost-active);
 --page-nav-button-background-color-selected: color-mix(in srgb, currentColor 8%, transparent);
 --page-nav-button-padding: var(--space-small) var(--space-medium);
 --page-nav-button-border-color-hover: var(--button-border-color-ghost-hover);
 --page-nav-button-border-color-active: var(--button-border-color-ghost-active);
 --page-nav-button-indicator-color: var(--color-accent-primary);
 --page-nav-button-indicator-width: var(--dimension-4);
 border-radius: var(--border-radius-small);
}

/* Firefox View */

@-moz-document url-prefix("about:firefoxview") {

/* Inaktive Buttons */
:root {
   --button-background-color-ghost: #e0e0e0 !important;
}

/* Firefox View Buttons */
moz-page-nav-button {
   --page-nav-button-border-radius: 0 60px 60px 0 !important;
   /* Farben */
   --page-nav-button-background-color-selected: red !important;
   --page-nav-button-background-color-hover: #77b5fe !important;
   --page-nav-button-background-color-active: greenyellow !important;
   /* Textfarbe */
   --page-nav-button-text-color: black !important;
   --page-nav-button-text-color-hover: #480607 !important;
   --page-nav-button-text-color-active: blue !important;
   border: 2px solid grey !important;
   border-radius: 60px  !important;
   background-color: #e0e0e0 !important;
}

/* Textfarbe im aktiven Button */  
button[selected] {
   color: yellow !important;  
}
  
  /* blauer Rand links im aktiven Button ausgeblendet */
    @media not (prefers-contrast) {
       button::before {
       content: "";
       display: none !important;
    }
    }
	
	/* Original-Icon ausblenden */
	.page-nav-icon {
       display: none !important; 
    }

  moz-page-nav-button[data-l10n-id="firefoxview-overview-nav"] {
    background-image: url("../Icons/1213.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-opentabs-nav"] {
    background-image: url("../Icons/009.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-recently-closed-nav"] {
    background-image: url("../Icons/0013.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-synced-tabs-nav"] {
    background-image: url("../Icons/0059.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
  
  moz-page-nav-button[data-l10n-id="firefoxview-history-nav"] {
    background-image: url("../Icons/chronik.png") !important;
    background-repeat: no-repeat;
    background-position: 12px 10px !important;
    background-size: 18px 18px; 
    padding-left: 38px !important; 
  }
}