red X

userstyle_x.css

/* ==UserStyle==
@name           Red X
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    my red X accent colour, based on idfk Some Extension lmao I can't remember
@author         Lucia Scarlet
==/UserStyle== */

@-moz-document domain("x.com") {
    /* Insert code here... */
    
    :root {
	--custom: color(display-p3 0.778 0.115 0.181 / 1);
	--custom-cval: display-p3 0.778 0.115 0.181;
}

/* twitter logo, tweet toolbar icons, links, verified checkmark */
.r-1cvl2hr {color: var(--custom) !important;}
.r-1cvl2hr path {fill: var(--custom) !important;}

/* notification icon, dm chat message */
.r-l5o3uw {background-color: var(--custom) !important;}

/* compose tweet button */
a[data-testid="SideNav_NewTweet_Button"] {
  background-color: var(--custom) !important;
}

/* haven't seen this one in person  */
link[rel="mask-icon"] {color: var(--custom) !important;}

/* tweet characters remaining circle */
div[role="progressbar"] svg circle[stroke="#1D9BF0"] {
  stroke: var(--custom) !important;
}
div[role="progressbar"] svg circle[fill="#1D9BF0"] {
	fill: var(--custom) !important;
}

/* progressbar throbber */
div[role="progressbar"] svg circle[style*="stroke: rgb(29, 155, 240)"] {
  stroke: var(--custom) !important;
}

/* selected DM conversation */
.r-1pbtemp {
  border-right-color: var(--custom) !important;
}

.r-vhj8yc {border-color: var(--custom) !important;}

/* makes sure bg_color doesn't transition 
when I'm getting rid of bg_color and placing bg  */
/*.r-6416eg {transition-property: box-shadow !important;}*/

.r-1vtznih {
  /*background-color: none !important;*/
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.09) 0%, rgba(0,0,0,0.09) 100%) bottom,
    linear-gradient(to bottom, var(--custom) 0%, var(--custom) 100%) top !important;
}
.r-yuvema {
  /*background-color: none !important;*/
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%) bottom,
    linear-gradient(to bottom, var(--custom) 0%, var(--custom) 100%) top !important;
}
.r-1dhjtlp {
  /*background-color: none !important;*/
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.42) 100%) bottom,
    linear-gradient(to bottom, var(--custom) 0%, var(--custom) 100%) top !important;
}

/* DM convo with notif, hovered button circle bgs */
.r-1peqgm7 {background-color: color(var(--custom-cval) / 0.12) !important;}
.r-1w2mbsr {background-color: color(var(--custom-cval) / 0.12) !important;}

/* DM convo with notif selected */
.r-r18ze4 {background-color: color(var(--custom-cval) / 0.2) !important;}

/* font-size slider, not selected portion */
div[style*="background-color: rgb(142, 205, 248);"] {
  background-color: none !important;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%) bottom,
    linear-gradient(to bottom, var(--custom) 0%, var(--custom) 100%) top !important;
}

/* border around selected stuff */
div[style*="border-color: rgb(29, 155, 240);"] {
  border-color: var(--custom) !important;
}


/*  dark-mode (or dim-mode where applicable) */

div[style*="color: rgb(29, 155, 240);"] {
  color: var(--custom) !important;
}

div[style*="color: rgb(29, 155, 240);"] > svg {
  color: var(--custom) !important;
}

a[style*="color: rgb(29, 155, 240);"] {
  color: var(--custom) !important;
}

.r-1eltapf {
  background-color: color(var(--custom-cval) / 0.14) !important;
}

.r-1h7almx {
  background-color: none !important;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 100%) bottom,
    linear-gradient(to bottom, var(--custom) 0%, var(--custom) 100%) top !important;
}

div[data-testid="tweetButton"][style*="background-color: rgb(29, 155, 240);"] {
  background-color: var(--custom) !important;
}

div[style*="background-color: rgb(29, 155, 240);"] {
  background-color: var(--custom) !important;
}

*[style*="background-color: rgb(29, 155, 240);"] {
  background-color: var(--custom) !important;
}


.r-1rfi0ky {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.22) 100%) bottom,
    linear-gradient(to bottom, var(--custom) 0%, var(--custom) 100%) top !important;
}

a[style*="background-color: rgb(29, 155, 240)"] {
  background-color: var(--custom) !important;
}

a[style*="color: rgb(29, 155, 240)"] {
  color: var(--custom) !important;
}

button[style*="color: rgb(29, 155, 240)"] {
  color: var(--custom) !important;
}


span[style*="color: rgb(29, 155, 240)"] {
  color: var(--custom) !important;
}

.r-13gxpu9 {
  color: var(--custom) !important;
}

/*[role="button"][data-testid$="-unfollow"]:not(:hover) {*/
/*	background-color: var(--custom) !important;*/
/*}*/
}