My current CSS theme for Logseq

custom.css

@import url("https://fonts.rcvd.io/iA Writer/stylesheet.css");

:root {
  --highlight-color: #ffdb8a;
}

a.tag[data-ref="important"] {
  border: 1px solid currentColor;
  background-color: var(--ct-block-reference-background);
  padding: 0 4px;
  border-radius: 10px;
  font-weight: 600;
  color: #df5823;
}

/* Tags */
a.tag {
  border: 1px solid currentColor;
  background-color: var(--ct-block-reference-background);
  padding: 0 4px;
  border-radius: 10px;
  font-weight: 600;
}

/* Formatting the Tasks */

.form-checkbox {
  border-radius: 10px;
  border: 2px solid var(--ls-link-text-color);
  background-color: #9cccff;
}

.waiting > .form-checkbox {
  border: 2px solid var(--highlight-color);
  background-color: #fff0ce;
}

.task-status.block-marker.waiting {
  color: #e0a210;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 600;
  padding: 0 4px;
  margin-right: 4px;
}

.marker-switch.block-marker.DOING,
.marker-switch.block-marker.TODO,
.marker-switch.block-marker.LATER {
  color: var(--ls-link-text-color);
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 600;
  padding: 0 4px;
  margin-right: 4px;
}

a.tag:hover {
  background-color: var(--ct-block-reference-background-hover);
}

/* Fixing the div line */

hr {
  margin-top: 0.8rem;
  margin-bottom: 2rem;
}

/* Adding a custom font */

html,
body,
div,
textarea {
  font-family: "iA Writer Quattro S", "Inter", sans-serif;
}

/* block ref adjustments—making it easier to see them */

.block-ref {
  border-bottom: 1px solid var(--highlight-color);
  font-style: italic;
  background-color: var(--ls-secondary-background-color);
}

.white-theme,
html[data-theme="light"] {
  --ls-link-text-color: #006adc;
  --ls-link-ref-text-color: #006adc;
}

mark {
  background: var(--highlight-color);
}

/* This allows for youtube videos to be viewed in a wider screen */

@media (min-width: 800px) {
  .cp__sidebar-main-content[style*="wide"] iframe[id*="youtube-player-"] {
    height: 400px !important;
  }
}

@media (min-width: 1000px) {
  .cp__sidebar-main-content[style*="wide"] iframe[id*="youtube-player-"] {
    height: 500px !important;
  }
}

@media (min-width: 1200px) {
  .cp__sidebar-main-content[style*="wide"] iframe[id*="youtube-player-"] {
    height: 600px !important;
  }
}