Riced capacities callouts snippet

!Description.md

Usage

1. Download and use the capacities-riced.css as a snippet
2. Copy the raw value of the capacities-index.md file and paste it in your obsidian note

3. Edit the callout to your liking

Callouts

capacities-card: Base container for the card

capacities-body: Container for subject matter

capacities-index: Container for side index

capacities-prop: Property values that go inside the index

capacities-prop-image: Special property value for images

Design advice

• Use --- hr dividers after every property
• use ![capacities-index-prop|link] if you want your links to have a neat icon in front of them
• add |revert in every callout if you want them to work properly in AnuPpuccin.

capacities-index.md

---
tags: general-trivia
cssclasses: heading-normal-toggle
aliases:
---

> [!capacities-card|revert]
> > [!capacities-index|revert]
> > > [!capacities-prop-image|revert]
> > > ![[GreatWaveOffHokusai.png]]
> > > The great wave off Kanagawa
> > 
> > ---
> > 
> > > [!capacities-prop|link revert] People
> > > [Katsushika Hokusai](https://www.wikiart.org/en/katsushika-hokusai/)
> > 
> > > [!capacities-prop|link revert] Links
> > > [Wikipedia](https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa)
> 
> > [!capacities-body|revert]
> > # Hokusai Paintings
> > [Katsushika Hokusai](https://www.wikiart.org/en/katsushika-hokusai/) is widely regarded as one of the greatest Japanese ukiyo painters of all time.
> > 
> > ### The Great Wave off Kanagawa
> > The great wave is probably Hokusai's greatest and most famous work. The image is of two boats, full of Japanese sailors, coming up against the namesake of the print, the Great Wave. The wave looks as if it will swallow the boats whole, and that the boat men are sure to be devoured in the wave. Although it is such a strong image, it is simplistically beautiful, with curling blue waves and white frothy tips, which menacingly curl down into points, like claws ready to scoop the sailors out of the sea.
> > 
> > _The Great Wave off Kanagawa_ has been described as "possibly the most reproduced image in the history of all art", as well as being a contender for the "most famous artwork in Japanese history".

capacities-riced.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
    - 
        id: capacities-index-width
        title: Index width
        description: Size is in px
        type: variable-number
        default: 200
        format: px
    - 
        id: capacities-body-size
        title: Card body font size
        description: Size is in px
        type: variable-number
        default: 12
        format: px
    - 
        id: capacities-sidebar-size
        title: Sidebar font size
        description: Size is in px
        type: variable-number
        default: 9
        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]:first-child {
  margin-top: 5px;
}

.callout[data-callout=capacities-prop] {
  --callout-title-padding: 4px;
  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;
  border-radius: var(--radius-s);
  mix-blend-mode: normal;
}
.callout[data-callout=capacities-prop] > .callout-content p {
  margin-block: 0;
}
.callout[data-callout=capacities-prop] > .callout-content ul.contains-task-list {
  --list-indent: 1.6em;
  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;
  text-align: center;
  font-style: italic;
  font-size: calc(var(--font-text-size) - 2px);
}
.callout[data-callout=capacities-prop-image] + hr {
  margin-top: 0 !important;
}
.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;
}

.callout[data-callout=capacities-card],
.callout[data-callout=capacities-index] {
  mix-blend-mode: normal;
  --mix-highlight-blend-mode: normal;
}
.callout[data-callout=capacities-card] > .callout-title,
.callout[data-callout=capacities-index] > .callout-title {
  display: none;
}
.callout[data-callout=capacities-card] > .callout-content,
.callout[data-callout=capacities-index] > .callout-content {
  overflow-x: hidden;
}

.callout[data-callout=capacities-card] {
  border: 1px solid var(--background-modifier-border);
  background-color: var(--background-secondary);
  padding: 0;
}
.callout[data-callout=capacities-card] > .callout-content {
  background-color: var(--background-secondary);
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
}

.callout[data-callout=capacities-body] {
  background-color: var(--background-primary);
  padding: var(--callout-padding);
  border-radius: 0;
  border-right: 1px solid var(--background-modifier-border);
  --mix-highlight-blend-mode: normal;
  mix-blend-mode: normal;
  margin-block: 0;
  width: calc(100% + var(--capacities-index-width, 200px) * -1 + 2px);
}
.callout[data-callout=capacities-body] > .callout-title {
  background-color: var(--background-primary);
  display: none;
}

.callout[data-callout=capacities-index] {
  border: 1px solid var(--background-modifier-border);
  padding: 0 0 5px 0;
  margin: -1px -1px -1px -1px;
  width: var(--capacities-index-width, 200px);
  border-width: 0 0 0 1px;
  border-radius: 0;
  background-color: var(--background-secondary);
  margin-block: 0;
  float: right;
}
.callout[data-callout=capacities-index] .internal-embed {
  margin: 0 auto;
  float: none;
}
.callout[data-callout=capacities-index] img {
  margin: 5px auto;
  max-width: 100%;
  mix-blend-mode: normal;
}
.callout[data-callout=capacities-index] hr {
  margin-top: 0;
  margin-bottom: 5px;
  --hr-thickness: 1px;
}
.callout[data-callout=capacities-index] p {
  width: inherit;
  padding: 0 10px;
  font-size: calc(var(--font-text-size) - 2px);
}
.callout[data-callout=capacities-index] > .callout-content {
  width: inherit;
}

.callout[data-callout=capacities-card], .callout[data-callout=capacities-card] a,
.callout[data-callout=capacities-prop],
.callout[data-callout=capacities-prop] a,
.callout[data-callout=capacities-prop-image],
.callout[data-callout=capacities-prop-image] a,
.callout[data-callout=capacities-sidebar],
.callout[data-callout=capacities-sidebar] a {
  --font-text-size: var(--capacities-sidebar-size, 17px);
  font-size: var(--capacities-sidebar-size, 17px);
}
.callout[data-callout=capacities-card] {
  box-shadow: 0 5px 18px -2px rgba(0, 0, 0, 0.1);
}
.callout[data-callout=capacities-body] {
  --font-text-size: var(--capacities-body-size, 17px);
}

/*# sourceMappingURL=capacities-sidebars.css.map */