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 2.0.2
@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://greatest.deepsurf.us/en/scripts/564813/versions/new
Changelog
2.0.2 (2026-04-12) Polish + do not pollute title-less pages.
2.0.1 (2026-04-11) Hotfix for https://bugzil.la/2031072 - collapsed title prevented wheel-scroll on some pages.
2.0.0 (2026-03-30) Changed hiding mechanism from long hover to ▽/△ "button" clicks.
1.5.1 (2026-03-23) Increased the re-appear delay to infinity. (What a bump.)
1.5.0 (2026-03-13) Display the "invisible" helper stub while hovered; some code polish.
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(".*")
{
/*
§ Prerequisities
*/
:root > head:has(> title)
{
display: block !important;
z-index: calc(infinity);
overflow: visible !important;
}
/*
§ Common/shared
Not sure about properties, but since we set it just for pseudos and title,
it should not pollute/collide with (typical) page's styles.
*/
:root:has(> head > title)::after,
:root > head:has(> title)::after,
:root > head > title {
position: fixed !important;
z-index: calc(infinity) !important;
--background-color-basic: color-mix(in srgb, canvas, transparent 10%);
--background-color-hover: color-mix(in srgb, canvas, transparent 1%);
--border-color-basic: color-mix(in srgb, canvastext, transparent 90%);
--border-color-hover: color-mix(in srgb, canvastext, canvas 70%);
--text-color-basic: color-mix(in srgb, canvastext, canvas 20%);
--text-color-hover: color-mix(in srgb, canvastext, canvas 2%);
--bg: var(--background-color-basic);
--br: var(--border-color-basic);
--fg: var(--text-color-basic);
color: var(--fg) !important;
pointer-events: all !important;
display: block !important;
width: auto !important;
height: auto !important;
position: fixed !important;
bottom: 0 !important;
right: 0 !important;
text-shadow: 0 0 2px canvas !important;
border: 1px solid var(--br) !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;
}
/*
§ Main title styling
*/
:root > head > title
{
background-color: var(--bg) !important;
padding-right: 4ch !important;
&[age]::after
{
content: ' | age: ' attr(age);
}
&[age][now]::after
{
content: ' | age: ' attr(age) ' | now: ' attr(now);
}
&:hover
{
--bg: var(--background-color-hover);
--br: var(--border-color-hover);
--fg: var(--text-color-hover);
text-shadow: none !important;
}
}
/*
§ Interactivity - logic
*/
:root:has(> head > title)::after, /* "Show" trigger */
:root > head:has(> title)::after, /* "Hide" tigger */
:root > head > title /* The content*/
{
transition-property: transform;
transition-delay: calc(infinity * 1s) !important;
transition-duration: 0s;
}
:root:has(> head > title)::after /* "Show" trigger */
{
transform: scale(0.00001);
}
/* "Hide" triggered -> hide Content and Hide trigger */
:root:has(> head:active > title):not(:has(> head > *:active))
{
&::after { transition-delay: 0s !important; transform: scale(1); }
& > head > title,
& > head::after { transition-delay: 0s !important; transform: scale(0.00001); }
}
/* "Show" triggered -> show content and hider */
:root:has(> head > title):active:not(:has(> :active))
{
&::after,
& > head > title,
& > head::after { transition: none; }
}
/*
§ Interactivity - visuals
*/
:root:has(> head > title)::after,
:root > head:has(> title)::after
{
border-color: transparent !important;
content: '▽';
opacity: .3;
}
:root > head:has(> title):hover::after {
opacity: .7;
}
:root > head:has(> title):not(:has(>*:hover)):hover
{
&::after
{
content: '▼';
opacity: 1;
}
}
:root:has(> head > title)::after
{
content: '△';
opacity: .4;
}
:root:has(> head > title):not(:has(>*:hover)):hover::after
{
content: '▲';
opacity: 1;
background-color: var(--background-color-hover);
}
/*
§ Hotfixes for border cases
¶ 1. sites with iframes in the head.
Hide them, but keep the specificity as low as possible.
Observed at: codepen.io
*/
:where(:root > head > :not(title)) { display: none; }
/*
¶ 2. sites with stray textual content added to head with JS
e.g. copyright notices for fonts
Observed at: webforms.pipedrive.com
*/
:where(:root > head) { font-size: 0; }
:where(:root > head > *) { font-size: 1rem; }
/*
¶ 3. in short pages where HTML does not fill the viewport,
it would catch hovers and clicks below "body". Gently stretch.
This is quite interventionsm but let's see.
Observed at: larger monitors, this style's GF page
* OFF /
:where(:root > body) { min-height: 100vh; }
/* */
} /* End of the global block */
/*
§ Hotfixes for theme adaptation
Sites seemingly respecting system theme but failing to declare it in meta/CSS
*/
@-moz-document
domain("youtube.com")
,domain("youtube-nocookie.com")
,domain("web.whatsapp.com")
,domain("kyberia.sk")
,domain("stackoverflow.com")
{
@media (prefers-color-scheme: dark)
{
:root::after,
:root > head::after,
:root > head > title {
color-scheme: dark;
}
}
}