~./gtk-3.0/gtk.css gets corrupted when editing with the Themes applet

[FBachofner]

Distribution

Fedora 40 - Cinnamon Spin

Package version

Cinnamon 6.2.4

Graphics hardware in use

N/A -- on this machine, Intel Corporation Whiskey Lake-U GT1 [UHD Graphics 610]

Frequency

Always

Bug description

I have been trying to achieve "sharp" corners (where Cinnamon rounds the top corners . . . i.e. the "header bar")

To this end, I am trying various edits of ~./gtk-3.0/gtk.css which is somehow "included" in the active Cinnamon theme.

Problem discovered: the file gets corrupted when editing things like "scrollbar width" with the Themes applet.

Essentially, the entire file gets duplicated with "headings" of "/ scrollbar slider - cinnamon-settings-generated - do not edit /"

The gtk.css file just keeps growing and growing with TONS of duplicated content.

Steps to reproduce

1. Manually edit ~./gtk-3.0/gtk.css to "include" various CSS tweaks to be applied to the current theme.
2. Save the file and close the editor.
3. Change to a different theme in the Themes app
4. Change to Themes/Settings tab
5. change anything, really (but certainly "scrollbar width)
6. Close app
7. Go look at the file ~./gtk-3.0/gtk.css
8. It has become a duplicative MESS!

Important note:

Even if the ~./gtk-3.0/gtk.css gets no additions and is only "edited" by the Cinnamon Theme app, this file will grow each time a change is made to themes (like selecting a different theme)

Expected behavior

Please don't edit the file except for the scrollbar slider values.

Additional information

Thanks to @the-allanc of Minty Color Titles for pointing the way to simple theme-modifications in Cinnamon

@clefebvre and/or other Cinnamon devs: can you point out how I might use this file (~./gtk-3.0/gtk.css ) to achieve "sharp" top corners in all Cinnamon themes?

Since rounded bottom corners are apparently not "universally" possible in Cinnamon, all four "sharp" corners are an excellent alternative (in fact we would prefer it!).

I have a lot of users complaining about asymmetry between top and bottom of a window . . .

I have tried things like adding: "border-radius: 0px;" to the sections:

headerbar:not(:backdrop), headerbar:not(:backdrop) button:not(:backdrop) {

and

headerbar:backdrop, headerbar:backdrop button:backdrop {

to no avail!

[FBachofner]

Regarding the "additional information" and the desired four "sharp" window corners, this is "solved."

By editing the gtk.css file as follows:

/* Active window BORDERS: sizes & colors; top corner squaring */

decoration:not(:backdrop) {
    border: 2px solid @active_window_bg_color;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background: gray;
}
decoration {
    border: 2px solid @inactive_window_bg_color;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background: gray;
}

The top corners then also become squared (just like a window's bottom corners).

[FBachofner]

Please note: I have now determined any selection of a different theme will cause the ~./gtk-3.0/gtk.css to become "corrupt" with wholesale duplication of its content.

Unmonitored, this can quickly lead to excessive growth of the file.

[FBachofner]

Regarding the "additional information":

It turns out the CSS declarations in each section can be simplified to border radius: 0px;

So, I now have:

/* Active window BORDERS: sizes & colors; top corner squaring */
decoration:not(:backdrop) {
    border: 2px solid @active_window_bg_color;
    border-radius: 0px;
    background: gray;
}
decoration {
    border: 2px solid @inactive_window_bg_color;
    border-radius: 0px;
    background: gray;
}

Side benefit:

If Cinnamon ever rounds the bottom corners and you don't want that, this CSS code will likely "automatically" fix that.

The main bug (duplication of the file's content), however, remains.

[mfreeman72]

Have you tried editing the theme itself instead of ~/.config/gtk-3.0/gtk.css? Or just use a theme with sharp corners, such as Adapta?

[fredcw]

@FBachofner I can't reproduce this. The only setting that seems to change ~./gtk-3.0/gtk.css is scroll bar width in themes settings and it only seems to duplicate the line /***** scrollbar slider - cinnamon-settings-generated - do not edit *****/

Can you give an example of a file that would have its contents duplicated?