Skip to content

Instantly share code, notes, and snippets.

@maxwellamaral
Created October 29, 2023 14:09
Show Gist options
  • Save maxwellamaral/bc474d9b5dd38a79f485cfd544af001d to your computer and use it in GitHub Desktop.
Save maxwellamaral/bc474d9b5dd38a79f485cfd544af001d to your computer and use it in GitHub Desktop.
Obsidian CSS callouts imported from Zotero (plugin ZotLit)
/* Settings for all callouts / admonitions: */
/* Attention --> Nota (amarelo) */
.callout[data-callout="attention"] {
/* same name as in callout to be changed */
--callout-color: 0, 0, 0;
/* rgb only */
--callout-icon: "lucide-sticky-note";
/* Use lucide- plus icon name from https://lucide.dev */
background-color: #fdff85;
color: black;
}
.callout[data-callout="attention"] a:link {
color: gray;
}
/* Abstract --> Definição (azul) */
.callout[data-callout="abstract"] {
/* same name as in callout to be changed */
--callout-color: 0, 0, 0;
/* rgb only */
--callout-icon: "lucide-sticky-note";
/* Use lucide- plus icon name from https://lucide.dev */
background-color: #9ad9db;
color: black;
}
.callout[data-callout="abstract"] a:link {
color: gray;
}
/* Tip --> Exemplo (verde) */
.callout[data-callout="tip"] {
/* same name as in callout to be changed */
--callout-color: 0, 0, 0;
/* rgb only */
/* --callout-icon: "lucide-sticky-note"; */
/* Use lucide- plus icon name from https://lucide.dev */
background-color: #7ec636;
color: black;
}
.callout[data-callout="tip"] a:link {
color: rgb(68, 2, 248);
}
/* Error --> Interessante (laranja) */
.callout[data-callout="error"] {
/* same name as in callout to be changed */
--callout-color: 0, 0, 0;
/* rgb only */
--callout-icon: "lucide-view";
/* Use lucide- plus icon name from https://lucide.dev */
background-color: #f59a23;
color: black;
}
.callout[data-callout="tip"] a:link {
color: rgb(0, 0, 0);
}
/* FAQ --> Questão (rosa) */
.callout[data-callout="faq"] {
/* same name as in callout to be changed */
--callout-color: 0, 0, 0;
/* rgb only */
--callout-icon: "lucide-help-circle";
/* Use lucide- plus icon name from https://lucide.dev */
background-color: #ff9797;
color: rgb(0, 0, 0);
}
.callout[data-callout="faq"] a:link {
color: rgb(0, 0, 0);
}
/* Example --> Referência cruzada (púrpura) */
.callout[data-callout="example"] {
/* same name as in callout to be changed */
--callout-color: 255, 255, 255;
/* rgb only */
--callout-icon: "lucide-sticky-note";
/* Use lucide- plus icon name from https://lucide.dev */
background-color: #82218b;
color: rgb(255, 255, 255);
}
.callout[data-callout="faq"] a:link {
color: rgb(0, 0, 255);
}
/* Cite --> Citação (cinza) */
.callout[data-callout="cite"] {
/* same name as in callout to be changed */
--callout-color: 0, 0, 0;
/* rgb only */
--callout-icon: "lucide-quote";
/* Use lucide- plus icon name from https://lucide.dev */
background-color: #d2d2d2;
color: rgb(0, 0, 0);
}
.callout[data-callout="cite"] a:link {
color: rgb(0, 0, 255);
}
<% if (it.colorName == "yellow") { %>
[!attention] Nota
<% } else if (it.colorName == "blue") { %>
[!abstract] Definição
<% } else if (it.colorName == "green") { %>
[!tip] Exemplo
<% } else if (it.colorName == "magenta") { %>
[!error] Interessante
<% } else if (it.colorName == "orange") { %>
[!faq] Questão
<% } else if (it.colorName == "purple") { %>
[!example] Referência cruzada
<% } else if (it.colorName == "gray") { %>
[!cite] Citação
<% } else { %>
[!note] Informação
<% } %>
<%= it.imgEmbed %><%= it.text %>
link
<% if (it.comment) { %>
<%= it.comment %>
<% } %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment