silverbullet.md Tiniri theme

apply.css

/* more Tiniri themes: https://tiniri.vlad.studio/  */

html {
  --ui-font: ui-sans-serif, sans-serif !important;
  --editor-font: ui-sans-serif, sans-serif !important;
  --editor-width: 800px !important;
  line-height: 1.5 !important;
}

html {
  --root-background-color: #faf8f4 !important;
  --root-color: #3d3b3a !important;
  --subtle-background-color: #78716c11 !important;
  --subtle-color: #78716c !important;
  --highlight-color: #f7ddcb !important;
  --ui-accent-color: #ad514c !important;
  --link-color: #ad514c !important;
  --meta-subtle-color: #78716c88 !important;
  --modal-background-color: #fffefd !important;
  --top-border-color: #78716c22 !important;
  --top-loading-color: #356b94 !important;
  --top-sync-error-background-color: #e5979399 !important;
  --editor-code-number-color: #356b94 !important;
  --editor-code-typename-color: #356b94 !important;
  --editor-frontmatter-marker-color: #89000080 !important;
  --editor-selection-background-color: #dae5e2 !important;
}
html[data-theme=dark] {
  --root-background-color: #252629 !important;
  --root-color: #DBD3CA !important;
  --subtle-background-color: #222325 !important;
  --subtle-color: #A89080 !important;
  --highlight-color: #4B362E !important;
  --ui-accent-color: #C76363 !important;
  --link-color: #C76363 !important;
  --meta-subtle-color: #A8908088 !important;
  --modal-background-color: #353A42 !important;
  --top-border-color: #0003 !important;
  --top-loading-color: #9E8B8E !important;
  --top-sync-error-background-color: #5D3030 !important;
  --editor-code-number-color: #9E8B8E !important;
  --editor-code-typename-color: #9E8B8E !important;
  --editor-frontmatter-marker-color: #89000080 !important;
  --editor-selection-background-color: #314A52 !important;
}
html {
  --action-button-active-color: var(--root-color) !important;
  --action-button-background-color: transparent !important;
  --action-button-color: var(--top-loading-color) !important;
  --action-button-hover-color: var(--root-color) !important;
  --bhs-background-color: var(--root-background-color) !important;
  --bhs-border-color: var(--top-border-color) !important;
  --editor-blockquote-background-color: transparent !important;
  --editor-blockquote-border-color: var(--top-loading-color) !important;
  --editor-blockquote-color: var(--subtle-color) !important;
  --editor-caret-color: var(--ui-accent-color) !important;
  --editor-code-atom-color: var(--ui-accent-color) !important;
  --editor-code-background-color: var(--subtle-background-color) !important;
  --editor-code-color: var(--subtle-color) !important;
  --editor-code-comment-color: var(--meta-subtle-color) !important;
  --editor-code-info-color: var(--subtle-color) !important;
  --editor-code-operator-color: var(--ui-accent-color) !important;
  --editor-code-string-color: var(--ui-accent-color) !important;
  --editor-code-variable-color: var(--ui-accent-color) !important;
  --editor-command-button-background-color: var(--action-button-background-color) !important;
  --editor-command-button-border-color: transparent !important;
  --editor-command-button-color: var(--action-button-color) !important;
  --editor-command-button-hover-background-color: var(--root-color) !important;
  --editor-command-button-meta-color: var(--meta-subtle-color) !important;
  --editor-completion-detail-color: var(--subtle-color) !important;
  --editor-completion-detail-selected-color: var(--highlight-color) !important;
  --editor-directive-background-color: var(--subtle-background-color) !important;
  --editor-directive-color: var(--subtle-color) !important;
  --editor-directive-mark-color: var(--editor-code-number-color) !important;
  --editor-frontmatter-background-color: var(--subtle-background-color) !important;
  --editor-frontmatter-color: var(--subtle-color) !important;
  --editor-hashtag-background-color: var(--editor-selection-background-color) !important;
  --editor-hashtag-border-color: var(--top-border-color) !important;
  --editor-hashtag-color: var(--subtle-color) !important;
  --editor-heading-color: var(--root-color) !important;
  --editor-heading-meta-color: var(--meta-subtle-color) !important;
  --editor-highlight-background-color: var(--highlight-color) !important;
  --editor-line-meta-color: var(--meta-subtle-color) !important;
  --editor-link-color: var(--link-color) !important;
  --editor-link-meta-color: var(--meta-subtle-color) !important;
  --editor-link-url-color: var(--link-color) !important;
  --editor-list-bullet-color: var(--subtle-color) !important;
  --editor-meta-color: var(--meta-color) !important;
  --editor-naked-url-color: var(--link-color) !important;
  --editor-named-anchor-color: var(--meta-subtle-color) !important;
  --editor-panels-bottom-background-color: var(--subtle-background-color) !important;
  --editor-panels-bottom-border-color: var(--top-border-color) !important;
  --editor-panels-bottom-color: var(--root-color) !important;
  --editor-ruler-color: var(--subtle-color) !important;
  --editor-struct-color: var(--link-color) !important;
  --editor-table-even-background-color: transparent !important;
  --editor-table-head-background-color: var(--subtle-background-color) !important;
  --editor-table-head-color: var(--subtle-color) !important;
  --editor-task-marker-color: var(--subtle-color) !important;
  --editor-task-state-color: var(--subtle-color) !important;
  --editor-widget-background-color: var(--subtle-background-color) !important;
  --editor-wiki-link-color: var(--link-color) !important;
  --editor-wiki-link-page-background-color: var(--subtle-background-color) !important;
  --editor-wiki-link-page-color: var(--link-color) !important;
  --editor-wiki-link-page-missing-color: var(--link-missing-color) !important;
  --link-missing-color: var(--meta-subtle-color) !important;
  --meta-color: var(--subtle-color) !important;
  --modal-border-color: var(--top-border-color) !important;
  --modal-color: var(--root-color) !important;
  --modal-description-color: var(--subtle-color) !important;
  --modal-header-label-color: var(--ui-accent-color) !important;
  --modal-help-background-color: var(--modal-background-color) !important;
  --modal-help-color: var(--subtle-color) !important;
  --modal-hint-background-color: var(--subtle-background-color) !important;
  --modal-hint-color: var(--subtle-color) !important;
  --modal-selected-option-background-color: var(--editor-selection-background-color) !important;
  --modal-selected-option-color: var(--root-color) !important;
  --notification-error-background-color: var(--top-sync-error-background-color) !important;
  --notification-info-background-color: var(--highlight-color) !important;
  --notifications-background-color: var(--highlight-color) !important;
  --notifications-border-color: var(--top-border-color) !important;
  --panel-background-color: var(--root-background-color) !important;
  --panel-border-color: var(--top-border-color) !important;
  --top-background-color: var(--subtle-background-color) !important;
  --top-color: var(--root-color) !important;
  --top-saved-color: var(--root-color) !important;
  --top-sync-error-color: var(--top-color) !important;
  --top-unsaved-color: var(--subtle-color) !important;
}

#sb-top * {
  font-family: ui-sans-serif, sans-serif !important;
}

#sb-top .main .inner {
  font-size: 1.2rem !important;
}
#sb-top .main .inner .wrapper {
  align-items: center;
}

.sb-help-text,
.sb-help-text * {
  font-family: ui-sans-serif, sans-serif !important;
  font-size: 12px;
}

#sb-main .cm-editor {
  font-size: 15px;
  margin-top: 2rem;
}

.sb-modal-box {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
  padding: 4px !important;
  border: 1px solid var(--top-border-color);
}

.cm-searchMatch {
  background-color: var(--highlight-color) !important;
}
.cm-textfield,
.cm-button {
  font-size: inherit !important;
}
.sb-line-tbl-header {
  background-color: var(--subtle-background-color) !important;
}
.sb-strong {
  font-weight: 600 !important;
}
.cm-scroller {
  line-height: 1.7 !important;
}
.sb-quote {
  margin-left: 1rem !important;
}
.sb-line-fenced-code {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.sb-line-fenced-code,
.sb-code {
  font-family: "SF Mono", monospace !important;
}
button {
  display: flex !important;
  align-items: center !important;
  justify-items: center !important;
}

/* fix safari scroll bars in Open and Run Command */
.sb-modal-box .cm-scroller > .cm-content > .cm-line{display: unset; line-height: 1.9 !important;}