Last active
January 3, 2023 20:25
-
-
Save nerdfiles/0dbdd5a5339e9f99e193ebb123db2fe5 to your computer and use it in GitHub Desktop.
personal tumblr stylesheet. adds some icons (speech bubbles and a flashlight), rounds some corners; animates tumblr a bit. the plan is for eventual interactivity: each post is styled with a "door" and "doorstep" (X-bar, above window fold) for a background. clicking speech bubbles in tumblr's "goth rave" theme outlines the door, a talking door, o…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @description combine at will on tumblr dot com. | |
* @usage | |
* (mix|background)-blend-mode: normal; | |
* (mix|background)-blend-mode: multiply; | |
* (mix|background)-blend-mode: screen; | |
* (mix|background)-blend-mode: overlay; | |
* (mix|background)-blend-mode: darken; | |
* (mix|background)-blend-mode: lighten; | |
* (mix|background)-blend-mode: color-dodge; | |
* (mix|background)-blend-mode: color-burn; | |
* (mix|background)-blend-mode: hard-light; | |
* (mix|background)-blend-mode: soft-light; | |
* (mix|background)-blend-mode: difference; | |
* (mix|background)-blend-mode: exclusion; | |
* (mix|background)-blend-mode: hue; | |
* (mix|background)-blend-mode: saturation; | |
* (mix|background)-blend-mode: color; | |
* (mix|background)-blend-mode: luminosity; | |
*/ | |
body[class*="palette"] { | |
background-blend-mode: luminosity !important; | |
mix-blend-mode: luminosity !important; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @appliesTo URL https://www.tumblr.com/dashboard?? | |
* @appliesTo URL https://www.tumblr.com/dashboard/following | |
* @appliesTo URL https://www.tumblr.com/dashboard/stuff_for_you | |
* @appliesTo URL https://www.tumblr.com/dashboard/hubs | |
* @appliesTo URL https://www.tumblr.com/dashboard/blog_subs | |
* @appliesTo URL https://www.tumblr.com/dashboard/trending | |
* @appliesTo URLsStartingWith https://www.tumblr.com/reblog | |
* @appliesTo URLsStartingWith https://www.tumblr.com/blog | |
* @appliesTo URLsStartingWith https://www.tumblr.com/edit | |
* @appliesTo URLsStartingWith https://www.tumblr.com/new/text | |
*/ | |
/* @descriptions hides tumblr from itself. vying for dashboard and "for you" page. | |
* these selectors may break other pages. | |
*/ | |
main > div:nth-child(1), | |
main > div:not([data-timeline="/v2/timeline?which=trending"]):not([data-timeline="/v2/timeline?which=blog_subscriptions"]):not([data-timeline="/v2/timeline/hubs"]):not([data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"]):nth-child(3) { | |
display: none !important; | |
} | |
/* | |
main > div:not([aria-hidden]):nth-child(4) { | |
display: none !important; | |
} | |
*/ | |
#base-container > div > div > div aside { | |
display: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#tumblr { | |
background-image: none !important; | |
} | |
#tumblr:after { | |
background-image: none !important; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @description quick hack for when a post has only one image <figure> and other elements of the page are overlapping. | |
* sometimes people will make single image posts with a caption and it will crash into the above byline. this is a separate | |
* stylesheet to use in stylish for such occasions. (it's rare so i'm suggesting this stylesheet to be toggle-able.) | |
*/ | |
figure img { | |
margin-top: 5vw !important; | |
} | |
figure:after { | |
content: ' ' !important; | |
display: block !important; | |
height: 5vw !important; | |
padding-top: 1vw !important; | |
border-top: 3px double rgba(100, 100, 100, 0.4) !important; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#glass-container button { | |
transform: scale(1.5); | |
} | |
#glass-container button > * > img { | |
transform: scale(1); | |
animation: ease-in-out infinite alternate; | |
animation-name: anim; | |
animation-duration: 6s; | |
} | |
@-webkit-keyframes anim { | |
0% { | |
margin-top: 2vw; | |
transform: translate3d(100px, 0, 0); | |
} | |
100% { | |
margin-top: -2vw; | |
transform: translate3d(0, 0, 100px); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#glass-container button { | |
/*min-width: 100%;*/ | |
width: 100%; | |
} | |
#glass-container button > * > img { | |
object-fit: cover; | |
width: 100%; | |
} | |
#glass-container div div div { | |
margin: 0; | |
padding: 0; | |
} | |
#glass-container div div div > * img { } | |
#glass-container div div div > * > * { } | |
#glass-container div div div > * > * > * { } | |
#glass-container div div div > * > * > img { | |
outline: 3px double rgba(0, 0, 0, 0.85); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @description tumblr in grid mode */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { | |
display: grid; | |
grid-template-columns: repeat(5, auto); | |
grid-column-gap: 6.5vw; | |
grid-row-gap: 6.5vw; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > *, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > *, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > *, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > *, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > *, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > * { | |
min-width: 25vw; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:hover { | |
animation-name: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @description tumblr in columnar mode (but reversed) */ | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { | |
flex-direction: row-reverse; | |
} | |
html:focus div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2), | |
html:active div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2), | |
html:hover div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { | |
flex-direction: row !important; | |
} | |
/* EOF */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) p:hover:before, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) p:hover:before, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) p:hover:before, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) p:hover:before, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) p:hover:before, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) p:hover:before { | |
opacity: 0.6; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) p:before, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) p:before, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) p:before, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) p:before, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) p:before, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) p:before { | |
content: '🌿'; | |
display: inline-block; | |
transform: scale(1.3); | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: -2vw; | |
/*outline: 3px solid rgba(100, 100, 100, 0.3);*/ | |
padding: 3vw; | |
z-index: 10000; | |
opacity: 0.3; | |
background-blend-mode: luminosity !important; | |
mix-blend-mode: luminosity !important; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 8s; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:before, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:before, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:before, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:before, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:before, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:before { | |
content: "✋🏾"; | |
display: inline-block; | |
width: 10vw; | |
height: 10vh; | |
position: absolute; | |
font-size: 4rem; | |
left: 0; | |
z-index: 9999; | |
opacity: 0.5; | |
transform: rotate(-45deg); | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:after { | |
content: "🥃"; | |
content: "☕️"; | |
display: inline-block; | |
width: 10vw; | |
height: 10vh; | |
position: absolute; | |
font-size: 4rem; | |
left: -5vw; | |
margin-top: -1vw; | |
z-index: 9999; | |
opacity: 0.5; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:after { | |
cursor: move; | |
cursor: grab; | |
cursor: -moz-grab; | |
cursor: -webkit-grab; | |
animation: ease-in-out infinite alternate; | |
animation-name: upup; | |
animation-duration: 2s; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:active:after, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:active:after, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:active:after, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:active:after, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:active:after, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:active:after { | |
cursor: grabbing; | |
cursor: -moz-grabbing; | |
cursor: -webkit-grabbing; | |
animation: ease-in-out infinite alternate; | |
animation-name: upup; | |
animation-duration: 2s; | |
} | |
/* @description filler. */ | |
[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2):after { | |
padding-right: 10vw; | |
content: '⑇'; | |
font-size: 100vw; | |
display: block; | |
opacity: 0.4; | |
color: rgba(255, 255, 255, 0.4); | |
filter: grayscale(100%); | |
width: 10vw; | |
height: 10vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: fade; | |
animation-duration: 4s; | |
} | |
[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2):hover:after { | |
opacity: 1; | |
} | |
/* ## utils */ | |
@-webkit-keyframes revhoverbit { | |
0% { | |
transform: translate3d(0px, 0px, 0px); | |
} | |
100% { | |
transform: translate3d(0px, 5px, 0px); | |
} | |
} | |
@-webkit-keyframes hoverbit { | |
0% { | |
transform: translateY(0); | |
} | |
100% { | |
transform: translateY(-5%); | |
} | |
} | |
@-webkit-keyframes hoverbit2 { | |
0% { | |
top: 0vw; | |
} | |
100% { | |
top: -1vw; | |
} | |
} | |
@-webkit-keyframes fade { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@-webkit-keyframes fadein { | |
0% { | |
opacity: 0.8; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@-webkit-keyframes livrespairs { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
@-webkit-keyframes upup { | |
0% { | |
/* | |
opacity: 0.85; | |
transform: translate3d(15px, 0, 0);*/ | |
filter: invert(0); | |
} | |
100% { | |
filter: invert(100%); | |
/* | |
opacity: 1; | |
transform: translate3d(0, 5px, 5px);*/ | |
} | |
} | |
@-webkit-keyframes rotate { | |
0% { | |
opacity: 0.85; | |
transform: translate3d(15px, 0, 0); | |
} | |
100% { | |
opacity: 1; | |
transform: translate3d(0, 5px, 5px); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @description obviously. */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { | |
display: flex; | |
flex-direction: column; | |
flex-wrap: inherit; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body[class*="palette"] { | |
/* Keyword values */ | |
image-rendering: auto; | |
image-rendering: high-quality; | |
image-rendering: smooth; | |
image-rendering: crisp-edges; | |
image-rendering: pixelated; | |
/* Global values */ | |
image-rendering: inherit; | |
image-rendering: initial; | |
image-rendering: revert; | |
image-rendering: revert-layer; | |
image-rendering: unset; | |
image-rendering: auto !important; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @description attr(data-id) */ | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div { | |
position: relative; | |
} | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:before { | |
content: attr(data-id); | |
display: inline-block; | |
width: 10vw; | |
height: 2vw; | |
color: rgba(240, 0, 190, 0.5); | |
position: absolute; | |
left: 0; | |
top: 0; | |
z-index: 9999; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @description i'm keeping these "fixes" as a separate file as a testament of how much a fucking idiot i am and how | |
* time-consuming this shit can be for fucking idiots who can't just use their voice to cover their own ass actually. */ | |
:not([data-id]) [style*="opacity: 1"] [style*="blog-title"] { | |
left: auto !important; | |
} | |
[data-testid="tag-link"] > div { | |
margin: 0 auto 2vw !important; | |
} | |
/* @desc meta-naming, etc. */ | |
/* @desc for all parents with specific children */ | |
.A:has(~ .B) {} | |
/* @description if a direct descendant exists ... */ | |
.A:has(> .B) {} | |
/* @desc for all siblings for parent as opposed to another parent */ | |
.A:has(+ .B) {} | |
/* @desc for all parents, according to class name token A */ | |
.A:has(.B) { | |
outline: 3px solid gold; | |
} | |
/* @note turn on layout.css.has-selector.enabled */ | |
*:has(*) { | |
/*outline: 3px solid gold;*/ | |
} | |
body * { | |
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5); | |
} | |
svg { | |
filter: drop-shadow(1px 1px 0.5px rgba(1, 0, 0, 0.35)); | |
} | |
svg:after { | |
content: '.'; | |
display: inline-block; | |
width: 2vw; | |
height: 2vw; | |
} | |
[aria-modal="true"]:has([role]) { | |
background-color: rgba(0, 0, 0, 0.5) !important; | |
} | |
[aria-label*="Restore timeline"] span { | |
color: rgba(0, 150, 255, 1) !important; | |
} | |
*[rel]:active, | |
*[rel]:focus, | |
*[rev]:active, | |
*[rev]:focus, | |
*[role]:active, | |
*[role]:focus, | |
*[type]:active, | |
*[type]:focus, | |
*[aria-label]:active, | |
*[aria-label]:focus, | |
*[title]:active, | |
*[title]:focus, | |
*[href]:active, | |
*[href]:focus { | |
outline: 3px solid rgba(0, 150, 255, 1) !important; | |
} | |
*[required]:active, | |
*[required]:focus { | |
outline: 3px dotted rgba(255, 150, 0, 1) !important; | |
} | |
*[aria-label]:hover { | |
outline: 3px dotted rgba(100, 5, 130, 0.85) !important; | |
filter: hue-rotate(180deg); | |
} | |
[aria-label*="Discard"] * { | |
color: rgba(255, 30, 0, 0.25) !important; | |
} | |
[aria-label*="Discard"]:hover * { | |
color: rgba(255, 30, 0, 1) !important; | |
} | |
[aria-label*="Cancel"] * { | |
color: rgba(200, 200, 200, 0.25) !important; | |
} | |
[aria-label*="Cancel"]:hover * { | |
color: rgba(200, 200, 200, 1) !important; | |
} | |
*[aria-label]:visited { | |
outline: 3px dotted rgba(100, 150, 30, 0.4) !important; | |
} | |
caption, figcaption, cite, dt, button, | |
time, data, label, input, textarea, th, select, option { | |
color: rgba(0, 150, 255, 1) !important; | |
} | |
/* @description tooltips */ | |
[aria-label="Explore"]:hover:after { | |
position: absolute; | |
content: attr(aria-label); | |
content: '🔎 ẻ̡̧͎͕̙̜̹͇̞̩͚̆̃̏̀̂̏̂̌̽͂̔ͅx̧̧̢̛̟̬̻̼͓̣̠̟̜̝͖̙̯͎̲̭̼̠̣̜́͑̍̿̓̏͑̄̊̉̔̉̅͐̽́̅̎͗͌̕̕͞͝ͅͅp̧̲̫̺̹̝̺̮̝̫̲͔̖̏̋̋̏̌̄͗̽̓̄̍̍̐̈́͘͢͜͢͢͞͞l̛̛̞̖̦̥̦̰̰͎͓̹̯͍̺͈͇̬̗̪̳̠̼̪̳͎̰̣̤̤̯̱̭̫̂͒̅̏͌͒͌͊̍̓͋͗̉̽̅̽̓̆̍͆̒͑͒̈͛͐̕̚͟͠͞͠͡ͅỏ̧̡͕̟̖̭̰̬̮͇͔̤̞̟̳̜͓̼̜͕̤͕̘̳̩̆̉̅͑̑̔́͛̓̇̓͒̆̍̍͑̾͌̐̆̎̏̾̕̕͜r̢̧̮̝̺̤̬̺̪͉̠̭̦̩̬͕̥̼̪̲̗͓̐̽̄̂͌̊̓̓̉̾̍̌̇͒͆͑̽͐̂̋̕͘̕͟ę̧̡̛̮͈͖͖̤͇̱̘͕͇̥̙̥͖͚̜̞̬̭͉̰͑͋̓̽̀̌͛͌̓́̂̿̾̌̆̔̎̾̉̅̕͘͜͜͡͝͡͞ͅ'; | |
display: block; | |
width: 2vw; | |
height: 2vw; | |
top: 0.5vw; | |
right: 2vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: upup; | |
animation-duration: 2s; | |
z-index: 100000 !important; | |
} | |
/* @description fixes like 3 problems between 5 different elements. 5 birds, 3 stones. */ | |
a { | |
border-radius: 0 !important; | |
} | |
ul [aria-label], | |
aside { | |
opacity: 0.4 !important; | |
} | |
ul [aria-label]:hover, | |
aside:hover { | |
opacity: 1 !important; | |
} | |
/* | |
div[data-timeline] > div:nth-child(2) { | |
border-right: 200vw solid rgba(0, 0, 0, 0.2); | |
} | |
*/ | |
/* | |
div[data-timeline] > div:nth-child(2):after { | |
content: ' 🌱 🌳🌳 🌳🌳 🌳🌳🌳 🌳🌳🌳 🌲 🌲 \ | |
🌲 🍃 🍃 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌳 🌲 🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \ | |
🍃 🌲 🍃 🌳 🌲 \ | |
🌿 🌱 🌿 \ | |
🌳 🌲 🍃 🌳 🌲 🍃 \ | |
🌿 🌱 🌳 🌲 \ | |
🍃 🌳 🌲 🌲🌲🌲 🌲🌲🌲 🌲🌲 🌲 \ | |
🌲 🍃 🍃 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌳 🌲 🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \ | |
🍃 🌲 🍃 🌳 🌲 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌳 🌲 🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \ | |
🍃 🌲 🍃 🌳 🌲 \ | |
🌿 🌱 🌿 \ | |
🌳 🌲 🍃 🌳 🌲 🍃 \ | |
🌿 🌱 🌳 🌲 \ | |
🍃 🌳 🌲 🌲🌲🌲 🌲🌲🌲 🌲🌲 🌲 \ | |
🌲 🍃 🍃 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌱 🌳 🌲 🍃 🌿 \ | |
🌳 🌲 🌿 🌱🌱🌱🌱🌱 🌱🌱🌱🌱🌱 \ | |
🍃 🌲 🍃 🌳 🌲 \ | |
🌿 🌱 🌿 \ | |
🌳 🌲 🍃 🌳 🌲 🍃 \ | |
🌿 🌱 🌳 🌲 \ | |
🌱 🌳 🌲🌲🌲🌲🌲 🌲🌲🌲 🌲🌲'; | |
display: block; | |
height: 50vw; | |
width: 100vw; | |
font-size: 10vw; | |
opacity: 0.25; | |
z-index: 0; | |
transform: translateX(2vw) rotate3d(10, 3, 13, -10deg) scale(1.2); | |
position: absolute; | |
filter: hue-rotate(120deg); | |
} | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @description move the generic interface elements around for less doomfalling. | |
* for https://holoentropic.tumblr.com/* with stylish or [custom-style-script]'s css feature. | |
* | |
* []: https://mybrowseraddon.com/custom-style-script.html | |
*/ | |
/** | |
* @description inner background for page pagination. | |
*/ | |
#pagination a { | |
opacity: 1 !important; | |
} | |
#pagination .bg, | |
span[class="bg"]{ | |
opacity: 1 !important; | |
} | |
.tmblr-iframe.tmblr-iframe--unified-controls.tmblr-iframe--loaded.iframe-controls--desktop.tmblr-iframe--below-header, | |
.nav-wrapper { | |
z-index: 100 !important; | |
position: absolute !important; | |
} | |
[href*="prev"] | |
[href*="next"], | |
[rel*="prev"], | |
[rel="next"], | |
[class="next"], | |
[class="previous"], | |
[class="prev"], | |
button[aria-label="Prev"], | |
button[aria-label="Previous"] | |
button[aria-label="Next"] { | |
position: fixed !important; | |
right: 1vw !important; | |
top: 5vw !important; | |
opacity: 1; | |
z-index: 99999999 !important; | |
} | |
[href*="prev"]:hover, | |
[href*="next"]:hover, | |
[rel*="prev"]:hover, | |
[rel="next"]:hover, | |
[class="previous"]:hover, | |
[class="prev"]:hover, | |
[class="next"]:hover, | |
button[aria-label="Prev"]:hover, | |
button[aria-label="Previous"]:hover, | |
button[aria-label="Next"]:hover { | |
filter: invert(100%) !important; | |
opacity: 1; | |
} | |
[href*="prev"] > *, | |
[rel="prev"] > *, | |
[href*="next"] > *, | |
[rel="next"] > *, | |
[class="previous"] > *, | |
[class="prev"] > *, | |
[class="next"] > *, | |
button[aria-label="Prev"] > *, | |
button[aria-label="Previous"] > *, | |
button[aria-label="Next"] > * { | |
cursor: help; /* fallback if grab cursor is unsupported */ | |
cursor: help; | |
cursor: -moz-help; | |
cursor: -webkit-help; | |
opacity: 1; | |
} | |
/** @description . */ | |
[href*="next"] > *:after, | |
[rel="next"] > *:after, | |
[class="next"] > *:after, | |
button[aria-label="Next"] > *:after { | |
opacity: 1; | |
content: '🔮'; | |
display: inline-block; | |
position: absolute; | |
left: 1vw; | |
top: 0vw; | |
font-size: 12vw; | |
line-height: 0; | |
z-index: -1; | |
color: rgba(0, 0, 0, 1); | |
animation: ease-in-out; | |
animation-name: fadeto; | |
animation-duration: 2s; | |
cursor: move; /* fallback if grab cursor is unsupported */ | |
cursor: grab; | |
cursor: -moz-grab; | |
cursor: -webkit-grab; | |
} | |
[href*="next"] > *:active:after, | |
[rel="next"] > *:active:after, | |
[class="next"] > *:active:after, | |
button[aria-label="Next"] > *:active:after { | |
cursor: grabbing; | |
cursor: -moz-grabbing; | |
cursor: -webkit-grabbing; | |
outline: 3px dashed gold !important; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
filter: drop-shadow(0 0 0.75rem crimson); | |
/*mix-blend-mode: luminosity;*/ | |
} | |
[href*="next"]:after, | |
[rel="next"]:after, | |
[class="next"]:after, | |
button[aria-label="Next"]:after { | |
content: '⎘' !important; | |
display: inline-block !important; | |
position: absolute !important; | |
left: 1vw !important; | |
top: 0vw !important; | |
line-height: 0 !important; | |
z-index: -1 !important; | |
color: rgba(0, 0, 0, 0.2) !important; | |
font-size: 12vw !important; | |
text-shadow: 0 0 0.1rem rgba(20, 200, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1) !important; | |
} | |
[href*="next"]:hover:after, | |
[rel="next"]:hover:after, | |
[class="next"]:hover:after, | |
button[aria-label="Next"]:hover:after { | |
color: rgba(255, 255, 255, 1) !important; | |
text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1) !important; | |
animation: ease-in-out infinite alternate; | |
animation-name: hoverbit2; | |
animation-duration: 2s; | |
} | |
[href*="previous"], | |
[rel="previous"], | |
[href*="prev"], | |
[rel="prev"], | |
[class="prev"], | |
[class="previous"], | |
button[aria-label="Prev"], | |
button[aria-label="Previous"] { | |
position: absolute !important; | |
z-index: 9999 !important; | |
left: 1vw !important; | |
top: 5vw !important; | |
} | |
[href*="previous"]:hover, | |
[rel="previous"]:hover, | |
[href*="prev"]:hover, | |
[rel="prev"]:hover, | |
[class="prev"]:hover, | |
[class="previous"]:hover, | |
button[aria-label="Prev"]:hover, | |
button[aria-label="Previous"]:hover { | |
filter: invert(100%) !important !important; | |
} | |
[href*="previous"] > *, | |
[rel="previous"] > *, | |
[href*="prev"] > *, | |
[rel="prev"] > *, | |
[class="prev"] > *, | |
[class="previous"] > *, | |
button[aria-label="Previous"] > *, | |
button[aria-label="Previous"] > * { | |
cursor: help !important; /* fallback if grab cursor is unsupported */ | |
cursor: help !important; | |
cursor: -moz-help !important; | |
cursor: -webkit-help !important; | |
} | |
/* @description previous door */ | |
[href*="previous"] > *:after, | |
[rel="previous"] > *:after, | |
[href*="prev"] > *:after, | |
[rel="prev"] > *:after, | |
[class="prev"] > *:after, | |
[class="previous"] > *:after, | |
button[aria-label="Previous"] > *:after { | |
content: '🚪' !important; | |
display: inline-block !important; | |
position: absolute !important; | |
left: 1vw !important; | |
top: 0vw !important; | |
line-height: 0 !important; | |
z-index: -1 !important; | |
color: rgba(0, 0, 0, 1) !important; | |
font-size: 12vw !important; | |
animation: ease-in-out !important; | |
animation-name: fadeto !important; | |
animation-duration: 2s !important; | |
cursor: move !important; /* fallback if grab cursor is unsupported */ | |
cursor: grab !important; | |
cursor: -moz-grab !important; | |
cursor: -webkit-grab !important; | |
} | |
[href*="previous"] > *:active:after, | |
[rel="previous"] > *:active:after, | |
[href*="prev"] > *:active:after, | |
[rel="prev"] > *:active:after, | |
[class="prev"] > *:active:after, | |
[class="previous"] > *:active:after, | |
button[aria-label="Previous"] > *:active:after { | |
cursor: grabbing !important; | |
cursor: -moz-grabbing !important; | |
cursor: -webkit-grabbing !important; | |
outline: 3px dashed gold !important; | |
animation: ease-in-out infinite alternate !important; | |
animation-name: livrespairs !important; | |
animation-duration: 2s !important; | |
filter: drop-shadow(0 -6mm 4mm rgb(210, 0, 160)) !important; | |
} | |
[href*="previous"]:after, | |
[rel="previous"]:after, | |
[href*="prev"]:after, | |
[rel="prev"]:after, | |
[class="prev"]:after, | |
[class="previous"]:after, | |
button[aria-label="Prev"]:after, | |
button[aria-label="Previous"]:after { | |
content: '⎌' !important; | |
display: inline-block !important; | |
position: absolute !important; | |
left: 1vw !important; | |
top: 0vw !important; | |
line-height: 0 !important; | |
z-index: -1 !important; | |
color: rgba(0, 0, 0, 0.2) !important; | |
font-size: 12vw !important; | |
text-shadow: 0 0 0.1rem rgba(200, 20, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1) !important; | |
} | |
[href*="previous"]:hover:after, | |
[rel="previous"]:hover:after, | |
[href*="prev"]:hover:after, | |
[rel="prev"]:hover:after, | |
[class="prev"]:hover:after, | |
[class="previous"]:hover:after, | |
button[aria-label="Prev"]:hover:after, | |
button[aria-label="Previous"]:hover:after { | |
color: rgba(255, 255, 255, 0.5) !important; | |
text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1) !important; | |
animation: ease-in-out infinite alternate !important; | |
animation-name: hoverbit2 !important; | |
animation-duration: 2s !important; | |
} | |
/* EOF */ | |
/* ## utils */ | |
@-webkit-keyframes fadeto { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
/* EOF */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[data-id*="19"] { order: 1; } | |
[data-id*="28"] { order: 2; } | |
[data-id*="37"] { order: 3; } | |
[data-id*="46"] { order: 4; } | |
[data-id*="55"] { order: 5; } | |
[data-id*="64"] { order: 6; } | |
[data-id*="73"] { order: 7; } | |
[data-id*="82"] { order: 8; } | |
[data-id*="91"] { order: 9; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[data-id*="71"] { order: 1; } | |
[data-id*="82"] { order: 2; } | |
[data-id*="81"] { order: 3; } | |
[data-id*="82"] { order: 4; } | |
[data-id*="84"] { order: 5; } | |
[data-id*="59"] { order: 6; } | |
[data-id*="04"] { order: 7; } | |
[data-id*="50"] { order: 8; } | |
[data-id*="00"] { order: 9; } | |
/* @description generated using some scripting and Mersenne Twister 19937 from random-js. */ | |
[data-id*="56477"] { order: 1; } | |
[data-id*="92258"] { order: 2; } | |
[data-id*="99116"] { order: 3; } | |
[data-id*="6724"] { order: 4; } | |
[data-id*="9692"] { order: 5; } | |
[data-id*="9316"] { order: 6; } | |
[data-id*="44875"] { order: 7; } | |
[data-id*="7015"] { order: 8; } | |
[data-id*="99873"] { order: 9; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @description i don't need to see my display name on my own internal | |
* blog admin posts page. i know what page i'm on. it's unnecessary redundance. | |
*/ | |
a[data-login-wall-blog-name="holoentropic"] { | |
display: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @description improves usability of the "activity" dropdow menu for tumblr dot com. | |
* | |
* 1. removes display name information of persons (reason: don't show too much | |
* all the time. we'll get the rest of the info. on the "all activity" page.) | |
* 2. makes image under view appear like a repeated background image. this should | |
* improve recognizability, because currently the image-as-icon is so small i | |
* can hardly recognize it. it's confusing, so i've increased its size and repeated | |
* it. | |
* 3. added a label on hover for the menu item. | |
*/ | |
[aria-label="Activity"]:hover:after { | |
content: '📌'; | |
display: block; | |
position: absolute; | |
left: -4vw; | |
bottom: -2vw; | |
height: 2vw; | |
width: 2vw; | |
} | |
[aria-label="Activity"]:hover:before { | |
content: attr(aria-label); | |
display: block; | |
position: absolute; | |
left: -2vw; | |
bottom: -2vw; | |
height: 2vw; | |
width: 2vw; | |
background: rgba(0, 0, 0, 0.5); | |
font-variant: small-caps; | |
text-transform: lowercase; | |
} | |
[role="tabpanel"] [role="link"]:before { | |
content: '📌'; | |
display: block; | |
position: absolute; | |
right: 1vw; | |
bottom: 2vw; | |
height: 2vw; | |
width: 2vw; | |
z-index: 9001; | |
transform: scale(3); | |
} | |
[role="tabpanel"] [role="link"] { | |
display: flex; | |
flex-direction: row; | |
outline: 0px solid gold; | |
width: 27vw; | |
position: absolute; | |
left: -26vw; | |
height: 7vw; | |
top: -3vw; | |
z-index: -1 !important; | |
background-size: auto; | |
background-position: center; | |
background-repeat: space; | |
} | |
/* | |
[role="tabpanel"]:has([href*="holoentropic"]) [role] { | |
outline: 2px solid gold; | |
content: '🔗'; | |
display: block; | |
position: absolute; | |
right: 0; | |
top: 0; | |
height: 2vw; | |
width: 2vw; | |
z-index: 9001; | |
} | |
*/ | |
/* EOF */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
button[aria-label="Next"] > *:after { | |
content: '🌐'; | |
content: '🗺'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @name personal-tumblr-userstyle | |
* @version 0.0.0-novel.0 | |
* @version 0.0.0-novel.0 | |
* @author aha <patagnome@proton.me> | |
* @license wtfpl, version 2 | |
* @description extended homepage edits to subs, tags, trending, "for you" landing pages, and finally for the | |
* dashboard. i think the other landing pages are good for now | |
* @note i don't know your setup so plan the animations accordingly. | |
* @appliesTo https://www.tumblr.com/* | |
*/ | |
div div:has([aria-label="Restore timeline to what it was when you last viewed it"]) { | |
z-index: 10; | |
} | |
[aria-modal="true"] div div div div div { | |
margin: 0 auto; | |
max-width: 75vw !important; | |
} | |
[aria-modal="true"] button *, | |
[aria-modal="true"] [aria-label] * { | |
color: rgba(0, 230, 100, 1) !important; | |
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35)) hue-rotate(100deg); | |
} | |
[aria-modal="true"] button, | |
[aria-modal="true"] [aria-label] { | |
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35)) hue-rotate(100deg); | |
color: white !important; | |
} | |
[aria-modal="true"] div { | |
} | |
[aria-modal="true"] { | |
max-width: 75vw !important; | |
margin: 0 auto !important; | |
width: 100vw; | |
} | |
/* @description remove the ads on personal dashboard pages */ | |
.moatContainer { | |
display: none !important; | |
} | |
/* @description a bit of adjustment */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:last-child, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:last-child, | |
div[data-timeline="/v2/timeline/hubs"] > div:last-child, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:last-child, | |
div[data-timeline="/v2/timeline?which=trending"] > div:last-child, | |
div[data-timeline="/v2/timeline/dashboard"] > div, | |
div[data-timeline="/v2/timeline/dashboard"] > div:last-child { | |
/*margin-top: 5rem !important;*/ | |
margin-right: 2vw !important; | |
/*outline: 3px solid gold;*/ | |
} | |
/* @todo saving changes "next" to the content set here */ | |
div[data-timeline="/v2/timeline/dashboard"] > *:last-child:after { | |
content: '🔮'; | |
display: inline-block; | |
position: absolute; | |
left: 1vw; | |
bottom: 0vw; | |
font-size: 12vw; | |
line-height: 0; | |
z-index: 100; | |
} | |
/* @description tumblr in columnar mode */ | |
[id="base-container"] { | |
width: 100vw !important; | |
} | |
[id="base-container"] div, | |
[id="base-container"] main { | |
max-width: 100vw !important; | |
} | |
[data-testid="scroll-container"] > div > div { | |
flex-direction: row !important; | |
} | |
[data-testid="scroll-container"] header { | |
min-width: 50vw; | |
} | |
[data-timeline*="posts"] > div { | |
display: grid; | |
grid-template-columns: 1fr 1fr 1fr 1fr; | |
grid-gap: 2vw; | |
grid-template-areas: | |
"a a b a" | |
". d d b" | |
"c e e c";” | |
} | |
@-webkit-keyframes livrespairs-0 { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
@-webkit-keyframes livrespairs-1 { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
@-webkit-keyframes livrespairs-2 { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
@-webkit-keyframes livrespairs-3 { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
@-webkit-keyframes livrespairs-4 { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
@-webkit-keyframes livrespairs-5 { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
[data-timeline*="posts"] > *:nth-child(1):hover { | |
grid-area: a; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs-0; | |
animation-duration: 2s; | |
} | |
[data-timeline*="posts"] > *:nth-child(1):hover { | |
grid-area: a; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs-1; | |
animation-duration: 2s; | |
} | |
[data-timeline*="posts"] > *:nth-child(1):hover { | |
grid-area: b; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs-2; | |
animation-duration: 2s; | |
} | |
[data-timeline*="posts"] > *:nth-child(1):hover { | |
grid-area: c; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs-3; | |
animation-duration: 2s; | |
} | |
[data-timeline*="posts"] > *:nth-child(1):hover { | |
grid-area: d; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs-4; | |
animation-duration: 2s; | |
} | |
[data-timeline*="posts"] > *:nth-child(1):hover { | |
grid-area: e; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs-5; | |
animation-duration: 2s; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) { | |
width: 100%; | |
position: absolute; | |
left: 6.5vw !important; | |
height: 100% !important; | |
display: flex; | |
flex-direction: row; | |
flex-wrap: inherit; | |
gap: 4vw; | |
justify-content: space-between; | |
align-items: stretch; | |
align-content: stretch; | |
} | |
/* @description constrain each post */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div { | |
width: calc(50% - 20px) !important; | |
padding: 10px !important; | |
} | |
/* @description sets 'em to a circle with visible overflow to see the content */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) *, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) *, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) *, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) *, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) *, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) * { | |
border-top-right-radius: 1000vw !important; | |
border-top-left-radius: 1000vw !important; | |
overflow: visible !important; | |
z-index: 1 !important; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) p:hover, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) p:hover, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) p:hover, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) p:hover, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) p:hover, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) p:hover { | |
z-index: 100000 !important; | |
position: relative !important; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) [aria-label="Image"], | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) [aria-label="Image"], | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) [aria-label="Image"], | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) [aria-label="Image"], | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) [aria-label="Image"], | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) [aria-label="Image"] { | |
/* | |
border-top-right-radius: 0 !important; | |
border-top-left-radius: 0 !important; | |
z-index: -1; | |
*/ | |
margin-top: -5.375vw; | |
animation: ease-in; | |
animation-name: fadein; | |
animation-duration: 2s; | |
} | |
/* | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div * | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div *, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div *, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div *, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div *, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div * { | |
border-bottom: 10vh groove rgba(40, 20, 180, 0.5) !important; | |
opacity: 1 !important; | |
animation: ease-in-out infinite alternate !important; | |
animation-name: revhoverbit !important; | |
animation-duration: 2s !important; | |
z-index: 9999 !important; | |
*/ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:after, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:after { | |
/*border-bottom: 10vh groove rgba(40, 20, 180, 0.5) !important;*/ | |
opacity: 1 !important; | |
animation: ease-in-out infinite alternate !important; | |
animation-name: revhoverbit !important; | |
animation-duration: 2s !important; | |
z-index: 9999 !important; | |
width: 100%; | |
} | |
/* @description dungeon mode. */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div { | |
/* only animate the first few */ | |
} | |
/** | |
* @description fade animation setup. uncomment below. | |
*/ | |
/* | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(2), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(2), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(2), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(2), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(2), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(2) { | |
animation: ease-in-out infinite alternate; | |
animation-name: fade; | |
animation-duration: 12s; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(1), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(1), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(1), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(1), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(1), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(1) { | |
animation: ease-in-out infinite alternate; | |
animation-name: fade; | |
animation-duration: 12s; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(3), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(3), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(3), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(3), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(3), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(3) { | |
animation: ease-in-out infinite alternate; | |
animation-name: fade; | |
animation-duration: 12s; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(4), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(4), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(4), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(4), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(4), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(4) { | |
animation: ease-in-out infinite alternate; | |
animation-name: fade; | |
animation-duration: 12s; | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:nth-child(5), | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:nth-child(5), | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:nth-child(5), | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:nth-child(5), | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:nth-child(5), | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:nth-child(5) { | |
animation: ease-in-out infinite alternate; | |
animation-name: fade; | |
animation-duration: 12s; | |
} | |
*/ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div > *:last-child > *:after, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div > *:last-child > *:after, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div > *:last-child > *:after, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div > *:last-child > *:after, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div > *:last-child > *:after, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div > *:last-child > *:after { | |
display: block; | |
content: '⏣ \ | |
⎔ \ | |
⌬ \ | |
⏣ \ | |
⎔ \ | |
⌬ \ | |
⏣ \ | |
⎔ \ | |
⌬ \ | |
⏣ \ | |
⎔ \ | |
⌬ \ | |
⏣ \ | |
⎔ \ | |
⌬'; | |
width: 10vw; | |
height: 10vw; | |
position: absolute; | |
left: 0; | |
bottom: -20vh; | |
z-index: 9999 !important; | |
color: rgba(250, 200, 250, 0.15); | |
} | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div > *:last-child:hover > *:after, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div > *:last-child:hover > *:after, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div > *:last-child:hover > *:after, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div > *:last-child:hover > *:after, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div > *:last-child:hover > *:after, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div > *:last-child:hover > *:after { | |
color: rgba(250, 200, 250, 0.75); | |
} | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div { | |
background: linear-gradient(135deg, #171717 25%, transparent 25%) -62px 0/ 124px 124px, linear-gradient(225deg, rgba(23,23,23,0.5) 25%, transparent 25%) -62px 0/ 124px 124px, linear-gradient(315deg, #171717 25%, transparent 25%) 0 0/ 124px 124px, linear-gradient(45deg, rgba(23,23,23,0.5) 25%, #030303 25%) 0 0/ 124px 124px; | |
background-color: #030303; | |
} | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div { | |
position: relative; | |
} | |
/* @todo */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) *:hover *:after, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) *:hover *:after, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) *:hover *:after, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) *:hover *:after, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) *:hover *:after, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) *:hover *:after { | |
opacity: 1; | |
} | |
/* @description removes header bg for each poster */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) header, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) header, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) header, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) header, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) header, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) header { | |
background: none !important; | |
} | |
/* @description door animation */ | |
div[data-timeline="/v2/timeline?which=blog_subscriptions"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/tabs/for_you?notes_info=true&reblog_info=true"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/timeline/hubs"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/blog/holoentropic/posts"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/timeline?which=trending"] > div:nth-child(2) > div:hover, | |
div[data-timeline="/v2/timeline/dashboard"] > div:nth-child(2) > div:hover { | |
animation: ease-in-out infinite alternate; | |
animation-name: hoverbit; | |
animation-duration: 2s; | |
z-index: 9999 !important; | |
} | |
/* @description move the generic interface elements around for less doomfalling */ | |
button[aria-label="Next"] { | |
position: absolute !important; | |
z-index: 9999 !important; | |
right: 1vw !important; | |
top: 5vw !important; | |
} | |
button[aria-label="Next"]:hover { | |
filter: invert(100%) !important; | |
} | |
button[aria-label="Next"] > *, | |
button[aria-label="Next"] > * { | |
cursor: help; /* fallback if grab cursor is unsupported */ | |
cursor: help; | |
cursor: -moz-help; | |
cursor: -webkit-help; | |
} | |
button[aria-label="Next"] > *:after { | |
content: '🔮'; | |
display: inline-block; | |
position: absolute; | |
left: 1vw; | |
top: 0vw; | |
font-size: 12vw; | |
line-height: 0; | |
z-index: -1; | |
color: rgba(0, 0, 0, 1); | |
animation: ease-in-out; | |
animation-name: fade; | |
animation-duration: 2s; | |
cursor: move; /* fallback if grab cursor is unsupported */ | |
cursor: grab; | |
cursor: -moz-grab; | |
cursor: -webkit-grab; | |
} | |
button[aria-label="Next"] > *:active:after { | |
cursor: grabbing; | |
cursor: -moz-grabbing; | |
cursor: -webkit-grabbing; | |
outline: 3px dashed gold !important; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
filter: drop-shadow(0 0 0.75rem crimson); | |
/*mix-blend-mode: luminosity;*/ | |
} | |
button[aria-label="Next"]:after { | |
content: '⎘'; | |
display: inline-block; | |
position: absolute; | |
left: 1vw; | |
top: 0vw; | |
line-height: 0; | |
z-index: -1; | |
color: rgba(0, 0, 0, 0.2); | |
font-size: 12vw; | |
text-shadow: 0 0 0.1rem rgba(20, 200, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1); | |
} | |
button[aria-label="Next"]:hover:after { | |
color: rgba(255, 255, 255, 1); | |
text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1); | |
animation: ease-in-out infinite alternate; | |
animation-name: hoverbit2; | |
animation-duration: 2s; | |
} | |
button[aria-label="Prev"], | |
button[aria-label="Previous"] { | |
position: absolute !important; | |
z-index: 9999 !important; | |
left: 1vw !important; | |
top: 5vw !important; | |
} | |
button[aria-label="Prev"]:hover, | |
button[aria-label="Previous"]:hover { | |
filter: invert(100%) !important; | |
} | |
button[aria-label="Previous"] > *, | |
button[aria-label="Previous"] > * { | |
cursor: help; /* fallback if grab cursor is unsupported */ | |
cursor: help; | |
cursor: -moz-help; | |
cursor: -webkit-help; | |
} | |
/* @description previous door */ | |
button[aria-label="Previous"] > *:after { | |
content: '🚪'; | |
display: inline-block; | |
position: absolute; | |
left: 1vw; | |
top: 0vw; | |
line-height: 0; | |
z-index: -1; | |
color: rgba(0, 0, 0, 1); | |
font-size: 12vw; | |
animation: ease-in-out; | |
animation-name: fade; | |
animation-duration: 2s; | |
cursor: move; /* fallback if grab cursor is unsupported */ | |
cursor: grab; | |
cursor: -moz-grab; | |
cursor: -webkit-grab; | |
} | |
button[aria-label="Previous"] > *:active:after { | |
cursor: grabbing; | |
cursor: -moz-grabbing; | |
cursor: -webkit-grabbing; | |
outline: 3px dashed gold !important; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
filter: drop-shadow(0 -6mm 4mm rgb(210, 0, 160)); | |
} | |
button[aria-label="Prev"]:after, | |
button[aria-label="Previous"]:after { | |
content: '⎌'; | |
display: inline-block; | |
position: absolute; | |
left: 1vw; | |
top: 0vw; | |
line-height: 0; | |
z-index: -1; | |
color: rgba(0, 0, 0, 0.2); | |
font-size: 12vw; | |
text-shadow: 0 0 0.1rem rgba(200, 20, 255, 0.75), 0 0 0.1rem rgba(255, 255, 255, 1); | |
} | |
button[aria-label="Prev"]:hover:after, | |
button[aria-label="Previous"]:hover:after { | |
color: rgba(255, 255, 255, 0.5); | |
text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1); | |
animation: ease-in-out infinite alternate; | |
animation-name: hoverbit2; | |
animation-duration: 2s; | |
} | |
/* @description intent-revealing eventual interactivity */ | |
article > header + div > div > div > span > div > div > * { | |
opacity: 0.5 !important; | |
overflow: visible !important; | |
} | |
article > header + div > div > div > span > div > div *:focus, | |
article > header + div > div > div > span > div > div *:active, | |
article > header + div > div > div > span > div > div > *:hover { | |
opacity: 1 !important; | |
/*cursor: url(https://black-mode.surge.sh/hiking_4899543.png) auto auto !important;*/ | |
cursor: pointer !important; | |
overflow: visible !important; | |
} | |
/* @todo find element with overflow of the containing post and | |
* set to visible since the flashlight appears outside its box model | |
* @description added a flashlight graphic on hover of a post */ | |
article > header + div > div > div > span > div > div > *:hover:after { | |
background-image: url(https://black-mode.surge.sh/flashlight.png) !important; | |
background-color: transparent !important; | |
background-size: contain; | |
background-repeat: no-repeat; | |
display: block; | |
content: ' '; | |
width: 10vw; | |
height: 10vw; | |
position: absolute; | |
filter: invert(100%); | |
right: -2vw; | |
margin-top: -3vw; | |
opacity: 0.7; | |
z-index: 9999 !important; | |
overflow: visible !important; | |
animation: ease-in-out infinite alternate; | |
animation-name: hoverbit; | |
animation-duration: 2s; | |
} | |
/* @description note count fixes */ | |
span[data-testid="noteCountTotal"] { | |
width: 7.5vw; | |
position: absolute; | |
left: -3.5vw; | |
z-index: 100000 !important; | |
background: rgba(255,255,255,0.5); | |
-webkit-backdrop-filter: blur(1px); | |
backdrop-filter: blur(1px); | |
filter: blur(1px); | |
border: 1px solid rgba(255,255,255,0.25); | |
} | |
/* @todo */ | |
[data-testid="noteCountTotal"] *:hover *:after { | |
opacity: 1; | |
z-index: 100000 !important; | |
} | |
/* @description note count styles */ | |
span[data-testid="noteCountTotal"]:hover { | |
color: #1F41DD; | |
outline: 3px dotted rgba(0, 0, 0, 0.25); | |
animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; | |
-webkit-backdrop-filter: blur(0); | |
backdrop-filter: blur(0); | |
filter: blur(0); | |
} | |
span[data-testid="noteCountTotal"] { | |
color: rgba(0, 0, 0, 0.25); | |
display: block; | |
background-image: repeating-conic-gradient(#333 0% 25%, #111 0% 50%); | |
background-position: 0 0, 5px 10vw; | |
background-size: 118px 118px; | |
background-color: #111; | |
border-left: 3px dotted rgba(0, 0, 0, 0.25); | |
padding: 1rem; | |
border-bottom: 3px double rgba(0, 0, 0, 0.25); | |
outline: 3px dotted rgba(0, 0, 0, 1); | |
} | |
span[data-testid="noteCountTotal"]:before { | |
content: ' '; | |
width: 2vw; | |
height: 2vw; | |
display: inline-block; | |
position: absolute; | |
background-image: url(https://black-mode.surge.sh/OFF2-F.GIF); | |
background-repeat: no-repeat; | |
background-size: contain; | |
background-blend-mode: color-dodge !important; | |
mix-blend-mode: luminosity !important; | |
background-position: 0 0; | |
left: -1.05vw; | |
z-index: -1; | |
transform: scale(2); | |
opacity: 0.2; | |
animation: ease-out infinite alternate; | |
animation-name: fade; | |
animation-duration: 6s; | |
transform: scale(0.85); | |
} | |
span[data-testid="noteCountTotal"]:after { | |
content: ' '; | |
width: 2vw; | |
height: 2vw; | |
display: inline-block; | |
position: absolute; | |
background-image: url(https://black-mode.surge.sh/NEON-HLP.GIF); | |
background-repeat: no-repeat; | |
background-size: contain; | |
background-blend-mode: color-dodge !important; | |
mix-blend-mode: luminosity !important; | |
background-position: 0 0; | |
right: -1vw; | |
bottom: 0; | |
z-index: -1; | |
transform: scale(2); | |
opacity: 0.2; | |
animation: ease-in infinite alternate; | |
animation-name: fade; | |
animation-duration: 10s; | |
transform: scale(0.75); | |
} | |
@keyframes glitch-color { | |
0% { | |
transform: translate(0); | |
} | |
20% { | |
transform: translate(-2px, 2px); | |
} | |
40% { | |
transform: translate(-2px, -2px); | |
} | |
60% { | |
transform: translate(2px, 2px); | |
} | |
80% { | |
transform: translate(2px, -2px); | |
} | |
to { | |
transform: translate(0); | |
} | |
} | |
/* @description ??? */ | |
[role="progressbar"] { | |
display: none !important; | |
} | |
/* @description fixing the position of the aside "radar" and admin tasks for eventual | |
* interactivity (hovering raises z-index to enable interaction). | |
*/ | |
aside:has([aria-label="Check out these blogs"]) { | |
position: fixed; | |
height: 50%; | |
overflow-y: scroll; | |
outline: 1px solid golid !important; | |
width: 35vw !important; | |
right: 0 !important; | |
top: 1vw !important; | |
} | |
aside:hover { | |
z-index: 10051 !important; | |
} | |
aside article { | |
left: 10% !important; | |
} | |
aside aside { | |
position: fixed; | |
background-color: rgba(0, 0, 0, 0.4); | |
top: 55%; | |
height: 45%; | |
width: 100%; | |
overflow-y: scroll; | |
} | |
/* ## utils */ | |
@-webkit-keyframes revhoverbit { | |
0% { | |
transform: translate3d(0px, 0px, 0px); | |
} | |
100% { | |
transform: translate3d(0px, 5px, 0px); | |
} | |
} | |
@-webkit-keyframes hoverbit { | |
0% { | |
transform: translateY(0); | |
} | |
100% { | |
transform: translateY(-5%); | |
} | |
} | |
@-webkit-keyframes hoverbit2 { | |
0% { | |
top: 0vw; | |
} | |
100% { | |
top: -1vw; | |
} | |
} | |
@-webkit-keyframes fade { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@-webkit-keyframes fadein { | |
0% { | |
opacity: 0.8; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@-webkit-keyframes livrespairs { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 0.85; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} | |
@-webkit-keyframes upup { | |
0% { | |
/* | |
opacity: 0.85; | |
transform: translate3d(15px, 0, 0);*/ | |
filter: invert(0); | |
} | |
100% { | |
filter: invert(100%); | |
/* | |
opacity: 1; | |
transform: translate3d(0, 5px, 5px);*/ | |
} | |
} | |
@-webkit-keyframes rotate { | |
0% { | |
opacity: 0.85; | |
transform: translate3d(15px, 0, 0); | |
} | |
100% { | |
opacity: 1; | |
transform: translate3d(0, 5px, 5px); | |
} | |
} | |
/* @description hiding and hacking up the "check out these blogs" callout so that it only | |
* shows three without the arrows. i'll find a solution later. */ | |
[data-timeline] [style*="opacity: 0."] { | |
display: none !important; | |
} | |
[aria-label="Scroll carousel left"], | |
[aria-label="Scroll carousel right"] { | |
display: none !important; | |
} | |
[style="opacity: 1;"] * { | |
background: none !important; | |
} | |
[style="opacity: 1;"] > * > * { | |
background: none !important; | |
} | |
[style="opacity: 1;"] > * { | |
background: none !important; | |
margin-right: 4vw !important; | |
} | |
/* | |
[style="opacity: 1;"] { | |
float: left; | |
clear: left; | |
} | |
[style="opacity: 1;"]:nth-child(1) > * { | |
position: absolute; | |
left: 0; | |
margin-top: 4rem; | |
}*/ | |
[data-testid="tag-link"] { | |
} | |
[href="/blog/holoentropic/activity"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/blog/holoentropic/activity"]:before { | |
content: '✖'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/blog/holoentropic/drafts"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/blog/holoentropic/drafts"]:before { | |
content: '📒'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/blog/holoentropic/queue"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/blog/holoentropic/queue"]:before { | |
content: '⏲'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/blog/holoentropic/blaze"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/blog/holoentropic/blaze"]:before { | |
content: '🎟'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/blog/holoentropic/gifts"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/blog/holoentropic/gifts"]:before { | |
content: '📦'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/mega-editor/published/holoentropic"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/mega-editor/published/holoentropic"]:before { | |
content: '✍🏽'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/settings/blog/holoentropic"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/settings/blog/holoentropic"]:before { | |
content: '🏭'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/blog/holoentropic"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/blog/holoentropic"]:before { | |
content: '⎈'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
[href="/blog/holoentropic/followers"] { | |
overflow: visible; | |
padding-left: 2vw; | |
} | |
[href="/blog/holoentropic/followers"]:before { | |
content: '👾'; | |
position: absolute; | |
margin-left: -2vw; | |
} | |
/* @description default bg */ | |
body[class*="palette--"]:not([class*="cybernetic"]):after { | |
content: ' '; | |
width: calc(100% * 4); | |
height: calc(100% * 4); | |
display: block; | |
background-image: url(https://black-mode.surge.sh/FNRQmaOXIAcvhVy.jpg); | |
background-repeat: no-repeat; | |
background-size: cover; | |
z-index: -1; | |
position: absolute; | |
top: -50%; | |
} | |
/* @description other bgs */ | |
body[class*="palette--lowContrastClassic"]:after { | |
background-image: url(https://black-mode.surge.sh/trainz.jpg); | |
background-repeat: repeat; | |
background-size: cover !important; | |
} | |
body[class*="palette--ghost"]:after { | |
background-image: none !important; | |
} | |
body[class*="palette--ghost"] { | |
background-image: url(https://black-mode.surge.sh/FXriMcyVUAAnrsu.png); | |
background-repeat: repeat !important; | |
background-size: cover !important; | |
} | |
body[class*="palette--dark"]:after { | |
background-image: url(https://black-mode.surge.sh/FXriMcyVUAAnrsu.png); | |
background-repeat: no-repeat; | |
background-size: contain !important; | |
} | |
body[class*="palette--cement"] { | |
background-image: none !important; | |
} | |
body[class*="palette--canary"]:after { | |
background-image: none !important; | |
} | |
body[class*="palette--cement"]:after { | |
background-image: url(https://black-mode.surge.sh/Fb6hNw7WAAYp4h6.jpg) !important; | |
background-size: cover !important; | |
background-repeat: no-repeat; | |
width: calc(100% * 4); | |
height: calc(100% * 4); | |
} | |
body[class*="palette--canary"]:after { | |
background-image: url(https://black-mode.surge.sh/Fb6hNw7WAAYp4h6.jpg) !important; | |
background-size: contain !important; | |
background-repeat: repeat; | |
width: calc(100% * 4); | |
height: calc(100% * 4); | |
} | |
body[class*="palette--true"]:after, | |
body[class*="palette--true"]:after { | |
background-image: none !important; | |
} | |
body[class*="palette--true"], | |
body[class*="palette--true"] { | |
background-image: url(https://black-mode.surge.sh/abalakin_-_return.jpg); | |
background-repeat: no-repeat !important; | |
background-size: 450% !important; | |
} | |
body[class*="palette--snow"]:after, | |
body[class*="palette--snow"]:after { | |
background-image: none !important; | |
} | |
body[class*="palette--snow"], | |
body[class*="palette--snow"] { | |
background-image: url(https://black-mode.surge.sh/Untitled.png); | |
background-size: cover !important; | |
} | |
body[class*="palette--cybernetic"] { | |
overflow: visible; | |
} | |
html { | |
background-color: transparent !important; | |
} | |
/* | |
* @description background-blend-mode means nothing here. | |
*/ | |
*:has([class*="palette--cybernetic"]), | |
body:has([class*="palette--cybernetic"]) { | |
background-color: transparent !important; | |
} | |
body[class*="palette--cybernetic"] * { | |
background-color: transparent !important; | |
} | |
body[class*="palette--cybernetic"]:before { | |
background-color: transparent !important; | |
/*background-image: url(https://black-mode.surge.sh/fc5f1febeb2f5f83.png) !important;*/ | |
background-image: url(https://black-mode.surge.sh/tumblr_1b8cd67f6a9542cb27360bab5a34318e_4bc87e44_1280.jpg) !important; | |
background-repeat: no-repeat; | |
background-size: contain !important; | |
/*mix-blend-mode: pulse-lighter;*/ | |
/* light */ | |
/* | |
mix-blend-mode: lighten; | |
mix-blend-mode: exclusion; | |
mix-blend-mode: pulse-lighter; | |
*/ | |
/* | |
mix-blend-mode: difference; | |
*/ | |
display: block; | |
content: ' '; | |
background-size: 100% !important; | |
width: 100%; | |
height: 100%; | |
bottom: 0; | |
position: fixed; | |
} | |
body[class*="palette--vampire"]:after { | |
background-image: url(https://black-mode.surge.sh/FN0uhzeUcAEE5eL.jpg); | |
background-image: url(https://black-mode.surge.sh/97b6c51ddf48c0d0.png) !important; | |
background-repeat: repeat; | |
background-size: contain !important; | |
width: calc(100% * 3.25); | |
height: calc(100% * 3.25); | |
} | |
html, | |
body[class*="palette--vampire"] { | |
} | |
/* @description weird stuff happening */ | |
* a:hover:before, | |
* a:visited:before, | |
* a:active:before, | |
* a:focus:before { | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
content: ' '; | |
outline: 3px dashed gold; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
* a:hover:after, | |
* a:visited:after, | |
* a:active:after, | |
* a:focus:after { | |
outline: 25px dotted rgba(200, 20, 140, 0.25) !important; | |
} | |
/* @description clicking and dragging off an element for no reason is good and | |
* fine. now you've got a floating orb matrix | |
**/ | |
* a:hover:after, | |
* a:visited:after, | |
* a:active:after, | |
* a:focus:after { | |
content: ' '; | |
z-index: 10000 !important; | |
display: inline-block; | |
position: absolute; | |
width: 5vw; | |
height: 5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: rotate; | |
animation-duration: 2s; | |
} | |
::selection { | |
color: rgba(255, 255, 255, 1.0); | |
background-color: rgba(0, 150, 255, 1); | |
} | |
/* @description fixing the adspace visual layout */ | |
div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div { | |
display: flex; | |
flex-direction: column; | |
text-align: center; | |
} | |
div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div > * { | |
width: 100% !important; | |
} | |
div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div > div { | |
/*margin-left: 2.5vw;*/ | |
} | |
div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div [style="opacity: 1;"] > div { | |
width: 100%; | |
} | |
div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] > div > div [style="opacity: 1;"] { | |
/*outline: 2px solid gold;*/ | |
/*margin-right: 2vw;*/ | |
} | |
div[data-timeline="/v2/timeline/dashboard"] div [tabindex="-1"] [tabindex="-1"] div [style="opacity: 1;"] [style*="blog-title"] * { | |
/*outline: 10px solid pink;*/ | |
} | |
/* @description different doors */ | |
[data-id*="19"] { background: repeating-linear-gradient(transparent, transparent 8px, #957541 8px, #957541 12px, transparent 12px, transparent 16px, #957541 12px, #957541 32px, transparent 32px, transparent 36px, #957541 36px, #957541 40px, transparent 40px, transparent 64px), repeating-linear-gradient(90deg, transparent, transparent 8px, #957541 8px, #957541 12px, transparent 12px, transparent 16px, #957541 12px, #957541 32px, transparent 32px, transparent 36px, #957541 36px, #957541 40px, transparent 40px, transparent 64px), #1e2c12 !important; | |
background-blend-mode: multiply !important; | |
background-color: #1e2c12 !important; } | |
[data-id*="28"] { background-image: radial-gradient(circle at center center, #f5bf13, #5d5a7e), repeating-radial-gradient(circle at center center, #f5bf13, #f5bf13, 32px, transparent 64px, transparent 32px) !important;; | |
background-blend-mode: multiply !important;; | |
background-color: #5d5a7e !important; } | |
[data-id*="28"] { background: radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 0% 0% / 74px 74px, radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 37px 37px / 74px 74px, linear-gradient(#ed8a12 8.5px, transparent 8.5px) 0px -4.25px / 37px 37px, linear-gradient(90deg, #ed8a12 8.5px, #fecb2f 8.5px) -4.25px 0px / 37px 37px #fecb2f; | |
background-color: #fecb2f; } | |
[data-id*="37"] { background-image: repeating-conic-gradient(from 30deg, #745686 0% 60deg, #0829c2 0% 120deg) !important; | |
background-size: 32px 55px !important; | |
background-color: #0829c2 !important; } | |
[data-id*="46"] { background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #0956ed 32px), repeating-linear-gradient(#466c63, #466c63) !important; | |
background-color: #0956ed !important; } | |
[data-id*="55"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #9f93e3 32px, #9f93e3 64px) !important; | |
background-color: #a359a1 !important; } | |
[data-id*="64"] { background-image: linear-gradient(#e2f1b0 2px, transparent 2px), linear-gradient(to right, #e2f1b0 2px, transparent 2px) !important; | |
background-size: 32px 32px !important; | |
background-color: #672119 !important; } | |
[data-id*="73"] { background-image: linear-gradient(30deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(150deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(30deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(150deg, #ea7db9 12%, transparent 12.5%, transparent 87%, #ea7db9 87.5%, #ea7db9), linear-gradient(60deg, rgba(234,125,185,0.5) 25%, transparent 25.5%, transparent 75%, rgba(234,125,185,0.5) 75%, rgba(234,125,185,0.5)), linear-gradient(60deg, rgba(234,125,185,0.5) 25%, transparent 25.5%, transparent 75%, rgba(234,125,185,0.5) 75%, rgba(234,125,185,0.5)) !important; | |
background-size: 64px 112px !important; | |
background-position: 0 0, 0 0, 32px 56px, 32px 56px, 0 0, 32px 56px !important; | |
background-color: #1c0b9c !important; } | |
[data-id*="82"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #9f93e3 32px, #9f93e3 64px) !important; | |
background-color: #a359a1 !important; } | |
[data-id*="91"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #9f93e3 32px, #9f93e3 64px) !important; | |
background-color: #a359a1 !important; } | |
[data-id*="71"] { background: repeating-radial-gradient(circle, transparent, transparent 11.2px, #575b9c 11.2px, #575b9c 14.4px), repeating-radial-gradient(circle, transparent, transparent 11.2px, #032ec3 11.2px, #032ec3 14.4px), #7f9761 !important; | |
background-size: 64px 64px !important; | |
background-position: 0 0, 32px 32px, 64px 32px !important; | |
background-color: #7f9761 !important; } | |
[data-id*="82"] { background: repeating-radial-gradient(circle, transparent, transparent 11.2px, #575b9c 11.2px, #575b9c 14.4px), repeating-radial-gradient(circle, transparent, transparent 11.2px, #032ec3 11.2px, #032ec3 14.4px), #7f9761 !important; | |
background-size: 64px 64px !important; | |
background-position: 0 0, 32px 32px, 64px 32px !important; | |
background-color: #7f9761 !important; } | |
/* @description ORANGE */ | |
[data-id*="564"], | |
[data-id*="922"], | |
[data-id*="991"], | |
[data-id*="672"], | |
[data-id*="969"], | |
[data-id*="931"], | |
[data-id*="448"], | |
[data-id*="701"], | |
[data-id*="991"], | |
[data-id*="992"], | |
[data-id*="993"], | |
[data-id*="994"], | |
[data-id*="995"], | |
[data-id*="996"], | |
[data-id*="997"], | |
[data-id*="998"] { background: radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 0% 0% / 74px 74px, radial-gradient(circle, transparent 20%, #fecb2f 20%, #fecb2f 80%, transparent 80%, transparent) 37px 37px / 74px 74px, linear-gradient(#ed8a12 8.5px, transparent 8.5px) 0px -4.25px / 37px 37px, linear-gradient(90deg, #ed8a12 8.5px, #fecb2f 8.5px) -4.25px 0px / 37px 37px #fecb2f !important; | |
background-color: #fecb2f !important; } | |
/* @description moar reset */ | |
/* @todo obviously */ | |
div[style*="title"] * { | |
background-color: none !important; | |
} | |
div[style*="title"] > * > * { | |
background-color: none !important; | |
} | |
div[style*="title"] > * > * > * { | |
background-color: none !important; | |
} | |
div[style*="background"] * { | |
background-color: none !important; | |
} | |
div[style*="background"] > * > * { | |
background-color: none !important; | |
} | |
div[style*="background"] > * > * > * { | |
background-color: none !important; | |
} | |
* > * * { | |
/*background-color: none !important; */ | |
} | |
[class*="chiclet-wrapper"] { | |
padding-bottom: 2vw !important; | |
} | |
[data-testid="tag-link"] > * { | |
padding-bottom: 4vw !important; | |
margin-bottom: 2vw !important; | |
} | |
[data-testid="tag-link"]:before, | |
[data-testid="tag-link"]:after { | |
/* | |
border-top-right-radius: 1000vw !important; | |
border-top-left-radius: 1000vw !important; | |
border-bottom-right-radius: 1000vw !important; | |
border-bottom-left-radius: 1000vw !important; | |
*/ | |
} | |
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div div { | |
/*display: flex;*/ | |
} | |
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:after, | |
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:before, | |
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div * { | |
/*outline: 3px solid gold;*/ | |
/*opacity: 0.8;*/ | |
} | |
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:after, | |
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div *:before, | |
[data-timeline="/v2/timeline/dashboard"] div:not([data-id]) > div div div div div div div * { | |
/*opacity: 1;*/ | |
} | |
/* | |
button figure:before { | |
display: block; | |
width: 100%; | |
height: 3vw; | |
position: absolute; | |
z-index: 999; | |
content: ' '; | |
outline: 1px solid gold; | |
} | |
button figure:before { | |
outline: 1px solid green !important; | |
} | |
button figure:before { | |
outline: 1px solid red !important; | |
}*/ | |
figure:active, | |
figure:focus, | |
figure:visited, | |
figure:hover { | |
overflow: hidden !important; | |
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4); | |
} | |
[sizes*="100vw,"] { | |
/*background-color: none !important;*/ | |
} | |
[sizes*="100vw,"]:first-child { | |
} | |
[sizes*="100vw,"]:last-child { | |
} | |
/* @descriptions ads???*/ | |
[style*="blog-title"] { | |
left: 3vw; | |
} | |
[style*="blog-title"] > *:first-child * { | |
background-color: transparent !important; | |
} | |
body { | |
image-rendering: auto !important; | |
} | |
[data-timeline]:not([data-timeline="/v2/timeline?which=crushes"]):not([data-timeline="/v2/timeline?which=popular_reblogs"]):not([data-timeline*="/v2/hubs"]):not([data-timeline="/v2/explore/recommended"]) div div div, | |
[data-timeline]:not([data-timeline="/v2/timeline?which=crushes"]):not([data-timeline="/v2/timeline?which=popular_reblogs"]):not([data-timeline*="/v2/hubs"]):not([data-timeline="/v2/explore/recommended"]) div div div div { | |
border-bottom-right-radius: 1000vw !important; | |
border-bottom-left-radius: 1000vw !important; | |
} | |
/* EOF */ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#base-container > div { | |
background: transparent !important; | |
} | |
/* | |
--underlo: 7px; | |
*/ | |
/** testing iMacros in combination with Stylish */ | |
#base-container>DIV:nth-of-type(2)>DIV:nth-of-type(2)>DIV>MAIN>DIV:nth-of-type(2)>DIV:nth-of-type(2)>DIV:nth-of-type(18)>DIV>DIV>ARTICLE>DIV:nth-of-type(3)>FOOTER>DIV { | |
outline: 10px dashed gold; | |
} | |
[data-timeline*="/v2/timeline/"] > div > div:not([id]) { | |
outline: 3px groove rgba(255, 255, 255, 0.1); | |
box-shadow: 10px 10px 1rem rgba(255, 255, 255, 0.1); | |
min-width: 30vw; | |
} | |
/* | |
article [title="4 notes"]:after { | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
padding-bottom: 1.5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
article [data-testid="noteCountTotal"]:after:after { | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
padding-bottom: 1.5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
article [aria-label="Notes"]:after { | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
padding-bottom: 1.5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
article [data-testid="controlled-popover-wrapper"]:after { | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
padding-bottom: 1.5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
article [aria-label="Post Footer"]:after { | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
padding-bottom: 1.5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
article [role="contentinfo"]:after { | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
padding-bottom: 1.5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
article [role*="Posted by"]:after { | |
content: '⌍'; | |
display: inline-block; | |
position: absolute; | |
width: 2vw; | |
height: 2vw; | |
left: auto; | |
top: auto; | |
padding-bottom: 1.5vw; | |
animation: ease-in-out infinite alternate; | |
animation-name: livrespairs; | |
animation-duration: 2s; | |
} | |
*/ | |
@-webkit-keyframes livrespairs { | |
0% { | |
opacity: 0.35; | |
transform: translate3d(-10px, 0, -5px); | |
} | |
100% { | |
opacity: 1; | |
transform: translate3d(0, -5px, -5px); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
button[aria-label="Prev"] > *:after, | |
button[aria-label="Previous"] > *:after, | |
button[aria-label="Next"] > *:after { | |
outline: 3px solid gold; | |
animation: ease-in-out infinite alternate; | |
animation-name: rev; | |
animation-duration: 4s; | |
} | |
/* ## utils */ | |
@-webkit-keyframes rev { | |
0% { | |
transform: translate3d(0px, 0px, 0px); | |
} | |
100% { | |
transform: translate3d(0px, 2vw, 0px); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
updated --self to raise "next" and "previous" by any [stylesheet], [hyperlink], [type], or [aria] common features. so expect: