obsidian外观
Obsidian 样式 -Vicious 主题的 callout
插件ID:obsidian%E6%A0%B7%E5%BC%8F-vicious%E4%B8%BB%E9%A2%98%E7%9A%84callout
obsidian%E6%A0%B7%E5%BC%8F-vicious%E4%B8%BB%E9%A2%98%E7%9A%84callout
obsidian%E6%A0%B7%E5%BC%8F vicious%E4%B8%BB%E9%A2%98%E7%9A%84callout:来自于Vicious主题的callout样式
Obsidian 样式 -Vicious 主题的 callout
css 片段来自 Vicious 主题
效果展示
下面是配合 list-cards 分栏的一个效果
css 代码
.theme-dark,
.theme-light {
--callout-title-padding: 4px 12px;
--callout-padding: 0;
--callout-radius: var(--radius-m);
}
/*================================================*/
/* Root Colors
/*================================================*/
:root {
--800: #000000e0;
--800-RGB: 8, 9, 14;
--700: #17181e;
--700-RGB: 23, 24, 30;
--600: #292a2f;
--600-RGB: 41, 42, 47;
--500: #4f5053;
--500-RGB: 79, 80, 83;
--400: #68696c;
--400-RGB: 104, 105, 108;
--300: #818184;
--300-RGB: 129, 129, 132;
--200: #e1e2e9;
--200-RGB: 225, 226, 233;
--100: #f1f2f5;
--100-RGB: 241, 242, 245;
--000: #fbfcfc;
--000-RGB: 251, 252, 252;
--C001: #f18196;
--C001-RGB: 241, 129, 150;
--C002: #f19a81;
--C002-RGB: 249, 95, 42;
--C003: #ebcb8b;
--C003-RGB: 241, 201, 129;
--C004: #e3eb8b;
--C004-RGB: 198, 212, 49;
--C005: #bcf181;
--C005-RGB: 118, 234, 34;
--C006: #8df181;
--C006-RGB: 141, 241, 129;
--C007: #81f1a4;
--C007-RGB: 129, 241, 164;
--C008: #8be3eb;
--C008-RGB: 139, 227, 235;
--C009: #ab8beb;
--C009-RGB: 171, 139, 235;
--C010: #ee81f1;
--C010-RGB: 238, 129, 241;
--C011: #f181c5;
--C011-RGB: 241, 129, 197;
}
/*================================================*/
/* Light Theme
/*================================================*/
.theme-light {
--callout-content-background: var(--000) !important;
--callout-default: var(--800-RGB);
--callout-error: var(--C001-RGB);
--callout-warning: var(--C001-RGB);
--callout-help: var(--C002-RGB);
--callout-faq: var(--C002-RGB);
--callout-question: var(--C002-RGB);
--callout-tip: 219, 168, 64 /* var(--C003-RGB)*/;
--callout-hint: var(--C003-RGB);
--callout-bug: var(--C003-RGB);
--callout-abstract: var(--C004-RGB);
--callout-summary: var(--C004-RGB);
--callout-tldr: var(--C004-RGB);
--callout-info: var(--C005-RGB);
--callout-important: 129, 220, 99/* var(--C006-RGB)*/;
--callout-title-text: #fff;
}
/*================================================*/
/* Dark Theme
/*================================================*/
.theme-dark {
--callout-content-background: var(--800) !important;
--callout-default: var(--000-RGB);
--callout-error: var(--C001-RGB);
--callout-warning: var(--C001-RGB);
--callout-help: var(--C002-RGB);
--callout-faq: var(--C002-RGB);
--callout-question: var(--C002-RGB);
--callout-tip: var(--C003-RGB);
--callout-hint: var(--C003-RGB);
--callout-bug: var(--C003-RGB);
--callout-abstract: var(--C004-RGB);
--callout-summary: var(--C004-RGB);
--callout-tldr: var(--C004-RGB);
--callout-info: var(--C005-RGB);
--callout-important: var(--C006-RGB);
--callout-success: var(--C007-RGB);
--callout-todo: var(--C008-RGB);
--callout-quote: var(--C008-RGB);
--callout-example: var(--C009-RGB);
--callout-fail: var(--C011-RGB);
--callout-title-text: #000;
}
/*================================================*/
/* Distinctive Callouts
/*================================================*/
.callout {
background-color: rgba(var(--callout-color), 1);
}
.callout-icon .svg-icon,
.callout-title-inner {
color: var(--callout-title-text);
}
.callout-content > p:last-child,
.callout-content > ul:last-child,
.callout-content > ol:last-child {
margin-bottom: 0px;
}
.callout-content > p:first-child,
.callout-content > ul:first-child,
.callout-content > ol:first-child {
margin-top: 0px;
}
.callout-content {
border-top: 1px solid rgba(var(--callout-color), 0.64);
padding: 8px 16px !important;
}
.callout {
border: 1px solid rgb(var(--callout-color), 0.64);
}
.callout[data-callout="help"],
.callout[data-callout="faq"],
.callout[data-callout="question"] {
border: 1px solid rgb(var(--callout-question), 0.64);
}
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="bug"] {
border: 1px solid rgb(var(--callout-bug), 0.64);
}
.callout[data-callout="error"],
.callout[data-callout="danger"],
.callout[data-callout="attention"],
.callout[data-callout="caution"],
.callout[data-callout="warning"] {
border: 1px solid rgb(var(--callout-error), 0.64);
}
.callout[data-callout="example"] {
border: 1px solid rgb(var(--callout-example), 0.64);
}
.callout[data-callout="failure"],
.callout[data-callout="missing"],
.callout[data-callout="fail"] {
border: 1px solid rgb(var(--callout-fail), 0.64);
}
.callout[data-callout="important"] {
border: 1px solid rgb(var(--callout-important), 0.64);
}
.callout[data-callout="info"] {
border: 1px solid rgb(var(--callout-info), 0.64);
}
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
border: 1px solid rgb(var(--callout-success), 0.64);
}
.callout[data-callout="abstract"],
.callout[data-callout="tldr"],
.callout[data-callout="summary"] {
border: 1px solid rgb(var(--callout-summary), 0.64);
}
.callout[data-callout="todo"],
.callout[data-callout="cite"],
.callout[data-callout="quote"] {
border: 1px solid rgb(var(--callout-todo), 0.64);
}
/*================================================*/
/* Edit button on right corner */
.markdown-source-view.mod-cm6 .edit-block-button {
padding: var(--size-2-2) var(--size-2-3);
position: absolute;
top: var(--size-2-2);
right: var(--size-2-2);
display: flex;
opacity: 0;
color: var(--text-muted);
border-radius: var(--radius-s);
cursor: cell;
}
/* Arrow down/up */
.callout-title {
color: var(--text-muted);
}
讨论
若阁下有独到的见解或新颖的想法,诚邀您在文章下方留言,与大家共同探讨。
反馈交流
其他渠道
版权声明
版权声明:所有 PKMer 文章如果需要转载,请附上原文出处链接。