【CSS Snippet】路名牌
内有萌鼠-喜食五谷
就这么个“网红路牌”,这次真的只是个标题,别再填内容了(没写内容部分的样式)。文字不宜过长,主要是到手机上显示不下,这玩意儿还弄个多行显示不至于吧,就图一乐呗。基本上白色文字不超过黑色文字的宽度在一般手机上就不会溢出。对,黑色文字不是广告,是尺(笑
将如下代码保存到 .obsidian/snippets/RoadNameSign.css
文件中(自行创建文件),然后在 Obsidian 设置——外观——代码片段中开启。即可使用 road-name-sign
类型 callouts 创建这种堆叠卡片了。
/**
* 网红路牌
* @author: 稻米鼠
* @description: 用于显示网红路牌的 callout 视图
* @created: 2024-05-14
* @updated: 2024-05-14
* @version: 0.0.1
*/
.callout[data-callout="road-name-sign"] {
--callout-color: 0, 51, 255;
--callout-text-color: #ebeced;
--callout-icon: arrow-big-left;
background: transparent;
padding: 20px;
}
.callout[data-callout="road-name-sign"] > .callout-title {
position: relative;
background: rgb(var(--callout-color));
border-radius: .5rem;
border: 3px solid var(--callout-text-color);
box-shadow: 0 0 0 5px rgb(var(--callout-color));
margin: 0 auto 1.6rem;
padding: 0;
max-width: 720px;
}
.callout[data-callout="road-name-sign"] > .callout-title::before {
position: absolute;
content: "TO ZJI.ME FOR MORE CODE";
background: var(--callout-text-color);
color: #4e5154;
border-radius: calc(.5rem + 8px);
left: -8px;
text-align: center;
bottom: calc(-1.6rem - 8px);
width: calc(100% + 16px);
height: calc(100% + 1.6rem + 16px);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
z-index: -1;
box-sizing: border-box;
display: table-cell;
padding-top: calc(3.2rem + 16px);
vertical-align: bottom;
font-weight: 700;
}
.callout[data-callout="road-name-sign"] > .callout-title > .callout-title-inner {
color: var(--callout-text-color);
flex-grow: 1;
text-align: center;
font-size: 1.6rem;
line-height: 3.2rem;
position: relative;
}
.callout[data-callout="road-name-sign"] > .callout-title > .callout-title-inner::before {
position: absolute;
left:1rem;
content: "◄";
}
.callout[data-callout="road-name-sign"] > .callout-title > .callout-title-inner::after {
position: absolute;
right: 1rem;
content: "►";
}
.callout[data-callout="road-name-sign"] > .callout-title >.callout-icon,
.callout[data-callout="road-name-sign"] > .callout-title >.callout-fold {
display: none;
}
上面示例的 callout 代码如下,供参考:
> [!road-name-sign] 内有萌鼠-喜食五谷