Firefox Theme: Outlook-Style

Firefox Theme Outlook Style

Nach langer Zeit mal wieder etwas um das Aussehen von Firefox zu verändern. Reddit ist immer wieder eine gute Quelle für userChrome Codeschnipsel. Nachfolgende Zeilen verwandeln Firefox in einen „Outlook-Fox“. Das Blau finde ich herrlich. Doof für mich ist die Darstellung der Tabs. Aber es gibt bestimmt jemand der das anders sieht.

/*
 * outlook-style
 * Firefox im Outlook-Design
 * https://www.reddit.com/r/FirefoxCSS/comments/aqklv8/outlook_style/
 */

/* Outlook Blue */
#main-window {
  background-color: #0F6EBE !important
}

/* remove titlebar spacer */
.titlebar-spacer {
  display: none !important;
}

/* Outlook tabs */
.tab-background[selected="true"] {
  background-color: #F3F3F3 !important; /* selected tab background neutral Office UI color */
  color: #0F6EBE; /* selected tab text Outlook color */
}

.tab-line {
display: none;
/* background-color : #F3F3F3 !important; /* tab line color if you want the tab line, remove the previous line for it to work */
}

.tab-background:not([selected]) {
background-color: #0F6EBE; /* unselected tab color */
}

/*.tabbrowser-tab .tab-content{ 
  text-shadow: none; /* this makes sure the tab text does not get shadows, enable if any other tweaks cause shadows to appear */
}*/

.tab:hover {
background:#0078d7 !important; /* tab hover color from Outlook */
}

.tab-text {
  color: #F3F3F3 !important;
  text-shadow: none;
}

.tab-text[selected="true"] {
  color: #0F6EBE !important;
} 

/* Bookmarks toolbar font color */
.bookmark-item {
  color: #242424 !important;
}

/* Toolbars */
#main-window #titlebar-buttonbox .titlebar-button {
 list-style-image: none !important;
 padding: 9px 17px 9px 16px !important;
 transition: background-color linear 100ms !important;
}
 
#browser-bottombox, #status-bar, #status-bar > *, #nav-bar, #PersonalToolbar, #addon-bar, #main-window[tabsontop="false"] ,
    #main-window[tabsontop="false"] #PersonalToolbar[collapsed="false"] + #TabsToolbar,
    #main-window[tabsontop="false"] [id^="__customToolbar"]:not([collapsed="true"]) ~ #TabsToolbar {
  background: #F3F3F3 !important; -moz-appearance: -moz-win-glass !important;
  color: #FFFFFF !important;
  -moz-appearance: none !important;
}

/* Address bar, searchbar */
#urlbar, .searchbar-textbox {
  background: transparent !important; -moz-appearance: -moz-win-glass !important;
/*color: #0F6EBE !important; /* Outlook blue*/
  color: #242424 !important; /* Neutral grey */
  font-weight: normal !important;
  text-shadow: none !important;
  border: none !important;
  border-radius: 2px 0 0 0 !important;
  margin: 0 !important;
  box-shadow: inset 0px 0px 10em 0px rgba(255,255,255,.25) !important;
}

#urlbar:hover, .searchbar-textbox:hover {
  background: transparent !important; -moz-appearance: -moz-win-glass !important;
/*  color: #0078d7 !important; /* Outlook blue hover*/
  color: #2b2b2b !important; /* Neutral grey */
  text-shadow: #none !important;
  box-shadow: inset 0px 0px 5em 0px rgba(255,255,255,.85) !important;
}
/* Toolbar buttons */
.toolbarbutton-1 {
 /* fill: #0F6EBE !important; /* Outlook blue */
    fill: #242424 !important; /* Neutral grey */
}

/* remove lines */
#navigator-toolbox::after {
  display: none !important;
}

#nav-bar, #TabsToolbar {
  border: none !important;
  margin-top: -2px;
}

#PersonalToolbar {
  border: none !important;
}

#content-deck {
  border: none !important;
}

/* Hide tab borders */
:root {
  --tabs-border: transparent !important;
}

/* Hide separators between background tabs */
.tabbrowser-tab::before {
  color: purple !important; 
  opacity: 0 !important; 
}

/* Hide border from rightmost background tab */
.tabbrowser-tab::after {
  color: green !important; 
  opacity: 0 !important; 
}

/* Remove placeholder right border */
.titlebar-placeholder {
  border: none !important;
}

/* Remove border under navbar */
#navigator-toolbox::after {
  border-bottom: 0px !important;
}

/* remove some borders */ 
#navigator-toolbox {
  border: none !important;
}

#titlebar {
  border: none !important;
}

#tabbrowser-tabs {
  border: none !important;
}

.tabbrowser-arrowscrollbox {
  border: none !important;
  min-width: 10;
}

.tab-drop-indicator-box {
  border: none !important;
  min-width: 10;
}

/* hide empty space to the left of tabs */ 
.titlebar-placeholder[type="pre-tabs"] {
  display: none !important;
}

#nav-bar { 
  box-shadow: none !important;
}

/* Fix back button */
#back-button>.toolbarbutton-icon {
  transform: scale(.85, .85) !important;
  animation: none !important;
  border: none !important;
  box-shadow: none !important;
}

#back-button:not(:hover),
#back-button:not(:hover) > .toolbarbutton-icon {
  background: none !important;
}

#back-button:hover,
#back-button:hover > .toolbarbutton-icon {
  border-radius: 2px !important;
}     

#PanelUI-button {
  margin-inline-start: 0px;
  border-image: none;
  border-image-slice:  0 !important;
}

#PanelUI-menu-button:before {
content: '';
width: 0px;
display: flex;
}

/* Clean up tabs */
/* Load progress indicator */
.tab-throbber {
  display:none !important;
}

/* Site favicon */
.tab-icon-image {
  display:none !important;
}

/* "X" button to close tab */
.tab-close-button {
  display:none !important;
}

Übrigens: Obige Zeilen gehören in die Datei userChrome.css von Firefox. userContent.css und userChrome.css verändern das Aussehen. Während die Datei userContent.css das Aussehen von Webseiten verändert, verändert userChrome.css das Aussehen von Firefox. Die Dateien gehören in den Ordner chrome des Profils und müssen dort erzeugt werden. Um nun an den Profilordner zu kommen muss man via „Burgermenü“ => „Fragezeichen“ den Menüpunkt „Informationen zur Fehlerbehebung“ öffnen. Der Profilordner wird im Windows-Explorer geöffnet wenn ihr den Button „Ordner anzeigen“ in der Zeile „Profilordner“ nutzt. Legt dort einen neuen Ordner mit dem Namen chrome an. In diesem neu angelegten Ordner müsst ihr dann Textdateien mit der Bezeichnung userChrome.css und userContent.css erzeugen. Das ist eigentlich schon alles. Ihr müsst die so erzeugten Dateien nur noch mit einem ordentlichen Texteditor (Notepad gehört nicht dazu) öffnen und mit den passenden Codeschnipsel füllen. Die Codezeilen werden nach einem Browser-Neustart wirksam.

Ein Kommentar bei “Firefox Theme: Outlook-Style”

Schreibe einen Kommentar

Diese Kommentarfunktion speichert außer den Daten des Formulars auch Datum und Uhrzeit des Kommentars.

Ich bin mit der Speicherung und Verarbeitung meiner Daten durch diese Seite einverstanden