Skip to content

Instantly share code, notes, and snippets.

@nerdfiles
Last active August 3, 2023 18:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nerdfiles/c599d28aeda56280669b963c0bb512f8 to your computer and use it in GitHub Desktop.
Save nerdfiles/c599d28aeda56280669b963c0bb512f8 to your computer and use it in GitHub Desktop.
custom stylesheet rules for https://pxlmo.com/ (starting from the library of alexandria stylesheet); for https://mybrowseraddon.com/custom-style-script.html or https://userstyles.org/help/stylish
/**
* @version wtfpl, version 2
* @description everywhere is the Library you go. try other domains if you can.
* @appliesTo URLsOnTheDomain pxlmo.com
*/
html,
h1, h2, h3, h4, h5, h6,
span,
ul, table,
label, input,
:root *:not(a),
button,
svg,
select, option,
code,
div,
ul, nav,
blockquote, q,
textarea,
form,
i, em, strong, b,
section,
section *:not(a),
nav *:not(a),
ul,
dl,
dl dt,
dl dd,
ol li,
ul li,
td,
th,
div[id],
button,
main,
body,
:root,
header,
footer,
aside {
background-color: transparent !important;
color: white !important;
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5) !important;
}
:root input {
color: white;
}
/*
body *:hover + *,
body *:hover * {
background-color: rgba(0, 0, 0, 0.2);
}
*/
/*
*:hover {
background-color: rgba(0, 0, 0, 0.2);
}
*/
body * {
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5) !important;
}
footer {
filter: invert(100%);
}
/* for wikipedia */
#mw-page-base,
#mw-head-base,
[class="noprint"] {
background-image: none !important;
}
/* for sep */
.home,
.home *,
/*html:has([class*="home"]) *,*/
body.body--home,
body.site-wrapper--home,
#container {
background-color: transparent !important;
background: none !important;
border: 0 !important;
}
/* for google. something called [view]... */
[role]:before,
[view]:before,
[jsdata],
[jsmodel],
[view] {
background: none !important;
background-color: transparent !important;
}
svg {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1)) !important;
}
svg:hover {
opacity: 1 !important;
fill: white !important;
}
form > *,
[aria-label] > * {
background-color: rgba(0, 0, 0, 0.25) !important;
}
/* @note ignores gist.github.com through "logged-in env-production page-responsive" */
body:not([class="logged-in env-production page-responsive"]):before {
/*
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-image: url(https://black-mode.surge.sh/tumblr_70e4e45bf2c3c5be4707e0a2889256d6_ec51ccd4_1280.jpg) !important;
*/
background-image: url(https://black-mode.surge.sh/tumblr_1b8cd67f6a9542cb27360bab5a34318e_4bc87e44_1280.jpg) !important;
/*background-image: url(https://black-mode.surge.sh/Fg0dN9uUoAA67aP.jpg) !important;*/
background-repeat: no-repeat !important;
background-size: 100% !important;
/*background-image: url(https://black-mode.surge.sh/Fi69m3gWICI5nsd.png) !important;*/
/*
background-color:#99b9ff;
background-image:
radial-gradient(at 21% 14%, hsla(340,65%,69%,1) 0px, transparent 50%),
radial-gradient(at 81% 64%, hsla(235,70%,64%,1) 0px, transparent 50%),
radial-gradient(at 71% 3%, hsla(247,97%,68%,1) 0px, transparent 50%),
radial-gradient(at 52% 17%, hsla(281,63%,64%,1) 0px, transparent 50%),
radial-gradient(at 75% 51%, hsla(150,77%,65%,1) 0px, transparent 50%),
radial-gradient(at 42% 34%, hsla(68,65%,72%,1) 0px, transparent 50%),
radial-gradient(at 29% 28%, hsla(212,94%,74%,1) 0px, transparent 50%);
*/
/*
background-image: url(https://black-mode.surge.sh/9-green_marble_background_seamless.jpg) !important;
background-repeat: repeat !important;
background-size: 25% !important;*/
width: 100%;
height: 100%;
content: ' ';
display: block;
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
/* hacky */
a {
color: rgba(0, 150, 255, 1) !important;
text-decoration: line-through;
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5) !important;
}
a:visited {
color: rgba(54,67,0, 1) !important;
}
a:active,
a:focus,
button:active,
button:focus,
textarea:active,
textarea:focus,
input:active,
input:focus {
outline: 3px solid rgba(0, 150, 255, 1) !important;
}
html #home-page, body #home-page,
body.page [class*="container"],
[class="container-fluid bg-light"],
body.page .wrapper { background: none !important; background-color: transparent !important; }
/*
img { filter: invert(100%); }
.comment .source-quote,
.comment .p-comment-container { background: none !important; background-color: transparent !important; }
*/
.site-body { background-color: transparent !important; background: none !important; }
div[class="timeline-section-component"] {
}
/* containing list structure */
div[class="timeline-section-component"] > div {
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
/* content list items */
div[class="timeline-section-component"] > div > div {
margin: 0 1vw;
width: 31%;
padding: 0 1vw;
}
div.container-fluid {
}
/* sidebar-component positioning */
div.container-fluid > div.row > div:first-child {
position: absolute !important;
background-color: rgba(0, 0, 0, 0.8) !important;
z-index: 1;
top: 0;
opacity: 0.2;
}
div.container-fluid > div.row > div:first-child:hover {
opacity: 1;
z-index: 9999;
}
/* main content */
div.container-fluid > div.row > div:nth-child(2) {
min-width: 100%;
}
/* notifications positioning */
div.container-fluid > div.row > div:nth-child(3) {
position: absolute !important;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8) !important;
z-index: 0;
opacity: 0.2;
}
/* notifications hover intent */
div.container-fluid > div.row > div:nth-child(3):hover {
opacity: 1;
z-index: 9999;
}
/* why are you using ID selectors? why because [you] find css unimportant does my client have to become less free? */
#bp_container {
background: url(https://black-mode.surge.sh/tumblr_1b8cd67f6a9542cb27360bab5a34318e_4bc87e44_1280.jpg) !important;
}
[aria-labelledby="navbarDropdown"] li:nth-child(6) { display: none; }
[class="sidebar-sticky shadow-sm"] li:nth-child(6) { display: none; }
.discover-daily-trending .bg-stellar,
.discover-grid-card-body .section-icon,
.discover-grid-card-body,
.discover-grid-card-body.dark { background-color: transparent !important; background: transparent !important; }
/* EOF */
/**
* @author aha
* @version wtfpl, version 2
* @description pxlmo dot com hacks for stylish. as a consequence of stylish
* not working in the mastodons (flagship web interfaces for ActivityPubs), i
* tend pathologically to prefer applying
* https://mybrowseraddon.com/custom-style-script.html before trying to apply
* stylish. i don't know why stylish doesn't work on most mastodon interfaces.
* @appliesTo URLsOnTheDomain pxlmo.com
* @fixes #what these edits fix
* 1. the changing size of the bookmark icon upon add registration click
* 2. sets post buttons to equal width and equidistant to each other
* 3. removes text labels to dislodge width difference in total calculation of
* the button's width (removed from document flow)
* 4. added a hover style (purple outline of 2 pixel width)
* 5. removed border from buttons (just in case removing elements from document flow didn't work)
*/
[class="timeline-status-component-content"] + div {
outline: 2px solid rgba(0, 0, 0, 0.2);
}
[class="timeline-status-component-content"] + div:hover {
outline: 2px solid rgba(250, 30, 200, 1);
}
[class="timeline-status-component-content"] + div > div > div {
display: flex;
}
[class="timeline-status-component-content"] + div > div button {
outline: 2px solid rgba(0, 0, 0, 0.2);
outline: none;
border: none;
padding: 0;
margin: 0 !important;
width: 9vh;
}
[class="timeline-status-component-content"] + div > div button span + span,
[class="timeline-status-component-content"] + div > div button i + span {
display: none;
}
[class="timeline-status-component-content"] + div > div button i {
padding: 0 !important;
}
/** EOF */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment