.status-bar {
  border-left: 1px solid var(--text-normal);
  border-top: 1px solid var(--text-normal);
}

/* READ ME */
/*
This css has been built to be used with dataview tables, and assumes you are not using dataviewjs. But this can easily be adapted to list view. Because this css is not supported by a js backend, text and backgrounds will not autosize (i think so anyway, i haven't found a way. if you do share on discord @yungbananapeel#2624)

I'm not that great as using css, so there is probably a lot of redundancies in the file. The Main thing to understand about using the css to manipulate the tables is  the structure of a DV table. 

Any content about a page you want returned is delivered as a child element of a span, that is nested inside of a TD.The TD's are the individual containers that make up the columns of a row. if you want to change the structure of a table on top of this file, its important to remember all the relationships between the TR>TD>SPAN>CONTENT. 

An an example images and links are returned as <a> & <img> tags as children of a div, but strings are returned as the content of the span, not as content of a child element.like so:
<span>
	<a href="mylink"> cool link </a>
	<img src="prettyPic"> picture </img>
</span>
<span>YOUR TEXT HERE</span>

TABLE STRUCTURE
<div>
	<table>
		<thead>
		</thead>
		<tbody>
			<tr>
			EACH TR CORRESPONDS TO A SINGLE PAGE RETURNED FROM YOUR QUERY.
				<td>
					EACH TD CORRESPONDS TO A COLUMN
					THEY ARE ORDERED TOP TO BOTTOM, IN ORDER FROM LEFT TO RIGHT
					<span>
					THIS SPAN IS WHERE YOUR RETURNS INFO IS (links, images, text)
					</span>
				</td>
			</tr>
		</tbody>
	</table>
</div>
*/
/* COLORS */
.CardView {
	--Name-bg: red;
	--
}
/* Hide Table Head */
.CardView thead{
	display: none;
	line-height: 0;
	height: 0px;
}
CardView table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}


/* Table wide Changes */
/* .CardView tbody {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
} */
/* Turn all spans into flex boxes*/
.CardView span {
	display: flex;
	float: left;
	margin: 0;
	padding: 0;
	max-width: 350px;
}
/* Create a card Shape from the Table Row */
.CardView tr {
	display: block;
	text-align: justify;
	float: left;
	padding: 0;
	margin-right: 60px;
	height: 475px;
	width: 310px;
	background-color: rgb(36, 32, 32) !important;
	border: 5px solid rgb(0, 0, 0) !important;
	box-shadow: 10px 11px 19px -1px #070202;
}

.CardView td {
	display: block;
	min-height: 50px;
	padding: 15px;
}
/* First Column Box*/
.CardView td:first-child {
	min-height: 75px !important ;
	padding: auto;
	background-color: rgba(255, 255, 255, 0.863);
	border: 5px solid rgb(255, 255, 255);
}
/* First Column link */
.CardView td:first-child span a {
	text-overflow: ellipsis !important;
	word-wrap: break-word !important;
	text-overflow: ellipsis !important;
	display: block;
	line-height: 1em;
	max-height: 2em;
	font-size: 23px;
	font-weight: bold !important;
	color: rgb(207, 17, 17) !important;	
}

/* Second Column */
/* column bg */
.CardView td:nth-child(2) {
	z-index: 2;
	background-color: rgb(226, 75, 75);
	width: 175px;
	display: block;
	float: left;
	line-height: 1em;
	max-height: 2em;
}
/* column link */
.CardView td:nth-child(2) a {
	color: rgb(206, 211, 189) !important;
	font-weight: bold !important;
	width: 60px;
	word-wrap: break-word;
	text-overflow: ellipsis !important;
}

/* third column */
.CardView td:nth-child(3) {
	max-height: 50px !important;
	color: rgb(255, 81, 81) !important;
	z-index: -1;
	width: 125px;
	line-height: 1em;
	max-height: 2em;
	display: block;
	float: right;
	background-color: rgb(250, 246, 0);
}
/* third column links */
.CardView td:nth-child(3) span a {
	color: rgb(255, 81, 81) !important;
	text-align: right;
	width: 100%;
	overflow: hidden;
	display: block;
	float: right;
	font-weight: bold !important;
	word-wrap: break-word;
	text-overflow: ellipsis !important;
}
/* third column strings */
.CardView td:nth-child(3) span{
	color: rgb(255, 81, 81) !important;
	text-align: right;
	width: 100%;
	overflow: hidden;
	display: block;
	float: right;
	font-weight: bold !important;
	word-wrap: break-word;
	text-overflow: ellipsis !important;
}

/* Last Column Image */
.CardView td span img {
	display: block;
	width: 300px;
	height: 300px;
	object-fit: contain;
	margin: 0 auto;
	padding: 0;
	margin: 20px auto;
}

• 'logo-crystal'
• 'create-new'
• 'trash'
• 'search'
• 'right-triangle'
• 'document'
• 'folder'
• 'pencil'
• 'left-arrow'
• 'right-arrow'
• 'three-horizontal-bars'
• 'dot-network'
• 'audio-file'
• 'image-file'
• 'pdf-file'
• 'gear'
• 'documents'
• 'blocks'
• 'go-to-file'
• 'presentation'
• 'cross-in-box'
• 'microphone'
• 'microphone-filled'
• 'two-columns'
• 'link'
• 'popup-open'
• 'checkmark'
• 'hashtag'
• 'left-arrow-with-tail'
• 'right-arrow-with-tail'
• 'lines-of-text'
• 'vertical-three-dots'
• 'pin'
• 'magnifying-glass'
• 'info'
• 'horizontal-split'
• 'vertical-split'
• 'calendar-with-checkmark'
• 'sheets-in-box'
• 'up-and-down-arrows'
• 'broken-link'
• 'cross'
• 'any-key'
• 'reset'
• 'star'
• 'crossed-star'
• 'dice'
• 'filled-pin'
• 'enter'
• 'help'
• 'vault'
• 'open-vault'
• 'paper-plane'
• 'bullet-list'
• 'uppercase-lowercase-a'
• 'star-list'
• 'expand-vertically'
• 'languages'
• 'switch'
• 'pane-layout'
• 'install'

Original Forum Post

I needed a list of currently enabled Obsidian Commands (those in the Command Palette, internal plus plugins). So I thought »Why not do it using Obsidian itself (and Dataview)?«

Commands sorted by internal Command ID

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

function getHotkey(arr) {
    return arr.hotkeys ? [[getNestedObject(arr.hotkeys, [0, 'modifiers'])],
    [getNestedObject(arr.hotkeys, [0, 'key'])]].flat(2).join('+').replace('Mod', 'Ctrl') : '–';
}

let cmds = dv.array(Object.entries(app.commands.commands))
    .sort(v => v[1].id, 'asc');

dv.paragraph(cmds.length + " commands currently enabled.<br><br>");

dv.table(["Command ID", "Name in current locale", "Hotkeys"],
    cmds.map(v => [
    v[1].id,
    v[1].name,
    getHotkey(v[1]),
    ])
    );

Result:

Commands sorted by assigned hotkey

This I missed the most. Just to check if a planned hotkey combo is already taken …

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

function getHotkey(arr) {
    return arr.hotkeys ? [[getNestedObject(arr.hotkeys, [0, 'modifiers'])],
    [getNestedObject(arr.hotkeys, [0, 'key'])]].flat(2).join('+').replace('Mod', 'Ctrl') : '–';
}

let cmds = dv.array(Object.entries(app.commands.commands))
    .where(v => getHotkey(v[1]) != '–')
    .sort(v => v[1].id, 'asc')
    .sort(v => getHotkey(v[1]), 'asc');

dv.paragraph(cmds.length + " commands with assigned hotkeys.<br><br>");

dv.table(["Command ID", "Name in current locale", "Hotkeys"],
    cmds.map(v => [
    v[1].id,
    v[1].name,
    getHotkey(v[1]),
    ])
    );

Result:

Notes

I’m on Linux and this is good enough for me. I leave remapping MacOS keys and/or adding nice <kbd>…</kbd> tags around the keys (but not the plus signs in between!) as an exercise for the reader.

Anyway, it’s a good check what we have, and could well be a starting point for the Buttons and Obsidian Leaflet 1 plugins to maybe invoke commands language-independently, using their ID. Because now we know it an can make a list!

(Bi- and multilingual people switch Obsidian’s language often, and it sucks that commands called up by their (locale-specific!) name suddenly stop working.)

Original Forum Post

