Custom CSS for Dynalist

dynalist.css

/* dynalist.css */

/* tags */

.node-tag {
  background: rgba(255, 165, 0, 0.8);
  font-size: 0.8em;
  border-radius: 0.3em;
  font-weight: bold;
  padding: 2px 5px;
  color: white;
  text-decoration: none;
}

.node-tag:hover {
  background: rgba(255, 165, 0, 1);
}

/* notes */

.Node-noteContainer > [class*='Node'] {
  font-family: 'Fira Code Light', Menlo, monospace;
  font-size: 0.6rem;
  opacity: 0.7;
}

.Node-noteContainer a:hover {
  color: black;
}

/* code */

.node-inline-code > span {
  font-family: 'Fira Code', Menlo, monospace;
  background: rgba(0, 0, 0, 0.01);
  font-size: 0.8em;
  padding: 0.1em;
}

/* current line highlight */

.CurrentLineHighlight {
  background: rgba(200, 200, 200, 0.1);
  border-left: 5px solid orange;
  box-sizing: border-box;
}

/* page header */

.Node.is-currentRoot > .Node-self .node-line {
  font-family: 'Fira Code', Menlo, monospace;
  font-weight: 300 !important;
  font-size: 1.5em !important;
  letter-spacing: -0.07em !important;
  line-height: 1 !important;
}

.Node-self.is-heading {
  font-family: 'Fira Code', Menlo, monospace;
}

/* H1 */

.is-smallFont .Node-self.is-heading1 .Node-contentContainer {
  font-size: 26px;
}

.Node-self.is-heading1 .Node-content,
.Node-self.is-heading1 .Node-renderedContent {
  font-weight: 300;
}

/* H2 */

.is-smallFont .Node-self.is-heading2 .Node-contentContainer {
  font-size: 18px;
}

.Node-self.is-heading2 .Node-content,
.Node-self.is-heading2 .Node-renderedContent {
  font-weight: 600;
}

/* H3 */

.is-smallFont .Node-self.is-heading3 .Node-contentContainer {
  font-size: 14px;
}

.Node-self.is-heading3 [class*='Node'] {
  font-weight: 600;
}

/* CSS textarea */

.setting-section.mod-custom-css .setting-right {
  display: block;
  width: 100%;
}

.setting-section.mod-custom-css .setting-right textarea {
  height: 60em;
  resize: vertical;
}

.setting-right textarea {
  font-family: 'Fira Code', Menlo, monospace;
  font-size: 12px;
}

/* Bullets */

.Node-bullet {
  opacity: 0.3;
}


.is-numbered .Node-bullet {
  opacity: 0.5;
}

.Node-self:hover .Node-bullet {
  opacity: 0.5;
}


.Node-self.is-collapsed.is-parent > .Node-bullet {
  opacity: 0.5;
}