Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
Binary file not shown.
|
After Width: | Height: | Size: 218 B |
Binary file not shown.
|
After Width: | Height: | Size: 378 B |
Binary file not shown.
|
After Width: | Height: | Size: 485 B |
Binary file not shown.
|
After Width: | Height: | Size: 321 B |
Binary file not shown.
|
After Width: | Height: | Size: 562 B |
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
|
|
@ -0,0 +1,314 @@
|
|||
/* ----------------------------------
|
||||
* gaia_menu
|
||||
* ---------------------------------- */
|
||||
|
||||
/* default alignment follows the UI direction, not the content direction */
|
||||
:-moz-dir(ltr) [dir] { text-align: left; }
|
||||
:-moz-dir(rtl) [dir] { text-align: right; }
|
||||
|
||||
/* Main dialog setup */
|
||||
gaia-menu {
|
||||
background-color: #2d2d2d;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 0 7rem;
|
||||
/**
|
||||
* Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
|
||||
* by white spaces and line breaks in the code between inline-block elements.
|
||||
*/
|
||||
font-size: 0;
|
||||
color: #fff;
|
||||
display: block;
|
||||
transition: transform ease-in-out var(--transition-duration),
|
||||
visibility var(--transition-duration);
|
||||
}
|
||||
|
||||
gaia-menu[hidden] {
|
||||
transform: translateY(100%);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
gaia-menu:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
margin-inline-start: -0.1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
-moz-box-sizing: border-box;
|
||||
font-size: 1.6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
height: 5rem;
|
||||
line-height: 4.9rem;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-weight: normal;
|
||||
padding: 0 3rem;
|
||||
border-bottom: 0.1rem solid #616262;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
line-height: 4.9rem;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Generic set of actions in toolbar */
|
||||
header menu.toolbar {
|
||||
height: 100%;
|
||||
margin: 0 -3rem;
|
||||
margin-inline-start: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
header:-moz-dir(ltr) menu.toolbar { float: right; }
|
||||
header:-moz-dir(rtl) menu.toolbar { float: left; }
|
||||
|
||||
header menu.toolbar a,
|
||||
header menu.toolbar button {
|
||||
-moz-box-sizing: border-box;
|
||||
position: relative;
|
||||
width: auto;
|
||||
min-width: 5rem;
|
||||
height: 4.9rem;
|
||||
margin-bottom: 0;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
line-height: 4.9rem;
|
||||
background: none;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
z-index: 5;
|
||||
}
|
||||
header:-moz-dir(ltr) menu.toolbar a,
|
||||
header:-moz-dir(ltr) menu.toolbar button {
|
||||
float: left;
|
||||
}
|
||||
header:-moz-dir(rtl) menu.toolbar a,
|
||||
header:-moz-dir(rtl) menu.toolbar button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
header a,
|
||||
header button {
|
||||
border: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.1em;
|
||||
color: #fff;
|
||||
border-radius: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Pressed state */
|
||||
header a:active .icon:after,
|
||||
header button:active .icon:after,
|
||||
header menu.toolbar a:active,
|
||||
header menu.toolbar button:active {
|
||||
background: #008aaa;
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
header menu.toolbar a[aria-disabled="true"],
|
||||
header menu.toolbar button[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Icon definitions */
|
||||
header .icon {
|
||||
position: relative;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 4rem;
|
||||
height: 4.9rem;
|
||||
margin: 0 -1rem;
|
||||
background: transparent no-repeat center center / 3rem auto;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header .icon.icon-close {
|
||||
background-image: image-set(url("images/icons/close.png") 1x, url("images/icons/close@1.5x.png") 1.5x, url("images/icons/close@2x.png") 2x, url("images/icons/close@2.25x.png") 2.25x);
|
||||
}
|
||||
|
||||
header .icon.icon-back {
|
||||
background-image: image-set(url("images/icons/back.png") 1x, url("images/icons/back@1.5x.png") 1.5x, url("images/icons/back@2x.png") 2x, url("images/icons/back@2.25x.png") 2.25x);
|
||||
}
|
||||
|
||||
/* Navigation links (back, cancel, etc) */
|
||||
header > button,
|
||||
header > a {
|
||||
width: 5rem;
|
||||
height: 4.9rem;
|
||||
background: none;
|
||||
overflow: visible;
|
||||
margin: 0 -1rem;
|
||||
margin-inline-start: -3rem;
|
||||
position: relative;
|
||||
}
|
||||
header:-moz-dir(ltr) > button,
|
||||
header:-moz-dir(ltr) > a {
|
||||
float: left;
|
||||
}
|
||||
header:-moz-dir(rtl) > button,
|
||||
header:-moz-dir(rtl) > a {
|
||||
float: right;
|
||||
}
|
||||
|
||||
header > button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header > button .icon,
|
||||
header > a .icon {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 4.9rem;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
header > button .icon:after,
|
||||
header > a .icon:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
offset-inline-start: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
width: 3rem;
|
||||
height: 4.9rem;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
section {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 7rem;
|
||||
left: 1.5rem;
|
||||
right: 1.5rem;
|
||||
bottom: 2rem;
|
||||
font-size: 1.6rem;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
/* Specific component code */
|
||||
menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: calc(100% - 13.5rem); /*header(5rem) + footer(7rem) + padding(1.5rem)*/
|
||||
height: auto;
|
||||
padding-top: 1.5rem;
|
||||
overflow: auto;
|
||||
width: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 7rem;
|
||||
}
|
||||
|
||||
button {
|
||||
width: calc(100% - 3rem);
|
||||
height: 4rem;
|
||||
-moz-box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-weight: normal;
|
||||
line-height: 4rem;
|
||||
outline: none;
|
||||
font-size: 1.6rem;
|
||||
text-shadow: none;
|
||||
padding: 0 1.2rem;
|
||||
margin: 0 1.5rem 1rem;
|
||||
background: rgba(87, 87, 87, 0.8);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
button:-moz-dir(ltr) { text-align: left; }
|
||||
button:-moz-dir(rtl) { text-align: right; }
|
||||
|
||||
span.gaia-menu-cancel {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background: #4d4d4d;
|
||||
height: 7rem;
|
||||
offset-inline-start: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
span.gaia-menu-cancel button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
offset-inline-start: 0;
|
||||
color: #333;
|
||||
background: #d8d8d8;
|
||||
text-align: center;
|
||||
border: none;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
button:nth-last-child(2) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Press state */
|
||||
button:active,
|
||||
span.gaia-menu-cancel button:active {
|
||||
background: #00aacc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
button[disabled] {
|
||||
background-color: rgba(87, 87, 87, 0.8);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button[disabled]:last-child {
|
||||
background-color: #e7e7e7;
|
||||
color: #a6a6a6;
|
||||
opacity: 1;
|
||||
}
|
||||
BIN
overrides/video.gaiamobile.org/style/images/spinner@1.5x.png
Normal file
BIN
overrides/video.gaiamobile.org/style/images/spinner@1.5x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
overrides/video.gaiamobile.org/style/images/spinner@2.25x.png
Normal file
BIN
overrides/video.gaiamobile.org/style/images/spinner@2.25x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
overrides/video.gaiamobile.org/style/images/spinner@2x.png
Normal file
BIN
overrides/video.gaiamobile.org/style/images/spinner@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
overrides/video.gaiamobile.org/style/images/unwatched@1.5x.png
Normal file
BIN
overrides/video.gaiamobile.org/style/images/unwatched@1.5x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 B |
BIN
overrides/video.gaiamobile.org/style/images/unwatched@2.25x.png
Normal file
BIN
overrides/video.gaiamobile.org/style/images/unwatched@2.25x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 B |
BIN
overrides/video.gaiamobile.org/style/images/unwatched@2x.png
Normal file
BIN
overrides/video.gaiamobile.org/style/images/unwatched@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 B |
38
overrides/video.gaiamobile.org/style/spinner.css
Normal file
38
overrides/video.gaiamobile.org/style/spinner.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/* Spinner */
|
||||
#spinner-overlay { /* just like the #overlay element */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* spinner animation styles copied from
|
||||
* shared/style/progress_activity.css
|
||||
*/
|
||||
#spinner {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.5rem);
|
||||
left: calc(50% - 1.5rem);
|
||||
width: 2.9rem;
|
||||
height: 2.9rem;
|
||||
background: image-set(url("images/spinner.png") 1x, url("images/spinner@1.5x.png") 1.5x, url("images/spinner@2x.png") 2x, url("images/spinner@2.25x.png") 2.25x) no-repeat center center / 100%;
|
||||
animation: 0.9s spinner-animation infinite steps(30);
|
||||
border: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#spinner-overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spinner-animation {
|
||||
from {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
757
overrides/video.gaiamobile.org/style/video.css
Normal file
757
overrides/video.gaiamobile.org/style/video.css
Normal file
|
|
@ -0,0 +1,757 @@
|
|||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue