Michael Shulman's Shared Notes

Powered by 🌱Roam Garden

roam/css

  • Page in Roam help with different themes is here
    • This page remembers the filter - so can use the filter to select which theme is active.
    • To deactivate all themes, shift-click the 'off' tag.
    • To play with what am using this second, open in sidebar - doesn't save the filters, so can see the whole page.
    • all import lines must come before any other code - careful when stacking themes!
  • Masonry theme active
    • /* MAIN CSS - Required */
@import url('https://gitmurf.github.io/masonry-vanilla/masonry-main.css');

/* OPTIONAL 1 - Some additional options on top of Vanilla that Murf uses */
@import url('https://gitmurf.github.io/masonry-vanilla/masonry-optional-1.css');

/*OPTIONAL 2 - More customized formatting to Murf's liking (still Roam Vanilla base though) */
@import url('https://gitmurf.github.io/masonry-vanilla/masonry-optional-2.css');

:root {
    --main-left-bg: white;
    --right-sidebar-bg: rgb(247 248 249);
    --right-sidebar-drag-bg: #337ac6;
    --masonry-bg: white;
    --masonry-scrollbar-bg: #009688;
    --masonry-resizer-color: lightgrey;
    --masonry-startWidth: 450px; /* DEFAULT: 550px; Change this to "unset" if you DON'T want the sidebar pages to be reset in grid like format each time */
    --masonry-minWidth: 400px;
    --masonry-maxWidth: 1200px;
    --masonry-startHeight: 243px; /* DEFAULT: 243px; Change this to "unset" if you DON'T want the sidebar pages to be reset in grid like format each time */
    --masonry-minHeight: 200px;
    --masonry-border: 1px solid lightgrey;
    --closed-bullet-color: 4px solid #4CAF50;
    --code-color: #000000;
}
  • Dracula Pro with Masonry theme add-on, from here:
    • Replace "dark-age-dracula" with the following for other colorsets:
      • material-palenight-roam
      • dark-night-roam
      • shades-of-purple 
    • @import url('https://abhayprasanna.github.io/material-palenight-roam.css');
/*@import url('https://abhayprasanna.github.io/rainbow-indent.css'); */
@import url('https://abhayprasanna.github.io/dark-masonry.css') (min-width:700px);
  • CSS for Unlink Finder popups active
    • /* CSS Tooltip Container */
.alias-word-match:before, .fuzzy-word-match:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  
  /* move to right */
  right:100%;
  margin-right:15px; /* and add a small left margin */
  
  /* basic styles */
  width:150px;
  padding:10px;
  border-radius:10px;
  background:gray;
  color: #fff;
  text-align:center;
  
  display: none;
  z-index: 100;
}

/* CSS Arrow */
.alias-word-match:after, .fuzzy-word-match:after {
  content: "";
  position:absolute;
  
  /* position tooltip correctly */
  right:100%;
  margin-right:-5px;
 
  /* vertically center */
  top:50%;
  transform:translateY(-50%);

  /* the arrow */
  border:10px solid gray;
  border-color: transparent transparent transparent gray;
  
  display: none;
  z-index: 100;

}

/* Show the tooltip and arrow on hover */
.alias-word-match:hover:before, .alias-word-match:hover:after, .fuzzy-word-match:hover:before, .fuzzy-word-match:hover:after {
  opacity: 0.95;
  display:block;
  
}
  • CSS from Joel Chan to highlight references and Zettels active
    • 
span[data-link-title^="@"] {
  background: #C57ED156;
}
span[data-link-title^="@"] \> span {
   color: #242424 !important;
}
/*span[data-link-title^="@"] \> span {
   color: #FFFFFF !important;
}*/
span[data-link-title^="Z: "] \> span {
   color: #fff !important;
  font-weight: 500;
}
span[data-link-title^="Z: "] {
   color: #fff !important;
  background: #3F8842;
}
  • Tag Styles theme 
    • 
/* Custom data tags */
span.rm-page-ref[data-tag="Tweets"] {
    background: #2980b9 !important;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Projects"] {
    background: #2980b9 !important;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Books"] {
    background: #8e44ad !important;
    color: white !important;
    padding: 3px 7px;
    font-weight: 500;
    line-height: 2em;
}

span.rm-page-ref[data-tag="People"] {
    background: #8e44ad !important;
    color: white !important;
    padding: 3px 7px;
    font-weight: 500;
    line-height: 2em;
}

span.rm-page-ref[data-tag="Ideas"] {
    background: #e67e22 !important;
    color: white !important;
    padding: 3px 7px;
    font-weight: 500;
    line-height: 2em;
}

span.rm-page-ref[data-tag="Recipes"] {
    background: #e67e22 !important;
    color: white !important;
    padding: 3px 7px;
    font-weight: 500;
    line-height: 2em;
}

span.rm-page-ref[data-tag="Videos"] {
    background: #f1c40f !important;
    color: white !important;
    padding: 3px 7px;
    font-weight: 500;
    line-height: 2em;
}

span.rm-page-ref[data-tag="Articles"] {
    background: #27ae60;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Goals"] {
    background: #27ae60;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Talk"] {
    background: #7f8c8d;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Podcasts"] {
    background: #7f8c8d;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Waiting"] {
    background: #f39c12;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Inbox"] {
    background: #e74c3c;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}
  • My personal Tag Styles active
    • 
span.rm-page-ref[data-tag="me"] {
    color: #2ecc71 !important;
    padding: 3px 3px;
    font-weight: 400;
    line-height: 1.4em;
}


span.rm-page-ref[data-tag="tech_helps"] {
    background: #f39c12;
    color: white !important;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 00;
}


span.rm-page-ref[data-tag="MTS-AI_challenge"] {
    background: #f1c40f !important;
    color: white !important;
    padding: 3px 7px;
    font-weight: 500;
    line-height: 2em;
}

span.rm-page-ref[data-tag="morning_thoughts"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="morning_thoughts"]:before {
    content: '🌞'
}
  • Tag Styles from Roam Collective active
    • Data-type Tags
      • `Articles
        • span.rm-page-ref[data-tag="Articles"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Articles"]:before {
    content: '📰'
}
      • `Books
        • span.rm-page-ref[data-tag="Books"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Books"]:before {
    content: '📚'
}
      • `Tweets
        • span.rm-page-ref[data-tag="Tweets"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Tweets"]:before {
    content: '🐦'
}
      • `Conversations and Meetings
        • span.rm-page-ref[data-tag="Conversations and Meetings"] {
    background: #607D8B;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Conversations and Meetings"]:before {
    content: '💬'
}
      • `Podcasts
        • span.rm-page-ref[data-tag="Podcasts"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Podcasts"]:before {
    content: '🎙'
}
      • `Meetings
        • span.rm-page-ref[data-tag="Meetings"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Meetings"]:before {
    content: '👥'
}
      • `Conversations
        • span.rm-page-ref[data-tag="Conversations"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Conversations"]:before {
    content: '🗣'
}
      • `Lectures
        • span.rm-page-ref[data-tag="Lectures"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Lectures"]:before {
    content: '🏫'
}
      • `Learning Objectives
        • span.rm-page-ref[data-tag="Learning Objectives"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Learning Objectives"]:before {
    content: '🎓'
}
      • `Recommendations
        • span.rm-page-ref[data-tag="Recommendations"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Recommendations"]:before {
    content: '📍'
}
      • `Ideas
        • span.rm-page-ref[data-tag="Ideas"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Ideas"]:before {
    content: '💡'
}
      • `Jokes
        • span.rm-page-ref[data-tag="Jokes"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Jokes"]:before {
    content: '🤣'
}
      • `Goal Ideas
        • span.rm-page-ref[data-tag="Goal Ideas"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Goal Ideas"]:before {
    content: '🎯'
}
      • `Prompt Ideas
        • span.rm-page-ref[data-tag="Prompt Ideas"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Prompt Ideas"]:before {
    content: '💭'
}
      • `Quotes
        • span.rm-page-ref[data-tag="Quotes"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Quotes"]:before {
    content: '💬'
}
      • `Prompts
        • span.rm-page-ref[data-tag="Prompts"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Prompts"]:before {
    content: '💭'
}
      • `Examples
        • span.rm-page-ref[data-tag="Examples"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Examples"]:before {
    content: '🏷'
}
      • `Transcript
        • span.rm-page-ref[data-tag="Transcript"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Transcript"]:before {
    content: '📜'
}
      • `missing-list
        • span.rm-page-ref[data-tag="missing-list"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="missing-list"]:before {
    content: '🔍'
}
      • `Conventions
        • span.rm-page-ref[data-tag="Conventions"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Conventions"]:before {
    content: '⚙️'
}
      • `Processes
        • span.rm-page-ref[data-tag="Processes"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Processes"]:before {
    content: '⚙️'
}
      • `Resources
        • span.rm-page-ref[data-tag="Resources"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Resources"]:before {
    content: '🗃'
}
      • `Stories
        • span.rm-page-ref[data-tag="Stories"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Stories"]:before {
    content: '🎭'
}
      • `Predictions
        • span.rm-page-ref[data-tag="Predictions"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Predictions"]:before {
    content: '🔮'
}
      • `Idioms
        • span.rm-page-ref[data-tag="Idioms"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Idioms"]:before {
    content: '🗣'
}
      • `Timestamps
        • span.rm-page-ref[data-tag="Timestamps"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}
      • `Tips
        • span.rm-page-ref[data-tag="Tips"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Tips"]:before {
    content: '☝️'
}
      • `Tensions
        • span.rm-page-ref[data-tag="Tensions"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Tensions"]:before {
    content: '⛓'
}
      • `Open Questions
        • span.rm-page-ref[data-tag="Open Questions"] {
    background: #607D8B;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Open Questions"]:before {
    content: '❓'
}
      • `Context Questions
        • span.rm-page-ref[data-tag="Context Questions"] {
    background: #607D8B;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Context Questions"]:before {
    content: '❓'
}
      • `Shownotes
        • span.rm-page-ref[data-tag="Shownotes"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}
      • `Weather Report
        • span.rm-page-ref[data-tag="Weather Report"] {
    background: #9E9E9E;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="Weather Report"]:before {
    content: '🌤'
}
  • My CSS additions active
    • `active_reading
      • span.rm-page-ref[data-tag="active_reading"] {
    background: #7091A2BF;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="active_reading"]:before {
    content: '👀'
}
    • `definition
      • span.rm-page-ref[data-tag="definition"] {
    background: #7091A2BF;
    color: #fff;
    padding: 2px 5px 2px 5px;
    font-size: 13px;
    line-height: 1em;
    font-weight: 500;
    border-radius: 5px 5px 5px 5px;
    position:relative;
}

span.rm-page-ref[data-tag="definition"]:before {
    content: '📌'
}
  • Rainbow bullets updated 
    • /* Rainbow indentation */
/* 
Feel free to adjust the color variables!
This one has 18 colors deep (3 cycles of 3 rainbow flavored palettes).
This loops 3 times so it goes 54 levels deep!
To add more levels just target
.rm-level-n \> div for every nth level
*/

@import url('https://abhayprasanna.github.io/rainbow-indent-core.css');

:root {
    --box-shadow-values: none;/*20px 0px 15px -30px; /* Set to "none" to remove shadow */
    --indent1: #5F388BAD;
    --indent2: #4A57BAAD;
    --indent3: #48864DAD;
    --indent4: #A7A15AAD;
    --indent5: #AD7E48AD;
    --indent6: #A5494FAD;
    --indent7: #634071AD;
    --indent8: #303472AD;
    --indent9: #395C45AD;
    --indent10: #7C7948AD;
    --indent11: #7D5039AD;
    --indent12: #A5494FAD;
    --indent13: #706597AD;
    --indent14: #657D91AD;
    --indent15: #6D8D76AD;
    --indent16: #A09A84AD;
    --indent17: #987174AD;
    --indent18: #8B5F78AD;
}

.block-border-left {
    border-left-width: 1px !important; /* Default 1px */
    margin-left: 6px; /* Default 6px */
    border-radius: 0; /* Set to 0 to get smooth, straight indents */
    padding: 0 !important; /* Set to 0 to align all indents */
}
  • From Nat Eliason, edited version of Leyendecker - found here
  • Leyendecker modified by Nat Eliason TurnOff 
    • h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", sans-serif;
    font-size: 3em;
}
div,
textarea {
    font-weight: 400;
    color: #3F4758;
    font-size: 1.002em;
}
.roam-block-container {
    max-width: 1200px;
}

