Fold/Unfold Properties for Obsidian

Proeprties.css

/* ========== */
/* Properties */
/* ========== */

.metadata-content .text-button-icon {
  transform: translateY(-0.5em) translateX(-0.2em);
  color: hsla(
    calc(var(--accent-h) + 0),
    calc(var(--accent-s) + 0%),
    calc(var(--accent-l) + 10%),
    1
  );
}

.metadata-content .text-button-label {
  display: none;
}

.metadata-container .metadata-add-button {
  transform: translateY(-1em);
}


.metadata-input-checkbox {
  --checkbox-size: 1em;
}

.metadata-container {
  font-size: 1em;
}

.metadata-property {
  height: 1.9em;
}

.metadata-property[data-property-key="cssclasses"] {
  height: initial;
}

.metadata-property-key,
.metadata-property-value {
  border: none;
}

/* .workspace-tab-container:has(.workspace-leaf-content[data-type="file-properties"]) {
    margin-top: 2em;
    transition: max-height 0.9s ease-in-out; 
} */

/* Base styles for the icon, positioned relative to the surrounding container to remain visible */
.workspace-tab-container:has(.workspace-leaf-content[data-type="file-properties"])::before {
    content: " ";  /* Placeholder content */
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='black' viewBox='0 0 256 256'%3e%3cpath d='M224%2c128a96%2c96%2c0%2c1%2c1-96-96A96%2c96%2c0%2c0%2c1%2c224%2c128Z' opacity='0.2'%3e%3c/path%3e%3cpath d='M128%2c24A104%2c104%2c0%2c1%2c0%2c232%2c128%2c104.11%2c104.11%2c0%2c0%2c0%2c128%2c24Zm0%2c192a88%2c88%2c0%2c1%2c1%2c88-88A88.1%2c88.1%2c0%2c0%2c1%2c128%2c216Zm45.66-109.66a8%2c8%2c0%2c0%2c1%2c0%2c11.32l-40%2c40a8%2c8%2c0%2c0%2c1-11.32%2c0l-40-40a8%2c8%2c0%2c0%2c1%2c11.32-11.32L128%2c140.69l34.34-34.35A8%2c8%2c0%2c0%2c1%2c173.66%2c106.34Z'%3e%3c/path%3e%3c/svg%3e");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    background-color: hsla(calc(var(--accent-h)), calc(var(--accent-s)), calc(var(--accent-l) - 10%), 1);
    position: absolute;
    overflow: visible;
    top: 65%;
    left: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 30;
    opacity: 1;  /* Fully visible initially */
    transition: opacity 0.3s ease-in-out;  /* Transition for fading out */
}

/* Workspace area properties */
.workspace-tab-container:has(.workspace-leaf-content[data-type="file-properties"]) {
    margin-top: 1em;
    transition: max=height 0.9s ease-in-out;  /* Transition for other properties */
}

/* Adjusting opacity of the icon when the workspace area is hovered */
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space:has(.workspace-leaf-content[data-type="file-properties"]):hover .workspace-tab-container:has(.workspace-leaf-content[data-type="file-properties"])::before,
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space:has(.workspace-leaf-content[data-type="file-properties"]):focus-within .workspace-tab-container:has(.workspace-leaf-content[data-type="file-properties"])::before {
    opacity: 0;  /* Fade out the icon on hover */
}

/* Adjustments for the surrounding container to manage space */
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space:has(.workspace-leaf-content[data-type="file-properties"]) {
    min-height: 1em;
    max-height: 2.5em; 
    transition: max-height 0.9s ease-in-out; 
}

/* Expand the max-height on hover to accommodate expanded content */
body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-sidedock.mod-right-split > div.workspace-tabs.mod-top.mod-top-right-space:has(.workspace-leaf-content[data-type="file-properties"]):hover {
    max-height: 100vh; 
}