/* ==UserStyle==
@name YouTube Late 2012-Early 2014 Theme
@namespace github.com/openstyles/stylus
@version 1.3.2
@description `Makes YouTube look like it did in late-2012
Requires Rehike to function as this was built on YouTube's Hitchhiker layout, which is no longer exists... officially at least`
@author yaasir ahmad-sanni (naadir500)
@license CC BY-SA-4.0
@advanced text username "YT Username to add accuracy" "Default User"
@advanced dropdown dark_mode "Dark Mode (W.I.P - Based on the Earth Hour 2012 Dark Theme)" {
0 "Disabled*" <<<EOT
EOT;
1 "Enabled" <<<EOT
/* Logo *\/
#yt-masthead #logo-container .logo {
background: url("http://s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png") !important;
background-size: 183px !important;
background-position: -110px 0px !important;
height: 29px;
width: 72px !important;
}
#footer-logo .footer-logo-icon{
background: url("http://s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png") !important;
background-size: 183px !important;
background-position: -110px 0px !important;
height: 29px;
width: 72px !important;
}
/* Buttons and whatnot *\/
#comment-section-renderer .sprite-comment-actions {
background: none !important;
box-shadow: none !important;
}
body {
background-image: url(http://s.ytimg.com/yt/img/earthhour/www-refreshbg-vflQx0YnW.png);
color: #ddd !important;
}
#watch7-sidebar-contents {
background: unset !important;
}
.title {
color: #666 !important !important;
}
.yt-card {
background: #2b2b2b !important;
border-color: #474747 !important;
color: #ddd !important;
}
.branded-page-v2-top-row,
.branded-page-v2-primary-col .branded-page-box,
.section-list li .item-section .branded-page-box,
.branded-page-v2-top-row #channel-subheader,
#c4-header-bg-container,
.guide-pinned .guide-pinning-enabled #appbar-guide-menu,
.branded-page-v2-primary-col .branded-page-box:last-child.video-player-view-component {
border-color: #474747 !important;
}
.yt-user-info a {
color: #ddd !important;
}
#yt-masthead-container {
background: #2b2b2b !important;
border-color: #474747 !important;
}
.yt-uix-button-default,
#search-btn,
#yt-masthead-creation-button,
#yt-masthead-creation-button::after {
background-color: #454545;
background-image: linear-gradient(180deg, #474747 0%, #2B2B2B 100%) !important;
border-color: #474747 #2b2b2b #000 !important;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%) !important;
color: #ddd !important;
}
.yt-uix-button-default:hover,
#search-btn:hover,
#yt-masthead-creation-button:hover,
#yt-masthead-creation-button:hover::after{
background: #333 !important;
border-color: #666 !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), inset 0px 0px 3px #666 !important;
color: #ddd !important;
}
.yt-uix-button-default:active,
#search-btn:active,
#yt-masthead-creation-button:active,
#yt-masthead-creation-button:active:after{
background-color: #333 !important;
background-image: linear-gradient(-180deg, #474747 0%, #2B2B2B 100%) !important;
border-color: #666 !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), inset 0px 0px 3px #666 !important;
color: #ddd !important;
}
.search-header .yt-uix-button-content {
color: #ddd !important;
}
#masthead-search .search-btn-component .yt-uix-button-content {
filter:invert(100) !important;
}
#masthead-search-terms,
.masthead-search-terms-border {
background-color: #898989 !important;
border-color: #474747 !important;
box-shadow: inset 0px 1px 2px #333 !important;
}
.yt-uix-button-arrow {
border-top-color: #ddd !important;
}
.yt-horizontal-rule {
border-top: 1px solid #474747 !important;
}
.yt-ui-ellipsis {
background-color: #fff0 !important;
}
#results .section-list li .item-section .branded-page-box {
border: 1px solid #474747 !important;
margin-top: -1px;
}
.branded-page-v2-secondary-col .yt-card {
margin-left: 0px;
background: none !important;
}
.video-player-view-component {
color: #ddd;
}
.video-player-view-component .view-count .count {
color: #ddd;
}
.watch-view-count {
color: #ddd;
}
#watch8-sentiment-actions .like-button-renderer .yt-uix-button {
color: #ddd;
}
.like-button-renderer-like-button::before {
filter: invert(100);
}
.like-button-renderer-dislike-button::before {
filter: invert(100);
}
/* Channel Picker *\/
.yt-masthead-picker-footer {
background: #2b2b2b !important;
}
.yt-uix-clickcard-card-border, .yt-uix-hovercard-card-border {
background: #2b2b2b !important;
}
.yt-masthead-account-picker-option {
background: #4b4b4b !important;
}
.yt-masthead-account-picker-option:hover {
background: #606060 !important;
}
/* Action buttons *\/
button.yt-uix-button.yt-uix-button-size-default.yt-uix-button-opacity.yt-uix-button-has-icon.no-icon-markup.pause-resume-autoplay.action-panel-trigger.action-panel-trigger-share.yt-uix-tooltip:hover {
color: #a2a2a2 !important;
}
button.yt-uix-button.yt-uix-button-size-default.yt-uix-button-opacity.yt-uix-button-has-icon.no-icon-markup.yt-uix-videoactionmenu-button.addto-button.pause-resume-autoplay.yt-uix-menu-trigger.yt-uix-tooltip:hover {
color: #a2a2a2 !important;
}
#watch-header #watch8-secondary-actions::before {
color: #a2a2a2 !important;
}
#watch8-secondary-actions button {
color: #a2a2a2 !important;
}
.yt-ui-menu-item.has-icon::before {
filter: invert(50) !important;
}
/* Like and dislike buttons*\/
.like-button-renderer-like-button::after {
border: solid 1px !important;
border-color: #474747 #2b2b2b #000 !important;
background: no-repeat url(https://i.imgur.com/DjSxY9d.png) 3px -590px, linear-gradient(-180deg, #474747 0%, #2B2B2B 100%) !important;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%) !important;
color: #a2a2a2 !important;
}
.like-button-renderer-dislike-button::after {
border: solid 1px !important;
border-color: #474747 #2b2b2b #000 !important;
background: no-repeat url(https://i.imgur.com/DjSxY9d.png) -89px -719px, linear-gradient(-180deg, #474747 0%, #2B2B2B 100%) !important;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%) !important;
}
.like-button-renderer-like-button:hover::after {
border: solid 1px !important ;
border-color: #666 !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), inset 0px 0px 3px #666 !important;
background: no-repeat url(https://i.imgur.com/DjSxY9d.png) 3px -590px, #333 !important;
}
.like-button-renderer-dislike-button:hover::after {
border: solid 1px !important;
border-color: #666 !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), inset 0px 0px 3px #666 !important;
background: no-repeat url(https://i.imgur.com/DjSxY9d.png) -89px -719px, #333 !important;
}
/* Text and Comment Box *\/
.arrow-inner {
display: none !important;
}
#watch-description,
#watch7-sidebar .watch-sidebar-head,
.guide-item,
.comment-renderer-reply {
color: #a2a2a2 !important;
}
span[role="radiogroup"] {
filter: invert(50) !important;
}
.comment-simplebox-renderer-collapsed-content {
border: 1px solid #474747 !important;
color: #ddd !important;
}
.comment-section-header-renderer {
color: #ddd !important;
}
.comment-simplebox-renderer {
border-color: #474747 !important;
}
.branded-page-module-title-text,
.branded-page-header-title-link {
color: #ddd !important;
}
.description {
background: none !important;
}
.branded-page-module-title {
color: #ddd !important;
}
.branded-page-related-channels h3 a {
color: #ddd !important;
}
/* Expander *\/
.yt-card .yt-uix-button-expander {
color: #ddd !important;
background: linear-gradient(-180deg, #474747 0%, #2B2B2B 100%) !important;
border-color: #474747 #2b2b2b #000 !important;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%) !important;
}
.yt-card .yt-uix-button-expander:hover {
color: #ddd !important;
background: #333 !important;
border-color: #666 !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), inset 0px 0px 3px #666 !important;
}
/* Arrows *\/
.compact-shelf .yt-uix-button-shelf-slider-pager {
background: #2b2b2b !important;
}
/* Footer *\/
body #footer-container {
margin-top: -145px !important;
background-color: #2b2b2b !important;
border-top: 1px solid #474747 !important;
}
#footer-links-primary a {
color: #ddd !important;
}
#footer-main {
border-bottom: 1px solid #474747 !important;
}
EOT;
}
@advanced dropdown December_2012_to_July_2013-July_2013_to_Feburary_2014 "Which iteration of this layout?" {
0 "December 2012 to July 2013 (Gradient heavy, different subscribe button)*" <<...
