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;
    --like-pink: rgb(236, 72, 153); /* #EC4899 */
    --dark-pink: #24001F;
    --background-color: #0B0C0D;
    --alt-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);
    /* background-color: rgba(229, 73, 128, 0.5); */
    color: white !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 
a[aria-label="Notifications"] div > div > div[aria-label*="unread item"], 
expanding to catch dm notifs as well */
nav[role="navigation"] > a > div > div > div[aria-label*="unread item"] {
    color: black !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[data-testid="notificationsScreen"] div[data-testid="notifsFeed"] div[style*="background-color: rgb(0, 17, 36)"][style*="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  */
/* =============== */

/* repost count var(--like-pink) */
button[aria-label="Repost or quote post"] [style*="color: rgb(69, 237, 159);"] {
    color: var(--light-pink) !important;
}

/* repost in notifications tab */
svg[style="color: rgb(69, 237, 159);"] > [fill="hsl(152, 82%, 60%)"] {
    fill: var(--light-pink) !important;
}

/* like button and count */
button[data-testid="likeBtn"] div[style*="color: rgb(236, 72, 153);"] {
    color: var(--light-pink) !important;
}
button[data-testid="likeBtn"] path[fill="#ec4899"] {
    fill: var(--light-pink) !important;
}

/* pin feeds in feeds tab */
button[data-testid="feed-list-togglePin"] > svg > path[fill="#0085ff"] {
    fill: var(--theme-pink) !important;
}

/* 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;
}


/* @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;
}

/* half-screen notif bubble */
div[aria-label="Notifications"] > div[aria-label*="unread items"] {
    background-color: var(--theme-pink) !important;
}
div[aria-label="Notifications"] > div[aria-label*="unread items"] > div {
    color: black !important;
}

/* loading screen */
div[id="splash"] > svg > path {
    fill: var(--light-pink) !important;
}
/* d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z" */

/* dropdown menu */
div[class="dropdown-menu-transform-origin"][role="menu"] > div > div[role="menuitem"] {
    background-color: var(--alt-background-color)
}
div[class="dropdown-menu-transform-origin"][role="menu"] > div > div[role="menuitem"][style*="background-color: rgb(28, 39, 50)"] {
    background-color: var(--dark-pink) !important;
}

div[class="dropdown-menu-transform-origin"][role="menu"] > div {
    border-color: var(--alt-background-color) !important;
    background-color: var(--alt-background-color) !important;
}

/*
[role="link"][style*="background-color: rgb(20, 27, 35)"],
[role="button"][style*="background-color: rgb(20, 27, 35)"],
[role="link"][style*="background-color: rgb(28, 39, 50)"],
[role="button"][style*="background-color: rgb(28, 39, 50)"] {
    background-color: var(--dark-pink) !important;
}

[style*="background-color: rgb(20, 27, 35)"],
[style*="background-color: rgb(20, 27, 35)"] {
    background-color: var(--dark-pink) !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;
}
*/