chat list navbar

[DownPW]

Hi @phenomlab

After upgrade of nodebb 3.2.1, I have small bugs that I can’t solve

1 & 2

Can you help me with that ?

3
I search css class and css class hover for new button “Mark all as read” and “All Chats” on chat navbar:

Thanks in advance

[phenomlab]

@DownPW said in chat list navbar:

Can you help me with that ?

Looks like you want to get rid of the border in the highlighted area on the right image, and show the border on the left image ?

@DownPW said in chat list navbar:

I search css class and css class hover for new button “Mark all as read” and “All Chats” on chat navbar:

For “Mark all as read” you should be able to target

btn btn-secondary mark-all-read and btn btn-secondary mark-all-read:hover respectively

Targeting “All chats” is much harder, as it shares the btn btn-secondary class which is used in multiple places. For it to work how I wanted it, I needed to be more specific in the target, so had to use

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    /* your CSS here */
}

[DownPW]

@phenomlab said in chat list navbar:

@DownPW said in chat list navbar:

Can you help me with that ?

Looks like you want to get rid of the border in the highlighted area on the right image

in fact I would like the menu not to overflow on the navbar because it was not the case before

@phenomlab said in chat list navbar:

and show the border on the left image

Yes exactly

@phenomlab said in chat list navbar:

For “Mark all as read” you should be able to target
btn btn-secondary mark-all-read and btn btn-secondary mark-all-read:hover respectively
Targeting “All chats” is much harder, as it shares the btn btn-secondary class which is used in multiple places. For it to work how I wanted it, I needed to be more specific in the target, so had to use

I wil test that and let you know

[phenomlab]

@DownPW said in chat list navbar:

in fact I would like the menu not to overflow on the navbar because it was not the case before

Ah, that makes sense. You can probably do that with a simple margin CSS command. Is your test instance up ?

[DownPW]

@phenomlab yes

[DownPW]

@phenomlab said in chat list navbar:

btn btn-secondary mark-all-read and btn btn-secondary mark-all-read:hover respectively

Not work with that for example:

.btn .btn-secondary .mark-all-read {
	color: red !important;
}

.btn .btn-secondary .mark-all-read:hover {
  background: #212427;
	color: #ccc !important;
}

And .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child):telephone_receiver:

not too

[phenomlab]

@DownPW said in chat list navbar:

in fact I would like the menu not to overflow on the navbar because it was not the case before

That’s being caused by deliberate negative padding. This will fix it

.chat-list {
    margin-top: 0px;
}

[phenomlab]

@DownPW said in chat list navbar:

Not work with that for example:

Seems to work for me on your site, but (sorry), it should be a.btn .btn-secondary .mark-all-read

[DownPW]

yeah great…

Can you test All chats button hover ?
Because .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child):hover not work

[phenomlab]

@DownPW Works for me ?

[DownPW]

@phenomlab

Yeah good for “Mark all as read” but not All chats button:

@DownPW said in chat list navbar:

yeah great…

Can you test All chats button hover ?
Because .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child):hover not work

[phenomlab]

@DownPW said in chat list navbar:

Yeah good for “Mark all as read” but not All chats button:

Yes, sadly, that element is in use in several other places. You could target it directly, but it will also mean changing it in multiple places which won’t be the desired effect. The most effective way would be to target a div ID, but you’d need something like jQuery to target that specific element and add an ID to it.

[DownPW]

@phenomlab

hmm hard for just an effect.
It’s a problem for my dark themes

In sudonix I see this :

and Hover:

I think it’s a better way, how achieve this effect (with different color) ?

[phenomlab]

@DownPW Ah, yes, I remember this one now - it was a nightmare to target, and I landed up using the pseudo class which unfortunately does include the border, but it’s subtle enough to still look good

Try this

.btn-group.btn-group-justified:hover {
    /* Your css here */
}

[DownPW]

I resolve with this

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    color: #ccc;
}

a.btn.btn-secondary:hover {
  color: #ccc;
  background: #212427;
}

.caret {
    color: #000;
}

a.btn.btn-secondary.mark-all-read {
	color: #ccc !important;
}

a.btn.btn-secondary.mark-all-read:hover {
  background: #212427;
	color: #ccc !important;
}

[DownPW]

@phenomlab

I have a problem on my themes.

Example I Have this on my css files :

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    color: var(--first-color) !important;
}

But this code is not taken into account

if i change in dev console (in live) it’s ok

Can you help me with that ?

[DownPW]

Maybe a problem with theme switcher & nodeBB 3.2.1 ?

[phenomlab]

@DownPW no, this works independently of NodeBB as it uses jQuery and CSS. The issue you have is the below

var(--first-color)

In CSS, var is a variable defined at root level and probably doesn’t exist in your CSS file. Essentially, it’s LESS. If you change the line so it looks (for example) like the below, it will probably then work

#ffffff;

The newer version of the theme switcher uses LESS variables as it’s more efficient but if these don’t exist then it looks like it’s being ignored when I’m fact it just returns a null value.

[DownPW]

yes i know for var all the theme is coded with var.

It’s the same things with #XXXXXX

[phenomlab]

@DownPW this sounds more like a caching issue to me. Do you get the same thing in an incognito session ?