Obsidian Minimal主题的dataview Card卡片视图css

最新推荐文章于 2025-03-26 09:30:11 发布

新奥尔良乳猪

最新推荐文章于 2025-03-26 09:30:11 发布

阅读量1.4k

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/xh542428798/article/details/136309922

版权

这篇文章介绍了如何提取并适应Obsidian1.5.8的Minimal主题的dataviewCard卡片视图样式，通过提供CSS代码片段，使表格视图转换为美观的卡片布局，适用于文献阅读和整理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，Obsidian Minimal主题的dataview Card卡片视图非常美观。
在这里插入图片描述

因此我提取出来了css片段，并适配obsidian 1.5.8，我用来看文献：
在这里插入图片描述
有需要的可以自取，创建Minimal Theme cards1.5.8.css文件，将下面代码贴进去，然后把这个文件放到\.obsidian\snippets下，这样dataview插件的table视图，就会变成卡片视图：

/* MIT License | Copyright (c) Stephan Ango (@kepano) 
extract from minimal-theme
*/
:root {
   
  --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) {
   
  :root {
   
    --cards-min-width:var(--cards-mobile-width); } }
.cards.table-100 table.dataview tbody,
.table-100 .cards table.dataview tbody {
   
  padding: 0.25rem 0.75rem; }

.cards table.dataview 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; }
.cards table.dataview>tbody>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 .15s linear;
	max-width: var(--cards-max-width);
	height: auto
}
.cards table.dataview>tbody>tr:hover {
   
	border: var(--cards-border-width) solid var(--background-modifier-border-hover);
	box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .05), 0 1px 3px 1px rgba(0, 0, 0

最低0.47元/天解锁文章