I love location data, maps, and visualizing stuff. When I plan to travel or visit a friend or family member, I love to see “what’s near” in each person or location note. Automatically linking places and people together, so to say.

• If I visit a friend, I can check if there are other friends or places of interest nearby, and we could maybe visit them together.
• I can check if other friends are near enough to do something together, maybe meet for a barbeque.
• When sightseeing, I won’t miss nearby friends, business contacts, favourite restaurants or other sights anymore.

Goals

• Never miss anything nearby anymore.
• Have this dataview available as a template so it can be in every person, business contact, and place-of-interest note and automatically show me what’s near this place.
• No more people and location notes without location data (easily be copied from Google Maps or the like).

Requirements

• All people/location notes must have a

location: [lat, lon]

entry in the YAML frontmatter. (This syntax has something to do with YAML & JS data structure and easy parsing. The sequence [lat, lon] has been chosen for practical reasons: People are used to it and it can easily be copied from Google Maps and others.)

• Dataview 0.3.0+ installed.
• moment.js available (it currently is).
• Distance units of m, km, yd and mi must be usable and easy to switch.
• Distances must be calculated as correct straight-line distances, taking into account that Earth is not a perfect sphere but a rotational ellipsoid.
• Distances must also be available as (approximate; for speed and offline use) driving distances.
• Distances shall be shown with the unit appended but internally numeric, for easy calculation/comparison.
• Numbers shall be formatted according to the language currently set in Obsidian (4,096.1 vs 4.096,1). The OS’s system setting shall only be used if all else fails.
• Date & time strings must be easily formatable however I wish, defaulting to ISO-8601 (2021-05-08T10:34:05+02:00).
• Very long note title links shall optionally be shortened in Dataview table views, using my dataview-shorten-links.css snippet.
• Tags (from frontmatter only, a current Dataview restriction) shall be shown in one (comma- or blank-)separated string, not as a list.
• The list shall be sorted by distance from “here” (i.e., this note).
• The distance values shall be clickable and lead to the Google Maps Route Planner, destination already filled in, and start point taken from the current location.
• Above the table, a text line shall show the currently set “nearby” radius as well as the selected unit of measurement (within 100 km driving distance, within 50 mi straight-line distance), so we later know what’s actually shown in the table.

The Code

// Nearby Family Members, Friends and Places
// 2021-05-15 - Matthias C. Hormann (Moonbase59)

// set parameters (to be supplied via YAML frontmatter, eventually)
// DV 0.3.3 interprets "500000 m" as a Luxon duration,
// so we have to put nearby: '"500000 m"' and remove the ".
let nearby = dv.current().nearby.replace(/['"]+/g, '');
let unit = nearby.split(' ')[1];
let radius = nearby.split(' ')[0];
let origin = dv.current().location;

// search term as used in dv.pages()
// use "#tags" or '"folder/subfolder"' for a folder
let searchterm = dv.current().searchterm;

//======================================================================

function getDistance(origin, destination, unit='m') {
    // return distance in selected unit (m,km,yd,mi)
    var factor = 1.0;
    switch (unit) {
      case 'm':
        factor = 1.0;
        break;
      case 'km':
        factor = 1000.0;
        break;
      case 'yd':
        factor = 0.9144;
        break;
      case 'mi':
        factor = 1609.344;
        break;
      default:
        factor = 1.0;
        console.warn("getDistance: Invalid unit '%s', using 'm'. Valid units are: m,km,yd,mi.",unit);
    }

    var lon1 = toRadian(origin[1]),
        lat1 = toRadian(origin[0]),
        lon2 = toRadian(destination[1]),
        lat2 = toRadian(destination[0]);

    var deltaLat = lat2 - lat1;
    var deltaLon = lon2 - lon1;

    var a = Math.pow(Math.sin(deltaLat/2), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(deltaLon/2), 2);
    var c = 2 * Math.asin(Math.sqrt(a));
    var EARTH_RADIUS = 6371000; // 6,371 km in metres
    return c * EARTH_RADIUS / factor;
}

function toRadian(degree) {
    return degree*Math.PI/180;
}

function getDrivingDistance(origin, destination, unit='m') {
    // PREDICTED, using a factor.
    // Much faster, and no need for Internet access.
    // The U.S. predict 1.417, based on statistical analysis.
    // For Germany, I’ve found 1.3 a good value (comparing w/ Google Maps "best route")
    var factor = 1.3;
    return getDistance(origin, destination, unit) * factor;
}

//======================================================================

// Show what we will display.
dv.paragraph("List shows nearby places (within " + radius + " " + unit + " driving distance).");
dv.paragraph("<br><br>");

// get the pages
let pages = dv.pages(searchterm)
  .where(p => p.location &&
    // must be >0 so we don’t catch ourselves!
    getDrivingDistance(origin, p.location, unit) > 0.0 &&
    getDrivingDistance(origin, p.location, unit) <= radius)
  .sort(p => getDistance(origin, p.location, unit));

// create table
dv.table(["Name", "Tags", "Distance*"],
  pages.map(p => [
    // The name
    p.file.link,
    // tags (show '–' if none defined)
    (p.file.etags ? p.file.etags.join(' ') : '–'),
    // straight-line distance
    /*
    getDistance(origin, p.location, unit)
      .toLocaleString(moment.locale(), {maximumFractionDigits: 1}) + " " + unit,
    */
    // predicted driving distance and Google Maps Route Planner Link
    (getDrivingDistance(origin, p.location, unit)
      .toLocaleString(moment.locale(), {maximumFractionDigits: 1}) + " " + unit)
      .link('https://www.google.com/maps/dir/?api=1&dir_action=navigate&destination=' + p.location[0] + ',' + p.location[1]),
  ])
);

// show a small legend
dv.paragraph("<small>* Approximate driving distance; when clicked, opens a new Google Maps Route Planner window.</small>");

Original Forum Post

blockquote {
    border: none !important;
    padding: 0 20px;
}

blockquote .task-list-item {
    font-family: var(--font-stack-ui) !important;
    font-size: var(--font-size-secondary) !important;
    line-height: 1.35em;
    font-style: normal;
    position: absolute;
    text-align: justify;
    z-index: 1;
    color: var(--text-faint) !important;
    right: min(calc(50% + 0.5 * var(--line-width) + 2.5em), calc(100% - 3.5em));
    width: calc(50% - 0.5 * var(--line-width) - 3em);
    max-width: calc(0.66 * var(--line-width));
    min-width: 3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    text-indent: 0 !important;
}
blockquote .task-list-item > .task-list-item-checkbox {
    appearance: none;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: none !important;
    background-color: transparent !important;
    margin: 0 !important;
    border: none;
    cursor: pointer;
}
blockquote .task-list-item.is-checked {
    z-index: 999;
    color: var(--text-normal) !important;
    right: min(calc(50% + 0.5 * var(--line-width) + 2.5em), calc(100% - 12.5em));
    min-width: 12em;
    overflow: visible;
    max-height: none;
    white-space: normal;
    text-decoration: none !important;
}

Original Forum Post

h1 {
	display: flex;
	width: 100%;
	align-items: center;
}
h1:before,
h1:after{
	content: '';
	background: gray;
	height: .1em;
	margin: .2em;
	flex: 1;
}

Original Forum Post

Page Break on ---

@media print {
  hr {
	  break-after:page;
	  visibility: hidden;
  }
}

Prevent Headings from being on bottom of Page

@media print {
  h1:after, h3:after, h2:after, h4:after, h5:after, h6:after{
     content: "";
    display: block;
    height: 100px;
    margin-bottom: -100px;
	}	
}

vault.read(file) // where file is a `TFile`

if (file instanceof TFile) {
  this.app.metadataCache.getFileCache(file).frontmatter; // Is [key: string]: any | undefined
}

app.workspace.getActiveFile().path // Can be a `string | null`

Before:

After:

/* Stop footnotes affecting line height */
sup { 
	vertical-align: top; 
	position: relative; 
	top: -0.3em; 
	font-size: 0.75em; 
}

Original Forum Post

p > a.tag {
    font-size: 0;
    width: 0;
    padding: 0;
    margin: 0;
    background: none;
    text-decoration: none;
    border: none;
}
p > a.tag::before {
    content: '#';
    font-size: 16px;
}
p > a.tag::after {
    content: attr(href);
    float: right;
    min-width: 3ch;
    max-width: 25%;
    margin-right: calc(-25% - 1.5em);
    margin-left: calc(-25% - 1.5em);
    position: relative;
    clear: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
}

p > a.tag:hover::after {
    max-width: fit-content !important;
}

Original Forum Post

Here’s a rather robust and flexible list of upcoming birthdays that

• shows link, next birthday, and age someone will turn to
• has a configurabe date range (from today, for a “natural language” duration)
• sorts by next birthday
• uses locale settings from the language Obsidian is set to
• doesn’t choke when crossing the year boundary
• has YAML searchterm configuration
• has YAML “natural language” duration configuration; “odd” data like duration: 0.5 years will be auto-translated to 6 months (or 6 Monate in German)
• has YAML date format configuration (yay!)
• has a configurable info line above the table (can be disabled)

Upcoming birthdays with English settings, custom date format and info line

The technically-minded may also find interesting:

• utility functions that can be used for table data
• custom function for “where”
• comparator function for “sort”
• easily translatable “info line” with parameters
• how I need to undo Dataview’s YAML pre-parsing of dates and durations

Upcoming birthdays with German settings, custom date format and info line

Requirements

• Dataview 0.3.3+

• moment.js (comes with Obsidian)

• Notes to be included must have a birthday as YYYY-MM-DD in the frontmatter:

  birthday: 1959-07-19
  

• The note using this script must have the parameters searchterm and a (more or less) “natural language” duration in the frontmatter:

  #searchterm: "#family or #friends"
  searchterm: '"People"'
  duration: 1 year
  

• The note using this script can have an additional dateformat in the frontmatter:

  dateformat: "ddd, D MMMM YYYY"
  

  If left out or empty, it will default to YYYY-MM-DD.

Code

YAML frontmatter example

#searchterm: "#family or #friends"
searchterm: '"People"'
duration: 1 year
dateformat: "ddd, D MMMM YYYY"

dataviewjs code

This contains some utility functions that can be used in your table, like nextBirthday(), turns().

var start = moment().startOf('day');
var end = moment(start).add(dv.current().duration);
var dateformat = "YYYY-MM-DD";
if (dv.current().dateformat) { dateformat = dv.current().dateformat; }

// info text above table, {0}=duration, {1}=start date, {2}=end date
// parameters can be left out, or the string empty
var infotext = "Upcoming birthdays for {0} from now ({1} – {2})<br><br>";

//======================================================================

function nextBirthday(birthday) {
    // Get person’s next birthday on or after "start"
    // returns a moment
    
    // need to "unparse" because DV has already converted YAML birthday to DateTime object
    // shouldn’t harm if already a string
    var bday = moment(birthday.toString());
    var bdayNext = moment(bday).year(start.year());
    if (bdayNext.isBefore(start, 'day')) {
        bdayNext.add(1, "year");
    }
    return bdayNext;
}

function turns(birthday) {
    // Get the age in years a person will turn to on their next birthday

    // need to "unparse" because DV has already converted YAML birthday to DateTime object
    // shouldn’t harm if already a string
    var bday = moment(birthday.toString());
    return nextBirthday(birthday).diff(bday, 'years');
}

function showBirthday(birthday) {
    // Determine if this birthday is in the range to be shown
    // including the start date, excluding the end date
    // because that comes from a duration calculation
    // for use with "where", returns true or false
    
    if (birthday) {
        // need to "unparse" because DV has already converted YAML birthday to DateTime object
        // shouldn’t harm if already a string
        var bday = moment(birthday.toString());
        var bdayNext = nextBirthday(birthday);
        if (bdayNext.isBetween(start, end, 'day', '[)')) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }
}

function sortByNextBirthday(a, b) {
    // comparator function for "sort"
    
    if (nextBirthday(a).isBefore(nextBirthday(b))) {
    return -1;
    }
    if (nextBirthday(a).isAfter(nextBirthday(b))) {
    return 1;
    }
    // they’re equal
    return 0;
}


//======================================================================

dv.paragraph(infotext.format(moment.duration(dv.current().duration.toString()).humanize(), start.format(dateformat), end.format(dateformat)));

dv.table(
    ["Name", "Birthday", "Turns"],
    dv.pages(dv.current().searchterm)
        // use a function to see if this birthday is in range to be shown
        .where(p => showBirthday(p.birthday))
        // use a comparator function to sort by next birthday
        .sort(p => p.birthday, 'asc', sortByNextBirthday)
        .map(p => [
            p.file.link,
            p.birthday ? nextBirthday(p.birthday).format(dateformat) : '–',
            turns(p.birthday)
        ])
);

Notes

• Dataview actually parses the cell content, so if you for example set the date format to D. MMMM, you’ll get large vertical spacing. This is because DV thinks something like 17. May must be an ordered list item and parses it accordingly. Which in turn will ruin your vertical spacing.
  See 0.3.3: table item converts to ordered list, ruining vertical spacing · Issue #199 · blacksmithgu/obsidian-dataview · GitHub 1.

• Using durations > 1 year (like 2 years) work, but don’t make much sense. The table will only display a person’s next birthday. So no duplicates.

Original Forum Post

.markdown-preview-view hr {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, var(--background-primary), var(--text-accent), var(--background-primary));
}

.markdown-preview-view hr::after {
  content: '§';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: var(--text-sub-accent);
  background-color: var(--background-primary);
}

Original Forum Post

 /*----------------------------------------------------------------
  Font styles
  Preview mode and UI */

  --text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  
  /* Editor mode */

  --text-editor:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  
  /* Code */

  --font-monospace:Menlo,SFMono-Regular,Consolas,"Roboto Mono",monospace;

  /* Sizes, weights, padding */

  --font-normal:16px;
  --font-small:13px;
  --font-smaller:11px;
  --font-smallest:10px;
  --normal-weight:400;   /* Switch to 300 if you want thinner default text */
  --bold-weight:600;     /* Switch to 700 if you want thicker bold text */
  --line-width:40rem;    /* Maximum characters per line */
  --line-height:1.5;
  --max-width:87%;       /* Amount of padding around the text, use 90% for narrower padding */
  --nested-padding:3.5%; /* Amount of padding for quotes and transclusions */
  --icon-muted:0.4;
  --border-width:1px;
  --border-width-alt:1px;

  /*----------------------------------------------------------------

Original Snippet

Original Forum Post

  .collapsible-item-collapse {
    padding: 2px 15px 2px 15px;
    left:1.5px;
  }
   div.collapsible-item-inner{
    position:relative;
    padding-left: 15px;

   }
  .outline .collapsible-item-children {
    margin-left: 20px;
    border-left: 1px solid rgba(118,158,165,0.2);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
  }
  .outline .collapsible-item-children:hover {
    border-left-color: rgba(118,158,165,0.4);
  }

/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
  width: 0.5em;
  background: #d65d0e;
  opacity: 60% !important;
}

/*an active line highlight in vim normal mode */
.cm-fat-cursor .CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;
}

/*if you want the highlight to present in both normal and insert mode of vim*/
.CodeMirror-activeline .CodeMirror-linebackground{
  background-color: rgba(89, 75, 95, 0.99) !important;
}

Original Forum Post

.CodeMirror-cursor { 
  border-left-width: 0.5em;
  opacity: 0.75;
}

Original Forum Post

Insert your tag in place of #obsidian, #important, etc. to set the color specific to a tag.

tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}

Original Forum Post

.markdown-preview-view img {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%;  /* experiment with values */
  transition:transform 0.25s ease;
}

.markdown-preview-view img:hover {
    -webkit-transform:scale(1.8); /* experiment with values */
    transform:scale(2);
    
}

Original Forum Post

:root
{
--font-size-normal: clamp(12px, 5vh, 20px);
--font-size-code: clamp(12px, 5vh, 18px);
--font-size-side-dock: clamp(12px, 5vh, 16px);
--font-size-side-dock-title: clamp(12px, 5vh, 18px);
--font-size-blockquote: clamp(16px, 5vh, 22px);
--font-size-status-bar: clamp(16px, 5vh, 16px);
--font-small: clamp(16px, 5vh, 18px);
--font-medium: clamp(16px, 5vh, 21px);
}

Original Forum Post

/*
    Fade the pane header controls unless hovered (just to reduce/minimise distraction) 
    does this per individual control to easily leave link and pin slightly more visible even if not hovered, and 
    as an easy way to do a snazzy transition delay stagger in and out ;)    
*/

/* not hovered ie. on cursor exit from the header */
.view-header:not(:hover) a.view-action[aria-label*="Preview"],
.view-header:not(:hover) a.view-action[aria-label*="Edit"]  { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 0ms;
}

.view-header:not(:hover) a.view-action[aria-label*="link"] { 
  opacity: 0.55;
  transition: opacity .25s ease-in-out;
  transition-delay: 20ms;
}

.view-header:not(:hover) a.view-action[aria-label*="Pin"] { 
  opacity: 0.35;
  transition: opacity .25s ease-in-out;
  transition-delay: 40ms;
}

.view-header:not(:hover) a.view-action[aria-label*="Close"] { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 60ms;
}

.view-header:not(:hover) a.view-action[aria-label*="More"] { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 80ms;
}

/*  hovered ie. on cursor entry to the header */
.view-header:hover a.view-action[aria-label*="Preview"],
.view-header:hover a.view-action[aria-label*="Edit"]  { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 0ms;
}

.view-header:hover a.view-action[aria-label*="link"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 20ms;
}

.view-header:hover a.view-action[aria-label*="Pin"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 40ms;
}

.view-header:hover a.view-action[aria-label*="Close"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 60ms;
}

.view-header:hover a.view-action[aria-label*="More"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 80ms;
}

Original Forum Post

.nav-folder-children .nav-file-title-content:first-child::before { content: '🗒 '; }
.nav-folder-children .nav-folder-title-content::before { content: '📂 '; }

Using Wingdings or IcoMoon

.nav-folder-children .nav-file-title-content:first-child::before {
    content: "\e924  ";
    font-family: 'IcoMoon-Free';
  }
  .nav-folder-children .nav-folder-title-content::before {
    content: '\e930  ';
    font-family: 'IcoMoon-Free';
  }

Auto fade note controls

.view-header:not(:hover) .view-actions {
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
}

Auto fade status bar

/* auto fades status bar items */
.status-bar:not(:hover) .status-bar-item {
  opacity: 0.25;
  transition: opacity .25s ease-in-out;
}

Subtler scrollbars

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

Subtler folding arrows

/* Make subtler folding gutter arrows */
.CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after {
    opacity: 0.5;
    font-size: 60%;
}

.CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after {
    opacity: 1;
}

.CodeMirror-foldgutter-folded:after {
    content: "\25BA";    
}

.CodeMirror-foldgutter-open:after {
    content: "\25BC";    
}

Original Forum Post

.workspace-ribbon.is-collapsed:not(:hover) .workspace-ribbon-collapse-btn, 
.workspace-ribbon.is-collapsed:not(:hover) .side-dock-actions, 
.workspace-ribbon.is-collapsed:not(:hover) .side-dock-settings {display:none;}
.workspace-ribbon.is-collapsed:not(:hover) {width: 0;}
.workspace-split.mod-left-split[style="width: 0px;"] {margin-left: 0;}
.workspace-split.mod-right-split[style="width: 0px;"] {margin-right: 0;}
.workspace-ribbon {transition: none}

Thanks to @mrjackphil and @MooddooM

Original Forum Post

/*============bigger link popup preview  ================*/
.popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;    /* was 300 */
    min-height: 100px;
    width: 500px;     /* was 400 */
}

Original Forum Post

.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}
ul ul::before { left: -11px; top: 0; bottom: 0; 
} 

Original Forum Post

This snippet will make embeds sit within a text without scrollbars by default. If a link is given the alias [[short|document]]] or ![[tall|document]] it will be set to a limited height and given scroll bars if it exceeds the maximum height.

.markdown-preview-view .markdown-embed-content { 
  max-height: unset;
}

.internal-embed.is-loaded[alt="short"] {
  max-height: 45vh !important;
  overflow: auto !important;
  padding-right: 0px!important;
}

.internal-embed.is-loaded[alt="tall"] {
  max-height: 80vh !important;
  overflow: auto !important;
}

Embeds the contents of linked notes into the preview

/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;}

/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { 
  max-height: unset;
  background-color: var(--background-secondary); /*define different bg color*/
}

/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}

.markdown-embed-link:hover {
color: var(--text-accent) !important;
}

Original Forum Post

Add quotation mark before quote

/* Add quotation character before quote */
blockquote:before {
  font: 14px/20px italic Times, serif;
  content: "“";
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
blockquote p { display: inline; }

Remove left margin

/* Remove blockquote left margin */
blockquote {
  margin-inline-start: 0;
}

Original Forum Post