[Solved]Pale Moon + lightweight themes: display of tabs (#2)

[Antonius32]

Yup, but that's still better done with an override based on Element ID since it's a special case as far as styling goes

Do you mean the proper way to do this is to first target the tabs-closebutton class as a whole, and then make an exception for the All Tabs view?

Like this:

Code: Select all

.tabs-closebutton:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
}

#allTabs-tab-close-button:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://global/skin/icons/close.png");
}

Oh, and I have one more question with regard to the screenshot you posted earlier: don't you think this change could prove problematic for truly dark / black themes?

[Moonchild]

Do you mean the proper way to do this is to first target the tabs-closebutton class as a whole, and then make an exception for the All Tabs view?

If you want to approach it logically, yes.
That way, if there are any other items with the class (which would normally need to styling) they will pick it up. The exception element (because of where it's used) will pick up the more specific rule.

don't you think this change could prove problematic for truly dark / black themes?

No, why would it? Pure black themes are limited to begin with, same as pure white. You can't make black blacker or white whiter.

[Antonius32]

No, why would it? Pure black themes are limited to begin with, same as pure white. You can't make black blacker or white whiter.

All right. I don't actually use a black theme, I was just thinking along with you.

Off-topic:
My extension, Blue Moon Linux, modifies both the Tab Strip Close button and the Sidebar Close button, but targets the first element in one style sheet, and the second in another. Currently the Tab Strip Close button is targeted with this selector:

Code: Select all

#TabsToolbar > .tabs-closebutton

and the Sidebar Close button with this one:

Code: Select all

#sidebar-header > .tabs-closebutton

If I'd target the tabs-closebutton class (that consists of three elements) as a whole in this case, I'd have to override that for two elements in each style sheet. What do you think would be the best solution here?

[Moonchild]

Off-topic:

What do you think would be the best solution here?

Which ever one you are most comfortable with It's your extension and your coding style!

[Antonius32]

Off-topic:

Which ever one you are most comfortable with It's your extension and your coding style!

I think in this case, it's best to target only specific elements, so I'll just leave things the way they are.

[riiis]

The Personas Expression add-on may provide a suitable work-around. This add-on uses the sidebar for its many formatting options. The launch button for the personas-expression sidebar can be found in the status bar.

[Antonius32]

If you use the tabs-closebutton class name without further specification, the Close button in the All Tabs view is targeted as well, and I think that's undesirable, don't you agree?

Yup, but that's still better done with an override based on Element ID since it's a special case as far as styling goes

You probably actually meant like this, correct?

Code: Select all

.tabs-closebutton:not(#allTabs-tab-close-button):-moz-lwtheme-brighttext {
  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
}

[Moonchild]

Um well, I meant more as different rules for sake of logic/clarity, but you should be able to compact it into one like that, I think. I tend to just have cascading rules, myself - much easier to work with, and it's called cascading styles for a reason
Besides, ID overrides class, anyway.

[Antonius32]

I meant more as different rules for sake of logic/clarity (...)

Ah, so you did mean having two separate rules, as in my first example. Thank you for clarifying.

[Antonius32]

I really like the new colour scheme for lightweight themes. Thank you, Moonchild!

[Moonchild]

I really like the new colour scheme for lightweight themes. Thank you, Moonchild!