Hide block properties when block is collapsed

Customization
21

To be fair, if Blocks are collapsed, having the properties show up on hover is a nice way to get a glimpse of what’s inside, if the Title of the Block is not helpful enough. But I wish there was a way to add a timing to the hover so that just scrolling would not flash on screen all properties of the traversed collapsed blocks.

Is it maybe possible somehow to say: if I hover over a block title and the block is collapsed and if my mouse stays there for 2seconds then show the properties div?

1 Like
22

This is possible with css attribute transition and its delay value.

23

Can someone make the transition delay in a code snippet that i (a total rookie) can copy and paste?

I too want the delay to be a bit longer, cause i dislike the hover over linked sites to show up so soon.

24

I haven’t managed to make it work :frowning: …

25

If we use e.g. @FlorianF’s code, we can do either:

  • a transition:
    • inside rule .block-content-inner:hover ~ .block-properties {
      • add these lines:
          transition: opacity 2s step-end;
  @starting-style {
    opacity: 0;
  }
  • an animation:
    • define the following animation:
      @keyframes anim {
  0% {
    display: none;
  }
  100% {
    display: block;
  }
}
    • then inside rule .block-content-inner:hover ~ .block-properties {
      • add this line: animation: anim 2s step-end;
26

I don’t know why or if I have any conflicting CSS but I tried so many variations from web and your suggestion also and I don’t see any difference… :man_shrugging:

27

Most probably you have conflicting code. Try in an empty graph without customizations.

28

I have noticed that sometimes a custom css only workes if i put it in another place in my custom.css. Is there a specific order that one has to comply with?

For examples: I recently added some new custom.css and suddenly my hide-block-properties stopped working. If i put it back on the very top of my custom.css it starts working again…

29
  • The later/lower a css rule is placed in the file, the higher its priority (i.e. it trumps previous rules).
  • Ideally, should merge similar rules to a single desired one, so as to avoid such issues.
2 Likes
30

Thanks. It works for me. But it also hides page properties. Are there any configurations to show page properties while hide block properties?

UPDATE: I have solved this by adding :not(.page-properties)

my implementation: Collapse/Hide Properties Easily - #4 by hulalala