CSS Styling Assistance Request: border: none on any selector disables borders globally

[AustinFoss]

I'm a beginner to GTK4 css and but I am familiar with CSS in the web and tinkered with me firefox userChrome.css before.

What I'm trying to achieve with this css:

@define-color color_bg alpha(#000000, 0.7);
@define-color purple #a020f0;
@define-color color_text #ffffff;

* {
    font-family: iMWritingMono Nerd Font, sans-serif;
    font-size: 16px;
    color: @color_text;
    background: none;
    box-shadow: none;
}

#bar {
    background-color: @color_bg;
    border-bottom: 3px solid @purple;
    display: none;
}

Is have a semi transparent background-color for my bar along with a border-bottom to try and mimic what my alacritty style looks like.

Unfortunately when I try and disable the border around my clock (the only widget on my bar), it also disables the border for the bar. Or if I set * { border: none; } and then try to set the #bar border again it remains disabled.

Even trying to set just .clock border bottom to none also disables #bar's border.

Could anyone shed light on why this behavior occurs?

[JakeStanger]

This doesn't sound right to me. It's possible what you're seeing is the entire stylesheet fail to load if there's an error.

Are you able to share the full config and stylesheet please? Do you also know what GTK4 theme you're using, if any?

[AustinFoss]

Thanks for your time and attention! :)

I don't think the css is failing to load, because at any point in my testing at least some form of the sheet is working. The above is my complete styles.css; but here again:

@define-color color_bg alpha(#000000, 0.7);
@define-color purple #a020f0;
@define-color color_text #ffffff;

* {
    font-family: iMWritingMono Nerd Font, sans-serif;
    font-size: 16px;
    color: @color_text;
    background: none;
    box-shadow: none;
}

#bar {
    background-color: @color_bg;
    border-bottom: 3px solid @purple;
}

This styles.css as is shows the desired background with semi-transparency plus the border. But the clock has a border by default I would like to disable. But again, placing border:none under * or .clock disables the border belonging to #bar.

Config:

position = "top"
height = 48
layer = "overlay"
start_hidden = true
exclusive_zone = false

[[start]]
type = "clock"
format = "%Y/%m/%d %H:%M:%S"

When I use gsettings get org.gnome.desktop.interface gtk-theme it says I'm using Adwaita.

[JakeStanger]

Very sorry it's taken me so long to look at this. I'm not able to replicate this issue though. With your css I get the purple border on the bar as expected. I've then added the following to the end of the stylesheet, and this removes the clock border while keeping the bar's own border in tact.

.clock {
  border: none;