/* counter style */
#__charCounter__ span {
cursor: pointer; font: 88%/1 monospace;
opacity: .35; /* ā density when mouse is not over it 35% */
transition: opacity .2s ease-out }
#__charCounter__ span:hover { opacity: 1 } /* ā density on mouse over 100% */
#__charCounter__ { z-index: 30; position: sticky; bottom: 0; text-align: right }
/* popup style */
#__charCounterPopup__ {
z-index: 30; position: absolute; bottom: 2em; right: -1em;
border-radius: .25em; border: 1px solid #ddd; box-shadow: 0 0 8px 1px rgba(8,8,8,.1);
padding: .8em; background-color: azure; color: #5F9EA0; font: 13.5px/1.4 monospace;
transition: opacity .3s ease-out }
/* hide when in presentation mode */
.presentation #__charCounter__,
.presentation #__charCounterPopup__ { display: none }
script.js
This page is auto-translated from /nishio/č¦ććęåę°ć«ć¦ć³ćæć¼ using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. Iām very happy to spread my thought to non-Japanese readers.