Merge pull request #677 from xhuajin/ob-css-docs

Ob css docs

10-Obsidian/Obsidian使用技巧/Huajin/如何给浅色模式和深色模式写不同的 css 样式.md

@@ -0,0 +1,45 @@
+---
+uid: 20240223201104
+title: 如何给浅色模式和深色模式写不同的 css 样式
+tags: [obsidian, css]
+description: 
+author: Huajin
+type: other
+draft: false
+editable: false
+modified: 
+---
+
+# 如何给浅色模式和深色模式写不同的 css 样式
+
+在 obsidian 中，我们可以写 css 文件为页面中的元素定制各种样式，那么如何分别给深色模式和浅色模式中设置不同的样式呢
+
+<kbd>ctrl shift i</kbd> 打开开发者模式，在元素的最上方 body 中可以看到有一个类 `.theme-light` 或者 `.theme-dark`。当 obsidian 处于浅色模式下，body 存在前者，处于深色模式下时存在后者。我们可以借助这个区别来编写 css 分别给深色模式和浅色模式中设置不同的样式。
+
+举个例子，写两个选择器分别选中深色和浅色模式，然后给他们添加同一个变量但是给不同的变量值。然后再选择器中使用这个变量，这样，当当前 body 处于浅色模式时，存在 `.theme-light` 类，变量值为 `#2222222`，深色模式同理。
+
+```css
+body.theme-dark {
+	a-color-variable: #FFFFFF;
+}
+
+body.theme-light {
+	a-color-variable: #222222;
+}
+
+(选择器) {
+	background-color: var(--a-color-variable);
+}
+```
+
+当然，我们也可以直接写成：
+
+```css
+body.theme-dark ... {
+	background-color: #FFFFFF;
+}
+
+body.theme-light ... {
+	background-color: #222222;
+}
+```

10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-固定标签页样式美化.md

@@ -0,0 +1,80 @@
+---
+uid: 20240223182902
+title: Obsidian 样式 - 固定标签页样式美化
+tags: [obsidian, css, pin, 标签页]
+description: 
+author: Huajin
+type: other
+draft: false
+editable: false
+modified: 20240223185802
+---
+
+# Obsidian 样式 - 固定标签页样式美化
+
+右键标签栏的文件名，可以看到有个『Pin』的选项，选择后可以把页面定在标签栏中，通常我们会固定非常常用的页面，例如你的主页等。但是如果固定在那里，很长一条不那么美观，因此写了段 css 用于隐藏该标签页的文字和『Pin』的符号。
+
+## 效果
+
+使用前：
+
+![image.png](https://cdn.pkmer.cn/images/20240223193053.png!pkmer)
+
+使用后
+
+![image.png](https://cdn.pkmer.cn/images/20240223192958.png!pkmer)
+
+## 源码
+
+css 代码使用方法见 [[Obsidian的CSS代码片段]]
+
+**使用方法**：
+
+如果 pin 的是**特定页面**，可以用这段 css，然后把 ... 改为你 pin 的页面对应的 data-type 和 aria-label
+
+```css
+.workspace-tab-header-container-inner .workspace-tab-header[data-type='...'][aria-label="..."] .workspace-tab-header-inner-title, 
+.workspace-tab-header-container-inner .workspace-tab-header[data-type='...'][aria-label="..."] .workspace-tab-header-status-container {
+  display: none;
+}
+
+.workspace-tab-header-container-inner .workspace-tab-header[data-type='...'][aria-label="..."] {
+  margin-left: 0 !important;
+  width: 34px !important;
+  padding: 0 0 2px;
+  max-width: 34px;
+}
+```
+
+这段 css 会同时把标题和 pin 的图标都隐藏了，适用于你 pin 的内容本身有 icon，例如 kanban 和 surfing 打开的页面会有个图标。
+
+- 如果你 pin 的页面是无图标的页面，可以去掉第一行的 `.workspace-tab-header-container-inner .workspace-tab-header[data-type='...'][aria-label="..."] .workspace-tab-header-inner-title,` （包括逗号），这样就可以显示部分文本。
+- 也可以去掉第一行逗号往后的 `, .workspace-tab-header-container-inner .workspace-tab-header[data-type='...'][aria-label="..."] .workspace-tab-header-status-container` 这样就可以显示 pin 的图标了。
+
+那么如何查询 pin 的页面的 data-type 和 aria-label 呢？
+
+- 快捷键 <kbd>ctrl+shift+i</kbd> 打开开发者模式
+- 点击弹出也页面左上角的有个箭头的按钮（鼠标悬浮在该按钮上时显示快捷键 <kbd>ctrl+shift+c</kbd>
+- 点击后鼠标移动到你 pin 的标签页上，单击一下
+- 在显示的一大堆代码中，当前高亮的那一行或者他的父级中可以找到
+
+![image.png](https://cdn.pkmer.cn/images/20240223194510.png!pkmer)
+
+如果想要一次性修改所有你 pin 的 markdown 页面的样式，可以用这个
+
+```css
+.workspace-tab-header-container-inner .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-title {
+  display: none;
+}
+
+.workspace-tab-header-inner:has(.mod-pinned) {
+  padding-left: 3px;
+}
+
+.workspace-tab-header-container-inner .workspace-tab-header:has(.mod-pinned) {
+  margin-left: 0 !important;
+  width: 34px !important;
+  padding: 0 0 2px;
+  max-width: 34px;
+}
+```

10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-标签页标题栏的隐藏.md

@@ -7,7 +7,7 @@ author: Huajin
 type: other
 draft: false
 editable: false
-modified: 2024021310143184855
+modified: 20240203101431
 ---
 
 # Obsidian 样式 - 标签页标题栏的隐藏

10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-状态栏美化.md

@@ -0,0 +1,35 @@
+---
+uid: 20240223202321
+title: Obsidian 样式 - 状态栏美化
+tags: [obsidian, css, state-bar, 状态栏]
+description: 
+author: Huajin
+type: other
+draft: false
+editable: false
+modified: 20240223203021
+---
+
+# Obsidian 样式 - 状态栏美化
+
+- 给状态栏增加透明度，使得平常不显眼。
+- 鼠标悬浮 (hover) 时透明度恢复
+- 去除边框，hover 恢复
+
+```css
+.status-bar {
+  /* background-color: var(--background-primary); */
+  border-width: 0;
+  opacity: .5;
+  transition: all .2s linear;
+}
+
+.status-bar:hover {
+  opacity: 1;
+  border-width: var(--status-bar-border-width);
+}
+```
+
+如果浅浅的背景色也不需要，可以把上面的注释的 `/* background-color: var(--background-primary); */` 给取消注释（去掉开头结尾的 `/* */` 即可）
+
+如何使用 css 请见 [[Obsidian的CSS代码片段]]

10-Obsidian/Obsidian外观/CSS 片段/Obsidian样式-隐藏 markdown 标记（加粗、斜体、下划线）.md

@@ -0,0 +1,42 @@
+---
+uid: 20240223203608
+title: Obsidian 样式 - 隐藏 markdown 标记（加粗、斜体、下划线）
+tags: [obsidian, css]
+description: 隐藏 markdown 标记（加粗、斜体、下划线），以防止编写时的文本跳动
+author: Huajin
+type: other
+draft: false
+editable: false
+modified: 20240223204444
+---
+
+# Obsidian 样式 - 隐藏 markdown 标记（加粗、斜体、下划线）
+
+在码字时，给文本添加加粗或者斜体等 markdown 格式的时候，文本总会跳动一下。因此写了一段 css 用于隐藏 markdown 标记来去抖（隐藏标记）。
+
+需要借助 style-setting 插件给该 css 添加快捷键，方便需要修改标记时关闭该 css。（因此需要安装 style setting 插件：[[obsidian-style-settings]]，这个插件可以为你的主题增加很多样式修改功能）
+
+```css
+/* @settings
+
+name: 隐藏 markdown 标记（这里你可以自己取名）
+id: a-unique-id
+settings:
+  - 
+    id: hide-markdown-marker
+    title: Hide markdown marker
+    title.zh: 隐藏 markdown 标记
+    description: Hide bold, italic, strikethrough, etc. markdown markers
+    description.zh: 隐藏加粗、斜体、删除线等 markdown 标记
+    type: class-toggle
+    default: false
+    addCommand: true
+*/
+.hide-markdown-marker .cm-line span:is(.cm-formatting, .cm-tag) {
+  display: none;
+}
+```
+
+添加好 css 后（如何添加 css 请见 [[Obsidian的CSS代码片段]]），在『设置 => 快捷键』中搜索 style-setting，找到 Style Settings: Toggle Hide markdown marker，设置一个快捷键即可。
+
+这样，在你码字的时候就可以尽情使用快捷键（`ctrl b, ctrl i`）添加各种格式，同时文字不会抖动。需要修改格式时可以用你设置的快捷键关闭隐藏修改。

10-Obsidian/Obsidian外观/Obsidian的CSS代码片段.md

@@ -70,6 +70,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
 - [[Obsidian样式-完成任务时如何取消任务文本的删除线]]
 - [[Obsidian样式-借助CSS打造独立的大屏表格页面]]
 - [[Obsidian样式-使用CSS为白板增加可选的标记功能]]
+- [[Obsidian样式-隐藏 markdown 标记（加粗、斜体、下划线）]]
 
 ### 列表&段落
 
@@ -102,6 +103,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
 ### 状态栏
 
 - [[Obsidian样式-悬浮状态栏]]
+- [[Obsidian样式-状态栏美化]]
 
 ### 搜索框
 
@@ -154,6 +156,7 @@ Obsidian 还支持一种外部样式代码引用的方式。
 ### 标签页
 
 - [[Obsidian样式-标签页Tab样式]]
+- [[Obsidian样式-固定标签页样式美化]]
 
 ### 标签页标题栏
 

10-Obsidian/Obsidian社区插件/Readme/show-whitespace-cm6_readme.md

@@ -37,7 +37,7 @@ CSS样式和CM6扩展，用于在源代码和实时预览模式下突出显示
 
 下面是 [[show-whitespace-cm6]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 黑曜石：显示空白字符
 [![GitHub tag (Latest by date)](https://img.shields.io/github/v/tag/ebullient/obsidian-show-whitespace-cm6)](https://github.com/ebullient/obsidian-show-whitespace-cm6/releases) ![GitHub all releases](https://img.shields.io/github/downloads/ebullient/obsidian-show-whitespace-cm6/total?color=success) [![CC BY-SA 4.0][cc-by-sa-shield]][cc-by-sa]
 

10-Obsidian/Obsidian社区插件/Readme/single-file-daily-notes_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[single-file-daily-notes]] 插件的自述翻译
 
-
+
 # 单文件每日笔记
 
 一个用于在单个文件中创建和管理每日笔记的 [Obsidian](https://obsidian.md) 插件。

10-Obsidian/Obsidian社区插件/Readme/slash-commander_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[slash-commander]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 黑曜石斜杠指挥官
 
 ![Obsidian社区插件](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json&query=%24%5B%22slash-commander%22%5D.downloads&logo=obsidian&label=downloads) [![GitHub all releases](https://img.shields.io/github/downloads/alephpiece/obsidian-slash-commander/total?logo=GitHub)](https://github.com/alephpiece/obsidian-slash-commander/releases) ![GitHub Repo stars](https://custom-icon-badges.demolab.com/github/stars/alephpiece/obsidian-slash-commander?logo=star)

10-Obsidian/Obsidian社区插件/Readme/smart-second-brain_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[smart-second-brain]] 插件的自述翻译
 
-
+
 <div align="center">
 
 <img alt="章鱼" src="https://github.com/nicobrauchtgit/obsidian-Smart2Brain/assets/48623649/03cadd13-b3e5-4eae-bbec-13eff9a78f22" height="500px">

10-Obsidian/Obsidian社区插件/Readme/smart-title_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[smart-title]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 智能标题
 
 这个插件可以自动从标题中提取标签和别名。

10-Obsidian/Obsidian社区插件/Readme/snsvrno-tags_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[snsvrno-tags]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 标签格式化器
 
 一个可配置的黑曜石插件，可以改变标签在预览模式下的显示方式。

10-Obsidian/Obsidian社区插件/Readme/soundscapes_readme.md

@@ -37,7 +37,7 @@ Adds a music/ambiance (E.g. lofi, white noise) player to the status bar to help
 
 下面是 [[soundscapes]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 黑曜石音景
 
 一个为Obsidian.MD设计的插件，可以在状态栏中添加一个音乐/氛围播放器，播放Lofi节拍、自然声音、氛围音乐、放松音乐等。

10-Obsidian/Obsidian社区插件/Readme/statusbar-organizer_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[statusbar-organizer]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 黑曜石状态栏组织者
 ## 摘要
 此插件使您可以轻松重新排列状态栏元素，以及选择要隐藏或显示的元素。

10-Obsidian/Obsidian社区插件/Readme/storyclock_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[storyclock]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # Storyclock插件适用于Obsidian
 这是Obsidian（https://obsidian.md）的一个插件。
 

10-Obsidian/Obsidian社区插件/Readme/subdivider_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[subdivider]] 插件的自述翻译
 
-
+
 # 子分隔器
 
 Subdivider是Obsidian的一个高效插件，简化了笔记组织。它将您的笔记转换为嵌套文件夹，自动为每个子标题创建单独的文件。

10-Obsidian/Obsidian社区插件/Readme/syncread_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[syncread]] 插件的自述翻译
 
-
+
 # syncread-assistant
 
 这是一个用于将 syncread 应用程序中的文章同步到 obsidian 的插件。

10-Obsidian/Obsidian社区插件/Readme/tag-buddy_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[tag-buddy]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 黑曜石标签助手 🔖
 在阅读模式下添加、编辑和删除标签。在阅读和编辑模式下复制、移动或编辑已标记的块。
 ### ✏️  使用1：在阅读模式下为笔记添加标签

10-Obsidian/Obsidian社区插件/Readme/task-list_readme.md

@@ -37,7 +37,7 @@ Enable better task management via lists.
 
 下面是 [[task-list]] 插件的自述翻译
 
-
+
 # 任务列表
 
 一个简单的黑曜石插件，通过列表实现更好的任务管理。

10-Obsidian/Obsidian社区插件/Readme/task-status_readme.md

@@ -37,7 +37,7 @@ Quickly change checkbox and task status markers.
 
 下面是 [[task-status]] 插件的自述翻译
 
-【机翻】
+【机翻】
 # 黑曜石任务状态
 
 在您的黑曜石笔记中快速更改任何任务状态。可搜索的模态框在您需要更改复选框标记时提供更动态和不加区别的工作流程。

10-Obsidian/Obsidian社区插件/Readme/templated-daily-notes_readme.md

@@ -37,7 +37,7 @@ modified: 20230101000000
 
 下面是 [[templated-daily-notes]] 插件的自述翻译
 
-【机翻】
+【机翻】
 ### 模板化的每日笔记
 
 根据描述的设置，添加了根据指定模板创建笔记的功能。