Hello everyone.
I’m trying to finish the look of the admonitions and I’m having a problem. In the new template I created (.callout), the background where the text appears is transparent. The original template (.callout-lateral) and the variation I made of it (.callout-lateralB) have that grayish background.
The problem is that the background where the title appears in the .callout template appears to me as a duller color than the other two templates.
In dark themes, it’s not as noticeable:
When I asked Gemini, he told me that the problem is that since the last two templates have a gray background color for the text, the part where the title text appears is a darker color.
I’ve tried several things but to no avail.
Is there an easy way to achieve this?
This is the macro code:
\define advertencia(tipo:"nota", modelo, fuente, titulo, ancho:"100%", clase)
<$let theme-class = {{{ [[$:/palette]get[text]get[color-scheme]else[light]addprefix[theme-]] }}}
theme-class-callout = {{{ [<__modelo__>is[blank]then<theme-class>addsuffix[-callout]else<theme-class>] }}}
callout-title = {{{ [<__titulo__>!is[blank]] :else[<__tipo__>titlecase[]] }}}
callout-model = {{{ [<__modelo__>!is[blank]addprefix[-]else[]] }}}
icon-tiddler = {{{ [all[tiddlers+shadows]tag[$:/tags/TimitAdvertencias/Imagen]contains:callout-type<__tipo__>]
:else[[$:/plugins/timit/advertencia/imagenes/nota]] }}}
source = {{{ [<__fuente__>get[text]else<__fuente__>] }}} >
<div class=<<theme-class-callout>> style="width:$ancho$;">
<div data-callout=<<__tipo__>> class={{{ [[callout]addsuffix<callout-model>] }}}>
<div class="callout-title">
<div class="callout-icon"><$transclude tiddler=<<icon-tiddler>> field=text/></div>
<div class="callout-title-inner"><<callout-title>></div>
</div>
<$list filter="[<__fuente__>!is[blank]]" variable=ignore>
<div class="callout-content">
<$transclude tiddler=<<source>> field=title mode=block />
</div>
</$list>
</div>
</div>
</$let>
\end advertencia
And this is the CSS code:
/* Apariencia */
.callout {
--callout-color: 68, 138, 255;
}
.callout-lateral, .callout-lateralb {
--callout-color: 68, 138, 255;
}
.callout,
.callout-lateral,
.callout-lateralb {
border-color: rgb(var(--callout-color));
}
.callout {
background-color: transparent;
}
.callout-lateral, .callout-lateralb {
background-color: var(--background-secondary);
}
.callout-title {
background-color: rgba(var(--callout-color), 0.1);
}
.callout-icon {
color: rgb(var(--callout-color));
}
.callout-title-inner {
font-weight: 700;
}
/* Estructura */
.callout {
border-width: 1px;
border-style: solid;
border-radius: 5px;
margin: 1em 0;
}
.callout-lateral {
border-left-width: 4px;
border-left-style: solid;
border-radius: 2px;
margin: 1em 0;
}
.callout-lateralb {
border-width: 1px 1px 1px 4px;
border-style: solid;
border-radius: 5px;
margin: 1em 0;
}
.callout-title {
padding: 10px;
display: flex;
gap: 10px;
}
.callout-icon {
flex: 0 0 auto;
display: flex;
align-self: center;
}
.callout-title-inner {
flex: 1 1 0;
}
.callout-content {
overflow-x: auto;
padding: 0px 15px;
}
/* Alargar el icono svg icon de advertencias */
.callout-icon svg{
height:1.2em;
width:1.2em;
}
/* Tema */
.theme-light {
background-color: #f2f3f5;
}
.theme-light-callout {
background-color: transparent;
}
.theme-dark {
--background-secondary: #161616;
}
.theme-dark-callout {
background-color: #161616;
}
Best regards and thanks.