From d66bd75334f931aa296fa0305de4516f170891ed Mon Sep 17 00:00:00 2001 From: Tw93 Date: Thu, 3 Nov 2022 01:18:52 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=9B=B4=E6=96=B0=E6=94=AF?= =?UTF-8?q?=E6=8C=81twitter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +-- README_EN.md | 8 +-- dist/twitter.css | 165 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 174 insertions(+), 9 deletions(-) create mode 100644 dist/twitter.css diff --git a/README.md b/README.md index 533a3f1..bc1f2b6 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@

Pake

-
很简单的用 Rust 打包网页生成很小的 Mac App，底层使用 Tauri，支持微信读书、Flomo、RunCode、Witeboard、ToolsFun、Vercel 等，详细小白开发教程可见底部。
+
很简单的用 Rust 打包网页生成很小的 Mac App，底层使用 Tauri，支持微信读书、Twitter、RunCode、Witeboard、Flomo、Vercel 等，详细小白开发教程可见底部。

## 特征 @@ -31,11 +31,11 @@ - + - + @@ -46,11 +46,11 @@ - + - +
WeRead DownloadFlomo DownloadTwitter Download
RunCode Download
ToolsFun DownloadFlomo Download Vercel Download
diff --git a/README_EN.md b/README_EN.md index b7be3b3..23b0a0c 100644 --- a/README_EN.md +++ b/README_EN.md @@ -31,11 +31,11 @@ In addition, it supports double clicking the head to switch to full screen, and - + - + @@ -46,11 +46,11 @@ In addition, it supports double clicking the head to switch to full screen, and - + - +
WeRead DownloadFlomo DownloadTwitter Download
RunCode Download
ToolsFun DownloadFlomo Download Vercel Download
diff --git a/dist/twitter.css b/dist/twitter.css new file mode 100644 index 0000000..bf4e6ef --- /dev/null +++ b/dist/twitter.css @@ -0,0 +1,165 @@ +[data-testid='placementTracking'] article, +a[href*='quick_promote_web'], +[data-testid='AppTabBar_Explore_Link'], +a[href*='/lists'][role='link'][aria-label], +a[href='/i/bookmarks'] { + display: none !important; +} + +/* Hide Messages Drawer */ +[data-testid='DMDrawer'] { + visibility: hidden !important; +} + +[data-testid='primaryColumn'] > div > div { + position: relative !important; +} + +/* Hide sidebar */ +[data-testid='sidebarColumn'] { + visibility: hidden !important; + width: 0 !important; + margin: 0 !important; + padding: 0 !important; + z-index: 1 !important; +} + +/* Twitter has a large screen breakpoint at 1000px */ +/* Twitter web's small screen styles (< 988px) are minimal */ +@media only screen and (min-width: 1000px) { + /* Center the Timeline */ + /* Prevent horizontal scroll */ + main[role='main'] { + align-items: center !important; + overflow-x: clip !important; + } + + /* Match widths for feed */ + [data-testid='primaryColumn'] { + width: 700px !important; + max-width: 700px !important; + margin: 0 auto !important; + } + [data-testid='primaryColumn'] > div > div:last-child, + [data-testid='primaryColumn'] > div > div:last-child div { + max-width: unset !important; + } + + /* Nudge engagement row 81px right */ + /* In default feed: 506px - 425px */ + div[aria-label][role='group'][id^='id__'] { + margin-right: 81px !important; + } + + /* Fix navigation to left */ + header[role='banner'] { + position: fixed !important; + left: 0 !important; + } + + header[role='banner'] > div > div > div { + justify-content: center !important; + padding-top: 0; + } + + form[role='search'] > div:nth-child(1) > div { + background-color: transparent !important; + } + + /* Align Twitter navigation icon with search */ + h1[role='heading'] { + padding-top: 4px !important; + } + + /* Navigation buttons labels and Account button label on hover */ + header[role='banner'] + nav[role='navigation'] + * + div[dir='auto']:not([aria-label]) + > span, + [data-testid='SideNav_AccountSwitcher_Button'] > div:not(:first-child) { + display: inline-block !important; + opacity: 0 !important; + transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); + } + header[role='banner'] + nav[role='navigation']:hover + * + div[dir='auto']:not([aria-label]) + > span, + [data-testid='SideNav_AccountSwitcher_Button']:hover > div:not(:first-child) { + opacity: 1 !important; + } + header[role='banner'] nav[role='navigation']:hover > * > div { + backdrop-filter: blur(12px) !important; + } + + /* Align account button with floating tweet button */ + [data-testid='SideNav_AccountSwitcher_Button'] { + bottom: 18px !important; + left: 1px !important; + } + + /* Floating Tweet Button */ + [data-testid='SideNav_NewTweet_Button'] { + position: fixed !important; + right: 16px !important; + bottom: 24px !important; + } +} + +/* Add padding equal to navigation size when between 1000px-1265px */ +@media only screen and (min-width: 1000px) and (max-width: 1265px) { + body { + padding-left: 88px; + } +} + +/* Reveal searchbar and search filters at desktop breakpoint */ +@media only screen and (min-width: 1265px) { + /* Reveal searchbar */ + [data-testid='sidebarColumn'] form[role='search'] { + visibility: visible !important; + position: fixed !important; + top: 12px !important; + right: 16px !important; + } + + /* Match size of input the placeholder content */ + [data-testid='sidebarColumn'] input[placeholder='Search Twitter'] { + width: 150px; + } + + /* Match size of focused search container to its dropdown */ + /* Add blur filter to search container for overlap */ + [data-testid='sidebarColumn'] form[role='search']:focus-within { + width: 374px !important; + backdrop-filter: blur(12px) !important; + } + + /* Match size of focused search input to its dropdown */ + [data-testid='sidebarColumn'] input[placeholder='Search Twitter']:focus { + width: 328px !important; + } + + /* Reset width and left positioning to align search dropdown */ + div[style*='left: -12px'] { + left: unset !important; + } + div[style='left: -8px; width: 306px;'] { + left: unset !important; + width: 374px !important; + } + + /* Search Filters Custom Class */ + .searchFilters { + visibility: visible !important; + position: fixed; + top: 12px; + right: 16px; + width: 240px; + } + .searchFilters > div > div:first-child { + display: none; + } +}