bring back twitch from 2014
Twitch 2014 by Mayara
Details
AuthorMayara
LicenseNo License
Categorytwitch.tv
Created
Updated
Size29 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name 2014 twitch v2
@namespace github.com/openstyles/stylus
@version 1.4.2
@description brings back 2014 twitch to an extent
@author 11pixels
@preprocessor less
==/UserStyle== */
@-moz-document domain("twitch.tv") {
:root {
--border-radius-rounded: 0;
--font-display: "Korolev-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-weight-semibold: 400;
--font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
// mixins
.mxWhiteBtn {
&, &:hover, &:active {
background: linear-gradient(#f5f5f5,#ddd);
border-top: 1px solid #0003;
border-left: 1px solid #0000004d;
border-right: 1px solid #0000004d;
border-bottom: 1px solid #00000059;
box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgb(0 0 0 / 7%);
text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
color: #666;
border-radius: 0;
}
&:active {
background: linear-gradient(#ddd,#bbb);
border-top: 1px solid #00000059;
border-left: 1px solid #0000004d;
border-right: 1px solid #0000004d;
border-bottom: 1px solid #0000004d;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 15%), 0 1px 0 rgb(255 255 255 / 65%);
}
}
.mxPurpleBtn {
&, &:hover, &:active {
background: linear-gradient(#8266b6,#533787);
border-top: 1px solid #5b3f8f;
border-left: 1px solid #412771;
border-right: 1px solid #412771;
border-bottom: 1px solid #2a1453;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 1px 0 rgb(0 0 0 / 15%);
text-shadow: 0 1px 0 rgb(0 0 0 / 75%);
color: #fff;
border-radius: 0;
}
&:active {
background: linear-gradient(#553c87,#372364);
border: 1px solid #2a1453;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 50%), 0 1px 0 rgb(255 255 255 / 65%);
}
}
// body
html, body {
font-family: Helvetica !important;
}
.fMxWnV {
background: #EAEAEA !important;
}
.tw-root--theme-dark .fMxWnV {
background: #2b2b2b !important;
}
// reused icons
// expand
[d="M4 16V4H2v12h2zM13 15l-1.5-1.5L14 11H6V9h8l-2.5-2.5L13 5l5 5-5 5z"] {
d: path("M20 0V20H0V0H20ZM19 1V19H1V1H19Z M13 9H12V8H11V7H10V6H8V14H10V13H11V12H12V11H13V9Z");
fill-rule: evenodd;
}
// collapse
[d="M16 16V4h2v12h-2zM6 9l2.501-2.5-1.5-1.5-5 5 5 5 1.5-1.5-2.5-2.5h8V9H6z"] {
d: path("M0 0V20H20V0H0ZM1 1V19H19V1H1Z M7 9H8V8H9V7H10V6H12V14H10V13H9V12H8V11H7V9Z");
fill-rule: evenodd;
}
// heart
[d="M9.171 4.171A4 4 0 0 0 6.343 3H6a4 4 0 0 0-4 4v.343a4 4 0 0 0 1.172 2.829L10 17l6.828-6.828A4 4 0 0 0 18 7.343V7a4 4 0 0 0-4-4h-.343a4 4 0 0 0-2.829 1.172L10 5l-.829-.829zm.829 10 5.414-5.414A2 2 0 0 0 16 7.343V7a2 2 0 0 0-2-2h-.343a2 2 0 0 0-1.414.586L10 7.828 7.757 5.586A2 2 0 0 0 6.343 5H6a2 2 0 0 0-2 2v.343a2 2 0 0 0 .586 1.414L10 14.172z"] {
d: path("M8 3H4V4H3V5H2V10H3V11H4V12H5V13H6V14H7V15H8V16H9V17H11V16H12V15H13V14H14V13H15V12H16V11H17V10H18V5H17V4H16V3H12V4H8V3Z");
}
// camera
[d="M12.002 3.999a2 2 0 0 1 2 2v2L18 6v8l-3.998-2v2a2 2 0 0 1-2 1.999h-8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h8zM12 6H4v8h8V6z"] {
d: path("M12 5H2V15H12V11H13V12H14V13H15V14H16V15H18V14V13V12V11V9V8V7V6V5H16V6H15V7H14V8H13V9H12V5Z");
}
// dm kind of messages
[d="M7.828 13 10 15.172 12.172 13H15V5H5v8h2.828zM10 18l-3-3H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2l-3 3z"] {
d: path("M2 4V16H18V4H2ZM4 6V7H5V8H6V9H7V11H6V12H5V13H4V14H6V13H7V12H8V11H9V12H11V11H12V12H13V13H14V14H16V13H15V12H14V11H13V9H14V8H15V7H16V6H14V7H13V8H12V9H11V10H9V9H8V8H7V7H6V6H4Z");
fill-rule: evenodd;
}
// inbox kind of messages
[d="M4 3h12l2 4v10H2V7l2-4zm.236 4H8v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7h3.764l-1-2H5.236l-1 2zM16 9h-2.17A3.001 3.001 0 0 1 11 11H9a3.001 3.001 0 0 1-2.83-2H4v6h12V9z"] {
d: path("M17 3H3V17H17V3ZM5 12H8V13H9V14H11V13H12V12H15V5H5V12Z")
}
// header
.top-nav__menu {
background: #202020 !important;
// logo
.tw-animated-glitch-logo {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAAhCAYAAAArgt62AAADvklEQVRoBe2aIY8UQRCFL4AgCBAkeBIkhuAQCCQKgcMgMHgS5N2vwJFTKASShASJxGIQBIEgEAKCIIB8pPam5mpnurqqZ3K7XG4muXRv1Xv1qvrNTi67u0Pu2t3Z0pVrL4c6ihGA3Yx6s3amaIfZijkN/YXQ5sMJCFlTpLGg1Dit04wzBxHNd+vGzVH9TH8RxstPiQ9N8WpE/Xu8nYioebNu1BzV9QbQvKwRxsu3xoemHIm2DuY1p/nBujFzVDfTX4Tx8i3xkinSo1cj6t/jTXnHqNZ/t3pDRo1annfwLTUG9SKq5Mc3urJsMbvX/HFYbd92H/Wu2KmmSH2tMVwjbZNfN0cTw4LRa+XJ6mEVMzef0ahhMvoDU/Y8jo3rfFO0tQ6wZ+ocmqNBBWZX5dWaUoxXM5vPaNQwkf4UU6Sm9j9F2/ZUNEeLW2Bmr7xaU4rx6mXzGY0aJtLXPuSAPGwpbnjuU6PEK8VG5mjxErgWU56sHk4xc/MZjRom0u/6bDJFaup8U7RLPVlz+uIlYC2WaUoxXp1svja41qhhIv0pXKk5RzvqqS/uAb14pinFRDWifO3gVKOGmVPf40p8jrZXV2v2xSOgEkprxJ2bF82oRhZT6n8udwo/mmcxpnMqOijPUI238iP8YsxizPgeabnbxuyDiNaQNYOxeLufw52iHekt75jOneigrImlfSs/wi/GHFdjImdlLg8zN27vTK9WBnMUXKmZ0bYYu4966ot7QC+eEfG42XhGI4Px9OZwpWaGbzF2H/Vkix9+sumxTDwjYuDN28EHi+670vYhnBahOVzRsXxP12LsPsJL8SeGkB7McNxD88Sj+NAU0fI4to9uP2mGVq70Y7Ub+lvRIrwUPw28NiKpwQzePTRPvBYvmSJaHsf2YfbNM7RypR/Dae0vxK/mBS4A741QOJjBuiLeYXpxzxTRqnBsK3bfNIMlZh+JltPaX4Tv88AV4LsVW/bbO4HeGNkAt4A/22tnUQZ+AQ/WjOnMebgcz9ZO4ANwfWSKBoB7wI+ttXcyhV8CF9UDdwUuA29O5hltdOq/3VfKp1wzhgngTEf6vdFW18WeA6/WQ+6rx25mnPhkv2Mfp8OI/dlRCfwTuF9KmNhX4Pbw3NOvgRuAPP9aro8tYAf7BbgEXAPkzqpeMhCQNedFh48OuKS5+uFGKdHF3gFXu/oe7K08ldImeEDgPPDMUynE7wA3gX3g88T/9u5qP8BT4Fvtz2DFnCoWeGTwLeb0v6YpzCwhmfecqV2CySxnFVNa/wF46KkY3ED3pQAAAABJRU5ErkJggg==");
width: 102px;
height: 33px;
margin: 8px;
opacity: .9;
figure {
display: none;
}
}
// following/browse buttons
.IiIjZ {
padding-left: 0 !important;
padding-right: 0 !important;
.jDgJoG {
padding-left: 1rem !important;
padding-right: 1rem !important;
color: inherit;
font-family: var(--font-main);
}
.navigation-link, .top-nav__external-link {
color: inherit !important;
}
color: #909090;
&:hover {
background: #1b1b1b;
color: #eee;
}
&:active {
background: #161616;
color: #eee;
box-shadow: inset 0 1px 0 rgb(0 0 0 / 25%);
}
.navigation-link, .top-nav__external-link {
margin-bottom: -2px;
}
.top-nav__external-link {
font-family: var(--font-display);
}
}
// more button
.hKEeil.hKEeil {
path {
d: path("M8.00049 1.99951H12.0005V5.99951H8.00049V1.99951Z M8.00049 13.9995H12.0005V17.9995H8.00049V13.9995Z M12.0005 8.00049H8.00049V12.0005H12.0005V8.00049Z");
fill: #909090 !important;
}
}
// prime loot, notifs, messages buttons
.czRfnU button {
border-radius: 0;
color: #909090 !important;
&:hover {
background: #1b1b1b !important;
color: #eee;
}
&:active {
background: #161616 !important;
color: #eee;
box-shadow: inset 0 1px 0 rgb(0 0 0 / 25%);
}
* {
fill: currentColor;
}
}
// "get ad free"
.ScCoreButtonSecondary-sc-ocjdkq-2 {
display: none !important;
}
// notif thing on buttons
.cdQwuK {
background: #202020 !important;
}
// search bar
.search-box {
// the search bar
input {
background: none !important;
border: none !important;
color: #ddd;
&::placeholder {
color: #777;
}
}
// cancel button
.edTmkJ::-webkit-search-cancel-button {
filter: invert(1);
opacity: .25;
}
// the button
button {
background: none;
color: #777;
}
// the search bar but not
.tw-combo-input {
background: #333;
}
// the search autocomplete
.BCEKc {
background: #262626 !important;
border: solid 1px #000;
color: #aaa;
border-radius: 0 !important;
box-shadow: 0 1px rgb(0 0 0 / 25%) !important;
padding: 0 !important;
// search result
.search-tray [role="row"] {
border-radius: 0 !important;
&:hover {
background: #1b1b1b !important;
color: #eee;
}
&:active {
background: #161616 !important;
box-shadow: inset 0 1px rgba(0 0 0 / 25%);
color: #eee;
}
.search-item__history {
color: #aaa !important;
}
}
}
}
// get bits
.bFqPcI:has(.tw-core-button-icon), [data-a-target="top-nav-get-bits-button"] {
display: none !important;
}
// right side
.wNwlN {
// twitch prime
[d="M13.798 10.456 10 6.657l-3.798 3.799L4 8.805V13h12V8.805l-2.202 1.65zM18 5v8a2 2 0 0 1-2 2H4a2.002 2.002 0 0 1-2-2V5l4 3 4-4 4 4 4-3z"] {
d: path("M7 2V6H8V7H9V8H11V7H12V6H13V2H7Z M2 7H6V8H7V9H8V11H7V12H6V13H2V7Z M9 12V13H8V14H7V18H13V14H12V13H11V12H9Z M14 7H18V13H14V12H13V11H12V9H13V8H14V7Z")
}
// buttons
:is(.bZVrjx, .dVOhMf) {
svg path {
fill: #666;
filter: drop-shadow(0 1px #000);
}
&:hover svg path {
fill: #ccc;
}
}
.ffz-top-nav {
figure {
color: #aaa;
}
}
// avatar
.tw-image-avatar {
border-radius: 0 !important;
border: solid 1px #000;
box-shadow: 0 1px #1b1b1b;
}
}
}
// left sidebar
html>body .side-nav__overlay-wrapper {
background: #202020 !important;
color: #aaa;
// fuck you
.smarter-sort-callout {display:none !important}
// category
.side-nav-section {
// title
.lnnKUr {
color: #5f5f5f;
font-size: 11px !important;
...