Obsidian CD-Case Base Effect

cd-case.css

/* CD case effect for card views in Obsidian Bases */
/* Inspired by and forked from Kepano's Hardcover book effect */

.bases-view {
  --bases-cards-background: transparent;
  --bases-cards-cover-background: transparent;
  --bases-cards-shadow: none;
  --bases-cards-shadow-hover: none;
}
.bases-cards-group {
  gap: 60px;
  padding: 50px;
}
.bases-cards-label {
  display: none;
}
.bases-cards-item {
  overflow: visible;
  gap: 0px;
  contain: inherit;
}
.bases-cards-property.mod-title {
  padding-top: 20px;
}

/* CD shadow */
.bases-cards-cover {
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  border-radius: 2px 2px 2px 2px;
  box-shadow: inset 0px 0px 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.7), -4px 2px 4px 0 rgba(0, 0, 0, 0.2),
    -8px 8px 20px 0 rgba(0, 0, 0, 0.4);
  overflow: visible;
}

.bases-cards-cover:before {
  content: "";
  /* Ridges, hinge, overall gloss */
  background-image: repeating-linear-gradient(
      to right,
      rgba(0, 0, 0, 1),
      rgba(20, 20, 20, 1) 4%,
      rgba(0, 0, 0, 1)  8%
    ),
    linear-gradient(
      to right,
      rgb(15, 15, 15) 1px,
      rgb(31, 31, 31) 2px,
      rgb(41, 41, 41) 3px,
      transparent 11%
    ),
    linear-gradient(
      to right,
      rgb(15, 15, 15),
      rgb(13, 13, 13) 2%,
      rgb(0, 0, 0) 10.4%,
      rgba(255, 255, 255, 0.5) 11%,
      rgba(255, 255, 255, 0.2) 12%,
      rgba(236, 254, 253, 0.03) 100%
    );

  position: absolute;
  overflow: visible;
  border-radius: 2px;

  /* Adjust booklet in case */
  /* Pixel sizes are tailored for 220px album size */
  height: calc(100% + 6px);
  height: 103.6%;

  width: calc(100% + 27px);
  width: 116%;
  
  inset-inline-start: -24px;
  inset-block-start: -3px;
  inset-inline-start: -14%;
  inset-block-start: -1.6%;

  /* Ridges, Hinge, Overall*/
  background-size: 10% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;

  box-shadow: inset 1px 2px 2px 1px rgba(230, 255, 255, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2), -4px 2px 20px 0px rgba(0, 0, 0, 0.1),
    -8px 8px 20px 0 rgba(0, 0, 0, 0.2);
}

.bases-cards-item:hover .bases-cards-cover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: inset 0px 0px 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.7), -4px 4px 8px 0 rgba(0, 0, 0, 0.3),
    -12px 16px 30px 0 rgba(0, 0, 0, 0.3);
}

/* Show title on two lines */
.bases-cards-property.mod-title .bases-cards-line {
  font-size: var(--font-ui-small);
  line-height: 1.2;
  height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
}