My logseq custom.css (solarized theme & logseq-plugin-ol & bullet_threading & awesome-props & awesome-content & Code Mirror & Tag)

!_logseq_custom_css_banner.txt

 _                                  ____          _                                
| |    ___   __ _ ___  ___  __ _   / ___|   _ ___| |_ ___  _ __ ___    ___ ___ ___ 
| |   / _ \ / _` / __|/ _ \/ _` | | |  | | | / __| __/ _ \| '_ ` _ \  / __/ __/ __|
| |__| (_) | (_| \__ \  __/ (_| | | |__| |_| \__ \ || (_) | | | | | || (__\__ \__ \
|_____\___/ \__, |___/\___|\__, |  \____\__,_|___/\__\___/|_| |_| |_(_)___|___/___/
            |___/             |_|                                                  

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');

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');

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;
}

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);
}

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;
}

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);
}

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;
}

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