Skip to content

Twitch Better UI by designany

Screenshot of Twitch Better UI
Homepage Write a review Install Get Stylus

Details

Authordesignany

LicenseCC BY NC 4.0

Categorytwitch.tv

Created

Updated

Size12 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Hello, this is addon for twitch.tv to look better other elements ;)

Notes

Details:
Better Chat
Better Panel Description
Better Button
Better Cinema mode
Better Live Icon
Better Title and more more...

Version Release 1.0.3F
Updated to new version

  • Fixed button
  • Added more maringes from icon to the name

Version Release 1.0.3
Updated to new version

  • Fixed soruce
  • Back Title to left

Version Release 1.0.2
Updated to new version

  • Added better live icon
  • Fixed chat to newest version of twitch
  • Added more shadows to elements

Version Release 1.0.1:

  • Added better transperet window
  • Added better ui Cinema mode
  • Added better dark color on chat and top bar
  • Added Information Version (TBUI) in Video Player

Version Release 1.0.0:

  • Released

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Twitch Better UI
@namespace      USO Archive
@author         Dziondzio
@description    `Modernize Twitch with a new clean, simple, and compact UI.`
@version        1.0.3
@license        CC-BY-NC-4.0
@preprocessor   uso

==/UserStyle== */


@-moz-document domain("twitch.tv") {

    @font-face {
        font-family: Roboto;
        src: url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
        font-weight: 400;
        font-style: normal;
    }

    .chat-badge {
    display: inline-block;
    padding: .1em .2em .3em;
                border-radius: 10px;

    margin: .15em .1em
    }
    .tw-image{
        border-radius: 10px;
    }
    
    .bHITno + div span.message {
    background-color: #000;
    color: #000;
    }

    .bHITno + div span.message:hover {
    background-color: inherit;
    color: inherit;
    }
         
    
    .stream-chat{
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        animation: slide-bck-center;
        opacity: 0.8;
    }

    .about-section {
         color: #fff;
         line-height: 50px;
         text-align: center;
         padding: 8px;
    }
    
    .social-media-link__accent  {
        border-radius: 8px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        padding: 15px !important;
        animation: slide-bck-center;
    }
    
    
    .user-avatar-card__live {
         opacity: 1;
         border: 4px solid #ff001b;
         color: #fff;
         font-size: 20px;
         line-height: 150px;
         animation: animate 2s linear infinite;
         border-radius: 40px;
         padding: 40px;
         width: 80px;
         height: 88px;
        }
    
    
    .live-indicator-container {
       opacity: 0.1;
    }

    .tw-channel-status-text-indicator {  
         opacity: 0;
         color: inherit;
         border-radius: 1px;
         padding: 1px;
         width: 1px;
         background-position: left top;
         background-repeat: repeat;
         text-align: center;
         height: 1px;
    }
    
    .tw-title {
        color: inherit;
        position: relative;
        box-sizing: border-box;
        padding: 2px !important;
        opacity: 1;
        overflow: hidden;
        }

    .chat-line__message:not(.special-message) {
        color: inherit;
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        padding: 15px !important;
        animation: newMessage 750ms forwards;
    }
    .chat-line__message:nth-child(2n):not(.special-message) {
        padding: 0 15px;
        background-color: rgba(0, 0, 0, .1) !important;
    }
    .chat-line__message:nth-child(2n + 1):not(.special-message) {
        padding: 0 15px;
        background-color: inherit !important;
    }
    .special-message {
        color: inherit;
        position: relative;
        box-sizing: border-box;
        padding: 15px !important;
        opacity: 1;
        overflow: hidden;
    }
    .chat-line__message-body--highlighted {
        color: white;
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        animation: slide-bck-center;
    }
    .channel-points-reward-line {
        color: #7200ff;
    }
    .panel-description {
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        padding: 1px !important;
        animation: slide-bck-center;
    }
    .tw-line-height-body {
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        padding: 15px !important;
        animation: slide-bck-center;
    }

    .default-panel {
        width: 250px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        padding: 15px !important;
        animation: slide-bck-center;
    }

    .slide-bck-center {
        animation: slide-bck-center 0.45s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    }
    .simplebar-content {      
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        padding: 15px !important;
        animation: slide-bck-center;
    }
    .channel-root__right-column {
        text-align: center;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        animation: slide-bck-center;
    }
    .persistent-player {
        position: relative;
        box-sizing: border-box;
        opacity: 1;
        overflow: hidden;
        animation: slide-bck-center;
    }


    #button .tw-toggle__button {
        display: block;
        width: 36px;
        margin: 0px;
        background: #A1A1A1;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 24px;
        transition: all 0.3s ease-in 0s;
    }
    .tw-toggle__button:after {
        position: relative;

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    .tw-toggle__button:before {
        display: block;
        float: left;
        width: 50%;
        height: 36px;
        padding: 0;
        line-height: 32px;
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    .tw-root--theme-dark .chat-room {
        background: transparent!important;
    }
    .tw-root--theme-dark .channel-root__right-column {
        background: transparent!important;
    }
    .whispers--theatre-mode.whispers--right-column-expanded {
        right: 46rem!important;
    }
    .tw-root--theme-dark .pl-controls-top {
        background: transparent;
    }
    .tw-root--theme-dark .channel-page__right-column {
        background-color: transparent!important;
    }
    .tw-theme--dark .channel-page__right-column {
        background-color: transparent!important;
    }
    .tw-theme--dark .tw-c-background-alt-2 {
        background-color: transparent!important;
    }
    .tw-theme--dark .c-background-alt-2 {
        background-color: transparent!important;
    }
    .tw-theme--dark .chat__pane {
        background-color: transparent!important;
    }
    .tw-theme--dark .chat-room__pane {
        background-color: transparent!important;
        border: none!important;
    }
    .tw-theme--dark .chat__header {
        background-color: transparent!important;
        border: none!important;
    }
    .tw-theme--dark .chat-room__header {
        background-color: transparent!important;
        border: none!important;
    }
    .tw-theme--dark .chat__pane {
        border: none!important;
    }
    .tw-theme--dark .tw-textarea {
        background-color: transparent;
    }
    .tw-theme--dark .pinned-cheer__bounding-box {
        background-color: transparent;
        border: none!important;
    }



    .theme--dark .channel-page__right-column {
        background-color: transparent!important;
    }
    .theme--dark .tw-c-background-alt-2 {
        background-color: transparent!important;
    }
    .theme--dark .c-background-alt-2 {
        background-color: transparent!important;
    }
    .theme--dark .chat__pane {
        background-color: transparent!important;
    }
    .theme--dark .chat-room__pane {
        background-color: transparent!important;
        border: none!important;
    }
    .channel-page__video-player--theatre-mode {
        width: 100%!important;
    }
    .theme--dark .chat__header {
        background-color: transparent!important;
        border: none!important;
    }
    .theme--dark .chat-room__header {
        background-color: transparent!important;
        border: none!important;
    }
    .theme--dark .chat__pane {
        border: none!important;
    }
    .theme--dark .tw-textarea {
        background-color: transparent;
    }
    .video-player--theatre .player-buttons-right {
        right: 33rem!important;
    }
    .video-player--theatre.video-player--logged-in .video-player__container {
        bottom: 0!important;
    }
    .persistent-player.persistent-player--theatre {
        width: 100%!important;
    }
    .theme--dark .pinned-cheer__bounding-box {
        background-color: transparent;
        border: none!important;
    }
    .tw-root--theme-dark .tw-c-background-base {
        background-color: transparent!important;
    }
    .tw-root--theme-dark .tw-border-l {
        background: none!important;
    }
    .tw-theme--dark .tw-border-l {
        border-left: none !important;
    }
    .tw-theme--dark .pl-controls-top {
        background: none!important;
    }

    .tw-theme--dark .tw-c-text {
        text-shadow: black 1px 1px 0, black -1px -1px 0, black -1px 1px 0, black 1px -1px 0;
    }

    .tw-theme--dark .tw-c-background {
        background: none!important;
    }

    .tw-theme--dark .vod-message.vod-message--focused,
    .tw-theme--dark .vod-message:hover {
        background: transparent!important;
    }

    .tw-root--theme-dark .tw-border-l {
        border-left: 1px solid transparent!important;
    }
    .tw-root--theme-dark .tw-textarea {
        background: transparent;
    }
    .tw-root--theme-dark .tw-c-background-alt {
        background-color: transparent!important;
    }
    .tw-root--theme-dark .tw-c-background-base.whispers-thread,
    .whispers-thread--focused {
        background-color: #19171c!important;
    }
    .tw-root--theme-dark .tw-c-background-base.whispers-threads-box__container,
    .whispers-threads-box__container--open {
        background-color: #19171c!important;
    }
    #default-player > div > div.ho...

Reviews

No reviews yet.