Capacities-like sidebars

!Description.md

Preview

Caveats

Since the snippet utilises callouts, the sidebar disappears after a note is scrolled enough for the callout to be outside rendering range, i.e. it's best used for smaller notes. Smaller sidebar sizes are better in this case because there's more scroll area.

Usage

Use the capacities-sidebars.css as a snippet and paste the markdown into a new note.

Components

CSS classes

.capacities-right: Aligns sidebar right

.capacities-left: Aligns sidebar left

Callouts

[!capacities-sidebar]: Sidebar container callout

• [!capacities-sidebar|max-height]: Maximum height sidebar

[!capacities-prop-image]: Image container which allows captions as well

• [!capacities-prop-image|rounded]: Rounded images
• [!capacities-prop-image|circle]: Circle images (Auto-crops)

[!capacities-prop]: Properties (Callout title is used as heading)

• [!capacities-prop|link]: Adds icons in front of links

Elements

---: Separators

capacities-sidebars.css

/* @settings
name: Capacities Sidebars
description: by @AnubisNekhet
id: capacities-sidebars
settings:
    - 
        id: capacities-sidebar-bottom
        title: Sidebar bottom spacing
        type: variable-number
        description: Size is in px
        default: 80
        format: px
    - 
        id: capacities-sidebar-width
        title: Sidebar width
        description: Size is in px
        type: variable-number
        default: 320
        format: px
*/
.capacities-right .callout[data-callout=capacities-sidebar],
.capacities-left .callout[data-callout=capacities-sidebar] {
  --callout-blend-mode: normal;
  top: 65px;
  max-height: calc(100% - var(--capacities-sidebar-bottom, 80px));
  z-index: 2;
  overflow-y: scroll;
  border: 1px solid var(--background-modifier-border);
  background-color: var(--background-secondary);
  padding: 0;
  --mix-highlight-blend-mode: normal;
  width: var(--capacities-sidebar-width, 320px);
  margin-left: unset;
  margin-right: unset;
  margin-block: 0;
  position: fixed;
}
.capacities-right .callout[data-callout=capacities-sidebar][data-callout-metadata*=max-height],
.capacities-left .callout[data-callout=capacities-sidebar][data-callout-metadata*=max-height] {
  height: calc(100% - var(--capacities-sidebar-bottom, 80px));
}
.capacities-right .callout[data-callout=capacities-sidebar] > .callout-title,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-title {
  display: none;
}
.capacities-right .callout[data-callout=capacities-sidebar] > .callout-content,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content {
  background-color: var(--background-secondary);
  overflow-x: hidden;
}
.capacities-right .callout[data-callout=capacities-sidebar] > .callout-content h1, .capacities-right .callout[data-callout=capacities-sidebar] > .callout-content h2, .capacities-right .callout[data-callout=capacities-sidebar] > .callout-content h3, .capacities-right .callout[data-callout=capacities-sidebar] > .callout-content h4, .capacities-right .callout[data-callout=capacities-sidebar] > .callout-content h5, .capacities-right .callout[data-callout=capacities-sidebar] > .callout-content h6,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content h1,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content h2,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content h3,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content h4,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content h5,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content h6 {
  margin: 0 10px;
  --h1-color: var(--text-muted);
  --h2-color: var(--text-muted);
  --h3-color: var(--text-muted);
  --h4-color: var(--text-muted);
  --h5-color: var(--text-muted);
  --h6-color: var(--text-muted);
}
.capacities-right .callout[data-callout=capacities-sidebar] > .callout-content p,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content p {
  padding-left: 10px;
  padding-right: 10px;
}
.capacities-right .callout[data-callout=capacities-sidebar] > .callout-content hr,
.capacities-left .callout[data-callout=capacities-sidebar] > .callout-content hr {
  border-width: 1px;
  margin: 5px 0;
}

.capacities-right.markdown-preview-view {
  padding-right: calc(var(--file-margins) + 20px + var(--capacities-sidebar-width, 320px)) !important;
}
.capacities-right .callout[data-callout=capacities-sidebar] {
  right: 15px;
}

.capacities-left.markdown-preview-view {
  padding-left: calc(var(--file-margins) + 20px + var(--capacities-sidebar-width, 320px)) !important;
}
.capacities-left .callout[data-callout=capacities-sidebar] {
  left: 15px;
}

