Collapse/Hide Properties Easily

Feedback Feature Requests
5

I have updated custom.css, fixed some issues:

  1. Put the dot label in the vertical center when the block content covers multiple lines.
  2. Ensure the exact popup for property of hovered block in context of block reference and block embed (only the hovered block popups property rather than all blocks in block reference or block embed).
  3. Add transition animation to popup
/* Styles for Auto-Hiding and Revealing on Mouse Hover for Block Properties */
/* Now the properties' tags can be clicked too */
body[data-sc-props="hover-props"] .block-properties:not(.page-properties) {
      display: none;
      position: absolute;
      transform: translate(0%, -10%);
      /* transform: translate(0, -8px); */
      /* 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 */
      background: var(--ls-primary-background-color);
}

/* Show block properties on hovering .block-content.inline:has(.inline:hover) */
/* exclude setting .block-properties in .references-blocks-item */
/* 把空格改成>，避免在block embed中鼠标悬停时，全部冒出来 */
body[data-sc-props="hover-props"] .block-main-container .block-content.inline:has(.inline:hover, :is(h1,h2,h3,h4,h5,h6):hover)>.block-properties:not(.page-properties) {
      /* body[data-sc-props="hover-props"] .block-content-inner:hover~.block-properties { */
      display: block;
      /* opacity: 1; */
      z-index: 999;
      animation: anim 500ms step-end;
      transition: opacity 500ms;

      @starting-style {
            opacity: 0;
      }
      @keyframes anim {
            0% {
                  display: none;
            }
      
            100% {
                  display: block;
            }
      }
}

/* Keep Showing block properties on hovering .block-properties */
body[data-sc-props="hover-props"] .block-properties:not(.page-properties):hover {
      display: block;
      opacity: 1;
      z-index: 999;
}

/* 选中后面紧跟着block-properties的.block-content-inner */
body[data-sc-props="hover-props"] .block-content-inner:has(+.block-properties:not(.page-properties))::after {
      /* padding-left: 10px; */
      /* color: hsl(var(--ct-accent-color)); */
      /* font-family: var(--ls-font-family-code); */
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      content: "·";
      color: var(--ls-primary-text-color);
}

body[data-sc-props="with-props"] div#main-content-container:hover .block-properties:not(.page-properties) {
      text-decoration: underline wavy;
}

body[data-sc-props="without-props"] .block-properties:not(.page-properties) {
      display: none;
}

body[data-sc-props="without-props"] .block-content-inner:has(+.block-properties:not(.page-properties))::after {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      content: "·";
      color: var(--ls-primary-text-color);
}
1 Like