Twitch dark theme

By 2_am, ago, written in CSS.
URL http://pastecode.org/index.php/view/84493611
Download Paste or View RawExpand paste to full width of browser | Change Viewing Options
  1. @namespace url(http://www.w3.org/1999/xhtml);
  2.  
  3. @-moz-document domain("twitch.tv") {
  4.  * { font-family: Verdana !important; line-height: unset !important; }
  5.  a { color: #DCDCDC !important; font-size: unset !important; }
  6.  /* twitch logo */ .js-top-nav-logo, /* twitch tickets on sale */ #noty_bottomCenter_layout_container, /* recommended channels */ .js-recommended-channels, .recommended-channels, /* friends list */ .js-friend-list, /* navigation search bar top top */ .new-search__input[type="text"], /* extra menus on top - help, about etc */ #ember679.js-top-nav-overflow.top-nav__overflow.flex__item.balloon-wrapper.ember-view, /* get prime menu */ #ember672.flex__item.ember-view[role="presentation"], /* get desktop menu */ li.flex__item:nth-child(2), /* sign up button */ #header_signup, /* get prime button crown */ .top-nav__prime-anchor, /* directory big text */ .directory_header, /* language selector */ div.filter-bar, /* hide text under login/browse, empty if not logged in */ .sc-empty-state__text, .sc-empty-state, /* hide facebnook button */ button.fb_button, .emoticon, .badge, /* hiding logged in top menu crap - prime, search, desktop*/ li.flex__item:nth-child(3), li.flex__item:nth-child(4), li.flex__item:nth-child(5), .form__icon-group, /* text above followed channels */ .mg-t-1, /* streamer avatar */ .js-username-hover, .cn-bar__displayname, .js-cn-tab-live, /* top channel banner */ .cn-cover-wrap, /* under the video player area - crap */ .qa-panels-container, .chat-header, .pinned-cheer--expandable, .chat-buttons-container, .chat-rules, .js-bits-emote-image, .js-cn-bar, .js-share-box, .js-channel-options, .tabbed-split__panel, /* info under the video player */ .tw-tabs
  7.  
  8.  { display: none !important; }
  9.  
  10.  /* end hiding elements ------------------------------------------------------------------------------------------------------------------------ */
  11.  /* background almost everywhere */ .tse-scroll-content { background-color: black !important; }
  12.  /* streamer */ .card__info a { font-color: white !important; font-size: 10px !important; }
  13.  .card__info { font-color: white !important; font-size: 10px !important; }
  14.  /* streamer title name viewers */ .card__body a { font-size: 10px !important; }
  15.  /* streamer watchers */ p.card__info { color: #888 !important; border-bottom: 1px dotted #888; margin-bottom: -10px !important; margin-top: -5px !important; }
  16.  /* relocating log-in button */ #header_login { left: 100px !important; top: 10px !important; position: absolute; color: yellow !important; }
  17.  /* login box - General */ .auth-form { background-color: black !important; }
  18.  #passport_iframe_container { background-color: black !important; }
  19.  form#loginForm { background-color: black !important; }
  20.  .tabs { background-color: black !important; }
  21.  input { background-color: black !important; color: white !important; border: 1px solid #666 !important; border-radius: 3px !important; }
  22.  .text-content { background-color: black !important; border: unset !important; }
  23.  /* followed channels - logged in - */ .sc-item__title { font-size: 10px !important; font-weight: bold !important; }
  24.  /* background color for all the on-line/off-line streamers */ .sc-item__followed-channel { color: white !important; background-color: black !important; }
  25.  .sc-item__followed-channel a { color: white !important; font-size: 10px !important; font-family: Verdana !important; }
  26.  .flex-grow-1 { font-size: 10px !important; font-family: verdana !important; color: #999 !important; font-weight: normal !important; }
  27.  .top-nav__nav-items-list { background-color: black !important; }
  28.  .cn-bar { background-color: black !important; border: unset !important; }
  29.  /* nickname in chat */ .from { color: #999 !important; font-size: 10px !important; }
  30.  .chat-room { font-size: 10px !important; font-color: red !important; background-color: black !important; height: 100% !important; }
  31.  .chat-line { margin: 0px !important; padding: 0px !important; margin-bottom: 5px !important; }
  32.  .ember-chat { font-size: 10px !important; font-color: orange !important; }
  33.  .chat-container { background-color: black !important; color: pink !important; border: 0px !important; }
  34.  .message { font-family: Verdana; font-size: 10px; color: white !important; }
  35.  .js-chat_input{ background-color: #444 !important; color: orange; }
  36.  .metadata-box { background-color: black !important; border: 0px !important; color: white !important; }
  37.  select.form__input, textarea.form__input, .form__input[type="text"], .form__input[type="email"], .form__input[type="password"], .form__input[type="search"] { background-color: #111 !important; color: white !important; font-weight: bold !important; border: 1px solid #333 !important; border-radius: 5px !important; }
  38.  .balloon--tooltip, .balloon--up, .special-message, .system-msg { background-color: #222 !important; color: #666 !important; border: 0px !important; }
  39.  /* info under the vide player - viewers, title etc. */ .qa-card__title, .js-card__info a { font-size: 10px !important; color: #555; }
  40.  .button--icon-only { background-color: black !important; border: 0px solid !important; }
  41.  .conversations-content, .conversations-list-bottom-bar { border: 0px solid !important; }
  42.  .qa-cn-metabar { opacity: 0.2 !important; }
  43.  .qa-cn-metabar:hover { opacity: 1 !important; }
  44.  /* container for all on-line and off-line users - left side */ .sc-channels__live { opacity: 0.2 }
  45.  .sc-channels__live:hover { opacity: 1 }
  46.  }

Here you can reply to the paste above

Make Private

   

Feeling clever? Set some advanced options.