*.youtube.com
2 months ago by stcoro
0 0
/* Disclaimer: This has only been tested in Chrome 16 for the Mac. I believe that it should also work on other webkit-compatible browsers.
Objective: I wrote this so that I can watch videos on my widescreen TV without having to use YouTube XL. I find that the user experience on this revised YouTube css is more pleasant on both my laptop and television. */
/* Features:
- Larger video (picture shows it at 58% of screen height, but default is 65%
- Changed layout
- Removed advertisements and other annoying features to make it cleaner
- Related videos displayed in a grid
- Homepage de-cluttered and made fullscreen, videos in feed made into clean grid
- Page header turned into a fixed, gradient-filled bar that floats above the page
- Cleaned up navigation on the movies, videos, music, etc. pages
*/
/* To change the video size, set height and width under #watch-video-container */
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
#page {
width: 100%;
height: 100%;
}
#content-container {
position: absolute;
top: 60px;
left: 0px;
text-align: center;
width: 100%;
height: 100%;
}
#content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 95%;
height: 100%;
padding: 10px;
}
/* Restyle the top bar */
#masthead-user-button {
background-color: #F0F0F0;
border: 0px;
}
#masthead-expanded {
background-color: #EEE;
margin-top: -8px;
}
#masthead-expanded-container {
width: 100%;
border-bottom: 1px SOLID #333;
}
#masthead-container {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
position: fixed;
width: 100%;
top: 0px;
left: 0px;
z-index: 1000;
padding-bottom: 10px;
height: 50px;
background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
}
#masthead-nav a {
color: #FFF;
}
#masthead-nav a:hover {
background-color: #222;
border-radius: 5px;
}
/* Remove unnecessary content */
div.ad-div.mastad, #video-sidebar, #footer {
display: none;
}
/* Redesign Homepage */
/* Left Menu */
.guide-layout-container {
background-color: #FFF;
/*min-width: 1025px;*/
}
.guide-container {
width: 20%;
min-width: 150px;
}
/* Content Feed */
#feed-background {
background-color: #FFF;
}
#feed {
width: 80%;
padding-left: 20%;
margin: 0px;
}
.feed-item, .feed-item-container {
width: 46%;
min-width: 250px;
float: left;
margin-left: 10px;
margin-bottom: 5px;
padding: 10px;
border: 2px SOLID #DDD;
background-color: #FFF;
border-radius: 5px;
min-height: 130px;
}
.feed-item:hover, .feed-item-container:hover {
border: 2px SOLID #AAA;
}
.feed-item-content {
background-color: #FFF;
}
.feed-header-icon {
margin-left: 10px;
}
.feed-header-details {
padding-left: 10px;
}
.feed-item-visual-content {
width: 150px;
}
.feed-item-visual-description {
width: 200px;
}
.feed-load-more-container {
width: 79%;
}
.feed-comment {
display: none;
}
/* Video Watching Page */
.watch-sidebar-section .horizontal-rule, .vertical-rule-corner-top, .vertical-rule-main, .vertical-rule-corner-bottom, .watch-sidebar-head, .watch-pyv-vid, .comment-list, .comments-section-see-all, .comments-pagination, #watch-info, #watch-channel-brand-div, #watch-longform-ad, #watch-discussion {
display: none;
}
#watch-container {
height: 100%;
width: 100%;
}
#watch-video-container {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
width: 100%;
height: 75%;
}
#watch-video {
width: 100%;
height: 100%;
text-align: center;
}
#watch-player {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
min-width: 750px;
}
#watch-headline-container {
padding: 10px;
margin-left: -10px;
margin-top: -10px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
width: 100%;
}
#watch-headline-user-info {
width: 100%;
}
#watch-main-container {
width: 100%;
}
#watch-main {
width: 100%;
}
#watch-panel {
width: 100%;
padding-top: 13px;
}
#watch-actions {
margin-left: -10px;
margin-right: -10px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
width: 100%;
}
#watch-sidebar {
margin: 0;
padding: 0;
width: 100%;
min-width: 800px;
background: none;
clear: both;
}
#watch-context-container {
display: none;
width: 30%;
min-width: 300px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
margin-right: 1%;
}
#watch-context-container .watch-sidebar-body {
margin: 10px;
}
.watch-sidebar-section {
width: 100%;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.watch-sidebar-section #watch-related-container {
padding: 10px;
min-width: 450px;
float: left;
background: none;
text-align: center;
}
.watch-sidebar-section #watch-related-container .video-list-item {
float: left;
margin-right: 1%;
border: 1px SOLID #CCC;
clear: none;
width: 32%;
}
.watch-headline {
margin-left: 0;
}
/* Movies Section */
#masthead-subnav ul {
width: 100%;
}
.browse-stage {
height: 22px;
}
#browse-ad-container {
display: none;
}
*.wikipedia.org
2 months ago by stcoro
5 2
/* Navigation Bar */
#content, #footer, #mw-head, #p-logo {
display: block;
}
#left-navigation {
display: none;
}
#mw-head-base {
width: 100%;
position: fixed;
top: 80px;
left: -160px;
height: 40px;
background: -webkit-linear-gradient(top, rgba(50,53,56,1) 0%,rgba(0,0,0,1) 100%);
border-bottom: 1px SOLID #333;
z-index: 150;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* MW Panel (main wikipedia menu) */
#mw-panel {
position: fixed;
top: 0px;
left: 210px;
z-index: 4000;
opacity: 0.9;
}
#mw-panel #p-interaction, #mw-panel #p-coll-print_export, #mw-panel #p-lang, #mw-panel #p-tb, #p-navigation .body {
display: none;
}
#mw-panel:hover #p-interaction, #mw-panel:hover #p-coll-print_export, #mw-panel:hover #p-lang, #mw-panel:hover #p-tb {
display: block;
background-color: #FFF;
padding: 5px;
width: 180px;
}
#mw-panel #p-navigation {
display: block;
margin-top: -20px;
padding-top: 13px;
height: 29px;
}
#mw-panel #p-navigation h5 {
color: #FFF;
font-weight: 600;
font-family: Verdana;
font-size: 12px;
}
#mw-panel:hover #p-navigation {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(160,0,0,1)));
width: 90px;
}
#mw-panel .portal {
overflow: hidden;
}
#mw-panel:hover .portal {
}
#mw-panel .portal:hover {
/*height:400px;*/
}
#mw-panel .portal h5 {
display: block;
margin: 0px;
}
#mw-panel .portal .body {
height: 0px;
-webkit-transition: height 1s;
}
#mw-panel .portal:hover .body {
height: 200px;
overflow: auto;
}
/* Contents Dropdown */
#toc {
position: fixed;
top: 0px;
left: 55px;
border: 0px;
z-index: 200;
overflow: hidden;
opacity: 0.9;
padding: 0px;
margin-top: -2px;
background: none;
}
#toc tbody, #toc tr, #toc td {
padding: 0px;
margin: 0px;
}
#toc:hover {
}
#toc #toctitle {
text-align: left;
height: 31px;
padding-top: 10px;
padding-left: 8px;
padding-right: 8px;
width: 65px;
}
#toc:hover #toctitle {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(160,0,0,1)));
}
#toc #toctitle h2 {
font-family: Verdana;
font-weight: 600;
font-size: 13px;
color: #FFF;
}
#toc:hover #toctitle h2 {
}
#toc #toctitle .toctoggle {
display: none;
}
#toc .toclevel-1 {
display: none;
}
#toc:hover ul {
margin: 0px;
padding: 0px;
}
#toc:hover li {
display: block;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 15px;
padding-right: 15px;
margin: 0px;
background-color: #FFF;
}
#toc:hover li a {
color: #555;
}
#toc:hover li:hover a {
color: #000;
}
table.toc tbody tr td ul {
max-height: 540px;
overflow: auto;
}
/* Views */
#p-views {
position: fixed;
z-index: 3000;
top: 0px;
left: 150px;
border: 0px;
}
#p-views:hover {
opacity: 0.9;
}
#p-views h5 {
display: block;
font-family: Verdana;
font-weight: normal;
font-size: 13px;
padding-top: 11px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 14px;
color: #FFF;
width: 40px;
}
#p-views:hover h5 {
color: #FFF;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(160,0,0,1)));
}
.vectorTabs {
background: none;
}
#p-views ul {
display: none;
}
#p-views:hover ul {
display: block;
}
#p-views ul li {
clear: both;
width: 110px;
}
#p-views ul li span {
width: 110px;
padding-left: 10px;
background: none;
background-color: #FFF;
}
#p-views ul li span:hover {
}
#p-views ul li span a {
color: #555;
}
#p-views ul li span:hover a {
color: #000;
}
/* Search Bar */
#right-navigation {
padding-right: 20px;
padding-top: 10px;
position: fixed;
top: -53px;
left: 320px;
z-index: 5000;
width: 400px;
}
#simpleSearch {
width: 500px;
}
#searchInput {
width: 480px;
}
/* Login */
/* Content */
#siteSub {
display: none;
}
#firstHeading {
padding-top: 20px;
padding-bottom: 10px;
padding-left: 5%;
background-color: #EEE;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(219,219,219,1)));
color: #000;
z-index: 50;
position: fixed;
width: 95%;
top: 33px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
text-align: left;
opacity: 0.9;
}
.articleFeedback-buffer.articleFeedback-ui {
display: none;
}
#editform {
padding-left: 30px;
padding-right: 30px;
}
.ambox {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,52,59,1)), color-stop(100%,rgba(129,134,142,1)));
color: #FFF;
}
.ambox a {
color: #FFCC00;
}
.navbox-title {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,52,59,1)), color-stop(100%,rgba(129,134,142,1)));
color: #FFF;
}
.navbox-title a {
color: #FFF;
}
.mw-content-ltr {
margin-left: 50px;
margin-right: 50px;
}
#contentSub {
display: none;
}
#p-personal {
height: 35px;
padding-top: 10px;
position: fixed;
top: -1px;
right: 15px;
z-index: 7000;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1)));
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px SOLID #ff7b0d;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
#pt-login {
margin-left: -150px;
}
#pt-login a {
color: #FFF;
}
#content {
margin-left: 0;
width: 100%;
padding-left: 0px;
padding-right: 0px;
padding-top: 45px;
z-index: 0;
}
#footer {
display: none;
}
.topicon {
display: none;
visibility: hidden;
}
#coordinates {
margin-right: 50px;
}