My personal Snippets/callouts.css. It gives native Obsidian Callouts a more *Admonition-esque* look, with a title bar, a sidebar and main body. Also, it changes the internal links to look a bit fresher. Credit to @Gongsta for the inspiration on his personal site.

custom-callout.css

/* Declaring variables for colors */
:root, body {
    --light: #fff;
    --dark: #141021;
    --primary: #f28482;
    --gray: #4e4e4e;
    --lightgray: #f0f0f0;
    --internal-link: #304A61;
    --internal-link-hover: #8ba49d;
}

:root, body {
    --callout-summary: #448aff;
    --callout-summary-accent: #a1c4ff;
    --callout-bug: #f50057;
    --callout-bug-accent: #ff7aa9;
    --callout-danger: #ff1744;
    --callout-danger-accent: #ff8aa1;
    --callout-example: #7c4dff;
    --callout-example-accent: #bda5ff;
    --callout-fail: #ff5252;
    --callout-fail-accent: #ffa8a8;
    --callout-note: #00b0ff;
    --callout-note-accent: #7fd7ff;
    --callout-info: #448aff;
    --callout-info-accent: #a1c4ff;
    --callout-question: #64dd17;
    --callout-question-accent: #b0f286;
    --callout-quote: #9e9e9e;
    --callout-quote-accent: #cecece;
    --callout-done: #00c853;
    --callout-done-accent: #63ffa4;
    --callout-important: #00bfa5;
    --callout-important-accent: #5fffe9;
    --callout-warning: #ff9100;
    --callout-warning-accent:#ffc87f
}


 /* Sets the shape of the callout, declaring it a solid left side, a title background and body. */
.callout {
    position: relative;
    margin: 0;
    padding: 0 0 .25em;
    border-top-right-radius: 10px;
    border-left:6px solid var(--callout-info);
    background-color: var(--lightgray);
    color: var(--dark);
}

.callout-title {
    width: 100%;
    padding: .5em 1em;
    background-color: var(--callout-info-accent);
    font-weight: 600;
    color: var(--dark);
    overflow: hidden;
    box-sizing: border-box;
}

.callout-content {
    padding: 0.2em 1em;
}

/* Declares the Title and side bar for each callout type */
.callout[data-callout='summary'] {
    border-left:6px solid var(--callout-summary) !important
}

.callout[data-callout='summary'] .callout-title {
    background-color:var(--callout-summary-accent) !important
}

.callout[data-callout='bug'] {
    border-left:6px solid var(--callout-bug) !important
}

.callout[data-callout='bug'] .callout-title {
    background-color:var(--callout-bug-accent) !important
}

.callout[data-callout='danger'] {
    border-left:6px solid var(--callout-danger) !important
}

.callout[data-callout='danger'] .callout-title {
    background-color:var(--callout-danger-accent) !important
}

.callout[data-callout='example'] {
    border-left:6px solid var(--callout-example) !important
}

.callout[data-callout='example'] .callout-title {
    background-color:var(--callout-example-accent) !important
}

.callout[data-callout='fail'] {
    border-left:6px solid var(--callout-fail) !important
}

.callout[data-callout='fail'] .callout-title {
    background-color:var(--callout-fail-accent) !important
}

.callout[data-callout='info'] {
    border-left:6px solid var(--callout-info) !important
}

.callout[data-callout='info'] .callout-title {
    background-color:var(--callout-info-accent) !important
}

.callout[data-callout='note'] {
    border-left:6px solid var(--callout-note) !important
}

.callout[data-callout='note'] .callout-title {
    background-color:var(--callout-note-accent) !important
}

.callout[data-callout='question'] {
    border-left:6px solid var(--callout-question) !important
}

.callout[data-callout='question'] .callout-title {
    background-color:var(--callout-question-accent) !important
}

.callout[data-callout='quote'] {
    border-left:6px solid var(--callout-quote) !important
}

.callout[data-callout='quote'] .callout-title {
    background-color:var(--callout-quote-accent) !important
}

.callout[data-callout='done'] {
    border-left:6px solid var(--callout-done) !important
}

.callout[data-callout='done'] .callout-title {
    background-color:var(--callout-done-accent) !important
}

.callout[data-callout='important'] {
    border-left:6px solid var(--callout-important) !important
}

.callout[data-callout='important'] .callout-title {
    background-color:var(--callout-important-accent) !important
}

.callout[data-callout='warning'] {
    border-left:6px solid var(--callout-warning) !important
}

.callout[data-callout='warning'] .callout-title {
    background-color:var(--callout-warning-accent) !important
}


/* General CSS to remove the underlining on internal links and give them a fresher look */
.cm-hmd-internal-link .cm-underline, .internal-link  {
    font-weight: 500;
    text-decoration: initial !important;
    background-color: #eff1f2; 
    padding: 2px 4px; /* some padding to make the background more noticeable */
    border-radius: 4px; /* round corners for a softer look */
    
}

 .cm-hmd-internal-link .cm-underline, .internal-link, .external-link  {
    text-decoration: initial !important;
    font-weight: 500;
    color: var(--internal-link);
    transition: color 0.3s ease; /* smooth transition */
}

.cm-hmd-internal-link .cm-underline:hover,  .internal-link:hover, .external-link:hover {
    color: var(--internal-link-hover); /* color when hovered */
    text-decoration: initial !important; /* remove underline when hovered */
}