☰

Twitch, Simplify Chat

Simplify for chat

  1. // ==UserScript==
  2. // @name         Twitch, Simplify Chat
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.0
  5. // @description  Simplify for chat
  6. // @author       You
  7. // @match        https://twitch.tv/*
  8. // @match        https://www.twitch.tv/*
  9. // @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
  10. // @grant        GM.addStyle
  11. // @run-at       document-end
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.     GM.addStyle(`
  17. .persistent-player--theatre[data-a-player-state="theatre"] {
  18.     width: 100% !important;
  19. }
  20.  
  21. /* === background-color === */
  22. .right-column--theatre.right-column--beside {
  23.     .stream-chat-header,
  24.     .channel-root__right-column,
  25.     .channel-root__right-column > div,
  26.     .chat-room-component-layout,
  27.     .chat-room__content > div div,
  28.     .chat-room {
  29.         background-color: #0000 !important;
  30.     }
  31.     .tw-transition-group {
  32.         background-color: var(--color-background-base) !important;
  33.     }
  34.     .chat-room__content .chat-input {
  35.         [data-a-target="emote-picker"],
  36.         [role="dialog"] {
  37.             background-color: var(--color-background-base) !important;
  38.         }
  39.     }
  40. }
  41.  
  42. /* === header footer margin === */
  43. body {
  44.     --right-column-full-width: 70rem;
  45.     --right-column-outside-width: 30rem;
  46.     --right-column-outside-margin: -30rem;
  47.     --right-column-inside-width: 40rem;
  48. }
  49. .right-column--theatre.right-column--beside,
  50. .right-column--theatre.right-column--beside .channel-root__right-column {
  51.     width: var(--right-column-inside-width) !important;
  52. }
  53. .right-column--theatre.right-column--beside {
  54.     padding: 50px 0 !important;
  55.     height: 70% !important;
  56.     min-height: 15vh !important;
  57. }
  58. .right-column--theatre.right-column--beside .right-column__toggle-visibility {
  59.     margin-top: 50px;
  60.     position: absolute;
  61. }
  62.  
  63. /* ===  === */
  64. .right-column--theatre.right-column--beside {
  65.     .channel-root__right-column > div {
  66.         border: none !important;
  67.     }
  68.     .chat-list--default,
  69.     .chat-list--other {
  70.         width: var(--right-column-full-width) !important;
  71.         margin-left: var(--right-column-outside-margin);
  72.     }
  73.     .chat-line__no-background > div {
  74.         display: flex !important;
  75.         justify-content: flex-end;
  76.         width: var(--right-column-full-width) !important;
  77.     }
  78.     .chat-line__timestamp,
  79.     .chat-line__username-container {
  80.         opacity: 0.2;
  81.         transition: opacity ease 0.2s;
  82.     }
  83.     :hover .chat-line__timestamp,
  84.     :hover .chat-line__username-container {
  85.         opacity: 1;
  86.     }
  87.     .chat-line__no-background [aria-hidden] {
  88.         display: none;
  89.     }
  90.     [data-a-target="chat-line-message-body"] {
  91.         width: var(--right-column-inside-width) !important;
  92.         padding-left: 2rem;
  93.         text-shadow: 0 0 2px #000;
  94.     }
  95.     .chat-room__content > div:not(.chat-list--default, .chat-list--other) {
  96.         opacity: 0.05;
  97.         transition: opacity ease 0.2s;
  98.     }
  99.     :hover .chat-room__content > div:not(.chat-list--default, .chat-list--other) {
  100.         opacity: 1;
  101.     }
  102. }
  103.     `);
  104. })();