Obsidian Note Type Styling

types.css

/* Shared on the Obsidian Discord */

/* ############ INTERNAL LINK STYLING ## */
span.data-link-text,
a.internal-link {
  --accent-color: var(--color-accent);
  --text-color: color-mix(in srgb, var(--text-normal), var(--accent-color) 50%);
  --bg-color: color-mix(in srgb, var(--accent-color), transparent 80%);
  --inside-border-color: color-mix(in srgb, var(--text-color) 90%, white);
  --new-border-color: color-mix(in srgb, var(--text-color), transparent 60%);
  font-family: var(--font-monospace);
  font-size: calc(1em - 4px);
  border-radius: 5px;
  border: 1.5px solid var(--new-border-color);
  padding: 1px 2px;
  background: var(--bg-color);
  /* box-shadow: */
  /*   inset 2px 2px var(--inside-border-color), */
  /*   inset -2px -2px var(--inside-border-color); */
  color: var(--text-color) !important;
  a {
    text-decoration: none;
  }
}

/* ############ NOTE TYPES ############# */
/* Periodic Note Type */
.data-link-text[data-link-tags*="#type/periodic" i] {
  --accent-color: #dddd88;
}
.data-link-text[data-link-tags*="#type/periodic" i]::before,
.data-link-text[data-link-tags*="#type/event" i]::before {
  /* calendar-days */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>');
  mask: var(--icon-svg) no-repeat;
}

.data-link-text[data-link-tags*="#type/event" i]::before {
  /* [TODO]: Find suiting icon. */
}

/* Incomplete Project Note Type */
.data-link-text[data-link-tags*="#type/project" i] {
  --accent-color: #aaeeaa;
}
.data-link-text[data-link-tags*="#type/project" i]::before {
  /* book-dashed */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-dashed"><path d="M12 17h1.5"/><path d="M12 22h1.5"/><path d="M12 2h1.5"/><path d="M17.5 22H19a1 1 0 0 0 1-1"/><path d="M17.5 2H19a1 1 0 0 1 1 1v1.5"/><path d="M20 14v3h-2.5"/><path d="M20 8.5V10"/><path d="M4 10V8.5"/><path d="M4 19.5V14"/><path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H8"/><path d="M8 22H6.5a1 1 0 0 1 0-5H8"/></svg>');
  mask: var(--icon-svg) no-repeat;
}

/* Resource Note */
.data-link-text[data-link-tags*="#type/resource" i] {
  --accent-color: navy;
}
.data-link-text[data-link-tags*="#type/resource" i]::before {
  /* shapes */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shapes"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/></svg>');
  mask: var(--icon-svg) no-repeat;
}

/* Person Note */
.data-link-text[data-link-type="person" i] {
  --accent-color: #ce3400;
}
.data-link-text[data-link-type="person" i]::before,
.data-link-text[data-link-path~="@people" i]::before {
  /* user */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
  mask: var(--icon-svg) no-repeat;
}

/* Archived Note */
.data-link-text[data-link-path^="Archive" i]::before {
  /* user */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-archive-icon lucide-archive"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>');
  mask: var(--icon-svg) no-repeat;
}

/* Software Note */
.data-link-text[data-link-tags*="#tool/software" i] {
  --accent-color: #dd4fed;
}
.data-link-text[data-link-tags*="#tool/software" i]::before {
  /* book-dashed */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-smartphone-icon lucide-monitor-smartphone"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>');
  mask: var(--icon-svg) no-repeat;
}

/* Windows Note */
.data-link-text[data-link-tags*="#tool/software" i][data-link-data-href="Windows"]::before {
  /* Tabler – brand-windows */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-brand-windows"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 13v5c0 1.57 -1.248 2.832 -2.715 2.923l-.113 .003l-.042 .018a1 1 0 0 1 -.336 .056l-.118 -.008l-4.676 -.585v-7.407zm-10 0v7.157l-5.3 -.662c-1.514 -.151 -2.7 -1.383 -2.7 -2.895v-3.6zm0 -9.158v7.158h-8v-3.6c0 -1.454 1.096 -2.648 2.505 -2.87zm10 2.058v5.1h-8v-7.409l4.717 -.589c1.759 -.145 3.283 1.189 3.283 2.898" /></svg>');
  mask: var(--icon-svg) no-repeat;
}

.data-link-text[data-link-tags*="#tool/software" i][data-link-data-href="Steam"]::before {
  /* Tabler – brand-steam */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-brand-steam"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16.5 4a5.5 5.5 0 1 1 -.309 10.992l-.078 -.007l-3.646 2.524l-.011 .094c-.267 1.775 -1.707 3.18 -3.571 3.38l-.209 .017h-.176a4 4 0 0 1 -3.756 -2.623l-.016 -.048l-2.122 -.91a1 1 0 0 1 -.599 -.8l-.007 -.119v-3.5a1 1 0 0 1 1.447 -.894l2.964 1.481l.174 -.1a4 4 0 0 1 2.15 -.482l.166 .014l2.126 -2.977l-.01 -.098a5.5 5.5 0 0 1 1.092 -3.758l.169 -.212a5.5 5.5 0 0 1 4.222 -1.974m0 3.5a2 2 0 1 0 0 4a2 2 0 0 0 0 -4" /></svg>');
  mask: var(--icon-svg) no-repeat;
}
.data-link-text[data-link-tags*="#tool/software" i][data-link-data-href="MacOS"]::before,
.data-link-text[data-link-tags*="#tool/software" i][data-link-data-href="iOS"]::before {
  /* Tabler – brand-apple */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-brand-apple"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15.079 5.999l.239 .012c1.43 .097 3.434 1.013 4.508 2.586a1 1 0 0 1 -.344 1.44c-.05 .028 -.372 .158 -.497 .217a4.15 4.15 0 0 0 -.722 .431c-.614 .461 -.948 1.009 -.942 1.694c.01 .885 .339 1.454 .907 1.846c.208 .143 .436 .253 .666 .33c.126 .043 .426 .116 .444 .122a1 1 0 0 1 .662 .942c0 2.621 -3.04 6.381 -5.286 6.381c-.79 0 -1.272 -.091 -1.983 -.315l-.098 -.031c-.463 -.146 -.702 -.192 -1.133 -.192c-.52 0 -.863 .06 -1.518 .237l-.197 .053c-.575 .153 -.964 .226 -1.5 .248c-2.749 0 -5.285 -5.093 -5.285 -9.072c0 -3.87 1.786 -6.92 5.286 -6.92c.297 0 .598 .045 .909 .128c.403 .107 .774 .26 1.296 .508c.787 .374 .948 .44 1.009 .44h.016c.03 -.003 .128 -.047 1.056 -.457c1.061 -.467 1.864 -.685 2.746 -.616l-.24 -.012z" /><path d="M14 1a1 1 0 0 1 1 1a3 3 0 0 1 -3 3a1 1 0 0 1 -1 -1a3 3 0 0 1 3 -3z" /></svg>');
  mask: var(--icon-svg) no-repeat;
}

/* Blog Post */
.data-link-text[data-link-path^="blog/" i] {
  /* --accent-color: navy; */
}
.data-link-text[data-link-path^="blog/" i]::before {
  /* shapes */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-notebook"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18" /><path d="M13 8l2 0" /><path d="M13 12l2 0" /></svg>');
  mask: var(--icon-svg) no-repeat;
}
.data-link-text[data-link-path^="blog/" i][data-link-tags*="hide"]::before,
.data-link-text[data-link-path^="blog/" i][data-link-tags*="draft"]::before {
  /* shapes */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-notebook-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 4h9a2 2 0 0 1 2 2v9m-.179 3.828a2 2 0 0 1 -1.821 1.172h-11a1 1 0 0 1 -1 -1v-14m4 -1v1m0 4v13" /><path d="M13 8h2" /><path d="M3 3l18 18" /></svg>');
  mask: var(--icon-svg) no-repeat;
}

/* Device Notes */
.data-link-text[data-link-tags*="#type/device" i] {
  --accent-color: #8ccafe;
}
.data-link-text {
  &[data-link-tags*="#type/device" i]::before {
    /* tabler: devices */
    display: inline-block;
    content: "";
    margin-right: 2px;
    width: 18px;
    height: 18px;
    line-height: inherit;
    vertical-align: text-bottom;
    background-color: currentColor !important;
    --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-devices"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 9a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1v-10z" /><path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9" /><path d="M16 9h2" /></svg>');
    mask: var(--icon-svg) no-repeat;
  }
  &[data-link-tags*="#type/device/smarthome" i]::before {
    --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-smart-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105" /><path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" /></svg>');
  }
  &[data-link-tags*="#type/device/gadget" i]::before {
    --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-calculator"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 3m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M8 7m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" /><path d="M8 14l0 .01" /><path d="M12 14l0 .01" /><path d="M16 14l0 .01" /><path d="M8 17l0 .01" /><path d="M12 17l0 .01" /><path d="M16 17l0 .01" /></svg>');
  }
  &[data-link-tags*="#type/device/radio" i]::before {
    --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-building-broadcast-tower"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M16.616 13.924a5 5 0 1 0 -9.23 0" /><path d="M20.307 15.469a9 9 0 1 0 -16.615 0" /><path d="M9 21l3 -9l3 9" /><path d="M10 19h4" /></svg>');
  }
  &[data-link-tags*="#type/device/computer" i]::before {
    --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-devices-pc"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5h6v14h-6z" /><path d="M12 9h10v7h-10z" /><path d="M14 19h6" /><path d="M17 16v3" /><path d="M6 13v.01" /><path d="M6 16v.01" /></svg>');
  }
}

/* Game Note */
.data-link-text[data-link-tags*="type/game" i],
.data-link-text[data-link-tags*="gaming/" i] {
  --accent-color: #ff6464;
}
.data-link-text[data-link-tags*="type/game" i]::before,
.data-link-text[data-link-tags*="gaming/" i]::before {
  /* tabler: device-gamepad-2 */
  display: inline-block;
  content: "";
  margin-right: 2px;
  width: 18px;
  height: 18px;
  line-height: inherit;
  vertical-align: text-bottom;
  background-color: currentColor !important;
  --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-device-gamepad-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5h3.5a5 5 0 0 1 0 10h-5.5l-4.015 4.227a2.3 2.3 0 0 1 -3.923 -2.035l1.634 -8.173a5 5 0 0 1 4.904 -4.019h3.4z" /><path d="M14 15l4.07 4.284a2.3 2.3 0 0 0 3.925 -2.023l-1.6 -8.232" /><path d="M8 9v2" /><path d="M7 10h2" /><path d="M14 10h2" /></svg>');
  mask: var(--icon-svg) no-repeat;
}