Zettelkasten CSS

roam.css

//First the Better Roam Research with Custom font
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700;800&display=swap');
@import url("https://linuz90.github.io/better-roam-research/src/css/main.css");

body,
div,
textarea,
.level2 {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; }

// Below css for zettelkasten

span.rm-page-ref[data-tag="Zettels"] {    
  background-color: #95DB85;
  padding: 3px 7px;
  line-height: 2em;
  border-radius: 3px;  
  color: white;
}

span.rm-page-ref[data-tag="Literature Notes"] {    
  background-color: #8F3B7B;
  padding: 3px 7px;
  line-height: 2em;
  border-radius: 3px;  
  color: white;
}

span.rm-page-ref[data-tag="Highlights"] {    
  background-color: #F2BD1D;
  padding: 3px 7px;
  line-height: 2em;
  border-radius: 3px;  
  color: white;
}

span.rm-page-ref[data-tag="Fleeting Notes"] {    
  background-color: #DB86C7;
  padding: 3px 7px;
  line-height: 2em;
  border-radius: 3px;  
  color: white;
}

span.rm-page-ref[data-tag="Missing"] {    
  border: 1px dotted #FEA4435B;
  padding: 3px 7px;
  line-height: 2em;
  border-radius: 3px;
  color: #D78B3789;
}

span.rm-page-ref[data-tag="Conflicts with"] { 
  border: 1px dotted #FF665A5B;
  padding: 3px 7px;
  line-height: 2em;
  border-radius: 3px;
  color: #D7544A89;  
}

span[data-link-title^="Z:"] {
  background: #95DB851E;
  padding: 3px 10px 3px 75px;
  line-height: 2em;
  border-radius: 3px;
  position: relative;
}

span[data-link-title^="Z:"] .rm-page-ref--link  {
  color: #73A867 !important;
}

span[data-link-title^="Z:"] .rm-page-ref--link:hover  {
  text-decoration: none;
  color: #58814F !important;
}

span[data-link-title^="Z:"] .rm-page-ref__brackets  {
  display: none;
}

span[data-link-title^="Z:"]:before {
  content: 'Zettel';
  color: #FFFFFF;
  background-color: #95DB85;
  border-radius: 3px 0 0 3px;
  padding-left: 10px;
  line-height: 26px;
  
  left: 0px;
  top: 0%;
  position: absolute;
  pointer-events: none;
  width: 55px;
}

span[data-link-title^="Z:"]:after {
  content: '';
  color: #FFFFFF;
  
  left: 55px;
  top: 0%;
  position: absolute;
  pointer-events: none;
  
  width: 0; 
  height: 0; 
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  
  border-left: 13px solid #95DB85;
}

.rm-zoom-item span[data-link-title^="Z:"] {
  background: #95DB851E;
  padding: 3px 10px 3px 67px;
  line-height: 2em;
  border-radius: 3px;
  position: relative;
}

.rm-zoom-item span[data-link-title^="Z:"]:before {
  content: 'Zettel';
  color: #FFFFFF;
  background-color: #95DB85;
  border-radius: 3px 0 0 3px;
  padding-left: 10px;
  line-height: 23px;
  
  left: 0px;
  top: 0%;
  position: absolute;
  pointer-events: none;

  width: 50px;
}

.rm-zoom-item span[data-link-title^="Z:"]:after {
  content: '';
  color: #FFFFFF;
  
  left: 50px;
  top: 0%;
  position: absolute;
  pointer-events: none;
  
  width: 0; 
  height: 0; 
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  
  border-left: 11px solid #95DB85;
}

span.rm-page-ref[data-tag="Missing"] + span[data-link-title^="Z:"] {
  background: #FEA4431E;
}

span.rm-page-ref[data-tag="Missing"] + span[data-link-title^="Z:"] .rm-page-ref--link  {
  color: #D78B37 !important;
}

span.rm-page-ref[data-tag="Missing"] + span[data-link-title^="Z:"] .rm-page-ref--link:hover  {
  color: #B0722D !important;
}

span.rm-page-ref[data-tag="Missing"] + span[data-link-title^="Z:"]:before {
  background: #FEA443;
}

span.rm-page-ref[data-tag="Missing"] + span[data-link-title^="Z:"]:after {
  border-left: 11px solid #FEA443;
}

span.rm-page-ref[data-tag="Conflicts with"] + span[data-link-title^="Z:"] {
  background: #FF665A1E;
}

span.rm-page-ref[data-tag="Conflicts with"] + span[data-link-title^="Z:"] .rm-page-ref--link  {
  color: #D7544A !important;
}

span.rm-page-ref[data-tag="Conflicts with"] + span[data-link-title^="Z:"] .rm-page-ref--link:hover  {
  color: #A44038 !important;
}

span.rm-page-ref[data-tag="Conflicts with"] + span[data-link-title^="Z:"]:before {
  background: #FF665A;
}

span.rm-page-ref[data-tag="Conflicts with"] + span[data-link-title^="Z:"]:after {
  border-left: 11px solid #FF665A;
}