Skip to content

Latest commit

 

History

History
62 lines (49 loc) · 1.5 KB

Callout styling - Label callout.md

File metadata and controls

62 lines (49 loc) · 1.5 KB
Raw

↪Collection

Callout styling - Label callout

cover:: 

/* original by Lunairee#2396 on Obsidian Discord */
.callout[data-callout-metadata*="label"] {
  --block-spacing: 1rem;
  --speaker-block-width: 20%;
  margin: 0px;
  padding: 0px;
  display: grid;
  grid-template-columns: var(--speaker-block-width) calc(100% - var(--speaker-block-width));
  background-color: var(--background-primary);
  border: none;
}

.callout[data-callout-metadata*="label"] .callout-title {
  display: inline-block;
  height: calc(100% - var(--block-spacing));
  text-align: right;
  border-right: 3px solid;
  padding-right: var(--block-spacing);
  flex: 1 0 auto;
}

.callout[data-callout-metadata*="label"] > * {
  margin-top: var(--block-spacing);
}

.callout[data-callout-metadata*="label"] > .callout-title > .callout-icon {
  display: none;
}

.callout[data-callout-metadata*="label"] > .callout-content {
  padding: 0px var(--block-spacing);
}
.callout[data-callout-metadata*="label"] > .callout-content > p:first-child {
  margin-top: 0px;
}
.callout[data-callout-metadata*="label"] > .callout-content > p:last-child {
  margin-bottom: 0px;
}

How to use

> [!bug|label] Lorem, ipsum dolor sit amet
> Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Lorem, ipsum dolor sit amet consectetur, adipisicing elit.