styling

• Status Bar Border

  styling

  • css

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

• Dataview Table as Cards

  styling

  • css

  

  /* 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;
  }
  
  

• Built-in Icons

  styling

  • css

  • '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

• Adding CSS Snippets

  styling

  • css
  • theming

• PDF Export Tweaks

  styling

  • css

  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;
  	}	
  }
  

• Collapsible Side Notes

  styling

  • css

  

  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

• Maintain Line Height - Footnotes

  styling

  • css

  Before:

  After:

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

  Original Forum Post

• Display Tags Aside

  styling

  • css

  

  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

• Lined Heading

  styling

  • css

  

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

  Original Forum Post

• Outliner for Outliners

  styling

  • css

  
    .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);
    }
  

  

• Responsive Type

  styling

  • css

  

  :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

• Show Pane Header Icons on Hover

  styling

  • css

  

  /*
      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

• Changing Font Styles/Sizes

  styling

  • css

   /*----------------------------------------------------------------
    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

• Custom Symbolic HR Line

  styling

  • css

  

  .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

• Folder and File Icons in Explorer

  styling

  • css

  .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';
    }
  

  

• Bigger Popup Preview

  styling

  • css

  

  /*============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

• Stylish Blockquotes

  styling

  • css

  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

• Enlarge Image on Hover

  styling

  • css

  .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

• Variable Embed Heights

  styling

  • css

  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;
  }
  

• Naked Embeds

  styling

  • css

  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

• Vim Mode Line Focus

  styling

  • css

  

  /* 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

• Block Cursor

  styling

  • css

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

  Original Forum Post

• Auto fade controls

  styling

  • css

  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

• Tag Pills

  styling

  • css

  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

• Bullet Point Relationship Lines

  styling

  • css

  .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

• Collapsible Sidebars

  styling

  • css

  .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