bsky.app css
Posted by Anonymous on Fri 15th Nov 2024 23:44
raw | new post

/* This is some custom CSS for BlueSky that you can easily manipulate.
   It can be added to the page easily with any browser add-on that
   lets you add custom CSS to pages you view. I use a simple one for
   FireFox called "CustomCSS Injector".                             */

/* Set background colour (you could also assign to .r-1xcajam)      */
.r-1p0dtai {
    background-color: #454751;
}
/* Highlight colour (when you drag on text to select it)            */
::selection {
    background-color: #ffedb8;
}

/* This fixes that weird space on the left side of the website.     */
html {
    scrollbar-gutter: stable;
}

/* This fixes the very top panel (with the BlueSky butterfly logo and
   the '#' Feeds link), which gets overlapped by the background color
   for some reason. I add a border bc it looks nicer (when the bg
   isn't white, ergo it doesn't all blend together seamlessly.      */
.r-2llsf > div:nth-child(1) {
    z-index: 2;
    border-bottom: 1px solid #eee;
}
/* This selects the left and right panels at the same time:         */
.r-1rnoaur {
    border-radius: 5px;
    background-color: #fffc!important;
}
/* This one just does the left panel:                               */
.r-c4unlt {
    left: 12px!important;
    padding-bottom: 15px;
}
 /* This is for the 'New Post' button (or rather its container) in
    the left panel.                                                 */
.r-c4unlt > div {
    margin: auto;
    background-color: transparent;
    padding: 15px 0 8px !important;
}
/* For buttons anywhere on the page (I don't like everything being
   so rounded and circular, just a preference)                      */
button {
    border-radius: 3px !important;
}
/* This controls the right-side panel. I move it down a bit to match
   the left panel.                                                  */
.r-1ipicw7 {
    top: 9px;
}
/* --- If you want to un-round PFPs (and borders around embeds) --- */
.r-lchren a > div > .css-175oi2r, /* PFPs in posts */
.r-lchren a > .css-175oi2r,       /* border around embeds */
.r-c4unlt .r-417010 {             /* your PFP in top-left panel */
    border-radius: 3px!important;
}
/* Then this removes PFP circle-outlines (in top-left & profile)    */
.r-c4unlt > a > div > div:nth-child(2),
.r-v53qcl > div > div:nth-child(2) {
    border: none;
}

/* ---- ---- For the main GUI (timeline posts etc.) ---- ----
   These elements are transparent by default, so if you don't set them
   to white, you just see through them to the background color.
   If that's the effect you want, you could just colour the text here
   (`color: (something)`) instead. White timeline is just my
   preference.                                                      */

.r-lchren, /* main post column section */
.r-lchren > div > div > button /* 'Write your reply' panel */ {
    background-color: #fff!important;
}

/* I suspect BlueSky will eventually rework their entire DOM setup
   on desktop at which point all of this will break. Til then!      */

/* I also realize this doesn't affect https://bsky.app/settings
   for some reason - it loads differently. I don't care enough to
   figure that out since you don't look at that page often anyway.  */