Source code rendering: make the callout more visible

Reminder: Callout numbers (aka callouts) provide a means to add annotations to lines in a verbatim block.

The asciidoc callout aren't currently highlighted a lot (at least with the light theme), they may fill in black for a better highlighting.

What we currently display: https://documentation.bonitasoft.com/bonita/2021.1/product-versioning

bonita_doc_code_callouts

What a asciidoc callout docs page shows: https://asciidoctor.org/docs/asciidoc-writers-guide/#listing-and-source-code-blocks

asciidoc_callouts_fill_black_02

Example on couchbase documentation: https://docs.couchbase.com/tutorials/tutorial-template/sample.html#add-a-tutorial-card

Possible improvements

Screenshots from Firefox 88.0.1, also tested with Chrome 90.0.4430.212 The proposed modifications have impacts on the dark theme that should updated as well (at least to keep the current rendering)

Adjust and put in bold

/** disable, especially bad rendering on Firefox, less impact on Chrome */
height: 1.2em;
/** add */
font-weight: bold;

bonita_doc_code_callouts_bold

Fill in black

background-color: rgba(0,0,0,0.8);
color: #fff !important;
font-weight: bold;
border-color: rgba(0,0,0,0.8);

bonita_doc_code_callouts_fill_black

bonitasoft / bonita-documentation-site