CSS to shift Contents Card buttons to the other side of the titlebar?

Questions & Help
1

Hello guys, I have a CSS question I can’t figure out. Here is the Contents Right SideBar Card and I want to position it to actually cover the “[Contents] [Page Graph] [Help]” section of the Logseq UI as I find it useless atm.

So when I trigger the “Toggle Contents in Sidebar” I get the Card positioned with fixed position in the mentioned area. But I have a problem: it seems that the Logseq UI Minimize, Maximize and Close buttons are overlapping with this Card’s dots button and the Close button.

image
image835×355 69.7 KB

What wizardry would I have to d to move these buttons at the begining of the header, first the Close button then the dots button just like MacOS usually has these buttons at the leftmost side pf a window title?

2
  • It doesn’t seem that overlapping should take place.
    • How exactly do you achieve this positioning?
  • Why not simply display: none the mentioned area instead and let everything else find their place?
3

I assumed the z-index would not have effect on such global controls like the minimiz, maximize and close buttons. Here’s my css:

div.flex.sidebar-item.content.color-level.rounded-md.shadow-lg.item-type-contents {
  position: absolute;
  right: 15px;
  top: 3px;
  z-index: 999;
  width: 98%;
  background-color: var(--ls-primary-background-color);
}

and here is the result:

image
image1196×269 38 KB

I would rather have them brought to the left than removed completely but that would be a last resort solution:

image
image1163×351 37.2 KB

Looking at the html with the inspector I see nothing specific only to the Contents Panel so it can be pinpointed with CSS only for this one panel. Apparently all the right sidebar panels have those same header and buttons …

4
  • Define css rules for these elements:
    • .sidebar-item-header
    • .item-actions.items-center
  • Set the value (e.g. to row-reverse) in either of the following css attributes:
    • flex-direction
    • flex-flow
5

I don’t really know how to do what you suggest but the “reverse” word made me dig into it and managed to do this:

image
image1161×227 28.4 KB

.flex.flex-row.justify-between.pr-2.sidebar-item-header.color-level.rounded-t-md {
  display: flex;
  flex-direction: row-reverse;
}

This makes all right sidebar cards / panels have the header elements’ order reversed which doesn’t look bad and I am fine with it, Now if I just managed to reverse order between the “X” and the “…” because that does bother me…

6
  • What you did is the rule for .sidebar-item-header
    • You just used the full class specification.
  • Now do the same for its child .item-actions.items-center
7

moaaa :slight_smile:

image
image1083×260 34.6 KB

This was wayy simpler than I thought:

.sidebar-item-header  {
  display: flex;
  flex-direction: row-reverse;
}

.item-actions.items-center  {
  display: flex;
  flex-direction: row-reverse;
}

Now it only bothers me deeply that I can’t reach into the Quick Capture Bullet Edit Mode with Keyboerd …

8

It is even simpler:

.sidebar-item-header,
.item-actions.items-center  {
  flex-direction: row-reverse;
}
1 Like
9

Ok, I failed to mention that the full functionality of triggering the Contents Card is that I can access it without clicking with the mouse inside it. Is it possible to select the first bullet in the contents card right after showing it?