Notebookbar selected item layout

[Andreas-Kainz]

If there is an command selected at the notebookbar, the icon background is gray and the label is black

Automatic Spell Check is selected and Word Count not

I suggested to a better layout for selected items

[Andreas-Kainz]

In classic mode the icon has a frame, which look similar to the dropdown for font name.

[Andreas-Kainz]

The Notebookbar selection brand on the default nextcloud client

[Andreas-Kainz]

I prefer how it look in LibreOffice, an blue frame with an transparent area fill setting. Maybe cool can use the app color for selection so blue in writer, green in calc, ...

[Andreas-Kainz]

additional space like in #1212 would be cool

[Andreas-Kainz]

Which color or variable should be used for select command?

App dependent color

writer calc impress

use the highlight-color

[Andreas-Kainz]

code for notebookbar.css

.hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline) {
    border-radius: 2px;
    border: 1px solid rgb(30, 139, 205);
    background-color: rgb(30, 139, 205, 0.2);
}

[Andreas-Kainz]

What I like is, that the layout is similar to what our LibreOffice Windows users already know.

[pedropintosilva]

I think it's a nice idea : ) I just wonder how this can clash with current theming we are allowing integrators to have via the css vars (that currently affects that accent colour). we currently listened to the primary color from let's say NC and use it exactly in that place.

and I also wonder if changing that accent colour used here for communicating select status could go wrong (example when on impress things that are on will be somehow more near to red is might not be that good but maybe I'm being overly cautious)

and is it using the same colour from the TAB? (it should be using the css var) and how would it look on the switcher buttons?:

[Andreas-Kainz]

Select and switcher buttons should use the same color/layout. Hover the same. Like it's on LibreOffice desktop.

The question is, shoul the color be app specific or use the primary color let's say NC.