Firefox mit runden Tabs

Irgendwie fand ich es schade, dass der Firefox so unschöne eckige Kanten bekommen hat. Ich mag die runden Ecken viel lieber. Daher machte ich mich auf die Suche, ob man das etwas dran drehen kann und fand eine Möglichkeit. Denn auch der Browser selbst wird aus HTML- und CSS-Code dargestellt.

Wenn Du wieder runde Ecken haben magst, dann gehe (auf einem Mac) ins Verzeichnis /Users/DEIN USERNAME/Application Support/Firefox/Profiles/DEIN PROFILNAME und lege in diesem Verzeichnis das neue Verzeichnis „chrome“ an.

Auf einem Windows Rechner liegt das Profil in %APPDATA%\Mozilla\Firefox\Profiles\DEIN PROFILNAME. Hier auch das Verzeichnis „chrome“ erstellen.

In dem neuen Verzeichnis kopierst Du die Datei userChrome.css hinein. Diese enthält folgenden CSS-Code:

Hier kannst Du die Datei auch direkt herunter laden.

/* Firefox Quantum userChrome.css tweaks */
/* Github: https://github.com/aris-t2/customcssforfx */

:root {
  --default_tab_border_roundness: 12px;
}

/* tab top border roundness */
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
  border-top-left-radius: var(--default_tab_border_roundness) !important;
  border-top-right-radius: var(--default_tab_border_roundness) !important;
  overflow: hidden;
}

#TabsToolbar .tabs-newtab-button{
  border-top-left-radius: var(--default_tab_border_roundness) !important;
  border-top-right-radius: var(--default_tab_border_roundness) !important;
}

#TabsToolbar .tabbrowser-tab {
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  # margin: 0px 0px 1px 0px !important;
  # padding: 1px 0 !important;
}

/* hide tab separators AUSGEBLENDET! *
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  opacity: 0 !important;
  border-image: unset !important;
  border-image-slice: unset !important;
  width: unset !important;
}/

#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
  content: unset !important;
  display: unset !important;
}

Wenn Du Firefox dann neu startest, siehst das ganze so aus:

Gefällt Dir das klobige eckige Design besser, dann löschst Du einfach die neu erstellte Datei.

Den Tip fand ich hier: https://www.camp-firefox.de/forum/viewtopic.php?t=122525

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.