feat: extract bullet_threading css

Bad3r · Aug 10, 2021 · c245957 · c245957
1 parent df4d3f5
commit c245957
Show file tree

Hide file tree

Showing 8 changed files with 296 additions and 198 deletions.
diff --git a/bullet_threading.css b/bullet_threading.css
@@ -0,0 +1,91 @@
+:root {
+  --ls-block-bullet-active-color: var(--ls-link-text-color);
+  --ls-block-bullet-threading-width: 1px;
+}
+
+.block-control {
+  z-index: 1;
+}
+
+.block-children {
+  border-left-width: var(--ls-block-bullet-threading-width);
+}
+
+.block-content-wrapper {
+  position: relative;
+}
+
+.bullet-container {
+  height: 14px !important;
+  width: 14px !important;
+  transform: translateX(-1.5px);
+}
+
+/* Block bullet path should only show in a nested block */
+.ls-block .bullet {
+  background-color: var(--ls-block-bullet-active-color);
+}
+.ls-block div.items-center {
+  position: relative;
+  height: 26px !important;
+}
+.ls-block:not(:focus-within) .bullet {
+  background-color: var(--ls-block-bullet-color);
+  transform: scale(1);
+}
+.ls-block .ls-block > div > div.items-center::before {
+  pointer-events: none;
+  content: "";
+  left: 0;
+  right: 6px;
+  top: -1px;
+  bottom: -1px;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1), calc(-50% + var(--ls-block-bullet-threading-width) * 0.5));
+  /* shift left 1px for border */
+  position: absolute;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom-left-radius: 10px;
+}
+.ls-block .ls-block:focus-within > div > div.items-center::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+.ls-block .block-children > .ls-block::before {
+  pointer-events: none;
+  content: "";
+  top: -1rem;
+  bottom: 0;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  left: 0;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1));
+  position: absolute;
+}
+.ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+.ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
+  border-color: transparent;
+}
+
+.ls-block[haschild=true] > div > .block-content-wrapper::before {
+  pointer-events: none;
+  content: "";
+  top: 12px;
+  bottom: 0;
+  left: -17px;
+  position: absolute;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+}
+.ls-block[haschild=true] > .heading > .block-content-wrapper::before {
+  top: calc(50% + 2px);
+}
+.ls-block[haschild=true]:focus-within > div > .block-content-wrapper::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+
+.doc-mode div.items-center::before,
+.doc-mode div.items-center::after,
+.doc-mode .ls-block::before,
+.doc-mode .ls-block::after {
+  display: none;
+}
diff --git a/custom.css b/custom.css
@@ -352,9 +352,6 @@ a.title h1.title {
 }
 
 :root {
-  --ct-guideline-color: var(--ct-bold-color-transparent);
-  --ct-guideline-size: 2px;
-  --ct-guideline-style: solid;
   --ct-bullet-size: 6px;
   --ct-bullet-color: var(--ct-bold-color);
   --ct-bullet-active-color: var(--ls-active-primary-color);
@@ -400,17 +397,6 @@ a.title h1.title {
   font-variant-numeric: tabular-nums;
 }
 
-/* vertical lines and bullets */
-.block-children {
-  border-left: var(--ct-guideline-size) var(--ct-guideline-style) var(--ct-guideline-color);
-}
-
-.bullet-container {
-  width: 14px;
-  height: 14px;
-  transform: translateX(-1px);
-}
-
 .bullet-container .bullet {
   width: var(--ct-bullet-size);
   height: var(--ct-bullet-size);
@@ -468,91 +454,102 @@ a:hover > .bullet-container .bullet {
   transform: scaleY(1);
 }
 
-/************************* 
- * Editing block threading
- *************************/
-.ls-block > div > div.items-center {
-  height: 26px !important;
-  position: relative;
+/* Block oversize issue */
+.block-content-wrapper {
+  max-width: var(--ct-block-max-width);
 }
 
-div.items-center::before,
-div.items-center::after,
-.ls-block::before,
-.ls-block::after,
-.block-content-wrapper::before {
-  pointer-events: none;
+.block-content-wrapper > div.flex-1 {
+  width: 100%;
 }
 
-.ls-block > div > div.items-center::before {
-  content: "";
-  height: 100%;
-  left: -2px;
-  right: 7px;
-  top: calc(-50% + 1px);
-  position: absolute;
-  border-left: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-bottom-left-radius: 10px;
+.block-content .resize {
+  max-width: -webkit-fill-available;
 }
 
-.blocks-container > .ls-block > div > div.items-center::before,
-.blocks-container > .ls-block:focus-within > div > div.items-center::after,
-.blocks-container > .block-children:focus-within > .ls-block::before, .blocks-container > #lazy-blocks > .ls-block > div > div.items-center::before,
-.blocks-container > #lazy-blocks > .ls-block:focus-within > div > div.items-center::after,
-.blocks-container > #lazy-blocks > .block-children:focus-within > .ls-block::before {
-  display: none;
+:root {
+  --ls-block-bullet-active-color: var(--ls-link-text-color);
+  --ls-block-bullet-threading-width: 1px;
 }
 
-.ls-block:focus-within > div > div.items-center::before {
-  border-color: var(--ct-bullet-active-color);
+.block-control {
+  z-index: 1;
 }
 
-.ls-block > div > div.items-center::after {
-  content: "";
-  height: calc(100% - 10px);
-  top: -50%;
-  left: -2px;
-  position: absolute;
-  border-left: 2px solid transparent;
+.block-children {
+  border-left-width: var(--ls-block-bullet-threading-width);
 }
 
-.ls-block:focus-within > div > div.items-center::after {
-  border-color: var(--ct-bullet-active-color);
+.block-content-wrapper {
+  position: relative;
+}
+
+.bullet-container {
+  height: 14px !important;
+  width: 14px !important;
+  transform: translateX(-1.5px);
 }
 
-.block-children > .ls-block::before {
+/* Block bullet path should only show in a nested block */
+.ls-block .bullet {
+  background-color: var(--ls-block-bullet-active-color);
+}
+.ls-block div.items-center {
+  position: relative;
+  height: 26px !important;
+}
+.ls-block:not(:focus-within) .bullet {
+  background-color: var(--ls-block-bullet-color);
+  transform: scale(1);
+}
+.ls-block .ls-block > div > div.items-center::before {
+  pointer-events: none;
   content: "";
-  top: -10px;
+  left: 0;
+  right: 6px;
+  top: -1px;
+  bottom: -1px;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1), calc(-50% + var(--ls-block-bullet-threading-width) * 0.5));
+  /* shift left 1px for border */
+  position: absolute;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
+  border-bottom-left-radius: 10px;
+}
+.ls-block .ls-block:focus-within > div > div.items-center::before {
+  border-color: var(--ls-block-bullet-active-color);
+}
+.ls-block .block-children > .ls-block::before {
+  pointer-events: none;
+  content: "";
+  top: -1rem;
   bottom: 0;
-  border-left: 2px solid transparent;
-  left: -2px;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+  left: 0;
+  transform: translate(calc(var(--ls-block-bullet-threading-width) * -1));
   position: absolute;
 }
-
-.block-children:focus-within > .ls-block:not(:focus-within)::before {
-  border-color: var(--ct-bullet-active-color);
+.ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before {
+  border-color: var(--ls-block-bullet-active-color);
 }
-
-.block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
+.ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
   border-color: transparent;
 }
 
-.ls-block > div > .block-content-wrapper {
-  position: relative;
-}
-
-.ls-block > div > .block-content-wrapper::before {
+.ls-block[haschild=true] > div > .block-content-wrapper::before {
+  pointer-events: none;
   content: "";
   top: 12px;
   bottom: 0;
   left: -17px;
   position: absolute;
-  border-left: 2px solid transparent;
+  border-left: var(--ls-block-bullet-threading-width) solid transparent;
+}
+.ls-block[haschild=true] > .heading > .block-content-wrapper::before {
+  top: calc(50% + 2px);
 }
-
 .ls-block[haschild=true]:focus-within > div > .block-content-wrapper::before {
-  border-color: var(--ct-bullet-active-color);
+  border-color: var(--ls-block-bullet-active-color);
 }
 
 .doc-mode div.items-center::before,
@@ -562,19 +559,6 @@ div.items-center::after,
   display: none;
 }
 
-/* Block oversize issue */
-.block-content-wrapper {
-  max-width: var(--ct-block-max-width);
-}
-
-.block-content-wrapper > div.flex-1 {
-  width: 100%;
-}
-
-.block-content .resize {
-  max-width: -webkit-fill-available;
-}
-
 /* embed */
 .embed,
 .embed-page,

diff --git a/package.json b/package.json
@@ -9,13 +9,20 @@
         "name": "Dev theme",
         "url": "./custom.css",
         "description": "A custom theme for dev"
+      },
+      {
+        "name": "Dev theme - bullet threading only",
+        "url": "./bullet_threading.css",
+        "description": "Bullet threading (already included in Dev Theme)"
       }
     ],
     "id": "pengx17_dev_theme",
     "icon": "./logo.png"
   },
   "scripts": {
-    "build": "yarn sass src/main.scss custom.css --no-source-map"
+    "build:main": "yarn sass src/main.scss custom.css --no-source-map",
+    "build:bt": "yarn sass src/bullet_threading.scss bullet_threading.css --no-source-map",
+    "build": "yarn build:main && yarn build:bt"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^5.0.1",

diff --git a/readme.md b/readme.md
@@ -21,6 +21,19 @@ The easiest way to adopt this theme is to use jsDelivr CDN by adding the followi
 
 Alternatively, you can download this repo and load it as a Logseq Theme Plugin.
 
+### Only use bullet threading styles
+
+Since version `1.20.0`, you can opt in with the only the bullet threading css, which is `bullet_threading.css`.
+To change the color and width, set the following variables in `custom.css`:
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/bullet_threading.css");
+
+:root {
+  --ls-block-bullet-active-color: your-favorite-color;
+  --ls-block-bullet-threading-width: 2px;
+}
+```
 
 ## Demo (might be outdated)
 

diff --git a/release.config.js b/release.config.js
@@ -14,7 +14,13 @@ module.exports = {
     [
       "@semantic-release/git",
       {
-        assets: ["CHANGELOG.md", "package.json", "yarn.lock", "custom.css"],
+        assets: [
+          "CHANGELOG.md",
+          "package.json",
+          "yarn.lock",
+          "custom.css",
+          "bullet_threading.css",
+        ],
       },
     ],
   ],