Adding kde-plasma-refresh

[iamthesenate1]

[Disclaimer] This is very much a draft, and many things will change. Please don't consider this a final "version".

First of all, I know themes are very subjective . Maybe some of these changes will never see the light of upstream, but some of them are, IMO, logical. For example removing the border of the menu:
->Here is the before, where the menu has a very ugly border.

-> Here is the after, without the menu border.

Other changes (planned or done) include:

• Making the panel semi-transparent.
• Making the menu semi-transparent. -> I really don't know if it is a good idea. To me it just looks uglier.
• Other improvements.

[tsujan]

Thanks for paying attention to details!

but some of them are, IMO, logical. For example removing the border of the menu

Actually, the inverse is logical. The border is needed when the background has the same color, exactly like the a part of your second screenshot, in which the menu can't be distinguished from its background because you've removed its border..

One word about SVG images:

I saw the same thing in lxqt/lxqt.github.io#69 too: SVG files need to be cleaned up before being used. There are various tools for that, SVG Cleaner being one of them. For example, your themes/kde-plasma-refresh/left-arrow.svg has many redundant lines that add to its size unnecessarily.

[tsujan]

BTW, you don't need to be root to work on themes (your screenshots suggest that you edit themes as root). Optionally and more comfortably, you could use the directory ~/.local/share/lxqt/themes/.

[iamthesenate1]

Thanks for your feedback. I really appreciate it.

Actually, the inverse is logical. The border is needed when the background has the same color, exactly like the a part of your second screenshot, in which the menu can't be distinguished from its background because you've removed its border.

I see your point. Still. I find the borderless version more modern. I know this is very subjective. Maybe a border of another color? (Maybe the blue that is used for the selected item?). I'll keep investigating other options.

One word about SVG images:

I saw the same thing in lxqt/lxqt.github.io#69 too: SVG files need to be cleaned up before being used. There are various tools for that, SVG Cleaner being one of them. For example, your themes/kde-plasma-refresh/left-arrow.svg has many redundant lines that add to its size unnecessarily.

I didn't know about SVG Cleaner. Thanks so much for pointing it out. I was actually wandering if there was something to make SVG file sizes smaller.

[iamthesenate1]

BTW, you don't need to be root to work on themes (your screenshots suggest that you edit themes as root). Optionally and more comfortably, you could use the directory ~/.local/share/lxqt/themes/.

Thanks.

[tsujan]

I was actually wandering if there was something to make SVG file sizes smaller.

For example, with correct settings in SVG Cleaner (or another tool), themes/kde-plasma-refresh/left-arrow.svg can be reduced to this without losing anything:

<svg width="22" version="1.1" xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 0 22 22">
<path style="fill:#4d4d4d" d="M 15,19 15.707,18.293 9.582,12.168 8.414,11 9.582,9.832 15.707,3.707 15,3 8.875,9.125 7,11 8.875,12.875 Z"/>
</svg>

In that way, 7KB becomes 335B.

EDIT: I made it even simpler, with a size of 224B.

[tsujan]

I know this is very subjective.

Yes, it is :) What you find ugly may be elegant to another person, and vice versa. Tastes can differ very much!

That's why it's better to focus on practical matters only, IMHO.

[iamthesenate1]

In that way, 7KB becomes 335B.

EDIT: I made it even simpler, with a size of 224B.

WOW.
I have no words. The only thing I can say is: "ipse se nihil scire id unum sciat.".

I'll start updating all SVG's from my PR's ASAP.

[iamthesenate1]

I know this is very subjective.

Yes, it is :) What you find ugly may be elegant to another person, and vice versa. Tastes can differ very much!

That's why it's better to focus on practical matters only, IMHO.

I know... . I think I have found a compromise. The border still remains, but it is now blue and at 30% opacity. The border is now less obvious, but still enough to differentiate the background from the menu.

[iamthesenate1]

Hi. While experimenting with different settings I might have discovered a bug. Basically, every next result doesn't get applied custom opacity:

Am I doing something wrong or is this a bug?

[tsujan]

With every change or set of changes, you should restart the panel or lxqt-runner (from LXQt session settings) to see the real difference. Things like translucency can't be applied on the fly. There's no bug on our part.

Also, you need compositing with translucency.

[iamthesenate1]

With every change or set of changes, you should restart the panel or lxqt-runner (from LXQt session settings) to see the real difference. Things like translucency can't be applied on the fly.

I know, I've been doing this every time I changed something, so this is not the cause.

Also, you need compositing with translucency.

I have KwinFT so this is not the problem either.

[tsujan]

Then, sorry, I should have misunderstood the problem you were referring to — especially the meaning of this sentence wasn't clear: "every next result doesn't get applied custom opacity". Please describe it in a step by step way.

[iamthesenate1]

Nvm. It was my mistake. The plasma theme has the results of lxqt-runner show different colors for consecutive results. Initially, I didn't realise this was happening and when I applied the translucency I thought there was a bug. Sorry for alarming you.

Here is an exemplification of the results' background color:

1.A lighter shade of white
2.A darker shade
1.A lighter shade
2.A darker shade
1.A lighter shade
2.A darker shade
...

[iamthesenate1]

Also, do you know how to change the darker shade's translucency?

[tsujan]

Also, do you know how to change the darker shade's translucency?

I don't understand what you mean by "darker shade's translucency." For example, an opacity of 80% can be defined as rgba(X, Y, Z, 80%).

[iamthesenate1]

Also, do you know how to change the darker shade's translucency?

I don't understand what you mean by "darker shade's translucency." For example, an opacity of 80% can be defined as rgba(X, Y, Z, 80%).

First of all, I was mistaken. The lighter shade is the "problem".

For example, an opacity of 80% can be defined as rgba(X, Y, Z, 80%).

I know. the problem is the the lighter shade (see https://user-images.githubusercontent.com/77978836/124358853-da0db280-dc2a-11eb-9677-a81866722963.jpg), is not affected by the rgba setting.

[tsujan]

Sorry, I don't know what you mean by "darker/higher shade translucency".

Opacity has its separate value. If you have a color gradient, you could give separate opacity values to its "stop" colors and they will be exactly as you put them there. That's related to CSS, not Qt.

[iamthesenate1]

This:

[tsujan]

You may want to be much more specific when asking questions ;) Your attached screenshot didn't explain anything. Or perhaps another LXQt member could understand your question.

[iamthesenate1]

Well, the first and the third result are still solid white, without the translucency applied.

[iamthesenate1]

 <property name="alternatingRowColors">
       <bool>true</bool>
      </property>

This is the relevant part in dialog.ui (from lxqt-runner)

[tsujan]

This is LXQt Runner popup with translucency (I made it in a few minutes -- didn't care about elegance):

The relevant parts of CSS:

Dialog {
    background-color: transparent;
}

#commandList {
    background-color: rgba(0, 0, 0, 30%);
    alternate-background-color: rgba(0, 0, 0, 10%);
    color: white;
    selection-color: black;
}

#commandList::item:selected {
    background: rgba(255, 255, 255, 50%);
}

#commandList::item:hover {
    background: rgba(255, 255, 255, 25%);
}

#commandList::item:selected:hover {
    background: white;
}

#commandList::item:alternate:hover {
    background: rgba(255, 255, 255, 12%);
}

You should have made a mistake somewhere.

[iamthesenate1]

alternate-background-color

This is the line I was missing. Thanks and sorry for not being able to explain it better.

[tsujan]

Oh, now everything is clear. By "darker shade" you meant the alternate background color. It isn't necessarily darker; depends on the theme.

Please note that the above CSS isn't good at all -- I made it just to show that there was no problem. You should give alternate-background-color a color different from background-color if you want it to be distinguished against all backgrounds with translucency.

[iamthesenate1]

Oh, now everything is clear. By "darker shade" you meant the alternate background color. It isn't necessarily darker; depends on the theme.

Yes. I didn't know how it was named so I tried to explain from what I saw in the current kde-plasma theme.

You should give alternate-background-color a color different from background-color if you want it to be distinguished against all backgrounds with translucency.

I know. This is the weird part. I am working on top of the current kde-plasma theme and, while that line was missing, the alternate color still existed,.

[tsujan]

CSS can be complex. A definition may be missed by the theme maker while it affects everything.

BTW, you may already know it but to be completely clear:

LXQt doesn't have "Plasma". "KDE-plasma" was just a name given to a certain theme. LXQt uses QSS (Qt's CSS implementation) for its panel, runner and some other components, while KDE uses Qt Quick and has its own definitions. We avoid Qt Quick in LXQt.

[iamthesenate1]

BTW, you may already know it but to be completely clear:

LXQt doesn't have "Plasma". "KDE-plasma" was just a name given to a certain theme. LXQt uses QSS (Qt's CSS implementation) for its panel, runner and some other components, while KDE uses Qt Quick and has its own definitions. We avoid Qt Quick in LXQt.

Yes. I know. I used "plasma" as a way to shorten the name.
I have edited my earlier comment so that people reading this would not understand the wrong thing.

[iamthesenate1]

This is not finalized yet, but I was wandering that if the final changes could be integrated in the current kde-plasma theme. I'm asking because I don't plan for "big" changes, in the sense that, the changes I'll do are not about making something new, but much rather about "refineing". Also, adding a new theme seems to me like a lot of duplication.
Thoughts?

[tsujan]

IMO, we'd better not change the looks and feels of the current themes. You made this theme based on your taste; so, it could be reviewed and added as a new theme. Its name already tells that it's a variant of kde-plasma theme.

BTW:

1. There are still non-optimized SVG files.
2. GitHub isn't happy about the lack of an empty new line in some cases — e.g. in themes/kde-plasma-refresh/application-menu.svg. Please add them. (You could also use a text editor that has an option for adding them automatically — like FeatherPad).

[iamthesenate1]

BTW:

1. There are still non-optimized SVG files.

2. GitHub isn't happy about the lack of an empty new line in some cases — e.g. in themes/kde-plasma-refresh/application-menu.svg. Please add them. (You could also use a text editor that has an option for adding them automatically — like FeatherPad).

Done.

[iamthesenate1]

Closing this for now as I don't plan to work on it soon.