🎨 将原有的twitter代码直接迁移到pake
This commit is contained in:
Tw93
176
dist/twitter.css
vendored
176
dist/twitter.css
vendored
@@ -1,176 +0,0 @@
|
|||||||
[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;
|
|
||||||
}
|
|
||||||
header[role="banner"] nav[role="navigation"] > a {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
header[role="banner"] nav[role="navigation"] > a::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: -40px;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -92,6 +92,160 @@ window.addEventListener("DOMContentLoaded", (_event) => {
|
|||||||
margin-top:24px;
|
margin-top:24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[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;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-testid="DMDrawer"] {
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-testid="primaryColumn"] > div > div {
|
||||||
|
position: relative !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-testid="sidebarColumn"] {
|
||||||
|
visibility: hidden !important;
|
||||||
|
width: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
z-index: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1000px) {
|
||||||
|
main[role="main"] {
|
||||||
|
align-items: center !important;
|
||||||
|
overflow-x: clip !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[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;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[aria-label][role="group"][id^="id__"] {
|
||||||
|
margin-right: 81px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1[role="heading"] {
|
||||||
|
padding-top: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
header[role="banner"] nav[role="navigation"] > a {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
header[role="banner"] nav[role="navigation"] > a::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: -40px;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
[data-testid="SideNav_AccountSwitcher_Button"] {
|
||||||
|
bottom: 18px !important;
|
||||||
|
left: 1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-testid="SideNav_NewTweet_Button"] {
|
||||||
|
position: fixed !important;
|
||||||
|
right: 16px !important;
|
||||||
|
bottom: 24px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1000px) and (max-width: 1265px) {
|
||||||
|
body {
|
||||||
|
padding-left: 88px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1265px) {
|
||||||
|
[data-testid="sidebarColumn"] form[role="search"] {
|
||||||
|
visibility: visible !important;
|
||||||
|
position: fixed !important;
|
||||||
|
top: 12px !important;
|
||||||
|
right: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-testid="sidebarColumn"] input[placeholder="Search Twitter"] {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-testid="sidebarColumn"] form[role="search"]:focus-within {
|
||||||
|
width: 374px !important;
|
||||||
|
backdrop-filter: blur(12px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-testid="sidebarColumn"] input[placeholder="Search Twitter"]:focus {
|
||||||
|
width: 328px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[style*="left: -12px"] {
|
||||||
|
left: unset !important;
|
||||||
|
}
|
||||||
|
div[style="left: -8px; width: 306px;"] {
|
||||||
|
left: unset !important;
|
||||||
|
width: 374px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchFilters {
|
||||||
|
visibility: visible !important;
|
||||||
|
position: fixed;
|
||||||
|
top: 12px;
|
||||||
|
right: 16px;
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
.searchFilters > div > div:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#pack-top-dom:active {
|
#pack-top-dom:active {
|
||||||
cursor: grabbing;
|
cursor: grabbing;
|
||||||
cursor: -webkit-grabbing;
|
cursor: -webkit-grabbing;
|
||||||
|
|||||||
Reference in New Issue
Block a user