Documenting styling

[brettz9]

Given especially that certain themes (in my case, the UI Dark theme) may reduce the prominence of pinned tabs too much to the extent that they become harder to find to click on, I thought it could be useful for you to make mention in your docs (if not settings as well) of how pinned tabs can be targeted within Atom->Stylesheet... (~/.atom/styles.less).

As I detailed at averrin/color-tabs-regex#18 , a user could target them (based on active/inactive state) such as follows:

    .tab.pinned.active[data-type$="Editor"] {
        background-image: none;
        background-color: white;
    }
    .tab.pinned:not(.active)[data-type$="Editor"] {
        border-radius: 10px;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        border-right: 1px outset white;
        border-left: 1px outset white;
        opacity: 0.7;
    }

And FWIW, at that link, I also mention how to target tabs with specific file types, something that could also be applied to pinned tabs of a specific file type/extension if one wished.

[ericcornelissen]

Thanks for the suggestion, great idea 👍

I did a quick draft below, let me know what you think @brettz9 (I specifically left out [data-type$="Editor"] because it is also possible to pin for example the settings tab...)

---

Customization

You can add custom styles for pinned tabs. Use your Stylesheet and target .tab.pinned to tweak a pinned tab. You can consult the package stylesheet to see what classes are used.

Below are a few examples of ways to customize the styling of pinned tabs.

Style the active pinned tab specifically

.tab.pinned.active {
    ...
}

/* Or all not active pinned tabs */
.tab.pinned:not(.active) {
    ...
}

Change the icon

.tab.pinned > .title::before {
     /* The icon size */
    font-size: medium; 18px;

    /* The icon itself */
    font-family: Devicons;
    content: "\E64E";
}

If you're using File Icon, you can check out its customization documentation as well.

Change the icon of a modified tab

.tab.pinned.modified:hover .title::before {
    border: none; /* The default is produced with a border */
    font-size: 18px;
    font-family: Devicons;
    content: "\E64E";
}

Change the pinned icon (when using visual studio pinning)

.tab.pinned .close-icon::before {
    font-family: Devicons;
    content: "\E64E";
}

[brettz9]

Good to know about the Editor type selector unduly restricting tabs like Settings. However, FWIW, I found that removing that also ended up styling the Project "tab", and as I didn't want my colorful gradient appearing everywhere, I found it useful to eliminate that via:

.tab.active:not([data-type$="TreeView"]) {

[ericcornelissen]

Good to know, perhaps it is easier to use .tab-bar .tab.pinned (or .tab-bar .tab.pinned.active) instead 🤔

[brettz9]

Oh, sorry, my apologies--I forgot we were talking about pinned tabs here! :)

So yeah, for the pinned tabs, the extra selector for data-type is indeed not necessary.

But just for reference, for those wishing to target normal tabs (including Settings tabs), but don't want to style the "Project" header ([data-type="TreeView"]) (or also I see now the Github header (for me, it is showing data-type="Object") in the Inspector of the console)--both of which are implemented as having the "tab" class--something like this is needed:

.tab.active:not([data-type="TreeView"]):not([data-type="Object"]) {
    // ...
}

[ericcornelissen]

Ah 😅 I didn't understand why you where talking about normal tabs initially but now I see your point. Unfortunately, I couldn't find a better way to only target 'normal' tabs (your selector looks a bit ugly 😒) but I will see how I can include it in the README.

or also I see now the Github header (for me, it is showing data-type="Object") in the Inspector of the console

That seems like someone forgot to name that tab 🤦‍♂️

both of which are implemented as having the "tab" class

Interestingly, as it turns out, it is currently actually possible to pin these tabs as well 🤔 That should probably be changed (updated in 3702f7a). Also, looking at the DOM I found out that my earlier solution of using .tab-bar .tab.pinned does not help as both of these also use .tab-bar 😕

[brettz9]

I came across another non-pinned type to exclude, data-type="PanelDock". Was showing up in the Linter Panel at the bottom of the page.