b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
757 lines
14 KiB
CSS
757 lines
14 KiB
CSS
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 10px;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #0E1214;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding-bottom: 5rem;
|
|
}
|
|
|
|
body > section {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
font-size: 1.4rem;
|
|
background-color: #0E1214;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background-color: #0E1214;
|
|
}
|
|
|
|
li .inner {
|
|
height: 12rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* unwatched doesn't participate in the flexbox because its position is
|
|
absolute so that it appears on top of the image instead of beside it */
|
|
.unwatched {
|
|
background: image-set(url("images/unwatched.png") 1x, url("images/unwatched@1.5x.png") 1.5x, url("images/unwatched@2x.png") 2x, url("images/unwatched@2.25x.png") 2.25x) no-repeat center / 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 0.4rem;
|
|
top: 0;
|
|
}
|
|
|
|
li .inner .img {
|
|
width: 21rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
li .img.default {
|
|
width: 6rem;
|
|
}
|
|
|
|
/* 1. Leave room for two rem when computing width of details
|
|
to account for one rem margin left and right */
|
|
li .inner .details {
|
|
line-height: 1.6rem;
|
|
margin: 1.6rem 1rem; /* 1 */
|
|
font-size: 1.4rem;
|
|
color: #fff;
|
|
width: calc(100% - 23rem); /* 1 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
li .details[data-visible] {
|
|
visibility: visible;
|
|
}
|
|
li .after {
|
|
color: #95a3a6;
|
|
}
|
|
|
|
span.line-break {
|
|
display:block;
|
|
}
|
|
|
|
/* All of the main views fill the screen */
|
|
#thumbnail-views, #player-view {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-size: 2.1rem;
|
|
}
|
|
|
|
/*
|
|
* The thumbnail list appears in regular browsing mode, in selection mode,
|
|
* and in pick mode.
|
|
*/
|
|
|
|
#thumbnails {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
/* top and bottom are set depending on view below */
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
/*
|
|
* the body background is black, but remind the UA of that here to
|
|
* keep the thumbnail view opaque if possible.
|
|
*/
|
|
background-color: #0E1214;
|
|
height: 100%;
|
|
}
|
|
|
|
/* thumbnails in thumbnail select view where there is a top bar */
|
|
#thumbnails.select,
|
|
#thumbnails.pick {
|
|
top: 5rem;
|
|
bottom: 0;
|
|
}
|
|
|
|
.thumbnail {
|
|
border-top: 0.1rem solid;
|
|
border-color:rgba(255,255,255, 0.1);
|
|
margin: 0;
|
|
height: 12rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.thumbnail.selected > .inner {
|
|
outline: solid #00aacc 0.3rem;
|
|
outline-offset: -0.2rem;
|
|
}
|
|
|
|
/*
|
|
* give the very last thumbnail a large bottom margin so that it doesn't
|
|
* get stuck hidden behind the overlaid toolbar.
|
|
* for normal thumbnails-list case, it is 4rem at bottom.
|
|
*/
|
|
#thumbnails>li:last-child{
|
|
margin-bottom: 4rem;
|
|
}
|
|
/*
|
|
* for normal thumbnails-select case, it is 5rem at top and 4rem at bottom.
|
|
*/
|
|
#thumbnails.select>li:last-child{
|
|
margin-bottom: 9rem;
|
|
}
|
|
|
|
.thumbnail-group-header {
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
color: #8a9699;
|
|
padding: 0;
|
|
-moz-padding-start: 1rem;
|
|
height: 4rem;
|
|
line-height: 4rem;
|
|
}
|
|
|
|
#thumbnails>li:first-child .thumbnail-group-header {
|
|
border-top: 0.1rem solid;
|
|
border-color:rgba(255,255,255, 0.1);
|
|
}
|
|
|
|
#video-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#video-container:active {
|
|
background: none;
|
|
}
|
|
|
|
#player {
|
|
/* size and position are set in JS depending on*/
|
|
/* video size and screen orientation */
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
/*
|
|
* The overlay is where we display messages like Scanning, No Videos,
|
|
* No SD card and SD Card in Use along with instructions for resolving
|
|
* the issue. The user can't interact with the app while the overlay
|
|
* is displayed.
|
|
*/
|
|
#overlay,
|
|
#in-use-overlay,
|
|
#confirm-dialog {
|
|
/* it takes up the whole screen */
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#overlay,
|
|
#in-use-overlay {
|
|
/* almost transparent gray */
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
#confirm-dialog {
|
|
background-color: #2d2d2d;
|
|
}
|
|
|
|
/*
|
|
* In view.html (but not index.html) we put the in-use-overlay element
|
|
* inside video-controls. In that case there is a 5rem title bar that needs
|
|
* to be visible, so we alter the top position. And if we're handling
|
|
* a pick activity, we also need the title bar with the back button to show.
|
|
*/
|
|
.video-controls > #in-use-overlay,
|
|
body.pick-activity > #in-use-overlay {
|
|
top: 5rem;
|
|
}
|
|
|
|
|
|
/*
|
|
* The overlay content area holds the text of the overlay.
|
|
* It has borders and a less transparent background so that
|
|
* the overlay text shows up more clearly
|
|
*/
|
|
#overlay-content, #in-use-overlay-content {
|
|
background-color: #2d2d2d;
|
|
background-size: auto auto, 100% 100%;
|
|
/* We can't use shortand with background size because is not implemented yet:
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
font-size: 0;
|
|
/* Using font-size: 0; we avoid the unwanted visual space (about 3px)
|
|
created by white-spaces and break lines in the code betewen inline-block elements */
|
|
color: #fff;
|
|
padding: 11rem 2.5rem 0 2.5rem;
|
|
}
|
|
|
|
#overlay-title, #in-use-overlay-title {
|
|
font-weight: normal;
|
|
font-size: 1.9rem;
|
|
color: #fff;
|
|
margin: 0 0.5rem 0 0.5rem;
|
|
padding: 0;
|
|
}
|
|
|
|
#overlay-text, #in-use-overlay-text {
|
|
padding: 1rem 0.5rem 0 0.5rem;
|
|
border-top: 0.1rem solid #686868;
|
|
font-weight: 300;
|
|
font-size: 2.5rem;
|
|
color: #ebebeb;
|
|
}
|
|
|
|
#overlay-menu {
|
|
z-index: 100;
|
|
}
|
|
|
|
/* For overriding the style from BB */
|
|
#overlay-menu.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* localization */
|
|
body.hidden *[data-l10n-id] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#close {
|
|
outline: none;
|
|
}
|
|
|
|
#h1 {
|
|
background: none !important;
|
|
}
|
|
|
|
section[role="region"] > header {
|
|
/* Need to use !important,else color is not reflecting */
|
|
background: rgba(0, 0, 0, 0.85) !important;
|
|
}
|
|
|
|
section[role="region"] header:first-child h1 {
|
|
font-size: 2.5rem;
|
|
line-height: 5rem;
|
|
margin: 0 0 0 3.4rem;
|
|
}
|
|
|
|
/* the indeterminate progress bar displayed while scanning */
|
|
#throbber {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0.3rem;
|
|
overflow: hidden;
|
|
background-size: 1rem;
|
|
background-image: repeating-linear-gradient(135deg,
|
|
#000 0%, #000 42%,
|
|
#32D1F2 42%, #32D1F2 57%,
|
|
#000 57%, #000 100%);
|
|
z-index: 100;
|
|
}
|
|
|
|
#throbber.throb {
|
|
animation: throb 1s steps(10) infinite;
|
|
}
|
|
|
|
@keyframes throb {
|
|
from { background-position: 0 0; }
|
|
to { background-position: -1rem 0; }
|
|
}
|
|
|
|
/* buttons */
|
|
a.button {
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-width: 0;
|
|
|
|
/* for buttons that display text */
|
|
font-size: 1.4rem;
|
|
text-align: center;
|
|
line-height: 4rem;
|
|
}
|
|
|
|
a.button:active, a.button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
a.button.disabled {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
footer {
|
|
background: rgba(0, 0, 0, 0.75);
|
|
height: 4rem;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#thumbnails-video-button {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
#thumbnails-select-button {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 100%;
|
|
left: 50%;
|
|
}
|
|
|
|
#thumbnails-delete-button {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 100%;
|
|
left: 0;
|
|
border-right: 0.1rem solid #000;
|
|
}
|
|
|
|
#thumbnails-share-button {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 100%;
|
|
left: 50%;
|
|
}
|
|
|
|
header .icon:after {
|
|
background: none !important;
|
|
}
|
|
|
|
/* video player controls */
|
|
.video-controls {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 10;
|
|
opacity: 1;
|
|
will-change: opacity, visibility;
|
|
transition: visibility 0s, opacity var(--transition-duration);
|
|
}
|
|
.video-controls-hidden .video-controls {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition-delay: 0.5s, 0s;
|
|
}
|
|
|
|
.video-controls.bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
/* main control bar: play|pause, timeupdate, rwd|fwd
|
|
For landscape mode here. Settings for portrait mode is written in
|
|
media query at bottom */
|
|
#videoBar {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 4.4rem;
|
|
left: 0;
|
|
height: 4rem;
|
|
font-size: 0;
|
|
border-bottom: 0.1rem solid rgba(255,255,255, 0.1);
|
|
background-color: rgba(0,0,0, 0.85);
|
|
white-space: nowrap;
|
|
z-index: 10;
|
|
}
|
|
|
|
#videoBar:last-child {
|
|
bottom: 0;
|
|
}
|
|
|
|
#elapsed-text,
|
|
#timeSlider,
|
|
#slider-wrapper,
|
|
#duration-text {
|
|
display: inline-block;
|
|
position: relative;
|
|
line-height: 4.2rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
#elapsed-text, #duration-text {
|
|
color: #ffffff;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
/* elapsed-text and duration-text have padding on left and right
|
|
to support ltr and rtl locales */
|
|
#elapsed-text {
|
|
width: 3.8rem;
|
|
padding: 0 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#duration-text {
|
|
width: 3.8rem;
|
|
padding: 0 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* time slider */
|
|
#timeSlider {
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
#slider-wrapper {
|
|
/* Take into account width and padding of elapsed and duration text */
|
|
width: calc(100% - 13.6rem);
|
|
height: 4.2rem;
|
|
}
|
|
|
|
#slider-wrapper div {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress {
|
|
height: 0.3rem;
|
|
width: 0;
|
|
top: 50%;
|
|
margin-top: -0.1rem;
|
|
}
|
|
|
|
#elapsedTime {
|
|
background-color: #00caf2;
|
|
z-index: 30;
|
|
margin-top: -0.2rem;
|
|
}
|
|
|
|
#bufferedTime {
|
|
background-color: blue;
|
|
z-index: 20;
|
|
}
|
|
|
|
#timeBackground {
|
|
width: 100%;
|
|
height: 0.1rem;
|
|
background-color: #a6b4b6;
|
|
z-index: 10;
|
|
}
|
|
|
|
#videoControlBar {
|
|
height: 4.5rem;
|
|
}
|
|
|
|
#videoToolBar {
|
|
position: relative;
|
|
height: 4.8rem;
|
|
font-size: 0;
|
|
vertical-align: top;
|
|
border-top: 0.1rem solid rgba(255,255,255, 0.1);
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
direction: ltr
|
|
}
|
|
|
|
#seek-backward,
|
|
#seek-forward,
|
|
#play {
|
|
position: relative;
|
|
height: 100%;
|
|
padding: 0;
|
|
font-weight: 500;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: 3rem;
|
|
}
|
|
|
|
#seek-backward,
|
|
#seek-forward {
|
|
width: 33%;
|
|
}
|
|
|
|
#play {
|
|
width: 34%;
|
|
}
|
|
|
|
#play.paused:before {
|
|
content: 'play';
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.player-controls-button {
|
|
color: #FFFFFF;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.player-controls-button:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.player-controls-button:active {
|
|
background: #00caf2;
|
|
}
|
|
|
|
.player-controls-button:disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.player-controls-button:disabled:active {
|
|
background: transparent;
|
|
}
|
|
|
|
#playHead {
|
|
position: absolute;
|
|
top: calc(50% - 1.15rem);
|
|
width: 2.3rem;
|
|
height: 2.3rem;
|
|
|
|
/* For LTR langauges, position the playhead 1.15 rems to the left
|
|
* so that the center of the playhead aligns with the beginning of
|
|
* the time slider.
|
|
*/
|
|
margin-left: -1.15rem;
|
|
|
|
/* For RTL langauges, position the playhead 1.15 rems to the right
|
|
* so that the center of the playhead aligns with the end of
|
|
* the time slider.
|
|
*/
|
|
margin-right: -1.15rem;
|
|
|
|
border: none;
|
|
background: none;
|
|
pointer-events: none;
|
|
z-index: 40;
|
|
}
|
|
|
|
#playHead:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(50% - 1.15rem);
|
|
left: calc(50% - 1.15rem);
|
|
width: 2.3rem;
|
|
height: 2.3rem;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
#playHead.active:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(50% - 3.05rem);
|
|
left: calc(50% - 3.05rem);
|
|
width: 6.1rem;
|
|
height: 6.1rem;
|
|
border-radius: 50%;
|
|
background-color: #00CAF2;
|
|
}
|
|
|
|
/* layout changes for pick activity */
|
|
body:not(.pick-activity) #picker-title,
|
|
body:not(.pick-activity) #picker-done,
|
|
body:not(.pick-activity) #picker-close {
|
|
display: 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) #picker-done,
|
|
body:not(.pick-activity) #picker-header {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
/* hide options when picking */
|
|
body.pick-activity #options,
|
|
body.pick-activity #thumbnails-bottom {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
#two-column-spearator {
|
|
display: none;
|
|
}
|
|
|
|
/* details of a thumbnail */
|
|
.thumbnail .details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.thumbnail .details .title {
|
|
order: 1;
|
|
align-self: auto;
|
|
word-break: break-all;
|
|
direction: ltr /* the title is from the file name : always ltr */
|
|
}
|
|
|
|
.thumbnail .details .duration-text {
|
|
order: 2;
|
|
align-self: auto;
|
|
}
|
|
|
|
.thumbnail .details .size-type-group {
|
|
order: 3;
|
|
align-self: auto;
|
|
}
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
#thumbnail-list-title {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
/* we don't have fullscreen button when we are not in large layout */
|
|
#fullscreen-button {
|
|
display: none;
|
|
}
|
|
|
|
.large-only {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
/* not selection mode */
|
|
body:not(.layout-selection) .thumbnails-select,
|
|
/* not list mode */
|
|
body:not(.layout-list) .thumbnails-list,
|
|
/* not fullscreen-player mode */
|
|
body:not(.layout-fullscreen-player) #player-view {
|
|
display: none !important; /* 1 */
|
|
}
|
|
|
|
.layout-fullscreen-player #thumbnails {
|
|
display: none;
|
|
}
|
|
|
|
/* overlay mode */
|
|
.overlay #app-container, .info-view #app-container,
|
|
.options-view #app-container, .in-use-overlay #app-container,
|
|
.confirm-dialog #app-container {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* spinner is only valid for tablet and landscape mode */
|
|
body:not(.view-activity) #spinner-overlay {
|
|
display: none;
|
|
}
|
|
|
|
/* make videocontrolbar visible when picking */
|
|
body.pick-activity .video-controls #videoBar {
|
|
bottom: 4.4rem;
|
|
}
|
|
|
|
/*
|
|
* increase specificity to overwrite confirm.css rules for dialog buttons
|
|
*/
|
|
form[role="dialog"][data-type="confirm"] button.hidden {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (orientation: portrait) {
|
|
li.details {
|
|
width: 8rem;
|
|
}
|
|
}
|
|
|
|
:focus { outline:none; }
|
|
::-moz-focus-inner {
|
|
outline: none;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* By default do not allow any user text selection, only enable
|
|
* on a per-element/region area.
|
|
*/
|
|
* {
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
html[dir=rtl] #video-title {
|
|
direction: ltr;
|
|
}
|