.callout[data-callout=capacities-prop] {
  mix-blend-mode: normal;
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0px;
  margin-block: 0;
  --mix-highlight-blend-mode: normal;
}
.callout[data-callout=capacities-prop] > .callout-title {
  padding: 0 0 3px 10px;
}
.callout[data-callout=capacities-prop] > .callout-title > .callout-icon {
  display: none;
}
.callout[data-callout=capacities-prop] > .callout-title > .callout-title-inner {
  color: var(--text-muted);
}
.callout[data-callout=capacities-prop] > .callout-content {
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  margin-block: 3px;
  margin: 0 10px 10px 10px;
  padding: 3px 0;
  overflow-x: hidden;
}
.callout[data-callout=capacities-prop] > .callout-content p {
  margin-block: 0;
}
.callout[data-callout=capacities-prop][data-callout-metadata=link] a {
  color: var(--font-normal);
}
.callout[data-callout=capacities-prop][data-callout-metadata=link] a::before {
  width: 0;
  padding-right: var(--font-text-size);
  margin-right: 3px;
  height: 0;
  content: " ";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-card-text' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/%3E%3Cpath d='M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
}
.theme-dark .callout[data-callout=capacities-prop][data-callout-metadata=link] a::before {
  filter: invert(100%);
}

.callout[data-callout=capacities-prop-image] {
  border: none;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin-block: 0;
}
.callout[data-callout=capacities-prop-image] > .callout-title {
  display: none;
}
.callout[data-callout=capacities-prop-image] > .callout-content {
  padding: 0;
}
.callout[data-callout=capacities-prop-image] > .callout-content p {
  margin-block: 5px;
}
.callout[data-callout=capacities-prop-image] + hr {
  margin-top: 0 !important;
}
.callout[data-callout=capacities-prop-image][data-callout-metadata*=note] img, .callout[data-callout=capacities-prop-image][data-callout-metadata*=book] img, .callout[data-callout=capacities-prop-image][data-callout-metadata*=contact] img {
  margin-block-end: 0px;
}
.callout[data-callout=capacities-prop-image][data-callout-metadata*=note] > .callout-content::after, .callout[data-callout=capacities-prop-image][data-callout-metadata*=book] > .callout-content::after, .callout[data-callout=capacities-prop-image][data-callout-metadata*=contact] > .callout-content::after {
  content: " ";
  padding-bottom: 40px;
  padding-right: 40px;
  position: absolute;
  background-color: var(--background-secondary);
  bottom: 20px;
  left: 20px;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
}
.callout[data-callout=capacities-prop-image][data-callout-metadata*=note] > .callout-content::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z'/%3E%3C/svg%3E");
}
.callout[data-callout=capacities-prop-image][data-callout-metadata*=contact] > .callout-content::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M96 0C60.7 0 32 28.7 32 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zM208 288h64c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm96-96c0 35.3-28.7 64-64 64s-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zM496 192c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V336z'/%3E%3C/svg%3E");
}
.callout[data-callout=capacities-prop-image][data-callout-metadata*=rounded] img {
  border-radius: 6px;
}
.callout[data-callout=capacities-prop-image][data-callout-metadata*=circle] img {
  border-radius: 50%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  width: auto;
}

markdown

---
cssClasses: capacities-right
---
> [!capacities-sidebar]
> > [!capacities-prop-image|circle]
> > ![bigrat](https://bigrat.monster/media/bigrat.png)
> > Big Rat
> 
> ---
> > [!capacities-prop-image]
> > ![bigrat](https://bigrat.monster/media/bigrat.png)
> > BIg Rat
> 
> ---
> > [!capacities-prop-image|rounded]
> > ![bigrat](https://bigrat.monster/media/bigrat.png)
> > BIg Rat
> 
> ---
> > [!capacities-prop|link] Links
> > [https://bigrat.monster](https://bigrat.monster)
> 
> ---
> 
> > [!capacities-prop] Status
> > Big Rat
> > 
> ---
> > [!capacities-prop] Rating
> > ★★★★★
> >
> ---
>
> > [!capacities-prop] Subtitle
> > Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.