[redirect] 更新了坛里 Minimal Dataview 伪卡片 CSS

PlayerMiller · 2023 年11 月 30 日 04:05

从我把minimal的伪卡片扒了，放到了Blue Topaz，可视化的感觉好舒服继续讨论：

我在默认主题下使用这个论坛老帖的 CSS 不起作用，于是去官网重新找了代码。

迁出原因：

Minimal 主题仓库的 cards.scss 似乎就是单独对应的源码（编译后的在 Minimal.css）。此外 PKMer 也有帖子介绍跟进 Obsidian 样式 - minimal 主题 Cards 卡片布局。为坛友更好的学习或使用体验，推荐转至以上链接获取代码。

Azona77 · 2023 年11 月 30 日 04:27

居然有大佬扒出来了，用了一段时间这个cards视图了，略作了修改，效果还可以

坏人死于话多 · 2023 年12 月 15 日 10:59

感谢楼主分享，已经做好卡片了

chenchufeng · 2024 年1 月 2 日 13:47

PlayerMiller:

/*cards-book progress*/
.cards.cards-book table.dataview tbody > tr > td:first-child img {border-radius: 0; /*削除图片圆角*/}
.cards.cards-book table.dataview tbody > tr > td:has(> span > progress) {
  width: 100% !important;
  padding-top: 0 !important;
  margin-inline: 0 !important;
  border-color: transparent !important;
  height: var(--size-2-3); /*进度条高度+2px*/
}
.cards.cards-book table.dataview tbody > tr > td:has(> span > progress) * {width: 100%;}
.cards.cards-book progress {
  vertical-align: top; /*进度条垂直置顶*/
  height: var(--size-4-1); /*进度条高度*/
}
.cards.cards-book progress.color::-webkit-progress-bar {border-radius: 0 0 var(--radius-s) var(--radius-s); /*进度条圆角*/}

/*多彩进度条*/
.theme-light progress.color {
  --color-l-progress-00: #b547499b;
  --color-l-progress-10: #C70039;
  --color-l-progress-20: #FF5733;
  --color-l-progress-30: #FF5733;
  --color-l-progress-40: #FFB300;
  --color-l-progress-50: #FFB300;
  --color-l-progress-60: #29B6F6;
  --color-l-progress-70: #29B6F6;
  --color-l-progress-80: #8BC34A;
  --color-l-progress-90: #598b1e;
  --color-l-progress-100: linear-gradient(45deg, #69cce095, #0dea0ab0);
}

.theme-light progress.color[value^="1"]::-webkit-progress-value {background: var(--color-l-progress-10);}
.theme-light progress.color[value^="2"]::-webkit-progress-value {background: var(--color-l-progress-20);}
.theme-light progress.color[value^="3"]::-webkit-progress-value {background: var(--color-l-progress-30);}
.theme-light progress.color[value^="4"]::-webkit-progress-value {background: var(--color-l-progress-40);}
.theme-light progress.color[value^="5"]::-webkit-progress-value {background: var(--color-l-progress-50);}
.theme-light progress.color[value^="6"]::-webkit-progress-value {background: var(--color-l-progress-60);}
.theme-light progress.color[value^="7"]::-webkit-progress-value {background: var(--color-l-progress-70);}
.theme-light progress.color[value^="8"]::-webkit-progress-value {background: var(--color-l-progress-80);}
.theme-light progress.color[value^="9"]::-webkit-progress-value {background: var(--color-l-progress-90);}
.theme-light progress.color[value^="100"]::-webkit-progress-value {background: var(--color-l-progress-100);}

.theme-light progress.color[value="1"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="2"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="3"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="4"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="5"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="6"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="7"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="8"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-light progress.color[value="9"]::-webkit-progress-value {background: var(--color-l-progress-00);}

.theme-dark progress.color {
  --color-l-progress-00: #b547495c;
  --color-d-progress-10: hsl(4, 66%, 30%);
  --color-d-progress-20: hsl(4, 66%, 30%);
  --color-d-progress-30: hsl(18, 69%, 50%);
  --color-d-progress-40: hsl(18, 69%, 50%);
  --color-d-progress-50: hsl(43, 100%, 42%);
  --color-d-progress-60: hsl(43, 100%, 42%);
  --color-d-progress-70: hsl(165, 63%, 29%);
  --color-d-progress-80: hsl(205, 95%, 25%);
  --color-d-progress-90: hsl(266, 70%, 30%);
  --color-d-progress-100: linear-gradient(45deg, #ef92af95, #7bd7e995, #ffda2b95);
}

.theme-dark progress.color[value^="1"]::-webkit-progress-value {background: var(--color-d-progress-10);}
.theme-dark progress.color[value^="2"]::-webkit-progress-value {background: var(--color-d-progress-20);}
.theme-dark progress.color[value^="3"]::-webkit-progress-value {background: var(--color-d-progress-30);}
.theme-dark progress.color[value^="4"]::-webkit-progress-value {background: var(--color-d-progress-40);}
.theme-dark progress.color[value^="5"]::-webkit-progress-value {background: var(--color-d-progress-50);}
.theme-dark progress.color[value^="6"]::-webkit-progress-value {background: var(--color-d-progress-60);}
.theme-dark progress.color[value^="7"]::-webkit-progress-value {background: var(--color-d-progress-70);}
.theme-dark progress.color[value^="8"]::-webkit-progress-value {background: var(--color-d-progress-80);}
.theme-dark progress.color[value^="9"]::-webkit-progress-value {background: var(--color-d-progress-90);}
.theme-dark progress.color[value="100"]::-webkit-progress-value {background: var(--color-d-progress-100);}

.theme-dark progress.color[value="1"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="2"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="3"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="4"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="5"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="6"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="7"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="8"]::-webkit-progress-value {background: var(--color-l-progress-00);}
.theme-dark progress.color[value="9"]::-webkit-progress-value {background: var(--color-l-progress-00);}

楼主太棒了，我可以在非minimal主题下使用卡片了，不过我还有个问题，请问如何利用利用dataview插件来调用进度条的功能呢

PlayerMiller · 2024 年1 月 2 日 13:50

Dataview 而不是 DataviewJS 吗？光用 Dataview 的 DQL 应该不行吧。或者你可以问问其他熟悉 Dataview 的人。

chenchufeng · 2024 年1 月 2 日 13:51

dataviewJS也可以

chenchufeng · 2024 年1 月 2 日 13:57

看不懂啊呜呜呜，我的文档中有progress属性，应该不用这么麻烦吧

chenchufeng · 2024 年1 月 4 日 03:27

请问我生成的卡片最后一栏为什么是居中的呢，

我需要怎么办

chenchufeng · 2024 年1 月 4 日 03:31

这是我的frontmatter属性

cssclasses:

cards
cards-cols-5
iframe-wide
cards-cover
cards-align-bottom

我使用的主题是typewriter，当我更换主题为minimal的时候，这个问题就消失了

PlayerMiller · 2024 年1 月 4 日 04:09

沙箱结果是什么。

buttonblue · 2024 年1 月 20 日 17:55

感谢大佬，卡片视图看起来特别舒服！但是我这里图片全部会居右，左边有一条空白，请问有办法解决吗？

PlayerMiller · 2024 年1 月 21 日 01:09

烦请看下你头上第一个帖子 #14 的内容。