b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
739 lines
17 KiB
CSS
739 lines
17 KiB
CSS
|
|
section[role="region"] header:first-child h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: #1c2124;
|
|
}
|
|
|
|
#player-view.disabled .video-controls {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/**
|
|
* 1. COMPLEX: Scoped style-sheets within <gaia-header>
|
|
* trump all other rules. !important is required
|
|
* for an app to over-ride the default appearance
|
|
* of content within the custom-element. This may
|
|
* change when we get `:host` and `:content` selectors
|
|
* in shadow-dom.
|
|
*/
|
|
body:not(.pick-activity) gaia-header.thumbnails-list,
|
|
#thumbnail-list-title {
|
|
display: inherit !important; /* 1 */
|
|
}
|
|
|
|
/* app name field is shown at non-pick mode and list view */
|
|
body.pick-activity #thumbnail-list-title {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
/* moves thumbnails down to 5rem for thumbnail list title showing */
|
|
#thumbnails {
|
|
top: 5rem;
|
|
}
|
|
|
|
/* change bottom of thumbnails to 11rem (5rem of top + 6rem of footer) */
|
|
#thumbnails>li:last-child,
|
|
#thumbnails.select>li:last-child{
|
|
margin-bottom: 11rem;
|
|
}
|
|
|
|
/* pick activity only has top: 5rem */
|
|
body.pick-activity #thumbnails>li:last-child {
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
#thumbnails-bottom {
|
|
background-color: rgba(26, 33, 36, 0.9);
|
|
}
|
|
|
|
|
|
#videoBar {
|
|
background: none;
|
|
box-shadow: none;
|
|
height: 8rem;
|
|
background-image: url(images/tablet_player_mask.png);
|
|
background-repeat: repeat-x;;
|
|
background-size: 100% 8rem;
|
|
border: 0;
|
|
}
|
|
|
|
.player-controls-button {
|
|
color: #FFFFFF;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
transition: none;
|
|
}
|
|
|
|
/* player-view of background */
|
|
#player-view {
|
|
background-color: #1c2124;
|
|
}
|
|
|
|
/* play/pause button */
|
|
#play:before {
|
|
border: 0;
|
|
}
|
|
|
|
#play:active {
|
|
background: none;
|
|
}
|
|
|
|
#play:after {
|
|
background-image: url("images/tablet_pause.png");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: 4.6rem;
|
|
display: block;
|
|
z-index: 10;
|
|
}
|
|
|
|
#play.paused:after {
|
|
background-image: url("images/tablet_play.png");
|
|
background-size: 4.6rem;
|
|
}
|
|
|
|
#play:active:after {
|
|
background-image: url("images/tablet_pause_pressed.png");
|
|
}
|
|
|
|
#play.paused:active:after {
|
|
background-image: url("images/tablet_play_pressed.png");
|
|
}
|
|
|
|
/* time slider */
|
|
#timeSlider {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
/* slider text */
|
|
#timeSlider span {
|
|
display: block;
|
|
height: 100%;
|
|
line-height: 8rem;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
font-size: 1.8rem;
|
|
text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
text-align: left;
|
|
}
|
|
|
|
span#elapsed-text {
|
|
width: 6rem;
|
|
}
|
|
|
|
#duration-text {
|
|
right: 0;
|
|
top: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.progress {
|
|
border-radius: 0.2rem;
|
|
height: 0;
|
|
}
|
|
|
|
/* slider */
|
|
#slider-wrapper {
|
|
top: 0;
|
|
left: 6rem;
|
|
height: 100%;
|
|
}
|
|
|
|
#slider-wrapper div{
|
|
left: 0;
|
|
}
|
|
|
|
#elapsedTime {
|
|
background-color: #00CAF2;
|
|
border: 0.2rem solid #00CAF2;
|
|
z-index: 30;
|
|
}
|
|
|
|
#bufferedTime {
|
|
background-color: #00CAF2;
|
|
border: 0.2rem solid #00CAF2;
|
|
z-index: 20;
|
|
}
|
|
|
|
#timeBackground {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
border: 0.2rem solid rgba(255, 255, 255, 0.3);
|
|
z-index: 10;
|
|
}
|
|
|
|
/* player head */
|
|
#playHead {
|
|
position: absolute;
|
|
background: url(images/tablet_scrubber.png) no-repeat center center;
|
|
margin: 0 0 0 -2.3rem;
|
|
background-size: 4.6rem;
|
|
pointer-events: none;
|
|
border: none;
|
|
display: block;
|
|
height: 100%;
|
|
width: 4.6rem;
|
|
z-index: 100;
|
|
top: 0;
|
|
}
|
|
|
|
#playHead.active {
|
|
background: url(images/tablet_scrubber_pressed.png) no-repeat center center;
|
|
width: 4.6rem;
|
|
height: 100%;
|
|
margin: 0 0 0 -2.3rem;
|
|
top: 0;
|
|
}
|
|
|
|
footer {
|
|
height: 6rem;
|
|
}
|
|
|
|
/* selected thumbnail */
|
|
.thumbnail.selected > .inner {
|
|
outline: solid #00caf2 0.4rem;
|
|
outline-offset: -0.4rem;
|
|
}
|
|
|
|
/* unwatched bar */
|
|
.thumbnail .unwatched {
|
|
background-image: none;
|
|
background-color: #00CAF2;
|
|
}
|
|
|
|
.thumbnail .details .title {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.layout-selection .thumbnails-select,
|
|
.layout-list .thumbnails-list {
|
|
display: block;
|
|
}
|
|
|
|
/**
|
|
* 1. COMPLEX: Scoped style-sheets within <gaia-header>
|
|
* trump all other rules. !important is required
|
|
* for an app to over-ride the default appearance
|
|
* of content within the custom-element. This may
|
|
* change when we get `:host` and `:content` selectors
|
|
* in shadow-dom.
|
|
*/
|
|
.layout-fullscreen-player .large-only {
|
|
display: block !important; /* 1 */
|
|
}
|
|
|
|
/* we don't need to show toolbar buttons in pick mode */
|
|
body.pick-activity .single-delete-button,
|
|
body.pick-activity .single-share-button,
|
|
body.pick-activity .single-info-button {
|
|
display: none;
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
|
|
/* panels of selection mode */
|
|
.layout-selection .thumbnails-list {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
.layout-selection #switch-fullscreen,
|
|
.layout-selection #player-view > *,
|
|
.layout-selection .single-delete-button,
|
|
.layout-selection .single-share-button,
|
|
.layout-selection .single-info-button {
|
|
display: none;
|
|
}
|
|
/* show player-view for displaying background image, but all decendants are
|
|
* hidden */
|
|
.layout-selection #player-view {
|
|
display: block;
|
|
}
|
|
|
|
/* panels of list mode */
|
|
.layout-list #player-view,
|
|
.layout-list #player-view #fullscreen-button {
|
|
display: block;
|
|
}
|
|
|
|
.layout-list .thumbnails-select {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
.layout-list #switch-fullscreen,
|
|
.layout-list .video-controls #videoActionBar,
|
|
.layout-list .video-controls #close,
|
|
.layout-list .single-delete-button,
|
|
.layout-list .single-share-button,
|
|
.layout-list .single-info-button {
|
|
display: none;
|
|
}
|
|
|
|
/* panels of fullscreen player mode */
|
|
.layout-fullscreen-player #player-view {
|
|
display: block;
|
|
}
|
|
|
|
.layout-fullscreen-player .thumbnails-list,
|
|
.layout-fullscreen-player .thumbnails-select {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
.layout-fullscreen-player #thumbnails,
|
|
.layout-fullscreen-player .video-controls #videoActionBar {
|
|
display: none;
|
|
}
|
|
|
|
/* left pane size */
|
|
.thumbnails-select,
|
|
.thumbnails-list,
|
|
#thumbnails {
|
|
left: 0;
|
|
width: 40rem;
|
|
}
|
|
|
|
/* player size */
|
|
#player-view {
|
|
left: 40rem;
|
|
width: calc(100% - 40rem);
|
|
}
|
|
|
|
.layout-list #video-container {
|
|
margin: 6rem 1rem 1rem 1rem;
|
|
width: calc(100% - 2rem);
|
|
height: calc(100% - 7rem); /* top 6rem + bottom 1 rem */
|
|
}
|
|
|
|
.layout-fullscreen-player #player-view {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* the separator for two panes */
|
|
#two-column-spearator {
|
|
display: block;
|
|
position: absolute;
|
|
left: 40rem;
|
|
width: 0.2rem;
|
|
top: 5rem;
|
|
bottom: 0;
|
|
background-image: url(images/tablet_column_separator.png);
|
|
background-size: 0.2rem 100%
|
|
}
|
|
|
|
#two-column-spearator:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 0.2rem;
|
|
height: 5rem;
|
|
top: -5rem;
|
|
background-image: url(images/tablet_section_divider.png);
|
|
background-size: 0.2rem 100%
|
|
}
|
|
|
|
.layout-list #player-view header:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
height: 5rem;
|
|
width: 0.2rem;
|
|
background: url(images/tablet_section_divider.png) no-repeat left;
|
|
}
|
|
|
|
#fullscreen-button {
|
|
background-image: url(images/tablet_fullscreen.png);
|
|
background-size: 4.6rem;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
width: 8rem;
|
|
height: 100%;
|
|
right: 0;
|
|
}
|
|
|
|
#fullscreen-button:active {
|
|
background-image: url(images/tablet_fullscreen_pressed.png);
|
|
}
|
|
|
|
/* disable video controls when selected */
|
|
.layout-selection .video-controls {
|
|
pointer-events: none;
|
|
}
|
|
|
|
body:not(.layout-selection):not(.pick-activity) .thumbnail.focused > .inner {
|
|
outline: solid #00caf2 0.4rem;
|
|
outline-offset: -0.4rem;
|
|
}
|
|
|
|
/* video controls */
|
|
.layout-list #play{
|
|
width: 10rem;
|
|
}
|
|
|
|
.layout-list #timeSlider {
|
|
left: 10rem;
|
|
right: 8rem;
|
|
width: auto;
|
|
}
|
|
|
|
.layout-list #slider-wrapper {
|
|
/* duration text and padding */
|
|
right: 7rem;
|
|
/* text at left and right are 6rem and 1rem for additional padding between
|
|
* fullscreen button and duration text */
|
|
width: calc(100% - 6rem - 7rem);
|
|
}
|
|
|
|
.layout-list #timeBackground {
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-list #duration-text {
|
|
width: 5rem;
|
|
}
|
|
|
|
.layout-fullscreen-player #timeSlider {
|
|
left: 20rem;
|
|
right: 0;
|
|
}
|
|
|
|
.layout-fullscreen-player #slider-wrapper {
|
|
right: 12rem;
|
|
/* text at left is 6rem, right is 10rem and additional 2rem for padding
|
|
* between edge and duration text */
|
|
width: calc(100% - 6rem - 12rem);
|
|
}
|
|
|
|
.layout-fullscreen-player #timeBackground {
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-fullscreen-player #duration-text {
|
|
width: 10rem;
|
|
}
|
|
|
|
.layout-fullscreen-player #fullscreen-button {
|
|
display: none;
|
|
}
|
|
|
|
/* normal case of thumbnail size */
|
|
.thumbnail {
|
|
border: 0;
|
|
margin: 0.2rem 0 0 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.thumbnail:before {
|
|
content: "";
|
|
width: 40rem;
|
|
height: 0.2rem;
|
|
background-image: url(images/tablet_video_divider.png);
|
|
position: absolute;
|
|
top: -0.2rem;
|
|
}
|
|
|
|
.thumbnail .details {
|
|
margin: 1.5rem 1.5rem 1rem 1.5rem;
|
|
height: 9.5rem;
|
|
width: calc(100% - 24rem);
|
|
font-size: 1.4rem;
|
|
color: #8A9699;
|
|
}
|
|
|
|
.thumbnail .details .title {
|
|
font-size: 2.4rem;
|
|
line-height: 2.4rem;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* spinner is only valid for tablet and landscape mode */
|
|
#spinner-overlay {
|
|
display: block;
|
|
}
|
|
|
|
/* pick mode */
|
|
body.pick-activity.layout-selection #player-view,
|
|
body.pick-activity.layout-list #player-view {
|
|
display: none;
|
|
}
|
|
|
|
body.pick-activity #two-column-spearator {
|
|
display: none;
|
|
}
|
|
|
|
/* left pane size */
|
|
body.pick-activity .thumbnails-select,
|
|
body.pick-activity .thumbnails-list,
|
|
body.pick-activity #thumbnails {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* pick view of thumbnail size */
|
|
body.pick-activity .thumbnail {
|
|
width: calc(33% - 0.2rem);
|
|
height: 0;
|
|
border: 0;
|
|
margin: 0 0 0.4rem 0;
|
|
overflow: visible;
|
|
float: left;
|
|
/*
|
|
* Why padding-bottom? We need to keep the same image ratio which 7:4.
|
|
* According to MDN padding-top, the percentage is referring to width of the
|
|
* block. So, we use (33% - 0.2rem) to have correct width width and applying
|
|
* 7:4 ratio to get the correct block height.
|
|
* See: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
|
|
**/
|
|
padding-bottom: calc((33% - 0.2rem) * 4 / 7);
|
|
}
|
|
|
|
body.pick-activity .thumbnail:nth-child(3n),
|
|
body.pick-activity .thumbnail:nth-child(3n + 2) {
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
body.pick-activity .thumbnail .inner,
|
|
body.pick-activity .thumbnail .inner .img {
|
|
width: 100%;
|
|
height: 0;
|
|
padding-bottom: calc(100% * 4 / 7);
|
|
}
|
|
|
|
body.pick-activity .thumbnail .details {
|
|
margin: 0;
|
|
/*
|
|
* We still need display:flex in this case because we need all elements are
|
|
* vertically aligned to bottom. So, we keep the height as 19.7rem which is
|
|
* the visual spec in 800x1280. If a device's width is less than 768px, it
|
|
* turns into tiny mode. Another 1.5rem is for the padding bottom.
|
|
* The equation is:
|
|
* padding top = calculated height - detail's height - padding bottom.
|
|
**/
|
|
padding: calc(100% * 4 / 7 - 19.7rem - 1.5rem) 2rem 1.5rem 2rem;
|
|
width: 16.5rem;
|
|
height: 19.7rem;
|
|
font-size: 1.6rem;
|
|
color: #FFFFFF;
|
|
text-shadow:0 0 5px #000000;
|
|
background-image: url(images/tablet_text_mask.png);
|
|
background-repeat: repeat-y;
|
|
background-size: 100%;
|
|
justify-content: flex-end;
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
body.pick-activity .thumbnail .details span {
|
|
bottom: 0;
|
|
}
|
|
|
|
body.pick-activity .thumbnail .details .after {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
body.pick-activity .thumbnail .details .title {
|
|
font-size: 2.6rem;
|
|
line-height: 2.6rem;
|
|
}
|
|
}
|
|
|
|
@media (orientation: portrait) {
|
|
.inner {
|
|
position: relative;
|
|
}
|
|
|
|
/* we don't need fullscreen button in this mode */
|
|
#fullscreen-button {
|
|
display: none;
|
|
}
|
|
|
|
/* selection mode */
|
|
.layout-selection .thumbnails-list {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
.layout-selection #player-view {
|
|
display: none;
|
|
}
|
|
|
|
/* list mode */
|
|
.layout-list .thumbnails-select {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
.layout-list #player-view {
|
|
display: none;
|
|
}
|
|
|
|
/* player mode / fullscreen-player mode */
|
|
.layout-fullscreen-player .thumbnails-select,
|
|
.layout-fullscreen-player .thumbnails-list {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
.layout-fullscreen-player #thumbnails,
|
|
.layout-fullscreen-player .video-controls #videoActionBar {
|
|
display: none;
|
|
}
|
|
|
|
/* spinner is only valid for tablet and landscape mode */
|
|
#spinner-overlay {
|
|
display: none;
|
|
}
|
|
|
|
.layout-fullscreen-player #timeSlider {
|
|
left: 14rem;
|
|
right: 0;
|
|
}
|
|
|
|
.layout-fullscreen-player #slider-wrapper {
|
|
right: 10rem;
|
|
/* text at left is 6rem, right is 8rem and additional 2rem for padding
|
|
* between edge and duration text */
|
|
width: calc(100% - 16rem);
|
|
}
|
|
|
|
.layout-fullscreen-player #timeBackground {
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-fullscreen-player #duration-text {
|
|
width: 8rem;
|
|
}
|
|
|
|
/* thumbnail size */
|
|
.thumbnail {
|
|
width: calc(50% - 0.2rem);
|
|
height: 0;
|
|
border: 0;
|
|
margin: 0 0 0.4rem 0;
|
|
overflow: visible;
|
|
float: left;
|
|
padding-bottom: calc((50% - 0.2rem) * 4 / 7);
|
|
}
|
|
|
|
.thumbnail:nth-child(even) {
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
.thumbnail .inner,
|
|
.thumbnail .inner .img {
|
|
width: 100%;
|
|
height: 0;
|
|
padding-bottom: calc(100% * 4 / 7);
|
|
}
|
|
|
|
.thumbnail .details {
|
|
margin: 0;
|
|
/*
|
|
* We still need display:flex in this case because we need all elements are
|
|
* vertically aligned to bottom. So, we keep the height as 19.7rem which is
|
|
* the visual spec in 800x1280. If a device's width is less than 768px, it
|
|
* turns into tiny mode. Another 1.5rem is for the padding bottom.
|
|
* The equation is:
|
|
* padding top = calculated height - detail's height - padding bottom.
|
|
**/
|
|
padding: calc(100% * 4 / 7 - 19.7rem - 1.5rem) 2rem 1.5rem 2rem;
|
|
width: 16.5rem;
|
|
height: 19.7rem;
|
|
font-size: 1.6rem;
|
|
color: #FFFFFF;
|
|
text-shadow:0 0 5px #000000;
|
|
background-image: url(images/tablet_text_mask.png);
|
|
background-repeat: repeat-y;
|
|
background-size: 100%;
|
|
justify-content: flex-end;
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
.thumbnail .details span {
|
|
bottom: 0;
|
|
}
|
|
|
|
.thumbnail .details .after {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.thumbnail .details .title {
|
|
font-size: 2.6rem;
|
|
line-height: 2.6rem;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
/* Override header bar of building block */
|
|
/* XXX: the following css styles should be moved to building blocks,
|
|
* bug 905056 */
|
|
section[role="region"] > header:first-child > button,
|
|
section[role="region"] > header:first-child > a {
|
|
position: relative;
|
|
width: 5rem;
|
|
height: 4.9rem;
|
|
background: none;
|
|
float: left;
|
|
overflow: visible;
|
|
margin: 0;
|
|
}
|
|
|
|
section[role="region"].skin-organic > header:first-child,
|
|
.skin-organic section[role="region"] > header:first-child,
|
|
section[role="region"].skin-dark > header:first-child,
|
|
.skin-dark section[role="region"] > header:first-child {
|
|
background: url("images/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
|
|
}
|
|
section[role="region"] > header:first-child h1 {
|
|
padding: 0 1rem 0 2rem;
|
|
}
|
|
section[role="region"] > header:first-child .icon {
|
|
width: 5rem;
|
|
}
|
|
section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
|
|
section[role="region"] > header:first-child > button:not(:disabled):active:after,
|
|
section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
|
|
section[role="region"] > header:first-child > button:not(:disabled):hover:after,
|
|
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
|
|
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
|
|
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
|
|
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active {
|
|
background: url("images/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
|
|
}
|
|
section[role="region"] > header:first-child menu[type="toolbar"] a,
|
|
section[role="region"] > header:first-child menu[type="toolbar"] button {
|
|
width: 8.2rem;
|
|
}
|
|
section[role="region"].skin-organic > header:first-child a:after,
|
|
.skin-organic section[role="region"] > header:first-child a:after,
|
|
section[role="region"].skin-dark > header:first-child a:after,
|
|
.skin-dark section[role="region"] > header:first-child a:after,
|
|
section[role="region"].skin-organic > header:first-child button:after,
|
|
.skin-organic section[role="region"] > header:first-child button:after,
|
|
section[role="region"].skin-dark > header:first-child button:after,
|
|
.skin-dark section[role="region"] > header:first-child button:after {
|
|
background: url("images/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
|
|
}
|
|
|
|
section[role="region"] > header:first-child > button:after,
|
|
section[role="region"] > header:first-child > a:after {
|
|
width: 5.2rem;
|
|
}
|
|
|
|
section[role="region"] > header:first-child menu[type="toolbar"] a:after,
|
|
section[role="region"] > header:first-child menu[type="toolbar"] button:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
height: 5rem;
|
|
width: 8.2rem;
|
|
background: url("images/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
|
|
}
|