How to shift collapsible tree items in Outline panel with CSS?

[ales230]

What I’m trying to do

On the left: The default outline panel (default theme without any CSS snippet)
On the right: The collapsible “formatting” item and its child items have been shifted to the left, resulting in all headings having the same indentation in the outline. This is what I want. Alternatively acceptable would be shifting the non-collapsible items (like “Properties” and “Tables”) to the right.

Things I have tried

Inspecting the “Formatting” heading shows “div.tree-item-self.is-clickable.mod-collapsible” as the selector but using padding-left/right and margin-left/right has no effect on it. I wasn’t able to find a working selector solely for the “div.tree-item-icon” and its vertical line. Using “div.tree-item-children” shifts only child items which is not what I want. Targeting “div.tree-item-inner” shifts all items…

[CawlinTeffid]

Do you see the same behavior after turning on Settings > Community Plugins > Restricted Mode? If so, you may want to search Bug reports to see if this problem has been reported and perhaps a workaround snippet posted. If there is no bug report, you may want to create one.

[ales230]

Yes, same behavior in restricted mode and thank you for moving the thread into the right forum section. The issue is solved now.

The CSS snippet below shifts only non-collapsible headings to the right.

:not([class*="collapsible"]) > div.tree-item-inner {
    padding-left: 9px;
}

[ales230]

Edit to only affect the outline panel:

div[data-type="outline"] :not([class*="collapsible"]) > div.tree-item-inner {
    padding-left: 9px;
}