Setting margin in style.scss works the opposite way

[AndreyDeimos]

I've set window exclusivity to "exclusive", and by default it overlaps with my windows. When i try to increase the margin option, the overlaps gets bigger However when I set margin to negative, the overlap is disappears, but border radius breaks

[linkfrg]

Can you please share your config file and style.css?

[AndreyDeimos]

Can you please share your config file and style.css?

# fmt: off
import os
import subprocess

from ignis.app import IgnisApp from ignis.utils import Utils

from ignis.services.network import WifiDevice

from ignis.widgets import Widget

app = IgnisApp.get_default()

app.apply_css(os.path.expanduser("~/.config/ignis/style.scss"))

count = 0

def AddCount(x): global count count += 1

def UpdateCount(count_label: Widget.Label()) -> None: count_label.set_label(str(count))

def hamster_kombat(monitor: int) -> Widget.Window: global count

count_label = Widget.Label(css_classes=["count"])

Utils.Poll(100, lambda x: UpdateCount(count_label))

homyak = Widget.Button(
    child = Widget.Picture(
        image = os.path.expanduser("~/th-54141650.jpg"),
        width = 100,
        height = 100,
    ),
    css_classes=["homyak"],
    on_click = AddCount
)

return Widget.Window(
    namespace=f"some-window-{monitor}",
    monitor = monitor,
    css_classes = ["da-bar"],
    anchor = ["left"],
    exclusivity = "exclusive",
    layer = "top",
    child = Widget.Box(
        vertical = True,
        spacing = 10,
        child = [
            count_label,
            homyak
        ]
    )
)

hamster_kombat(0)

style.scss

.homyak { all: unset; padding: 0; color: red; } .da-bar { background: #FFFFFF; border-radius: 5px; padding: 10px; margin: -10px; }

.count { color: black;

}

[linkfrg]

strange, can not reproduce:

Without margin: -10px;:

What version of Ignis do you have installed (ignis or ignis-git)? Also show the output from ignis --version

[linkfrg]

you shouldn't add css properties directly to the window, this usually works strangely and can cause bugs. Instead, add a css class to the most top box in your window, and when stylize it:

config.py

return Widget.Window(
        namespace=f"some-window-{monitor}",
        monitor = monitor,
        css_classes = ["da-bar"],  # this class unused, you can delete it
        anchor = ["left"],
        exclusivity = "exclusive",
        layer = "top",
        child = Widget.Box(
            css_classes=["da-box"],  # we will add styles to this box
            vertical = True,
            spacing = 10,
            child = [
                count_label,
                homyak
            ]
        )
    )

style.scss

.homyak {
  all: unset;
  padding: 0;
  color: red;
}

.da-box {
    border-radius: 5px;
    background: #FFFFFF;
    margin: 10px;
}

.count {
  color: black;
}

The result:

[linkfrg]

Also TIP: you can set a new label at once in AddCount(), without Utils.Poll, this will reduce the load on your system. Just use lambda functions and pass count_label as an argument:

config.py

# fmt: off
import os
import subprocess

from ignis.app import IgnisApp
from ignis.utils import Utils
# from ignis.services.network import WifiDevice
from ignis.widgets import Widget

app = IgnisApp.get_default()

app.apply_css(os.path.expanduser("~/.config/ignis/style.scss"))

count = 0

def AddCount(count_label: Widget.Label) -> None:
    global count
    count += 1
    count_label.label = str(count)

def hamster_kombat(monitor: int) -> Widget.Window:
    count_label = Widget.Label(css_classes=["count"], label=str(count))

    homyak = Widget.Button(
        child = Widget.Picture(
            image = os.path.expanduser("~/th-54141650.jpg"),
            width = 100,
            height = 100,
        ),
        css_classes=["homyak"],
        on_click = lambda x: AddCount(count_label)
        #                 x - is a Widget.Button, we don't need it
    )

    return Widget.Window(
        namespace=f"some-window-{monitor}",
        monitor = monitor,
        anchor = ["left"],
        exclusivity = "exclusive",
        layer = "top",
        child = Widget.Box(
            css_classes=["da-box"],
            vertical = True,
            spacing = 10,
            child = [
                count_label,
                homyak
            ]
        )
    )

hamster_kombat(0)

[linkfrg]

also tip tip: Use snake_case for naming functions, this is common in Python according to PEP, and is good practice.

[AndreyDeimos]

Thanks for your response and all the tips, however I still have a problem. After copying your code, I discovered that the first problem is the absence of border-radius on the bottom of the box. Nevertheless, I managed to resolve the issue by adding padding to the box. But the next issue is that the window still has background,

and the only fix I found is to set the css option manually or do

* {

  all: unset;

}

in the start of style.scss

Is this how it sholud work?

[linkfrg]

yep, GTK provides default styles for many widgets, so if you don't need them, you can unset them.

[AndreyDeimos]

yep, GTK provides default styles for many widgets, so if you don't need them, you can unset them.

Thank you very much for your help!