Last active
October 7, 2016 20:41
-
-
Save Maartyl/dd3bb0067d4d753d50d8e1ff422990d4 to your computer and use it in GitHub Desktop.
pleasant dark grey youtube theme (surely works in Chrome Date16100 with ImprovedTube;7 and FF, Date160905, with YouTube High Definition (:expand))
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@-moz-document domain("youtube.com") { | |
body { | |
background-color: #222; | |
} | |
#page { | |
background-color: #222; | |
color: #ccc; | |
} | |
/*light vido links*/ | |
.video-list .video-list-item .title { | |
color: #ddd; | |
} | |
/*all rectangles above background: instead of lighter just stronger shadow*/ | |
.yt-card { | |
background: inherit; | |
box-shadow: 0 1px 7px rgba(0, 0, 0, .8); | |
} | |
/* ## MASTER (top) bar*/ | |
#yt-masthead-container { | |
background: #333; | |
/*this could be #222 (same as bg), but it would bring some problems with the search bar... this is good enough...*/ | |
border-bottom: 0px solid #111; | |
box-shadow: 0 1px 7px rgba(0, 0, 0, .8); | |
} | |
.masthead-search-terms-border { | |
border: 1px solid #222; | |
box-shadow: inset 0 1px 2px #222; | |
/*do I like this? looks FLAT without...*/ | |
} | |
#masthead-search-term { | |
color: #ddd; | |
} | |
#masthead-search-terms { | |
background-color: transparent; | |
} | |
#masthead-appbar { | |
background-color: #333; | |
border-bottom: 1px solid #222; | |
} | |
#masthead-appbar-container { | |
box-shadow: 0 1px 7px rgba(0, 0, 0, .8); | |
} | |
/* ## suggestions */ | |
.gssb_m { | |
color: #ccc; | |
background: #333; | |
} | |
.gssb_e { | |
border: 1px solid #333; | |
border-top-color: #444; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); | |
} | |
a.gssb_j { | |
color: #36f; | |
/*blue 'remoev' links*/ | |
} | |
div.gsq_a td[style] span[style] { | |
color: #d5f !important; | |
/*hack: has inlined style*/ | |
} | |
/* ## inputs*/ | |
.yt-uix-form-input-select, | |
.yt-uix-form-input-text, | |
.yt-uix-form-input-textarea { | |
border: 1px solid #555; | |
color: #ddd; | |
} | |
input.yt-uix-form-input-text { | |
background-color: #555; | |
} | |
/* ## TEXT (and text bacgrounds)*/ | |
#watch-description { | |
color: #aaa; | |
} | |
#action-panel-details a { | |
color: #99b; | |
} | |
a.yt-uix-button-epic-nav-item.selected, | |
a.yt-uix-button-epic-nav-item.yt-uix-button-toggled, | |
button.yt-uix-button-epic-nav-item.selected, | |
button.yt-uix-button-epic-nav-item.yt-uix-button-toggled, | |
.epic-nav-item.selected, | |
.epic-nav-item.yt-uix-button-toggled, | |
.epic-nav-item-heading { | |
color: #ddd; | |
} | |
.comment-renderer.channel-owner .comment-author-text { | |
background-color: #333; | |
} | |
#watch-header .yt-user-info a { | |
color: #eee; | |
font-weight: 500; | |
} | |
.yt-uix-button-content { | |
color: #ddd; | |
} | |
#yts-article, | |
#yts-article a.anchor { | |
color: inherit; | |
} | |
/* -###- main page links */ | |
.yt-ui-ellipsis { | |
background-color: #222; | |
} | |
.branded-page-module-title, | |
.branded-page-module-title a:visited, | |
.branded-page-module-title a { | |
color: #bbb; | |
} | |
#yt-uix-videoactionmenu-menu h3 { | |
color: #ccc; | |
} | |
.channel-header .branded-page-header-title .branded-page-header-title-link { | |
color: #ddd; | |
} | |
.search-header { | |
border-bottom: 1px solid #333; | |
} | |
/* add to playlist */ | |
.add-to-widget .addto-playlist-item { | |
color: #ddd; | |
} | |
.add-to-widget .create-playlist-item { | |
color: #ccc; | |
} | |
.create-playlist-item:hover, | |
.add-to-widget .addto-playlist-item.yt-uix-kbd-nav-highlight { | |
background-color: #444; | |
} | |
.add-to-widget .addto-playlist-item:hover, | |
.add-to-widget .create-playlist-item:hover, | |
.add-to-widget .addto-playlist-item.yt-uix-kbd-nav-highlight { | |
background-color: #444; | |
} | |
.add-to-widget .playlists { | |
border-bottom: 1px solid #444; | |
} | |
/* left 'panel' */ | |
.show-guide #appbar-guide-menu { | |
border-bottom: 1px solid #333 !important; | |
border-right: 0px solid #333 !important; | |
box-shadow: 0px 1px 0px rgba(0, 0, 0, .8); | |
} | |
#appbar-guide-menu, | |
.guide-flyout { | |
background: #333; | |
/* like master */ | |
} | |
.guide-item { | |
color: #ccc; | |
} | |
li.guide-section h3 a { | |
color: #ee383e; | |
} | |
/* -- stuffs -- */ | |
#watch7-user-header { | |
z-index: 100; | |
/*keeps subscribe button under video above invisible box from like ratio*/ | |
} | |
/* subscribe button */ | |
.yt-subscription-button-subscriber-count-branded-horizontal, | |
.yt-subscription-button-subscriber-count-unbranded-horizontal { | |
border: 1px solid #444; | |
background-color: #333; | |
color: #999; | |
} | |
/* - already subscribed*/ | |
.yt-uix-button-subscribed-branded, | |
.yt-uix-button-subscribed-branded[disabled], | |
.yt-uix-button-subscribed-branded[disabled]:hover, | |
.yt-uix-button-subscribed-branded[disabled]:active, | |
.yt-uix-button-subscribed-branded[disabled]:focus, | |
.yt-uix-button-subscribed-unbranded, | |
.yt-uix-button-subscribed-unbranded[disabled], | |
.yt-uix-button-subscribed-unbranded[disabled]:hover, | |
.yt-uix-button-subscribed-unbranded[disabled]:active, | |
.yt-uix-button-subscribed-unbranded[disabled]:focus { | |
border: 1px solid #444; | |
background-color: #333; | |
color: #666; | |
} | |
/* subscribtion settings */ | |
.yt-uix-subscription-preferences-button { | |
margin-left: 0px; | |
/*orig: -2; I get why but this looks better to me*/ | |
} | |
/* ## write comment */ | |
.comment-simplebox-renderer-collapsed-content { | |
border: 1px solid #111; | |
color: #ccc; | |
} | |
.comment-simplebox-arrow { | |
visibility: hidden; | |
} | |
.comment-simplebox { | |
background-color: #222; | |
} | |
.comment-simplebox-frame { | |
border: 1px solid #222; | |
box-shadow: inset 0 0 1px rgba(0, 0, 0, .05); | |
background-color: #333; | |
} | |
.comment-simplebox-text, | |
.comment-simplebox-prompt { | |
background-color: inherit; | |
color: inherit; | |
} | |
/* ## menus and buttons */ | |
.yt-uix-button-default:active, | |
.yt-uix-button-default.yt-uix-button-toggled, | |
.yt-uix-button-default.yt-uix-button-active, | |
.yt-uix-button-default.yt-uix-button-active:focus, | |
.yt-uix-button-text:active { | |
border-color: #333; | |
background: #333; | |
box-shadow: inset 0px 3px 1px #333; | |
} | |
.yt-ui-menu-item { | |
color: #ccc; | |
} | |
.yt-uix-menu-trigger-selected .yt-ui-menu-item, | |
.yt-ui-menu-item:hover { | |
background: #444; | |
} | |
.yt-ui-menu-content { | |
background: #333; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, .8); | |
/*border: 1px solid #d3d3d3;*/ | |
border: none; | |
} | |
.yt-uix-button-default, | |
.yt-uix-button-default[disabled], | |
.yt-uix-button-default[disabled]:hover, | |
.yt-uix-button-default[disabled]:active, | |
.yt-uix-button-default[disabled]:focus { | |
border-color: #222; | |
background: #333; | |
color: #ccc; | |
} | |
.yt-uix-button-default:hover, | |
.yt-uix-button-text:hover, | |
.yt-uix-button-default.yt-uix-button-toggled:hover { | |
border-color: #333; | |
background: #444; | |
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); | |
} | |
/* ## main page scrolly buttons ( <, > )*/ | |
.compact-shelf .yt-uix-button-shelf-slider-pager { | |
background: #222; | |
transition: all 200ms; | |
} | |
.browse-list-item-container:hover .compact-shelf .yt-uix-button-shelf-slider-pager, | |
.compact-shelf:hover .yt-uix-button-shelf-slider-pager { | |
border: 1px solid #222; | |
box-shadow: 2px 1px 10px rgba(0, 0, 0, .3); | |
background-color: #333; | |
border-radius: 5px; | |
} | |
/* ## button arows */ | |
.yt-uix-button-arrow { | |
margin-top: 0px; | |
border-top-color: #555; | |
/*the arrow is made from border! (cool)*/ | |
} | |
/* channel main page */ | |
.yt-uix-expander-ellipsis { | |
background-color: #222; | |
} | |
/* invisible video thumbnail backgrounds (except for loading) */ | |
.yt-thumb { | |
background: #333; | |
} | |
/* odd subscribe buttons floating around */ | |
.yt-uix-button-subscribe-unbranded { | |
border-color: #222; | |
background-color: #333; | |
} | |
.yt-uix-button-subscribe-unbranded:hover { | |
border-color: #333; | |
background-color: #444; | |
} | |
/* ### lines (separators)*/ | |
.yt-card .yt-uix-button-expander { | |
color: #777; | |
border-top: 1px solid #111; | |
} | |
#watch8-action-buttons { | |
border-top: 1px solid #111; | |
} | |
.yt-badge { | |
border: 1px solid #111; | |
} | |
.yt-card .yt-uix-tabs { | |
border-bottom: 1px solid #444; | |
} | |
#watch7-sidebar .watch-sidebar-separation-line { | |
border-bottom: 1px solid #111; | |
} | |
.comment-simplebox-renderer { | |
border-bottom: 1px solid #111; | |
} | |
#browse-items-primary .item-section > li > .yt-lockup-tile, | |
.branded-page-v2-primary-col .branded-page-box, | |
.section-list li .item-section .branded-page-box { | |
border-bottom: 1px solid #333; | |
} | |
.pl-video { | |
border-bottom: 1px solid #333; | |
} | |
.guide-section-separator { | |
border-bottom: 1px solid #444; | |
} | |
.branded-page-v2-subnav-container { | |
padding-top: 10px; | |
padding-bottom: 10px; | |
border-bottom: 1px solid #333; | |
} | |
.feed-header { | |
border-bottom: 1px solid #444; | |
} | |
#footer-main { | |
border-bottom: 1px solid #333; | |
} | |
#c4-header-bg-container { | |
border-bottom: 1px solid #333; | |
background-color: #222; | |
} | |
.branded-page-v2-primary-col .branded-page-box.video-player-view-component:last-child, | |
.branded-page-v2-primary-col .branded-page-box.c4-featured-content:last-child, | |
.branded-page-v2-primary-col .branded-page-box.c4-featured-content-editor:last-child, | |
.branded-page-v2-primary-col .branded-page-box.welcome:last-child { | |
border-bottom: 1px solid #444; | |
} | |
.section-list li .item-section .branded-page-box { | |
border: 1px solid #333; | |
} | |
/* footer */ | |
body #footer-container { | |
background-color: #111; | |
border-top: 1px solid #000; | |
} | |
#yt-picker-country-footer, | |
#yt-picker-language-footer, | |
#yt-picker-safetymode-footer { | |
background: #222; | |
} | |
/* YouTubePlus fixes*/ | |
#popout-button { | |
background-position: 4px -86px !important; | |
/*original: 87: shows some white fragment 1px dot*/ | |
} | |
#advanced-options { | |
top: 20px !important; | |
/*otherwise over video titles */ | |
} | |
/* misk fixes*/ | |
#watch7-subscription-container { | |
margin-right: 10px; | |
/*some download addon button is too close...*/ | |
} | |
#fvd_single_yt_download_button.end.flip.yt-uix-button.yt-uix-button-default.yt-uix-button-empty { | |
border-color: transparent !important; | |
} | |
/* UNRELATED (but theme consistent) */ | |
#watch7-views-info { | |
min-width: 100%; | |
/* make LIKEbar as wide as possible: more detailed ... - replaces delimiter ^^ */ | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment