Skip to content

Instantly share code, notes, and snippets.

@bGZo

bGZo/!_logseq_custom_css_banner.txt

Last active June 18, 2024 13:33
Show Gist options
  • Save bGZo/8df460ec380a5bd4385cb8225e894cf0 to your computer and use it in GitHub Desktop.
Save bGZo/8df460ec380a5bd4385cb8225e894cf0 to your computer and use it in GitHub Desktop.
Download ZIP
My logseq custom.css (solarized theme & logseq-plugin-ol & bullet_threading & awesome-props & awesome-content & Code Mirror & Tag)
Raw
!_logseq_custom_css_banner.txt
_ ____ _
| | ___ __ _ ___ ___ __ _ / ___| _ ___| |_ ___ _ __ ___ ___ ___ ___
| | / _ \ / _` / __|/ _ \/ _` | | | | | | / __| __/ _ \| '_ ` _ \ / __/ __/ __|
| |__| (_) | (_| \__ \ __/ (_| | | |__| |_| \__ \ || (_) | | | | | || (__\__ \__ \
|_____\___/ \__, |___/\___|\__, | \____\__,_|___/\__\___/|_| |_| |_(_)___|___/___/
|___/ |_|
Raw
1.online_without_cdn.css
/********************************************************
* Online Method (No CDN)
*
* Get from https://github.com/sethyuan/logseq-plugin-ol
********************************************************/
@import url('https://gist.githubusercontent.com/bGZo/f81fa3bff567aaf9191afafbab6873d8/raw/6ae288bf1c5393addd6ae6e1606335e7a79c9bc6/logseq-plugin-ol.css');
/*******************************************************
** Get from https://github.com/pengx17/logseq-dev-theme
********************************************************/
@import url('https://raw.githubusercontent.com/pengx17/logseq-dev-theme/main/bullet_threading.css');
/***************************************************************************************************
* Get from https://github.com/yoyurec/logseq-awesome-props
* Warning: Not recommand use online, even CDN, they some property need to be set!
* Otherwise the layout would not work at all!
* https://github.com/yoyurec/logseq-awesome-props/blob/main/src/modules/propsLayout/propsLayout.css
***************************************************************************************************/
@import url('https://raw.githubusercontent.com/yoyurec/logseq-awesome-props/main/src/modules/propsLayout/propsLayout.css');
/***************************************************************************************************
* Get from https://github.com/yoyurec/logseq-awesome-content
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/admonition/admonition.css
***************************************************************************************************/
@import url('https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/admonition/admonition.css');
/**
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/code/code.css
*/
@import url('https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/code/code.css');
/**
* https://github.com/yoyurec/logseq-awesome-content/raw/main/src/modules/quotes/quotes.css
*/
@import url('https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/quotes/quotes.css');
/**
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/tasks/tasks.css
*/
@import url('https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/tasks/tasks.css');
/****************************************************************************
* Get from https://github.com/FarhadG/code-mirror-themes
* https://github.com/FarhadG/code-mirror-themes/blob/master/themes/rdark.css
****************************************************************************/
@import url('https://raw.githubusercontent.com/FarhadG/code-mirror-themes/master/themes/rdark.css');
Raw
2.online_with_githack_cdn.css
/********************************************************************************************
* Online Method (With Githack CDN)
*
* Get from https://github.com/sethyuan/logseq-plugin-ol
*******************************************************************************************/
@import url('https://gist.githack.com/bGZo/f81fa3bff567aaf9191afafbab6873d8/raw/6ae288bf1c5393addd6ae6e1606335e7a79c9bc6/logseq-plugin-ol.css');
/*******************************************************
** Get from https://github.com/pengx17/logseq-dev-theme
********************************************************/
@import url('https://raw.githack.com/pengx17/logseq-dev-theme/main/bullet_threading.css');
/***********************************************************
* Get from https://github.com/yoyurec/logseq-awesome-props
* Warning: Not recommand use online, even CDN, they some property need to be set!
* Otherwise the layout would not work at all!
* https://github.com/yoyurec/logseq-awesome-props/blob/main/src/modules/propsLayout/propsLayout.css
*/
@import url('https://raw.githack.com/yoyurec/logseq-awesome-props/main/src/modules/propsLayout/propsLayout.css');
/*************************************************************
* Get from https://github.com/yoyurec/logseq-awesome-content
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/admonition/admonition.css
*/
@import url('https://raw.githack.com/yoyurec/logseq-awesome-content/main/src/modules/admonition/admonition.css');
/**
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/code/code.css
*/
@import url('https://raw.githack.com/yoyurec/logseq-awesome-content/main/src/modules/code/code.css');
/**
* https://github.com/yoyurec/logseq-awesome-content/raw/main/src/modules/quotes/quotes.css
*/
@import url('https://raw.githack.com/yoyurec/logseq-awesome-content/main/src/modules/quotes/quotes.css');
/**
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/tasks/tasks.css
*/
@import url('https://raw.githack.com/yoyurec/logseq-awesome-content/main/src/modules/tasks/tasks.css');
/****************************************************************************
* Get from https://github.com/FarhadG/code-mirror-themes
* https://github.com/FarhadG/code-mirror-themes/blob/master/themes/rdark.css
****************************************************************************/
@import url('https://raw.githack.com/FarhadG/code-mirror-themes/master/themes/rdark.css');
Raw
3.local_with_curl.css
/********************************************************************************************
* Local Method
*
* FIXME: bug which only work with absolut path with `assets`
* discuss on https://discuss.logseq.com/t/custom-css-cant-import/3297/4
*
* Get from https://github.com/sethyuan/logseq-plugin-ol
* curl https://gist.githubusercontent.com/bGZo/f81fa3bff567aaf9191afafbab6873d8/raw/6ae288bf1c5393addd6ae6e1606335e7a79c9bc6/logseq-plugin-ol.css -o ./assets/custom.css/logseq-plugin-ol.css
*******************************************************************************************/
@import url('../assets/custom.css/logseq-plugin-ol.css');
/*******************************************************
* Get from https://github.com/pengx17/logseq-dev-theme
* curl https://raw.githubusercontent.com/pengx17/logseq-dev-theme/main/bullet_threading.css -o ./assets/custom.css/bullet_threading.css
*******************************************************/
@import url('../assets/custom.css/bullet_threading.css');
/***********************************************************
* Get from https://github.com/yoyurec/logseq-awesome-props
* Warning: Not recommand use online, even CDN, they some property need to be set!
* Otherwise the layout would not work at all!
* https://github.com/yoyurec/logseq-awesome-props/blob/main/src/modules/propsLayout/propsLayout.css
* curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-props/main/src/modules/propsLayout/propsLayout.css -o ./assets/custom.css/propsLayout.css
*******************************************************/
@import url('../assets/custom.css/propsLayout.css');
/*************************************************************
* Get from https://github.com/yoyurec/logseq-awesome-content
*
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/admonition/admonition.css
* curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/admonition/admonition.css -o ./assets/custom.css/admonition.css
*******************************************************/
@import url('../assets/custom.css/admonition.css');
/**
* <= Code
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/code/code.css
* curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/code/code.css -o ./assets/custom.css/code.css
*/
@import url('../assets/custom.css/code.css');
/**
* https://github.com/yoyurec/logseq-awesome-content/raw/main/src/modules/quotes/quotes.css
* curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/quotes/quotes.css -o ./assets/custom.css/quotes.css
*/
@import url('../assets/custom.css/quotes.css');
/**
* <= Task
* https://github.com/yoyurec/logseq-awesome-content/blob/main/src/modules/tasks/tasks.css
* curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/tasks/tasks.css -o ./assets/custom.css/tasks.css
*/
@import url('../assets/custom.css/tasks.css');
/**
* <= Code Mirror
*
* Select One
* http://farhadg.github.io/code-mirror-themes/ on https://github.com/FarhadG/code-mirror-themes
* https://codemirror.net/5/demo/theme.html
* https://codemirror.net/5/theme/
* Then modify edu setting so that work due to https://github.com/logseq/logseq/pull/3699
* editor/extra-codemirror-options {:theme "xxx"}
*
* curl https://raw.githubusercontent.com/FarhadG/code-mirror-themes/master/themes/rdark.css -o ./assets/custom.css/rdark.css
*/
@import url('../assets/custom.css/rdark.css');
/*******************
* Style Begin
*
* <= Color customized
********************/
@import url('../assets/custom.css/theme.css');
/**
* Other customized
*/
@import url('../assets/custom.css/custom.css');
/**
* <= Background
*
* FIXME: bug: background not work on above css file
*/
#app-container,
#main-container {
background-image: url('../assets/custom.css/texture.png'); /* http://unpkg.com/bgzo/img/texture.png*/
background-repeat: repeat;
}
Raw
4.theme.css
/* Color Begin via: https://gist.github.com/madawei2699/61cf9601a443df21a9fabb282723936c */
:root{
--base03: #002b36;
--base02: #073642;
--base01: #586e75;
--base00: #657b83;
--base0: #839496;
--base1: #93a1a1;
--base2: #eee8d5;
--base3: #fdf6e3;
--yellow: #b58900;
--orange: #cb4b16;
--red: #dc322f;
--magenta: #d33682;
--violet: #6c71c4;
--blue: #268bd2;
--cyan: #2aa198;
--green: #859900;
/* via: https://ethanschoonover.com/solarized */
--sakura: #FEDFE1;
--ginnezumi: #91989F;
--nae: #A8D8B9;
--ouchi: #9B90C2;
--shironeri: #FCFAF2;
--usuao: #91B493;
/* via: https://nipponcolors.com/#{name} */
--cache: #DDD6C1;
--ls-highlight-color: var(--usuao);
}
.light-theme, html[data-theme="light"]{
--ls-primary-background-color: var(--base3);
--ls-secondary-background-color: var(--base2);
--ls-tertiary-background-color: var(--cache);
--color-level-1: var(--ls-secondary-background-color);
--color-level-2: var(--ls-tertiary-background-color);
--color-level-3: var(--ls-quaternary-background-color);
--ls-page-properties-background-color: var(--ls-secondary-background-color);
--ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
--ls-block-properties-background-color: var(--ls-secondary-background-color);
--ls-selection-background-color: var(--ls-tertiary-background-color);
--ls-a-chosen-bg: var(--ls-tertiary-background-color);
--ls-table-tr-even-background-color: var(--ls-secondary-background-color);
--ls-slide-background-color: var(--ls-primary-background-color);
--ls-link-text-color: var(--base00);
--ls-page-checkbox-color: var(--ls-highlight-color);
--ls-page-blockquote-bg-color: var(--shironeri);
--ls-page-mark-bg-color: var(--ls-highlight-color);
--ls-page-blockquote-border-color: var(--base0);
}
@media (prefers-color-scheme: dark) {
.light-theme, html[data-theme="light"]{
--ls-primary-background-color: var(--base03);
--ls-secondary-background-color: var(--base02);
--ls-tertiary-background-color: #08404f;
--ls-quaternary-background-color: #094b5a;
--ls-table-tr-even-background-color: var(--base02);
--ls-active-primary-color: #8ec2c2;
--ls-active-secondary-color: #d0e8e8;
--ls-block-properties-background-color: var(--base02);
--ls-page-properties-background-color: var(--base02);
--ls-block-ref-link-text-color: #1a6376;
--ls-page-blockquote-border-color: var(--base00);
--ls-secondary-border-color: #126277;
--ls-tertiary-border-color: rgba(0,2,0,.1);
--ls-guideline-color: #0b4a5a;
--ls-menu-hover-color: var(--ls-secondary-background-color);
--ls-primary-text-color: #a4b5b6;
--ls-secondary-text-color: #dfdfdf;
--ls-title-text-color: #93a1a1;
--ls-link-text-color: #8abbbb;
--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: #0f4958;
--ls-block-bullet-color: #608e91;
--ls-block-highlight-color: #0a3d4b;
--ls-selection-background-color: #338fff;
--ls-selection-text-color: #fff;
--ls-page-checkbox-color: #6093a0;
--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-mark-color: #262626;
--ls-page-mark-bg-color: var(--ls-highlight-color);
--ls-page-inline-code-color: var(--ls-primary-text-color);
--ls-page-inline-code-bg-color: var(--base02);
--ls-scrollbar-foreground-color: #11505f;
--ls-scrollbar-background-color: rgba(30,60,67,.1);
--ls-scrollbar-thumb-hover-color: hsla(0,0%,100%,.2);
--ls-cloze-text-color: #8fbc8f;
--ls-icon-color: var(--ls-link-text-color);
--ls-search-icon-color: var(--ls-primary-text-color);
--ls-search-icon-hover-color: var(--ls-secondary-text-color);
--ls-a-chosen-bg: var(--ls-quaternary-background-color);
--ls-pie-bg-color: #01303b;
--ls-pie-fg-color: #0b5869;
--ls-highlight-color-gray: var(--color-gray-900);
--ls-highlight-color-red: var(--color-red-900);
--ls-highlight-color-yellow: var(--color-yellow-900);
--ls-highlight-color-green: var(--color-green-900);
--ls-highlight-color-blue: var(--color-blue-900);
--ls-highlight-color-purple: var(--color-purple-900);
--ls-highlight-color-pink: var(--color-pink-900);
--ls-error-text-color: var(--color-red-100);
--ls-error-background-color: var(--color-red-900);
--ls-warning-text-color: var(--color-yellow-100);
--ls-warning-background-color: var(--color-yellow-900);
--ls-success-text-color: var(--color-green-100);
--ls-success-background-color: var(--color-green-900);
--ls-focus-ring-color: rgba(18,98,119,.5);
--ls-header-button-background: #dee4ea;
--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;
}
img {
filter: brightness(.80) contrast(1.1);
}
}
mark>code{
background-color: var(--ls-highlight-color) !important;
}
mark>a{
color: var(--base01);
}
.form-input{
background-color: var(--base2);
}
Raw
5.tag.css
/**
* https://discuss.logseq.com/t/css-for-questions-and-answers/8197
* https://discuss.logseq.com/t/custom-tags-rendering-with-emojis/709
* https://discuss.logseq.com/t/how-do-i-change-some-tag-colours/637/2
* https://www.redgregory.com/roam-content/2021/1/8/customize-tags-inside-roam-research-with-this-simple-css
*/
a.tag[data-ref] {
background-color: var(--ls-highlight-color);
color: white;
display: inline-flex;
padding: 3px 7px;
line-height: 0.8rem;
border-radius: 1rem 0.4rem 0.4rem 1rem;
font-size: 0.8rem;
letter-spacing: 0.05em;
font-weight: 600;
padding: 0.2rem 0.3rem 0.2rem 0.3rem;
transition: .3s;
white-space: nowrap;
/* text-transform: uppercase; */
}
a.tag[data-ref]:hover {
filter: grayscale(25%) !important;
}
a.tag[data-ref]::before {
background-color: var(--ls-primary-background-color);
border-radius: 50%;
content: '';
display: inline-block;
height: 0.6rem;
line-height: 0.8rem;
margin-right: 0.3rem;
width: 0.6rem;
}
[data-refs-self*='"closed"'] > *,
[data-refs-self*='"deprecated"'] > *{
color: var(--ginnezumi);
/** Note: Attribute selector
* `.flex-row` only support for tagged line.
* TODO: Support css only work for first level element
* how to make by count level?
* [level*='"3"']
* .block-children-container
*/
}
a.tag[data-ref="closed"],
a.tag[data-ref="deprecated"] {
background-color: var(--ginnezumi) !important;
}
a.tag[data-ref="thought"]::before {
background-color: initial;
content: '💭';
margin-right: 0.6rem;
}
Raw
6.custom.css.custom.css
/**
* <= Tasks customized
*/
.canceled, .cancelled, .done {
text-decoration: none !important;
opacity: .6
}
/**
* <= Href link underline
*/
.external-link {
border: 0;
text-decoration: underline;
text-decoration-style: dashed;
}
/**
* <= Help btn
*/
.cp__sidebar-help-btn {
display:none;
}
/**
* https://discuss.logseq.com/t/align-text-images-etc-to-the-right-workaround/13375
*/
.ra{
float: right;
}
/**
* Code Mirror
*/
.CodeMirror {
border-radius: var(--ls-border-radius-low);
}
Raw
7.propsLayout.custom.css
/** Properties
* via: https://github.com/yoyurec/logseq-awesome-props
*/
.block-properties {
overflow: hidden;
position: relative;
margin: 0;
padding: 0 8px !important;
border: 4px solid var(--ls-block-properties-background-color) !important;
background: var(--ls-block-properties-background-color) !important;
}
.block-properties.page-properties {
border-color: var(--ls-page-properties-background-color) !important;
background-color: var(--ls-page-properties-background-color) !important;
}
.block-properties > div > div {
display: inline-flex !important;
align-items: center;
}
.page-property-key {
display: inline-flex;
flex-grow: 1;
line-height: 1.2em;
}
.block-properties span.page-property-key:hover {
background: none;
}
.block-properties .page-property-value {
overflow: hidden;
text-overflow: ellipsis;
}
.block-properties .bracket {
display: none;
}
.block-properties .page-property-value .mr-1 {
margin-right: 0;
}
.block-properties > div > :is(div, span, a):first-child {
line-height: 2.7ex;
}
.block-properties:not(.page-properties),
.block-properties.page-properties,
.ls-block.ls-block[data-refs-self*=".awpr-layout-grid"] .block-properties {
display: grid !important;
grid-template-columns: 1fr 10fr;
}
.block-properties:not(.page-properties) > div,
.block-properties.page-properties > div,
.ls-block.ls-block[data-refs-self*=".awpr-layout-grid"]
.block-properties
> div {
display: contents !important;
}
.block-properties:not(.page-properties) > div:after,
.block-properties.page-properties > div:after,
.ls-block.ls-block .block-properties > div:after {
display: none;
}
.block-properties > div:last-child:after {
display: none !important;
}
.block-properties:not(.page-properties) > div > span.mr-1,
.block-properties.page-properties > div > span.mr-1,
.ls-block.ls-block .block-properties > div > span.mr-1 {
display: none;
}
.block-properties:not(.page-properties)
> div
> :is(div, span, a):first-child:after,
.block-properties.page-properties > div > :is(div, span, a):first-child:after,
.ls-block.ls-block.block-properties
> div
> :is(div, span, a):first-child:after {
content: "\25cf";
display: block;
margin: 2px 1em 0 1.6em;
color: var(--ls-primary-text-color);
opacity: 0.2;
font-family: Inter;
font-size: 0.6em;
line-height: 2.2em;
}
@bGZo
Copy link
Author

bGZo commented Oct 2, 2023 •
edited
Loading

Usage

Update

curl https://gist.githubusercontent.com/bGZo/f81fa3bff567aaf9191afafbab6873d8/raw/6ae288bf1c5393addd6ae6e1606335e7a79c9bc6/logseq-plugin-ol.css -o ./assets/custom.css/logseq-plugin-ol.css
curl https://raw.githubusercontent.com/pengx17/logseq-dev-theme/main/bullet_threading.css -o ./assets/custom.css/bullet_threading.css
curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/admonition/admonition.css -o ./assets/custom.css/admonition.css
curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/code/code.css -o ./assets/custom.css/code.css
curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/quotes/quotes.css -o ./assets/custom.css/quotes.css
curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-content/main/src/modules/tasks/tasks.css -o ./assets/custom.css/tasks.css
curl https://raw.githubusercontent.com/FarhadG/code-mirror-themes/master/themes/rdark.css -o ./assets/custom.css/rdark.css

# Please chekout again!
curl https://raw.githubusercontent.com/yoyurec/logseq-awesome-props/main/src/modules/propsLayout/propsLayout.css -o ./assets/custom.css/propsLayout.css

Sync Customized Code

curl https://gist.githubusercontent.com/bGZo/8df460ec380a5bd4385cb8225e894cf0/raw/e0e2aba34baea6a1f11e1eb25d3e903fb62813fa/6.custom.css.custom.css -o ./assets/custom.css/custom.css
curl https://gist.githubusercontent.com/bGZo/8df460ec380a5bd4385cb8225e894cf0/raw/e0e2aba34baea6a1f11e1eb25d3e903fb62813fa/5.tag.css -o ./assets/custom.css/tag.css
curl https://gist.githubusercontent.com/bGZo/8df460ec380a5bd4385cb8225e894cf0/raw/e0e2aba34baea6a1f11e1eb25d3e903fb62813fa/4.theme.css -o ./assets/custom.css/theme.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment