| <!DOCTYPE html> |
| <!-- |
| | Absolutely positioned elements have their containing blocks set to their |
| | first ancestor with a position of 'absolute', 'relative' or 'fixed'. They |
| | should inherit CSS properties from their parent, as usual, even though their |
| | percentage-based used values are calculated based on their containing block. |
| --> |
| <html> |
| <head> |
| <style> |
| .outer-absolute-block { |
| position: absolute; |
| left: 120px; |
| top: -130px; |
| width: 300px; |
| height: 300px; |
| font-size: 10px; |
| font-weight: bold; |
| color: rgb(0, 0, 255); |
| } |
| |
| @font-face { |
| font-family: 'roboto-regular'; |
| src: url('../assets/Roboto-Regular.ttf') format('truetype'); |
| } |
| |
| body { |
| font-family: 'roboto-regular'; |
| margin: auto; |
| background-color: #222222; |
| } |
| |
| div { |
| display: block; |
| -webkit-transform: translateZ(0); |
| transform: translateZ(0); |
| } |
| |
| #fps { |
| position: absolute; |
| right: 0; |
| bottom: 0; |
| text-align: center; |
| padding-top: 0.3em; |
| width: 5em; |
| height: 1.7em; |
| background-color: #00ff00; |
| z-index: 100; |
| } |
| |
| .menu { |
| position: absolute; |
| overflow: hidden; |
| background: #ce292d; |
| color: #333; |
| height: 100%; |
| z-index: 10; |
| } |
| |
| .icon-focus { |
| position: absolute; |
| width: 94%; |
| height: 4em; |
| } |
| .menu.focus .icon-focus { |
| background-color: #ffffff; |
| } |
| |
| .lozenge { |
| padding: 1.3em 0 0 1.5em; |
| line-height: 3em; |
| |
| -moz-transition: opacity 100ms; |
| -webkit-transition: opacity 100ms; |
| transition: opacity 100ms; |
| transition-delay: 100ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| |
| .menu.focus .lozenge { |
| opacity: 0; |
| |
| -moz-transition: opacity 100ms; |
| -webkit-transition: opacity 100ms; |
| transition: opacity 100ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| |
| .column { |
| position: absolute; |
| left: 1em; |
| top: 1em; |
| width: 30em; |
| } |
| |
| .icon { |
| position: absolute; |
| width: 94%; |
| height: 4em; |
| } |
| |
| .icon-content { |
| display: inline-block; |
| font-family: 'youtube-icons'; |
| font-size: 3em; |
| text-align: center; |
| line-height: 1.33em; |
| color: #ffffff; |
| width: 1.66em; |
| vertical-align: middle; |
| } |
| |
| .icon .icon-content { |
| -moz-transition: color 200ms; |
| -webkit-transition: color 200ms; |
| transition: color 200ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| .icon .label { |
| display: inline-block; |
| color: #FF0000; |
| font-size: 1.5em; |
| vertical-align: middle; |
| |
| -moz-transition: color 200ms; |
| -webkit-transition: color 200ms; |
| transition: color 200ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| |
| .icon-content.hidden { |
| display: none; |
| } |
| .icon.focus .icon-content { |
| color: #444444; |
| |
| -moz-transition: color 200ms; |
| -webkit-transition: color 200ms; |
| transition: color 200ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| .icon.focus .label { |
| color: #444444; |
| |
| -moz-transition: color 200ms; |
| -webkit-transition: color 200ms; |
| transition: color 200ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| |
| .icon-content.icon-youtube-logo { |
| padding-left: .5em; |
| font-size: 2em; |
| line-height: 2.5em; |
| } |
| |
| .icon.locked .label { |
| line-height: 3.5em; |
| padding-left: 1em; |
| font-weight: bold; |
| } |
| |
| .main { |
| position: absolute; |
| left: 10%; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .anchor { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| } |
| |
| .anchor.focus .fade { |
| opacity: 0; |
| |
| -moz-transition: opacity 200ms; |
| -webkit-transition: opacity 200ms; |
| transition: opacity 200ms; |
| transition-delay: 50ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| .fade { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| opacity: 0.5; |
| |
| -moz-transition: opacity 200ms; |
| -webkit-transition: opacity 200ms; |
| transition: opacity 200ms; |
| transition-delay: 50ms; |
| transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1.0); |
| } |
| |
| .header { |
| position: absolute; |
| overflow: visible; |
| width: 90%; |
| height: 60%; |
| } |
| |
| .headerbuttons { |
| position: absolute; |
| width: 37em; |
| height: 6em; |
| bottom: 24%; |
| right: 1em; |
| background: #000; |
| } |
| |
| .button, |
| .button-focus, |
| .button-background { |
| position: absolute; |
| display: inline-block; |
| margin: 1em 0 0 1em; |
| width: 17em; |
| height: 4em; |
| |
| color: #fff; |
| } |
| .button-background { |
| background: #444; |
| position: initial; |
| } |
| .button-background-container { |
| position: absolute; |
| } |
| .button-focus { |
| background: #ffffff; |
| opacity: 0; |
| } |
| .headerbuttons.focus .button-focus { |
| opacity: 1; |
| } |
| |
| .button .icon-content { |
| display: inline-block; |
| font-size: 2em; |
| padding: .33em 0 0 .5em; |
| vertical-align: top; |
| } |
| .button .label { |
| display: inline-block; |
| font-size: 1.5em; |
| width: 7em; |
| text-align: center; |
| padding-top: .66em; |
| } |
| |
| .button .icon-content, |
| .button .label { |
| color: #f00; |
| } |
| .button.focus .icon-content, |
| .button.focus .label { |
| color: #400; |
| } |
| |
| .content { |
| position: absolute; |
| overflow: hidden; |
| width: 90%; |
| top: 45%; |
| height: 180%; |
| } |
| |
| .row-container { |
| position: absolute; |
| width: 100%; |
| height: 20em; |
| } |
| |
| .row-label { |
| width: 30em; |
| height: 1em; |
| font-size: 2em; |
| padding-left: 1em; |
| } |
| |
| .row { |
| position: absolute; |
| margin: 1em 0; |
| padding-left: 1em; |
| width: 100%; |
| height: 20em; |
| overflow: hidden; |
| } |
| |
| .item-focus { |
| position: absolute; |
| width: 20em; |
| height: 20em; |
| z-index: -1; |
| background: #ffffff; |
| } |
| |
| .item { |
| position: absolute; |
| margin: 0 1em 0 0; |
| width: 20em; |
| height: 20em; |
| color: #999999; |
| } |
| .item.hidden { |
| display: none; |
| } |
| .item .top { |
| width: 100%; |
| height: 55%; |
| } |
| .item .thumbnail { |
| width: 100%; |
| height: 100%; |
| |
| background-position: center; |
| background-size: 100%; |
| } |
| |
| .title { |
| padding: .5em; |
| font-size: 1.4em; |
| overflow: hidden; |
| height: 2.1em; |
| text-overflow: ellipsis; |
| } |
| |
| .info { |
| position: absolute; |
| bottom: .5em; |
| font-size: 1em; |
| padding: 0 0.8em; |
| } |
| |
| .viewCount, |
| .date { |
| display: inline-block; |
| margin-right: 2em; |
| } |
| .viewCount:empty, |
| .date:empty, |
| .by:empty { |
| display: none; |
| } |
| |
| .playlist { |
| position: absolute; |
| width: 10em; |
| height: 9em; |
| right: 0em; |
| top: 0em; |
| text-align: center; |
| line-height: 1.5em; |
| padding-top: 2em; |
| background: rgba(0, 0, 0, .8); |
| } |
| .playlist .number { |
| font-size: 2.5em; |
| font-weight: bold; |
| } |
| .playlist .icon-playlist { |
| line-height: 1.5em; |
| font-size: 2.5em; |
| text-align: center; |
| } |
| .playlist:empty { |
| display: none; |
| } |
| |
| .duration { |
| position: absolute; |
| top: 9em; |
| right: .4em; |
| height: 1em; |
| background-color: rgba(0, 0, 0, 0.5); |
| color: #fff; |
| text-align: center; |
| padding: .2em .5em .5em .5em; |
| border-radius: 0.2em; |
| } |
| .duration:empty { |
| display: none; |
| } |
| |
| .second-button { |
| -webkit-transform: translateX(11em) |
| } |
| |
| </style> |
| </head> |
| |
| <body> |
| <div class="outer-absolute-block"> |
| |
| <div class="hbox headerbuttons focusable"> |
| <div class="button-background-container"> |
| <div class="inert locked leaf button-background"></div> |
| <div class="inert locked leaf button-background"></div> |
| </div> |
| <div class="inert button-focus"></div> |
| <div class="leaf button focusable"> |
| <div class="icon-content icon-player-play"></div> |
| <div class="label">Watch</div> |
| </div> |
| <div class="leaf button focusable"> |
| <div class="icon-content icon-logo-lozenge"></div> |
| <div class="label second-button">Subscribe</div> |
| </div> |
| </div> |
| |
| </div> |
| </body> |
| |
| </html> |
