/* ==UserStyle==
@name           Title as status
@namespace      myfonj
@version        1.4.1
@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
@downloadURL https://update.greasyfork.org/scripts/564813/Title%20as%20status.user.css
@updateURL https://update.greasyfork.org/scripts/564813/Title%20as%20status.meta.css
==/UserStyle== */
/*
https://userstyles.world/style/5119
https://greasyfork.org/en/scripts/564813/versions/new
Changelog
1.4.1 (2026-02-01) Fix native colours in pages that do not respect colour scheme.
1.4.0 (2026-02-01) Native colours, longer hover-to-hide duration, shorter hidden duration, additional corner area for click-restore, cleanup.
1.3.0 (2026-01-26) Sneakily added optional "age" and "now" display; dependant on an userscript.
1.2.7 bump z-index
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: calc(9e9) !important; /* Strange that without calc this notation does not work(?) */
 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 > head > title {
 color-scheme: light dark;
 pointer-events: all !important;
 display: block !important;
 width: auto !important;
 height: auto !important;
 position: fixed !important;
 bottom: 0 !important;
 right: 0 !important;
 --bg: color-mix(in srgb, canvas, transparent 10%);
 --br: color-mix(in srgb, canvastext, transparent 90%);
 --fg: color-mix(in srgb, canvastext, canvas 20%);
 background-color: var(--bg) !important;
 border: 2px solid var(--br) !important;
 color: var(--fg) !important;
 text-shadow: 0 0 2px canvas !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;
 &[age]::after {
  content: ' | age: ' attr(age);
 }
 &[age][now]::after {
  content: ' | age: ' attr(age) ' | now: ' attr(now);
 }
 &:hover {
  --bg: color-mix(in srgb, canvas, transparent 1%);
  --br: color-mix(in srgb, canvastext, canvas 70%);
  --fg: color-mix(in srgb, canvastext, canvas 2%);
  text-shadow: none !important;
 }
}
/*
 HIDE when hovered for some time
*/
:root > head > title:not(:active):not(:focus):hover {
 transform: translatey(calc(100% - 2px)) !important;
 transition-delay: 3s !important;
 transition-duration: .5s !important;
}
/*
 keep hidden for ~~ever~~  __some time__
*/
:root > head > title:not(:hover) {
 transition-delay: 5s !important;
 transition-duration: 1s !important;
}
/*
 but restore when clicked
*/
:root > head > title:focus,
:root > head > title:active {
 transform: translatey(0%) !important;
 transition: none !important;
}
/*
 Larger invisible rectangle for easier click-restore
*/
:root > head > title::before {
 content: '' !important;
 position: fixed !important;
 bottom: 100% !important;
 right: 0 !important;
 width: 8px !important;
 height: 16px !important;
 background-color: transparent !important;
}

}