Ev's Secret Garden

Powered by 🌱Roam Garden

Public Roam CSS Page

make-public

Customisation is my jam. If you like customisation to, here's some of my CSS Snippets you might like

Quick Capture Tags CSS

/* Quick Capture Tags */
span.rm-page-ref[data-tag="sparknote ⚡️"] {
    align-items: center;
    background: #607D8B;
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    text-transform: uppercase;
   color: #FFC107 !important;
    transition: .3s;
    white-space: nowrap;
}

span.rm-page-ref[data-tag="Curiosity Trails"] {
    align-items: center;
    background: #607D8B;
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    text-transform: uppercase;
   color: rgb(255,255,255) !important;
    transition: .3s;
    white-space: nowrap;
}

span.rm-page-ref[data-tag="sparkidea 💡"] {
    align-items: center;
    background: #607D8B;
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    text-transform: uppercase;
   color: #FFC107 !important;
    transition: .3s;
    white-space: nowrap;
}

span.rm-page-ref[data-tag="sparktask ☑︎"] {
    align-items: center;
    background: #607D8B;
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    text-transform: uppercase;
   color: #6DBEF0 !important;
    transition: .3s;
    white-space: nowrap;
}

span.rm-page-ref[data-tag="systems upgrade ⇧"] {
    align-items: center;
    background: #607D8B;
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    text-transform: uppercase;
   color: rgb(255,255,255) !important;
    transition: .3s;
    white-space: nowrap;
}

Creator Tags

/* Creator Tags */
span.rm-page-ref[data-tag="twitterthread"] {
    background: #2196F3 !important;
    color: rgb(255,255,255) !important;
    padding: 3px 7px;
    border-radius: 5px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="atomic essay"] {
    background: #FFC107 !important;
    color: rgb(0,0,0) !important;
    padding: 3px 7px;
    border-radius: 5px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Long Form Article"] {
    background: #009688 !important;
    color: rgb(255,255,255) !important;
    padding: 3px 7px;
    font-size: 1.0rem;
    border-radius: 5px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Video Idea"] {
    background: #F44336 !important;
    color: rgb(255,255,255) !important;
    padding: 3px 7px;
    border-radius: 5px;
    line-height: 2em;
    font-weight: 500;
}

Process Tags

/* Process Tags */
span.rm-page-ref[data-tag="facecam"] {
    background: #00968847 !important;
    color: rgb(0,0,0) !important;
    padding: 3px 7px;
    border-radius: 2px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="complete"] {
    background: #9E9E9E !important;
    color: #F6F6F6 !important;
    padding: 3px 7px;
    border-radius: 0.4rem 1rem 1rem 0.4rem;
    line-height: 2em;
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
}

span[data-link-title^="--Up Next--"] .rm-page-ref {
  color:#E91E63;
  font-weight: 800;
  font-size: 18px;
}

span.rm-page-ref[data-tag="b-roll"] {
    background: #673AB74C !important;
    color: rgb(0,0,0) !important;
    padding: 3px 7px;
    border-radius: 2px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="text-overlay"] {
    background: #F4433649 !important;
    color: rgb(0,0,0) !important;
    padding: 3px 7px;
    border-radius: 2px;
    line-height: 2em;
    font-weight: 500;
}


span.rm-page-ref[data-tag="Parked ⬇"] {
    background: #00BCD4 !important;
    color: #BBE7EC !important;
    padding: 3px 7px;
    border-radius: 0.4rem 1rem 1rem 0.4rem;
    line-height: 2em;
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
}

span.rm-page-ref[data-tag="In Progress ♻"] {
    background: #20A880 !important;
    color: #ADDDCE !important;
    padding: 3px 7px;
    border-radius: 0.4rem 1rem 1rem 0.4rem;
    line-height: 2em;
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
}

span.rm-page-ref[data-tag="Up Next →"] {
    background: #E91E63 !important;
    color: #FFD9E6 !important;
    padding: 3px 7px;
    border-radius: 0.4rem 1rem 1rem 0.4rem;
    line-height: 2em;
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
}

span.rm-page-ref[data-tag="Draft 🚧"] {
    background: #009688 !important;
    color: #ADDDCE !important;
    padding: 3px 7px;
    border-radius: 0.4rem 1rem 1rem 0.4rem;
    line-height: 2em;
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
}


span.rm-page-ref[data-tag="shipped 🚀"] {
    background: #673AB7 !important;
    color: #E8DAFF !important;
    padding: 3px 7px;
    border-radius: 0.4rem 1rem 1rem 0.4rem;
    line-height: 2em;
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
}

span.rm-page-ref[data-tag="To Process ⬆"] {
    background: #FF5722 !important;
    color: #F7C7B8 !important;
    padding: 3px 7px;
    border-radius: 0.4rem 1rem 1rem 0.4rem;
    line-height: 2em;
    font-weight: 700;
    font-size: 1.0rem;
    text-transform: uppercase;
}

Consumer Tags

/* Consumer Tags */
span.rm-page-ref[data-tag="The Library"] {
    align-items: center;
    background: #FFC107;
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    text-transform: uppercase;
   color: #FFEEBB !important;
    transition: .3s;
    white-space: nowrap;
}

span.rm-page-ref[data-tag="article"] {
    background: #00BCD4 !important;
    color: rgb(0,0,0) !important;
    padding: 3px 7px;
    border-radius: 5px;
    line-height: 2em;
    font-weight: 500;
      font-size: 1.0rem;
}

span.rm-page-ref[data-tag="book"] {
    background: #009688 !important;
    color: rgb(255,255,255) !important;
    padding: 3px 7px;
    border-radius: 5px;
    font-weight: 500;
    line-height: 2em;
      font-size: 1.0rem;
}

span.rm-page-ref[data-tag="video"] {
    background: #F44336 !important;
    color: rgb(0,0,0) !important;
    padding: 3px 7px;
    border-radius: 5px;
    font-weight: 500;
  line-height: 2em;
      font-size: 1.0rem;
}

Query Title

.rm-query {
  border: 0px;
}

.rm-query .rm-query-title {
  background-color: #2A3850;
      border-radius: 1rem 1rem 0.4rem 0.4rem;
  border: 0px;
}

.rm-query-title {
    font-size: 14px !important;
  font-weight: 700 !important;
    color: white !important;
 }

.rm-reference-item {
  background-color: #2A38500A !important;
border: 0px !important;
  border-radius:8px !important;
  padding:0x !important;
  
  
}

Referenced in

Public Roam CSS Page