Last active
December 10, 2021 17:42
-
-
Save jenningsb2/4cb64909b26eff74db459a6b771fbcf6 to your computer and use it in GitHub Desktop.
A hacked together port of the Nord theme css for Logseq
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.rcvd.io/iA Writer/stylesheet.css"); | |
@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/bullet_threading.css"); | |
/* Block threading */ | |
:root { | |
--ls-block-bullet-threading-width: 2px; | |
} | |
/* Nord Color Palette */ | |
:root { | |
--nord0: #2E3440; | |
--nord1: #3B4252; | |
--nord2: #434C5E; | |
--nord3: #4C566A; | |
--nord4: #D8DEE9; | |
--nord5: #E5E9F0; | |
--nord6: #ECEFF4; | |
--nord7: #8FBCBB; | |
--nord8: #88C0D0; | |
--nord9: #81A1C1; | |
--nord10: #5E81AC; | |
--nord11: #BF616A; | |
--nord12: #D08770; | |
--nord13: #EBCB8B; | |
--nord14: #A3BE8C; | |
--nord15: #B48EAD; | |
} | |
/* Adding the iA writer font */ | |
html, | |
body, | |
div, | |
textarea { | |
font-family: "iA Writer Quattro S", "Inter", sans-serif; | |
} | |
/* Fixing the div line */ | |
hr { | |
margin-top: 0.8rem; | |
margin-bottom: 2rem; | |
} | |
/* block ref adjustments—making it easier to see them */ | |
.block-ref { | |
font-style: italic; | |
background-color: var(--ls-secondary-background-color); | |
} | |
/* Adding header style info */ | |
.ls-block :is(h1, h2, h3, h4, h5)::after { | |
margin-left: 0.5rem; | |
font-size: 0.6rem; | |
border-radius: 2px; | |
padding: 2px 5px !important; | |
background: var(--ls-tertiary-background-color); | |
vertical-align: middle; | |
opacity: 0.3; | |
} | |
.ls-block :is(h1, h2, h3, h4, h5):hover::after { | |
opacity: 1; | |
} | |
.ls-block h1::after { | |
content: "h1"; | |
} | |
.ls-block h2::after { | |
content: "h2"; | |
} | |
.ls-block h3::after { | |
content: "h3"; | |
} | |
.ls-block h4::after { | |
content: "h4"; | |
} | |
.ls-block h5::after { | |
content: "h5"; | |
} | |
/* Color theme (partially done) */ | |
.dark-theme, | |
html[data-theme='dark'] { | |
--ls-primary-background-color: var(--nord0); | |
--ls-secondary-background-color: var(--nord1); | |
--ls-tertiary-background-color: var(--nord2); | |
--ls-quaternary-background-color: var(--nord3); | |
--ls-table-tr-even-background-color: var(--nord1); | |
--ls-active-primary-color: var(--nord7); | |
--ls-active-secondary-color: var(--nord4); | |
--ls-block-properties-background-color: var(--nord0); | |
--ls-page-properties-background-color: var(--nord0); | |
--ls-block-ref-link-text-color: var(--nord13); | |
--ls-search-background-color: linear-gradient( | |
to right, | |
#021c23 0, | |
#021b21 200px, | |
var(--nord0) 100% | |
); | |
--ls-border-color: var(--nord3); | |
--ls-secondary-border-color: var(--nord2); | |
--ls-guideline-color: var(--nord2); | |
--ls-menu-hover-color: var(--ls-secondary-background-color); | |
--ls-primary-text-color: var(--nord6); | |
--ls-secondary-text-color: var(--nord4); | |
--ls-title-text-color: var(--nord14); | |
--ls-link-text-color: var(--nord8); | |
--ls-link-text-hover-color: var(--ls-active-secondary-color); | |
--ls-link-ref-text-color: var(--ls-link-text-color); | |
--ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); | |
--ls-tag-text-color: var(--ls-link-text-color); | |
--ls-tag-text-hover-color: var(--ls-link-text-hover-color); | |
--ls-slide-background-color: var(--ls-primary-background-color); | |
--ls-block-bullet-border-color: var(--nord3); | |
--ls-block-bullet-color: var(--nord6); | |
--ls-block-highlight-color: var(--nord2); | |
--ls-selection-background-color: var(--nord15); | |
--ls-page-checkbox-color: var(--nord8); | |
--ls-page-checkbox-border-color: var(--ls-primary-background-color); | |
--ls-page-blockquote-color: var(--ls-primary-text-color); | |
--ls-page-blockquote-bg-color: var(--ls-secondary-background-color); | |
--ls-page-blockquote-border-color: var(--ls-border-color); | |
--ls-page-inline-code-color: var(--ls-primary-text-color); | |
--ls-page-inline-code-bg-color: var(--nord3); | |
--ls-scrollbar-foreground-color: var(--nord3); | |
--ls-scrollbar-background-color: rgba(30, 60, 67, 0.1); | |
--ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2); | |
--ls-head-text-color: var(--ls-link-text-color); | |
--ls-cloze-text-color: var(--nord14); | |
--ls-icon-color: var(--ls-link-text-color); | |
--ls-search-icon-color: var(--ls-link-text-color); | |
--ls-a-chosen-bg: var(--ls-secondary-background-color); | |
--ls-right-sidebar-code-bg-color: #04303c; | |
--color-level-1: var(--ls-secondary-background-color); | |
--color-level-2: var(--ls-tertiary-background-color); | |
--color-level-3: var(--ls-quaternary-background-color); | |
--color-level-4: #195d6c; | |
--color-level-5: #266c7d; | |
--color-level-6: #3a7e8e; | |
--ls-block-bullet-active-color: var(--nord6); | |
} | |
mark { | |
background: var(--nord13); | |
} | |
.light-theme, | |
html[data-theme='light'] { | |
--ls-block-bullet-active-color: #000; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment