Skip to content

Instantly share code, notes, and snippets.

@EncodeTheCode

EncodeTheCode/TwitchSteamNewThemeStylish.css

Last active April 20, 2018 00:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EncodeTheCode/f5d9166616e1f805d9989968a5bfc6e5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EncodeTheCode/f5d9166616e1f805d9989968a5bfc6e5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
TwitchSteamNewThemeStylish.css
@-moz-document domain(www.twitch.tv) {
body, textarea {
font-family: Arial, Helvetica, Verdana, sans-serif;
}
body {
background: #1b2838;
text-align: left;
color: #8F98A0;
font-size: 14px;
margin: 0;
padding: 0;
}
div::-webkit-scrollbar-corner, div::-webkit-scrollbar, iframe::-webkit-scrollbar-corner, iframe::-webkit-scrollbar {
background: #171717;
}
div::-webkit-scrollbar-button, iframe::-webkit-scrollbar-button {
background-color: #575552;
border-radius: 2px;
background-position: center;
background-repeat: no-repeat;
}
div::-webkit-scrollbar-corner, div::-webkit-scrollbar, iframe::-webkit-scrollbar-corner, iframe::-webkit-scrollbar {
background: #171717;
}
div::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb {
background: #5d5b58;
border-radius: 2px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFW…uPjybepKNHjvxHpQ+j0MSbtGvXzv/I9G44vYN4kwACDAA7RESWY5qxTAAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center center;
}
div::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track {
border-radius: 2px;
-webkit-border-image: none;
}
.chat_dialog_content_inner {
padding: 9px;
word-wrap: break-word;
}
div {
display: block;
}
.chat-list__lines > div:nth-child(3) > .simplebar-content {
padding-bottom: 17px;
margin-right: -17px;
position: relative;
left: 3px;
right: 9px;
top: 3px;
bottom: 114px;
border-radius: 3px;
box-shadow: 0px 0px 0px 1px #4d4b48;
border: 1px solid #4d4d48;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(77, 77, 72);
border-top: none;
background-color: #1c1b19;
background: -webkit-linear-gradient( top, #383635 5%, #1c1b19 95%) !important;
background: linear-gradient( to bottom, #383635 5%, #1c1b19 95%) !important;
/* margin-right: 0.01em !important; */
padding: 0;
}
.chat-list__lines > div:nth-child(3) > .simplebar-content {
background: #1b2838;
text-align: left;
color: #8F98A0;
font-size: 14px;
margin: 0;
padding: 0;
}
.chat-input > div:nth-child(1) {
border: none !important;
outline: none !important;
background-color: #565658 !important;
font-size: 13px !important;
color: #BFBFBF !important;
}
.tw-textarea{
border: none !important;
outline: none !important;
box-shadow: none;
/* background-color: transparent; */
font-size: 13px !important;
color: #C6D4DF !important;
}
textarea {
-webkit-appearance: textarea !important;
background-color: white;
-webkit-rtl-ordering: logical !important;
flex-direction: column !important;
resize: auto !important;
cursor: text !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
border-width: 1px !important;
border-style: solid !important;
border-color: initial !important;
border-image: initial !important;
padding: 2px !important;
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb !important;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
}
textarea.tw-overflow-hidden, textarea.tw-textarea--no-resize {
background-color: transparent !important;
}
textarea:active.tw-overflow-hidden, textarea:active.tw-textarea--no-resize {
border-color: transparent !important;
}
.chat-input > div:nth-child(1) > div:nth-child(1) > textarea:nth-child(1){
background-color: #454546 !important;
}
input.tw-input:nth-child(1){
background-color: #2D2D2D;
border: 1px solid #908B9899;
}
section.tw-full-width > .chat-input, .tw-pd-b-2, .chat-input > .tw-pd-x-2 {
padding-bottom: 2rem !important;
position: relative;
overflow: visible;
border: 1px solid #000000;
background-color: #383635;
box-shadow: 1px 1px 0 0 #373b42;
padding: 0.65em;
padding-right: 0.65em;
padding-bottom: 0.65em;
padding-left: 0.65em;
}
button.tw-button {
text-decoration: none !important;
color: #ffffff !important;
background: rgba(102,192,244,1);
/* background: -webkit-linear-gradient( top, rgba(102,192,244,1) 5%, rgba(47,137,188,1) 95%); */
background: linear-gradient( to bottom, rgba(102,192,244,1) 5%, rgba(47,137,188,1) 95%);
}
button.tw-button:nth-child(2) > span:nth-child(1){
padding: 0 15px;
font-size: 15px;
line-height: 30px;
border-radius: 2px;
display: block;
cursor: pointer;
background: rgba(33,101,138,1);
background: -webkit-linear-gradient( top, rgba(33,101,138,1) 5%, rgba(23,67,92,1) 95%);
background: linear-gradient( to bottom, rgba(33,101,138,1) 5%, rgba(23,67,92,1) 95%);
}
div.chat-viewers-list:nth-child(1),div.chat-viewers-list:nth-child(2),div.chat-viewers-list:nth-child(3){
background-color: rgba(110,110,190,0.1);
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0.0009em solid #C6C6C6;
border-radius: 0.35em 0.35em !important;
}
/* .chat-input__buttons-container > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > .tw-button-icon {color: rgba(102,192,244,1);} */
.tw-button-icon {
color: rgba(102,192,244,1);
}
.tw-button--hollow {
border: 1px solid #C7C3CF99;
background: transparent;
color: #8A6DC0;
}
.tw-button-icon--hollow {
border: 1px solid #7E7C8380;
background: transparent;
color: #695F7B;
}
button.tw-theme--dark, button.tw-theme--light .tw-button, button.tw-button:nth-child(2) {
border: 1px solid transparent;
background: #3FBDf899;
color: #FFF;
}
button:hover.tw-theme--dark, button:hover.tw-theme--light .tw-button:hover, button:hover.tw-button:nth-child(2) {
border: 1px solid transparent;
background: #85C3E2CC;
color: #FFF;
}
.chat-input > div:nth-child(1) > div:nth-child(1) {
background-color: rgba( 0, 0, 0, 0.2 );
border-radius: 3px;
border: 1px solid #000;
box-shadow: 1px 1px 0 0 rgba( 91, 132, 181, 0.2 );
color: #C6D4DF;
margin-bottom: 6px;
outline: none;
padding: 4px 6px !important;
}
.chat-list__lines {
background-color: rgba(32,32,32,0.9);
}
.tw-pd-l-2 {
background-color: #3D3D3D !important;
}
.tw-c-text-alt {
color: #BCB6C6 !important;
text-shadow: 0 0 0.1em rgba(0,0,0,0.75), 0 0 0.25em rgba(250,250,250,0.9);
}
.tw-border-l {
border-left: 1px solid #DAD8DEcc !important;
}
.tw-border-b {
border-bottom: 1px solid #4B4B4Bcc !important;
}
.tw-border-r {
border-right: 1px solid #3D3D3Dcc !important;
}
.tw-theme--dark .tw-c-background-alt-2 {
background-color: #3c3c3c !important;
}
.chat-line__moderation, .chat-line__status {
color: #C0B8CE;
}
.twilight-root {
background-color: #3D3D3D;
color: #C7BDD5; /* #C2C2C2 */
}
.channel-header {
background-color: #212121cc;
border-bottom: 1px solid #505050b3;
min-height: 3rem;
}
.channel-header__user {
color: #C6B7DB !important;
}
.channel-header__item {
color: #D8C9EF;
}
.channel-header__item-count {
color: #BAAFCC;
}
.channel-page__feed-container > div:nth-child(1) > div:nth-child(1) > div {
border-radius: 0.42em 0.42em 0em 0em;
}
.channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div {
background-color: #3F3F3Fcc;
border-radius: 0.42em 0.42em;
}
.channel-page__feed-container > div:nth-child(1) > div {
border-radius: 0.42em 0.42em;
}
.channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(4) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(5) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(6) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(7) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(8) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(9) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(10) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(11) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(12) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(13) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(14) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(15) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(16) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(17) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(18) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(19) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(20) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(21) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(22) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(23) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(24) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(25) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(26) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(27) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(28) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(29) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(30) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(31) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(32) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(33) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(34) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(35) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(36) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(37) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(38) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(39) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(40) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(41) > div:nth-child(1) > div:nth-child(3), .channel-page__feed-container > div:nth-child(1) > div:nth-child(2) > div:nth-child(42) > div:nth-child(1) > div:nth-child(3) {
border-radius: 0.67em 0.67em !important;
background-color: #5D5C5CE6;
}
.activity-reaction__emote-contain {
position: relative;
left: -0.1078em;
}
.whispers-threads-box__header {
background-color: #313238 !important;
}
.thread-header__title-bar-container {
/* background: #FAF9FA; */
/* background-color: rgb(250,249,250); */
background: #565462;
background-color: rgb(86,84,98);
box-shadow: inset 0 0 0 1px #81739E,0 2px 0 rgba(0,0,0,.05) !important;
}
.thread-header{
background-color: #565462 !important;
}
div.tw-c-background-alt:nth-child(3) {
background-color: #565658 !important;
}
#threads-box-filter {
border: 1px solid #56545ACC;
background: #3D3D3D;
color: #DED9E7;
}
.video-player-hosting-ui__container {
-webkit-box-shadow: 0px 0px 5px 0px rgba(22, 22, 22, 0.22), 0px 0px 5px 0px rgba(190, 190, 227, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(22, 22, 22, 0.22), 0px 0px 5px 0px rgba(190, 190, 227, 0.2);
box-shadow: 0px 0px 5px 0px rgba(22, 22, 22, 0.22), 0px 0px 5px 0px rgba(190, 190, 227, 0.2);
}
.top-nav__menu {
background-color: rgb(57,57,57);
}
.side-nav__overlay-wrapper {
background-color: rgba(42,42,42,0.9) !important;
}
/* First entry in Whisper Box Highlighted */
/*
.whispers-threads-box__container:hover > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
background-color: #7D7D7DCC;
}
.whispers-threads-box__container:hover > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:hover {
background: 030303CC; // #7D7D7DCC
}
.whispers-threads-box__container:hover > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
background: #7F7F7FCC;
}
*/
.whispers-threads-box__container:hover > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2n+2) {
background: #3F3F3FCC;
}
.whispers-threads-box__container:hover > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4n+2) {
background: #303030CC;
}
.whispers-threads-box__container:hover > div:nth-child(2) > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(odd) {
background: #3A3A3ACC;
}
div.whispers-list-item:hover {
background-color: #7D7D7DCC; /* Highlight Whisper Box entries on Hover */
}
/* Colorization on different rows. Even collides with Odd and previous styles.
div:nth-child(2n+2) {
background: #3F3F3FCC;
}
div:nth-child(4n+2) {
background: #303030CC;
}
div:nth-child(odd) {
background: #3A3A3ACC;
}
div:nth-child(even) {
background: #7F7F7FCC;
}
*/
/* Default Links
a{color:#6441a4;text-decoration:none;}
.tw-theme--dark a{color:#b19dd8;}
.tw-theme--light a,a:hover{color:#6441a4;}
a:hover{text-decoration:underline;}
.tw-theme--dark a:hover{color:#b19dd8;}
.tw-theme--light a:hover{color:#6441a4;}
*/
a{
color: #b597ed;
text-decoration: none;
text-shadow: 0 0 0.04em rgba(0,0,0,0.9), 0 0 0.23em rgba(255, 255, 255, 0.38);
}
a:hover{
color:rgb(143,109,194);
}
img {
border: none;
vertical-align: top;
max-width: 100%;
border: 4px double transparent;
}
section.tw-full-width > div:nth-child(1), .tw-border-l {
border-left: 1px solid #46454A !important;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(70,69,74);
}
.tw-border-t {
border-top: 1px solid #222223 !important;
}
.channel-info-bar {
background-color: #2424244D;
}
.channel-header__item::before {
background: #4F4A57;
content: "";
position: absolute;
width: .1rem;
height: 3.6rem;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.whispers-threads-box__unread {
color: #fff;
background-color: #5DA730;
}
.whispers-threads-box__unread::before {
content: "";
bottom: 100%;
border-bottom: .5rem solid #5DA730;
}
.whispers-threads-box__unread::after {
content: "";
top: 100%;
border-top: .5rem solid #5DA730;
}
.tw-c-background {
background-color: #3D3D3D !important; /* #2020204D !important; */
}
.tw-c-text {
color: #d3c2ec !important;
}
.tw-c-text-alt-2 {
color: #C0B5D2 !important;
}
.tw-c-background-alt-2 {
background-color: #1D1D1D4D !important;
}
#nav-search-input{
border: 1px solid #56545ACC;
background: #3D3D3D;
color: #DED9E7;
}
/* .search-result-section__titlesep {
color: #C6B9DA;
background: #9E9B9ECC;
text-shadow: 0 0 2.44em rgba(219, 219, 219, 0.9);
} */
.search-result-section__titlesep {
color: #E8D7E9CC;
background: #9E9B9ECC;
text-shadow: 0 0 2.44em rgba(219, 219, 219, 0.9);
}
.search-results-panel {
background-color: #7473734D !important;
border-radius: 0.42em 0.42em 0.42em 0.42em;
} /* .tw-c-background */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment