ShadeRoot Twitch

Eye-friendly magic in your browser for Twitch

  1. // Written by Glenn Wiking
  2. // Script Version: 1.1.0b
  3. // Date of issue: 24/05/16
  4. // Date of resolution: 24/05/16
  5. //
  6. // ==UserScript==
  7. // @name ShadeRoot Twitch
  8. // @namespace SRTW
  9. // @include *.twitch.*
  10. // @include *.twitchadvertising.*
  11. // @description Eye-friendly magic in your browser for Twitch
  12. // @version 1.1.0b
  13. // @grant none
  14. // @icon https://i.imgur.com/BUIRWzD.png
  15. // ==/UserScript==
  16.  
  17. function ShadeRootTW(css) {
  18. var head, style;
  19. head = document.getElementsByTagName('head')[0];
  20. if (!head) { return; }
  21. style = document.createElement('style');
  22. style.type = 'text/css';
  23. style.innerHTML = css;
  24. head.appendChild(style);
  25. }
  26.  
  27. ShadeRootTW (
  28. 'p, #header_search .text, #header_search .countries-input, .new-header-search .text, .new-header-search .countries-input, .st-search-input {color: #EDE !important;}'
  29. +
  30. '#site_header, .contain-to-grid, .top-bar {background: #26153F !important;}'
  31. +
  32. '#left_col, .app-main {background: #16131E !important;}'
  33. +
  34. '#header_search .text, #header_search .countries-input, .new-header-search .text, .new-header-search .countries-input, .st-search-input {background-color: #40254E !important; border: 1px solid #5C3A81 !important;}'
  35. +
  36. '.main, .fullwidth_main, .container, #content {background: #1D142C !important;}'
  37. +
  38. 'h2 span, .meta .title {color: #A287D7 !important;}'
  39. +
  40. '.dropmenu, .ui-menu, .ui-multiselect-menu {background: #251738 !important;}'
  41. +
  42. 'h1, h2, h3, h4, h5, h6, .js-search-name {color: #8F44CC !important;}'
  43. +
  44. '#carousel .nav ul li a {background: #801FCF !important;}'
  45. +
  46. '#channel, .target-frame, .close-hostmode, .turbo_description {background: #100E17 !important;}'
  47. +
  48. '.info .title, .textwidget h1 {color: #EDE !important;}'
  49. +
  50. '.info .title:hover {background-color: #511B62 !important; color: #DCD !important;}'
  51. +
  52. '.channel-link .profile-photo, .profile-link .profile-photo, img, .widget:nth-of-type(2), .textwidget img {opacity: .85 !important;}'
  53. +
  54. '#main_col {background: #16131E !important;}'
  55. +
  56. '.balloon .player-menu__section {color: #DCD !important; background-color: #2A0C3C !important;}'
  57. +
  58. '.chat-header {box-shadow: 0px -1px 0px 0px #2C2541 inset !important; background: #201C2B !important;}'
  59. +
  60. '.chat-lines, #header-container {background: #17141F !important;}'
  61. +
  62. '.chat-interface .textarea-contain textarea {margin: 8px 0px 0px !important; background: #181020 !important; border: 1px solid #2C2541 !important;}'
  63. +
  64. /*INPUT*/'.conversations-content .conversations-list-bottom-bar, .ember-chat .chat-room-list .chat-create-room .input-contain input.text, .ember-chat .chat-room-list .chat-create-room .input-contain input.countries-input, .ember-chat .chat-room-list .chat-create-room .input-contain .recurly input, .recurly .ember-chat .chat-room-list .chat-create-room .input-contain input, .directory_header #gameselector_input {background: #201C2B !important; border: 1px solid #2C2541 !important;}'
  65. +
  66. '.message, .game, .game span, .game a, .following-col .header, .conversation-name, .black-box, .article-content {color: #DCD !important;}'
  67. +
  68. '.chat-room-list, .conversations-list {background: #291839 !important;}'
  69. +
  70. 'label {color: #C2AEE6 !important;}'
  71. +
  72. '.panel-formatting .panel {color: #9E7ADE !important;}'
  73. +
  74. '.toggle-notification-menu {background: #201C2B !important;}'
  75. +
  76. '.brick {background-color: #2E2247 !important;}'
  77. +
  78. '.toggle-notification-menu::before {border-color: #6441A4 transparent transparent !important;}'
  79. +
  80. '.balloon::after {background-color: #2A0C3C !important;}'
  81. +
  82. '.chat-interface {background: #201C2B !important;}'
  83. +
  84. '.chat-messages {background: #17141F !important;}'
  85. +
  86. '.following-col .scroll {background: #17141F !important;}'
  87. +
  88. 'ul.tabs li > a, .directory_header .nav li > a, ul.tabs_fake li > a {color: #8F44BE !important;}'
  89. +
  90. 'ul.tabs li > a.active, .directory_header .nav li > a.active, ul.tabs_fake li > a.active {color: #BAACE1 !important; border-color: #2C2541 !important;}'
  91. +
  92. 'ul.tabs::before, .directory_header .nav::before, ul.tabs_fake::before, .notification-center__footer {border-top: 1px solid #2C2541 !important;}'
  93. +
  94. 'ul.tabs li > a:hover, .directory_header .nav li > a:hover, ul.tabs_fake li > a:hover {color: #B7AADD !important; border-color: rgba(100, 51, 146, 0.8) !important;}'
  95. +
  96. '.is-following a {background-color: #6441A4 !important;}'
  97. +
  98. '.conversations-list {border: 1px solid #4A3771 !important;}'
  99. +
  100. '.conversations-list .conversations-list-header {background: #6441A4 !important; border-bottom: 1px solid #382363 !important; color: #DCD !important;}'
  101. +
  102. '.conversations-list-item:hover {background-color: #22153C !important;}'
  103. +
  104. '.conversations-list-item {border-bottom: 1px solid #2C2541 !important;}'
  105. +
  106. 'input.text:focus, input.countries-input:focus, .recurly input:focus, input.string:focus, textarea:focus {border: 1px solid #382363;}'
  107. +
  108. '.conversations-list-search-bar input {background: #181020 url("/images/xarth/left_col_search_icon.svg") no-repeat scroll 8px center !important;}'
  109. +
  110. '.search-divider, fieldset {border-bottom: 1px solid #472193 !important; color: #DCD !important;}'
  111. +
  112. '.thumb .boxart {border-color: #503295 !important;}'
  113. +
  114. '.thumb .cap {background: rgba(15, 6, 24, 0.9) !important;}'
  115. +
  116. '#flyout .content {background: #271633 !important;}'
  117. +
  118. '.linklist a, .st-next, .col-header .title, .following-col .following-list .channel .viewers, .flex {color: #DCD !important;}'
  119. +
  120. '.linklist a:hover, .st-next:hover {color: #8B549F !important;}'
  121. +
  122. '#flyout .point::before {border-color: transparent #271633 transparent transparent !important;}'
  123. +
  124. '.st-autocomplete-sidebar, .st-autocomplete-small, .st-autocomplete {background: #17141F !important;}'
  125. +
  126. 'ul.subtabs, .user_list .user, .mixed_list .user, .video_list .video, .mixed_list .video {border-bottom: 1px solid #3F286E !important;}'
  127. +
  128. '.video_list .video .title .video_type, .video_list .video .desc .video_type, .video_list .video .video_stats .video_type, .mixed_list .video .title .video_type, .mixed_list .video .desc .video_type, .mixed_list .video .video_stats .video_type {background: #624895 !important;}'
  129. +
  130. '.st-autocomplete-sidebar .label, .st-autocomplete-small .label, .st-autocomplete .label {background-color: #312548 !important;}'
  131. +
  132. '.load-more span {background: #533D80 !important; color: #DCD !important;}'
  133. +
  134. '.viewall a {background: #342747 !important;}'
  135. +
  136. '#sidebar_query_small, search_input, input[name="query"], #sidebar_search_small input, form[action="/search"], form[action="/search"] input, .label {color: #DCD !important;}'
  137. +
  138. '.ember-chat .chat-settings .chat-colors .chat-colors-swatch.selected {box-shadow: 0px 0px 0px 3px #232127, 0px 0px 0px 1px #7D2CAE inset !important;}'
  139. +
  140. '.turbo_description {box-shadow: 1px 0px 0px #220F38, -3px 0px 3px rgba(0, 0, 0, 0.15) inset !important;}'
  141. +
  142. '.exception, #site_footer a, .item.price, .js-search-name, .features_desc {color: #DCD !important;}'
  143. +
  144. '#terms, #subscription_cancel {text-shadow: 0px 1px 0px #120920 !important;}'
  145. +
  146. '.messages #send_message_form, .messages #reply_message_form {border-top: 1px solid #2A1848; background: #292233 !important;}'
  147. +
  148. 'input.text, input.countries-input, .recurly input, input.string, textarea {background: #181120 !important; color: #DCD !important; border: 1px solid #353041 !important;}'
  149. +
  150. '.messages #send_message_form #bottom_buttons, .messages #reply_message_form #bottom_buttons {border-top: 1px solid #3A2662 !important; border-bottom: 1px solid #412A6E !important; box-shadow: 0px -1px 0px #271644 !important;}'
  151. +
  152. '.messages #send_message_form .button_group, .messages #reply_message_form .button_group {background: transparent linear-gradient(#2F2445, #1E1138) repeat scroll 0% 0% !important;}'
  153. +
  154. '.whatisthis {background: #2C143E !important;}'
  155. +
  156. '.whatisthis::before {border-color: transparent transparent #2E1D47 !important;}'
  157. +
  158. '.messages p.empty, .section-header, #settings_buttons {background: rgb(46, 36, 72) !important;}'
  159. +
  160. '.messages #message_actions, fieldset {background: #201A2D !important; border-bottom: 1px solid #1E192A !important;}'
  161. +
  162. '.header-content .title, .connect-item-desc .title, .form_microcopy {color: #DCD !important;}'
  163. +
  164. '.section-header {border-bottom: 1px solid #1C0E38 !important;}'
  165. +
  166. '.cl-subheader, .hdr {background: #2E2448 !important; color: #DCD !important;}'
  167. +
  168. 'li.hdr {border-bottom: 1px solid #3E2A60 !important;}'
  169. +
  170. '.multi_select li.selector form:hover, .multi_select li.selector > label:hover, .multi_select li.selector .ms-int:hover {background: #2C213E !important;}'
  171. +
  172. '.multi_select li.selector form, .multi_select li.selector > label, .multi_select li.selector .ms-int {border-bottom: 1px solid #3C2660 !important;}'
  173. +
  174. '.connect_items {border-bottom: 1px solid #361F5D !important;}'
  175. +
  176. '#settings form, .postArticle, iframe html body {background: #17141F !important;}'
  177. +
  178. '.connect-item-info {background: #2E2448 !important;}'
  179. +
  180. '.connect_items .connect-item-details, .connect_items .connect-item-details-legal {border-bottom: 1px solid #412C6C !important;}'
  181. +
  182. 'select {background: rgb(100, 65, 164) none repeat scroll 0% 0% !important; border: 1px solid rgb(79, 41, 110) !important; color: #DCD !important;}'
  183. +
  184. '.postActions, .js-video-issue, .player-menu__section {background: #37255A !important;}'
  185. +
  186. '.avatar-text, .button--chromeless:active, .button--chromeless:focus, .button--chromeless:hover, .button--link:active, .button--link:focus, .button--link:hover {color: #DCD !important;}'
  187. +
  188. '.buttonSet-inner button, .player-text-link--no-color, .js-meta-title, .player-menu__item .player-text-link, .twitch_subwindow_container .card a, .kraken-embed .card a, .kraken-page .card a {color: #DCD !important;}'
  189. +
  190. '.buttonSet-inner button {background: #5A3A78 !important; border-radius: 1em !important;}'
  191. +
  192. '.video_list.external .video .cap_and_profile .profile, .mixed_list.external .video .cap_and_profile .profile {background: #4D2A89 !important;}'
  193. +
  194. '.user_list .user .user_stats .followers_count, .mixed_list .user .user_stats .followers_count {padding: 2px 5px 2px 20px !important; background: #584085 url("/images/xarth/g/g18_heart-00000020.png") no-repeat scroll left center !important; border-radius: 4px !important;}'
  195. +
  196. '.cl-container .cl-section {background: #100E17 !important;}'
  197. +
  198. '#turbo_action {background: #271536 !important; border: 1px solid #3A1963 !important; box-shadow: 0px 1px 0px #1E0C27 !important;}'
  199. +
  200. '.nav_section .header, .links_group a {color: #8661C5 !important;}'
  201. +
  202. '.twitch_subwindow_container .card .text-content, .kraken-embed .card .text-content, .kraken-page .card .text-content, .authorize, .kraken-embed .card .text-content {background: #392B59 !important;}'
  203. +
  204. '.twitch_subwindow_container .card .buttons, .kraken-embed .card .buttons, .kraken-page .card .buttons {border-top: 1px solid #372759 !important;}'
  205. +
  206. '.twitch_subwindow_container .card .text-content, .kraken-embed .card .text-content, .kraken-page .card .text-content {padding: 10px 25px 5px !important;}'
  207. +
  208. '.rightcol-content {background: #17141F !important;}'
  209. +
  210. '.chatters-container .chatters {background: #1C1327 !important;}'
  211. +
  212. '.player-button, .player-overlay {opacity: .85 !important;}'
  213. +
  214. '.chat-colors .small, .list-header, .active, .empty-grid, #setup_link, .stat, .quality, .quality span, .content-list, ul.vtabs li .not_linked, ul.vtabs li a {color: #DCD !important;}'
  215. +
  216. '.theatre .emoticon-selector .tabs .tab.active, .dark .emoticon-selector .tabs .tab.active, .app-main.theatre .chat-container .emoticon-selector .tabs .tab.active, .app-main.theatre .ember-chat-container .emoticon-selector .tabs .tab.active, .force-dark .emoticon-selector .tabs .tab.active {border-top-color: #6441A4 !important;}'
  217. +
  218. '#setup_link {background: #2F1C4B !important;}'
  219. +
  220. '.dash-chat-column {border: 1px solid #353041 !important;}'
  221. +
  222. '.emoticon-selector-toggle {top: 13px !important;}'
  223. +
  224. '.wrapper {background-color: rgba(23, 17, 29, 0) !important;}'
  225. +
  226. '.wrapper .title {color: #DCD !important;}'
  227. +
  228. '.horizontal-rule {border-bottom: 1px solid #341E62 !important; box-shadow: 0px 1px 0px rgba(65, 27, 64, 0.6) !important;}'
  229. +
  230. 'ul.vtabs li a:hover {background: #3F1F66 !important;}'
  231. //+
  232. //'#footer_links, #copyright {background: rgba(41, 17, 81, 0.5) !important;}'
  233. +
  234. '#content-contain {background: #17141F !important; background-color: rgb(41, 41, 41); border-top: 1px solid #442263 !important; border-bottom: 1px solid #442263 !important;}'
  235. +
  236. '#company-header {background: #24104A !important; border-bottom: 1px solid #2F116B !important; border-top: 1px solid #231145 !important;}'
  237. +
  238. '.dashboard .topic {background: #28183B !important;}'
  239. +
  240. 'a.viewall {border-top: 1px solid #492175 !important; color: #DCD !important;}'
  241. +
  242. '.support-search-big, .support-search-small {background: #2F1D51 !important; box-shadow: 0px 1px 0px #2F1C47 inset, 0px 1px 2px rgba(0, 0, 0, 0.75) !important;}'
  243. +
  244. '.normal_button {box-shadow: 0px 1px 0px #3C225C inset, 0px 1px 0px rgba(0, 0, 0, 0.07) !important; text-shadow: 0px 1px 0px rgba(35, 17, 65, 0.8) !important; background: #392252 !important; color: #DCD !important;}'
  245. +
  246. '#footer_links li a, .menu-item-type-custom, ul#noty_top_layout_container div.noty_bar.noty_type_error .noty_message, ul#noty_top_layout_container div.noty_bar.noty_type_success .noty_message {color: #DCD !important;}'
  247. +
  248. '#home_page_downs .widget, #home_page_downs .widget:nth-of-type(2n), #content-container, #widget-block, .cart_totals table, .related, .upsells {background-color: #2A1347 !important;}'
  249. +
  250. '.site-wide-cta .action-link:hover {border-color: #331E5C !important; background-color: #331E5C !important;}'
  251. +
  252. '#site-wide-container .arrow {border-top-color: #2A1347 !important;}'
  253. +
  254. 'footer.full-width {background-color: #261F2F !important; border-top: 1px solid #3A1557 !important;}'
  255. +
  256. 'button.secondary, .button.secondary {background: #361B4E !important;}'
  257. +
  258. 'large-5 {text-shadow: 0px 0px 5px #424 !important;}'
  259. +
  260. 'span[style="color: rgb(38, 38, 38); font-family: arial, sans-serif; font-size: 13px; line-height: 16px;"], .auth, .activity-meta__name {color: #DCD !important;}'
  261. +
  262. '.ct-tags__tag {color: #DCD !important; background-color: #6441A4 !important;}'
  263. +
  264. '.ct-toggle--trans .ct-toggle__knob {background-color: #6441A4 !important;}'
  265. +
  266. '.ct-tags--extracted {border-bottom: 1px solid #412B6E;}'
  267. +
  268. '.activity-card__status {background: #311F42 !important;}'
  269. +
  270. '.activity-card {border: 1px solid #543C7B !important;}'
  271. +
  272. '.activity-meta {box-shadow: 0px -1px 0px #5B3798 inset !important;}'
  273. +
  274. '.activity-react__item:hover {border-color: #3E1E77 !important; color: #C7BAE0 !important;}'
  275. +
  276. '.activity-meta::before {background: #3D2553 !important; border: 1px solid #5B3798 !important;}'
  277. +
  278. '.balloon--left, .balloon--dropmenu, .js-controls, .show {background-color: #201424 !important;}'
  279. +
  280. '.activity-react__item {border: 1px solid #30195F !important; background-color: #23132C !important;}'
  281. +
  282. '.more-details ul li, .appfeatures li, .more-details, .more-details li, .press_list li span, .callout h6 {color: #DCD !important;}'
  283. +
  284. '.static_context_banner {border-bottom: 1px solid #311762 !important; box-shadow: 0px 1px 0px rgba(45, 20, 83, 0.6) !important;}'
  285. +
  286. '.white {background-color: #17111D !important;}'
  287. +
  288. '.purple {background-color: #311D54 !important; color: #DCD !important;}'
  289. +
  290. '.noty_message, .fp-carousel__title {color: #DCD !important;}'
  291. +
  292. '#carousel .nav ul li a::before {box-shadow: 0px 0px 0px 2px #332057 inset, 0px 0px 0px 3px #000 inset !important;}'
  293. +
  294. '#carousel .nav ul li.active a::before {box-shadow: 0px 0px 0px 2px #7E3ABD inset, 0px 0px 0px 3px #000 inset !important;}'
  295. +
  296. '.balloon--cols .balloon__list ~ .balloon__list {box-shadow: -1px 0px 0px #4C3874 !important;}'
  297. +
  298. 'ul.mininav, hr:after {border-bottom: 1px solid #402C56 !important;}'
  299. +
  300. '.article-content div div {border: 2px solid rgb(67, 46, 107) !important;}'
  301. +
  302. 'li.article {background: #2F193F url("http://assets2.desk.com/images/portal/icon-types.png") no-repeat scroll 20px -258px !important; border: 1px solid #4C2F7B !important;}'
  303. +
  304. '.pagination, .prime-offers__list.prime-offers--offset::after {background-color: #17141F !important;}'
  305. +
  306. '#paginate_block .current {background-color: #2F193F !important; border: 1px solid #4C2F7B !important; color: #DCD !important;}'
  307. +
  308. 'hr {opacity: 0;}'
  309. +
  310. 'hr:after {opacity: 1 !important;}'
  311. +
  312. '.border, .text-container, #noty_bottomCenter_layout_container li, .notification__container {border: 1px solid #451987 !important;}'
  313. +
  314. '.fp-container {color: #dfd5ef !important;}'
  315. +
  316. '.activity-card, .fp-side, #noty_bottomCenter_layout_container li, .linklist a, .st-next, .col-header .title, .following-col .following-list .channel .viewers, .flex, .noty_message, .border, .text-container, .fp-side__footer, .notification-center__footer {background: #271e35 !important;}'
  317. +
  318. 'select.form__input, textarea.form__input, .form__input[type="text"], .form__input[type="email"], .form__input[type="password"], .form__input[type="search"] {background-color: #140a2d !important; color: #c4b6dd !important;}'
  319. +
  320. 'select.form__input, textarea.form__input, .form__input[type="text"], .form__input[type="email"], .form__input[type="password"], .form__input[type="search"] {box-shadow: inset 0 0 0 1px #6b47b3,0 0 0 transparent !important;}'
  321. +
  322. '.header-announcement__bar, .header-announcement__bar .flex--verticalCenter {background: #0E9DD9 !important;}'
  323. +
  324. '.fp-carousel-nav__item {border-bottom: .4rem solid #3d2c5f !important;}'
  325. +
  326. '.fp-carousel-nav__item--active {border-bottom: 4rem solid #6441a4 !important;}'
  327. +
  328. '.offer-item--title {background: #1c0d39 !important; border-bottom: .1rem solid #4f15c3 !important;}'
  329. +
  330. '.balloon {box-shadow: 0 0 0 1px #552ca5,0 1px 1px rgba(0,0,0,.25) !important;}'
  331. +
  332. '.offer-list__core::after {background-image: linear-gradient(rgba(255,255,255,0) 0,#361853 100%) !important;}'
  333. );