Skip to content

Instantly share code, notes, and snippets.

@z-------------
Last active August 29, 2015 14:21
Show Gist options
  • Save z-------------/df09af662ff60311f130 to your computer and use it in GitHub Desktop.
Save z-------------/df09af662ff60311f130 to your computer and use it in GitHub Desktop.
Slight improvements to the YouTube front page that makes things look a bit bolder and more comfortably spaced.

better-youtube.css

Some slight improvements to the YouTube front page that makes things look a bit bolder and more comfortably spaced. Nothing dramatic.

Screenshot of YouTube with better-youtube.css enabled

  1. Get a style manager (like Stylebot for Chrome, which is what I use).
  2. Go to SMART and open the style manager.
  3. Paste the contents of better-youtube.css.
  4. ???
  5. PROFIT
body {
overflow-x: hidden;
}
/* front page */
#content {
width: 100%;
}
.yt-shelf-grid-item, .branded-page-module-title-text {
padding: 7px;
}
.branded-page-module-title-text {
font-size: 1.5em;
}
.yt-lockup-thumbnail, .yt-lockup-content > * {
margin: 3px 0;
}
.expanded-shelf-content-item .yt-lockup-content {
padding-left: 15px;
}
.yt-lockup-title {
font-size: 1.3em;
}
.branded-page-module-title .yt-thumb.video-thumb {
margin-left: 7px;
}
.branded-page-module-title .yt-thumb.video-thumb img {
width: 30px;
height: 30px;
}
.branded-page-module-title > * {
vertical-align: middle;
}
#masthead-appbar-container {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow .3s;
}
#masthead-appbar.hid #masthead-appbar-container {
box-shadow: none;
}
#masthead-appbar {
border-bottom: none;
}
#yt-masthead-container {
border-bottom: none;
}
/* video page */
#eow-title {
font-weight: 700;
}
#google_companion_ad_div iframe {
opacity: 0.3;
transition: opacity .3s;
}
#google_companion_ad_div iframe:hover {
opacity: 1;
}
/* search bar */
.masthead-search-terms-border, #masthead-search-term {
border-radius: 4px;
}
.masthead-search-terms-border {
border: none;
box-shadow: none;
overflow: hidden;
}
#masthead-search-term {
background-color: #F8F8F8;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: background, box-shadow .3s;
}
#masthead-search-term:focus {
background-color: #F3F3F3;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.search-button {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment