Firefox - Křížek pro zavření na levé straně panelu

2026-06-15, Lukáš

MacOS to tak prostě má. Křížek pro zavření u panelů i oken, např. v Safari je umístěný na levé straně. A co když si používáte jako prohlížeč Firefox a chcete jej mít ve stejném duchu?

Stačí malá úprava pomocí CSS.

1. Otevřete stránku "about:config" v adresním řádku.
2. Vyhledejte řetězec "toolkit.legacyUserProfileCustomizations.stylesheets" a dvojitým kliknutím jej aktivujte. Hodnota se z "false" změní na "true".
3. Na stránce "about:support" najděte adresář profilu a klikněte na "Zobrazit ve Finderu".
4. V otevřeném adresáři vytvořte nový s názvem "chrome", pokud ještě neexistuje. Dodržujte velikost písma, všechna malá!
5. V adresáři chrome vytvořte soubor "userChrome.css" a do něj vložte následující kód:

/* 1. Container and Layout */
.tab-content {
    display: flex !important;
    align-items: center !important;
}

/* 2. Hide the original browser icon */
.tab-close-button .toolbarbutton-icon {
    display: none !important;
}

/* 3. The Button Box (Reduced further to 14px) */
.tab-close-button {
    order: -1 !important;
    display: flex !important;
    position: relative !important;

    width: 22px !important;
    height: 22px !important;
    padding: 4px !important;
    margin-inline-end: 4px !important;
    margin-inline-start: 2px !important;

    appearance: none !important;
    background: none !important;
    border: none !important;
    border-radius: 3px !important;
    /* Slightly tighter corner radius */
}

/* 4. The "Nano X" (Reduced by 50%) */
.tab-close-button::before,
.tab-close-button::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    /* Reduced width to 2.1px (exactly 50% smaller) */
    width: 2.1px !important;
    height: 1px !important;

    background-color: currentColor !important;
    opacity: 0.4 !important;
    /* Slightly higher opacity so it's still visible at this size */
    transition: opacity 0.15s ease !important;
}

/* The X shape rotation */
.tab-close-button::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.tab-close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* 5. Hover State */
.tab-close-button:hover {
    background-color: var(--toolbarbutton-hover-background, rgba(0, 0, 0, 0.08)) !important;
}

.tab-close-button:hover::before,
.tab-close-button:hover::after {
    opacity: 1 !important;
}

/* 6. Layout Anchors */
.tab-icon-stack {
    order: 0 !important;
}

.tab-label-container {
    order: 1 !important;
}

Kód je převzatý, nalezeno na internetu, ale plně funkční.

Po uložení souboru stačí restartovat (zavřít a spustit) Firefox a křížek pro zavření panelu je vlevo...