Shaarli User CSS (Ref: https://github.com/shaarli/Shaarli)

user.css

/* remove note icon */
i.mdi.mdi-note { display: none; }

/* replace plugin icons */
img[title="View on archive.org"] { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; padding-left: 16px; background: url('https://api.iconify.design/simple-icons:internetarchive.svg?color=%23bbb&width=16&height=16') no-repeat; }
img[title="See related links"] { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; padding-left: 16px; background: url('https://api.iconify.design/si-glyph:connect-2.svg?color=%23bbb&width=16&height=16') no-repeat; }

/* images containers */
img.icon    { max-width: 128px; max-height: 128px; margin: 1em; }
img.icon128 { max-width: 128px; max-height: 128px; margin: 1em; }
img.icon256 { max-width: 256px; max-height: 256px; margin: 1em; }
img.icon512 { max-width: 512px; max-height: 512px; margin: 1em; }
img.item    { max-width: 300px; max-height: 300px; margin: 1em; }
img.ctr     { display: block; margin: 1em auto; }
img.right   { float: right; margin: 1em; }  
img.left    { float: left; margin: 1em; }

/* --- info boxes --- */
div.info, div.success, div.warning, div.error, div.quote, div.poem { border-radius: 0.5em; margin: 10px 0px; padding: 0.75em 1em 0.75em 64px; width: fit-content; }
div.info     { color: #bde5f8; background: #00529b url('https://api.iconify.design/mdi-alert-circle.svg?color=%23bde5f8&width=32&height=32') no-repeat 1em; }
div.success  { color: #dff2bf; background: #4f8a10 url('https://api.iconify.design/mdi-check-circle.svg?color=%23dff2bf&width=32&height=32') no-repeat 1em; }
div.warning  { color: #feefb3; background: #9f6000 url('https://api.iconify.design/mdi-alert.svg?color=%23feefb3&width=32&height=32') no-repeat 1em; }
div.error    { color: #ffbaba; background: #d8000c url('https://api.iconify.design/mdi-bomb.svg?color=%23ffbaba&width=32&height=32') no-repeat 1em; }
div.quote    { color: #f9f9f9; background: #333 url('https://api.iconify.design/mdi-format-quote-open.svg?color=%23f9f9f9&width=32&height=32') no-repeat 0 0; }
div.poem     { color: #fafad2; background: #333 url('https://api.iconify.design/mdi-feather.svg?color=%23fafad2&width=32&height=32') no-repeat 1em; text-align: center; white-space: pre-wrap; }
div.poem::first-line                        { font-weight: bold; }
div.quote cite:before, div.poem cite:before { content: "\2014"; }
div.quote cite, div.poem cite               { display: block; font-style: italic; text-align: right; padding-top: 1ex;}
div.plain    { border-radius: 0.5em; margin: 10px 0px; padding: 0.75em 1em; width: fit-content; background-color: #333; }
div.plainpre { border-radius: 0.5em; margin: 10px 0px; padding: 0.75em 1em; width: fit-content; white-space: pre-wrap; background-color: #333; }
span.info, span.success, span.warning, span.error { border-radius: 0.25em; padding: 0 0.25em 0 1.5em; }
span.info    { background: #00529b url('https://api.iconify.design/mdi-alert-circle.svg?color=%23bde5f8&width=16&height=16') no-repeat 0.25em; }
span.success { background: #4f8a10 url('https://api.iconify.design/mdi-check-circle.svg?color=%23dff2bf&width=16&height=16') no-repeat 0.25em; }
span.warning { background: #9f6000 url('https://api.iconify.design/mdi-alert.svg?color=%23feefb3&width=16&height=16') no-repeat 0.25em; }
span.error   { background: #d8000c url('https://api.iconify.design/mdi-bomb.svg?color=%23ffbaba&width=16&height=16') no-repeat 0.25em; }
span.hilite  { font-weight: bold; font-style: italic; border-radius: 0.25em; padding: 0 0.25em; background: lightgreen; }

/* fix youtube width on mobile */
iframe[src*=youtube] { display: block; margin: 0 auto; max-width: 100%; padding-bottom: 10px; }

/* feedburner rss display */
div.feedburnerFeedBlock                         { background: #f9f9f9; border: 1px solid black; border-radius: 0.5em; margin: 0.5em 0; padding: 0.5em; }
p.feedTitle                                                             { margin-bottom: 0.5em; }
p.date                                                                  { display: inline; }
p.date::before                                                  { content: "\2002\2013\2002"; }
div.feedburnerFeedBlock ul                      { margin: 0.25em 0; padding: 0 0.5em; }
div.feedburnerFeedBlock ul li           { display: block; padding: 0.2em 0.75em !important; }
div.feedburnerFeedBlock ul li div       { font-style: italic; }
div#creditfooter                                                { display: none; }

/* details */
details                                   { display: flow-root }
details > summary                         { border: none; border-radius: 0.5em; cursor: pointer; margin-bottom: 1em; padding-left: 1em; }
details > summary::-webkit-details-marker { font-size: x-large; }
details > summary > h3                    { display: inline-block; margin: 0.25em 0 !important; }

/* kbd fr/(https://github.com/auth0/kbd) */
kbd {
  /* font-family: Consolas, "Lucida Console", monospace; */
  display: inline-block;
  border: 1px solid grey;
  border-radius: 3px;
  padding: 0px 4px;
  /* box-shadow: 1px 1px 1px #777; */
  margin: 2px;
  font-size: smaller;
  /* vertical-align: text-bottom; */
  vertical-align: baseline;
  background: #eee;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  font-variant: small-caps;
  font-weight: 600;
  /* This two work */
  /* letter-spacing: 0.5px; */
  letter-spacing: 1px;
  /* Prevent selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
kbd:hover, kbd:hover *   { color: black; }
kbd:active, kbd:active * { color: black; box-shadow: 1px 1px 0px #ddd inset; }
kbd kbd                  { padding: 0px; margin: 0 1px; box-shadow: 0px 0px 0px black; vertical-align: baseline; background: none; }
kbd kbd:hover            { box-shadow: 0px 0px 0px black; }
kbd:active kbd           { box-shadow: 0px 0px 0px black; background: none; }

/* === SLIDESHOW 4 PICS === */
#slides {
  display: flex;
  justify-content: center;
  height: 400px;
  margin-top: 2em;
}

.slide {
  max-width: 400px;
  max-height: 400px;
  animation-duration: 24s;
  animation-iteration-count: infinite;
  position: absolute;
  border: 10px solid darkgrey !important;
  border-radius: 10px;
}

#slide1 {
  animation-name: slide1;
}

#slide2 {
  animation-name: slide2;
}

#slide3 {
  animation-name: slide3;
}

#slide4 {
  animation-name: slide4;
}

@keyframes slide1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide3 {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide4 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* === GIST EMBEDS === */
body .gist .highlight {
    background: #272822;
}
body .gist .blob-num,
body .gist .blob-code-inner,
body .gist .pl-s2,
body .gist .pl-stj {
    color: #f8f8f2;
}
body .gist .pl-c1 {
    color: #ae81ff;
}
body .gist .pl-enti {
    color: #a6e22e;
    font-weight: 700;
}
body .gist .pl-st {
    color: #66d9ef;
}
body .gist .pl-mdr {
    color: #66d9ef;
    font-weight: 400;
}
body .gist .pl-ms1 {
    background: #fd971f;
}
body .gist .pl-c,
body .gist .pl-c span,
body .gist .pl-pdc {
    color: #75715e;
    font-style: italic;
}
body .gist .pl-cce,
body .gist .pl-cn,
body .gist .pl-coc,
body .gist .pl-enc,
body .gist .pl-ens,
body .gist .pl-kos,
body .gist .pl-kou,
body .gist .pl-mh .pl-pdh,
body .gist .pl-mp,
body .gist .pl-mp1 .pl-sf,
body .gist .pl-mq,
body .gist .pl-pde,
body .gist .pl-pse,
body .gist .pl-pse .pl-s2,
body .gist .pl-mp .pl-s3,
body .gist .pl-smi,
body .gist .pl-stp,
body .gist .pl-sv,
body .gist .pl-v,
body .gist .pl-vi,
body .gist .pl-vpf,
body .gist .pl-mri,
body .gist .pl-va,
body .gist .pl-vpu {
    color: #66d9ef;
}
body .gist .pl-cos,
body .gist .pl-ml,
body .gist .pl-pds,
body .gist .pl-s,
body .gist .pl-s1,
body .gist .pl-sol {
    color: #e6db74;
}
body .gist .pl-e,
body .gist .pl-ef,
body .gist .pl-en,
body .gist .pl-enf,
body .gist .pl-enm,
body .gist .pl-entc,
body .gist .pl-entm,
body .gist .pl-eoac,
body .gist .pl-eoac .pl-pde,
body .gist .pl-eoi,
body .gist .pl-mai .pl-sf,
body .gist .pl-mm,
body .gist .pl-pdv,
body .gist .pl-som,
body .gist .pl-sr,
body .gist .pl-vo {
    color: #a6e22e;
}
body .gist .pl-ent,
body .gist .pl-eoa,
body .gist .pl-eoai,
body .gist .pl-eoai .pl-pde,
body .gist .pl-k,
body .gist .pl-ko,
body .gist .pl-kolp,
body .gist .pl-mc,
body .gist .pl-mr,
body .gist .pl-ms,
body .gist .pl-s3,
body .gist .pl-smc,
body .gist .pl-smp,
body .gist .pl-sok,
body .gist .pl-sra,
body .gist .pl-src,
body .gist .pl-sre {
    color: #f92672;
}
body .gist .pl-mb,
body .gist .pl-pdb {
    color: #e6db74;
    font-weight: 700;
}
body .gist .pl-mi,
body .gist .pl-pdi {
    color: #f92672;
    font-style: italic;
}
body .gist .pl-pdc1,
body .gist .pl-scp {
    color: #ae81ff;
}
body .gist .pl-sc,
body .gist .pl-sf,
body .gist .pl-mo,
body .gist .pl-entl {
    color: #fd971f;
}
body .gist .pl-mi1,
body .gist .pl-mdht {
    color: #a6e22e;
    background: rgba(0, 64, 0, .5);
}
body .gist .pl-md,
body .gist .pl-mdhf {
    color: #f92672;
    background: rgba(64, 0, 0, .5);
}
body .gist .pl-mdh,
body .gist .pl-mdi {
    color: #a6e22e;
    font-weight: 400;
}
body .gist .pl-ib,
body .gist .pl-id,
body .gist .pl-ii,
body .gist .pl-iu {
    background: #a6e22e;
    color: #272822;
}