This style, powered with V3 and StarTube's 2011 theme, makes YouTube look more accurate to 2011 while keeping modern features intact.
StarTube Early 2011 Aozora Tweaks by thxdeeply
Details
Authorthxdeeply
LicenseNo License
Categoryyoutube.com
Created
Updated
Size137 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Requires Vorapis and StarTube. Enable the 2011 theme in StarTube's settings.
This is a fork of griffenhiggins' theme (https://userstyles.world/style/15437/youtube-2011-theme-for-startube)
2010-2011 player by 11pixels (https://github.com/XYZenix/XYZenixThemes/tree/master/YoutubeThemes/v3-themes)
Dark theme is a fork of macimas' StarTube dark theme (https://macimas.github.io/stylin/v3/dark_mode_for_StarTube/v3.user.css)
In order to turn on Dark Mode, enable the "Dark Mode" setting at the bottom of the page, and then switch the Theme in the userstyle settings to "Dark Mode".
20241005.3.0: Added meta stuff and checkbox/slider options
20241005.4.0: Added live chat and playlist designs
20241010.5.0: Added more accuracy, icon fixes, and a few other things
20241021.6.0: Added dark mode
20241115.7.0: Fixed a few things
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name StarTube Early 2011 Aozora Tweaks
@version 20241115.7.1
@namespace https://userstyles.world/user/thxdeeply
@description This style, powered with V3 and StarTube's 2011 theme, makes YouTube look more accurate to 2011 while keeping modern features intact.
@author thxdeeply
@license No License
@preprocessor stylus
@var select autoplay-control "Autoplay Controls" ["slider:Slider", "checkbox:Checkbox"]
@var select logo "Logo Color" ["red:Red", "orange:Orange", "yellow:Yellow", "green:Green", "cyan:Cyan", "blue:Blue", "purple:Purple", "pink:Pink"]
@var select notifs "Notification Position" ["left:Left", "right:Right"]
@var select theme "Themes" ["light:Light", "dark:Dark"]
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* Red */
if logo is red {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://s.ytimg.com/yt/imgbin/www-master-vflai4i-q.png) -41px -120px;
}
}
if logo is orange {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/logos/orange.png) -41px -120px;
}
}
if logo is yellow {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/logos/yellow.png) -41px -120px;
}
}
if logo is green {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/logos/green.png) -41px -120px;
}
}
if logo is cyan {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/logos/cyan.png) -41px -120px;
}
}
if logo is blue {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/logos/blue.png) -41px -120px;
}
}
if logo is purple {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/logos/purple.png) -41px -120px;
}
}
if logo is pink {
[exp-aozora-header] body .v3 #yt-masthead #logo {
background: no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/logos/pink.png) -41px -120px;
}
}
if notifs is right {
#sb-button-notify {
order: 3;
}
#yt-masthead-user-displayname {
order: 1;
}
#yt-masthead-dropdown {
order: 2;
}
}
if notifs is left {
#sb-button-notify {
order: 1;
}
#yt-masthead-user-displayname {
order: 2;
max-width: 169px;
overflow: hidden;
text-overflow: ellipsis;
}
#yt-masthead-dropdown {
order: 3;
}
#yt-masthead-user #sb-button-notify {
margin-right: 11.5px !important;
padding-right: 9px !important;
margin-left: 0!important;
padding-left: 0!important;
border-right: 1px solid #ccc!important;
border-left: 0!important;
}
}
/* Checkbox */
if autoplay-control is checkbox {
.yt-uix-checkbox-on-off {
width: 13px;
height: 13px;
position: relative;
overflow: visible;
top: -2px;
}
.yt-uix-checkbox-on-off label .toggle {
display: none;
}
.yt-uix-checkbox-on-off input[type="checkbox"]:checked + label {
background: transparent no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/checkbox.png) -15px -10px;
border-radius: 0;
}
.yt-uix-checkbox-on-off input[type="checkbox"]:checked + label .checked {
display: none;
}
.yt-uix-checkbox-on-off label {
background: transparent no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/checkbox.png) -18px -29px;
border-radius: 0
}
.checkbox-on-off > label {
line-height: 1.3em;
margin-right: -2px;
}
}
/* Slider */
if autoplay-control is slider {
.yt-uix-checkbox-on-off {
width: 18px;
height: 11px;
position: relative;
overflow: visible;
top: -2px;
}
.yt-uix-checkbox-on-off label .toggle {
display: none;
}
.yt-uix-checkbox-on-off input[type="checkbox"]:checked + label {
background: transparent no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/master-vfl181382_2010.png) -60px -142px;
border-radius: 0
}
.yt-uix-checkbox-on-off input[type="checkbox"]:checked + label .checked {
display: none;
}
.yt-uix-checkbox-on-off label {
background: transparent no-repeat url(https://raw.githubusercontent.com/thxdeeply/tweaks/refs/heads/main/StarTubeYT2011/master-vfl181382_2010.png) -80px -142px;
border-radius: 0
}
.checkbox-on-off > label {
line-height: 1.3em;
margin-right: -2px;
}
}
/* Other Code */
a:focus {
background-color: #e7ecfa;
outline: 1px solid #e7ecfa;
}
#yt-masthead-user .yt-uix-button-icon-bell {
visibility: visible;
}
#yt-masthead-dropdown {
border-top-color: #000;
margin-left: -3px;
margin-top: 10px;
}
#yt-masthead-dropdown.reversed {
border-bottom-color: #000;
}
#yt-masthead-user-displayname {
font: 12px arial,sans-serif !important;
color: #000 !important;
margin-top: 0;
}
#yt-masthead #appbar-guide-button ~ #masthead-search {
width: 410px;
}
#yt-masthead-content {
width: 630px;
float: left;
}
body #masthead-expanded-container {
background: #fff;
}
#masthead-expanded .masthead-expanded-menu-item a, #footer-links-primary a, #footer-links-secondary a, .multirow-shelf .yt-uix-expander-head {
color: #03c !important;
}
#footer-links-primary a, #footer-links-secondary a, .multirow-shelf .yt-uix-expander-head {
font: 12px arial,sans-serif;
}
.distiller_yt-thread .channel_owner span {
background-color: #dbe4eb00;
}
.profileLink {
color: #4272db;
font: 11px arial,sans-serif;
}
.distiller_yt_headline {
font-size: 13px !important;
text-transform: capitalize;
}
.distiller_yt_instance {
margin-left: -25px;
}
[exp-legacy-comments] .entries .comment {
padding-left: 30px;
}
.distiller_yt-thread .channel_owner span {
padding-left: 0px;
}
.distiller_yt-thread .author .profileLink {
margin-top: 2px;
}
[exp-aozora-comments] .load-more-link:hover {
opacity: 100%;
}
[exp-aozora-comments] .proflinkPrefix {
visibility: hidden;
}
[exp-aozora-comments] .proflinkPrefix:before {
visibility: visible;
content: "@";
cursor: pointer;
}
[exp-legacy-comments] .proflink {
margin-left: -6px;
}
b {
font-weight: 100 !important;
}
.stream_content > .continuation_item_wrapper > .load-more-button > .jfk-button-text {
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(239, 239, 239) 100%) !important;
}
.stream_content > .continuation_item_wrapper > .load-more-button > .jfk-button-text .run {
font-weight: normal;
}
.distiller-standard-button .jfk-button-text {
font-size: 12px;
font-weight: normal;
margin-right: 5px;
}
.distiller-standard-button, .distiller-button.jfk-button-action {
padding: 0 6px !important;
height: 25px !important;
border: 1px solid #ccc !important;
color: #000;
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(239, 239, 239) 100%) !important;
border-radius: 3px;
font-weight: normal;
font-size: 12px;
box-shadow: none;
opacity: 1;
}
.distiller-standard-button:hover, .distiller-button.jfk-button-action:hover {
box-shadow: rgb(153, 153, 153) 0px 0px 3px 0px;
border-color: #999 !important;
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(235, 235, 235) 100%) !important;
}
.distiller-standard-button:active, .distiller-button.jfk-button-action:active {
background-image: linear-gradient(rgb(204, 204, 204) 0%, rgb(255, 255, 255) 100%) !important;
border-color: #999;
}
.autoplay-bar .checkbox-on-off {
font-size: 13px;
font-weight: normal;
color: #666;
}
#watch7-sidebar-contents .autoplay-bar .watch-sidebar-head {
color: #666;
font-weight: normal;
}
[exp-watch5d] #watch-headline-title {
margin-bottom: 5px;
}
[exp-watch5d] #page.watch {
padding-top: 8px;
}
[exp-aozora-styles] #watch7-sidebar-contents .autoplay-bar .watch-sidebar-head {
padding: 0 0 4px 0;
border-bottom: 1px solid #e2e2e2;
margin: 0 0 10px;
}
[exp-aozora-styles] #watch7-sidebar .watch-sidebar-separation-line {
border-bottom: 0;
}
.all-comments {
padding: 0 3px;
border-bottom: 1px solid #e2e2e2;
color: #666;
font-weight: 400;
line-height: 1.9231em;
font-size: 1.0833em;
}
[exp-watch5c] .watch5 #watch-description-text {
font-size: 13px;
}
.video-time, .video-actions {
right: 2px;
bottom: 2px;
position: absolute;
}
#watch7-sidebar .watch-sidebar-section {
position: relative;
z-index: 2;
margin: 0 0 15px 20px;
}
#watch-description #watch-description-content {
margin-top: -2px;
}
#watch-description-extra-info {
padding-top: 13px;
}
#watch5-description {
margin-top: -3px;
}
#watch-description-extra-info .offer-image-thumbnail {
margin: 5px 0 0 30px;
}
#watch5-action-panels {
margin: 8px 0;
}
#watch-description-extra-info .metadata-info-title {
color: #666;
font-weight: normal;
}
#watch-description-extra-info .metadata-info {
margin-left: 30px;
}
#watch-description-extra-info .offer-image-thumbnail {
float: left;
margin: 6px 0 0 30px;
width: 60px;
}
.watch-extras-section .title {
text-align: left;
}
.video-list .video-list-item .description, .video-list .video-list-item .stat {
color: #666;
}
html {
--related-item-width: 106px;
}
[exp-watch5d] .watch5 #watch7-sentiment-actions {
margin-top: 0;
margin-right: 4px;
}
[exp-watch5d] #watch5-other-actions .yt-uix-button {
margin-left: 1px;
margin-right: 4px;
}
.feed-item-container:hover .feed-item...