[提升体验的css片段] 更方便地修改文件名

经验分享
1

想要通过点击标题栏的文字修改文件名，但是鼠标必须放在文字上才能编辑，而且光标很难选中末尾？

用这个片段即可解决

.view-header-title-parent:empty+.view-header-title {
  max-width: 70%;
  text-align: center;
  cursor: text;
}

.view-header-title-parent:not(:empty)+.view-header-title:after {
  content: "";
  width: 20%;
  inset-block: 0;
  position: absolute;
  cursor: text;
}

效果
show1
已添加至我的主题，市场搜索Maple即可，顺便求个:star:~

6 个赞
2

切换css片段的按键是什么插件

3

MySnippets

4

你的这段代码会改变文件路径的位置，路径和文件名称隔开，感觉不太美观。我自己写了一段，可以达到一样的效果，但不会改变外观

.workspace-leaf.mod-active .view-header-title:after {
	content: " ";
	width: 100%;
	height: 1em;
	position: absolute;
}
1 个赞
5

草率了，我完善了一下

6

大佬，打扰请问一下，想让表格宽度过长时带滚动条而不是挤压表格，CSS要怎么写呀！

7

table 添加属性 overflow-x: scroll;

8

谢谢大佬我再研究研究！我在使用minimal主题，我把您的主题css下载下来，把写的表格那一块的导入进去了，但是好像冲突比较大所以没显示出来，我也没在表格这一块搜到overflow这个关键字 :sob:。

9

刚刚看了一下，默认主题都有这个效果啊，不需要配置

10

如果你说的是单元格最大宽度的话

body {
  --table-column-max-width: 50px;
}
11

不是的大佬，默认主题和我安装的其它主题都没有这个滚动条，只有您的主题有，就是这个表格底部的滚动条。

image
image1456×66 922 Bytes

我想给单独弄出来CSS的，但是我从您的主题里扣出来的这一块CSS，弄进去和直接用主题渲染的效果不一致，没渲染出来 :sob:

:is(body, .print .markdown-rendered) {
  --table-radius: var(--radius-l);
  --table-outline-width: var(--block-outline-width);
}

.markdown-preview-view table {
  margin: 1rem 0;
}

:is(.markdown-rendered, .markdown-source-view.mod-cm6.is-live-preview) table {
  width: 100% !important;
  margin: 0;
  --table-column-first-border-width: var(--table-outline-width);
  --table-column-last-border-width: var(--table-outline-width);
  --table-row-last-border-width: var(--table-outline-width);
}

:is(.markdown-rendered, .markdown-source-view.mod-cm6.is-live-preview) table thead th {
  --table-white-space: nowrap;
  border-top-width: var(--block-outline-width);
}

.markdown-source-view.mod-cm6.is-live-preview .cm-embed-block.cm-table-widget:hover table :is(td, th):first-child,
.markdown-rendered table:hover :is(td, th):first-child {
  border-left-color: var(--accent-active);
}

.markdown-source-view.mod-cm6.is-live-preview .cm-embed-block.cm-table-widget:hover table :is(td, th):last-child,
.markdown-rendered table:hover :is(td, th):last-child {
  border-right-color: var(--accent-active);
}

.markdown-source-view.mod-cm6.is-live-preview .cm-embed-block.cm-table-widget:hover table thead th,
.markdown-rendered table:hover thead th {
  border-top-color: var(--accent-active);
}

.markdown-source-view.mod-cm6.is-live-preview .cm-embed-block.cm-table-widget:hover table tbody tr:last-child>td,
.markdown-rendered table:hover tbody tr:last-child>td {
  border-bottom-color: var(--accent-active);
}

:is(.markdown-rendered, .cm-embed-block) table {
  border-collapse: initial !important;
  border-spacing: 0;
  --table-border-color: var(--accent-inactive);
  --table-header-background: hsl(var(--background-secondary-hsl));
  --table-header-background-hover: var(--active-line);
  --table-header-border-color: var(--accent-inactive);
  --table-header-weight: var(--font-bold);
  --table-column-max-width: 70%;
}

:is(.markdown-rendered, .cm-embed-block) table tr:hover td {
  background-color: var(--active-line);
}

:is(.markdown-rendered, .cm-embed-block) table :is(th, td) {
  min-width: fit-content;
  transition: border-color var(--animation);
}

:is(.markdown-rendered, .cm-embed-block) table tr:first-child th:first-child {
  border-top-left-radius: var(--table-radius);
}

:is(.markdown-rendered, .cm-embed-block) table tr:first-child th:last-child {
  border-top-right-radius: var(--table-radius);
}

:is(.markdown-rendered, .cm-embed-block) table tr:last-child td:first-child {
  border-bottom-left-radius: var(--table-radius);
}

:is(.markdown-rendered, .cm-embed-block) table tr:last-child td:last-child {
  border-bottom-right-radius: var(--table-radius);
}

.markdown-source-view.mod-cm6 .cm-embed-block.cm-table-widget {
  border: none;
}

body:not(.table-colorful) .markdown-source-view.mod-cm6 .cm-embed-block.cm-table-widget .edit-block-button {
  top: calc(var(--block-outline-width) + 0.2rem);
  right: calc(var(--block-outline-width) + 0.2rem);
}

body.table-colorful .markdown-source-view table+.edit-block-button {
  color: var(--text-on-accent);
  --background-modifier-hover: hsl(var(--background-secondary-hsl));
}

body.table-colorful .markdown-source-view table+.edit-block-button:hover {
  color: var(--setting-table-header-bg, var(--accent-active));
}

body.table-colorful table {
  --table-header-color: var(--setting-table-header-text, var(--text-on-accent));
  --table-header-background: var(--setting-table-header-bg, var(--accent-active));
  --table-header-background-hover: var(--table-header-background);
}

body.table-colorful table tbody tr:nth-of-type(2n) {
  background-color: var(--setting-table-line-bg, var(--md-container-bg));
}

body.table-colorful table tbody tr:nth-of-type(2n+1) {
  background-color: var(--background-primary);
}

body.table-colorful table th {
  caret-color: var(--text-on-accent);
  border-block: var(--block-outline-width) solid var(--table-header-background) !important;
}

body.table-colorful table th:first-child {
  border-left-color: var(--table-header-background);
}

body.table-colorful table th:last-child {
  border-right-color: var(--table-header-background);
}
12

没显示出来有可能是其他的片段或插件的影响

你去沙箱里把这一段输进去试试，最新版是会显示出滚动条的

| terst                 | test                    | setest  | test               | asd  |
| --------------------- | ----------------------- | ------- | ------------------ | ---- |
| asdasdaaaaaaaaaaaaaaa | sdfaaaaaaaaaaaaaasdfsdf | sdfsdfd | aasdasdasdasdsdasd | asdaaaaaaaaaaaaaaaaaaaa |

另外我的表格效果是用.table-colorful来控制开关的，具体你可以看我的源码

13

谢谢大佬，我试了下沙箱是带滚动条的，应该是我的主题问题，谢谢！

14

说个题外话，大佬，能不能帮忙写个默认主题黑色模式下，修改文件列表字号的代码，谢谢了。

15

路径和文件名太长了， 路径显示不全有什么办法吗？
可以让路径自动滑动到最右边吗？

1 个赞