roam/css

created 2020-06-04 · edited 2020-06-04 · open in Roam

custom database theme for the malcolmocean roamblog:

originally I was using the header from malcolmocean.com
- then I played with some that were that but hue-rotated
  - -117
  - +27
  - -32
now, this other similar-style piece:

roam-sidebar-container noselect.roam-sidebar-content > .flex-h-box:first-child:after {
    color: white;
    padding-left: 10px;
}
.roam-topbar .flex-h-box > div:nth-child(2),
.rm-topbar .flex-h-box > div:nth-child(2) {
    padding-left: 30px;
}

/*
.rm-db-title-container {
  display: none !important;
}*/

.roam-sidebar-content > .flex-h-box:first-child:after,
.roam-topbar .flex-h-box > div:nth-child(2):after,
.rm-topbar .flex-h-box > div:nth-child(2):after {
/*    content: "malcolmocean";*/
    content: "";
    display: inline-block;
    position: relative;
    
    width: 100px;
  
    height: 30px;
    background: url(https://malcolmocean.com/wp-content/themes/minx/img/logo.png) center no-repeat;
    background-size: 100px auto;
    padding-left: 10px;
    margin-left: 10px;
}

.roam-topbar .flex-h-box > div:nth-child(2):after,
.rm-topbar .flex-h-box > div:nth-child(2):after {
  top: 3px;
  left: 200px;
  /*
  filter: invert(1); /**/
}

.roam-sidebar-content {background: #591420;}
.roam-topbar {background: #f2c6ce}

.roam-sidebar-content {
    background: url(https://malcolmocean.com/wp-content/themes/minx/img/footer.png);
    background-position: center bottom;
}
.roam-topbar, .rm-topbar {
  background: url(https://malcolmocean.com/wp-content/themes/minx/img/header.png);
  background: url(https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fmalcolmocean%2FLCO36r0wcC.png?alt=media&token=93bb11a6-2b9d-4b3a-9c70-5bc5d37bdde5);
  background: url(https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fmalcolmocean%2F15iaOO59Zh.png?alt=media&token=42331bf0-6637-4d73-8404-3a0d8f87dd7a);
  background: url(https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fmalcolmocean%2FE5GVdfdrxA.png?alt=media&token=80393338-3c4e-45d5-92fb-72de2d12e6e1);
  background: url(https://malcolmocean.com/wp-content/themes/minx/img/header.png);
  background-size: 710px;
  background-position: 0 -30px;
  /**/
  box-shadow: 0 1.5px 4px rgba(0,0,0,0.7);
  border-bottom: none;
  z-index: 1000;
}

.roam-topbar, .rm-topbar {
  background: url(https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fmalcolmocean%2FHGraRev_Et.png?alt=media&token=167916fe-5b8c-41a2-8c40-2afcc1d5e684);  
  background-size: 1920px;
  background-position: 0;
}


.bp3-button .bp3-icon, .bp3-button .bp3-icon-standard, .bp3-button .bp3-icon-large,
.bp3-button[class*="bp3-icon-"]::before {
  color: white;
}
  
.roam-topbar .bp3-button:not([class*="bp3-intent-"])::before {
    color: black;
}

better blockef'd blockquotes

.rm-block-ref > .rm-bq:first-child {
  margin: -20px 0;
}

my custom tag styles (#portaged from my 8 year old workflowy account)

span.rm-page-ref {
    border-radius: 2px;
    padding-left: 1px;
    padding-right: 1px;
}

span.rm-page-ref[data-tag="capslog"] {
    color: #39c !important;
}
span.rm-page-ref[data-tag="capslog"]:after {
    content: " 🌊"
}


span.rm-page-ref[data-tag="write"],
span.rm-page-ref[data-tag="blogpost"] {
  color: #00f !important;
  text-shadow: 0 0 2px white;
}
span.rm-page-ref[data-tag="write"]::after,
span.rm-page-ref[data-tag="blogpost"]::after {
  /* ends up black and too big
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy4xMjcgMjIuNTYybC03LjEyNyAxLjQzOCAxLjQzOC03LjEyOCA1LjY4OSA1LjY5em0xLjQxNC0xLjQxNGwxMS4yMjgtMTEuMjI1LTUuNjktNS42OTItMTEuMjI3IDExLjIyNyA1LjY4OSA1LjY5em05Ljc2OC0yMS4xNDhsLTIuODE2IDIuODE3IDUuNjkxIDUuNjkxIDIuODE2LTIuODE5LTUuNjkxLTUuNjg5eiIvPjwvc3ZnPg==");
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: .2em;
  */
  /*
  content: " \f040";
  font-family: 'FontAwesome';
  */
}
span.rm-page-ref[data-tag="2tweet"],
span.rm-page-ref[data-tag="tweet"] {
  color: #1DA1F2 !important;
}

span.rm-page-ref[data-tag="2tweet"]::after,
span.rm-page-ref[data-tag="tweet"]::after {
  content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAyNDggMjA0Ij4KICA8cGF0aCBmaWxsPSIjMWQ5YmYwIiBkPSJNMjIxLjk1IDUxLjI5Yy4xNSAyLjE3LjE1IDQuMzQuMTUgNi41MyAwIDY2LjczLTUwLjggMTQzLjY5LTE0My42OSAxNDMuNjl2LS4wNGMtMjcuNDQuMDQtNTQuMzEtNy44Mi03Ny40MS0yMi42NCAzLjk5LjQ4IDggLjcyIDEyLjAyLjczIDIyLjc0LjAyIDQ0LjgzLTcuNjEgNjIuNzItMjEuNjYtMjEuNjEtLjQxLTQwLjU2LTE0LjUtNDcuMTgtMzUuMDcgNy41NyAxLjQ2IDE1LjM3IDEuMTYgMjIuOC0uODctMjMuNTYtNC43Ni00MC41MS0yNS40Ni00MC41MS00OS41di0uNjRjNy4wMiAzLjkxIDE0Ljg4IDYuMDggMjIuOTIgNi4zMkMxMS41OCA2My4zMSA0Ljc0IDMzLjc5IDE4LjE0IDEwLjcxYzI1LjY0IDMxLjU1IDYzLjQ3IDUwLjczIDEwNC4wOCA1Mi43Ni00LjA3LTE3LjU0IDEuNDktMzUuOTIgMTQuNjEtNDguMjUgMjAuMzQtMTkuMTIgNTIuMzMtMTguMTQgNzEuNDUgMi4xOSAxMS4zMS0yLjIzIDIyLjE1LTYuMzggMzIuMDctMTIuMjYtMy43NyAxMS42OS0xMS42NiAyMS42Mi0yMi4yIDI3LjkzIDEwLjAxLTEuMTggMTkuNzktMy44NiAyOS03Ljk1LTYuNzggMTAuMTYtMTUuMzIgMTkuMDEtMjUuMiAyNi4xNnoiLz4KPC9zdmc+");
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .2em;
}
/*
span.rm-page-ref[data-tag="2tweet"]::after,
span.rm-page-ref[data-tag="2tweet"]::after {
  content: " \f099";
  font-family: 'FontAwesome';
}*/


div[projectid="938c4708-2d4a-99ed-5642-1beb635581a5"] {
    background: #70e3ff;
    border-radius: 10px;
}

/*
https://workflowy.com/#/1ee36e3cce47
this is pretty cool: https://blog.workflowy.com/2016/09/29/better-link-life/#more-2363
*/

/*.cols-2-proj {
    background: #def;
}/**/

.content {
  font-family: 'azo-sans-web-normal';
}
.content span.rm-page-ref {
    padding: 4px 1px 1px; /* required for fixing azo */
}

.center-proj {
    text-align: center;
}

span.rm-page-ref[data-tag="red"] {
    background: red;
    color: white !important;
    padding: 2px 4px 0 3px;
}
span.rm-page-ref[data-tag="blue"] {
    background: #09f;
    color: white !important;
    padding: 2px 4px 0 3px;
}
span.rm-page-ref[data-tag="green"] {
    background: #0c0;
    color: white !important;
    padding: 2px 4px 0 3px;
}

span.rm-page-ref[data-tag="BR"] {
    background: #203;
    color: #c6f !important;
    padding: 0 4px 0 3px;
}

span.rm-page-ref[data-tag="prose"]::after {
    content: " \270d";
}

.prose-proj, .prose-proj * {
    line-height: 160% !important;
}

.prose-proj .project {
    margin-bottom: 2px;
}

.prose-proj .H1-proj,
.prose-proj .H2-proj,
.prose-proj .H3-proj {
    margin-top: 1em;
}

.prose-proj .H1-proj>.name>.content,
.prose-proj .H2-proj>.name>.content,
.prose-proj .H3-proj>.name>.content,
.prose-proj .H1-proj>.notes>.content,
.prose-proj .H2-proj>.notes>.content,
.prose-proj .H3-proj>.notes>.content {
    position: relative;
}
.prose-proj .H1-proj>.notes>.content {
    top: -1.4em;
}
.prose-proj .H2-proj>.notes>.content {
    top: -1.05em;
}
.prose-proj .H3-proj>.notes>.content {
    top: -0.7em;
}

.prose-proj .H1-proj>.name>.content {
    font-size: 170%;
    top: -0.5em;
}
.prose-proj .H2-proj>.name>.content {
    font-size: 140%;
    top: -0.38em;
}
.prose-proj .H3-proj>.name>.content {
    font-size: 120%;
    top: -0.25em;
}
span.rm-page-ref[data-tag="H1"],
span.rm-page-ref[data-tag="H2"],
span.rm-page-ref[data-tag="H3"]{
    display: none;
}
/*
.prose-proj .children {
    padding-top: 4px;
    margin-bottom: -8px;
}*/

span.rm-page-ref[data-tag="dur"] {
    opacity: 0.1;/**/
}

span.rm-page-ref[data-tag="dur"] + * {
  color: #CFF !important;
  background: #0CC !important;
  border-radius: 50px;
  padding: 0 0.5em 0.1em 0.2em;
}
span.rm-page-ref[data-tag="dur"] + *::before {
    content: "\1f559  ";
}

span.rm-page-ref[data-tag="durtotal"] + * {
  color: #033 !important;
  background: #0CC !important;
  border-radius: 50px;
  padding: 0 0.5em 0.1em 0.2em;
}
span.rm-page-ref[data-tag="durtotal"] + *::before {
    content: " \3a3\1f557  = ";
}

span.rm-page-ref[data-tag="dur"] + .contentItalic {
  color: #CF9 !important;
  background: #0C9 !important;
}
span.rm-page-ref[data-tag="durtotal"] + .contentItalic {
  color: #032 !important;
  background: #0C9 !important;
}

span.rm-page-ref[data-tag="tally-ho"] {
  background: linear-gradient(270deg, rgba(64,128,192, 0.5), rgba(100,120,180, 0.0)) !important;
  color: white !important;
  padding-left: 4px;
}
span.rm-page-ref[data-tag="tally-ho"]::after {
  content: " !!!\a0";
  position: relative;
}


span.rm-page-ref[data-tag="ignore"] {
  background: linear-gradient(180deg, #FB9, #DC8) !important;
  color: black !important;
}
span.rm-page-ref[data-tag="ignore"]::after {
  content: " ¯\\_(ツ)_/¯\a0";
  position: relative;
  font-weight: bold;
}

span.rm-page-ref[data-tag="defer"] {
  background: linear-gradient(180deg, #FB9, #DC8) !important;
  color: white !important;
}
span.rm-page-ref[data-tag="defer"]::after {
  content: " \27f6\a0";
  position: relative;
}
span.rm-page-ref[data-tag="after_september"] {
  background: linear-gradient(180deg, #FB9, #DC8) !important;
  color: white !important;
}
span.rm-page-ref[data-tag="after_september"]::after {
  content: " \27f6\27f6  🎃\a0";
  position: relative;
}

span.rm-page-ref[data-tag="top"] {
  background: linear-gradient(180deg, #F06, #C09) !important;
  color: white !important;
}
span.rm-page-ref[data-tag="top"]::after {
  content: " \10323\a0";
  position: relative;
}


span.rm-page-ref[data-tag="medium"] {
  background: linear-gradient(180deg, #F59, #E355CC) !important;
  color: white !important;
}
span.rm-page-ref[data-tag="medium"]::after {
  content: " ~\a0";
  position: relative;
}


span.rm-page-ref[data-tag="low"],
span.rm-page-ref[data-tag="bottom"] {
  background: linear-gradient(180deg, #FFCCE3, #FCE) !important;
  color: white !important;
}
span.rm-page-ref[data-tag="low"] {
  background: linear-gradient(180deg, #F9C, #E9D) !important;
  color: white !important;
}
span.rm-page-ref[data-tag="low"]::after,
span.rm-page-ref[data-tag="bottom"]::after {
  content: " \2186\a0";
  position: relative;
}


span.rm-page-ref[data-tag^="idea"] {
  color: #0da !important;
}
span.rm-page-ref[data-tag^="idea"]::after {
  content: "\1F4A1"
}

span.rm-page-ref[data-tag="gem"] {
  background: linear-gradient(180deg, #c0b6df, #4700cc) !important;
  color: white !important;
}
span.rm-page-ref[data-tag="gem"]::after {
  content: " \1f48e\a0";
  position: relative;
}

span.rm-page-ref[data-tag="nexa"] {
  background-color: #333 !important;
  color: white !important;
}
span.rm-page-ref[data-tag="nexa"]::after {
  content: " \1F463\a0";
}

span.rm-page-ref[data-tag="ready"] {
  background-color: #33C800 !important;
  color: black !important;
}
/**/
span.rm-page-ref[data-tag="ready"]::after {
  content: " \f058\a0";
  position: relative;
  font-family: 'FontAwesome';
}/**/

span.rm-page-ref[data-tag="todo"] {
  background-color: #FFC800 !important;
  color: black !important;
}
/**/
span.rm-page-ref[data-tag="todo"]::after {
  content: " \f14a\a0";
  position: relative;
  font-family: 'FontAwesome';
}/**/

span.rm-page-ref[data-tag="oppor"] {
  background-color: #FFC800 !important;
  color: black !important;
}
/**/
span.rm-page-ref[data-tag="oppor"]::after {
  content: " \f0b2\a0";
  position: relative;
  font-family: 'FontAwesome';
}/**/

span.rm-page-ref[data-tag="test"] {
  background-color: #DDDD66 !important;
  color: black !important;
}
/**/
span.rm-page-ref[data-tag="test"]::after {
  content: " \f0ca\a0";
  position: relative;
  font-family: 'FontAwesome';
}/* content: " \f05d\a0"; */

span.rm-page-ref[data-tag="conflict"] {
  background-color: #025 !important;
  color: #2dd !important;
}

span.rm-page-ref[data-tag="conflict"]::after {
  content: " ⤧";
  position: relative;
}


span.rm-page-ref[data-tag="murphy"] {
  background-color: #105 !important;
  color: #c2f !important;
}

span.rm-page-ref[data-tag="murphy"]::after {
  content: " 😬";
}

span.rm-page-ref[data-tag="jitsu"] {
  background-color: #c2f !important;
  color: #105 !important;
}

span.rm-page-ref[data-tag="jitsu"]::after {
  content: " 👊";
}

.murphyjitsu {
    background: #f8eeff;
    border-radius: 10px;
    padding: 2px 10px 0 4px;
}

span.rm-page-ref[data-tag=".murphyjitsu"] {
   background: #f8ddff;
   color: #c2f;
}
span.rm-page-ref[data-tag=".murphyjitsu"]::after {
  content: " \f1ce\a0";
  position: relative;
  font-family: 'FontAwesome';
}/**/



span.rm-page-ref[data-tag="#SRM"] {
  background: linear-gradient(#FFF, #FF0 5%, #F90 30%, #F00) !important;
  color: #210 !important;
}

span.rm-page-ref[data-tag="#SRM"]::after {
  content: " 🔥";
  position: relative;
}


span.rm-page-ref[data-tag="tosort"] {
  background: linear-gradient(135deg, #F35, #F34 10%, #F12 30%, #FA0) !important;
  color: black !important;
}

span.rm-page-ref[data-tag="tosort"]::after {
  content: " \21f5\a0";
  position: relative;
  /*font-family: 'FontAwesome';*/
}

/* :first-child */
span.rm-page-ref[data-tag="soon"] {
  background: linear-gradient(135deg, #CF0, #FC0) !important;
  color: black !important;
}

span.rm-page-ref[data-tag="soon"]::before {
  content: "";
  position: relative;
  top: -2px;
}

span.rm-page-ref[data-tag="soon"]::after {
  content: "!!";
  font-size: 150%;
  line-height: 10px;
  position: relative;
  top:0.15em;
}


span.rm-page-ref[data-tag="now"] {
  background: linear-gradient(135deg, #F90, #FC0, #FF0, #CF0) !important;
  color: black !important;
}

span.rm-page-ref[data-tag="now"]::after {
  content: " (actually go do the thing right now don't wait do it)";
  font-size: 200%;
  line-height: 10px;
  position: relative;
  top:0.15em;
}

span.rm-page-ref[data-tag="OctHackWeek"] {
  /*background: linear-gradient(180deg, #FC0, #C60) !important; */
    background: black;
  color: #F80 !important;
  padding-left: 3px;
  padding-right: 3px;
}

span.rm-page-ref[data-tag="OctHackWeek"]::after {
  content: " \1f383";
  position: relative;
  
}




/* :first-child */
span.rm-page-ref[data-tag="then"] {
  background: linear-gradient(135deg, #0FC, #FC0) !important;
  color: black !important;
}

span.rm-page-ref[data-tag="then"]::before {
  content: "\21b3 ";
  position: relative;
  top: -2px;
}

span.rm-page-ref[data-tag="then"]::after {
  content: "\2006\203A\203A\203A\2006";
  font-size: 150%;
  line-height: 10px;
}


span.rm-page-ref[data-tag="desk"] {
  background-color: #CC6600 !important;
  color: #fc9 !important;
  padding: 0 3px;
  font-weight: bold;
}
span.rm-page-ref[data-tag="desk"]::after {
  content: " \26e9";
  position: relative;
  top: .15em;
}

span.rm-page-ref[data-tag="tosay"], span.rm-page-ref[data-tag="talkto"] {
  background-color: #00CCFF !important;
  color: black !important;
}
span.rm-page-ref[data-tag="tosay"]::after, span.rm-page-ref[data-tag="talkto"]::after {
  font-size: 1.1em;
  position: relative;
  top: 0.06em;
  content: ' \1F4AC';
    /* left facing chat bubble
  content: ' \1F5E8';
    */
    /* smiley face
  content: " \1F603";*/
  line-height: 0;
}
span.rm-page-ref[data-tag="toask"] {
  background-color: #FF9900 !important;
  color: black !important;
}
span.rm-page-ref[data-tag="toask"]::after {
  content: " \1F914";
  /*font-weight: bold;*/
  font-size: 1.35em;
  position: relative;
  top: 0.12em;
  line-height: 0;
  font-family: "EmojiOne Color Regular" !important;
}

span.rm-page-ref[data-tag="frog"] {
  background-color: #0F0 !important;
  color: #030 !important;
  font-weight: bold;
  letter-spacing: .3em;
}
span.rm-page-ref[data-tag="frog"]::after {
  /*content: "\25b6"*/
    content: " \1f438";
  font-family: "EmojiOne Color Regular" !important;
}

span.rm-page-ref[data-tag="urgent"] {
  background-color: #F00 !important;
  font-weight: bold;
  color: black !important;
}

span.rm-page-ref[data-tag="assumption"] {
  color: #e0c !important;
}

span.rm-page-ref[data-tag="addmore"] {
  color: #f06 !important;
}
span.rm-page-ref[data-tag="complete"],
span.rm-page-ref[data-tag="justify"],
span.rm-page-ref[data-tag="critique"],
span.rm-page-ref[data-tag="unclear"] {
  color: #F00 !important;
}

span.rm-page-ref[data-tag="counter"],
span.rm-page-ref[data-tag="metacrit"]{
  background-color: #0ff !important;
  color: black !important;
}

span.rm-page-ref[data-tag="example"] {
  background-color: #FA3 !important;
  color: black !important;
}

span.rm-page-ref[data-tag="unanswered"] {
  background-color: #F90 !important;
  color: white !important;
}
span.rm-page-ref[data-tag="question"] {
  color: #F90 !important;
}
span.rm-page-ref[data-tag="question"]::after {
    content: "\2753";
}

span.rm-page-ref[data-tag="why"] {
    color: #b8146e !important;
}
span.rm-page-ref[data-tag="why"]::after {
  background-image: url('https://emoji.slack-edge.com/T8RMV6FGE/why/10c786a1cfdf3ec9.png');
  background-size: 1em 1em;
  background-repeat: no-repeat;
  margin-left: .3em;
  width: 1em;
  height: 1em;
  display: inline-block;
  content: ' ';
  position: relative;
  top: 0.17em;
}


/* compare & contrast */
span.rm-page-ref[data-tag="cnc"] {
  color: #03F !important;
}
span.rm-page-ref[data-tag="cnc"]::after {
    /*content: " \25d0";*/
    content: " \1f313";
}



span.rm-page-ref[data-tag="tolist"],
span.rm-page-ref[data-tag="and_more"] {
  border: 2px solid #8B0 !important;
  background: white;
  box-shadow: 0 0 1px 1px white;
  color: #8B0 !important;
}



span.rm-page-ref[data-tag="revisit"]{
  color: #6c0 !important;
}
span.rm-page-ref[data-tag="revisit"]::after {
    content: "🤔\a0";
    position: relative;
    top: 0.15em;
    font-size: 1.8em;
    line-height: 0.2em
}

span.rm-page-ref[data-tag="integrate"]{
  background-color: #F90 !important;
  color: black !important;
}
span.rm-page-ref[data-tag="integrate"]::after {
    content: " \222b\a0";
    position: relative;
    top: -0.09em;
}
/*
span.rm-page-ref[data-tag="integrate"]::after {
    content: "\291e";
    font-size: 200%;
    position: relative;
    top: 0.11em;
}*/

span.rm-page-ref[data-tag="breakdown"]{
  background-color: #990 !important;
  color: white !important;
}
span.rm-page-ref[data-tag="tolist"]::after,
span.rm-page-ref[data-tag="tolist"]::before,
span.rm-page-ref[data-tag="and_more"]::after,
span.rm-page-ref[data-tag="and_more"]::before,
span.rm-page-ref[data-tag="breakdown"]::after,
span.rm-page-ref[data-tag="breakdown"]::before {
    content: "\22ee";
  font-family: "EmojiOne Color Regular" !important;
}

span.rm-page-ref[data-tag='unfinished'] {
    color: #90f !important;
    border: 1px solid #90f;
}

.content span.rm-page-ref[data-tag='unfinished'] span.rm-page-refText {
    text-decoration: none !important;
}

span.rm-page-ref[data-tag="return"] {
  color: #990 !important;
}

span.rm-page-ref[data-tag="new"] {
  color: #0c0 !important;
}

span.rm-page-ref[data-tag="prediction"] {
  background-color: #0F0 !important;
  color: black !important;
}

span.rm-page-ref[data-tag="clarify"] {
  background-color: #FF0 !important;
  color: black !important;
}

span.rm-page-ref[data-tag="fermi"] {
  background-color: #3CF !important;
  color: black !important;
}

span.rm-page-ref[data-tag="conclusion"] {
  color: #00F !important;
}

span.rm-page-ref[data-tag="collab"] {
  background-color: #b99aff !important;
  color: white !important;
  padding-right: 3px;
}

span.rm-page-ref[data-tag="pending"],
span.rm-page-ref[data-tag="on-hold"],
span.rm-page-ref[data-tag="blocked"],
span.rm-page-ref[data-tag="wait"] {
  background-color: #c66 !important;
  color: #fdd !important;
}
span.rm-page-ref[data-tag="pending"]::after,
span.rm-page-ref[data-tag="on-hold"]::after,
span.rm-page-ref[data-tag="blocked"]::after,
span.rm-page-ref[data-tag="wait"]::after {
  content: " ⛔";
  text-shadow: 0 0 2px white, 0 0 2px white;
}

span.rm-page-ref[data-tag="inprogress"] {
  background-color: #c06 !important;
  color: #fde !important;
  letter-spacing: .07em;
}
span.rm-page-ref[data-tag="inprogress"]::after {
  content: " \21bb"
}
span.rm-page-ref[data-tag="maintenance"] {
  background-color: #b47 !important;
  color: #fde !important;
  letter-spacing: .07em;
}
span.rm-page-ref[data-tag="maintenance"]::after {
  content: " \1F527"
}

span.rm-page-ref[data-tag="find"] {
  background: linear-gradient(#bfd, #bdf) !important;
  letter-spacing: .07em;
  border: 2px solid #5bb !important;
  box-shadow: 0 0 1px 1px white;
  color: #5bb !important;
}

span.rm-page-ref[data-tag="find"]::after {
  content: " 🔎" /*🔍*/
}

span.rm-page-ref[data-tag="bug"] {
    color: #8a0 !important;
}

span.rm-page-ref[data-tag="bug"]::after {
    content: ' 🐛';
    display: inline-block;
}

span.rm-page-ref[data-tag="setting"] {
    color: #666 !important;
    background-color: #ddd;
}

span.rm-page-ref[data-tag="setting"]::after {
    content: ' ⚙️';
    display: inline-block;
}

span.rm-page-ref[data-tag="key"] {
    color: #fc0 !important;
    background: linear-gradient(#ba0, #960);
}

span.rm-page-ref[data-tag="key"]::after {
    content: ' 🔑 '; /* 🔑🗝️ */
    display: inline-block;
    transform: rotate(45deg);
    position: relative;
    /*font-weight: bold;/**/
}



span.rm-page-ref[data-tag="generator"] {
    color: #0c0 !important;
}

span.rm-page-ref[data-tag="generator"]::after {
    content: ' ↯';
    display: inline-block;
    transform: rotate(-60deg);
}

span.rm-page-ref[data-tag="insight"] {
  color: #80f !important;
}

span.rm-page-ref[data-tag="experiment"] {
  color: #a0a !important;
}

span.rm-page-ref[data-tag="pattern"] {
  color: #c0c !important;
}

span.rm-page-ref[data-tag="portaged"] {
  color: #99d !important;
}

span.rm-page-ref[data-tag="harvested"] {
  color: #7c3 !important;
}

span.rm-page-ref[data-tag="harvested"]::after {
  content: " 🌾";
}


/*
span.rm-page-ref[data-tag="mentalmotion"] {
  color: #060 !important;
}/**/

span.rm-page-ref[data-tag="minimum"] {
  background-color: #FC0 !important;
  color: black !important;
}
span.rm-page-ref[data-tag="minimum"]::before {
  content: "\25c0  "
}

span.rm-page-ref[data-tag="secondary"] {
  background-color: #FFE780 !important;
  color: black !important;
}
span.rm-page-ref[data-tag="prioritize"] {
  background-color: #F8F !important;
  color: black !important;
}

span.rm-page-ref[data-tag="decision"], span.rm-page-ref[data-tag="decide"] {
  background-color: #9CF !important;
  color: #036 !important;
}

span.rm-page-ref[data-tag="decision"]::after {
  content: " \2702\a0"
}

span.rm-page-ref[data-tag="options"] {
  background-color: #DEF;
  color: #05A !important;
}

span.rm-page-ref[data-tag="options"]::after {
  content: " \24b6  \24b7  \24b8\a0"
}

span.rm-page-ref[data-tag="process"] {
    background-color: #7ab;
    color: white !important;
}

span.rm-page-ref[data-tag="process"] ~ *, .process-proj {
    color: #7ab !important;
    font-family: 'Arial';
    font-style: italic;
}
.process-proj .content {
    font-family: 'Arial';
}

span.rm-page-ref[data-tag="qq"] {
    font-size: 1px;
    line-height: 1px;
    display: inline;
    opacity: 0;
}

.qq-proj {
    /* color: #936; */
    color: #388 !important;
    font-style: italic;
    position: relative;
}

.qq-proj > .name:first-child > .bullet {
    visibility: hidden
}
/*
.qq-proj > .name:first-child > .bullet:hover {
    opacity: 1
}*/

.qq-proj::before, .qq-proj::after {
    position: absolute;
    font-size: 300%;
    z-index: 10000;
    font-family: "Liberation Serif", "Droid Serif", "Georgia";
    /* font-family: 'Times New Roman', 'Asea', serif; */
    font-weight: bold;
    /* background: white; */
}
.qq-proj::before {
    content: '\201c';
}
.qq-proj::after {
    content: '\201d';
    right: -5px;
    bottom: -18px;
}

/***************/

span.rm-page-ref[data-tag="mol"] {
    font-size: 1px;
    line-height: 1px;
    display: inline;
    opacity: 0;
}
.mol-proj > .name > .content {
    /* color: #936; */
    color: #00ccff !important;
    font-style: italic;
    position: relative;
}

.mol-proj > .name:first-child > .bullet {
    visibility: hidden
}
/*
.mol-proj > .name:first-child > .bullet:hover {
    opacity: 1
}*/

.mol-proj > .name > .content::before {
    display: inline-block;
    position: absolute;
    font-size: 80%;
    z-index: 10000;
    height: 1.5em;
    font-weight: bold;
    font-style: normal;
    background: #00ccff;
    color: white !important;
}
.mol-proj > .name > .content::before {
    content: ' MoL ';
    left: -32px;
}
/***************/

span.rm-page-ref[data-tag="sq"] {
    font-size: 1px;
    line-height: 1px;
    display: inline;
    opacity: 0;
}
.sq-proj > .name > .content {
    /* color: #936; */
    color: #388 !important;
    font-style: italic;
    position: relative;
}

.sq-proj > .name:first-child > .bullet {
    visibility: hidden
}
/*
.sq-proj > .name:first-child > .bullet:hover {
    opacity: 1
}*/

.sq-proj > .name > .content::before,
.sq-proj > .name > .content::after {
    position: absolute;
    font-size: 300%;
    z-index: 10000;
    font-family: "Liberation Serif", "Droid Serif", "Georgia";
    /* font-family: 'Times New Roman', 'Asea', serif; */
    font-weight: bold;
    /* background: white; */
}
.sq-proj > .name > .content::before {
    content: '\201c';
    left: -25px;
    top: 10px
}
.sq-proj > .name > .content::after {
    content: '\201d';
    right: -10px;
    bottom: -10px;
}
/***************/

span.rm-page-ref[data-tag="thinkingabout"], span.rm-page-ref[data-tag="thinkingabout"] ~ *, .thinkingabout-proj,
span.rm-page-ref[data-tag="freewriting"], span.rm-page-ref[data-tag="freewriting"] ~ *, .freewriting-proj {
    color: #693 !important;
    font-style: italic;
}

span.rm-page-ref[data-tag="longcrit"], .longcrit-proj {
    color: red !important;
}

span.rm-page-ref[data-tag="highlight"] {
    background-color: #EF0;
    color: black !important;
    opacity: 0.2;
}

.highlight-proj {
    background-color: rgba(238, 255, 0, 0.5);
}

.highlight-proj .bullet {
  background-color: rgba(255,255, 0, 0.8);
}



span.rm-page-ref[data-tag="delegate"] {
    background: linear-gradient(#9c0, #460);
    color: #df9 !important;
}

span.rm-page-ref[data-tag="delegate"]:after {
    content: '➔👤'
}

.mono-proj {
    font-family: monospace;
    font-style: normal;
}

span.rm-page-ref[data-tag="NB"] + * {
  color: #C00 !important;
  background: #ff9 !important;
}

span.rm-page-ref[data-tag="H"] + * {
  background: #fc0;
}

span.rm-page-ref[data-tag="p_"]:hover {
  background: #666;
}

span.rm-page-ref[data-tag="p_"] {
  font-weight: bold;
  color: #fff !important;
  background-color: black;
  padding: 4px 4px 1px;
  border-radius: 100px;
  text-decoration: none;
}
span.rm-page-ref[data-tag="sp_"] * {
  text-decoration: none;
}

span.rm-page-ref[data-tag="meta"] {
  font-weight: bold;
  color: #f0f !important;
  background-color: black;
  padding: 1px 4px 2px;
  box-shadow: 0 0 2px 1px rgba(255,255,255,0.3);
}

span.rm-page-ref[data-tag="meta"]::after {
  content: "\221e";
  font-size: 150%;
  line-height: 50%;
  position: relative;
  top: 0.1em;
  left: 0.1em;
}

span.rm-page-ref[data-tag="definitely"] {
  color: #0c4 !important;
}

span.rm-page-ref[data-tag="probably"] {
  color: #ab0 !important;
}

span.rm-page-ref[data-tag="maybe"] {
  color: #f90 !important;
}

span.rm-page-ref[data-tag="unlikely"] {
  color: #f00 !important;
}

span.rm-page-ref[data-tag="definitely"] span.rm-page-refText,
span.rm-page-ref[data-tag="probably"] span.rm-page-refText,
span.rm-page-ref[data-tag="maybe"] span.rm-page-refText,
span.rm-page-ref[data-tag="unlikely"] span.rm-page-refText {
  opacity: 0.3
}

span.rm-page-ref[data-tag="definitely"]::after,
span.rm-page-ref[data-tag="probably"]::after,
span.rm-page-ref[data-tag="maybe"]::after,
span.rm-page-ref[data-tag="unlikely"]::after {
  background: #ff0;
  text-shadow: 0 0 2px black, 0 0 2px black,0 0 2px black;
  border-radius: 4px;
  box-shadow: -1px -1px 1px #990 inset, 1px 1px 1px #ff9 inset;/**/
  display: inline-block;
  padding: 0 3px 3px;
  margin: 0 3px -3px;
  content: "\2b24";
  position: relative;
  top: -2px;
}


span.rm-page-ref[data-tag="habitify"] {
  color: #f30 !important;
}

span.rm-page-ref[data-tag="habitify"]::before {
  content: "\1F4AA  "
}

span.rm-page-ref[data-tag="link"] {
  color: #f09 !important;
}
span.rm-page-ref[data-tag="link"]::after {
  content: " \1f517"
}

span.rm-page-ref[data-tag="design"] {
  color: #d0d !important;
}
span.rm-page-ref[data-tag="design"]::after {
  content: " \1f3a8"
}

span.rm-page-ref[data-tag="architecture"] {
  color: #a0e !important;
}
span.rm-page-ref[data-tag="architecture"]::after {
  content: " 🏛️";/* crane: 🏗️  */
  font-weight: bold;
}



span.rm-page-ref[data-tag="ops"] {
  display: inline-block;
  position: relative;
  border-radius: 0;
  padding: 0;
  background: black;
  color: #f30 !important;
  margin-left: 0.8em;
  margin-right: 0.8em;
  font-size: 0.8em;
  line-height: 1.4;  
}

span.rm-page-ref[data-tag="ops"]:hover {
  background: black;  
}

span.rm-page-ref[data-tag="ops"]::before, span.rm-page-ref[data-tag="ops"]::after {
  border-style: solid;
  position: absolute;
  content: "";
  width:0px;
  height:0px;
  display: inline-block;
  top: 0;
}

span.rm-page-ref[data-tag="ops"]::before {
  border-width: 0.7em 0.7em 0.7em 0;
  border-color: transparent black transparent transparent;
  left:-0.65em;
}

span.rm-page-ref[data-tag="ops"]::after {
  border-width: 0.7em 0 0.7em 0.7em;
  border-color: transparent transparent transparent black;
  right:-0.65em;
}

hide sign-in button (probably wanted for all roams that no public folk can sign into)

/* hide sign-in button */
.roam-sidebar-container.noselect
.flex-v-box.roam-sidebar-content .flex-h-box
.bp3-button.bp3-minimal:not(.bp3-icon-menu-closed):not(.bp3-icon-plus) {
  background: #9600ff;
  display: block !important;
  display: none !important;
}

display external link icon like wikipedia

internal trust-dancing
twitter
image for this:

a.rm-alias--external {
    color: #33e;
    text-decoration: underline;
    text-decoration-color: #88fa;
}

a.rm-alias--external:hover {
    color: #11e;
    text-decoration-color: #11e;
}

a.rm-alias--external:after {
    content: "";
    width: 12px;
    height: 12px;
    margin-left: 2px;
    background-repeat: no-repeat;
    background-size: 12px;
    background-image: url(https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fmalcolmocean%2FEeeKgfFTDj.svg?alt=media&token=47663073-215c-479f-8e43-862771f296d2);
    filter: hue-rotate(11deg) contrast(200%) grayscale(20%);
    display: inline-block;
}

.rm-block-text a:not(.rm-alias)[href^="https://malcolmocean.com"]:after,
a.rm-alias--external[href^="https://malcolmocean.com"]:after {
  background-image: url(https://malcolmocean.com/favicon.png) !important;
  filter: none !important;
}

a.rm-alias--external[href^="https://twitter.com"] {
  color: #1DA1F2;
  text-decoration: none;
  text-decoration-color: inherit !important;
  opacity: 0.8;
}
a.rm-alias--external[href^="https://twitter.com"]:hover {
  opacity: 1;
}

.rm-block-text a:not(.rm-alias)[href^="https://twitter.com"]:after,
a.rm-alias--external[href^="https://twitter.com"]:after {
  /*
  background-image: url(https://abs.twimg.com/favicons/twitter.ico) !important;
  */
  filter: hue-rotate(-15deg) !important;
  color: #1DA1F2;
}

auto darktheme (device)

@media (prefers-color-scheme: dark) {

html[lang="en"] > body,
body #app {
    background: black;
}

.rm-code-block {
  background: #111 !important;
}
.ͼ2 .cm-gutters {
  background: #181818 !important;
}

.cm-focused .cm-activeLine,
.cm-focused .cm-activeLineGutter {
  background: #332c26 !important;
}

.bp3-elevation-3 {
    box-shadow: 0 0 0 1px rgba(128,128,128,0.1), 0 2px 4px rgba(128,128,128,0.2), 0 8px 24px rgba(64,64,64,0.2);
}

.rm-autocomplete__results {
    background: black;
    color: #999;
}

.rm-inline-references {
    background-color: #321;
}

.rm-block__self .rm-block__ref-count.rm-active {
    background: #930;
}

#right-sidebar,
*[style*='background-color: rgb(216, 225, 232)'] {
    background-color: #111111 !important;
}

*[style*='background-color: rgb(235, 241, 245)'] {
    background-color: #111315 !important;
}

*[style*=' background-color: white;'] {
    background: black !important;
}

.rm-embed-container {
    background-color: #111315 !important;
}

.rm-reference-item {
    background-color: #181a1c !important;
}

.roam-topbar,
.rm-topbar {
    background-color: black;
}

.bp3-input,
.bp3-input[readonly]{
    background: black;
    box-shadow: inset 0 0 0 1px rgba(223, 234, 245, 0.15);
}

.roam-body .roam-app,
.roam-body .roam-app h1 {
    color: #c0c6cc;
}

.roam-highlight {
    color: black;
}

.bp3-popover .bp3-popover-arrow-fill {
    fill: black;
}
.bp3-popover .bp3-popover-content,
.bp3-menu {
    background: black;
    color: #c0c6cc;
    box-shadow: 0 0 0 1px rgba(223, 234, 245, 0.1),
                0 2px 4px rgba(223, 234, 245, 0.2)/*,
                /*0 8px 24px rgba(16, 22, 26, 0.2)*/;
}

.rm-pages-row:first-child {
    background: #333 !important;
}
.rm-pages-row .rm-pages-title-col a {
    color: #ccc !important;
}
.rm-pages-row .rm-pages-title-col a + span,
.rm-pages-row .rm-pages-title-col .bp3-text-overflow-ellipsis {
    color: #444 !important;
}


.rm-pages-row.rm-pages-row-highlight {
    background-color: #111;
}

.roam-body .roam-app .roam-sidebar-container {
    background-color: #0c1013;
}

#roam-sidebar-logo {
    opacity: 0.4;
}
#roam-sidebar-logo:hover {
    opacity: 0.7;
}

.roam-article > div:last-child div:not(.bp3-icon) {
    /* background: #111 !important; */
}

.bp3-omnibar {
    background-color: #234;
}


a {
    color: #69f;
}
span.rm-page-ref {
    color: #69f;
}

.bp3-button.bp3-small.bp3-minimal.block-ref-count-button {
    color: white;
}

.rm-highlight {
    color: black;
    background: #fc4;
}

.rm-bq {
    background: #6676;
    border-left-color: #667;
}

.rm-pomodoro.running {
    background: #300 !important;
}

.rm-pomodoro.break {
    background: #031 !important;
}

.rm-multibar {
    border-right: 1px solid #BFCCD633;
}

#rm-mobile-bar {
    background: black;
}
#rm-mobile-bar .rm-mobile-button * {
    color: #642 !important;
}

simple scrollbar

/*
div::-webkit-scrollbar {
    width: 10px;
}

div::-webkit-scrollbar-track {
    background-color: #9993 !important;
}

div::-webkit-scrollbar-thumb {
    background-color: #9999 !important;
}
*/

custom favicon

(() => {
  'use strict'
  const iconUrl = "https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fmalcolmocean%2FEgyJivqP8h.png?alt=media&token=b1418e7c-26d6-4732-a87a-3fdb7b364caa"
  const faviconElements = document.querySelectorAll('[rel="shortcut icon"], [rel="icon"]')
  faviconElements.forEach(elem => {elem.href = iconUrl})
})()

notes
- move some of these to github then use @import url('...')

3 linked references

how to install userstyles & userscripts

necessary in order to take back control from the apps tha…

who don't have pages like roam/css and roam/js

January 19th, 2021

On Roam Clubhouse call › Lindsey asks: how custom css?

roam/css

June 4th, 2020

Roam launched custom per-database CSS! You should be seei…

You can check out the CSS used for this roam at roam/css. The styles used (mostly written by me) include:
- custom database theme for the malcolmocean roamblog:
- my custom tag styles (#portaged from my 8 year old workflowy account)
- hide sign-in button (probably wanted for all roams that no public folk can sign into)
- simple scrollbar
- display external link icon like wikipedia