mirror of
https://github.com/chev2/scripts-styles.git
synced 2026-01-14 11:12:11 +00:00
97 lines
2.6 KiB
CSS
97 lines
2.6 KiB
CSS
/* ==UserStyle==
|
|
@name Nitter Split View
|
|
@author Chev <riskyrains@proton.me> (https://github.com/chev2)
|
|
@version 1.0.2
|
|
@description On Nitter, splits the main tweet and replies to be side-by-side.
|
|
@namespace github.com/chev2
|
|
@license Apache-2.0
|
|
|
|
@homepageURL https://github.com/chev2/scripts-styles
|
|
@supportURL https://github.com/chev2/scripts-styles/issues
|
|
@updateURL https://raw.githubusercontent.com/chev2/scripts-styles/main/styles/nitter-split-view.user.css
|
|
|
|
@preprocessor stylus
|
|
|
|
@var range side-padding "Side padding" [152, 0, 300, 1, "px"]
|
|
@var range roundness "Border radius" [8, 0, 24, 1, "px"]
|
|
==/UserStyle== */
|
|
|
|
top-bar-size = 50px
|
|
top-bar-padding = 10px
|
|
top-bar-offset = top-bar-size + top-bar-padding
|
|
|
|
@-moz-document domain("nitter.net"), domain("xcancel.com"), domain("nitter.space"), domain("nitter.tiekoetter.com"), domain("nuku.trabun.org"), domain("lightbrd.com"), domain("nitter.privacyredirect.com"), domain("nitter.poast.org") {
|
|
.container {
|
|
padding-top: top-bar-offset;
|
|
}
|
|
|
|
.conversation {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.main-thread {
|
|
float: left;
|
|
|
|
position: fixed;
|
|
|
|
right: calc(50vw);
|
|
left: side-padding;
|
|
}
|
|
|
|
.replies {
|
|
float: right;
|
|
|
|
position: fixed;
|
|
|
|
right: side-padding;
|
|
left: calc(50vw);
|
|
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.main-thread, .replies {
|
|
border-radius: roundness;
|
|
|
|
/* Add scrollbar to both replies and main thread */
|
|
/* This is really only needed for main thread (since replies have a scrollbar by default) */
|
|
/* But we add scrollbars to both so the main container doesn't have to scroll, */
|
|
/* Keeping the navbar intact */
|
|
overflow-y: scroll;
|
|
max-height: "calc(100vh - 8px - %s)" % top-bar-offset;
|
|
}
|
|
|
|
.reply, .tweet-link {
|
|
border-radius: roundness;
|
|
}
|
|
|
|
/* "Jump to top" button */
|
|
.top-ref {
|
|
display: none;
|
|
}
|
|
|
|
.main-tweet, .replies {
|
|
padding-top: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
/* "Load newest" button */
|
|
.conversation > .timeline-item.show-more {
|
|
position: fixed;
|
|
|
|
right: side-padding;
|
|
left: calc(50vw);
|
|
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.show-more ~ .replies {
|
|
margin-top: 56px;
|
|
|
|
/* If 'load newest' button is visible, then we need to decrease the max height of the replies panel */
|
|
max-height: "calc(100vh - 8px - 56px - %s)" % top-bar-offset;
|
|
}
|
|
|
|
.conversation .show-more, .show-more a {
|
|
border-radius: roundness;
|
|
}
|
|
}
|