Page title visible in bottom right corner. You can read it here more likely than in your clogged tab-bar, don't you?
/* ==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
==/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;
}
}