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

每日闲聊
1

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

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

迁出原因：

Minimal 主题仓库的 cards.scss 似乎就是单独对应的源码，编译后的在 Minimal.css，其实并不需要扒。推荐转至以上链接获取代码。

9 个赞
2

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

image
image1162×1058 115 KB

2 个赞
5

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

7

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

1 个赞
8

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

20251203:

dv-cards.css 
body {
  --cards-min-width: 180px;
  --cards-max-width: 1fr;
  --cards-mobile-width: 120px;
  --cards-image-height: 400px;
  --cards-padding: 1.2em;
  --cards-image-fit: contain;
  --cards-background: transparent;
  --cards-border-width: 1px;
  --cards-aspect-ratio: auto;
  --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));
}
@media (max-width: 400pt) {body {--cards-min-width: var(--cards-mobile-width);}}

.cards {
  &.cards-align-bottom table.dataview > tbody > tr > td:last-child {margin-top: auto;}
  &.cards-cover {
    --cards-image-fit: cover;
    & table.dataview > tbody > tr > td:has(img:only-child) {background-color: transparent;}
  }

  &.cards-16-9 {--cards-aspect-ratio: 16/9;}
  &.cards-1-1 {--cards-aspect-ratio: 1/1;}
  &.cards-2-1 {--cards-aspect-ratio: 2/1;}
  &.cards-2-3 {--cards-aspect-ratio: 2/3;}
  &.cards-3-4 {--cards-aspect-ratio: 3/4;}

  &.cards-cols-1 {--cards-columns: repeat(1, minmax(0, 1fr)); --cards-cols: 1;}
  &.cards-cols-2 {--cards-columns: repeat(2, minmax(0, 1fr)); --cards-cols: 2;}
  @media (min-width: 400pt) {
    &.cards-cols-3 {--cards-columns: repeat(3, minmax(0, 1fr)); --cards-cols: 3;}
    &.cards-cols-4 {--cards-columns: repeat(4, minmax(0, 1fr)); --cards-cols: 4;}
    &.cards-cols-5 {--cards-columns: repeat(5, minmax(0, 1fr)); --cards-cols: 5;}
    &.cards-cols-6 {--cards-columns: repeat(6, minmax(0, 1fr)); --cards-cols: 6;}
    &.cards-cols-7 {--cards-columns: repeat(7, minmax(0, 1fr)); --cards-cols: 7;}
    &.cards-cols-8 {--cards-columns: repeat(8, minmax(0, 1fr)); --cards-cols: 8;}
  }
}
/*https://forum-zh.obsidian.md/t/topic/26525/1*/

.cards table.dataview {
  --table-width: 100%;
  --table-edge-cell-padding-first: calc(var(--cards-padding)/2);
  --table-edge-cell-padding-last: calc(var(--cards-padding)/2);
  --table-cell-padding: calc(var(--cards-padding)/3) calc(var(--cards-padding)/2);
  line-height: 1.3;
  & thead > tr {display: none;} /*Sorting menu*/
  & > tbody {
    clear: both;
    padding: 0.5rem 0;
    display: grid;
    grid-template-columns: var(--cards-columns);
    grid-column-gap: 0.75rem;
    grid-row-gap: 0.75rem;
    & > tr {
      background-color: var(--cards-background);
      border: var(--cards-border-width) solid var(--background-modifier-border);
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0 0 calc(var(--cards-padding)/3) 0;
      border-radius: 6px;
      overflow: hidden;
      transition: box-shadow 0.15s linear;
      max-width: var(--cards-max-width);
      height: auto;
      &:hover {
        border: var(--cards-border-width) solid var(--background-modifier-border-hover);
        box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.05), 0 1px 3px 1px rgba(0, 0, 0, 0.025);
        transition: box-shadow 0.15s linear;
      }
      & > td:first-child {
        font-weight: var(--bold-weight);
        border: none;
      }
      & > td:last-child {border: none; padding: var(--table-cell-padding);}
      & > td:not(:first-child) {
        font-size: calc(var(--table-text-size) * .9);
        color: var(--text-muted);
      }
      @media (max-width: 400pt) {
        & > td:not(:first-child) {font-size: 80%;}
      }
      & > td:not(:last-child):not(:first-child) {
        padding: 4px 0;
        border-bottom: 1px solid var(--background-modifier-border);
        width: calc(100% - var(--cards-padding));
        margin: 0 calc(var(--cards-padding)/2);
      }
      & > td > * {padding: calc(var(--cards-padding)/3) 0;}
      & > td a {text-decoration: none;}
      & > td:first-child a {display: block;}
      & > td > button {width: 100%; margin: calc(var(--cards-padding)/2) 0;}
      & > td:last-child > button {margin-bottom: calc(var(--cards-padding)/6);}
      & > td > ul {
        width: 100%;
        padding: 0.25em 0 !important;
        margin: 0 auto !important;
      }
    }
  }
}

/*cards-masonry*/
.cards.cards-masonry table.dataview > tbody {
  display: block;
  columns: var(--cards-cols); /*列数*/
  column-gap: 0.75rem; /*列间距*/
  & > tr {
    break-inside: avoid; /*避免元素被分割*/
    margin-bottom: 0.75rem; /*行间距*/
  }
  /*联用*/
  &.cards-cover table.dataview > tbody > tr {
    --table-white-space: normal; cursor: pointer;
  }
}

.table-raw table.dataview {--table-white-space: normal;}
.cards:not(.table-raw) table.dataview tbody > tr {
  /*全宽图片*/
  & > td:has(img) {
    padding: 0 !important;
    background-color: var(--background-secondary);
    display: block;
    margin: 0;
    width: 100%;
  }
  & > td img {
    aspect-ratio: var(--cards-aspect-ratio);
    width: 100%;
    object-fit: var(--cards-image-fit);
    max-height: var(--cards-image-height);
    background-color: var(--background-secondary);
    vertical-align: bottom;
  }
}

/*cards-book*/
.cards.cards-book {
  & table.dataview > tbody > tr {
    max-width: 160px; /*宽度*/
    & > td:first-child {
      position: relative;
      box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
    }
    & > td:first-child::after {
      content: '';
      position: absolute;
      top: 0; right: 0;
      bottom: 0; left: 0;
      background-image: linear-gradient(90deg, hsla(0, 0%, 63.1%, .25), rgba(21, 21, 20, .1) 1%, hsla(0, 0%, 100%, .15) 4%, hsla(0, 0%, 58%, .1) 8%, hsla(0, 0%, 89%, 0) 57%, rgba(223, 218, 218, .03) 91%, rgba(223, 218, 218, .05) 98%, hsla(0, 0%, 100%, .1));
      box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .1);
      pointer-events: none; /*点击穿透*/
    }
    /*cards-book progress*/
    & > td:not(:first-child) {
      white-space: nowrap;
      overflow: hidden; /*长度超出省略*/
      text-align: center; /*文字居中*/
      font-size: var(--font-ui-smaller); /*文字大小*/
    }
    & > td:first-child img {border-radius: 0; /*削除图片圆角*/}
    & > 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*/
    }
    & > td:has(> span > progress) * {width: 100%;}
  }
  & progress {
    vertical-align: top; /*进度条垂直置顶*/
    height: var(--size-4-1); /*进度条高度*/
  }
  & progress.color::-webkit-progress-bar {border-radius: 0 0 var(--radius-s) var(--radius-s); /*进度条圆角*/}
}

/* #region 多彩进度条 */
.theme-light progress.color[value]::-webkit-progress-value {background: #b547499b;}
.theme-light progress.color[value^='1']:not([value='1'], [value='100'])::-webkit-progress-value {background: #C70039;}
.theme-light progress.color[value^='2']:not([value='2'])::-webkit-progress-value {background: #FF5733;}
.theme-light progress.color[value^='3']:not([value='3'])::-webkit-progress-value {background: #FF5733;}
.theme-light progress.color[value^='4']:not([value='4'])::-webkit-progress-value {background: #FFB300;}
.theme-light progress.color[value^='5']:not([value='5'])::-webkit-progress-value {background: #FFB300;}
.theme-light progress.color[value^='6']:not([value='6'])::-webkit-progress-value {background: #29B6F6;}
.theme-light progress.color[value^='7']:not([value='7'])::-webkit-progress-value {background: #29B6F6;}
.theme-light progress.color[value^='8']:not([value='8'])::-webkit-progress-value {background: #8BC34A;}
.theme-light progress.color[value^='9']:not([value='9'])::-webkit-progress-value {background: #598b1e;}
.theme-light progress.color[value='100']::-webkit-progress-value {background: linear-gradient(45deg, #69cce095, #0dea0ab0);}

.theme-dark progress.color[value]::-webkit-progress-value {background: #b547495c;}
.theme-dark progress.color[value^='1']:not([value='1'], [value='100'])::-webkit-progress-value {background: hsl(4, 66%, 30%);}
.theme-dark progress.color[value^='2']:not([value='2'])::-webkit-progress-value {background: hsl(4, 66%, 30%);}
.theme-dark progress.color[value^='3']:not([value='3'])::-webkit-progress-value {background: hsl(18, 69%, 50%);}
.theme-dark progress.color[value^='4']:not([value='4'])::-webkit-progress-value {background: hsl(18, 69%, 50%);}
.theme-dark progress.color[value^='5']:not([value='5'])::-webkit-progress-value {background: hsl(43, 100%, 42%);}
.theme-dark progress.color[value^='6']:not([value='6'])::-webkit-progress-value {background: hsl(43, 100%, 42%);}
.theme-dark progress.color[value^='7']:not([value='7'])::-webkit-progress-value {background: hsl(165, 63%, 29%);}
.theme-dark progress.color[value^='8']:not([value='8'])::-webkit-progress-value {background: hsl(205, 95%, 25%);}
.theme-dark progress.color[value^='9']:not([value='9'])::-webkit-progress-value {background: hsl(266, 70%, 30%);}
.theme-dark progress.color[value='100']::-webkit-progress-value {background: linear-gradient(45deg, #ef92af95, #7bd7e995, #ffda2b95);}
/* #endregion */
9

dataviewJS也可以

11

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

12

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

image
image345×785 44.3 KB

我需要怎么办

13

这是我的frontmatter属性

cssclasses:

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

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

15

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

屏幕截图 2024-01-21 015454
屏幕截图 2024-01-21 015454723×436 108 KB