body {
  margin: 0;
}
.rm-highlight {
  background-color: hsl(51, 98%, 81%);
  margin: -2px;
  padding: 2px;
}
.rm-bold {
  font-weight: bold;
}
.rm-iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
.rm-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.document-bullet {
  list-style: none;
}
.rm-block-ref {
  padding: 2px 2px;
  margin: -2px 0;
  display: inline;
  border-bottom: .5px solid #D8E1E8;
  cursor: alias;
  color: #202B33;
}
.rm-block-ref:hover {
  cursor: alias;
  color: #202B33;
  background-color: #F5F8FA;
  text-decoration: none;
}
.rm-embed-container {
  position: relative;
  display: flex;
  padding: 1px 16px;
  background-color: #EBF1F5;
  margin-bottom: 8px;
}
.rm-embed-container>div>div {
  padding-left: 16px;
}
.rm-embed-link {
  position: absolute;
  right: 8px;
  display: inline-block;
  font-size: 1.5em;
}
td {
  font-size: 12px;
  min-width: 100px;
  max-height: 20px;
  padding: 8px 16px;
  border: 1px solid grey;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
#content {
  box-sizing: border-box;
}
h1, h2, h3, p {
  white-space: pre-wrap;
}
.roam-block img {
  width: 100%;
}
.rm-bq {
  background-color: #F5F8FA;
  border-left: 5px solid #30404D;
  padding: 10px 20px;
  white-space: pre-wrap;
}
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.justify {
  text-align: justify;
}
p > code {
  margin-right: .2em;
  border-radius: 4px;
  color: #333;
  background: #eee;
  border: 1px solid #ddd;
  padding: .1em .3em;
}
pre code[class*="language-"] {
  color: black;
  background: none;
  text-shadow: 0 1px white; 
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
}
pre {
  color: black;
  background: #f5f2f0;
  text-shadow: 0 1px white;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
}
pre code .comment {
  color: slategray;
}
pre code .prolog {
  color: slategray;
}
pre code .doctype {
  color: slategray;
}
pre code .cdata {
  color: slategray;
}
pre code .punctuation {
  color: #999;
}
pre code .namespace {
  opacity: .7;
}
pre code .property {
  color: #905;
}
pre code .tag {
  color: #905;
}
pre code .boolean {
  color: #905;
}
pre code .number {
  color: #905;
}
pre code .constant {
  color: #905;
}
pre code .symbol {
  color: #905;
}
pre code .deleted {
  color: #905;
}
pre code .selector {
  color: #690;
}
pre code .attr-name {
  color: #690;
}
pre code .string {
  color: #690;
}
pre code .char {
  color: #690;
}
pre code .builtin {
  color: #690;
}
pre code .inserted {
  color: #690;
}
pre code .operator {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
}
pre code .entity {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
  cursor: help;
}
pre code .url {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
}
pre code.language-css .token.string {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
}
pre code .style .token.string {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
}
pre code .atrule {
  color: #07a;
}
pre code .attr-value {
  color: #07a;
}
pre code .keyword {
  color: #07a;
}
pre code .function {
  color: #DD4A68;
}
pre code .class-name {
  color: #DD4A68;
}
pre code .regex {
  color: #e90;
}
pre code .important {
  color: #e90;
  font-weight: 700;
}
pre code .variable {
  color: #e90;
}
pre code .bold {
  font-weight: 700;
}
pre code .italic {
  font-style: italic;
}

Skip to content
Why GitHub? 
Team
Enterprise
Explore 
Marketplace
Pricing 
Search
Sign in
Sign up
allymalecha
/
slightly-aesthetic-roam-theme
Public
1017
Code
Issues
2
Pull requests
1
Actions
Projects
Wiki
Security
Insights
slightly-aesthetic-roam-theme/css
@allymalecha
allymalecha Update css
Latest commit e9d52a1 on Jan 5
 History
 1 contributor
369 lines (317 sloc)  7.83 KB
   
  /* Slighly aesthetic roam theme that is easier on the eyes and not too complex for people who need a lot of help with CSS (i.e. me)
By Ally but with a lot of bases from smart individuals on Reddit
V 1.4 with some updates
*/

@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');

/* General formatting of the site */
/* Make block across page wider */
.roam-block-container,.roam-block,.rm-block-text {
  max-width: 100%;
}

.roam-center {
    padding-right: 20px !important;
    padding-left: 20px !important;
    height: 100%;
}
/* end page widening */

body { /*    Background color   */
    background-color: #E2E2E2;
}

div { 
    font-family: 'Work Sans', serif;
}

.level2 {
    font-family: 'Work Sans', serif;
}

/* Header bar */
.roam-topbar { 
    background-color: #CECBDB;
}


/* Left side bar style*/
.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 {
        background-color: #2C4251;
    color: #CECBDB;
  font-size: 16px;
}

/* Change sideboard to all one color */
.roam-body .roam-app .roam-sidebar-container {
background-color: #2C4251 !important;
}

/* Change color of the email address in upper left */
.bp3-button div {
color: #58A4B0 !important;
}

/* Left side Bar Open/Close Icon and star/calendar icons in header */
.bp3-icon-star-empty::before {
    content: "🌟";
}

.bp3-icon-graph:before,
.bp3-icon-star:before,
.bp3-icon-star-empty:before,
.bp3-icon-more:before,
.bp3-icon-menu:before,
.bp3-button:before, 
.bp3-minimal:before, 
.bp3-small:before, 
.bp3-icon-filter {
  color: #58A4B0 !important;
}
/* Left side Bar Hovering */

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover {
  color: black;
  background-color: #58A4B0;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 
  color: black;
  background-color: #58A4B0;
}

/*Change Roam Research logo color to match theme*/
#roam-sidebar-logo {
    color:#CECBDB
}
        
/*/ Roam Search Bar /*/

/* Roam Search Box Placeholder Text Color */
.bp3-input::placeholder,
.bp3-input-group > .bp3-icon {
    color: #58A4B0;
}

/* Input Text Color in Search Bar */
.bp3-input {
  color: black;
}

/* New Page Button Color */
.rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page {
  color: #58A4B0;
}

.bp3-button .bp3-minimal .bp3-intent-success {
    color: #58A4B0   
}

.bp3-button .bp3-minimal .bp3-intent-success a:hover {
    background-color: #CECBDB;   
}

/* Body */

/* tree style */
.block-border-left { 
    border-left: 2px solid #58A4B0;
}

/* Bullets */
.controls .simple-bullet-outer .simple-bullet-inner {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #58A4B0; 
}
.roam-bullet-closed { 
    background-color:  #CECBDB;
}

/* Markdown link titles */

.roam-app a {
  color: #58A4B0;
}

.roam-app a:focus, 
.roam-app a:hover {
  color: #58A4B0;
  text-decoration: underline;
}

/* external link color */
a.rm-alias.rm-alias-external {
    color: #106ba3 !important;
}

/* the currently selected block */
 .rm-block-input{ 
  color: #2C4251 !important;
    font-family: 'Work Sans', serif;
     background-color:  #CECBDB;
     } 


/* Tagging style */
.rm-page-ref-tag { /* hashtags */
    color: #EBFAFF !important;
    background-color: #58A4B0;
    border-radius: 10px;
    padding: 2px 3px 2px 3px;
}

/* external link color */

a.rm-alias.rm-alias-external {
    color: #58A4B0 !important;
}

/* Header Styles */

.roam-app h1 { /* styles page titling */
    color: #2C4251 !important;
    font-weight: bold;
  font-size: 36px;
  
}
.roam-app h2 { /* styles page titling */
    color: #2C4251 !important;
    font-weight: bold;
  font-size: 32px;
}
 .roam-app h3 { /* styles page titling */
    color: #2C4251 !important;
    font-weight: bold;
  font-size: 24px;
}
.roam-app h4 { /* styles page titling */
    color: #2C4251 !important;
    font-weight: bold;
  font-size: 18px;   
}

/* Reference Titles */
.roam-article > div:last-child a { 
    color: #2C4251 !important;
}