.rm-block-text {
    max-width: 1200px;
}

.rm-pomodoro {
    background: #fff !important;
    color: #ff4747 !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em;
    border: 1px solid #ff474770;
}

.rm-pomodoro {
    background: #ff6956 !important;
    color: #fff !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em;
    border: 1px solid #ed5845;
}

.rm-pomodoro::first-letter {
  margin-right: 8px;
}

.rm-query {
    border: 0.5px solid #e4e9ec;
    border-radius: 5px;
    
}

.rm-query .rm-query-title {
    background-color: #f7f8f8;
    padding: 0.8em;
    color: #d1dbe2;
    font-size: 80%;
}

.rm-reference-main.rm-query-content {
    padding: 0.8em;
}

.rm-reference-main .rm-reference-item .rm-block-text {
    font-size: 90%;
}

.rm-ref-page-view-title span {
    
}

.rm-reference-main .rm-reference-item .controls {
    margin-left: -1em;
}

.rm-ref-page-view {
    padding: 0.4em 0.2em;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page {
    padding: 6px;
}

div.flex-v-box.starred-pages-wrapper \> div.flex-h-box \> span {
    font-size: 14px !important;
    opacity: 80%;
    letter-spacing: 0.04em;
}

div.roam-sidebar-container.noselect \> div \> div {
    font-size: 14px !important;
    letter-spacing: 0.03em;
    
}

#block-input {
    background: white;
}

.roam-body #block-input \> span \> div {
    padding: 6px 24px;
    background: white;
}

span.bp3-icon-small.bp3-icon-star {
    display: none;
    visibility: hidden;
}

.roam-block {
    max-width: 850px;
}

#right-sidebar \> div {
    background-color: #f7f8fa;
    border-left: 1px solid #e9ebef;
}
.controls .simple-bullet-outer .simple-bullet-inner {
    background-color: #e5e9f2;
}
.block-border-left {
    border-left: 1px solid #f3f6f7;
}
.kanban-board {
    background-color: #fff;
}
.kanban-card {
    background-color: white;
    margin: 8px;
    box-shadow: 0px 1px 2px #9eb3c0a8;
    padding: 10px;
    border-radius: 2px;
    line-height: 1.3em;
}
.kanban-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.1em;
    opacity: 80%;
    color: #485f6f;
    padding-top: 8px;
    border-bottom: 1px solid #c5d1d8;
}
.kanban-column {
    background-color: #e7eff3;
    margin: 0px 4px 0px 4px;
    padding: 4px;
    min-width: 200px;
    border-radius: 3px;
}


.rm-block-ref::before {
    content: '';
    display: inline-block;
    width: 2px;
    border-radius: 40px;
    height: 12px;
    background: #FFC107;
    margin-right: 8px;
}
.rm-block-ref {
    border-bottom: none;
    font-size: 1em;
    color: #515e70;
}
.rm-block-ref:hover {
    background: none;
    cursor: pointer;
}
.checkmark {
    background: #fff;
}
.check-container input:checked ~ .checkmark {
    background: #33bdea;
}
.check-container input:checked ~ .checkmark:after {
    border-color: #fff;
}
.rm-reference-item {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #e4e9ee;
    margin-right: 8px;
    flex: 1 1 100%;
    word-break: break-word;
    background-color: #f7f9fb;
    padding: 8px;
}

.rm-level2 {
    font-size: 1.5em;
}
.rm-level3 {
    color: #939aae;
    font-weight: 400;
    font-size: 1.3em;
}
.rm-page-ref {
    color: #9aabd0;
}

/* Change the link color for references */ 

.rm-page-ref-link-color {
    color: #2980b9;
    font-weight: 600;
}

/* Change the link color in queries */

a {
    color: #8e44ad;
}
.intercom-app,
.intercom-launcher-frame,
#intercom-container {
    display: none !important;
}
.roam-body .roam-app .roam-sidebar-container {
    background-color: white;
    border-right: 1px #eee solid;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page,
.roam-body .roam-app .roam-sidebar-container \> * {
    opacity: 80%;
    box-shadow: none;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover {
    background: white;
    color: black;
    opacity: 100%;
}
#buffer.tall {
    height: calc(100vh - 50px) !important;
}
.check-container {
    padding-right: 4px;
}
span.rm-page-ref {
    border-radius: 2px;
    padding-left: 1px;
    padding-right: 1px;
}
.content span.rm-page-ref {
    padding: 4px 1px 1px;
    /* required for fixing azo */
}
.center-proj {
    text-align: center;
}
  • Trying to change the way references look, using the above Leyendecker theme modified by Nat Eliason TurnOff

    • Honestly this is all broken The piece from the Zenith theme was something like this, but it's not working for me. 

      • /* putting in something from the Zenith theme instead*/
.rm-block-ref {
    border-bottom: 2px solid #2196F3, 0.4)
}
.rm-block-ref:hover {
    background-color: rgba(var(--color-primary), 0.2);
}

.rm-alias-block, .rm-alias-block:hover {
    color: rgb(var(--color-primary)) !important;
    font-weight: bold;
  
/* END putting in something from the Zenith theme instead*/
}

    • h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", sans-serif;
    font-size: 3em;
}
div,
textarea {
    font-weight: 400;
    color: #3F4758;
    font-size: 1.002em;
}
.roam-block-container {
    max-width: 1200px;
}

.rm-block-text {
    max-width: 1200px;
}

.rm-pomodoro {
    background: #fff !important;
    color: #ff4747 !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em;
    border: 1px solid #ff474770;
}

.rm-pomodoro {
    background: #ff6956 !important;
    color: #fff !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em;
    border: 1px solid #ed5845;
}

.rm-pomodoro::first-letter {
  margin-right: 8px;
}

.rm-query {
    border: 0.5px solid #e4e9ec;
    border-radius: 5px;
    
}

.rm-query .rm-query-title {
    background-color: #f7f8f8;
    padding: 0.8em;
    color: #d1dbe2;
    font-size: 80%;
}

.rm-reference-main.rm-query-content {
    padding: 0.8em;
}

.rm-reference-main .rm-reference-item .rm-block-text {
    font-size: 90%;
}

.rm-ref-page-view-title span {
    
}

.rm-reference-main .rm-reference-item .controls {
    margin-left: -1em;
}

.rm-ref-page-view {
    padding: 0.4em 0.2em;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page {
    padding: 6px;
}

div.flex-v-box.starred-pages-wrapper \> div.flex-h-box \> span {
    font-size: 14px !important;
    opacity: 80%;
    letter-spacing: 0.04em;
}

div.roam-sidebar-container.noselect \> div \> div {
    font-size: 14px !important;
    letter-spacing: 0.03em;
    
}

#block-input {
    background: white;
}

.roam-body #block-input \> span \> div {
    padding: 6px 24px;
    background: white;
}

span.bp3-icon-small.bp3-icon-star {
    display: none;
    visibility: hidden;
}

.roam-block {
    max-width: 850px;
}

#right-sidebar \> div {
    background-color: #f7f8fa;
    border-left: 1px solid #e9ebef;
}
.controls .simple-bullet-outer .simple-bullet-inner {
    background-color: #e5e9f2;
}
.block-border-left {
    border-left: 1px solid #f3f6f7;
}
.kanban-board {
    background-color: #fff;
}
.kanban-card {
    background-color: white;
    margin: 8px;
    box-shadow: 0px 1px 2px #9eb3c0a8;
    padding: 10px;
    border-radius: 2px;
    line-height: 1.3em;
}
.kanban-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.1em;
    opacity: 80%;
    color: #485f6f;
    padding-top: 8px;
    border-bottom: 1px solid #c5d1d8;
}
.kanban-column {
    background-color: #e7eff3;
    margin: 0px 4px 0px 4px;
    padding: 4px;
    min-width: 200px;
    border-radius: 3px;
}


/*.rm-block-ref::before {
    content: '';
    display: inline-block;
    width: 2px;
    border-radius: 40px;
    height: 12px;
    background: #FFC107;
    margin-right: 8px;
}*/
.rm-block-ref {
    border-bottom: 2 px;
    font-size: 1em;
    color: #1C7541;
}
/*.rm-block-ref:hover {
    background: none;
    cursor: pointer;
}*/

}
.checkmark {
    background: #fff;
}
.check-container input:checked ~ .checkmark {
    background: #33bdea;
}
.check-container input:checked ~ .checkmark:after {
    border-color: #fff;
}
.rm-reference-item {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #e4e9ee;
    margin-right: 8px;
    flex: 1 1 100%;
    word-break: break-word;
    background-color: #f7f9fb;
    padding: 8px;
}

.rm-level2 {
    font-size: 1.5em;
}
.rm-level3 {
    color: #939aae;
    font-weight: 400;
    font-size: 1.3em;
}
.rm-page-ref {
    color: #9aabd0;
}

/* Change the link color for references */ 

.rm-page-ref-link-color {
    color: #2980b9;
    font-weight: 600;
}

/* Change the link color in queries */

a {
    color: #8e44ad;
}
.intercom-app,
.intercom-launcher-frame,
#intercom-container {
    display: none !important;
}
.roam-body .roam-app .roam-sidebar-container {
    background-color: white;
    border-right: 1px #eee solid;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page,
.roam-body .roam-app .roam-sidebar-container \> * {
    opacity: 80%;
    box-shadow: none;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover {
    background: white;
    color: black;
    opacity: 100%;
}
#buffer.tall {
    height: calc(100vh - 50px) !important;
}
.check-container {
    padding-right: 4px;
}
span.rm-page-ref {
    border-radius: 2px;
    padding-left: 1px;
    padding-right: 1px;
}
.content span.rm-page-ref {
    padding: 4px 1px 1px;
    /* required for fixing azo */
}
.center-proj {
    text-align: center;
}
  • Rainbow bullets: (To do - change these colors, find a color scheme somewhere else that's prettier. Don't need such rainbow colors.) TurnOff
    • /* Rainbow indentation */
/* 
Feel free to adjust the colors - this one loops every
7 colors like the rainbow but you can change that to 
cycle earlier or choose more unique colors.
To add deeper indents:
1. Add { \> div.flex-v-box \> div } incrementally to the first line, and
2. Add {\> div.flex-v-box \> div:nth-child(n) } incrementally to the second line
*/
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div {
    border-left-color: #D0CECEAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div,
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #9580FFAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #92FFFFAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #8AFF80AD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #FFFF80AD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #FF9580AD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #FE7FBFAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #DA53EEAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #6600EDAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #0079FFAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #00F11DAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #FFEF00AD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #FF7F00AD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #FF0900AD !important;
}

/* 
Optional border adjustments:
1. You can add a border-radius: 5px or more to get an interesting delineation
2. You can adjust the width of the border but make sure to adjust margin to align the border with the bullets  
*/
.block-border-left {
    border-left-width: 2px !important;
    margin-left: 5px !important;
}
  • Dungeon CSS, for Spatial Roam spatial 
    • /* COSMONAUT dave start */
/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Taviraj:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap');

/* VARIABLES */
:root {
    --header-font: 'Taviraj', serif;
    --body-font: 'Nunito', sans-serif;

    --bg-color: #000000;
    --page-color: rgb(22, 22, 22);

    --text-color: #c5c5c5;
    --icon-color: rgb(102, 102, 102);
    --bullet-color: rgba(255, 255, 255, 0.15);

    --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.25);

    --color-primary: 47, 155, 249;
    --color-primary-contrast: #eee;
    --color-secondary: 133, 85, 200;

    --color-secondary-contrast: #eee;
}

/* CODE BLOCK STYLING */
/* modified from https://codemirror.net/demo/theme.html#night */
.CodeMirror { background: var(--bg-color) !important; color: #f8f8f8 !important; }
div.CodeMirror-selected { background: #447 !important;  }
.CodeMirror-line::selection, .CodeMirror-line \> span::selection, .CodeMirror-line \> span \> span::selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-line::-moz-selection, .CodeMirror-line \> span::-moz-selection, .CodeMirror-line \> span \> span::-moz-selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-gutters { background: var(--bg-color); border-right: 1px solid #252525; }
.CodeMirror-guttermarker { color: white !important; }
.CodeMirror-guttermarker-subtle { color: #bbb !important; }
.CodeMirror-linenumber { color: #f8f8f8; }
.CodeMirror-cursor { border-left: 1px solid white !important; }
span.cm-qualifier { color: #666666 !important; }
span.cm-comment { color: #C71FF9 !important; }
span.cm-atom { color: #B58AFD !important; }
span.cm-number, span.cm-attribute { color: #ffd500 !important; }
span.cm-keyword { color: #599eff !important; }
span.cm-string { color: #37f14a !important; }
span.cm-meta { color: #369BFF !important; }
span.cm-variable-2, span.cm-tag { color: #99b2ff !important; }
span.cm-variable-3, span.cm-def, span.cm-type { color: white !important; }
span.cm-bracket { color: #8da6ce !important; }
span.cm-builtin, pan.cm-special { color: #ff9e59 !important; }
span.cm-link { color: #845dc4 !important; }
span.cm-error { color: #F41000 !important; }
.CodeMirror-activeline-background { background: #1C005A !important; }
.CodeMirror-matchingbracket { outline:1px solid grey !important; color:white !important; }

/* ZENITH dave start */
:root {
    /* dave override */
    --page-order: row;
}

.rm-block-text {
    max-width: unset;
}

#app, body {
    background-color: var(--bg-color) !important;
}

/* hide scrollbars */
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

h1, h2, h3,  h4, h5, h6, h1 \> a, h2 \> a, h3 \> a, h4 \> a, .rm-title-textarea {
    font-family: var(--header-font) !important;
    color: var(--text-color) !important;
}

/* dave override*/
h1.level2, h1.level2 \> a, h2.level2 \> a,
h1.rm-title-display, .rm-title-textarea {
    font-size: 34px !important;
    font-weight: 500 !important;
}
h1.level2, h1.level2 \> a, h2.level2 \> a{
    height: auto !important;
    line-height: 1.5 !important;
}
h1.rm-title-display, .rm-title-textarea {
    margin-left: 20px;
}

.bp3-button.bp3-minimal:hover {
    background: rgba(var(--color-primary), 0.4) !important;
    color: var(--text-color) !important;
}
.bp3-button.bp3-minimal::before, .bp3-button.bp3-minimal *, .bp3-button.bp3-minimal *::before {
    color: var(--icon-color) !important;
}
.bp3-button.bp3-minimal:hover::before, .bp3-button.bp3-minimal:hover *, .bp3-button.bp3-minimal:hover *::before {
    color: var(--text-color) !important;
}

/* dave override */
a {
    color: rgb(var(--color-secondary));
}
/* dave override */
em {

}

div,
textarea {
    font-family: var(--body-font) !important;
    color: var(--text-color) !important;
    /* dave override */
    font-size: 16px;
    font-weight: 300;
}
/* dave override */
h1 \> .roam-block, h1 textarea,
h2 \> .roam-block, h2 textarea,
h3 \> .roam-block, h3 textarea {
    font-weight: 600;
}
h1 strong,
h2 strong,
h3 strong {
    font-weight: 800;
}
h1 .roam-block, h1 textarea {
    font-size: 30px;
}
h2 .roam-block, h2 textarea {
    font-size: 24px;
}
h3 .roam-block, h3 textarea {
    font-size: 20px;
}

.bp3-popover {
    color: var(--color-secondary-contrast) !important;
}

*[class*="bp3-icon"], *[class*="bp3-icon"]::before {
    color: var(--icon-color) !important;
}

.roam-highlight {
    /* dave override */
    background-color: rgba(175, 185, 13, .30)
}

.rm-block-ref {
    border-bottom: 2px solid rgba(var(--color-primary), 0.2)
}
.rm-block-ref:hover {
    background-color: rgba(var(--color-primary), 0.2);
}

.rm-alias-external, .rm-alias-external:hover {
    color: rgb(var(--color-secondary)) !important;
    font-weight: bold;
}

.rm-alias-block, .rm-alias-block:hover {
    color: rgb(var(--color-primary)) !important;
    font-weight: bold;
}

.rm-page-ref, .rm-alias-page, .rm-alias-page:hover {
    color: rgb(var(--color-primary)) !important;
    font-weight: 600; /* dave override */
}

.rm-page-ref-tag {
    color: var(--color-primary-contrast) !important;
    background-color: rgb(var(--color-primary));
    padding: 2px 4px; /* dave override */
    font-size: 14px;
    border-radius: 4px;
    font-weight: 500 !important;
    position: relative;
    top: -1px;
}

.block-highlight-blue {
    background-color: rgba(var(--color-primary), 0.25)
}

.starred-pages a {
    color: rgb(var(--color-primary)) !important;
}

.version-bullet {
    background-color: rgb(var(--color-primary)) !important;
    color: var(--color-primary-contrast) !important;
}

.roam-bullet-closed {
    background-color: var(--bullet-color) !important;
}
.simple-bullet-inner {
    background-color: var(--bullet-color) !important;
}

.rm-saving-icon .rm-synced {
    background-color: rgb(var(--color-primary));
}
.rm-saving-icon .rm-saving-remote {
    background-color: rgb(var(--color-secondary));
}

/* set width and other attributes of pages */
.roam-article {
    padding: 0 !important;
}
.roam-article, #all-pages-search, .sidebar-content \> * {
    /* dave override top margin */
    margin: 30px 0px 100px 0px !important;
    box-sizing: border-box;
    height: auto !important;
}

/* -------------------------- */
/*         PAGE CARDS         */
/* -------------------------- */

.roam-article \> div {
    padding: 20px 50px 30px 40px;
}

.roam-article \> div {
    background: var(--page-color);
    /* position: relative; */
    border-radius: 10px;
}

.roam-article \> div:first-child, .sidebar-content \> * \> * {
    box-shadow: var(--page-shadow);
}

/* set min-width for collapsed sidebar*/
.sidebar-content \> * {
    min-width: 58.5px;
}

.roam-body-main {
    top: 0 !important;
    height: 100% !important;
    width: auto !important;
    /* position: relative !important; */
    padding-left: 50px;
}

.roam-main {
    width: unset !important;
    max-width: 100% !important;
    height: 100%;

    overflow-x: scroll;
    overflow-y: hidden;
    transition: padding-left 0.15s ease-out;
}

/* -------------------------- */
/*       RIGHT SIDEBAR        */
/* -------------------------- */

#right-sidebar {
    display: inline-flex !important;
    vertical-align: top;
    background-color: transparent !important;
    border: none !important;
    flex-direction: row !important;
    padding-right: 100px;
    /*min-height: 100vh;*/
}
/* hide icon to close sidebar */
#right-sidebar \> .flex-h-box {
    display: none;
}

/* spacing and scrolling */
.sidebar-content \> * {
    /* dave override */
    margin: 0 !important;
    overflow-x: visible;
    /*overflow-y: auto !important;*/
    max-height: 100vh;
    /* dave override */
    padding: 30px 0px 100px 20px;

    /* pesky bottom border/outline in chrome won't go away! */
    /* this does not fix it */
    border: none !important;
    outline: none !important;
}
.sidebar-content \> *:last-child {
    padding-right: 20px;
}

.sidebar-content {
    visibility: visible;
    display: flex !important;
    flex-direction: var(--page-order) !important;
    align-items: flex-start; /* allow pages to have their own height */
    justify-content: flex-end;
}

.roam-center \> div:not(.rm-dnd-separator):first-child {
    padding: 0 !important;
}
.roam-body-main \> * {
    display: inline-block;
}

.sidebar-content \> *:not(.rm-dnd-separator) {
    display: block !important;
    margin-bottom: 200px;
    flex-shrink: 0;
}

/* dave override */
.window-headers {
    margin-top: -44px;
    padding: 0px 24px 58px 60px;
}
.window-headers .bp3-button {
    color: var(--icon-color) !important;
}
.window-headers .bp3-popover-wrapper {
    position: relative;
}

.window-headers \> * {
    position: relative;
    top: 56px;
    right: 12px;
}

.bp3-icon-pin {
    display: none;
}

.window-headers + div \> div:first-child {
    margin-top: -35px !important;
    margin-right: -46px !important;
}

/* dave override don't use style selector [style*="margin-left:"][style*="margin-right:"] */
.sidebar-content \> div \> div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    /* dave override margin-bottom: 100px; */
}

.sidebar-content \> *:not(.rm-dnd-separator) \> .flex-h-box {
    display: block !important;

    padding: 15px 10px !important;
}
.sidebar-content \> *:not(.rm-dnd-separator) \> div:not(.rm-dnd-separator) {
    background: var(--page-color);
}
.sidebar-content \> *:not(.rm-dnd-separator) \> div:not(.rm-dnd-separator):first-child {
    border-radius: 10px 10px 0px 0px;
}
.sidebar-content \> *:not(.rm-dnd-separator) \> div:not(.rm-dnd-separator):first-child:last-child {
    border-radius: 10px;
}
.sidebar-content \> *:not(.rm-dnd-separator) \> div:not(.rm-dnd-separator) \> div:last-child:not(:first-child) {
    border-radius: 0px 0px 10px 10px;
    padding-bottom: 50px !important;
}
.sidebar-content \> div:not(.rm-dnd-separator) \> div:not(.rm-dnd-separator):not(.flex-h-box) {
    padding: 0px 50px 0px 40px;
}
.sidebar-content \> div:not(.rm-dnd-separator) \> .flex-h-box \> .bp3-button, #roam-right-sidebar-content .flex-h-box \> .bp3-popover-wrapper {
    margin: auto !important;
    width: 20px !important;
    text-align: center;

}

/* dave override don't use [style*="padding-bottom: 8px"] */
.sidebar-content \> div \> div \> div:last-child {
    padding: 8px 40px !important;
}

/* fix positioning problems with menu icon */
.roam-topbar *[class*="icon-menu"]::before {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}
.roam-topbar .bp3-icon-menu-open::before {
    content: ""; /* prevent menu icon from changing on hover */
}


.window-headers:hover {
    background-color: rgba(var(--color-primary), 0.1);
}

.sidebar-content \> .rm-dnd-separator .rm-dnd-drop-area {
    z-index: 999999999999;
    position: fixed;
    top: 0;
    width: 100% !important;*/
    width: 50px !important;
    height: 100vh !important;
    /*background-color: rgba(255, 0, 0, 0.1) !important;*/

}
.sidebar-content \> div \> .rm-dnd-separator {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100px !important;
}
.sidebar-content \> div \> .rm-dnd-separator .rm-dnd-drop-area {
    position: absolute !important;
    top: 0;
    z-index: 10000;
    height: 100vh !important;
    /*border-left: 20px solid #FF0099 !important;*/
    box-shadow: none;
    /*transform: translateX(-30px);*/
}
.rm-dnd-drop-area {
    position: absolute;
    background-color: rgba(var(--color-primary), 0.1) !important;
    margin-left: -60px !important;
    width: 100px;
    max-width: 100px;
}
.rm-dnd-drop-bar {
    margin-left:-15px;
    width: 10px !important;
    height: 100vh !important;
    background-color: rgba(var(--color-primary), 1) !important;
    box-shadow: 0px 0px 50px rgba(var(--color-primary), 1);

}
.sidebar-content \> .rm-dnd-separator {
    margin-left: -20px;
}
.sidebar-content \> .rm-dnd-separator \> .rm-dnd-drop-area {
    position: absolute;
}


/*.rm-dnd-drop-area::before {
    content: "";
    position: absolute;
    top: 0;
    right: 40px;
    height: 100vh;
    border-right: 10px solid var(--color-primary);
    box-shadow: 0px 0px 100px #FF0000;
}

.rm-dnd-drop-area:-moz-drag-over:before {
    content: "";
    position: absolute;
    top: 0;
    right: 40px;
    height: 100vh;
    border-right: 10px solid #FF0000;
    box-shadow: 0px 0px 100px #FF0000;
}*/

/*.rm-dnd-drop-area:-moz-drag-over {
    background-color: rgba(255, 0, 0, 0.5) !important;
}*/

.ghost {
    opacity: 1;
    background: none;
}

/* -------------------------- */
/*        LEFT SIDEBAR        */
/* -------------------------- */

/* HIDE LOGO*/
#roam-sidebar-logo {
    display: none;
}

.roam-sidebar-content * {
    color: var(--icon-color) !important;
}

.starred-pages \> a \> .page:hover {
    background-color: transparent !important;
    color: rgb(var(--primary-color)) !important;
}
.log-button * {
    /* this did not do what I expected */
    /* but it accomplished what I wanted */
    color: rgb(var(--primary-color)) !important;
}
.log-button {
    background: none !important;
}
.log-button:hover, .log-button:hover * {
    color: var(--text-color) !important;
}
.roam-sidebar-content {
    color: var(--text-color) !important;
}


.roam-topbar {
    opacity: 1 !important;
    background-color: transparent !important;

    margin-top: 70px;
    width: 20px;
    display: inline-block;
    padding-left: 0 !important;
    position: sticky !important;

    left: 0px;
    transition: none !important;
    z-index: 999;

    border: none !important;
}
.roam-sidebar-container \> .roam-sidebar-content::before {
    content: "";
    position: absolute;
    top: -70px; right: -68px;
    width: 400px;
    height: 100vh;
    background: var(--bg-color) !important;
    opacity: 0.7;
    z-index: -1;
}

.roam-sidebar-container {
    border: none !important;
    top: 0px !important;
    bottom: 0px !important;
    padding: 70px 68px 50px 0px;

    visibility: hidden; /* hide background */
    transition: all .25s ease-out;
    width: 300px !important;
    backdrop-filter: blur(4px);
    background: #000000 !important;

    /* fix scrolling */
    overflow-y: auto;
}

.roam-sidebar-container \> .roam-sidebar-content {
    display: block !important;
    height: auto !important;
    visibility: visible; /* show contents */
}
.roam-sidebar-container:not([style*="top: 0px"]) {
    left: -245px !important;
}
/* dave override get rid of opacity animation cause it uses an expensive selector */
.roam-sidebar-container[style*="top: 0px"] + .roam-main {
    padding-left: 250px;
}

/* separator between "ALL PAGES" and "SHORTCUTS" */
/* [style*="background"] */
.starred-pages-wrapper \> div:first-child {
    background: var(--icon-color) !important;
    opacity: 0.5;
  }


/* fix height with absolute positioning of email address */
.roam-sidebar-content \> .flex-h-box {
    height: 40px;
}
.roam-sidebar-content \> .flex-h-box \> * {
    pointer-events: auto;
}
.roam-sidebar-content \> .flex-h-box ~ * {
    pointer-events: all;
}
.roam-sidebar-content \> .flex-h-box \> .flex-h-box {
    position: absolute;
    left: 45px;
    top: 5px;
}

.roam-topbar \> .flex-h-box {
    width: 50px;
    flex-direction: column;
    height: 1px !important;
    align-items: start !important;
    text-align: center;

    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0px;
}
.roam-topbar \> .flex-h-box \> * {
    flex: 0 0 20px !important;
    margin: auto !important;
    max-width: 20px !important;
    max-height: 20px !important;
}
.roam-topbar \> div \>.bp3-button:first-child {
    align-self: start !important;
    position: fixed !important;
    left: 16px;
    top: 78px;
    z-index: 9999999 !important;
}
.roam-topbar \> div \> *:nth-child(2) {
    margin-top:20px !important;
}

.rm-reference-item {
    /* dave override */
    background-color: transparent !important;
    padding: 0 !important;
    font-size: 13px !important;
}

/* dave override */
.rm-ref-page-view {
    background-color: #ffffff0a;
    padding: 12px 0px;
    margin: 12px 0px;
    border-radius: 4px;
}

.rm-ref-page-view-title a {
    color: #000000;
    font-weight: bold;
}

/* SOME BLACKMAGIC TO GET SEARCH ICON TO FUNCTION LIKE OTHER BUTTONS */

.roam-topbar .bp3-icon-search {
    padding: 4px;
    border-radius: 3px;
    margin: 0 !important;
    cursor: pointer;
}

/* style contains `200px` if search bar is NOT selected */
/* hovering search bar in this mode == hovering icon itself */
/* we must however have the search bar in front of the icon (but invisible) so that it can focus on click */
/* very hacky :P */
.rm-find-or-create-wrapper[style*="200px"]:hover .bp3-icon-search, .roam-topbar .bp3-icon-search:hover {
    background-color: rgba(var(--color-primary), 0.4);
    color: var(--text-color) !important;
}
.roam-topbar .bp3-icon-search svg { padding: 1px; }
/* fix centering on calendar icon */
.roam-topbar .bp3-icon-calendar { margin: 0 !important }

.rm-find-or-create-wrapper {
    width: 20px !important;
}
.rm-find-or-create-wrapper .bp3-overlay {
    position: fixed;
    top: 50px;
    left: calc(50% - 325px);
    width: 650px;
}

.roam-body-main {
    display: block;
}




/* -------------------------- */
/*       POPOVER STYLES       */
/* -------------------------- */

.bp3-menu-divider {
    border-color: rgba(255, 255, 255, 0.25) !important;
}
.bp3-text-small {
    color: var(--text-color) !important;
    opacity: 0.6;
}


.bp3-transition-container {
    /* not very good at these z-indexes huh? */
    z-index: 9999999999 !important;
}
.bp3-popover {
    min-width: 230px; /* fix width */
    pointer-events: none; /* prevent from getting in the way of hover*/
}
.bp3-popover .bp3-menu, .bp3-popover .bp3-popover-content {
    pointer-events: auto;
    background-color: var(--page-color) !important;
}

.bp3-popover .bp3-button {
    background: transparent !important;
    color: rgb(var(--color-primary)) !important;
    padding: 4px 14px !important;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em !important;
    border: 1px solid rgba(var(--color-primary), 0.5) !important;
    box-shadow: none !important;
}
.bp3-popover .bp3-button:hover {
    background: rgba(var(--color-primary), 0.2) !important;
}

.bp3-popover .bp3-popover-arrow svg * {
    fill: var(--page-color);
}

#app .bp3-popover .bp3-popover-arrow svg * {
    fill: rgb(var(--color-secondary));
    fill: var(--page-color);
}

body \> .bp3-portal .bp3-menu {
    background-color: var(--page-color) !important;
}
body \> .bp3-portal .bp3-popover-content, body \> .bp3-portal .bp3-popover-content * {
    color: var(--text-color) !important;
}

/*
body \> .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] {
    background-color: rgb(var(--color-primary)) !important;
    color: var(--color-secondary-contrast) !important;
}
body \> .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] \> span::before, body \> .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] * {
    color: var(--color-secondary-contrast) !important;
}
*/
body \> .bp3-portal .bp3-menu-divider {
    border-color: rgba(0, 0, 0, 0.2) !important;
}
body \> .bp3-portal .bp3-text-small {
    color: rgba(0, 0, 0, 0.5) !important;
}

.emoji-mart {
    border: none !important;
}


/* -------------------------- */
/*      EMBEDDING BLOCKS      */
/* -------------------------- */
.rm-embed-container{
    background-color:var(--page-color) !important;
}

/* -------------------------- */
/*         SEARCH BAR         */
/* -------------------------- */

#find-or-create-input {
    opacity: 0;
    z-index: 10000; /* bring in front of icon to keep clickable */
    cursor: pointer;
}

/*#find-or-create-input:active, */#find-or-create-input:focus {
    opacity: 1;
    position: fixed;
    width: 600px;
    top: 100px;
    left: calc(50% - 600px / 2);
    cursor: text;
}


#find-or-create-input {
    border-radius: 10px 10px 0px 0px;
    font-size: 18px;
    padding: 20px 20px;
}
/* if input is empty (no menu) then use all-around border-radius*/
#find-or-create-input[value=""] {
    border-radius: 10px;
}

/* highlight around search box */
#find-or-create-input:focus {
    box-shadow: 0 0 0 1px rgb(var(--color-primary)), 0 0 0 3px rgba(var(--color-primary), 0.3), inset 0 1px 1px rgba(16,22,26, 0.2);
}

/* styling dropdown menu*/
.rm-find-or-create-wrapper .bp3-popover {
    border-radius: 0px 0px 10px 10px;
    overflow: hidden;
    background: var(--page-color);
    backdrop-filter: blur(5px);
}

/* prevent coloured menu */
.rm-find-or-create-wrapper .bp3-popover-content, .rm-find-or-create-wrapper .bp3-menu {
    background-color: transparent !important;
}

/* properly position search menu overlay */
.rm-find-or-create-wrapper .bp3-overlay {
    top: 142px;
    width: 600px;
    left: calc(50% - 300px);
    z-index: 999999;
}

/* new page text */
.rm-find-or-create-wrapper .rm-new-page {
    color: rgb(var(--color-primary)) !important;
}


.roam-block-container .bp3-elevation-3 {
    background: var(--page-color) !important;
    left: unset !important;
}

/* selected search result */
/* dave override move style earlier */
.rm-find-or-create-wrapper [style*="background"].rm-menu-item {
    background-color: rgb(65, 65, 65) !important;
}

/* shadow on regular search */
.bp3-overlay-open .bp3-popover {
    box-shadow: 0px 0 2px 2px rgb(0 0 0 / 0.6), 0 2px 4px rgb(0 0 0 / 0%), 0 8px 24px rgb(16 22 26 / 0%)
}

/* search results highlighted words */
/* [style*="yellow"] */
.roam-block-container [style*="background"].dont-unfocus-block,
.rm-search-list-item \> span \> span {
    background-color: rgba(var(--color-primary), 0.4) !important;
    color: var(--text-color);
}

.bp3-input {
    background-color: var(--page-color) !important;
    color: var(--text-color) !important;
}
.bp3-input::placeholder {
    background-color: var(--page-color) !important;
    color: var(--text-color) !important;
    opacity: 0.3;
}

.rm-search-list-item {
    color: var(--text-color) !important;
    opacity: 0.6;
}

/* -------------------------- */
/*       DATE PICKER          */
/* -------------------------- */

.bp3-datepicker{
    background-color:var(--page-color);
}

.DayPicker-Day:hover{
    background: rgb(var(--color-primary)) !important;
}


/* -------------------------- */
/*       SEARCH PAGE          */
/* -------------------------- */

#all-pages-search {
    max-height: calc(100% - 50px);
    overflow-y: auto;
    padding-bottom: 100px !important;
}
#all-pages-search \> div {
    padding: 0 !important;
}
.rm-pages-row-header {
    background-color: rgba(var(--color-primary), 0.4) !important;
    color: var(--color-secondary-contrast) !important;
    border: none !important;
}
.rm-pages-row[style] .bp3-icon::before {
    margin-left: 5px;
    color: var(--color-secondary-contrast) !important;
}
.rm-pages-row-highlight {
    background-color: var(--page-color);
}
.rm-pages-row[style] .rm-pages-action-col {
    color: transparent !important;
}
/* use wrench icon for actions header rather than "AC..." */
.rm-pages-row[style] .rm-pages-action-col::before {
    font-family: "Icons16";
    content: "";
    color: var(--color-secondary-contrast);
    position: absolute;
    margin-left: 10px;
}

/* style new page button */
.bp3-intent-success {
    color: rgb(var(--color-primary)) !important;
}
.bp3-intent-success:hover {
    background-color: rgba(73, 197, 91, 0.2) !important;
}
.bp3-intent-success:active {
    background-color: rgba(73, 197, 91, 0.4) !important;
}

/* new search page */

.bp3-control-indicator {
    background-color: var(--page-color) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--color-primary), 0.6) !important;
}

.bp3-control input:checked ~ .bp3-control-indicator {
    background-color: rgb(var(--color-primary)) !important;
    box-shadow: none !important; /* sliders */
}
.bp3-checkbox \> input:checked ~ .bp3-control-indicator::before {
    width: 0.9em !important;
    height: 0.9em !important;
}

.rm-clickable-pill {
    background-color: rgba(var(--color-primary), 0.4) !important;
}
.rm-clickable-pill.empty-pill {
    background-color: var(--page-color) !important;
}

.rm-pages-col-word-count \> div \> span:first-child,
.rm-pages-col-word-count + div \> div \> span:first-child{
    display: none
}
/*.rm-pages-col-word-count \> div \> .sorting-button-group::before {
    content: "WORDS";
    font-size: 0.8em;
}
.rm-pages-col-word-count + div \> div \> .sorting-button-group::before {
    content: "REFS";
    font-size: 0.8em;
}*/
.sorted-header-text {
    color: var(--text-color) !important;
}

.rm-pages-row .rm-pages-col {
    flex: 0 0 60px !important;
}
.rm-pages-row .rm-pages-col:nth-last-child(1),
.rm-pages-row .rm-pages-col:nth-last-child(2){
    flex: 0 0 140px !important;
}

.sort-button::before {
    color: var(--text-color) !important;
}
.sort-button.focused::before {
    color: rgb(var(--color-primary)) !important;
}

.rm-pages-row {
    border-bottom: none !important;
}
.rm-pages-row:nth-child(2n+1) {
    background-color: rgba(var(--color-primary), 0.15);
    border-radius:3px;
}

/* fix width change on border */
.rm-all-pages .bp3-input {
    border: 1px solid transparent;
}

.rm-all-pages .bp3-input.focused {
    border: 1px solid rgb(var(--color-primary)) !important;
}

/* -------------------------- */
/*           MISC             */
/* -------------------------- */

/* better caret positioning in linked references */
.bp3-icon-caret-down::before {
    color: var(--bullet-color) !important;
}
.bp3-icon-caret-down {
    display: inline-block !important;
    /*margin-bottom: 8px;*/
    /* fix positioning when rotated 90 deg */
    /*transform-origin: 9px 13px;*/

}

/* SLIDER */

.bp3-intent-primary {
    background-color: rgb(var(--color-primary)) !important;
}
.bp3-slider-handle {
    border-radius: 10px;
}


/* QUERY */

.rm-query {
  border: 0.5px solid #38332e;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-radius: 10px;
}

.rm-query .rm-query-title {
  background-color: #38332e;
  font-size: .8em;
}

/* CHECKBOX */

.check-container {
    padding-right: 2px;
    vertical-align: text-bottom;
    top: -5px;
}

.check-container .checkmark {
    width: 14px;
    height: 14px;
}
.check-container .checkmark::after {
    left: 4.5px;
    top: 1px;
}
.check-container input[checked] + .checkmark {
    background-color: rgb(var(--color-primary)) !important;
}

blockquote {
    font-size: 14px;
    border-color: var(--bullet-color);
    opacity: 0.5;
}

code { /* dave override */
    background: #ffffff1c;
    border: none;
    color: var(--text-color);
    padding: 2px 5px;
    line-height: 0.5;
}

.block-border-left {
    /* dave override */
    border-color: var(--bullet-color);
}


/* help button / popup */
#buffer {
    background: transparent !important;
    right: 7px !important;
    bottom: 10px !important;
}
#buffer .bp3-popover-target \>.bp3-button {
    background: rgba(0, 0, 0, 0.1);
    height: 30px;
    width: 30px;
}
#buffer \> div {
    z-index: 99999 !important;
    background: rgb(var(--color-secondary), 0.7) !important;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 2px 8px 8px 8px;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.1)
}
#buffer \> div .bp3-button::before {
    color: #FFFFFF !important;

}
#buffer .help-title {
    color: var(--color-secondary-contrast) !important;
}
#buffer .help-sub-title {
    color: var(--color-secondary-contrast) !important;
    opacity: 0.5;
}
#buffer span {
    color: rgba(255, 255, 255, 0.8) !important;
}
#buffer a {
    text-decoration: underline;
    color: var(--color-secondary-contrast) !important;
}
#buffer a:hover {
    opacity: 0.5;
}


