├── .github
└── workflows
│ └── publish.yml
├── .gitignore
├── README.md
├── custom.css
├── docs
├── better-typography(legacy).md
├── compability-for-accent-color.md
├── fix-codemirror(legacy).md
├── some-thoughts-on-doc-mode.md
└── table-overflow(legacy).md
├── icon.png
├── media
├── Desktop-2020-03-30.png
├── Desktop-2021-08-09.png
├── Desktop-2022-05-23.jpg
├── Desktop.png
├── Mobile.png
├── codemirror-fix.gif
├── codemirror-overflow.gif
├── headings.png
├── image-20210809034129439.png
├── journal-title-emoji.png
├── lists.png
├── outline-unfold.png
├── plugin.png
├── table-dot.gif
├── table-expected.png
├── table-unexpected.png
└── tag-label.png
├── package-lock.json
├── package.json
└── source
├── codeMirror.scss
├── color-scheme.scss
├── index.scss
├── layout.scss
├── palette
├── bg_dark_sequential_colors.xml
├── blue_dark_sequential_colors.xml
└── blue_light_sequential_colors.xml
├── theme-dark.scss
├── theme-white.scss
└── theme.scss
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
1 | name: Build plugin
2 |
3 | on:
4 | push:
5 | # Sequence of patterns matched against refs/tags
6 | tags:
7 | - "*" # Push events to matching any tag format, i.e. 1.0, 20.15.10
8 |
9 | env:
10 | PLUGIN_NAME: logseq-bonofix-theme
11 |
12 | jobs:
13 | build:
14 | runs-on: ubuntu-latest
15 |
16 | steps:
17 | - uses: actions/checkout@v2
18 | - name: Use Node.js
19 | uses: actions/setup-node@v1
20 | with:
21 | node-version: "14.x" # You might need to adjust this value to your own version
22 | - name: Build
23 | id: build
24 | run: |
25 | mkdir ${{ env.PLUGIN_NAME }}
26 | cp README.md package.json icon.png *.css ${{ env.PLUGIN_NAME }}
27 | zip -r ${{ env.PLUGIN_NAME }}.zip ${{ env.PLUGIN_NAME }}
28 | ls
29 | echo "::set-output name=tag_name::$(git tag --sort version:refname | tail -n 1)"
30 |
31 | - name: Create Release
32 | id: create_release
33 | uses: actions/create-release@v1
34 | env:
35 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 | VERSION: ${{ github.ref }}
37 | with:
38 | tag_name: ${{ github.ref }}
39 | release_name: ${{ github.ref }}
40 | draft: false
41 | prerelease: false
42 |
43 | - name: Upload zip file
44 | id: upload_zip
45 | uses: actions/upload-release-asset@v1
46 | env:
47 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
48 | with:
49 | upload_url: ${{ steps.create_release.outputs.upload_url }}
50 | asset_path: ./${{ env.PLUGIN_NAME }}.zip
51 | asset_name: ${{ env.PLUGIN_NAME }}-${{ steps.build.outputs.tag_name }}.zip
52 | asset_content_type: application/zip
53 |
54 | - name: Upload package.json
55 | id: upload_metadata
56 | uses: actions/upload-release-asset@v1
57 | env:
58 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
59 | with:
60 | upload_url: ${{ steps.create_release.outputs.upload_url }}
61 | asset_path: ./package.json
62 | asset_name: package.json
63 | asset_content_type: application/json
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | css/
2 | node_modules/
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
logseq-bonofix-theme
3 |
4 |
5 |
6 | 🌠 Screenshots
7 | |
8 | 📦 Install
9 | |
10 | ✨ What's different
11 | |
12 | 🔨 How to build
13 |
14 |
15 |
16 | This is a clean theme for [Logseq](https://github.com/logseq/logseq), focusing on bullet journal and long time writing experience.
17 |
18 | ## Screenshots
19 |
20 | The style is strongly inspired by [logseq-bujo-theme](https://github.com/PiotrSss/logseq-bujo-theme ) and [Notion](https://notion.so). The code is mainly based on bujo theme, and you may find the style really notion-like.
21 |
22 | 
23 |
24 | It partially adapts to the custom accent color in logseq's settings. You can change the default accent(blue) color without obvious style breaking.
25 |
26 | ## Install
27 |
28 | Here are two ways of installing theme in Logseq.
29 |
30 | ### Install plugin
31 |
32 | 
33 |
34 | - Open Logseq → Plugins → Market Place, install **Bonofix Theme** plugin
35 |
36 | - Open Logseq → Themes, choose your theme
37 |
38 | ### Install `custom.css`
39 |
40 | - General installation
41 |
42 | Copy the whole content of [custom.css](https://raw.githubusercontent.com/Sansui233/logseq-bonofix-theme/master/custom.css) into your `graphname/logseq/custom.css` file.
43 |
44 | - If you are always working online
45 |
46 | Copy this one-line-installation into your logseq/custom.css file
47 |
48 | ```css
49 | @import url('https://cdn.jsdelivr.net/gh/sansui233/logseq-bonofix-theme/custom.css');
50 | ```
51 |
52 | ## What's different
53 |
54 | **Functional style**
55 |
56 | - Simple but functional colors
57 |
58 | - Make tippy window like responsive card instead of filling the screen and obscuring text. (Legacy bcz Logseq default theme has made it)
59 |
60 | - Wrap text in query table results to make it easier to read. Table remains to scroll if too many columns
61 |
62 | **Additional Styles**
63 |
64 | - Calender emoji before journal title
65 | 
66 |
67 | - Round tags
68 | 
69 |
70 | - Round checkbox
71 |
72 | ## How to build
73 |
74 | 1. Install [node](https://nodejs.org/)
75 | 2. Clone repo
76 | ```shell
77 | git clone https://github.com/Sansui233/logseq-bonofix-theme.git && cd logseq-bonofix-theme
78 | ```
79 | 3. Install dependencies
80 | ```shell
81 | npm install
82 | ```
83 | 4. Run build
84 |
85 | ```shell
86 | npm run build
87 | ```
88 |
89 | ## Thanks
90 |
91 | - [Logseq](https://github.com/logseq/logseq)
92 | - [logseq-bujo-theme](https://github.com/PiotrSss/logseq-bujo-theme) by PiotrSss
93 | - Dark mode of [Notion](https://notion.so)
94 | - All feedbacks from github issue, email and discord
95 |
--------------------------------------------------------------------------------
/custom.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";@import url("https://cdn.jsdelivr.net/npm/@ibm/plex@4.0.2/css/ibm-plex.min.css?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--ls-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";--ls-tag-text-opacity:.6;--ls-tag-text-hover-opacity:.8;--ls-page-title-size:36px}.white-theme,html[data-theme=light]{--bf-codeblock-background-color:#f7f6f3;--bf-external-link-color:#ea6e6e;--bf-external-link-hover-color:#e6515e;--bf-tag-background-color:var(--lx-accent-10);--bf-query-clause-border-color:var(--lx-accent-06);--bf-query-clause-background-color:#8fc3ff15;--bf-query-clause-background-hover-color:#8fc3ff33;--ls-scrollbar-foreground-color:#00000014;--ls-scrollbar-background-color:#fff0;--bf-scrollbar-thumb-hover-color:#8a8a8a61;--bf-a-chosen-bg:#0007100f;--bf-hard-shadow-color:#00000015;--bf-transparent-bg-mask:#88888813}.dark-theme,html[data-theme=dark]{--bf-codeblock-background-color:#313238;--bf-external-link-color:#e86e6e;--bf-external-link-hover-color:#f29191;--bf-query-clause-border-color:var(--lx-accent-06);--bf-query-clause-background-color:#2f82c615;--bf-query-clause-background-hover-color:#2f82c633;--bf-strong-text-color:#d8d8d8;--ls-scrollbar-foreground-color:#8a8a8a3d;--ls-scrollbar-background-color:#fff0;--bf-scrollbar-thumb-hover-color:#8a8a8a61;--bf-a-chosen-bg:#adaeb81c;--bf-hard-shadow-color:#1d1d1d;--bf-transparent-bg-mask:#86878920}html[data-color=tomato] body,html[data-color=red] body,html[data-color=crimson] body,html[data-color=pink] body,html[data-color=plum] body,html[data-color=purple] body,html[data-color=violet] body,html[data-color=indigo] body,html[data-color=blue] body,html[data-color=cyan] body,html[data-color=teal] body,html[data-color=green] body,html[data-color=grass] body,html[data-color=orange] body{--ls-tag-text-color:white;--ls-tag-text-hover-color:white}html[data-color=tomato] body.dark-theme,html[data-color=red] body.dark-theme,html[data-color=crimson] body.dark-theme,html[data-color=pink] body.dark-theme,html[data-color=plum] body.dark-theme,html[data-color=purple] body.dark-theme,html[data-color=violet] body.dark-theme,html[data-color=indigo] body.dark-theme,html[data-color=blue] body.dark-theme,html[data-color=cyan] body.dark-theme,html[data-color=teal] body.dark-theme,html[data-color=green] body.dark-theme,html[data-color=grass] body.dark-theme,html[data-color=orange] body.dark-theme{--ls-page-checkbox-color:var(--lx-accent-09);--bf-tag-background-color:var(--lx-accent-09)}html[data-color=tomato] body.light-theme,html[data-color=red] body.light-theme,html[data-color=crimson] body.light-theme,html[data-color=pink] body.light-theme,html[data-color=plum] body.light-theme,html[data-color=purple] body.light-theme,html[data-color=violet] body.light-theme,html[data-color=indigo] body.light-theme,html[data-color=blue] body.light-theme,html[data-color=cyan] body.light-theme,html[data-color=teal] body.light-theme,html[data-color=green] body.light-theme,html[data-color=grass] body.light-theme,html[data-color=orange] body.light-theme{--ls-page-checkbox-color:var(--lx-accent-08)}html[data-color=logseq][data-theme=light]{--rx-logseq-01:#fff;--rx-logseq-02:#ecf3fd;--rx-logseq-03:#d7e7fe;--rx-logseq-04:#c0dbfd;--rx-logseq-05:#a8cffd;--rx-logseq-06:#8fc3ff;--rx-logseq-07:#7cb4f4;--rx-logseq-08:#5c9de7;--rx-logseq-09:#3e8adc;--rx-logseq-10:#2582ec;--rx-logseq-11:#1e79de;--rx-logseq-12:#106bc6;--accent:212 84% 54%;--primary:212 84% 54%;--ls-primary-text-color:#2b2926;--ls-primary-background-color:#fff;--ls-secondary-background-color:#f8f8f8;--ls-tertiary-background-color:#efefef;--ls-quaternary-background-color:#e8e8e8;--ls-page-properties-background-color:#88888818;--ls-block-properties-background-color:#88888818;--ls-callout-background-color:#8888881a;--ls-table-tr-even-background-color:#0000000a;--ls-border-color:#d4d4d4;--ls-secondary-border-color:var(--rx-logseq-06);--ls-link-ref-text-color:var(--rx-logseq-09);--ls-link-ref-text-hover-color:var(--rx-logseq-011);--ls-active-primary-color:var(--rx-logseq-09);--ls-active-secondary-color:var(--rx-logseq-011);--ls-link-text-color:var(--ls-link-ref-text-color);--ls-link-text-hover-color:var(--ls-link-ref-text-hover-color);--ls-alink-color:var(--ls-link-text-color);--ls-cloze-text-color:var(--ls-link-ref-text-color);--ls-tag-text-color:white;--ls-tag-text-hover-color:white;--ls-block-bullet-border-color:#00000015;--ls-block-bullet-color:#c7c7c7;--ls-guideline-color:#00000024;--ls-page-inline-code-bg-color:rgba(135,131,120,0.15);--ls-page-blockquote-color:var(--ls-primary-text-color);--ls-page-blockquote-border-color:var(--ls-primary-text-color);--ls-page-checkbox-color:var(--rx-logseq-07);--ls-page-checkbox-border-color:var(--ls-page-checkbox-color);--ls-icon-color:#919191;--ls-header-button-text-color:#999;--ls-header-button-text-color-hover:var(--ls-secondary-text-color);--ls-header-button-background:var(--ls-secondary-background-color);--ls-left-sidebar-text-color:var(--ls-primary-text-color);--ls-button-background-hsl:211.96 83.97% 53.53%;--ls-a-chosen-bg:#0007100f;--ls-title-text-color:#303537}html[data-color=logseq][data-theme=dark]{--rx-logseq-01:#093562;--rx-logseq-02:#0f4276;--rx-logseq-03:#0e4d8b;--rx-logseq-04:#1b5fa0;--rx-logseq-05:#2670b3;--rx-logseq-06:#2f82c6;--rx-logseq-07:#4490d0;--rx-logseq-08:#549cd9;--rx-logseq-09:#61adea;--rx-logseq-10:#6cbcfa;--rx-logseq-11:#6cbcfa;--rx-logseq-12:#afd6ff;--background:225 6% 13%;--popover:228 6% 16%;--accent:207 60% 54%;--border:0 .01% 25%;--primary:210 60% 54%;--secondary:210 85% 42% / 20%;--muted:210 85% 42% / 20%;--card:210 85% 42% / 20%;--input:210 35% 25%;--ls-primary-text-color:#cecece;--ls-secondary-text-color:#bbb;--ls-primary-background-color:#202024;--ls-secondary-background-color:#28282c;--ls-tertiary-background-color:#323235;--ls-quaternary-background-color:#38383b;--ls-left-sidebar-background-color:var(--ls-secondary-background-color);--ls-page-properties-background-color:#8687892a;--ls-block-properties-background-color:#8687892a;--ls-callout-background-color:#8687892a;--ls-table-tr-even-background-color:#adaeb81c;--ls-border-color:#3f3f3f;--ls-secondary-border-color:var(--rx-logseq-07);--ls-link-ref-text-color:var(--rx-logseq-11);--ls-link-ref-text-hover-color:var(--rx-logseq-12);--ls-active-primary-color:var(--ls-link-ref-text-color);--ls-active-secondary-color:var(--rx-logseq-08);--ls-block-ref-link-text-color:var(--rx-logseq-09);--ls-link-text-color:var(--ls-link-ref-text-color);--ls-link-text-hover-color:var(--ls-link-ref-text-hover-color);--ls-alink-color:var(--ls-link-text-color);--ls-cloze-text-color:var(--ls-link-ref-text-color);--ls-tag-text-color:white;--ls-tag-text-hover-color:white;--bf-tag-background-color:var(--lx-accent-06);--ls-block-bullet-border-color:#ffffff25;--ls-block-bullet-color:#ffffff33;--ls-guideline-color:#ffffff33;--ls-page-checkbox-color:var(--rx-logseq-08);--ls-page-checkbox-border-color:var(--ls-primary-background-color);--ls-page-blockquote-color:var(--ls-primary-text-color);--ls-page-blockquote-border-color:var(--ls-primary-text-color);--ls-page-inline-code-color:#eb5757;--ls-page-inline-code-bg-color:rgba(135,131,120,0.15);--ls-selection-background-color:#3e3e41;--ls-block-highlight-color:#3e3e41;--ls-icon-color:#b5b5b5;--ls-search-icon-color:var(--ls-quaternary-background-color);--ls-header-button-text-color:#b5b5b5;--ls-header-button-text-color-hover:var(--ls-primary-text-color);--ls-header-button-background:var(--ls-secondary-background-color);--ls-left-sidebar-text-color:var(--ls-primary-text-color);--ls-button-background-hsl:207 60% 54%;--ls-a-chosen-bg:var(--ls-table-tr-even-background-color);--ls-title-text-color:var(--ls-primary-text-color);--ls-menu-hover-color:#36383b;--ls-slide-background-color:var(--ls-primary-background-color);--ls-head-text-color:#ffe27c;--color-level-1:var(--ls-tertiary-background-color);--color-level-2:var(--ls-quaternary-background-color);--color-level-3:#3c3c40;--color-level-4:#4c4e58}html[data-color=logseq][data-theme=dark] .ui__context-menu-content,html[data-color=logseq][data-theme=dark] .ui__dropdown-menu-content,html[data-color=logseq][data-theme=dark] .ui__select-content{--accent:235 7% 70% / .11}html[data-color=logseq][data-theme=dark] .cp__cmdk .border-gray-06,html[data-color=logseq][data-theme=dark] .cp__cmdk .border-gray-07{opacity:1}.cp__sidebar-main-content{width:100%}#main-content-container .file{margin:0 auto}body{background-color:var(--ls-primary-background-color)}.cp__header{--ls-header-button-background:var(--ls-header-button-text-color)}.cp__header button,.cp__header>.r>div:not(.ui__dropdown-trigger) a{color:var(--ls-header-button-text-color)}.left-sidebar-inner a.item.active,.left-sidebar-inner a.item:hover{opacity:unset;background-color:var(--bf-a-chosen-bg)}.left-sidebar-inner .nav-content-item .header:hover,.left-sidebar-inner .nav-content-item .bd ul a:hover{background-color:var(--bf-a-chosen-bg)}.left-sidebar-inner .nav-content-item .header .wrap-th>strong{font-size:.8rem}.left-sidebar-inner .create .ui__icon{transform:translateY(-2px)}@media(min-width:640px){.left-sidebar-inner .create #create-button{transition:all .3s ease;border:unset;opacity:.6;background-color:unset !important;justify-content:flex-start;padding:.625rem;font-size:.85rem;font-weight:600;color:var(--ls-left-sidebar-text-color);text-transform:uppercase}.left-sidebar-inner .create #create-button:hover{border:unset;opacity:1;background-color:var(--ls-primary-background-color) !important;box-shadow:0 0 5px rgba(126,126,126,0.2392156863)}.left-sidebar-inner .create .mx-1{margin:0 .5rem}}.cp__right-sidebar .cp__right-sidebar-settings .cp__right-sidebar-settings-btn{background-color:var(--color-level-2);font-weight:500}.cp__right-sidebar .cp__right-sidebar-settings .cp__right-sidebar-settings-btn:hover{background-color:var(--ls-quaternary-background-color)}.cp__right-sidebar .sidebar-item-list .sidebar-item{--tw-shadow:unset;border-bottom:2px solid var(--color-level-3)}.cp__right-sidebar .sidebar-item-list .sidebar-item .content{font-size:.95rem}.cp__all_pages .actions{display:relative}.cp__all_pages .actions a{color:var(--ls-primary-text-color)}.cp__all_pages .actions::before{content:"";display:block;position:absolute;left:0;top:-1rem;width:100%;height:1rem;z-index:-1;background-color:var(--ls-primary-background-color)}.cp__all_pages table th{border-bottom:1px solid var(--ls-border-color)}.cp__all_pages table th a{color:var(--ls-primary-text-color)}#main-content-container{padding:1rem 2.5rem}#main-content-container .journal.page h1.title:before{content:"🗓";vertical-align:text-bottom;margin-right:.3em;font-size:.75em}#main-content-container .is-journals h1.page-title:before{content:"🗓";vertical-align:text-bottom;margin-right:.3em;font-size:.75em;align-self:center}#main-content-container .cp__sidebar-main-content h1.title{font-weight:700;font-size:33px;margin-bottom:1rem;margin-left:0 !important}html ::-webkit-scrollbar-thumb{background:var(--ls-scrollbar-foreground-color);background-clip:padding-box;border-left:1px solid transparent;border-right:1px solid transparent;border-radius:4px;cursor:pointer}html ::-webkit-scrollbar-thumb:hover{background:var(--bf-scrollbar-thumb-hover-color);border-radius:4px;border:2px solid transparent}.visible-scrollbar ::-webkit-scrollbar,html.custom-scrollbar ::-webkit-scrollbar{background-color:var(--ls-scrollbar-background-color)}.content hr{margin:.1rem 0}.content .block-children{margin-bottom:.3rem}.content .block-children-left-border{transition:background-color .3s}.content .block-properties,.content .page-properties{margin:8px 0;padding:10px 20px;background-color:var(--ls-block-properties-background-color,var(--rx-gray-03))}.content .embed.color-level{background-color:var(--bf-transparent-bg-mask)}.content blockquote{background-color:unset;border-color:var(--ls-primary-text-color)}.content .admonitionblock{padding:16px 16px 16px 12px;background-color:var(--ls-callout-background-color);margin:unset;border-radius:.25rem}.content .admonitionblock .text-lg{font-size:.9em;margin-left:0;line-height:1.35rem}.content .admonitionblock .admonition-icon{padding-right:.65em;border:unset}.content .admonitionblock .admonition-icon svg.svg-shadow{-webkit-filter:unset;filter:unset}.content .admonitionblock .admonition-icon svg.h-8.w-8{width:1.7em;height:1.7em}.content .admonitionblock .admonition-icon svg.important{color:#f17272;fill:#f17272}.content .admonitionblock .admonition-icon svg.caution{color:#ffb381;fill:#ffb381}.content .admonitionblock .admonition-icon svg.tip{color:#4ca6f5;fill:#4ca6f5}.content .admonitionblock .admonition-icon svg.note{color:var(--ls-secondary-text-color);fill:var(--ls-secondary-text-color)}.content ul,.content ol{margin-top:5px;margin-bottom:5px}.content ul>li>p:first-child,.content ol>li>p:first-child{display:inline}.content h1,.content h2,.content h3,.content h4,.content h5{margin-top:0;padding-bottom:0;margin-bottom:0;border-bottom:0}.content .editor-inner textarea.h2,.content .editor-inner textarea.h1{margin-top:0;margin-bottom:0;padding-bottom:0;border-bottom:unset}.content a.tag{padding:0 7px;border-radius:1em;margin:2px 0;color:var(--ls-tag-text-color);background-color:var(--bf-tag-background-color)}.content a.tag:hover{text-decoration:unset}.content a.external-link{color:var(--bf-external-link-color)}.content a.external-link:hover{color:var(--bf-external-link-hover-color)}.content .block-ref{border-radius:3px;font-style:italic;color:var(--ls-primary-text-color)}.content .form-checkbox{border-radius:50%;z-index:1;position:relative;margin-top:unset !important;margin-left:.1em;width:1rem;height:1rem}.content .form-checkbox,.content .form-radio{top:unset}.content .marker-switch{display:inline-block;line-height:1rem;opacity:.7;font-weight:700;transition:.3s;margin-left:-1.5em;margin-right:5px;padding:0 8px 0 1.5em;border-radius:12px}.content :not(pre)>code{border-radius:3px;font-size:85%;font-family:MonoLisa,"Fira Code",Monaco,Menlo,Consolas,"COURIER NEW",monospace;padding:2px 6px !important;margin:0 1px;color:#eb5757;background-color:var(--ls-page-inline-code-bg-color)}.content .page-reference:hover{background-color:var(--ls-tertiary-background-color)}.content div[data-refs-self*='"card"']{box-shadow:unset}.content div[data-refs-self*='"card"'] .block-children{margin-bottom:unset}.content div[data-refs-self*='"card"']>.block-children-container{background:var(--ls-block-properties-background-color);padding:1em 0;border-radius:.375rem;border:solid 1px var(--bf-hard-shadow-color);box-shadow:0 0 5px var(--bf-hard-shadow-color)}.content div[data-refs-self*='"card"']>.block-children-container>.block-children{margin-bottom:5px}.content .query-table>table,.content .custom-query-results table,.content .block-body>.table-wrapper table{word-break:normal}.content .query-table>table th,.content .custom-query-results table th,.content .block-body>.table-wrapper table th{border-top:solid 1.5px var(--ls-border-color);border-bottom:solid 1px var(--ls-border-color);text-transform:capitalize;color:#9f9f9f;padding:.5em .5em .5em .875em}.content .query-table>table th a,.content .custom-query-results table th a,.content .block-body>.table-wrapper table th a{color:#9f9f9f}.content .query-table>table th a:hover,.content .custom-query-results table th a:hover,.content .block-body>.table-wrapper table th a:hover{color:var(--ls-primary-text-color)}.content .query-table>table th:not(:last-child),.content .query-table>table td:not(:last-child),.content .custom-query-results table th:not(:last-child),.content .custom-query-results table td:not(:last-child),.content .block-body>.table-wrapper table th:not(:last-child),.content .block-body>.table-wrapper table td:not(:last-child){border-right:solid 1px var(--ls-border-color)}.content .query-table>table tr td,.content .custom-query-results table tr td,.content .block-body>.table-wrapper table tr td{font-size:.95em;padding:.5em .5em .5em .875em;min-width:17ch;text-wrap:pretty}.content .query-table>table tbody tr:not(:last-child),.content .custom-query-results table tbody tr:not(:last-child),.content .block-body>.table-wrapper table tbody tr:not(:last-child){border-bottom:solid 1px var(--ls-border-color)}.content .query-table>table tbody tr:last-child,.content .custom-query-results table tbody tr:last-child,.content .block-body>.table-wrapper table tbody tr:last-child{border-bottom:solid 1.5px var(--ls-border-color)}.content .custom-query>.th{margin-bottom:.5rem;font-size:.825rem;font-weight:500;opacity:.5}.content .custom-query table{margin-top:.5rem}.content .cp__query-builder .query-clause-btn{padding:0 .5rem;line-height:1.5rem;border-radius:1.5rem;border-color:var(--bf-query-clause-border-color);background-color:color-mix(in srgb,var(--lx-accent-03) 25%,transparent)}.content .cp__query-builder .query-clause-btn:hover{background-color:color-mix(in srgb,var(--lx-accent-04) 25%,transparent)}.content .cp__query-builder a.query-clause{color:var(--lx-accent-09,var(--ls-active-secondary-color))}.content .cp__query-builder a.add-filter{opacity:.4}.content .cp__query-builder a.add-filter:hover{opacity:1;color:var(--bf-tag-background-color)}.content .block-content tr:nth-child(odd){background:unset}.content.doc-mode .ls-block{padding:.25rem}.content.doc-mode .ls-block h1{margin-top:1rem;margin-bottom:.35rem}.content.doc-mode .ls-block h2{margin-top:1rem;margin-bottom:.35rem}.content.doc-mode .ls-block h3{margin-top:.8rem;margin-bottom:.35em}.content.doc-mode .ls-block h4{margin-top:.5rem;margin-bottom:.35rem}.content.doc-mode .ls-block h5{margin-top:.5rem;margin-bottom:.35rem}.content.doc-mode .ls-block h6{margin-top:.5rem;margin-bottom:.35rem}.content.doc-mode .ls-block dl,.content.doc-mode .ls-block ul,.content.doc-mode .ls-block ol{margin-top:.5rem;margin-bottom:.5rem}.content.doc-mode .ls-block dl>li,.content.doc-mode .ls-block ul>li,.content.doc-mode .ls-block ol>li{margin-bottom:.35rem}.content.doc-mode .ls-block .admonitionblock{margin:.5rem 0}.bullet-container:not(.typed-list) .bullet{background-color:var(--ls-block-bullet-color,var(--rx-gray-08))}.tippy-popper .tippy-tooltip{border-radius:.5rem;background-color:var(--ls-primary-background-color)}.tippy-popper .tippy-wrapper{max-height:45vh !important;max-width:min(90vw,600px) !important;background-color:var(--ls-primary-background-color);border-radius:.5rem}.cp__palette #ui__ac-inner code{color:var(--ls-primary-text-color)}.cp__palette #ui__ac-inner a:hover{color:var(--ls-link-ref-text-color)}.cp__palette #ui__ac-inner a>span{width:100%}@media screen and (max-width:640px){#head{background-color:var(--ls-primary-background-color)}#main-container #main-content-container{padding:16px 20px}.cp__settings-inner>aside{border-right:unset}.cp__settings-inner>aside ul{border-bottom:1px solid var(--ls-quaternary-background-color)}}html[data-theme=light] #left-bar nav>a,html[data-theme=light] #left-bar svg{color:var(--ls-priamary-text-color)}html[data-theme=light] #left-bar #repo-name{opacity:1;height:22px;transform:translateY(-1px)}html[data-theme=light] .content .external-link{border-bottom:.05em solid rgba(55,53,47,0.25)}html[data-theme=light] .content .block-ref{background:rgba(40,142,111,0.1);border-bottom-color:rgba(40,142,111,0.3)}html[data-theme=light] .content .marker-switch{color:#504d47;background:#f3f2ed;opacity:1}html[data-theme=light] .content .marker-switch:hover{opacity:.7}html[data-theme=light] .references-blocks-item div[data-refs-self*='"card"']>.block-children-container,html[data-theme=light] .cp__right-sidebar-inner div[data-refs-self*='"card"']>.block-children-container{background:var(--ls-primary-background-color)}html[data-theme=light] .cp__right-sidebar,html[data-theme=light] .references-blocks-item{--bf-codeblock-background-color:#f3f1ed}html[data-theme=light] .cp__right-sidebar .marker-switch,html[data-theme=light] .references-blocks-item .marker-switch{background:#e8e7e3}html[data-theme=dark] .cp__header .dropdown-wrapper a,html[data-theme=dark] .cp__header .dropdown-wrapper span{opacity:1}html[data-theme=dark] .left-sidebar-inner a.item{color:var(--ls-primary-text-color)}html[data-theme=dark] .content b,html[data-theme=dark] .content strong{font-weight:bolder;color:var(--bf-strong-text-color)}html[data-theme=dark] .content a.tag{opacity:.83}html[data-theme=dark] .content a.tag:hover{opacity:1}html[data-theme=dark] .content a.external-link b,html[data-theme=dark] .content a.external-link strong{color:var(--bf-external-link-color)}html[data-theme=dark] .content a.external-link b:hover,html[data-theme=dark] .content a.external-link strong:hover{color:var(--bf-external-link-hover-color)}html[data-theme=dark] .content mark{background:#766101;color:var(--ls-primary-text-color)}html[data-theme=dark] .content .external-link{border-bottom:.05em solid rgba(255,255,255,0.4)}html[data-theme=dark] .content .block-ref{background:rgba(31,83,88,0.4705882353);border-bottom-color:rgba(83,210,210,0.5019607843)}html[data-theme=dark] .content .marker-switch{color:var(--ls-primary-text-color);background:#444}html[data-theme=dark] .content .marker-switch:hover{opacity:1}html[data-theme=dark] .content svg.add-button>.circle{fill:var(--ls-block-bullet-color,#394b59)}html[data-theme=dark] .cp__right-sidebar,html[data-theme=dark] .references-blocks-item{--ls-page-properties-background-color:var(--ls-tertiary-background-color)}html[data-theme=dark] .menu-links-wrapper,html[data-theme=dark] .ui__modal-panel,html[data-theme=dark] .menu-link{background-color:var(--ls-secondary-background-color)}html[data-theme=dark] .menu-link:hover,html[data-theme=dark] .menu-link.chosen{background-color:var(--ls-menu-hover-color)}html[data-theme=dark] .ui__modal-overlay div{background:var(--ls-primary-background-color)}html[data-theme=dark] .tippy-tooltip,html[data-theme=dark] .tippy-wrapper{background-color:var(--ls-secondary-background-color)}html[data-theme=dark][data-color=logseq] .cp__cmdk>.hints,html[data-theme=dark][data-color=logseq] .ui__modal-panel,html[data-theme=dark][data-color=logseq] .tippy-tooltip,html[data-theme=dark][data-color=logseq] .form-input{border-color:var(--ls-border-color)}html[data-theme=dark][data-color=logseq] .ui__button.as-ghost:hover{background-color:rgba(255,255,255,0.1333333333)}html[data-theme=dark][data-color=logseq] .cp__themes-installed .it.is-active,html[data-theme=dark][data-color=logseq] .cp__themes-installed .it:hover{background-color:var(--ls-table-tr-even-background-color)}.cm-s-solarized,.cm-s-solarized.cm-s-light,.cm-s-solarized.cm-s-dark{background-color:var(--bf-codeblock-background-color);text-shadow:unset}.cm-s-solarized.CodeMirror,.cm-s-solarized.cm-s-light.CodeMirror,.cm-s-solarized.cm-s-dark.CodeMirror{-moz-box-shadow:unset;-webkit-box-shadow:unset;box-shadow:unset}.cm-s-solarized .CodeMirror-gutters,.cm-s-solarized.cm-s-light .CodeMirror-gutters,.cm-s-solarized.cm-s-dark .CodeMirror-gutters{background-color:var(--bf-codeblock-background-color)}.cm-s-solarized .CodeMirror-linenumber,.cm-s-solarized.cm-s-light .CodeMirror-linenumber,.cm-s-solarized.cm-s-dark .CodeMirror-linenumber{text-shadow:unset}.cm-s-lsradix.cm-s-light .CodeMirror-gutters,.cm-s-lsradix.cm-s-dark .CodeMirror-gutters{background-color:inherit}.extensions__code{display:block;background-color:var(--bf-codeblock-background-color);border-radius:.25rem}.extensions__code .code-editor{margin:.5rem 0}.extensions__code .extensions__code-lang{margin-right:7px;margin-top:7px;padding:unset;background-color:unset;opacity:.6}.extensions__code textarea{color:var(--ls-primary-text-color);background-color:var(--bf-codeblock-background-color)}.extensions__code .CodeMirror{color:var(--ls-secondary-text-color);background-color:var(--bf-codeblock-background-color);font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;padding:0 10px 0 20px;border-radius:.25rem}.extensions__code .CodeMirror .CodeMirror-sizer .CodeMirror-lines .CodeMirror-cursors .CodeMirror-cursor{border-left:solid thin #82aaff}.CodeMirror-lines{padding:4px 0}.CodeMirror-scroll{padding-top:18px;padding-bottom:66px}.extensions__code-calc{padding-top:22px;padding-right:22px}.white-theme .cp__right-sidebar .CodeMirror,.white-theme .cp__right-sidebar .CodeMirror-gutters,.white-theme .cp__right-sidebar .extensions__code-lang{background-color:rgba(242,241,238,0.95)}.cm-s-solarized .CodeMirror-matchingbracket,.cm-s-lsradix .CodeMirror-matchingbracket{text-decoration:underline;color:#5bdfdf !important}.cm-s-solarized span.cm-comment,.cm-s-lsradix span.cm-comment{color:#a0a0a0}.cm-s-solarized span.cm-string,.cm-s-solarized span.cm-string-2,.cm-s-lsradix span.cm-string,.cm-s-lsradix span.cm-string-2{color:#e6c963}.cm-s-solarized span.cm-number,.cm-s-lsradix span.cm-number{color:#978ade}.cm-s-solarized span.cm-variable,.cm-s-lsradix span.cm-variable{color:#82aaff}.cm-s-solarized span.cm-variable-2,.cm-s-lsradix span.cm-variable-2{color:rgba(255,255,255,0.7)}.cm-s-solarized span.cm-def,.cm-s-lsradix span.cm-def{color:var(--ls-secondary-text-color)}.cm-s-solarized span.cm-operator,.cm-s-lsradix span.cm-operator{color:#f15f60}.cm-s-solarized span.cm-keyword,.cm-s-lsradix span.cm-keyword{color:#f15f60}.cm-s-solarized span.cm-atom,.cm-s-lsradix span.cm-atom{color:#978ade}.cm-s-solarized span.cm-meta,.cm-s-lsradix span.cm-meta{color:white}.cm-s-solarized span.cm-tag,.cm-s-lsradix span.cm-tag{color:#f07178}.cm-s-solarized span.cm-attribute,.cm-s-lsradix span.cm-attribute{color:#c792ea}.cm-s-solarized span.cm-qualifier,.cm-s-lsradix span.cm-qualifier{color:#41b394}.cm-s-solarized span.cm-property,.cm-s-lsradix span.cm-property{color:#9bd174}.cm-s-solarized span.cm-builtin,.cm-s-lsradix span.cm-builtin{color:#45add6}.cm-s-solarized span.cm-variable-3,.cm-s-solarized span.cm-type,.cm-s-lsradix span.cm-variable-3,.cm-s-lsradix span.cm-type{color:darkorange}.white-theme .cm-s-solarized span.cm-string,.white-theme .cm-s-solarized span.cm-string-2,.white-theme .cm-s-lsradix span.cm-string,.white-theme .cm-s-lsradix span.cm-string-2{color:darkorange}.white-theme .cm-s-solarized span.cm-variable-2,.white-theme .cm-s-lsradix span.cm-variable-2{color:rgba(0,0,0,0.7)}.white-theme .cm-s-solarized span.cm-def,.white-theme .cm-s-lsradix span.cm-def{color:var(--ls-secondary-text-color)}.white-theme .cm-s-solarized span.cm-meta,.white-theme .cm-s-lsradix span.cm-meta{color:var(--ls-secondary-text-color)}.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background{background:rgba(0,0,0,0.1)}.cm-s-solarized.cm-s-dark .CodeMirror-linenumber{color:#586375}.cm-s-solarized.cm-s-light .CodeMirror-activeline-background{background:rgba(0,0,0,0.05)}.dark-theme .cm-s-solarized.cm-s-dark.CodeMirror ::selection,.dark-theme .cm-s-lsradix.cm-s-dark.CodeMirror ::selection{background:rgba(255,255,255,0.1)}.dark-theme .cm-s-solarized.cm-s-dark div.CodeMirror-selected,.dark-theme .cm-s-lsradix.cm-s-dark div.CodeMirror-selected{background:rgba(255,255,255,0.1)}.dark-theme .cm-s-solarized.cm-s-dark .CodeMirror-line::selection,.dark-theme .cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection,.dark-theme .cm-s-lsradix.cm-s-dark .CodeMirror-line::selection,.dark-theme .cm-s-lsradix.cm-s-dark .CodeMirror-line::-moz-selection{background:rgba(255,255,255,0.1)}.dark-theme .cm-s-dark .CodeMirror-line>span::selection,.dark-theme .cm-s-dark .CodeMirror-line>span::-moz-selection,.dark-theme .cm-s-dark .CodeMirror-line>span>span::selection,.dark-theme .cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:rgba(255,255,255,0.1)}.white-theme .cm-s-solarized.cm-s-light div.CodeMirror-selected,.white-theme .cm-s-lsradix.cm-s-light div.CodeMirror-selected{background:rgba(168,175,255,0.2)}.white-theme .cm-s-solarized.cm-s-light .CodeMirror-line::selection,.white-theme .cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection,.white-theme .cm-s-lsradix.cm-s-light .CodeMirror-line::selection,.white-theme .cm-s-lsradix.cm-s-light .CodeMirror-line::-moz-selection{background:rgba(168,175,255,0.2)}.white-theme .cm-s-solarized.cm-s-dark div.CodeMirror-selected{background:rgba(168,175,255,0.2)}.white-theme .cm-s-solarized.cm-s-dark div.CodeMirror-selected{background:rgba(168,175,255,0.2)}.white-theme .cm-s-light .CodeMirror-line>span::selection,.white-theme .cm-s-light .CodeMirror-line>span::-moz-selection,.white-theme .cm-s-light .CodeMirror-line>span>span::selection,.white-theme .cm-s-light .CodeMirror-line>span>span::-moz-selection{background:rgba(168,175,255,0.2)}:root{--ls-font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--ls-scrollbar-width:8px}
--------------------------------------------------------------------------------
/docs/better-typography(legacy).md:
--------------------------------------------------------------------------------
1 | # Better Typography
2 |
3 | ## Headings' outline
4 |
5 | For aesthetics, I like to use headings to divide sections of blocks for adding rhythm of the page. But the spacing of headings is currently not good in logseq. So I compact the space of heading blocks.
6 |
7 | 
8 |
9 | In fact, I set all margins to 0 for headings because the 1.5 line-height can't be too sufficient. In web article typography, the line-height of h1 is often set to about 1.2 to reduce the contrast of spacing between the heading and the body text. The larger headings the smaller line height. In the future version I'll take more space rhythm into account.
10 |
11 | ## Child Blocks
12 |
13 | For the headings' spacing above, it's not just a simple space compress of heading. Why logseq makes the space of heading so wide is that they have to make enough space before the child blocks following (but I think it's overdone). However besides headings, all the blocks with children means more than a sentence. To tell apart those blocks from one sentence block, it's neccessary to add more space for those who have child blocks.
14 |
15 | You may found little difference in daily usage. However if you collapse the first heading in the picture above, you'll find two heading level 1 don't have so much spacing. It keeps compact. And when you unfold the content, they will be apart from each other.
16 |
17 | 
18 |
19 | You can see a clear section divide space when you unfold your content. Notice that the space is not always as wide as the picture shows above, it depends on how deep you unfold your child blocks. When you collapse all the block(outline mode), the space reaches to the smallest. In other words, you'll get a visual hint "this section ends here" when you have a long section with many child blocks.
20 |
21 | ## \ and \
22 |
23 | If unordered list and ordered list are adjacent, there is large space between them…… I don't know why it turns out this, so I fix it.
24 |
25 | 
26 |
27 |
--------------------------------------------------------------------------------
/docs/compability-for-accent-color.md:
--------------------------------------------------------------------------------
1 | ## Compability for accent color (to theme developer)
2 |
3 | Color pallete variable structure.
4 |
5 | ```
6 | Light mode
7 | └ Common style
8 | └ Accent color specific
9 | └ Default logseq color specific (also as fallback)
10 | ```
11 |
12 | And the same as dark mode.
13 |
14 | Notice that accent color design system use a fixed color variable from color pallete ahead of all self-defined variables. which makes it hard to overwrite color in accent color mode with good compability.
15 |
16 | There are two ways of overwriting:
17 |
18 | 1. Overwrite dom style. Turn it back to self-defined variable first as old design does. It requires a constant alignment with Logseq's new design and the custom-theme will be in frequent update.
19 | 2. Write the full self-defined color pallete. This requires a large amount of code and introduces additional performance overhead, which may not be desirable for a custom-theme.
20 |
21 | And, here's the third way:
22 |
23 | - Give up adaption of accent color.
24 |
25 |
--------------------------------------------------------------------------------
/docs/fix-codemirror(legacy).md:
--------------------------------------------------------------------------------
1 | This is a bug that heavily affects small screen viewing.
2 |
3 | With the default theme, the content won't fit the screen when the window width is not wide enough. And content on the left side is unreachable.
4 |
5 | 
6 |
7 |
8 |
9 | When using a mobile phone, things getting worse because users can scroll the screen in any direction (the expected scroll behavior is restricted to vertical only or horizontal only), resulting in a weak UI experience that make user feel the page not robust enough.
10 |
11 | It's caused by flex child element's width overflows its parents. Here two potential overflowing
12 |
13 | - `.cp__sidebar-main-content `: No width restriction
14 |
15 | This one can be easily fixed. But the next one is hard.
16 |
17 | - `.flex-row`: When a bullet and a code block side by side in a flex-row, the code block calculates 100% width as the .flex-row width ignoring the bullet space, which causing the code block to overflow the screen.
18 |
19 | In other words, if the bullet is hidden, the width of code block just works as expected. But with the bullet, the width of code block won't shrink to fit the screen.
20 |
21 | Despite knowing the cause, the issue still can't be perfectly fixed on some devices. In `custom-desktop.css` file, I manually add margin-right space( = bullet width) to code block to force it work well on mobile screen. But this is not a good solution because all the code blocks(including not overflowing ones) are affected. That means the width of code blocks is always shorter than other blocks. The vertical typography of right side is not fullly justified.
22 |
23 | Also I tried dynamic max-width solution:
24 |
25 | ```
26 | max-width: calc(100% - 40px)
27 | ```
28 |
29 | The flaw still exists. The most weird thing is that the first and second level `.flex-row` aren't overflowed, only the 3rd level and belows become overflowed. So the 1st and 2nd level will be short than normal with this calculation.
30 |
31 | This flaw is not on the current web version (Chrome and Safari have been confirmed). So `custom.css` works well. And if you are using desktop app, you may never encounter this problem because your screen is always wide enough.
32 |
33 | Fixed:
34 |
35 | 
36 |
37 |
--------------------------------------------------------------------------------
/docs/some-thoughts-on-doc-mode.md:
--------------------------------------------------------------------------------
1 | - make doc mode dense for note taking
2 | - make `
` slim for title partition. For bonofix theme treats font size and content partition as different aspects in note taking. If you want a horizontal rule the heading2 as default theme, bonofix recommends you to manually create a line by typing `---` in block body.
3 |
4 | ---
5 | This article is still under revise.
6 | ---
7 |
8 | ## About typography
9 |
10 | Document mode in logseq hides all bullets while leave indentation space there, and with large spacing between blocks.
11 |
12 | It seems to be a trend in websites that large margin space is designed to mesh out grid, and designer's blogs tends to use sparse typography to be more fashionable. It's may be the influce of modern graphic design in poster or campaign layout. At most of time, large space is a good tool to make contrast and focusing. It also brings a good visual experience for publishing. However, from my point of view, it's not as much suitable for note-taking. Compared to published documents, the sentences in notes is often much more short without strict logical coherence. Large spacing will make information too sparse. In this theme, I make the headings more compact and content more compact to each other.
13 |
14 | Meanwhile, there are classical line height sets in article typography. Take line height 1.5em (or padding 0.5em) as standard, the larger text the less line height multiples. Academic design will make the multiples arithmetic sequence or fibonacci sequence. In Logseq, the doc mode can be much more complex. Each block has it's own margin space, and the horizontal indentations also make the page seem messy. In this mode, I often give up bullet indentation and flatten my content. Then I notice that the space between headings and body is hard to control.
15 |
16 | [Here should be some images for explanation]
17 |
18 | ---
19 |
20 | ## About markdown and note taking
21 |
22 | Markdown is an awesome format for publishing. You can easily organize your global style. However, it's not good enough for note taking. A published document should be well structured and easy to read, while notes are not always well organized, they're more flexible. Treat markdown as an input method but not file format might be a better choice for note taking. **In fact, the markdown files in logseq is not just file format, it's a human readable database**. Some people may think they use markdown format to be compatible with other apps. However, with more and more features involved, logseq markdown files are becoming harder to read. That's note taking. From other point of view, there is no standard for note taking elements and corresponding syntax.
--------------------------------------------------------------------------------
/docs/table-overflow(legacy).md:
--------------------------------------------------------------------------------
1 | (This article is not revised yet)
2 |
3 | For narrow screen, I add `padding=20px` to the main-container for better viewing. The expected query table padding should be like this:
4 |
5 | 
6 |
7 | However, table padding in Logseq (v0.3.2 now) is:
8 |
9 | 
10 |
11 | You would see the right space is serverly compressed, it overflows the right side of content (see the top-right icon for ref ) (And code block problem still there)
12 |
13 | Why? Is the table unconstrained?
14 |
15 | Nope, it has nothing to do with the table. It's a problem related to **flex row**.
16 |
17 | ## Explanation
18 |
19 | Let us replace the bullet with string "dot". Then add padding to it.
20 |
21 | 
22 |
23 | You can see the right block is "pushed" to right by the growning "DOT" space.
24 |
25 | So it's the problem on the dot? No, flex-row won't leave things like that. ~~**It's because Logseq set the table container right block width to 100%.** **Setting 100% width may lead to destroy the flex box**. Because it will be based on the width of flex-parent instead of the child.~~
26 |
27 | These two flex rows have different behaviors though the only difference is a simply div wrapper. (using logseq's style.css).
28 |
29 | For the first ,we just let the overflow-div's container be the direct child of flex row. For the second one, the overflow-div's container is wrapped by an extra div.
30 |
31 | 
32 |
33 | ```html
34 |
39 |
40 |
41 |
42 |
DOT
43 |
44 |
asdcapsducbapsudacpsubdcpusbapucapsucbdpaucapsucbpasudbacpsudbcpausdbcpasudbcpasudacpudbs
45 |
46 |
47 |
51 |
DOT
52 |
53 |
54 |
asdcapsducbapsudacpsubdcpusbapucapsucbdpaucapsucbpasudbacpsudbcpausdbcpasudbcpasudacpudbs
55 |
56 |
57 |