Aide-memoire: CSS changes introduced for Cinnamon 3.4
Closed this issue · 8 comments
A note for designers for CSS changes introduced after Cinnamon 3.2
in a dark panel theme:
.system-status-icon.warning {
color: #e5e887;
}
.system-status-icon.error {
color: #fb5858;
}
in a light panel theme:
.system-status-icon.warning {
color: #d2aa1e;
}
.system-status-icon.error {
color: #d54444;
}
The new warning/error colors used on .system-status-icon are currently used by the power applet to warn the user when their battery is low.
The Cinnamon St library now reacts to margin, but that also means that spacing needs to be explicitly added for TextIcon applets between the icon and the label in the CSS. Some suitable spacing between icons and their labels needs to be put into the CSS. In most themes this just means you have to put
spacing: 3px;
into applet-box (not into applet-box.vertical).
margin:auto should be removed from existing CSS. It did not do anything in the past, but the recent changes to let the St library react to margin now causes it to trigger warning messages (you will see these in .xsession-errors). If you see a baffling warning message about line:1 column: 80 then that will be as a result of the CSS parser finding an issue in program inserted CSS, which will be in an applet or desklet.
.systray {
}
There is now a basic facility to theme the systray. It's marked as 'important' so no need to put it in your CSS unless you want to use it. Using this will allow you to apply theming to the systray as a whole, but not to individual icons in it.
The new warning/error colors used on .system-status-icon are currently used by the power applet to warn the user when there battery is low.
The Cinnamon St library now reacts to margin, but that also means that spacing needs to be explicitly added for TextIcon applets between the icon and the label in the CSS. Some suitable spacing between icons and their labels needs to be put into the CSS. In most themes this just means you have to put
spacing: 3px;
This thing @brownsr suggested makes some applets to be misaligned. With that change introduced to Cinnamon it is no longer possible to center some applets in their boxes. Not with this "fix", not with margins on the labels, icons, paddings on the applet-box... nothing. As long as the empty label is still there, there is no way to fix it, because the above mentioned properties and the spacing still applies.
This affects most themes, which has adopted this change recently. Here's an example of what I say, but it affects more applets, like the menu, bluetooth... Notice the difference between inhibit against sound and power.
These are some examples of code that doesn't work:
.applet-box {
spacing: 3px;
}.applet-label, .applet-icon {
margin: 3px;
}.applet-label {
padding: 3px;
}The themer has to choose between this or the text comes just close to the icon. There's no way to achieve the old result. I post this here because there may be a solution I can't see, and it would be great if any theme developer found a solution to this problem and posted it here for everyone. (Or a fix from the Cinnamon side).
@germanfr I cannot reproduce the problem. But then I am running on the development version of Cinnamon 3.4.1 which has code changes in this area. Perhaps that's the reason.
Hello, everybody.
I post this here because there may be a solution I can't see...
Short answer. The only solution is to create themes specifically for Cinnamon 3.4.x and leave your current themes untouched for retro-compatibility.
Long answer. Previous to Cinnamon 3.4.x, some elements had a fixed spacing (or padding/margin, can't remember exactly which). On Cinnamon 3.4.x, those fixed sizes were removed and now are applied by the CSS theme. If you use a modified theme with the changes for Cinnamon 3.4.x on a Cinnamon version older than 3.4.x, then you are applying the spacing from the CSS theme plus the spacing that it's already hard coded on the JavaScript class (or classes).
@brownsr @Odyseus I'm talking about Cinnamon 3.4.1 and themes already updated to work there. Check it on Loki theme, for example.
If you do nothing there's no space between the icon and the label, but if you do one of the above tricks this bug happens. There's a space at the right of some applet icons which is the spacing/margin/padding of the empty label.
This is what I'm talking about (the outer box is the applet-box highlighted):
Hello, everybody.
@germanfr: I also had the issue that you describe (See image).
The applet at the top has its empty label shown and the spacing applied. The applet at the bottom has its empty label hidden and the spacing isn't applied.
I left it as is to deal later because I thought that it was a problem with my theme not fully updated for Cinnamon 3.4.x. Recently I fully updated my theme for 3.4.x, and the problem persisted. Long story short, the problem was in my applets (I base all my applets on the TextIconApplet prototype). The empty label that you highlight in your illustration shouldn't be there at all, that's why the spacing is applied.
Anyway, that was my problem and I fixed it. Maybe isn't the same problem that you have, but it is worth checking.
@Odyseus yes, it's the same issue. The problem is not with the theme, but I thought there could be a theme-side solution that didn't reveal this bug.
Moved description of Cinnamon 3.4 changes to main readme. Closing this issue. Please open a new issue if you believe the discussion above should be carried forward - I can't reproduce any problem myself on the current code and theme base.
Regards
Simon