// ============================================================================================================== // IMPORT // ============================================================================================================== @import "normalize"; @import "base"; // ============================================================================================================== // START // ============================================================================================================== html, body { font-family: 'GibsonRegular', sans-serif; font-size: 18px; color: #fff; background: #1d1d1d; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; } .cc { clear: both; } // ============================================================================================================== // NON LO SO... BOH // ============================================================================================================== .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .noMarginLeft{ margin-left: 0 !important; } .lbl { display: block; font-size: 1em; font-weight: normal; line-height: 1em; text-indent: -9999em; overflow: hidden; background-color: transparent; background-position: left top; background-repeat: no-repeat; } .categoryTitle { font-family: 'GibsonLight', sans-serif; font-size: 23px; line-height: 23px; padding: 0 15px 15px 25px; } // ============================================================================================================== // CONTAINER // ============================================================================================================== #page-container { width: 100%; max-width: 1200px; margin: 0 auto; // ---------------------------------------------- // sub bar // ---------------------------------------------- #sub_bar { display: none; padding: 15px 15px 8px 15px; a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 14px; line-height: 14px; margin-right: 8px; .arrow { margin-right: 5px; } } } // ---------------------------------------------- // video title // ---------------------------------------------- #video_title { display: none; font-family: 'GibsonLight', sans-serif; font-size: 23px; line-height: 23px; padding: 0 15px 15px 25px; } // ---------------------------------------------- // home // ---------------------------------------------- #home_pl { .playlist { .info_box { position: absolute; left: 15px; bottom: 15px; z-index: 50; span { font-family: 'GibsonRegular', sans-serif; } .title { display: block; font-size: 20px; line-height: 24px; color: #fff; } .subtitle { display: block; font-size: 14px; line-height: 18px; color: #fff; text-transform: uppercase; } .action { display: block; font-size: 13px; line-height: 18px; color: #fff; text-transform: uppercase; } } &.light { .info_box { .title, .subtitle, .action { color: #4b4b4b; } } } } } // ---------------------------------------------- // video box // ---------------------------------------------- #video_box { display: none; position: relative; width: 100%; text-align: center; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; button{ display: none; position: absolute; z-index: 999; top: 238px; width: 48px; height: 48px; border: none; background: url('../images/btn_prev_next_video.png') top left no-repeat; background: url('../images/btn_prev_next_video.png') top left no-repeat; &.prev { left: 0; } &.next { right: 0; background-position: bottom left; } } #ytplayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .share_box{ display: none; } } // ---------------------------------------------- // diesel-reboot // ---------------------------------------------- #diesel-reboot { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #00131e; z-index: 600; img { position: absolute; top: 50%; left: 50%; margin-left: -270px; margin-top: -180px; } } // ---------------------------------------------- // carousel // ---------------------------------------------- #product_carousel_wrapper { display: none; position: relative; height: 160px; .navigation { display: none; } #product_carousel { position: relative; overflow: hidden; width: 100%; height: 100%; margin: 0 auto; .scrollbarH { @include border-radius(6px); background: #000; background: rgba(black, 0.4); height: 8px; position: absolute; left: 10px; right: 10px; bottom: 2px; z-index: 9999; div { height: 8px; position: absolute; z-index: 100; &:after { @include border-radius(4px); content: ''; background: #fff; background: rgba(white, 0.75); display: block; position: relative; margin: 1px; height: 6px; } } } ul { height: 160px; display: block; margin: 0; padding: 0; position: relative; li { @include opacity(0); height: 160px; float: left; list-style: none; position: relative; padding-right: 1px; a { display: block; height: 100%; position: relative; img { @include opacity(1); height: 100%; width: auto; } &:hover img { @include opacity(0.8); } } } } } } // ---------------------------------------------- // quicklinks // ---------------------------------------------- #quick_links { padding: 1px 0; background: #ececec; a { float: left; width: 33.3%; display: block; text-align: center; font-size: 15px; line-height: 15px; text-decoration: none; text-transform: uppercase; span { display: block; margin-right: 1px; padding: 15px 0; } &.buy { span { background: #cf071d; @include background-image(linear-gradient(bottom, #a60617, #e0081f)); color: #fff; } } &.collection { span { background: #dcdcdc; @include background-image(linear-gradient(bottom, #f6f6f6, #bdbdbd)); color: #252525; } } &.store { width: 33.4%; span { background: #dcdcdc; @include background-image(linear-gradient(bottom, #f6f6f6, #bdbdbd)); color: #252525; margin: 0; } } // -------------------------------------- // media queries - MAX WIDTH 640px // -------------------------------------- @media screen and (max-width:640px) { & { width: 100% !important; } } } } // ---------------------------------------------- // comment box // ---------------------------------------------- #comment_box{ display: none; clear: both; color: #ccc; font-size: 15px; padding: 0 10px 40px 10px; margin-top: 15px; h2{ font-family: "GibsonLight", sans-serif; font-size: 22px; font-weight: normal; text-transform: none; margin: 0; } ul{ padding: 0 0 0 15px; list-style: disc; li{ padding: 14px 0 14px 10px; font-size: 14px; line-height: 17px; &:first-child{ padding-top: 0; } & > div{ font-size: 14px; line-height: 17px; padding-bottom: 2px; } a.commenter{ text-decoration: underline; color: #fff; font-size: 12px; font-weight: 700; } span.time_passed { color: #fff; text-transform: uppercase; font-size: 10px; margin-left: 4px; font-weight: 700; } } } > a{ text-decoration: underline; margin: 0 10px 0 0; } a#link_post_a_comment, a#link_to_all_comments { text-transform: none; color: #fff; font-size: 13px; line-height: 13px; } } // ---------------------------------------------- // campaigns // ---------------------------------------------- #campaigns_pl { display: none; .categoryTitle { display: none; } } // ---------------------------------------------- // videos // ---------------------------------------------- #videos { display: none; .video { display: block; float: left; width: 33.3%; height: 200px; overflow: hidden; position: relative; background: #000; .poster { width: 100%; height: auto; vertical-align: middle; } .title { @include opacity(0); @include display-box; @include box-align(center); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; background: rgba(#fff, 0.8); color: #000; text-align: center; text-decoration: none; p { padding: 0 30px; } } // -------------------------------------- // media queries - MAX WIDTH 640px // -------------------------------------- @media screen and (max-width:800px) { & { width: 50%; height: 280px; } } // -------------------------------------- // media queries - MAX WIDTH 640px // -------------------------------------- @media screen and (max-width:640px) { & { width: 100%; height: 330px; } } } } // ---------------------------------------------- // playlists // ---------------------------------------------- .playlists { display: none; .playlist { display: block; float: left; width: 50%; height: 280px; overflow: hidden; position: relative; text-decoration: none; background: #000; .curtain{ @include opacity(0.7); @include transition-property(transform, width); @include transition-duration(450ms); @include transition-timing-function(ease-out); @include transform-origin(50% 50%); @include skewX(-30deg); display: block; position: absolute; left: -20%; top: 0; z-index: 10; width: 1px; height: 100%; } .title-hover { @include opacity(0); @include display-box; @include box-align(center); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; background: rgba(#fff, 0.8); color: #000; text-align: center; text-decoration: none; p { padding: 30px 5%; display: block; width: 90% } } &:hover .curtain{ @include skewX(0deg); width: 120%; } .poster { width: 100%; height: auto; vertical-align: middle; position: absolute; right: 0; top: 0; } // -------------------------------------- // media queries - MAX WIDTH 640px // -------------------------------------- @media screen and (max-width:640px) { & { width: 100%; height: 330px; } } } } // ---------------------------------------------- // pagination // ---------------------------------------------- #pagination{ display: none; clear: both; padding: 40px 0; font-size: 16px; text-align: center; a { color: #535151; display: inline-block; margin: 0 4px 0 0; } a.current { color: #fff; } a.prev, a.next { width: 12px; height: 11px; background: url('../images/btn_pagination_prev_next.png') top left no-repeat; } a.first, a.last { width: 12px; height: 11px; background: url('../images/btn_pagination_first_last.png') top left no-repeat; } a.next, a.last { background-position: bottom; } } } // ============================================================================================================== // PAGES // ============================================================================================================== #page-container { // ---------------------------------------------- // TYPE: home page // ---------------------------------------------- &.home-page { #video_box { display: block; padding-bottom: 0; height: 360px; } #ytplayer { display: none; } .playlists { display: block; } #diesel-reboot { display: block; } #product_carousel_wrapper { display: none !important; } #quick_links { display: none !important; } } // ---------------------------------------------- // TYPE: video detail page // ---------------------------------------------- &.video-detail-page { // ---------------------------------------------- // no playlist // ---------------------------------------------- &.no-playlist { #video_box { button { display: none !important; } } } // ---------------------------------------------- // is playlist // ---------------------------------------------- #video_title { display: block; } #sub_bar { display: block; } #comment_box{ display: block; } #video_box { display: block; margin-bottom: 80px; .video-comands { bottom: -60px; height: 50px; position: absolute; width: 100%; button { @include opacity(0.25); bottom: 0; top: auto; display: block !important; opacity: 0.25; &:hover { @include opacity(1); } &.next{ right: auto; left: 49px; } } .share_box { display: block; position: absolute; bottom: 0; right: 0; & > * { float: left; font-size: 14px; color: #494949; } span { margin: 7px 4px 0 0; color: #9a9a9a; } a { margin: 0 0 0 5px; } } } } } // ---------------------------------------------- // TYPE: campaigns page // ---------------------------------------------- &.campaigns-page { #sub_bar { display: block; } #campaigns_pl { display: block; .categoryTitle{ display: block; } } } // ---------------------------------------------- // TYPE: playlist page // ---------------------------------------------- &.playlist-page { #sub_bar { display: block; } #videos { display: block; } #pagination{ display: block; } } // ---------------------------------------------- // TYPE: search page // ---------------------------------------------- &.search-page { #sub_bar { display: block; } #videos { display: block; } #pagination{ display: block; } } } // ============================================================================================================== // IE // ============================================================================================================== .lt-ie9 { #comment_box ul{ margin-top: -10px; li{ padding: 10px 0 0 10px; } } }