pink bsky by DrearyWillow

/* ==UserStyle==
@name           pink bsky - 11/23/2024
@namespace      github.com/openstyles/stylus
@version        2.0.0
@description    bluesky but pink
@author         dreary
==/UserStyle== */

@-moz-document domain("bsky.app"), domain("main.bsky.dev") {

:root {
    /* --theme-purple: #b19cd9;
    --light-purple: #c7b6e6;
    --button-color: #2C2C2C;
    --off-white: #fff4fb; */
    --theme-pink: #e54980; 
    --light-pink: #f891c1;
    --darkish-pink: #5C0048;
    --dark-pink: #24001F;
    --background-color: #0B0C0D;
    /* random experiment, i just saw blue in root variables */
    --rc-focus-color: var(--theme-pink); 
}

/*
https://bsky.app/sys/debug
*/

::selection {
    background-color: rgba(229, 73, 128, 1);
    color: white !important;
}

/* general buttons */
[style*="background-color: rgb(16, 131, 254)"],
[style*="background-color: rgb(52, 150, 254)"],
[style*="background-color: rgb(1, 84, 173)"],
[style*="background-color: rgb(0, 133, 255)"],
[style*="background-color: rgb(1, 64, 132"], /* dm spawning bubble */
button[aria-label*="Load new"] > div { /* new notif/post dot */
    background-color: var(--theme-pink) !important;
}
/* gradient buttons */
button [style*="background-image: linear-gradient"][style*="rgb(90, 113, 250), rgb(0, 133, 255)"] {
  background-image: linear-gradient(var(--theme-pink), var(--theme-pink)) !important;
}

/* icons in pink buttons */
[style*="background-color: rgb(16, 131, 254)"] svg[style*="color: rgb(241, 243, 245)"] > path,
[style*="background-color: rgb(52, 150, 254)"] svg[style*="color: rgb(241, 243, 245)"] > path {
    fill: black !important;
}

/* text/icons in pink buttons */
[style*="background-color: rgb(16, 131, 254)"] [style*="color: rgb(241, 243, 245)"],
[style*="background-color: rgb(52, 150, 254)"] [style*="color: rgb(241, 243, 245)"],
[style*="background-color: rgb(1, 84, 173)"] [style*="color: rgb(241, 243, 245)"],
[style*="background-color: rgb(0, 133, 255)"] [style*="color: rgb(255, 255, 255)"],
[style*="background-color: rgb(1, 64, 132"] [style*="color: rgb(241, 243, 245)"], /* dm spawning text */
button [style*="background-image: linear-gradient"][style*="rgb(90, 113, 250), rgb(0, 133, 255)"] [style*='color: rgb(255, 255, 255)'],
button [style*="background-image: linear-gradient"][style*="rgb(90, 113, 250), rgb(0, 133, 255)"] svg {
    color: black !important;
    opacity: 1 !important;
}

/* borders */
[style*='border-color: rgb(16, 131, 254)'],
[style*='border-color: rgb(52, 150, 254)'] {
    border-color: var(--light-pink) !important;
}

/* general linked text */
[style*="color: rgb(16, 131, 254)"],
[style*="color: rgb(52, 150, 254)"] {
    color: var(--light-pink) !important;
    text-decoration-color: var(--light-pink) !important;
}

/* some buttons get caught by the above color section, so this is for their icons" */
[style*="color: rgb(16, 131, 254)"] [fill="hsl(211, 20%, 95.3%)"],
[style*="color: rgb(52, 150, 254)"] [fill="hsl(211, 20%, 95.3%)"] {
    fill: black !important;
}

/* selected feed accent */
[style*="border-bottom-color: rgb(16, 131, 254);"] {
    border-bottom-color: var(--theme-color) !important;
}

/* no-border buttons. this is kinda hacky so it may over-catch */
[style*="color: rgb(16, 131, 254)"] > path,
[fill="hsl(211, 99%, 53%)"], /* new post buttons */
[fill="hsl(211, 99%, 60%)"] { /* "i have my own domain" */
    fill: var(--light-pink) !important;
}

/* background on hover for above no-border buttons */
[style*="background-color: rgb(0, 25, 51)"],
[style*="background-color: rgb(0, 44, 91)"]{
    background-color: var(--dark-pink) !important;
    /*
    background-color: var(--darkish-pink) !important;
    background-color: black !important;
    */
}

/* new notifs background */
div[style*="background-color: rgb(0, 17, 36); border-color: rgb(0, 44, 91);"] {
    background-color: var(--dark-pink) !important;
    border-color: var(--darkish-pink) !important;
}

/* compose post text counter */
path[stroke="hsl(211, 99%, 53%)"] {
    stroke: var(--light-pink) !important;
}

/* notification likes (but not post likes) */
div[data-testid="notifsFeed"] path[fill="#ec4899"] {
    fill: var(--light-pink) !important;
}


/* =============== */
/*   experimental  */
/* =============== */

/* override pink pencil icon */
button[aria-label="Edit who can reply"] > div > svg > path {
    fill: hsl(211, 24%, 43.6%) !important;
}

/* disable post hover highlight */
div[style="background-color: rgb(20, 27, 35); opacity: 0.4;"] {
    opacity: 0 !important;
}

/* specific workaround for new notification icon.
if other cases pop up with text on pink,
it would be good to make a general solution */
div[aria-label*="unread items"] {
    color: black !important;
}

/* @s in post composer */
.mention, .autolink {
    color: var(--light-pink) !important;
}

/* labeler subscription
this is somewhat against the spirit of v2
could maybe key off background-color: rgb(105, 0, 255)
for a more generalized solution */
div[data-testid="profileView"] button[data-testid="toggleSubscribeBtn"] > div {
    background-color: var(--theme-pink) !important;
}
div[data-testid="profileView"] button[data-testid="toggleSubscribeBtn"] > div > div {
    color: black !important;
}

div[data-testid="profileView"] div[style*="background-image: linear-gradient(rgb(10, 122, 255), rgb(89, 185, 255));"] {
    background-image: linear-gradient(var(--dark-pink), var(--dark-pink)) !important;   
}

div[data-testid="profileView"] button[aria-label="Create a starter pack"] {
    background-color: var(--dark-pink) !important;
}
div[data-testid="profileView"] button[aria-label="Create a starter pack"] > div {
    color: white !important;
}

}

/*

button [style*="background-image: linear-gradient(94.6001deg, rgb(90, 113, 250), rgb(0, 133, 255))"],
button [style="background-image: linear-gradient(135deg, rgb(90, 113, 250), rgb(0, 133, 255));"] {
background-image: linear-gradient(var(--theme-pink), var(--theme-pink)) !important;
}

notif dot (migrated to general buttons for now)
button[aria-label="Load new notifications"] > div,
button[aria-label="Load new posts"] > div {
    background-color: var(--theme-pink) !important;
}

[style*="color: rgb(16, 131, 254)"] > path {
    fill: var(--light-pink) !important;
}
*/