Hide menu and sidebar until hover.
Additional adjustments to make the article easier to read.
Twitter of Zen Mode by KABA
Details
AuthorKABA
LicenseNo License
Categoryx
Created
Updated
Size8.8 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Twitter of Zen Mode
@version 20250201.04.31
@namespace https://userstyles.world/user/KABA
@description Hide menu and sidebar until hover.Additional adjustments to make the article easier to read.
@author KABA
@license No License
==/UserStyle== */
@-moz-document regexp("https://(x|twitter).com/.*") {
/* Base */
/*
NOTE: Highlight style for identification
outline: solid #f003;
*/
:root {
--navbar-zIndex: 1;
--show-duration: .64s;
--show-delay: .2s;
--hide-duration: .4s;
--hide-delay: 0;
--transition:
var(--show-duration)
var(--show-delay)
ease-in-out;
--border-color: light-dark(#eff3f4, #2f3336);
--text-black: #0f1419; /* = rgb(15, 20, 25); */
--bg-white: #fff;
--bg-black: #000;
--bg-color: light-dark(var(--bg-white), var(--bg-black));
--bg-faded: light-dark(
color-mix(in hsl, #0000, var(--bg-white) 85%),
color-mix(in hsl, #0000, var(--bg-black) 65%)
);
--break-point--Menu: 500px;
--break-point--Sidebar: 988px;
&:has(body[style*="rgb(21, 32, 43)"]) {
--border-color: rgb(56, 68, 77);
}
}
/* - Keyboard shortcut Button */
h2:has(a[href="/i/keyboard_shortcuts"]) {
@media (width >= 500px /* var(--break-point--Menu) */ ) {
position: fixed;
bottom: 0;
z-index: var(--navbar-zIndex);
margin: 1.75rem 1.5rem;
width: revert;
height: revert;
overflow: revert;
clip: revert;
/* Hide Texts */
span {
display: block;
width: 1px;
height: 1px;
overflow: hidden;
}
a {
/* NOTE: Not focusable due to `tabindex="-1"` */
color: var(--text-black) !important;
text-decoration: none;
outline: revert; /* NOTE: Hidden on hover while focus-within */
--darken: 0%;
--shadow:
0 0 0 1px #0001,
0 1px 1px #0002;
--border-b: 1px;
&:focus { --darken: 2% }
&:hover { --darken: 4% }
&:active {
--darken: 8%;
--shadow:
0 0 0 1px #0001 inset,
0 2px 1px #0002 inset;
--border-b: 0;
}
/* Key button */
&::before {
display: grid;
place-content: center;
height: 2.25rem;
aspect-ratio: 1.125 / 1;
box-shadow: var(--shadow);
border-radius: 4px;
border-bottom: solid var(--border-b) #cfd9de;
background: color-mix(in hsl, #f7f9f9, #000 var(--darken));
content: "?";
transition: background .2s;
}
}
}
}
/* Adjust z-index */
#layers { z-index: calc(var(--navbar-zIndex) + 1) !important }
header[role="banner"] {
&, :has(> &) { z-index: revert }
> * { z-index: revert }
> * > * {
z-index: var(--navbar-zIndex);
background: var(--white-faded);
backdrop-filter: blur(4px);
}
}
/* Layer check styles */
/* NOTE: Menu overlaps when changing screen width */
/* header[role="banner"] {
&, > * > * { background: #f003; opacity: 1 !important }
}
[data-testid="primaryColumn"] { background: #00f3 }
main[class] { :has(> &) { background: #0f03 } } */
/* - Hide Navbar, Sidebar, Message */
header[role="banner"] > * > *, /* NOTE: z-index animates strangely when Applied directly to header */
[data-testid="sidebarColumn"],
#layers > * > * > :has([data-testid="DMDrawer"]) {
transition: var(--transition);
&:not(:hover, :focus-within) {
transition-duration: var(--hide-duration);
transition-delay: var(--hide-delay);
opacity: 0;
}
}
/* NOTE: #layers contains Menu, Modal, Message drawer, etc. */
/*
- Menu : `:has([role="menu"])`
- Modal : `:has([role="dialog"])`
- Message drawer : `:has([data-testid="DMDrawer"])`
*/
/* - Primary column */
[data-testid="primaryColumn"] { border-color: #0000 }
}
@-moz-document regexp("https://(x|twitter).com/intent/post?.*") {
/* Adjust z-index for Keyboard shortcut Button */
main[class] {
:has(> &) { z-index: var(--navbar-zIndex) }
}
}
@-moz-document regexp("https://(x|twitter).com/.*") {
/* Home */
/* NOTE: URL changes even on home if modal is open */
/* - Primary column */
[data-testid="primaryColumn"] {
> * > * {
&,
/* Border bottom of Post block */
~ :has([data-testid="toolBar"]) > :empty:last-child {
transition: var(--transition);
}
/* Tabs (on Home) */
&:first-child:has([role="tablist"] a[href="/home"]) {
&:not(:hover, :focus-within) {
&:not(:has(~ :last-child:is(:hover, :focus-within, [aria-expanded="true"]))) {
&,
/* Border bottom of Post block -- NOTE: HTML structure seems to change sometimes */
~ :has([data-testid="toolBar"]) + *,
~ :has([data-testid="toolBar"]) > :empty:last-child {
transition-duration: var(--hide-duration);
transition-delay: var(--hide-delay);
opacity: 0;
}
}
/* Posts */
~ :last-child {
&:not(:hover, :focus-within, :has([aria-expanded="true"])) {
transition-duration: var(--hide-duration);
transition-delay: var(--hide-delay);
opacity: 0;
}
}
}
}
/* Post block */
/* NOTE: `section` is for Post detail (/[user_name]/status/\d+) */
&:has([data-testid="toolBar"]):not(section) {
--tab-height: calc(53px + 1px);
position: sticky;
top: var(--tab-height);
background: 0;
> :first-child {
--border-radius: 1.5rem;
margin-block: 1.25rem;
box-shadow:
1px 0 var(--bg-color),
2px 0 var(--border-color),
0 0 0 1px var(--border-color);
border-radius:
var(--border-radius)
0 0
var(--border-radius);
overflow: hidden; /* Mask content background */
background: var(--bg-faded);
backdrop-filter: blur(12px);
/* Actions */
.css-175oi2r.r-14lw9ot.r-jumn1c.r-xd6kpl.r-gtdqiz.r-ipm5af.r-184en5c {
&,
> div > div > div { background: 0 }
/* Set animation for conversation settings button */
> .css-175oi2r.r-1awozwy.r-18u37iz.r-1wtj0ep {
interpolate-size: allow-keywords;
transition: height .2s;
overflow: hidden;
/* Not opend */
&:not(.r-j5o65s.r-qklmqi.r-1w6e6rj.r-m5k245.r-13qz1uu) { height: 0 }
}
}
--min-container-width: 72px + 8px * 2 + 600px + 16px * 2;
@media (width >= 720px ) {
--border-radius: 2rem;
border-radius: var(--border-radius);
box-shadow: 0 0 0 1px var(--border-color);
}
@media (width >= 988px /* var(--break-point--Sidebar) */ ) {
margin-block: 1.5rem;
}
}
}
}
}
}
@-moz-document regexp("https://(x|twitter).com/.+/status/.+") {
/* Post detail and Article */
/* NOTE: Applies to home also if modal is open */
/* - Primary column */
[data-testid="primaryColumn"] {
/* Hide related contents */
[data-testid="cellInnerDiv"] {
/* has h2 with text -- HACK: Exclude `Who to follow` on home */
&:has(h2 ~ div) {
/* with Subsequent siblings */
&, ~ * { transition: var(--transition) }
&:not(:hover, :has(~:is(:hover, :focus-within))) {
&, ~ * {
transition-duration: var(--hide-duration);
transition-delay: var(--hide-delay);
}
opacity: .2;
~ * { opacity: 0 }
}
}
}
[data-testid="tweet"][tabindex="-1"] {
/* Sticky Date */
overflow: unset;
> * > * > * > :nth-last-child(1 of :has(time)) /* NOTE: Contents may contain time */ {
position: sticky;
bottom: 1rem;
&::before {
position: absolute;
inset: -1rem;
background: var(--bg-faded);
backdrop-filter: blur(12px);
content: "";
}
}
/* Adjust text only Article */
&:has([data-testid="twitter-article-title"]) {
:has([data-testid="tweetPhoto"]) {
&:has(~ * [data-testid="twitter-article-title"]) {
margin-bottom: 0;
border-radius: 1rem;
overflow: hidden;
}
}
[data-testid="twitter-article-title"] {
font-size: 2rem;
line-height: calc(38 / 30);
}
.longform-header-one {
margin-block: 2rem 1.2rem;
font-size: 1.6rem;
line-height: calc(32 / 24);
}
.longform-header-two {
margin-block: 1.2rem .8rem;
font-size: calc(20rem / 15);
line-height: 1.5;
}
[data-contents="true"] {
/* Only for Windows */
font-feature-settings: "palt";
letter-spacing: .03em;
/* NOTE: Applies to Headings as Well */
* { font-feature-settings: inherit }
> :first-child {
> .longform-header-one { margin-top: .2rem }
> .longform-header-two { margin-top: 0 }
}
}
[data-testid="tweetText"],
.longform-unstyled,
.longform-blockquote,
.longform-unordered-list-item,
.longform-ordered-list-item {
font-size: 1rem;
line-height: calc(26 / 15);
}
.longform-unstyled,
.longform-blockquote,
.public-DraftStyleDefault-ul,
.public-DraftStyleDefault-ol {
margin-bottom: .8rem;
}
.longform-unordered-list-item,
.longform-ordered-list-item {
margin-bottom: .4rem;
margin-left: 1.4rem;
&::before { margin-left: -1rem }
}
.longform-unordered-list-item {
&::before { line-height: 1 }
}
}
}
}
}