Block Properties UI: Auto-Hiding/Revealing-on-Hover

Questions & Help
3

For interested people, I managed to work out the CSS code for when there is a SCHEDULED or DEADLINE setup for the block, which would break my prevois code and Properties DIV wouldn’t show on Hover. The new updated and improved code is:

/* Styles for displaying block properties */
.block-properties {
  display: none;
  position: absolute;
  transform: translateX(0%); /* Move the properties horizontally aligned with the ".block-content-inner" DIV Left Margin */
  border-radius: 5px;
  padding: 10px;
  border: 1px solid var(--ls-secondary-border-color); /* Add custom border color from pre-defied variables */
}
/* Show block properties on hovering .block-content-inner */
.block-content-inner:hover ~ .block-properties {
  display: block;
  opacity: 1;
  z-index: 999;
}
/* Hide .timestamp div on hovering .block-content-inner */
.block-content-inner:hover ~ .timestamp {
  display: none; /* Hide the .timestamp div when hovering on .block-content-inner */
}
/* Override styles for block properties in right sidebar */
#right-sidebar .block-properties {
  display: block;
  position: relative;
}
2 Likes