Obsidian CSS callouts imported from Zotero (plugin ZotLit)

obsidian-callouts.css

/* 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);
}

zt-annot.eta

<% 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 %>
<% } %>