b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
739 lines
17 KiB
CSS
Executable file
739 lines
17 KiB
CSS
Executable file
|
|
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;
|
|
}
|