feat: add custom css

qbosen · Oct 8, 2021 · 224964c · 224964c
1 parent 1050a65
commit 224964c
Show file tree

Hide file tree

Showing 12 changed files with 15,432 additions and 3,182 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/highlights.css b/highlights.css
@@ -0,0 +1,30 @@
+mark {
+  text-decoration-color: #ffc600;
+}
+mark .yellow {
+  text-decoration-color: #fff3a3;
+}
+mark .pink {
+  text-decoration-color: #f2b3cf;
+}
+mark .blue {
+  text-decoration-color: #b5d3ff;
+}
+mark .green {
+  text-decoration-color: #bbfabb;
+}
+mark .red {
+  text-decoration-color: #ff5582;
+}
+mark .grey {
+  text-decoration-color: #cacfd9;
+}
+mark .gray {
+  text-decoration-color: #cacfd9;
+}
+mark .orange {
+  text-decoration-color: #ffb86c;
+}
+mark .purple {
+  text-decoration-color: #d2b3ff;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,36 +1,38 @@
 {
-  "name": "logseq-dev-theme",
-  "author": "pengx17",
-  "version": "1.21.3",
-  "description": "A custom theme for dev",
-  "logseq": {
-    "themes": [
-      {
-        "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: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",
-    "@semantic-release/git": "^9.0.0",
-    "@semantic-release/npm": "^7.1.3",
-    "sass": "^1.35.1"
-  },
-  "dependencies": {
-    "@semantic-release/exec": "^6.0.1"
-  }
-}
+    "name": "logseq-dev-theme",
+    "author": "qbosen",
+    "version": "0.0.1",
+    "description": "A custom theme for dev",
+    "logseq": {
+        "themes": [{
+                "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": "qbosen_dev_theme",
+        "icon": "./logo.png"
+    },
+    "scripts": {
+        "build:main": "yarn sass src/main.scss custom.css --no-source-map",
+        "build:zt": "yarn sass src/zettelkasten.scss zettelkasten.css --no-source-map",
+        "build:hl": "yarn sass src/highlights.scss highlights.css --no-source-map",
+        "build:sb": "yarn sass src/sidebar.scss sidebar.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 && yarn build:zt && yarn build:hl && yarn build:sb"
+    },
+    "devDependencies": {
+        "@semantic-release/changelog": "^6.0.0",
+        "@semantic-release/git": "^10.0.0",
+        "@semantic-release/npm": "^8.0.0",
+        "sass": "^1.35.1"
+    },
+    "dependencies": {
+        "@semantic-release/exec": "^6.0.1"
+    }
+}
diff --git a/readme.md b/readme.md
@@ -14,7 +14,7 @@ The easiest way to adopt this theme is to use jsDelivr CDN by adding the followi
 
 ```css
 /* This must be the first line of the custom.css with other import rules */
-@import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/custom.css");
+@import url("https://cdn.jsdelivr.net/gh/qbosen/logseq-dev-theme@main/custom.css");
 
 /* You can also add other styles below to override the default theme values */
 ```
@@ -27,7 +27,7 @@ Since version `1.20.0`, you can opt in with the only the bullet threading css, w
 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");
+@import url("https://cdn.jsdelivr.net/gh/qbosen/logseq-dev-theme@main/bullet_threading.css");
 
 :root {
   --ls-block-bullet-active-color: your-favorite-color;

diff --git a/sidebar.css b/sidebar.css
@@ -0,0 +1,50 @@
+@charset "UTF-8";
+/* 多列侧边栏 */
+/* https://discord.com/channels/725182569297215569/752845138148982877/885123354359631942 */
+:root {
+  --masonry-startWidth: 450px;
+  /* DEFAULT: 550px; Use "unset" to prevent loading in grid like format */
+  --masonry-minWidth: 60px;
+  --masonry-maxWidth: 600px;
+  --masonry-startHeight: 434px;
+  /* DEFAULT: 243px; Use "unset" to prevent loading in grid like format */
+  --masonry-minHeight: 56px;
+}
+
+.cp__right-sidebar-inner.flex.flex-col.h-full {
+  overflow: auto;
+  background-color: #000;
+}
+
+.sidebar-item-list {
+  background-color: #0d0d0d;
+  height: 91vh !important;
+  overflow: unset;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  padding-bottom: 0;
+}
+
+.cp__right-sidebar .sidebar-item {
+  display: inline-block;
+  align-self: flex-start;
+  overflow-y: auto;
+  width: var(--masonry-startWidth);
+  min-width: var(--masonry-minWidth);
+  max-width: var(--masonry-maxWidth);
+  margin-right: 8px;
+}
+
+/* ==== tables wrap === */
+.table-auto {
+  table-layout: fixed;
+  width: 90%;
+}
+
+.table-auto td.whitespace-nowrap {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/src/highlights.scss b/src/highlights.scss
@@ -0,0 +1,30 @@
+mark {
+    text-decoration-color: #ffc600;
+    .yellow {
+        text-decoration-color: #fff3a3;
+    }
+    .pink {
+        text-decoration-color: #f2b3cf;
+    }
+    .blue {
+        text-decoration-color: #b5d3ff;
+    }
+    .green {
+        text-decoration-color: #bbfabb;
+    }
+    .red {
+        text-decoration-color: #ff5582;
+    }
+    .grey {
+        text-decoration-color: #cacfd9;
+    }
+    .gray {
+        text-decoration-color: #cacfd9;
+    }
+    .orange {
+        text-decoration-color: #ffb86c;
+    }
+    .purple {
+        text-decoration-color: #d2b3ff;
+    }
+}
diff --git a/src/main.scss b/src/main.scss
@@ -12,7 +12,6 @@
 @import "graph.scss";
 @import "theme_dark.scss";
 @import "theme_light.scss";
-
 :root {
-  --ls-block-bullet-threading-width: 2px;
-}
+    --ls-block-bullet-threading-width: 2px;
+}
diff --git a/src/sidebar.scss b/src/sidebar.scss
@@ -0,0 +1,54 @@
+/* 多列侧边栏 */
+
+
+/* https://discord.com/channels/725182569297215569/752845138148982877/885123354359631942 */
+
+:root {
+    --masonry-startWidth: 450px;
+    /* DEFAULT: 550px; Use "unset" to prevent loading in grid like format */
+    --masonry-minWidth: 60px;
+    --masonry-maxWidth: 600px;
+    --masonry-startHeight: 434px;
+    /* DEFAULT: 243px; Use "unset" to prevent loading in grid like format */
+    --masonry-minHeight: 56px;
+}
+
+.cp__right-sidebar-inner.flex.flex-col.h-full {
+    overflow: auto;
+    background-color: #000;
+}
+
+.sidebar-item-list {
+    background-color: #0d0d0d;
+    height: 91vh !important;
+    overflow: unset;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    padding-bottom: 0;
+}
+
+.cp__right-sidebar .sidebar-item {
+    display: inline-block;
+    align-self: flex-start;
+    overflow-y: auto;
+    width: var(--masonry-startWidth);
+    min-width: var(--masonry-minWidth);
+    max-width: var(--masonry-maxWidth);
+    margin-right: 8px;
+}
+
+
+/* ==== tables wrap === */
+
+.table-auto {
+    table-layout: fixed;
+    width: 90%;
+}
+
+.table-auto td.whitespace-nowrap {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
diff --git a/src/zettelkasten.scss b/src/zettelkasten.scss
@@ -0,0 +1,66 @@
+.zettel-box {
+    background: #FFFFFF;
+    background-size: 100%;
+    color: #000000;
+    padding: 2px 5px 2px 5px;
+    font-size: 13px;
+    line-height: 1em;
+    font-weight: 500;
+    border-radius: 5px 5px 5px 5px;
+    border-style: solid;
+    border-width: thin;
+    position: relative;
+    box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #DFDFDF;
+}
+
+a.tag[data-ref="fleeting notes"] {
+    @extend .zettel-box;
+    border-color: #f21da140;
+}
+
+a.tag[data-ref="literature notes"] {
+    @extend .zettel-box;
+    border-color: #215F0040;
+}
+
+a.tag[data-ref="permanent notes"] {
+    @extend .zettel-box;
+    background-image: linear-gradient(90deg, #1DA1F2, #1DA1F2);
+    border-radius: 3px 0 0 3px;
+}
+
+a.tag[data-ref="relevant notes"] {
+    @extend .zettel-box;
+    color: #1DA1F2;
+    border-color: #FFFFFF;
+}
+
+a.tag[data-ref="reference notes"] {
+    @extend .zettel-box;
+    border-color: #f26e1d40;
+}
+
+
+/* 自定义 */
+
+a.tag[data-ref="question"] {
+    @extend .zettel-box;
+    border-color: #FFB6C1 !important;
+    background: #FFB6C1 !important;
+    color: #000 !important;
+    &::before {
+        content: "❓ ";
+        display: inline-block;
+    }
+}
+
+a.tag[data-ref="answer"] {
+    @extend .zettel-box;
+    border-color: #90EE90 !important;
+    background: #90EE90 !important;
+    color: #000 !important;
+    &:before {
+        content: "🙋 ";
+        display: inline-block;
+    }
+}