RBC_Zettelkasten_in_Logseq.css: Roam Book Club Zettelkasten CSS in Logseq

RBC_Zettelkasten_in_Logseq.css

/*

  File: RBC_Zettelkasten_in_Logseq.css
  
  Description:
    This CSS file is my attempt at 'porting' the Roam Book Club Zettelkasten
    CSS for use in Logseq.
  
  NOTES:
    - There are tags created for the three "projects" in the source css. You're intended
      to replace these names with your own, but use lowercase. For example "project tango".
      - Each of the three "projects" is broken into it's own section with an ALL CAPS
        section comment.

    - The only "bug" is that I can't select & style ONLY links that follow a "permanent links"
      tag, so when you view the "Permanent Notes" page, links following #Links appear styled
      the same as links following a "Permanent Notes" tag.

*/

/* Fleeting Notes Tag Styling */
a.tag[data-ref="fleeting notes"] {
  background: #fff;
  background-size: 100%;
  color: #000;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #f21da140;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}

/* Literature Notes Tag Styling */
a.tag[data-ref="literature notes"] {
  background: #fff;
  background-size: 100%;
  color: #000;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #215f0040;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}

/* Reference Notes Tag Styling */
a.tag[data-ref="reference notes"] {
  background: #fff;
  background-size: 100%;
  color: #000;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #f26e1d40;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}

/* Translation Notes Tag Styling */
a.tag[data-ref="translation notes"] {
  background: #fff;
  background-size: 100%;
  color: #000;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #391df240;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}

/* Relevant Notes Tag Styling */
a.tag[data-ref="relevant notes"] {
  background: #fff;
  background-size: 100%;
  color: #1da1f2;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #ffffff40;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}

/* PERMANENT NOTES TAG */

/* Permanent Notes Tag Styling */
a.tag[data-ref="permanent notes"] {
  background: #1da1f2;
  background-size: 100%;
  color: #ffffff;
  padding: 3.65px 5px 3.65px 5px;
  margin-right: 0px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 3px 0 0 3px;
  position: relative;
  /* box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px  #DFDFDF; */
}

/* Data-Ref (Link) Styling - ONLY WHEN IMMEDIATELY AFTER A TAG */
span.inline div + span.page-reference[data-ref] {
  background: #1da1f21e !important;
  color: #f5f8fa !important;
  padding: 1.5px 5px 1.5px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 400;
  border-radius: 0 3px 3px 0;
}

/* Permanent Notes Tag Styling: Before & After Tag */
a.tag[data-ref="permanent notes"]:after,
a.tag[data-ref="permanent notes"]:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

/* Permanent Notes Tag Styling: After Tag */
a.tag[data-ref="permanent notes"]:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #1da1f2;
  border-width: 10px;
  margin-top: -10px;
}

/* Permanent Notes Tag Styling: Before Tag */
a.tag[data-ref="permanent notes"]:before {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #1da1f2;
  border-width: 10px;
  margin-top: -10px;
}





/* PROJECT NAME TAG */

/* "Project Name" Tag Styling */
a.tag[data-ref="project name"] {
  background-color: #6a5acd;
  background-size: 100%;
  color: #ffffff;
  padding: 3.65px 5px 3.65px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 3px 0 0 3px;
  position: relative;
}

/* "Project Name" Tag Styling: Before & After Tag */
a.tag[data-ref="project name"]:after,
a.tag[data-ref="project name"]:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

/* "Project Name" Tag Styling: After Tag */
a.tag[data-ref="project name"]:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #6a5acd;
  border-width: 10px;
  margin-top: -10px;
}

/* "Project Name" Tag Styling: Before Tag */
a.tag[data-ref="project name"]:before {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #6a5acd;
  border-width: 10px;
  margin-top: -10px;
}

/* "Relevant Project" Tag Styling */
a.tag[data-ref="relevant project"] {
  background: white;
  background-size: 100%;
  color: #6a5acd;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #ffffff;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}





/* PROJECT NAME2 TAG */

/* "Project Name2" Tag Styling */
a.tag[data-ref="project name2"] {
  background-color: #1877f2;
  background-size: 100%;
  color: #ffffff;
  padding: 3.65px 5px 3.65px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 3px 0 0 3px;
  position: relative;
}

/* "Project Name2" Tag Styling: Before & After Tag */
a.tag[data-ref="project name2"]:after,
a.tag[data-ref="project name2"]:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

/* "Project Name2" Tag Styling: After Tag */
a.tag[data-ref="project name2"]:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #1877f2;
  border-width: 10px;
  margin-top: -10px;
}

/* "Project Name2" Tag Styling: Before Tag */
a.tag[data-ref="project name2"]:before {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #1877f2;
  border-width: 10px;
  margin-top: -10px;
}

/* "Relevant Project2" Tag Styling */
a.tag[data-ref="relevant project2"] {
  background: white;
  background-size: 100%;
  color: #1877f2;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #ffffff;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}





/* PROJECT NAME3 TAG */

/* "Project Name3" Tag Styling */
a.tag[data-ref="project name3"] {
  background-color: #81d8d0;
  background-size: 100%;
  color: #ffffff;
  padding: 3.65px 5px 3.65px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 3px 0 0 3px;
  position: relative;
}

/* "Project Name3" Tag Styling: Before & After Tag */
a.tag[data-ref="project name3"]:after,
a.tag[data-ref="project name3"]:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

/* "Project Name3" Tag Styling: After Tag */
a.tag[data-ref="project name3"]:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #81d8d0;
  border-width: 10px;
  margin-top: -10px;
}

/* "Project Name3" Tag Styling: Before Tag */
a.tag[data-ref="project name3"]:before {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: #81d8d0;
  border-width: 10px;
  margin-top: -10px;
}

/* "Relevant Project3" Tag Styling */
a.tag[data-ref="relevant project3"] {
  background: white;
  background-size: 100%;
  color: #81d8d0;
  padding: 2px 5px 2px 5px;
  font-size: 13px;
  line-height: 1em;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-color: #ffffff;
  border-width: thin;
  position: relative;
  box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf;
}






/* JOURNAL / DAILY NOTES LINKS & TITLE LINKS */

/* Journal/Daily Notes Links: Add preceding emoji */
a.page-ref[data-ref*=", 2023"]::before {
  content: "📅 ";
}

/* Journal/Daily Notes Title Links: Add preceding emoji */
a.initial-color.title.journal-title > h1::before {
  content: "📅 ";
}