├── logseq-atlas-theme.json ├── .gitignore ├── icon.png ├── screenshot.png ├── src └── theme │ ├── main.scss │ ├── global.scss │ ├── _sidebar.scss │ ├── _colors.scss │ ├── _theme_light.scss │ └── _theme_dark.scss ├── .github ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md └── workflows │ └── deploy.yml ├── package.json ├── README.md ├── LICENSE └── custom.css /logseq-atlas-theme.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | dist -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sethfair/logseq-atlas-theme/HEAD/icon.png -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sethfair/logseq-atlas-theme/HEAD/screenshot.png -------------------------------------------------------------------------------- /src/theme/main.scss: -------------------------------------------------------------------------------- 1 | @import "global"; 2 | @import "colors"; 3 | @import "sidebar"; 4 | @import "theme_dark"; 5 | @import "theme_light"; 6 | 7 | body { 8 | color: var(--ct-primary-text-color); 9 | } -------------------------------------------------------------------------------- /src/theme/global.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --atlas-line-height: 2em; 3 | --atlas-font-size: 15px; 4 | --atlas-font-family: Segoe UI,Roboto,sans-serif; 5 | --atlas-title-font-family: Segoe UI,Roboto,sans-serif; 6 | } 7 | 8 | .cp__plugins-settings-inner .desc-item:hover { 9 | background: transparent; 10 | } 11 | 12 | #journals .journal-item { 13 | border-top: none; 14 | } 15 | 16 | .form-checkbox:checked { 17 | background-color: var(--ct-secondary-color) 18 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "logseq-atlas-theme", 3 | "version": "0.3.5", 4 | "description": "Clean theme for Logseq.", 5 | "author": "sethfair", 6 | "repo": "sethfair/logseq-atlas-theme", 7 | "license": "MIT", 8 | "logseq": { 9 | "themes": [ 10 | { 11 | "name": "Atlas Theme: Light", 12 | "url": "./custom.css", 13 | "mode": "light" 14 | }, 15 | { 16 | "name": "Atlas Theme: Dark", 17 | "url": "./custom.css", 18 | "mode": "dark" 19 | } 20 | ], 21 | "icon": "./icon.png", 22 | "id": "logseq-atlas-theme" 23 | }, 24 | "scripts": { 25 | "build": "npx sass src/theme/main.scss custom.css --no-source-map", 26 | "watch": "npx sass src/theme/main.scss custom.css --no-source-map --watch", 27 | "postversion": "git push && git push --tags" 28 | }, 29 | "devDependencies": { 30 | "sass": "^1.43.4" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot](./screenshot.png) 2 | 3 | ## Atlas Theme for Logseq 4 | 5 | Atlas theme provides a pure and distraction-free experience with always a dark sidebar. 6 | 7 | ## What is Logseq? 8 | Logseq is a privacy-first, open-source knowledge base. Visit https://logseq.com/ for more information. 9 | 10 | ## Settings 11 | You can customize the following parameters in your `custom.css` file. 12 | ``` 13 | :root { 14 | --atlas-line-height: 2em; 15 | --atlas-font-size: 0.95em; 16 | --atlas-font-family: Segoe UI,Roboto,sans-serif; 17 | --atlas-title-font-family: Segoe UI,Roboto,sans-serif; 18 | --atlas-header-text-color: #455461; 19 | --atlas-sidebar-text-color: #627789; 20 | --atlas-sidebar-text-color-hover: #a9bdca; 21 | } 22 | ``` 23 | ## Support 24 | If you have any questions, issues or feature request, use the issue submission on GitHub: https://github.com/sethfair/logseq-atlas-theme/issues 25 | 26 | ## License 27 | 28 | [MIT License](./LICENSE) 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /src/theme/_sidebar.scss: -------------------------------------------------------------------------------- 1 | #sidebar-nav-wrapper { 2 | &.cp__sidebar-left-layout:before { 3 | text-align: initial; 4 | } 5 | 6 | 7 | #left-menu { 8 | opacity: 1; 9 | } 10 | 11 | 12 | 13 | } 14 | .left-sidebar-inner { 15 | a.item:hover, .nav-content-item .header:hover { 16 | background-color: var(--ct-primary-hover-color); 17 | } 18 | } 19 | 20 | .new-page-link { 21 | color: var(--atlas-sidebar-text-color-hover); 22 | background-color: var(--ct-primary-hover-color); 23 | } 24 | .cp__sidebar-left-layout { 25 | a { 26 | font-size: 13px; 27 | font-kerning: auto; 28 | color: var(--atlas-sidebar-text-color) !important; 29 | } 30 | 31 | a:hover { 32 | color: var(--atlas-sidebar-text-color-hover) !important; 33 | } 34 | } 35 | 36 | #search-button, #left-menu { 37 | color: #fafafa; 38 | } 39 | 40 | #search-button:hover, #left-menu:hover { 41 | background-color: var( --ct-primary-hover-color); 42 | } 43 | 44 | .left-sidebar-inner .nav-content-item .header .cp__sidebar-left-layout a { 45 | color: var(--atlas-header-text-color) !important; 46 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 Seth Fair 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | on: 3 | push: 4 | # Sequence of patterns matched against refs/tags 5 | tags: 6 | - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10 7 | 8 | env: 9 | PLUGIN_NAME: logseq-focus-mode 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: "14.x" # You might need to adjust this value to your own version 20 | - name: Build 21 | id: build 22 | run: | 23 | npm install -g yarn 24 | yarn 25 | yarn build 26 | mkdir ${{ env.PLUGIN_NAME }} 27 | cp README.md package.json icon.png screenshot.png LICENSE custom.css ${{ env.PLUGIN_NAME }} 28 | zip -r ${{ env.PLUGIN_NAME }}.zip ${{ env.PLUGIN_NAME }} 29 | ls 30 | echo "::set-output name=tag_name::$(git tag --sort version:refname | tail -n 1)" 31 | 32 | - name: Create Release 33 | id: create_release 34 | uses: actions/create-release@v1 35 | env: 36 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 37 | VERSION: ${{ steps.build.outputs.tag_name }} 38 | with: 39 | tag_name: ${{ github.ref }} 40 | release_name: ${{ github.ref }} 41 | draft: false 42 | prerelease: false 43 | 44 | - name: Upload zip file 45 | id: upload_zip 46 | uses: actions/upload-release-asset@v1 47 | env: 48 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 49 | with: 50 | upload_url: ${{ steps.create_release.outputs.upload_url }} 51 | asset_path: ./${{ env.PLUGIN_NAME }}.zip 52 | asset_name: ${{ env.PLUGIN_NAME }}-${{ steps.build.outputs.tag_name }}.zip 53 | asset_content_type: application/zip 54 | 55 | - name: Upload package.json 56 | id: upload_metadata 57 | uses: actions/upload-release-asset@v1 58 | env: 59 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 60 | with: 61 | upload_url: ${{ steps.create_release.outputs.upload_url }} 62 | asset_path: ./package.json 63 | asset_name: package.json 64 | asset_content_type: application/json 65 | -------------------------------------------------------------------------------- /src/theme/_colors.scss: -------------------------------------------------------------------------------- 1 | .white-theme, 2 | html[data-theme=light], .dark-theme, html[data-theme=dark] { 3 | /* == Backgrounds == */ 4 | --ct-primary-color: #182026; 5 | --ct-primary-hover-color: #10161A; 6 | --ct-secondary-color: #5c778a; 7 | --ct-tertiary-color: #F5F8FA; 8 | --ct-primary-text-color: #24292e; 9 | --ct-icon-color: #5c7080; 10 | 11 | --ct-warning-color: #e54d2e; 12 | --ct-warning-color-text: var(--ct-primary-color); 13 | --ct-success-color: #46a857; 14 | --ct-success-color-text: var(--ct-primary-color); 15 | --ct-highlight-color: rgba(255,255,60,.4); 16 | --ct-highlight-color-text: black; 17 | 18 | --ls-link-text-color: var(--ct-primary-text-color); 19 | --ls-primary-background-color: #FFFFFF; 20 | --ls-secondary-background-color: var(--ct-primary-color); 21 | --ls-tertiary-background-color: var(--ct-tertiary-color); 22 | --ls-quaternary-background-color: var(--ct-primary-hover-color); 23 | --ls-table-tr-even-background-color: var(--ct-tertiary-color); 24 | --ls-page-properties-background-color: var(--ct-tertiary-color); 25 | 26 | --ls-page-blockquote-border-color: var(--ct-primary-color); 27 | --ls-page-blockquote-bg-color: #FFFFFF; 28 | 29 | /* == Text == */ 30 | --ls-primary-text-color: #444444; 31 | --ls-secondary-text-color: rgba(250,250,250,0.8); 32 | --atlas-header-text-color: #455461; 33 | --atlas-sidebar-text-color: #627789; 34 | --atlas-sidebar-text-color-hover: #a9bdca; 35 | 36 | /* == Checkboxes */ 37 | --ls-page-checkbox-color: #ffffff; 38 | --ls-page-checkbox-border-color: var(--ct-secondary-color); 39 | /* == Borders + Outlines */ 40 | --ls-border-color: #586e75; 41 | --ls-guideline-color: rgba(46, 27, 5, 0.08); 42 | 43 | /* == Misc == */ 44 | --ls-menu-hover-color: var(--ct-tertiary-color); 45 | --ls-title-text-color: var(--ct-primary-color); 46 | --ls-block-highlight-color: var(--ct-tertiary-color); 47 | --ls-icon-color: var(--ct-icon-color); 48 | --ls-search-icon-color: var(--ct-icon-color); 49 | --color-level-1: var(--ls-secondary-background-color); 50 | --color-level-2: var(--ls-tertiary-background-color); 51 | --color-level-3: var(--ls-quaternary-background-color); 52 | --color-level-4: var(--cd-fifth-bg-color); 53 | --color-level-5: var(--cd-sixth-bg-color); 54 | --color-level-6: #3a7e8e; 55 | 56 | /* === SELECTIONS === */ 57 | --ls-selection-background-color: rgba(255,255,60,.4); 58 | 59 | } -------------------------------------------------------------------------------- /src/theme/_theme_light.scss: -------------------------------------------------------------------------------- 1 | .white-theme, 2 | html[data-theme="light"] { 3 | #search-button, #left-menu { 4 | color: #c1c1c1; 5 | } 6 | 7 | 8 | #main-content-container .editor-wrapper textarea, #main-content-container .block-content-wrapper .inline { 9 | line-height: var(--atlas-line-height); 10 | font-size: var(--atlas-font-size); 11 | } 12 | 13 | #main-content-container { 14 | font-family: var(--atlas-font-family); 15 | font-size: 1em; 16 | font-weight: 400; 17 | letter-spacing: .002em; 18 | } 19 | 20 | #main-content-container h1.title { 21 | font-family: var(--atlas-title-font-family); 22 | } 23 | 24 | .blocks-container { 25 | padding: 10px; 26 | .pr-2 { 27 | font-size: 13px; 28 | } 29 | } 30 | 31 | .cp__header a { 32 | color: var(--ls-icon-color); 33 | } 34 | 35 | .left-sidebar-inner a.item, .left-sidebar-inner .nav-content-item .bd ul a, .left-sidebar-inner .header a{ 36 | color: var(--ls-secondary-text-color); 37 | } 38 | 39 | .ui__modal-panel { 40 | background-color: #FFFFFF; 41 | } 42 | 43 | .page-reference:hover { 44 | background-color: transparent; 45 | } 46 | 47 | .color-level { 48 | background-color: transparent; 49 | .content { 50 | padding: 5px 0; 51 | } 52 | .blocks-container { 53 | background-color: var(--ct-tertiary-color); 54 | padding: 10px; 55 | .pr-2 { 56 | font-size: 13px; 57 | } 58 | } 59 | 60 | } 61 | 62 | .tippy-tooltip { 63 | background-color: #f5f8fa; 64 | border: 1px solid #ccc; 65 | } 66 | 67 | .tippy-wrapper { 68 | background-color: #ffffff; 69 | } 70 | 71 | .page-properties { 72 | font-size: 13px; 73 | line-height: 2.2em; 74 | 75 | .page-property-key { 76 | color:var(--ct-primary-text-color) 77 | } 78 | } 79 | 80 | a.page-ref, a.external-link { 81 | color: var(--ct-primary-text-color); 82 | border-bottom: 1px dashed rgba(36, 41, 46, 0.25); 83 | } 84 | 85 | a.page-ref:hover, a.external-link:hover { 86 | border-bottom: 1px dashed rgba(36, 41, 46, 1); 87 | } 88 | 89 | a.external-link:before { 90 | font-family: tabler-icons!important; 91 | content: '\ea99'; 92 | } 93 | 94 | .cp__plugins-item-card, .ui__button { 95 | background-color: var(--ct-tertiary-color); 96 | } 97 | 98 | #main-content-container .ui__button, .ui__modal-panel .ui__button { 99 | background-color: var(--ct-primary-color); 100 | } 101 | 102 | .graph-filters { 103 | background-color: var(--ct-tertiary-color); 104 | } 105 | 106 | .cp__right-sidebar { 107 | background-color: var(--ct-tertiary-color); 108 | } 109 | 110 | .cp__right-sidebar-topbar { 111 | background-color: #eaf0f5; 112 | border-bottom: 1px solid #cccccc; 113 | } 114 | 115 | .sidebar-item-list .sidebar-item { 116 | background-color: #ffffff; 117 | margin-left: 4px; 118 | 119 | .blocks-container { 120 | background-color: #ffffff; 121 | } 122 | } 123 | 124 | .form-checkbox { 125 | border: 1px solid var(--ls-page-checkbox-border-color); 126 | border-radius: 2px; 127 | } 128 | 129 | .cp__all_pages { 130 | .cp__all_pages_table { 131 | th { 132 | border-bottom: 1px solid var(--ls-border-color); 133 | } 134 | } 135 | .search-wrap { 136 | .form-input { 137 | border: none; 138 | border-bottom: 1px solid var(--ct-primary-color); 139 | border-radius: 0; 140 | } 141 | .ui__button { 142 | background: transparent !important; 143 | } 144 | } 145 | } 146 | 147 | .cp__sidebar-help-btn { 148 | background-color: var(--ct-tertiary-color); 149 | color: var(--ct-secondary-color); 150 | border: 1px solid var(--ct-secondary-color) 151 | } 152 | 153 | .cp__palette-main .chosen { 154 | background-color: var(--ct-tertiary-color); 155 | } 156 | 157 | h1.title { 158 | font-weight: 500; 159 | text-decoration: none; 160 | font-size:36px; 161 | } 162 | 163 | .cp__plugins-page .ui__button, .cp__settings-inner>aside ul>li.active, blockquote{ 164 | background-color: var(--ct-tertiary-color) !important; 165 | } 166 | 167 | .cp__settings-inner>aside ul>li>a { 168 | background: none; 169 | } 170 | 171 | .keyboard-shortcut>code { 172 | color: #ffffff; 173 | } 174 | 175 | .cp__themes-installed>.it { 176 | background: none; 177 | } 178 | 179 | .cp__themes-installed>.it.is-active { 180 | background-color: var(--ct-tertiary-color); 181 | border: none; 182 | } 183 | 184 | .cp__settings-app-updater .update-state { 185 | background-color: var(--ct-tertiary-color); 186 | color: var(--ct-primary-color) 187 | } 188 | 189 | #main-content input.form-checkbox:checked { 190 | background-color: var(--ls-page-checkbox-border-color); 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /src/theme/_theme_dark.scss: -------------------------------------------------------------------------------- 1 | .dark-theme, 2 | html[data-theme="dark"] { 3 | --ct-highlight-color: rgba(255, 255, 41, 0.7); 4 | --ls-selection-background-color: var(--ct-highlight-color); 5 | --ls-primary-background-color: #121a1f; 6 | --ct-primary-text-color: rgba(250, 250, 250, 0.80 );; 7 | --ls-title-text-color: #ffffff; 8 | --ls-link-ref-text-color: #ffffff; 9 | --ls-primary-text-color: var(--ct-primary-text-color); 10 | --ls-link-text-color: var(--ct-secondary-color); 11 | --ls-guideline-color: rgba(250, 250, 250, 0.25); 12 | --ls-table-tr-even-background-color: rgba(250, 250, 250, 0.01); 13 | --ls-block-properties-background-color: rgba(250, 250, 250, 0.01); 14 | 15 | --ls-block-bullet-color: #ffffff; 16 | --ls-block-bullet-border-color: var(--ls-guideline-color); 17 | 18 | --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1); 19 | --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05); 20 | --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2); 21 | 22 | --ls-page-blockquote-border-color: transparent; 23 | --ls-page-blockquote-bg-color: rgba(0, 0, 0, 0.2); 24 | --ls-page-blockquote-color: var(--ct-primary-text-color); 25 | 26 | ::selection { 27 | color: var(--ct-primary-color); 28 | } 29 | 30 | #main-content-container .editor-wrapper textarea, #main-content-container .block-content-wrapper .inline { 31 | line-height: var(--atlas-line-height); 32 | font-size: var(--atlas-font-size); 33 | } 34 | 35 | .page-properties { 36 | background-color: rgba(133, 164, 191, 0.05); 37 | } 38 | 39 | 40 | #main-content-container { 41 | font-family: var(--atlas-font-family); 42 | font-size: 1em; 43 | font-weight: 400; 44 | letter-spacing: .002em; 45 | } 46 | 47 | #main-content-container h1.title { 48 | font-family: var(--atlas-title-font-family); 49 | } 50 | 51 | .blocks-container { 52 | padding: 10px; 53 | .pr-2 { 54 | font-size: var(--atlas-font-size) 55 | } 56 | } 57 | 58 | .color-level .blocks-container { 59 | background-color: rgba(133, 164, 191, 0.05); 60 | } 61 | 62 | a.page-ref, a.external-link { 63 | color: var(--ct-primary-text-color); 64 | border-bottom: 1px dashed var(--ls-guideline-color) 65 | } 66 | 67 | a.page-ref:hover, a.external-link:hover { 68 | border-bottom: 1px dashed #ffffff; 69 | } 70 | 71 | .color-level { 72 | background: none; 73 | } 74 | 75 | .cp__sidebar-left-layout { 76 | background-color: var(--ct-primary-color); 77 | } 78 | 79 | .cp__plugins-item-lists .cp__plugins-item-card { 80 | background-color: transparent; 81 | border: 1px solid var(--ct-primary-color); 82 | } 83 | 84 | .cp__plugins-page .tabs .ui__button.active>span { 85 | color: var(--ct-primary-color); 86 | } 87 | 88 | .menu-link:hover, button.menu:focus, button.pull:hover, #sidebar-nav-wrapper .dropdown-wrapper a:hover{ 89 | color: var(--ct-primary-color); 90 | } 91 | 92 | #main-content input.form-checkbox:checked { 93 | background-color: var(--ls-page-checkbox-border-color); 94 | } 95 | 96 | .page-properties { 97 | font-size: 13px; 98 | line-height: 2.2em; 99 | 100 | .page-property-key { 101 | color:var(--ct-primary-text-color) 102 | } 103 | } 104 | 105 | a.external-link:before { 106 | font-family: tabler-icons!important; 107 | content: '\ea99'; 108 | } 109 | 110 | .page-reference:hover { 111 | background-color: transparent; 112 | } 113 | 114 | .left-sidebar-inner .nav-content-item>.header:hover { 115 | background-color: var(--ct-primary-hover-color); 116 | color: #ffffff; 117 | } 118 | 119 | #main-content-container .ui__button, .ui__modal-panel .ui__button { 120 | background-color: #ffffff; 121 | color: var(--ct-primary-color); 122 | border: none; 123 | } 124 | .cp__all_pages { 125 | 126 | .ti-search { 127 | color: var(--ls-link-text-color); 128 | } 129 | 130 | .cp__all_pages_table { 131 | th { 132 | border-bottom: 1px solid var(--ls-guideline-color); 133 | } 134 | } 135 | .search-wrap { 136 | .form-input { 137 | border: none; 138 | border-bottom: 1px solid var(--ls-guideline-color); 139 | border-radius: 0; 140 | } 141 | .ui__button { 142 | background: transparent !important; 143 | color: #ffffff; 144 | } 145 | } 146 | } 147 | 148 | .cp__themes-installed>.it.is-active { 149 | color: var(--ct-primary-color) 150 | } 151 | 152 | .logseq-focus-toolbar, .cp__header { 153 | a.button.active, a.button:hover { 154 | color: var(--ct-primary-color) 155 | } 156 | } 157 | 158 | .block-highlight, .content .selected { 159 | background-color: var(--ls-block-properties-background-color); 160 | border: none; 161 | } 162 | 163 | .search-results-wrap a:hover { 164 | color: #ffffff; 165 | } 166 | 167 | text-area { 168 | color: var(--ct-primary-text-color) 169 | } 170 | } -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --atlas-line-height: 2em; 3 | --atlas-font-size: 15px; 4 | --atlas-font-family: Segoe UI,Roboto,sans-serif; 5 | --atlas-title-font-family: Segoe UI,Roboto,sans-serif; 6 | } 7 | 8 | .cp__plugins-settings-inner .desc-item:hover { 9 | background: transparent; 10 | } 11 | 12 | #journals .journal-item { 13 | border-top: none; 14 | } 15 | 16 | .form-checkbox:checked { 17 | background-color: var(--ct-secondary-color); 18 | } 19 | 20 | .white-theme, 21 | html[data-theme=light], .dark-theme, html[data-theme=dark] { 22 | /* == Backgrounds == */ 23 | --ct-primary-color: #182026; 24 | --ct-primary-hover-color: #10161A; 25 | --ct-secondary-color: #5c778a; 26 | --ct-tertiary-color: #F5F8FA; 27 | --ct-primary-text-color: #24292e; 28 | --ct-icon-color: #5c7080; 29 | --ct-warning-color: #e54d2e; 30 | --ct-warning-color-text: var(--ct-primary-color); 31 | --ct-success-color: #46a857; 32 | --ct-success-color-text: var(--ct-primary-color); 33 | --ct-highlight-color: rgba(255,255,60,.4); 34 | --ct-highlight-color-text: black; 35 | --ls-link-text-color: var(--ct-primary-text-color); 36 | --ls-primary-background-color: #FFFFFF; 37 | --ls-secondary-background-color: var(--ct-primary-color); 38 | --ls-tertiary-background-color: var(--ct-tertiary-color); 39 | --ls-quaternary-background-color: var(--ct-primary-hover-color); 40 | --ls-table-tr-even-background-color: var(--ct-tertiary-color); 41 | --ls-page-properties-background-color: var(--ct-tertiary-color); 42 | --ls-page-blockquote-border-color: var(--ct-primary-color); 43 | --ls-page-blockquote-bg-color: #FFFFFF; 44 | /* == Text == */ 45 | --ls-primary-text-color: #444444; 46 | --ls-secondary-text-color: rgba(250,250,250,0.8); 47 | --atlas-header-text-color: #455461; 48 | --atlas-sidebar-text-color: #627789; 49 | --atlas-sidebar-text-color-hover: #a9bdca; 50 | /* == Checkboxes */ 51 | --ls-page-checkbox-color: #ffffff; 52 | --ls-page-checkbox-border-color: var(--ct-secondary-color); 53 | /* == Borders + Outlines */ 54 | --ls-border-color: #586e75; 55 | --ls-guideline-color: rgba(46, 27, 5, 0.08); 56 | /* == Misc == */ 57 | --ls-menu-hover-color: var(--ct-tertiary-color); 58 | --ls-title-text-color: var(--ct-primary-color); 59 | --ls-block-highlight-color: var(--ct-tertiary-color); 60 | --ls-icon-color: var(--ct-icon-color); 61 | --ls-search-icon-color: var(--ct-icon-color); 62 | --color-level-1: var(--ls-secondary-background-color); 63 | --color-level-2: var(--ls-tertiary-background-color); 64 | --color-level-3: var(--ls-quaternary-background-color); 65 | --color-level-4: var(--cd-fifth-bg-color); 66 | --color-level-5: var(--cd-sixth-bg-color); 67 | --color-level-6: #3a7e8e; 68 | /* === SELECTIONS === */ 69 | --ls-selection-background-color: rgba(255,255,60,.4); 70 | } 71 | 72 | #sidebar-nav-wrapper.cp__sidebar-left-layout:before { 73 | text-align: initial; 74 | } 75 | #sidebar-nav-wrapper #left-menu { 76 | opacity: 1; 77 | } 78 | 79 | .left-sidebar-inner a.item:hover, .left-sidebar-inner .nav-content-item .header:hover { 80 | background-color: var(--ct-primary-hover-color); 81 | } 82 | 83 | .new-page-link { 84 | color: var(--atlas-sidebar-text-color-hover); 85 | background-color: var(--ct-primary-hover-color); 86 | } 87 | 88 | .cp__sidebar-left-layout a { 89 | font-size: 13px; 90 | font-kerning: auto; 91 | color: var(--atlas-sidebar-text-color) !important; 92 | } 93 | .cp__sidebar-left-layout a:hover { 94 | color: var(--atlas-sidebar-text-color-hover) !important; 95 | } 96 | 97 | #search-button, #left-menu { 98 | color: #fafafa; 99 | } 100 | 101 | #search-button:hover, #left-menu:hover { 102 | background-color: var(--ct-primary-hover-color); 103 | } 104 | 105 | .left-sidebar-inner .nav-content-item .header .cp__sidebar-left-layout a { 106 | color: var(--atlas-header-text-color); 107 | } 108 | 109 | .dark-theme, 110 | html[data-theme=dark] { 111 | --ct-highlight-color: rgba(255, 255, 41, 0.7); 112 | --ls-selection-background-color: var(--ct-highlight-color); 113 | --ls-primary-background-color: #121a1f; 114 | --ct-primary-text-color: rgba(250, 250, 250, 0.80 ); 115 | --ls-title-text-color: #ffffff; 116 | --ls-link-ref-text-color: #ffffff; 117 | --ls-primary-text-color: var(--ct-primary-text-color); 118 | --ls-link-text-color: var(--ct-secondary-color); 119 | --ls-guideline-color: rgba(250, 250, 250, 0.25); 120 | --ls-table-tr-even-background-color: rgba(250, 250, 250, 0.01); 121 | --ls-block-properties-background-color: rgba(250, 250, 250, 0.01); 122 | --ls-block-bullet-color: #ffffff; 123 | --ls-block-bullet-border-color: var(--ls-guideline-color); 124 | --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1); 125 | --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05); 126 | --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2); 127 | --ls-page-blockquote-border-color: transparent; 128 | --ls-page-blockquote-bg-color: rgba(0, 0, 0, 0.2); 129 | --ls-page-blockquote-color: var(--ct-primary-text-color); 130 | } 131 | .dark-theme ::selection, 132 | html[data-theme=dark] ::selection { 133 | color: var(--ct-primary-color); 134 | } 135 | .dark-theme #main-content-container .editor-wrapper textarea, .dark-theme #main-content-container .block-content-wrapper .inline, 136 | html[data-theme=dark] #main-content-container .editor-wrapper textarea, 137 | html[data-theme=dark] #main-content-container .block-content-wrapper .inline { 138 | line-height: var(--atlas-line-height); 139 | font-size: var(--atlas-font-size); 140 | } 141 | .dark-theme .page-properties, 142 | html[data-theme=dark] .page-properties { 143 | background-color: rgba(133, 164, 191, 0.05); 144 | } 145 | .dark-theme #main-content-container, 146 | html[data-theme=dark] #main-content-container { 147 | font-family: var(--atlas-font-family); 148 | font-size: 1em; 149 | font-weight: 400; 150 | letter-spacing: 0.002em; 151 | } 152 | .dark-theme #main-content-container h1.title, 153 | html[data-theme=dark] #main-content-container h1.title { 154 | font-family: var(--atlas-title-font-family); 155 | } 156 | .dark-theme .blocks-container, 157 | html[data-theme=dark] .blocks-container { 158 | padding: 10px; 159 | } 160 | .dark-theme .blocks-container .pr-2, 161 | html[data-theme=dark] .blocks-container .pr-2 { 162 | font-size: var(--atlas-font-size); 163 | } 164 | .dark-theme .color-level .blocks-container, 165 | html[data-theme=dark] .color-level .blocks-container { 166 | background-color: rgba(133, 164, 191, 0.05); 167 | } 168 | .dark-theme a.page-ref, .dark-theme a.external-link, 169 | html[data-theme=dark] a.page-ref, 170 | html[data-theme=dark] a.external-link { 171 | color: var(--ct-primary-text-color); 172 | border-bottom: 1px dashed var(--ls-guideline-color); 173 | } 174 | .dark-theme a.page-ref:hover, .dark-theme a.external-link:hover, 175 | html[data-theme=dark] a.page-ref:hover, 176 | html[data-theme=dark] a.external-link:hover { 177 | border-bottom: 1px dashed #ffffff; 178 | } 179 | .dark-theme .color-level, 180 | html[data-theme=dark] .color-level { 181 | background: none; 182 | } 183 | .dark-theme .cp__sidebar-left-layout, 184 | html[data-theme=dark] .cp__sidebar-left-layout { 185 | background-color: var(--ct-primary-color); 186 | } 187 | .dark-theme .cp__plugins-item-lists .cp__plugins-item-card, 188 | html[data-theme=dark] .cp__plugins-item-lists .cp__plugins-item-card { 189 | background-color: transparent; 190 | border: 1px solid var(--ct-primary-color); 191 | } 192 | .dark-theme .cp__plugins-page .tabs .ui__button.active > span, 193 | html[data-theme=dark] .cp__plugins-page .tabs .ui__button.active > span { 194 | color: var(--ct-primary-color); 195 | } 196 | .dark-theme .menu-link:hover, .dark-theme button.menu:focus, .dark-theme button.pull:hover, .dark-theme #sidebar-nav-wrapper .dropdown-wrapper a:hover, 197 | html[data-theme=dark] .menu-link:hover, 198 | html[data-theme=dark] button.menu:focus, 199 | html[data-theme=dark] button.pull:hover, 200 | html[data-theme=dark] #sidebar-nav-wrapper .dropdown-wrapper a:hover { 201 | color: var(--ct-primary-color); 202 | } 203 | .dark-theme #main-content input.form-checkbox:checked, 204 | html[data-theme=dark] #main-content input.form-checkbox:checked { 205 | background-color: var(--ls-page-checkbox-border-color); 206 | } 207 | .dark-theme .page-properties, 208 | html[data-theme=dark] .page-properties { 209 | font-size: 13px; 210 | line-height: 2.2em; 211 | } 212 | .dark-theme .page-properties .page-property-key, 213 | html[data-theme=dark] .page-properties .page-property-key { 214 | color: var(--ct-primary-text-color); 215 | } 216 | .dark-theme a.external-link:before, 217 | html[data-theme=dark] a.external-link:before { 218 | font-family: tabler-icons !important; 219 | content: "\ea99"; 220 | } 221 | .dark-theme .page-reference:hover, 222 | html[data-theme=dark] .page-reference:hover { 223 | background-color: transparent; 224 | } 225 | .dark-theme .left-sidebar-inner .nav-content-item > .header:hover, 226 | html[data-theme=dark] .left-sidebar-inner .nav-content-item > .header:hover { 227 | background-color: var(--ct-primary-hover-color); 228 | color: #ffffff; 229 | } 230 | .dark-theme #main-content-container .ui__button, .dark-theme .ui__modal-panel .ui__button, 231 | html[data-theme=dark] #main-content-container .ui__button, 232 | html[data-theme=dark] .ui__modal-panel .ui__button { 233 | background-color: #ffffff; 234 | color: var(--ct-primary-color); 235 | border: none; 236 | } 237 | .dark-theme .cp__all_pages .ti-search, 238 | html[data-theme=dark] .cp__all_pages .ti-search { 239 | color: var(--ls-link-text-color); 240 | } 241 | .dark-theme .cp__all_pages .cp__all_pages_table th, 242 | html[data-theme=dark] .cp__all_pages .cp__all_pages_table th { 243 | border-bottom: 1px solid var(--ls-guideline-color); 244 | } 245 | .dark-theme .cp__all_pages .search-wrap .form-input, 246 | html[data-theme=dark] .cp__all_pages .search-wrap .form-input { 247 | border: none; 248 | border-bottom: 1px solid var(--ls-guideline-color); 249 | border-radius: 0; 250 | } 251 | .dark-theme .cp__all_pages .search-wrap .ui__button, 252 | html[data-theme=dark] .cp__all_pages .search-wrap .ui__button { 253 | background: transparent !important; 254 | color: #ffffff; 255 | } 256 | .dark-theme .cp__themes-installed > .it.is-active, 257 | html[data-theme=dark] .cp__themes-installed > .it.is-active { 258 | color: var(--ct-primary-color); 259 | } 260 | .dark-theme .logseq-focus-toolbar a.button.active, .dark-theme .logseq-focus-toolbar a.button:hover, .dark-theme .cp__header a.button.active, .dark-theme .cp__header a.button:hover, 261 | html[data-theme=dark] .logseq-focus-toolbar a.button.active, 262 | html[data-theme=dark] .logseq-focus-toolbar a.button:hover, 263 | html[data-theme=dark] .cp__header a.button.active, 264 | html[data-theme=dark] .cp__header a.button:hover { 265 | color: var(--ct-primary-color); 266 | } 267 | .dark-theme .block-highlight, .dark-theme .content .selected, 268 | html[data-theme=dark] .block-highlight, 269 | html[data-theme=dark] .content .selected { 270 | background-color: var(--ls-block-properties-background-color); 271 | border: none; 272 | } 273 | .dark-theme .search-results-wrap a:hover, 274 | html[data-theme=dark] .search-results-wrap a:hover { 275 | color: #ffffff; 276 | } 277 | .dark-theme text-area, 278 | html[data-theme=dark] text-area { 279 | color: var(--ct-primary-text-color); 280 | } 281 | 282 | .white-theme #search-button, .white-theme #left-menu, 283 | html[data-theme=light] #search-button, 284 | html[data-theme=light] #left-menu { 285 | color: #c1c1c1; 286 | } 287 | .white-theme #main-content-container .editor-wrapper textarea, .white-theme #main-content-container .block-content-wrapper .inline, 288 | html[data-theme=light] #main-content-container .editor-wrapper textarea, 289 | html[data-theme=light] #main-content-container .block-content-wrapper .inline { 290 | line-height: var(--atlas-line-height); 291 | font-size: var(--atlas-font-size); 292 | } 293 | .white-theme #main-content-container, 294 | html[data-theme=light] #main-content-container { 295 | font-family: var(--atlas-font-family); 296 | font-size: 1em; 297 | font-weight: 400; 298 | letter-spacing: 0.002em; 299 | } 300 | .white-theme #main-content-container h1.title, 301 | html[data-theme=light] #main-content-container h1.title { 302 | font-family: var(--atlas-title-font-family); 303 | } 304 | .white-theme .blocks-container, 305 | html[data-theme=light] .blocks-container { 306 | padding: 10px; 307 | } 308 | .white-theme .blocks-container .pr-2, 309 | html[data-theme=light] .blocks-container .pr-2 { 310 | font-size: 13px; 311 | } 312 | .white-theme .cp__header a, 313 | html[data-theme=light] .cp__header a { 314 | color: var(--ls-icon-color); 315 | } 316 | .white-theme .left-sidebar-inner a.item, .white-theme .left-sidebar-inner .nav-content-item .bd ul a, .white-theme .left-sidebar-inner .header a, 317 | html[data-theme=light] .left-sidebar-inner a.item, 318 | html[data-theme=light] .left-sidebar-inner .nav-content-item .bd ul a, 319 | html[data-theme=light] .left-sidebar-inner .header a { 320 | color: var(--ls-secondary-text-color); 321 | } 322 | .white-theme .ui__modal-panel, 323 | html[data-theme=light] .ui__modal-panel { 324 | background-color: #FFFFFF; 325 | } 326 | .white-theme .page-reference:hover, 327 | html[data-theme=light] .page-reference:hover { 328 | background-color: transparent; 329 | } 330 | .white-theme .color-level, 331 | html[data-theme=light] .color-level { 332 | background-color: transparent; 333 | } 334 | .white-theme .color-level .content, 335 | html[data-theme=light] .color-level .content { 336 | padding: 5px 0; 337 | } 338 | .white-theme .color-level .blocks-container, 339 | html[data-theme=light] .color-level .blocks-container { 340 | background-color: var(--ct-tertiary-color); 341 | padding: 10px; 342 | } 343 | .white-theme .color-level .blocks-container .pr-2, 344 | html[data-theme=light] .color-level .blocks-container .pr-2 { 345 | font-size: 13px; 346 | } 347 | .white-theme .tippy-tooltip, 348 | html[data-theme=light] .tippy-tooltip { 349 | background-color: #f5f8fa; 350 | border: 1px solid #ccc; 351 | } 352 | .white-theme .tippy-wrapper, 353 | html[data-theme=light] .tippy-wrapper { 354 | background-color: #ffffff; 355 | } 356 | .white-theme .page-properties, 357 | html[data-theme=light] .page-properties { 358 | font-size: 13px; 359 | line-height: 2.2em; 360 | } 361 | .white-theme .page-properties .page-property-key, 362 | html[data-theme=light] .page-properties .page-property-key { 363 | color: var(--ct-primary-text-color); 364 | } 365 | .white-theme a.page-ref, .white-theme a.external-link, 366 | html[data-theme=light] a.page-ref, 367 | html[data-theme=light] a.external-link { 368 | color: var(--ct-primary-text-color); 369 | border-bottom: 1px dashed rgba(36, 41, 46, 0.25); 370 | } 371 | .white-theme a.page-ref:hover, .white-theme a.external-link:hover, 372 | html[data-theme=light] a.page-ref:hover, 373 | html[data-theme=light] a.external-link:hover { 374 | border-bottom: 1px dashed #24292e; 375 | } 376 | .white-theme a.external-link:before, 377 | html[data-theme=light] a.external-link:before { 378 | font-family: tabler-icons !important; 379 | content: "\ea99"; 380 | } 381 | .white-theme .cp__plugins-item-card, .white-theme .ui__button, 382 | html[data-theme=light] .cp__plugins-item-card, 383 | html[data-theme=light] .ui__button { 384 | background-color: var(--ct-tertiary-color); 385 | } 386 | .white-theme #main-content-container .ui__button, .white-theme .ui__modal-panel .ui__button, 387 | html[data-theme=light] #main-content-container .ui__button, 388 | html[data-theme=light] .ui__modal-panel .ui__button { 389 | background-color: var(--ct-primary-color); 390 | } 391 | .white-theme .graph-filters, 392 | html[data-theme=light] .graph-filters { 393 | background-color: var(--ct-tertiary-color); 394 | } 395 | .white-theme .cp__right-sidebar, 396 | html[data-theme=light] .cp__right-sidebar { 397 | background-color: var(--ct-tertiary-color); 398 | } 399 | .white-theme .cp__right-sidebar-topbar, 400 | html[data-theme=light] .cp__right-sidebar-topbar { 401 | background-color: #eaf0f5; 402 | border-bottom: 1px solid #cccccc; 403 | } 404 | .white-theme .sidebar-item-list .sidebar-item, 405 | html[data-theme=light] .sidebar-item-list .sidebar-item { 406 | background-color: #ffffff; 407 | margin-left: 4px; 408 | } 409 | .white-theme .sidebar-item-list .sidebar-item .blocks-container, 410 | html[data-theme=light] .sidebar-item-list .sidebar-item .blocks-container { 411 | background-color: #ffffff; 412 | } 413 | .white-theme .form-checkbox, 414 | html[data-theme=light] .form-checkbox { 415 | border: 1px solid var(--ls-page-checkbox-border-color); 416 | border-radius: 2px; 417 | } 418 | .white-theme .cp__all_pages .cp__all_pages_table th, 419 | html[data-theme=light] .cp__all_pages .cp__all_pages_table th { 420 | border-bottom: 1px solid var(--ls-border-color); 421 | } 422 | .white-theme .cp__all_pages .search-wrap .form-input, 423 | html[data-theme=light] .cp__all_pages .search-wrap .form-input { 424 | border: none; 425 | border-bottom: 1px solid var(--ct-primary-color); 426 | border-radius: 0; 427 | } 428 | .white-theme .cp__all_pages .search-wrap .ui__button, 429 | html[data-theme=light] .cp__all_pages .search-wrap .ui__button { 430 | background: transparent !important; 431 | } 432 | .white-theme .cp__sidebar-help-btn, 433 | html[data-theme=light] .cp__sidebar-help-btn { 434 | background-color: var(--ct-tertiary-color); 435 | color: var(--ct-secondary-color); 436 | border: 1px solid var(--ct-secondary-color); 437 | } 438 | .white-theme .cp__palette-main .chosen, 439 | html[data-theme=light] .cp__palette-main .chosen { 440 | background-color: var(--ct-tertiary-color); 441 | } 442 | .white-theme h1.title, 443 | html[data-theme=light] h1.title { 444 | font-weight: 500; 445 | text-decoration: none; 446 | font-size: 36px; 447 | } 448 | .white-theme .cp__plugins-page .ui__button, .white-theme .cp__settings-inner > aside ul > li.active, .white-theme blockquote, 449 | html[data-theme=light] .cp__plugins-page .ui__button, 450 | html[data-theme=light] .cp__settings-inner > aside ul > li.active, 451 | html[data-theme=light] blockquote { 452 | background-color: var(--ct-tertiary-color) !important; 453 | } 454 | .white-theme .cp__settings-inner > aside ul > li > a, 455 | html[data-theme=light] .cp__settings-inner > aside ul > li > a { 456 | background: none; 457 | } 458 | .white-theme .keyboard-shortcut > code, 459 | html[data-theme=light] .keyboard-shortcut > code { 460 | color: #ffffff; 461 | } 462 | .white-theme .cp__themes-installed > .it, 463 | html[data-theme=light] .cp__themes-installed > .it { 464 | background: none; 465 | } 466 | .white-theme .cp__themes-installed > .it.is-active, 467 | html[data-theme=light] .cp__themes-installed > .it.is-active { 468 | background-color: var(--ct-tertiary-color); 469 | border: none; 470 | } 471 | .white-theme .cp__settings-app-updater .update-state, 472 | html[data-theme=light] .cp__settings-app-updater .update-state { 473 | background-color: var(--ct-tertiary-color); 474 | color: var(--ct-primary-color); 475 | } 476 | .white-theme #main-content input.form-checkbox:checked, 477 | html[data-theme=light] #main-content input.form-checkbox:checked { 478 | background-color: var(--ls-page-checkbox-border-color); 479 | } 480 | 481 | body { 482 | color: var(--ct-primary-text-color); 483 | } 484 | --------------------------------------------------------------------------------