/* ==UserStyle==
@name         Custom Color Twitter
@description  Can customize color of Twitter on the web
@namespace    twitter.com
@version      2.0.5
@author       nukumori.org
@homepageURL  https://nukumori.org/
@license      CC BY-NC-SA - Creative Commons Attribution-NonCommercial-ShareAlike
@preprocessor uso
@var          color customcolor "Custom Color"    #82c1da
@var select   bg-selected "Background" {
 "Custom": "var(--custom-default-transparent-lighter, none)",
 "None": "none"
}==/UserStyle== */

@-moz-document domain("twitter.com") {

/* Custom Color Twitter by nukumori.org licensed on CC BY-NC-SA */
/* Created: October 17, 2021 */
/* Updated: Aug 17, 2022 */

/* ==================== */
/* common */
/* ==================== */
/* twitter logo on initial loading */
[role="heading"] svg.r-jwli3a,/* dim header twitter icon */
.r-13gxpu9, 
.r-1n1174f,
.r-1cvl2hr .r-jwli3a,
[role="heading"] .r-13v1u17,
[role="heading"] .r-1cvl2hr {
  color: var(--custom-default-normal);
}

/* Twitter icon on customize popup */
div[style*="https://pbs.twimg.com/profile_images/"][style*="zRim1x6M_"] {
  filter: grayscale(1) brightness(75%) contrast(2);
}

/* ==================== */
/* Blue(Default) */
/* ==================== */
:root {
  --custom-default-dark: /*[[customcolor]]*/ff;
  --custom-default-light: /*[[customcolor]]*/88;
  --custom-default-transparent: /*[[customcolor]]*/44;
  --custom-default-transparent-dark: /*[[customcolor]]*/66;
  --custom-default-transparent-light: /*[[customcolor]]*/33;/* added for customize */
  --custom-default-transparent-lighter: /*[[customcolor]]*/17;/* added for customize */
  --custom-default-normal: /*[[customcolor]]*/cc;
}
/* for dim/dark */
body:not([style*="background-color: rgb(255, 255, 255"]):not([style*="background-color: #FFFFFF"]) {
  --custom-default-transparent: rgba(255, 255, 255, .05);
}
/* tab border */
.r-1pbtemp {
  border-right-color: var(--custom-default-normal);
}
/* left sidebar button/top tab/radio button outside effect background hover */
/* *** also used as common color *** */
[data-testid^="AppTabBar_"]:hover > .r-zv2cs0,
[data-testid^="AppTabBar_"] + a:hover > .r-zv2cs0,/* Profile */
.r-1peqgm7 {
  background-color: var(--custom-default-transparent);
}
[data-testid^="AppTabBar_"]:active > .r-zv2cs0,
[data-testid^="AppTabBar_"] + a:active > .r-zv2cs0,/* Profile */
.r-r18ze4 {
  background-color: var(--custom-default-transparent-dark);
}
/* button background */
[style*="background-color: rgb(29, 155, 240)"],/* ### inline... need important */
.r-l5o3uw {
  background-color: var(--custom-default-normal) !important;
}
/* button hover - dark; tweet button on left, done on color setting */
.r-1vtznih {
  background-color: var(--custom-default-dark);
}
/* button active (top tweet area tweet button) */
.r-yuvema {
  background-color: var(--custom-default-normal);
}
/* input - poll */
.r-vhj8yc,
/* outlined button outline */
.r-p1n3y5,
[style="border-color: rgb(29, 155, 240);"] {
  border-color: var(--custom-default-normal) !important;
}
/* input selected - poll */ 
.r-9cip40 {
  box-shadow: var(--custom-default-normal) 0 0 0 1px;
}
/* settings bar (class is universal just style is different)*/
.css-1dbjc4n.r-1awozwy.r-18u37iz.r-16y2uox.r-hdaws3[style="background-color: rgb(142, 205, 248);"],
.css-1dbjc4n.r-1awozwy.r-18u37iz.r-16y2uox.r-4v7adb[style="background-color: rgb(142, 205, 248);"] {
  background-color: var(--custom-default-light) !important;
}
/* settings bar thumb (class is universal just style is different) */
.css-1dbjc4n.r-sdzlij.r-7dny9e.r-tbmifm.r-16eto9q[style="background-color: rgb(142, 205, 248);"],/* added20210813 for Settings >... Display*/
[role="dialog"] .css-1dbjc4n[style="background-color: rgb(142, 205, 248);"],/* dim */
[role="dialog"] .css-1dbjc4n[style="background-color: rgb(142, 205, 248);"],/* dark */
[role="dialog"] .css-1dbjc4n[style="background-color: rgb(142, 205, 248);"] {
  background-color: var(--custom-default-light) !important;
}
[role="radiogroup"] [title="Blue heart"]:before {
  content: "Altanative";
  background-color: var(--custom-default-normal);
  color: var(--custom-default-normal);
}
/* wheel */
svg > circle[style*="stroke: rgb(29, 155, 240)"] {
  stroke: var(--custom-default-normal) !important;
}

/* ==================== */
/* Add-on */    
/* ==================== */

/* text, icon */
[style="color: rgb(29, 155, 240);"],/* inline... need important */
.r-1cvl2hr, /* icon: authorized user, tweet area */
.r-1n1174f /* text: link */ {
  color: var(--custom-default-normal) !important;
}
/* button */
[role="button"][style*="background-color: rgb(15, 20, 25);"],/* "Follow" button on "Discover new Lists" */
[role="link"].r-sdzlij.r-peo1c {
  background-color: var(--custom-default-normal) !important;
}
[aria-label*="Follow"][role="button"] .r-18jsvk2 {/* "Follow" text inside follow button */
  color: var(--custom-default-normal);
}
[aria-label*="Follow"][role="button"]:hover .r-18jsvk2 {/* "Follow" text inside follow button */
  color: var(--custom-default-dark);
}
[role="link"].r-sdzlij.r-peo1c:hover,
[aria-label*="Follow"][role="button"]:hover {
  background-color: var(--custom-default-light) !important;
}
/*** active ***/
[role="link"].r-sdzlij.r-peo1c:active,
[aria-label*="Follow"][role="button"]:active {
  background-color: var(--custom-default-normal) !important;
}
/*** hover ***/
[aria-label*="Follow"][role="button"][data-testid*="unfollow"]:hover/* button - follow button on hover */ {
  background-color: #fff !important;
  border-color: var(--custom-default-dark) !important;
}
[role="button"].r-oelmt8:hover {/* "Follow" button on "Discover new Lists" */
  background-color: var(--custom-default-dark) !important;
}
/* button/and icons on initial inline colors... */ 
[style*="background-color: rgb(249, 24, 128)"] {
  background-color: var(--custom-default-normal) !important;
}
[style="color: rgb(249, 24, 128);"] {
  color: var(--custom-default-light) !important;
}
/* icon/menu hover */
.r-1ydqjzz {
  background-color: var(--custom-default-transparent) !important;
}
/* icon active */
.r-h9yrwi {
  background-color: var(--custom-default-transparent-dark) !important;
}

/* right advertizement items */
.r-1hdo0pc,/* dark content tab */
.r-3al2xr,/* dim content tab */
.r-g6ijar,/* dim */
.r-1panhkp,/* hover */
.r-1218gd,/* hover*/
.r-1d6w8o1/* backgrounds */ {
  /*background-color: var(--custom-default-transparent-light) !important;*/
  background-color: var(--custom-default-transparent-lighter) !important;
  border-color: var(--custom-default-transparent-light);/* ### 20220519 for right side content */
}

/* hover tweet */
.r-1cuuowz {
  background-color: var(--custom-default-transparent-light) !important;
}
/* search input */
.r-1sw30gj {
  background-color: var(--custom-default-transparent-dark);
}

/* <-/-> buttons on Explore tab */
a[role="link"][style*="background-color: rgb(15, 20, 25);"],/* black button - ex."change location" on explore */
[role="button"][style*="background-color: rgba(15, 20, 25, 0.75);"] {
  background-color: var(--custom-default-normal) !important;
}
.r-19130f6,/* added in some reason */
a[role="link"].r-oelmt8,/* black button on hover - ex."change location" on explore */
[role="button"].r-pjtv4k/* hover */ {
  background-color: var(--custom-default-dark) !important;
  color: #fff !important;/* to distinguish text */
}
[role="alertdialog"] [role="button"].r-pjtv4k/* button on dialog when dim/dark */ {
  background-color: var(--custom-default-transparent-light) !important;
}
/*** borders ***/
.r-1d6w8o1/* sidebar what's happening/who to follow block w/ background color */ {
  border-color: var(--custom-default-transparent);
}
.r-1ets6dv,/* search input */
.r-jxzhtn {
  border-color: var(--custom-default-transparent);
}
.r-140t1nj/* tottom border */ {
  border-bottom-color: var(--custom-default-transparent);
}
.r-j5o65s {
  border-bottom-color: var(--custom-default-transparent);
}
.r-c554xy,/* ex. input for new message search people */
.r-1dgieki {
  border-top-color: var(--custom-default-transparent);
}
/* bellow tweet input */
.r-1sw30gj {
  background-color: var(--custom-default-transparent);
}
/* for borders */
.r-18bvks7,/* dim */
.r-1kqtdi0/* dark */ {
  border-color: var(--custom-default-transparent-dark);
}
.r-1ila09b,/* dim */
.r-1igl3o0/* dark */ {
  border-bottom-color: var(--custom-default-transparent-dark);
}
.r-kuekak,/* dim */
.r-gu4em3/* dark */ {
  background-color: var(--custom-default-transparent-dark);
}
/* borders/with fast twitter */
.r-1uusn97, .r-qo02w8 {
  border-color: var(--custom-default-transparent-dark) !important;
}
/* tweet bottom */
.r-1kfrmmb,/* dim */
.r-2sztyj/* dark */ {
  border-top-color: var(--custom-default-transparent-dark) !important;
}

/* analytics popup */
.ep-Cta .ep-CtaQPv1 {
  border-color: var(--custom-default-normal);
  background-color: var(--custom-default-normal);
}
.ep-Cta .ep-CtaQPv1:hover {
  border-color: var(--custom-default-dark);
  background-color: var(--custom-default-dark);
}

/* *** menu mod *** */

/* icons color */
svg.r-18jsvk2 {
  color: var(--custom-default-dark) !important;
}
svg.r-vlxjld,/* dark */
svg.r-1nao33i /* dim */ {
  color: var(--custom-default-dark) !important;
}
:root{
  --custom-link-color: var(--custom-default-normal);
}
/* for dim/dark */
body:not([style*="background-color: rgb(255, 255, 255"]):not([style*="background-color: #FFFFFF"]) {
  --custom-link-color: var(--custom-default-dark);
}
/* main navigation text on left color */
header [role="navigation"] .css-16my406/* normal */,
header [role="navigation"] .r-b88u0q .css-16my406/* active */ {
  color:  var(--custom-link-color) !important;
}
/* text inside badge of icons */
header [role="navigation"] .r-jwli3a .css-16my406/* normal */,
header [role="navigation"] .r-b88u0q .r-jwli3a .css-16my406/* active */ {
  color: #fff !important;
}

/* =================== */
/* =================== */
/* added for customize */
/* =================== */
/* =================== */
/* nav hover */
.r-1ydqjzz {
  background-color: var(--custom-default-transparent);
}
/* tweet hover */
.r-1panhkp {
  background-color: var(--custom-default-transparent-light);
}
/* right side */
.r-x572qd/* normal */ {
  /*background-color: var(--custom-default-transparent) !important;*//* need important to override .r-1d6w8o1 */
  background-color: var(--custom-default-transparent-lighter) !important;/* need important to override .r-1d6w8o1 */
}
.r-1d6w8o1/* normal */ {
  border-color: var(--custom-default-transparent-light);
}
.r-1hdo0pc/*dark override*/ {
  /*background-color: var(--custom-default-transparent-dark) !important;*/
  background-color: var(--custom-default-transparent-light) !important;
}
/*** dialog **/  
[role="dialog"] label+div>svg.r-l5o3uw{
  background-color: transparent;
}
.r-1roi411/* dark */,
.r-126aqm3/* dim */ {
  border-color: var(--custom-default-transparent-dark);
}
[role="radiogroup"] .r-2tyz2o.r-tmtnm0 .r-l5o3uw {
  background-color: transparent !important;
}
[style*="background-color: rgb(15, 20, 25);"] {
  background-color: var(--custom-default-dark) !important;
}
[role="link"].r-1sw30gj {
  background-color: var(--custom-default-light) !important;
}
/* twitter icon follow custom color */
:is(.r-1p1nz3t, .r-1ifxtd0) [data-testid="tweet"] .css-1dbjc4n.r-18u37iz .css-1dbjc4n.r-1adg3ll.r-bztko3 .r-12181gd/* normal */,
:is(.r-1p1nz3t, .r-1ifxtd0) [data-testid="tweet"] .css-1dbjc4n.r-18u37iz .css-1dbjc4n.r-1adg3ll.r-bztko3 .r-172uzmj/* dim/dark */ {
  background-color: var(--custom-default-normal);
}
:is(.r-1p1nz3t, .r-1ifxtd0) [data-testid="tweet"] .css-1dbjc4n.r-18u37iz .css-1dbjc4n.r-1adg3ll.r-bztko3 .r-desppf:last-child {
  mix-blend-mode: lighten;
}
/*** icon bottom on tweets ***/
[role="group"] .r-14j79pv {
  color: var(--custom-default-light);
}
[role="group"] .r-1bwzh9t,/* dark */
[role="group"] .r-115tad6/* dim */ {
  color: var(--custom-default-normal);
}
/*** active ***/
.r-1a7u7ko/* dark menu */ {
  background-color: var(--custom-default-light);
}
.r-eg8bge,/* dim? */
.r-1auu7ko/* dark */ {
  background-color: var(--custom-default-transparent);
}
/*** hover background ***/
.r-g2wdr4/* dim insde sub menu, dark right side */ {
  background-color: var(--custom-default-transparent-dark);
}
/*** search/label ***/
.r-z32n2g/* dark */,
.r-8erxvq/* dim */ {
  background-color: var(--custom-default-transparent-light);
}
/* text */
.r-115tad6/* dim */,
.r-1bwzh9t/* dark */ {
  color: var(--custom-default-normal);
}
.r-90j39::placeholder/* dim */,
.r-13rk5gd::placeholder/* dark */ {
  color: var(--custom-default-light);
}
/*** adjustment ***/
[data-testid="sidebarColumn"] .r-g2wdr4/* dark right side */ {
  /*background-color: var(--custom-default-transparent-light);*/
  background-color: var(--custom-default-transparent-lighter);
  border-color: var(--custom-default-transparent-light);
}

/*** something inline like thumb on content on narrow ***/
[style*="background-color: rgb(142, 205, 248);"] {
  background-color: var(--custom-default-light) !important;
}
/*** active load more tweet ***/
.r-h1syrq/* default */,
.r-q773ft/* dim */ {
  background-color: var(--custom-default-transparent-dark);
}
/*** thread vertical line ***/
.r-1bimlpy/* default */,
.r-157er04/* dim */ {
  background-color: var(--custom-default-transparent-light);
}
.r-1bnu78o/* dark */ {
  background-color: var(--custom-default-transparent-dark);
}
/*** selected tweet by jk key scroll ***/
.r-ukrunq {
  box-shadow: var(--custom-default-dark) 0 0 0 2px inset;
}
/*** dev list active ***/
.r-14tof1o,/* dark */
.r-1nvv5a4,/*dim*/
.r-vqp9x9/* default */ {
  background-color: var(--custom-default-transparent-dark);
}
/*** unselected hovered radio padding ***/
/* tbd:
.r-lh8awq {
  background-color: var(--custom-default-transparent-dark);
}*/

/*** mod background color ***/
:is(body[style*="background-color: rgb(0, 0, 0"], body[style*="background-color: #000000"]) :is(header, main) {
  --custom-default-transparent-lighter: var(--custom-default-transparent-light);
}
header,
main {
  background-color: /*[[bg-selected]]*/;
}
/* mod search input for mod background color... */
[data-testid="SearchBox_Search_Input_label"] {
  /*background-color: var(--custom-default-transparent-light);*//* 20220811 */
  border-radius: 24px;
}
[aria-label="Trending"] .r-14lw9ot:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*white*//*not serch filters area not radio button not icon */,
[aria-label="Trending"] .r-yfoy6g:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dim*/,
[aria-label="Trending"] .r-kemksi:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dark*/ {
  /*background-color: transparent;*/
  background-color: #fff;
  border-radius: 50px;
  top: 6.5px;
  height: 45px;
}
[aria-label="Trending"] .r-yfoy6g:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dim*/,
[aria-label="Trending"] .r-kemksi:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dark*/ {
  background-color: #000;
}
[aria-label="Trending"] form .r-14lw9ot:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*white*/ {
  background-color: #fff;
  border-radius: 8px;
  top: 0;
  height: auto;
}
[aria-label="Trending"] form .r-yfoy6g:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dim*/,
[aria-label="Trending"] form .r-kemksi:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dark*/ {
  background-color: #000;
  border-radius: 8px;
  top: 0;
  height: auto;
}
/* recober checkbox */
[aria-label="Trending"] .r-19wmn03:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf) {
  top: 0;
  height: 20px;
}

/*** icon hover ***/
.r-i49rur{
  background-color: var(--custom-default-transparent-light);
}

/*** button on dim ***/
[role="alertdialog"] .r-1sw30gj[role="button"],
[data-testid="primaryColumn"] [data-testid="listCell"] .r-1sw30gj/* dim */ {
  background-color: var(--custom-default-dark);
}
/*  hover */
[role="alertdialog"] .r-jc7xae[role="button"],
[data-testid="primaryColumn"] [data-testid="listCell"] .r-jc7xae/* dim */ {
  background-color: var(--custom-default-normal);
}

}