/* ------------- Red Pomodoro ------------- */
/* credit: https://github.com/theianjones/roam-research-themes/blob/master/pomodoros.css */
.rm-pomodoro {
  background: transparent !important;
  color: #ff4747 !important;
  padding: 4px 14px;
  line-height: 2em;
  font-weight: 600;
  border-radius: 2em;
  border: 1px solid #ff474770;
}

.rm-pomodoro::first-letter {
  margin-right: 8px;
}


/* BUTTON */
.block-bullet-view .bp3-button:not([class*="bp3-icon"]) {
    background: transparent !important;
    color: rgb(var(--color-primary)) !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em !important;
    border: 1px solid rgba(var(--color-primary), 0.5) !important;
    box-shadow: none !important;
}
.block-bullet-view .bp3-button:hover {
    background: rgba(var(--color-primary), 0.2) !important;

}

/* KANBAN */
.kanban-board {
    background-color: transparent;
    padding: 0;
    max-width: 500px;
}
.kanban-title {
    background: rgb(var(--color-primary));
    color: var(--color-primary-contrast) !important;
    font-weight: bold;
    padding: 0px !important;
    max-height: 30px;
    border: none;
    display: flex;
    align-items: center;
}
.kanban-title \> span {
    display: block;
    margin: auto;
}
.kanban-column {
    border-radius: 10px;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
    padding: 0;
    overflow: hidden;
}
.kanban-card {
    border-radius: 10px;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
}
.kanban-card {
    background-color: var(--page-color);
    margin: 8px;
    box-shadow: 0px 1px 2px #9EB3C0;
    padding: 10px;
    border-radius: 4px;
    line-height: 1.3em;
}
.kanban-column {
    background-color: ;
    margin: 0px 4px 0px 4px;
    min-width: 200px;
    border-radius: 6px;
}

/* ASTROLABE */

/* Breathing Loader */
/* https://codepen.io/Mathi_C/pen/mMWaaW */
.loading-astrolabe {
    height: 100px;
    width: 100px;
    border-radius: 200px;
    margin: auto;

}

.loading-astrolabe {
    animation-name: orb_1;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

@keyframes orb_1 {
    from {
        transform: scale(0.2);
        background: rgb(var(--color-secondary));
    }
    to {
        transform: scale(2);
        background: rgb(var(--color-primary));
    }
}

/* Hide original loader */
.loading-astrolabe img {
    display: none;
}

.bp3-spinner {
    visibility: hidden;
}
.bp3-spinner \> * {
    visibility: visible;
}

.bp3-spinner-head {
    stroke: rgb(var(--color-primary)) !important;
}








.roam-center \> div \> div \> div svg :not(.katex) {
    background-color: var(--bg-color) !important;
}

/* fix specific popover sizes and positions... */

.roam-topbar .bp3-popover-wrapper:nth-child(6) .bp3-popover,
.roam-topbar .bp3-popover-wrapper:nth-child(7) .bp3-popover{
    width: 600px;
    max-width: calc(100vw - 20px);
}
#roam-right-sidebar-content \> div .flex-h-box \> .bp3-popover-wrapper .bp3-transition-container {
    transform: translate3d(-15px, 41px, 0px) !important;
}
#roam-right-sidebar-content \> div .flex-h-box \> .bp3-popover-wrapper .bp3-transition-container .bp3-popover-arrow {
    left: 10px !important;
}
/* -------------------------- */
/*         MOBILE             */
/* -------------------------- */



@media only screen and (max-width: 600px) {
    .roam-topbar {
        margin: 0px !important;
        padding: 10px 0px 0px 0px !important;
        width: 100%;
        justify-content: center;
        position: fixed !important;
        top: 0px;
        left: 0px;
        backdrop-filter: blur(5px);
    }
    .roam-topbar::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: var(--bg-color) !important;
        opacity: 0.7;

    }
    .roam-topbar \> .flex-h-box {
        flex-direction: row;
        height: 1px !important;
        align-items: start !important;
        text-align: center;

        /*position: -webkit-sticky !important;
        position: fixed !important;
        left: 0px;
        top: 0;*/
        position: relative !important;
        width: 300px !important;
        margin: auto;
        justify-content: space-evenly;
    }
    .roam-topbar \> div \>.bp3-button:first-child {
        position: static !important;
    }

    .roam-sidebar-container {
        padding-right: 0;
        width: 232px !important;
    }
    .roam-sidebar-container \> .roam-sidebar-content::before {
        right: 0px !important;
    }

    .roam-body-main {
        padding-left: 0 !important;
    }

    #find-or-create-input {
        max-width: calc(100% - 20px);
        left: 10px !important;
    }

    .roam-article,
    .rm-all-pages \> .table,
    .rm-all-pages \> .table \> div {
        max-width: calc(100vw - 20px) !important;
        min-width: calc(100vw - 20px) !important;
        width: calc(100vw - 20px) !important;
    }
    .rm-all-pages \> .table {
        margin-left: 10px;
        margin-right: 10px;
    }
    .roam-article {
        margin: 50px 10px !important;
        margin-bottom: 100px !important;
    }
    .roam-article \> div {
        padding: 30px 30px 30px 20px;
    }

    .rm-title-display, .rm-title-textarea {
        margin-left: 0 !important;
    }
    #roam-right-sidebar-content \> div .bp3-icon-minus + * {
            margin: 30px 10px 5px 30px !important;
    }

    .roam-topbar \> div \> *:nth-child(2) {
        margin-top: 0 !important;
    }

    #right-sidebar {
        padding-right: 10px !important;
    }

    .rm-find-or-create-wrapper .bp3-transition-container {
        position: fixed !important;
        max-width: calc(100vw - 20px);
        top: 142px !important;
        left: 10px !important;
    }
}

#mobile-capture {
    height: 100vh !important;
    background-color: var(--bg-color) !important;
}

#mobile-capture textarea, #mobile-capture input {
    background-color: var(--page-color) !important;
}
#mobile-capture textarea::placeholder, #mobile-capture input::placeholder {
    color: var(--text-color) !important;
    opacity: 0.3
}
#mobile-capture textarea {
    margin-top: 10px;
}

#rm-mobile-bar {
    max-width: 100vw;
    background-color: rgb(var(--color-secondary)) !important;
    position: fixed !important;
    z-index: 999999;
}
#rm-mobile-bar .bp3-button {
    vertical-align: top;
    margin: 5px 0px !important;

}
#rm-mobile-bar .bp3-button::before, #rm-mobile-bar .bp3-button i::before {
    color: var(--color-secondary-contrast) !important;
}


.rm-find-or-create-wrapper .bp3-transition-container {
    transform: none !important;
}


/* ROAM dave start */
.rm-page-ref .rm-page-ref {
    font-style: italic;
}

.rm-page-ref .rm-page-ref:hover {
    text-decoration: overline;
}

#buffer {
    display: none !important;
}

.bp3-elevation-3 {
    box-shadow: 0px 0 2px 2px rgb(0 0 0 / 0.6), 0 2px 4px rgb(0 0 0 / 0%), 0 8px 24px rgb(16 22 26 / 0%);
}

.checkmark {
    top: -3px;
}

.parent-path-wrapper {
    opacity: 0.5;
}

b, strong {
    font-weight: 700;
}

.rm-ref-page-view-title a {
    font-weight: 600 !important;
    font-size: 18px;
    color: rgb(var(--color-primary)) !important;
}


.roam-toolkit-block-mode--highlight {
    background-color: #ffba4a2b !important;
}

.block-highlight-yellow {
    background: #ffff0008;
    border: 1px solid yellow;
}

.roam-toolkit--hint::after {
    font-size: 11px;
    font-style: italic;
    font-weight: 600;
    color: #ff9220;
    text-shadow: 0px 0px 3px black;
    opacity: 0.65;
    z-index: 999;
}

.roam-log-container .roam-log-page {
    border-top: 1px solid #444;
}

.rm-inline-references {
    background: var(--page-color);
}

/* Scroll per card */
#roam-right-sidebar-content {
    overflow: visible;
}

.sidebar-content \> div {
    overflow: scroll;
}

.sidebar-content \> div \> div {
    border-bottom: none !important;
}

/* Content Types */
:root {
  --white: #eee;
}

span[data-link-title*='P: '] .rm-page-ref,
span.rm-page-ref[data-tag*='P: '] {
  /* Projects */
  border-radius: 3px;
  background: #df813c !important;
  color: var(--white) !important;
  padding: 2px 4px;
  font-weight: 500;
}

span[data-link-title*='R: '] .rm-page-ref,
span.rm-page-ref[data-tag*='R: '] {
  /* Resources */
  border-radius: 3px;
  background: #8255e8 !important;
  color: var(--white) !important;
  padding: 2px 4px;
  font-weight: 500;
  position: relative;
}

span[data-link-title*='Q: '] .rm-page-ref,
span.rm-page-ref[data-tag*='Q: '] {
  /* Questions */
  border-radius: 3px;
  background: #1ba2ac !important;
  color: var(--white) !important;
  padding: 2px 4px;
  font-weight: 500;
  position: relative;
}

span[data-link-title*='A: '] .rm-page-ref,
span.rm-page-ref[data-tag*='A: '] {
  /* Article for specific audience */
  border-radius: 3px;
  background: #a9bb52;
  color: var(--white) !important;
  padding: 2px 4px;
  font-weight: 500;
}

span[data-link-title*='M: '] .rm-page-ref,
span.rm-page-ref[data-tag*='M: '] {
  /* Opinions */
  border-radius: 3px;
  background: #53b0e1 !important;
  color: var(--white) !important;
  padding: 2px 4px;
  font-weight: 500;
}

/* Control Plane */
span[data-link-title='Choice'] .rm-page-ref,
span.rm-page-ref[data-tag='Choice'] {
  background: #dac5ff !important;
  color: #8b53bf !important;
}

/* Priorities */
span.rm-page-ref[data-tag='p1'] {
  border-radius: 3px;
  background: #ff7a4b !important;
  color: var(--white) !important;
}


span.rm-page-ref[data-tag='p0'] {
  border-radius: 3px;
  background: #ff5683 !important;
  color: var(--white) !important;
}


/* Spatial Mode */
.roam-toolkit--panel {
    background: var(--page-color) !important;
}

.roam-toolkit--panel::-webkit-scrollbar {
    width: 3px !important;
    background: transparent !important; /* Chrome/Safari/Webkit */
}
.roam-toolkit--panel::-webkit-scrollbar-thumb {
    width: 3px !important;
    background: rgba(255, 255, 255, 0.25);

}
  • Rainbow bullets customized: 
    • /* Rainbow indentation */
/* 
Feel free to adjust the colors - this one loops every
7 colors like the rainbow but you can change that to 
cycle earlier or choose more unique colors.
To add deeper indents:
1. Add { \> div.flex-v-box \> div } incrementally to the first line, and
2. Add {\> div.flex-v-box \> div:nth-child(n) } incrementally to the second line
*/
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div {
    border-left-color: #D0CECEAD !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div,
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #4b7bec !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #45aaf2 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #8854d0 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #778ca3 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #2d98da !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #0fb9b1 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #4b7bec !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #45aaf2 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #8854d0 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #778ca3 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #2d98da !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #0fb9b1 !important;
}
#rm-log-container \> div \> div \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div:nth-child(n),
.flex-v-box \> div:nth-child(n) \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div \> div.flex-v-box \> div {
    border-left-color: #4b7bec !important;
}

/* 
Optional border adjustments:
1. You can add a border-radius: 5px or more to get an interesting delineation
2. You can adjust the width of the border but make sure to adjust margin to align the border with the bullets  
*/
.block-border-left {
    border-left-width: 2px !important;
    margin-left: 5px !important;
}
  • Better Roam Research switches automatically light/dark modes - edited version, doesn't update automatically TurnOff

    • Tweaked slightly to work with scope highlighting. The subtle-border-color for the left border is lighter, in the :root part; and I took off the !important tag on that so it doesn't override the scope highlighting. 

    • :root {
  --font-size: 15.5px;
  --border-color: rgba(0, 0, 0, 0.08);
  --subtle-border-color: rgba(0, 0, 0, 0.10);
  --main-background-color: hsl(210, 9%, 98%);
  --body-background-color: #ffffff;
  --reference-item-background: hsl(0, 0%, 99%);
  --brackets-color: rgba(0, 0, 0, 0.25);
  --empty-text-color: hsl(203, 12%, 75%); }

.rm-title-untitled,
#block-input-ghost \> span,
textarea::placeholder {
  color: var(--empty-text-color) !important; }

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

iframe {
  border: none !important; }

.loading-astrolabe {
  position: absolute !important;
  width: 80px !important;
  height: 80px !important;
  opacity: 0.3 !important;
  top: calc(50% - 40px) !important;
  left: calc(50% - 40px) !important; }

#roam-sidebar-logo {
  display: none !important; }

body,
#app {
  background: var(--main-background-color) !important; }

.roam-center {
  border-left: 1px solid var(--border-color) !important;
  border-top: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  border-radius: 6px;
  box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
  background: var(--body-background-color) !important;
  margin-top: 10px;
  margin-right: 16px;
  margin-left: 16px; }
  .roam-center \> div:first-child {
    padding-right: calc(0.5 * (100% - 820px)) !important;
    padding-left: calc(0.5 * (100% - 820px)) !important; }

.roam-topbar {
  background: var(--main-background-color) !important; }
  .roam-topbar input#find-or-create-input {
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important; }

.roam-body,
.roam-topbar,
#right-sidebar,
.roam-sidebar-container {
  background: transparent !important; }

#right-sidebar {
  border: none !important;
  transition: none !important;
  overflow: hidden !important; }
  #right-sidebar h1 {
    font-size: 18px !important; }
  #right-sidebar #roam-right-sidebar-content \> div[style] {
    border-bottom: 1px solid var(--subtle-border-color) !important; }
  #right-sidebar .hoverparent,
  #right-sidebar .react-resizable {
    max-width: 100% !important; }
    #right-sidebar .hoverparent img,
    #right-sidebar .react-resizable img {
      max-width: 100% !important; }

.rm-page-ref-tag {
  color: #9099a1 !important; }

span.checkmark {
  top: -2px; }

.rm-level1 div,
.rm-level1 textarea {
  font-size: 22px !important;
  line-height: 1.5 !important; }

.rm-level2 div,
.rm-level2 textarea {
  font-size: 20px !important;
  line-height: 1.5 !important; }

.rm-level3 div,
.rm-level3 textarea {
  font-size: 18px !important;
  line-height: 1.5 !important; }

.level2 {
  font-weight: inherit !important; }

.roam-log-container .roam-log-page {
  border-top: 1px solid var(--subtle-border-color) !important; }
  .roam-log-container .roam-log-page:first-child {
    min-height: 0 !important;
    border-top: none !important; }

.rm-reference-item {
  background: var(--reference-item-background) !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 6px !important;
  padding: 8px 10px 8px 2px !important; }
  .rm-reference-item .rm-block-text {
    font-size: var(--font-size) !important; }

.CodeMirror {
  font-size: 13px !important; }

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover,
.roam-body
.roam-app
.roam-sidebar-container
.roam-sidebar-content
.starred-pages-wrapper
.starred-pages
.page:hover {
  color: inherit !important;
  background-color: transparent !important; }

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper,
.roam-body
.roam-app
.roam-sidebar-container
.roam-sidebar-content
.starred-pages-wrapper
.starred-pages
.page,
.bp3-minimal \> div {
  color: #666666 !important;
  font-size: 13px !important; }

.roam-sidebar-content {
  padding: 0 !important; }
  .roam-sidebar-content \> div:not(.log-button):not(:first-child) {
    padding: 0 !important; }
  .roam-sidebar-content \> div:first-child {
    padding-bottom: 18px !important; }

.starred-pages-wrapper \> div:first-child {
  display: none; }
.starred-pages-wrapper .flex-h-box,
.starred-pages-wrapper .flex-h-box span {
  font-size: 13px !important;
  opacity: 0.6 !important; }

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
.roam-body
.roam-app
.roam-sidebar-container
.roam-sidebar-content
.starred-pages-wrapper
.starred-pages
.page {
  padding: 6px 24px 6px !important; }

.bp3-icon-small {
  padding-left: 24px !important; }

.rm-block-text {
  max-width: 640px !important;
  font-size: var(--font-size) !important; }

.block-bullet-view {
  margin-bottom: 3px !important; }

.roam-article \> div \> div h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  height: auto !important;
  line-height: 1.5 !important; }

.rm-title-display,
.rm-title-textarea {
  height: auto !important;
  line-height: 1.5 !important; }

.roam-log-container .roam-log-preview h1 {
  font-size: 22px !important;
  font-weight: 700 !important; }

strong {
  font-weight: 700 !important; }

/* Taking this out, to try and get the scope highlighting back
It works - but now the left border is super faint. Not sure how to get it to be there,
but not block the scope highlighting. 
It might have something to do with this !important thing.
Going to try taking just that part out. 

Okay - definitely has something to do with the important thing.
But it's still not super visible. 
.block-border-left {
  border-left-color: var(--subtle-border-color) !important; }
*/

.block-border-left {
  border-left-color: var(--subtle-border-color); }


.rm-reference-main div \> strong {
  color: gray !important; }

@media (prefers-color-scheme: dark) {
  body {
    background: #171717 !important; }

  #app {
    filter: invert(1) hue-rotate(180deg) !important; }

  img,
  div#buffer,
  .bp3-portal,
  .intercom-app,
  .loading-astrolabe,
  .bp3-dialog,
  .twitter-tweet,
  iframe {
    filter: invert(1) hue-rotate(180deg) !important; }

  .roam-highlight {
    background-color: #e2cb47 !important; }

  .bp3-overlay-backdrop {
    background-color: rgba(255, 255, 255, 0.7) !important; }

  :root {
    --border-color: rgba(0, 0, 0, 0.07) !important;
    --subtle-border-color: rgba(0, 0, 0, 0.05) !important;
    --main-background-color: hsl(0, 0%, 96%) !important;
    --body-background-color: hsl(0, 0%, 90%) !important;
    --reference-item-background: hsl(0, 0%, 93%) !important;
    --brackets-color: rgba(0, 0, 0, 0.3) !important;
    --empty-text-color: hsl(203, 5%, 70%); } }
  • Better Roam Research, updates from Github, Not edited.
    • @import url('https://linuz90.github.io/better-roam-research/main.css');
  • Zenith TurnOff 
    • /* IMPORT CORE THEME */
@import url('https://azlen.github.io/roam-themes/core.css');

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 

:root { 
    --page-width: 616px;
    --page-order: row-reverse; /* new pages show up to the right */
    /*--page-order: row; /* new pages show up to the left */
    
    --header-font: "Source Sans Pro", "Inter", sans-serif;  
    --body-font: "Source Sans Pro", "Inter", sans-serif;    
        
    --bg-color: #EEEEEE;    
    --page-color: rgba(255, 255, 255, 0.95);    
        
    --text-color: #000000;  
    --icon-color: #5c7080;
    --bullet-color: rgba(0, 0, 0, 0.2); 
        
    --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);    
        
    --color-primary: 73, 197, 91;   
    --color-primary-contrast: #FFFFFF;  
    --color-secondary: 147, 100, 235;

    --color-secondary-contrast: #FFFFFF;    
}

/* CHANGE COLOURS IN CANVAS */
canvas[data-id="layer2-node"] { 
    filter: invert(1) hue-rotate(110deg) saturate(2.5); 
}
  • Cosmonaut theme TurnOff 
    • /* IMPORT CORE THEME */
@import url('https://azlen.github.io/roam-themes/core.css');

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* VARIABLES */
:root {
    --page-width: 616px;
    
    --header-font: "Oxanium", "Inter", sans-serif;
    --body-font: "Ubuntu", "Inter", sans-serif;
    
    --bg-color: #000000;
    --page-color: rgba(44, 44, 44, 0.95);
    
    --text-color: #FFFFFF;
    --icon-color: rgb(102, 102, 102);
    --bullet-color: rgba(255, 255, 255, 0.3);
    
    --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.25);
    
    --color-primary: 47, 155, 249;
    --color-primary-contrast: #FFFFFF;
    --color-secondary: 228, 78, 244;
    
    --color-secondary-contrast: #FFFFFF;
}

/* CHANGE COLOURS IN CANVAS */
canvas[data-id="layer2-node"] {
    filter: invert(1) contrast(1.1) hue-rotate(180deg) saturate(2);
}

/* CODE BLOCK STYLING */
/* modified from https://codemirror.net/demo/theme.html#night */
.CodeMirror { background: var(--bg-color) !important; color: #f8f8f8 !important; }
div.CodeMirror-selected { background: #447 !important;  }
.CodeMirror-line::selection, .CodeMirror-line \> span::selection, .CodeMirror-line \> span \> span::selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-line::-moz-selection, .CodeMirror-line \> span::-moz-selection, .CodeMirror-line \> span \> span::-moz-selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-gutters { background: var(--bg-color); border-right: 1px solid #252525; }
.CodeMirror-guttermarker { color: white !important; }
.CodeMirror-guttermarker-subtle { color: #bbb !important; }
.CodeMirror-linenumber { color: #f8f8f8; }
.CodeMirror-cursor { border-left: 1px solid white !important; }
span.cm-qualifier { color: #666666 !important; }
span.cm-comment { color: #C71FF9 !important; }
span.cm-atom { color: #B58AFD !important; }
span.cm-number, span.cm-attribute { color: #ffd500 !important; }
span.cm-keyword { color: #599eff !important; }
span.cm-string { color: #37f14a !important; }
span.cm-meta { color: #369BFF !important; }
span.cm-variable-2, span.cm-tag { color: #99b2ff !important; }
span.cm-variable-3, span.cm-def, span.cm-type { color: white !important; }
span.cm-bracket { color: #8da6ce !important; }
span.cm-builtin, pan.cm-special { color: #ff9e59 !important; }
span.cm-link { color: #845dc4 !important; }
span.cm-error { color: #F41000 !important; }
.CodeMirror-activeline-background { background: #1C005A !important; }
.CodeMirror-matchingbracket { outline:1px solid grey !important; color:white !important; }
  • Nested tags TurnOff 
    • :root {
    --custom-background-color: lightsteelblue;
    --custom-background-color-hover: orange;
    }


.rm-page-ref-link-color{
   color:black !important;
    background: linear-gradient(0deg, var(--custom-background-color) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
    line-height: 24px;
    padding-bottom: 4px;
}

.rm-page-ref-link-color:hover{
   color:black !important;
    background: linear-gradient(0deg, var(--custom-background-color-hover) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
    text-decoration: none;
    line-height: 24px;
    padding-bottom: 4px;
}

.rm-page-ref-link-color .rm-page-ref-link-color {
color: black !important;
  background: linear-gradient(0deg, var(--custom-background-color) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 28px;
    padding-bottom: 8px;
}

.rm-page-ref-link-color .rm-page-ref-link-color:hover {
color: black !important;
  background: linear-gradient(0deg, var(--custom-background-color-hover) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 28px;
    padding-bottom: 8px;
}


.rm-page-ref-link-color .rm-page-ref-link-color .rm-page-ref-link-color {
color: black !important;
background: linear-gradient(0deg, var(--custom-background-color) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 32px;
    padding-bottom: 12px;
}


.rm-page-ref-link-color .rm-page-ref-link-color .rm-page-ref-link-color:hover {
color: black !important;
background: linear-gradient(0deg, var(--custom-background-color-hover) 2px, white 1px, transparent 1px);
    background-position: 0 100%;
   line-height: 32px;
    padding-bottom: 12px;
}
  • Highlight context 
    • .flex-v-box.roam-block-container .block-bullet-view:focus-within {
  background-color: #A6A293;
}
roam/css