Display title as status by myfonj

/* ==UserStyle==
@name           Display title as status
@namespace      myfonj
@version        1.2.6
@description    Page title visible in bottom right corner. You can read it here more likely than in your clogged tab-bar, don't you?
@author         myf
@license        CC0
==/UserStyle== */
/*
https://userstyles.world/style/5119
Changelog
1.2.6 (2024-11-18) Support bright theme.
1.2.5 (2023-12-01) Fix for cases where plaintext is inserted into head (webforms.pipedrive.com).
1.2.4 (2022-11-17) Fix pointer event mistake (breaking telegram.org/k/).
1.2.2 (2022-11-12) :active; attempt to make it workd with userscript that makes title editable.
1.2.1 (2022-09-16) fix rare scenario when page displays head somehow and it may obstruct page (codepen.io).
1.2.0 (2022-07-22) "shy period" longer (2 minutes), collapses to 1 px bar on the bottom, can be reset with click.
1.1.0 (2022-07-01) "shy": hover for 1s makes it go away for 2s, unless being selected.
*/
@-moz-document regexp(".*") {
:root > head {
 display: block !important;
 position: fixed !important;
 z-index: 2147483647 !important;
 overflow: visible !important;
 /* Hope this won't spoil anything: */
 pointer-events: none !important; 
}
/*
There are sites with iframes in the head [1].
 Hide them, but keep the specificity as low as possible.
 [1] https://codepen.io/
*/
:where(:root > head > :not(title)) {
 display: none;
}
/*
 There are sites with stray textual content added to head
 e.g. copyright notices for fonts loaded at [2]
 [2] https://webforms.pipedrive.com/f/6OtNEXt2hwY4dZ9e1pOlF51EvSPgBInTVfED62eCgoJYERK7TgL4Gnu8RcTGkRA4rF?embeded=1&uuid=cde-report
*/
:where(:root > head) {
 font-size: 0
} 
:where(:root > head > *) {
 font-size: 1rem
} 

/*
 Main title styling
*/
:root > * > title {
 pointer-events: all !important;
 display: block !important;
 width: auto !important;
 height: auto !important;
 position: fixed !important;
 bottom: 0 !important;
 right: 0 !important;
 color: #999 !important;
 background-color: #000c !important;
 border: 1px solid #7778 !important;
 border-bottom: none !important;
 border-right: none !important;
 padding: 0 .95ch 0 .95ch !important;
 font-family: system-ui !important;
 font-size: 12px !important;
 font-weight: normal !important;
 line-height: 1.8em !important;
 transition-property: transform !important;
 transform: translatey(0%) !important;
}
:root > * > title:hover {
 color: #ccc !important;
 background-color: #333 !important;
}
@media (prefers-color-scheme: light) {
:root > * > title {
 color: #555 !important;
 background-color: #EEEc !important;
 border: 1px solid #8888 !important;
}
:root > * > title:hover {
 color: #333 !important;
 background-color: #FFF !important;
}
}
/*
 HIDE when hovered for some time
*/
:root > * > title:not(:active):not(:focus):hover {
 transform: translatey(calc(100% - 1px)) !important;
 transition-delay: 1s !important;
 transition-duration: .5s !important;
}
/*
 keep hidden for ~~ever~~  __some time__
*/
:root > * > title:not(:hover) {
 transition-delay: 120s !important;
 transition-duration: 2s !important;
}
/*
 but restore when clicked
*/
:root > * > title:focus,
:root > * > title:active {
 transform: translatey(0%) !important;
 transition: none !important;
}
/*
 canonical?
* OFF /
:root > * > link[rel="canonical" i][href] {
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 
}
:root > * > link[rel="canonical" i][href]::before {
 content: 'Canonical:' attr(href);
}
/* */


}