Skip to content

Instantly share code, notes, and snippets.

@Maartyl
Last active October 7, 2016 20:41
Show Gist options
  • Save Maartyl/dd3bb0067d4d753d50d8e1ff422990d4 to your computer and use it in GitHub Desktop.
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))
@-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