/* Reference Boxes */
.rm-reference-item { 
  background-color: #EBFAFF;
    border-radius: 15px;
    padding: 20px;
}

/* Right side bar color */
#right-sidebar {
    background-color: #EBFAFF !important;
}


/* Right side bar reference boxes */
#right-sidebar .rm-reference-item { 
  background-color: #E2E2E2;
    border-radius: 15px;
    padding: 20px;
}

/*Wraps text when I'm doing an inline search with [[]] or (())*/
.bp3-text-overflow-ellipsis {
    text-overflow: unset;
    white-space: unset;
}
/* hover color in search bar*/
.rm-mentions-search-items .rm-mentions-search-item:hover {
  background-color: #bfccd6;
}
/* wrap overflow text in dropdown menu */
.bp3-text-overflow-ellipsis {
    text-overflow: unset;
    white-space: unset;
}

/* reference main */
.roam-block .rm-reference-main {
    padding: 0px 16px 12px 16px;
    background-color: whitesmoke;
    border-radius: 15px;
}

/* nicer looking block quote */
:root {
  --blockquote-font-color: rgba(109, 156, 190, 0.89);
  --blockquote-border-color: #444;
  --blockquote-bg: none;
  --blockquote-cite: #777;
}

/* change highlight color, general text highlighting and block highlighting */

.roam-highlight {
        background-color: #AEFFEA;
    }
 .block-highlight-blue {
            background-color: white;
        }
/* change loading bar to something that doesn't make me aggravated 

.loading-astrolabe{
	display: block;
 	-moz-box-sizing: border-box;
  	box-sizing: border-box;
 	background: url(https://i.imgur.com/vzSNNca.gif) no-repeat;
  	width: 600px;
  	height: 600px;
  	padding-left: 600px;
}
   .loading-astrolabe .wand{
	visibility: hidden;
}
/* block reference background color */
.rm-block-ref {
    background-color:#CECBDB;
}

.roam-center {
  flex: 1 1 100% !important;
  flex-basis: 25% !important;
}

#right-sidebar #roam-right-sidebar-content {
  overflow: scroll !important;
  display: flex;
  align-content: flex;
}
:root {
  --right-sidebar-masonry-bg: sidebar-background;
  --right-sidebar-masonry-outline: #d8e1e8;
}
#app .roam-main .roam-body-main .roam-center {
  flex: 1 1 100% !important;
  flex-basis: 10% !important;
}
#right-sidebar {
  /* container */
  background-color: #d8e1e8 !important;
}
.roam-log-container .roam-log-page {
  padding: 10px;
  border: 1px solid #bfbfbf;
  border-radius: 5px;
  background-color: #1B1A23 !important;
}
#right-sidebar #roam-right-sidebar-content {
  overflow: scroll !important;
  white-space: normal;
  display: flex;
  flex-flow: column wrap;
}
#right-sidebar #roam-right-sidebar-content .sidebar-content {
  overflow: scroll !important;
  white-space: normal;
  display: flex;
  align-content: flex-start;
  flex-flow: column wrap;
  /* item */
}
#right-sidebar #roam-right-sidebar-content .sidebar-content > div {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  align-self: flex-start;
  margin-right: 0px !important;
  margin-left: 15px;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 16px;
  min-height: auto;
  width: 600px;
  background-color: var(--right-sidebar-masonry-bg) !important;
  border: 1px solid var(--right-sidebar-masonry-outline) !important;
  /* item header */
  /* item content */
}

#right-sidebar
  #roam-right-sidebar-content
  .sidebar-content
  > div
  > div
  > div:nth-child(2) {
  resize: vertical;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 770px;
}
#right-sidebar
  #roam-right-sidebar-content
  .sidebar-content
  > div
  > div
  > div:nth-child(2)
  > div
  > div.flex-v-box {
  margin-left: 0px !important;
}

/* Right side bar reference boxes */
.rm-reference-item { 
  background-color: #2B2640;
    border-radius: 15px;
    padding: 5px;
    margin-top: 15px !important;
}
© 2021 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHub
Pricing
API
Training
Blog
About
Loading complete