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
194
assets/webapps/gallery.gaiamobile.org/style/VideoPlayer.css
Normal file
194
assets/webapps/gallery.gaiamobile.org/style/VideoPlayer.css
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
.videoPlayer:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* video player controls */
|
||||
.videoPlayerPlayButton:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 9.2rem;
|
||||
height: 9.2rem;
|
||||
margin: -4.6rem 0 0 -4.6rem;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0,0,0, .65);
|
||||
}
|
||||
|
||||
.videoPlayerPlayButton {
|
||||
position: absolute;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
left: calc(50% - 5rem);
|
||||
top: calc(50% - 5rem);
|
||||
border-radius: 50%;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.videoPlayerPlayButton:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
background-image: url("images/video_play_button.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: 10rem;
|
||||
}
|
||||
|
||||
.videoPlayerPlayButton:active:before {
|
||||
background-color: rgba(13,108,128, .8);
|
||||
}
|
||||
|
||||
.videoPlayerPlayButton.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.videoPlayerFooter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition: opacity var(--transition-duration), visibility 0s;
|
||||
visibility: visible;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.videoPlayerFooter.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
transition-delay: 0s, 0.5s;
|
||||
}
|
||||
|
||||
.videoPlayerPauseButton {
|
||||
position: absolute;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: url("images/video_pause_button.png") no-repeat center center / 3rem,
|
||||
rgba(0,0,0,.5);
|
||||
border-radius: 5.3rem;
|
||||
border: solid #ccc 0.3rem;
|
||||
top: -2.5rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.videoPlayerPauseButton:active {
|
||||
background: url("images/video_pause_button.png") no-repeat center center / 3rem,
|
||||
url("images/video_play_focus.png") no-repeat center center / 10.6rem;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* time slider */
|
||||
.videoPlayerSlider {
|
||||
position: absolute;
|
||||
left: 11rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.videoPlayerSlider > span {
|
||||
display: block;
|
||||
width: 4.5rem;
|
||||
position: absolute;
|
||||
color: white;
|
||||
height: 100%;
|
||||
line-height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.videoPlayerElapsedText {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .videoPlayerElapsedText {
|
||||
right: 1rem;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
.videoPlayerDurationText {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .videoPlayerDurationText {
|
||||
left: 1rem;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.videoPlayerProgress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 7rem;
|
||||
right: 7rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.videoPlayerProgress > div {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.videoPlayerElapsedBar, .videoPlayerBackgroundBar {
|
||||
height: 0.4rem;
|
||||
width: 0;
|
||||
top: 50%;
|
||||
margin-top: -0.2rem;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
|
||||
.videoPlayerElapsedBar {
|
||||
background-color: #0ac;
|
||||
}
|
||||
|
||||
.videoPlayerBackgroundBar {
|
||||
background-color: #333;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.videoPlayerPlayHead {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
width: 2.5rem;
|
||||
border-radius: 2.5rem;
|
||||
background-color: white;
|
||||
top: 50%;
|
||||
margin-top: -1rem;
|
||||
-moz-margin-start: -1.2rem;
|
||||
}
|
||||
|
||||
|
||||
.videoPlayerFullscreenButton {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: none;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
padding: 3.4rem;
|
||||
margin: 0;
|
||||
background: url("images/fullscreen.png") no-repeat center center / 4.6rem,
|
||||
transparent;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.videoPlayerFullscreenButton:active {
|
||||
background: url("images/fullscreen_pressed.png") no-repeat center center / 4.6rem,
|
||||
transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
|
||||
.videoPlayerSlider > span {
|
||||
font-size: 1.8rem;
|
||||
line-height: 8rem;
|
||||
}
|
||||
|
||||
.videoPlayerFooter {
|
||||
background-color: transparent;
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.videoPlayerSlider {
|
||||
left: 10rem;
|
||||
}
|
||||
|
||||
.videoPlayerSlider .videoPlayerProgress {
|
||||
left: 7rem;
|
||||
right: 19rem;
|
||||
}
|
||||
|
||||
.videoPlayerPauseButton {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 8rem;
|
||||
width: 10rem;
|
||||
background: url("images/video_pause_button_46x46.png") no-repeat center center / 4.6rem,
|
||||
transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.videoPlayerPauseButton:active {
|
||||
background: url("images/video_pause_pressed_46x46.png") no-repeat center center / 4.6rem,
|
||||
transparent;
|
||||
}
|
||||
|
||||
.videoPlayerSlider .videoPlayerDurationText {
|
||||
font-size: 1.8rem;
|
||||
right: 8rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.videoPlayerFullscreenButton {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.videoPlayerSlider .videoPlayerElapsedText {
|
||||
text-align: left;
|
||||
left: 0;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
body.fullscreenView .videoPlayerPauseButton {
|
||||
width: 19rem;
|
||||
}
|
||||
|
||||
body.fullscreenView .videoPlayerSlider {
|
||||
left: 20rem;
|
||||
}
|
||||
|
||||
body.fullscreenView.videoPlayerSlider .videoPlayerProgress {
|
||||
left: 26rem;
|
||||
right: 12rem;
|
||||
}
|
||||
|
||||
body.fullscreenView .videoPlayerSlider .videoPlayerDurationText {
|
||||
text-align: left;
|
||||
right: 0;
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.videoPlayerElapsedText {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.videoPlayerPauseButton {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.videoPlayerSlider {
|
||||
left: 14rem;
|
||||
}
|
||||
|
||||
.videoPlayerSlider .videoPlayerProgress {
|
||||
right: 10rem;
|
||||
}
|
||||
|
||||
.videoPlayerSlider .videoPlayerDurationText {
|
||||
text-align: left;
|
||||
right: 0;
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
||||
922
assets/webapps/gallery.gaiamobile.org/style/gallery.css
Normal file
922
assets/webapps/gallery.gaiamobile.org/style/gallery.css
Normal file
|
|
@ -0,0 +1,922 @@
|
|||
* { -moz-box-sizing: border-box;
|
||||
/**
|
||||
By default do not allow any user text selection, only enable
|
||||
for certain parts on a per-element/region area
|
||||
*/
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
background-color: #0E1214;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.large-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hide sections from screen reader when modal dialogs are showing */
|
||||
body.showing-dialog > section {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* All of the main views fill the screen */
|
||||
#fullscreen-view, #edit-view, #crop-view, #thumbnail-views {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 2.1rem;
|
||||
/* display will be determined by LAYOUT_MODE */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide unresolved gaia-header elements */
|
||||
gaia-header:unresolved {
|
||||
visibility:hidden;
|
||||
}
|
||||
|
||||
#thumbnail-views > gaia-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Bug 1111735 - !important is needed because of the shadow CSS polyfill */
|
||||
.thumbnails-list, .thumbnails-select, .thumbnails-pick {
|
||||
/* display will be determined by LAYOUT_MODE */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.thumbnailListView .thumbnails-list,
|
||||
body.thumbnailSelectView .thumbnails-select,
|
||||
body.pickView .thumbnails-pick {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
body.thumbnailListView #thumbnail-views,
|
||||
body.thumbnailSelectView #thumbnail-views,
|
||||
body.pickView #thumbnail-views,
|
||||
body.fullscreenView #fullscreen-view,
|
||||
body.editView #edit-view,
|
||||
body.cropView #crop-view {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Header in default thumbnail list in tablets only, see gallery_tablet.css */
|
||||
body.thumbnailListView #thumbnails-list-top {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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 {
|
||||
background:
|
||||
url(images/ui/pattern.png) repeat left top,
|
||||
url(images/ui/gradient.png) no-repeat left top;
|
||||
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: 1;
|
||||
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 {
|
||||
font-weight: normal;
|
||||
font-size: 1.9rem;
|
||||
color: #fff;
|
||||
margin: 0 0.5rem 0 0.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#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: 1;
|
||||
}
|
||||
|
||||
/* For overriding the style from BB */
|
||||
#overlay-menu.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#overlay-menu button.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#overlay-menu button.full {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Thumbnails are implemented as <li> elements in a <ul> with background-image
|
||||
* set to display the image. We use background-size: cover to automatically
|
||||
* resize the image as needed.
|
||||
*/
|
||||
|
||||
#thumbnails {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 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;
|
||||
will-change: scroll-position;
|
||||
/*
|
||||
* set it visible/hidden by LAYOUT_MODE
|
||||
*/
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* The thumbnail list appears in regular browsing mode, in selection mode,
|
||||
* and in pick mode.
|
||||
*/
|
||||
body.thumbnailSelectView #thumbnails,
|
||||
body.pickView #thumbnails,
|
||||
body.thumbnailListView #thumbnails {
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
body.thumbnailSelectView #thumbnails,
|
||||
body.pickView #thumbnails {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Give the very last thumbnail a large bottom margin so that it doesn't
|
||||
* hide behind the overlaid toolbar in thumbnail list and select view.
|
||||
*/
|
||||
body.thumbnailSelectView #thumbnails > li:last-child .thumbnail:last-child,
|
||||
body.thumbnailListView #thumbnails > li:last-child .thumbnail:last-child {
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.thumbnail-group-header {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
color: #8a9699;
|
||||
-moz-padding-start: 0.5rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
width:100%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
/* Bug 968311 - Keep Gallery in scrollable
|
||||
* background color. Need in all four
|
||||
* containers below.
|
||||
*/
|
||||
#thumbnails > li,
|
||||
#thumbnails > li > ul,
|
||||
.thumbnail-group-header,
|
||||
.thumbnail-group-container {
|
||||
background-color: #0E1214;
|
||||
}
|
||||
|
||||
.thumbnail-group-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#thumbnails>li {
|
||||
/* no list item bullets */
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#thumbnails>li:first-child .thumbnail-group-header {
|
||||
border-top: 0.1rem solid;
|
||||
border-color:rgba(255,255,255, 0.1);
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
-moz-margin-end: 0.1rem;
|
||||
margin-bottom: 0.1rem;
|
||||
padding: 0;
|
||||
/* default to left-to-right, but overridden for rtl languages below */
|
||||
float: left;
|
||||
/* don't let the user select the items */
|
||||
-moz-user-select: none;
|
||||
background-color: #444;
|
||||
|
||||
/*
|
||||
* Here's the thumbnail size for portrait mode. We have 3 thumbnails
|
||||
* for each row. The size for landscape mode is handled below by
|
||||
* media query.
|
||||
* Padding-bottom is used here in order to set div height with respect
|
||||
* to device width.
|
||||
*/
|
||||
width: calc((100% - 0.2rem) / 3 );
|
||||
height: 0;
|
||||
padding-bottom: calc((100% - 0.2rem) / 3 );
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.thumbnail:nth-child(3n) {
|
||||
-moz-margin-end: 0;
|
||||
}
|
||||
|
||||
.thumbnailImage{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thumbnailImage.selected {
|
||||
outline: solid #00aacc 0.3rem;
|
||||
outline-offset: -0.2rem;
|
||||
}
|
||||
|
||||
/* RTL modifications */
|
||||
html[dir=rtl] #thumbnails-number-selected {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
/* 4 thumbnails for each row in landscape mode. */
|
||||
.thumbnail {
|
||||
width: calc((100% - 0.3rem) / 4);
|
||||
padding-bottom: calc((100% - 0.3rem) / 4);
|
||||
}
|
||||
.thumbnail:nth-child(3n) {
|
||||
-moz-margin-end: 0.1rem;
|
||||
}
|
||||
.thumbnail:nth-child(4n) {
|
||||
-moz-margin-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#fullscreen-back-button-tiny {
|
||||
/*
|
||||
these particular sizes, positions, and colors are chosen
|
||||
to line up with the focus mode button of the camera app
|
||||
*/
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 1.4rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
font-size: 0;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(95, 95, 95, 0.3);
|
||||
color: inherit;
|
||||
transition: opacity 0.2s linear;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Make sure icon is aligned inside circle
|
||||
*/
|
||||
|
||||
#fullscreen-back-button-tiny:before {
|
||||
margin-left: -0.3rem; /* 1 */
|
||||
}
|
||||
|
||||
#fullscreen-back-button-tiny:active {
|
||||
background-color: #008eab;
|
||||
}
|
||||
|
||||
#frames {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
.frame > .image-view {
|
||||
top: 0; /* javascript modifies this position with a transform */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
-moz-user-select: none;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
|
||||
.frame > video {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/* localization */
|
||||
body.hidden *[data-l10n-id] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
*[dir=rtl] .thumbnail {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* the indeterminate progress bar displayed while scanning */
|
||||
#throbber {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0.3rem;
|
||||
border: none;
|
||||
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: 10; /* has to be higher than pick-top */
|
||||
}
|
||||
|
||||
#throbber.throb {
|
||||
animation: throb 1s steps(10) infinite;
|
||||
}
|
||||
|
||||
@keyframes throb {
|
||||
from { background-position: 0 0; }
|
||||
to { background-position: -1rem 0; }
|
||||
}
|
||||
|
||||
#spinner {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.5rem);
|
||||
left: calc(50% - 1.5rem);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* override progress_activity.css */
|
||||
#spinner.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
a.button {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 3rem;
|
||||
|
||||
/* for buttons that display text */
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
|
||||
a.button:active, a.button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a.button.disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon.icon-done {
|
||||
background: url('images/iconaction_done_30x30.png') no-repeat center center / 3rem !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
height: 4.5rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
|
||||
}
|
||||
|
||||
.icon.icon-done {
|
||||
background-image: url('images/iconaction_done_30x30.png') !important;
|
||||
}
|
||||
|
||||
#thumbnails-camera-button {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
border-right: 0.1rem solid #000;
|
||||
}
|
||||
|
||||
#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%;
|
||||
}
|
||||
|
||||
#fullscreen-toolbar {
|
||||
height: 4.5rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 0;
|
||||
visibility: visible;
|
||||
direction: ltr; /* buttons in toolbar are not directional and stays LTR */
|
||||
|
||||
/**
|
||||
Bug 991367 - This is a temporary workaround for an issue where
|
||||
the `tap` event on the video player "Pause" button causes a
|
||||
`click` event to bleed through to the "Camera" button on the
|
||||
toolbar. To get around this issue, we add 0.1s delay before
|
||||
restoring the toolbar from hidden state and transition the
|
||||
`visibility` property as well.
|
||||
*/
|
||||
transition: visibility 0.2s linear 0.1s, transform 0.2s linear 0.1s;
|
||||
}
|
||||
|
||||
/* only for large screen */
|
||||
#fullscreen-toolbar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fullscreen-toolbar-header > menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fullscreen-toolbar > a {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#fullscreen-view.toolbar-hidden #fullscreen-toolbar {
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
transform: translate(0, 4.5rem);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#fullscreen-view.toolbar-hidden #fullscreen-back-button-tiny {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#pick-header {
|
||||
/*
|
||||
* we want the user to be able to push the close button even if
|
||||
* an overlay is displayed, so be sure that this titlebar/toolbar
|
||||
* is above the overlay
|
||||
*/
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* like .frame */
|
||||
#crop-frame {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#crop-image {
|
||||
top: 0; /* javascript modifies this position with a transform */
|
||||
left: 0;
|
||||
position: relative;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#edit-preview-area {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 5rem;
|
||||
bottom: 4.5rem; /* 4.5rem for edit-toolbar */
|
||||
}
|
||||
|
||||
#edit-preview-canvas {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: 2.5rem;
|
||||
width: calc(100% - 5rem); /* I can't do right: 2.5rem here. Bug? */
|
||||
height: calc(100% - 3rem); /* can't just set bottom: 1.5rem here */
|
||||
}
|
||||
|
||||
#edit-crop-canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#edit-options {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
bottom: 0;
|
||||
background: url(images/options-background.png);
|
||||
}
|
||||
|
||||
/* The progress has higer selectivity css in progress.css to control display.
|
||||
* The hidden attribute in progress is not working in this case. We need to use
|
||||
* css to override it. */
|
||||
#save-progress.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* All the effect options radio buttons share these styles */
|
||||
#edit-effect-options a.radio.button {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
border-right: solid black 0.1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#edit-effect-options a.selected.radio.button {
|
||||
outline: solid #00aacc 0.2rem;
|
||||
outline-offset: -0.2rem;
|
||||
}
|
||||
|
||||
#edit-crop-options a.button {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
border-right: solid black 0.1rem;
|
||||
overflow: hidden;
|
||||
font-size: 1.4rem;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#edit-crop-options a.selected.radio.button {
|
||||
outline: solid #00aacc 0.2rem;
|
||||
outline-offset: -0.2rem;
|
||||
}
|
||||
|
||||
#edit-crop-aspect-free {
|
||||
left: 0;
|
||||
background-image: url('images/iconaction_camera_freecrop_30x30.png');
|
||||
}
|
||||
#edit-crop-aspect-portrait {
|
||||
left: 20%;
|
||||
background-image: url('images/iconaction_camera_crop2x3_30x30.png');
|
||||
}
|
||||
#edit-crop-aspect-landscape {
|
||||
left: 40%;
|
||||
background-image: url('images/iconaction_camera_crop3x2_30x30.png');
|
||||
}
|
||||
#edit-crop-aspect-square {
|
||||
left: 60%;
|
||||
background-image: url('images/iconaction_camera_crop1x1_30x30.png');
|
||||
}
|
||||
|
||||
#edit-crop-aspect-more {
|
||||
left: 80%;
|
||||
}
|
||||
|
||||
/* instead of using images inside the buttons above, just draw boxes */
|
||||
#edit-free-frame {
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
width: 3rem;
|
||||
height: 2.5rem;
|
||||
border: dotted white 0.1rem;
|
||||
}
|
||||
|
||||
#edit-portrait-frame {
|
||||
margin-left: 1.1rem;
|
||||
margin-top: 0.6rem;
|
||||
width: 2.6rem;
|
||||
height: 3.9rem;
|
||||
border: solid white 0.1rem;
|
||||
}
|
||||
|
||||
#edit-landscape-frame {
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 1.2rem;
|
||||
width: 3.9rem;
|
||||
height: 2.6rem;
|
||||
border: solid white 0.1rem;
|
||||
}
|
||||
|
||||
#edit-square-frame {
|
||||
margin-left: 0.8rem;
|
||||
margin-top: 0.9rem;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border: solid white 0.1rem;
|
||||
}
|
||||
|
||||
/* All the effects radio buttons share these styles */
|
||||
#edit-effect-options > a.radio.button {
|
||||
width: 20%;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#edit-effect-none {
|
||||
left:0;
|
||||
}
|
||||
#edit-effect-bw {
|
||||
left:20%
|
||||
}
|
||||
#edit-effect-sepia {
|
||||
left:40%
|
||||
}
|
||||
#edit-effect-bluesteel {
|
||||
left:60%
|
||||
}
|
||||
#edit-effect-faded {
|
||||
left:80%
|
||||
}
|
||||
a.filter-bw {
|
||||
filter: url(../index.html#filter-bw);
|
||||
}
|
||||
a.filter-sepia {
|
||||
filter: url(../index.html#filter-sepia);
|
||||
}
|
||||
a.filter-bluesteel {
|
||||
filter: url(../index.html#filter-bluesteel);
|
||||
}
|
||||
a.filter-faded {
|
||||
filter: url(../index.html#filter-faded);
|
||||
}
|
||||
|
||||
#edit-toolbar {
|
||||
height: 4.5rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 0;
|
||||
transition: transform 0.2s linear;
|
||||
direction: ltr; /* buttons in toolbar are not directional and stays LTR */
|
||||
}
|
||||
|
||||
/* all buttons in the toolbar share these styles */
|
||||
#edit-toolbar > a {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#edit-toolbar > a.selected {
|
||||
color: #00CAF2;
|
||||
}
|
||||
|
||||
#edit-exposure-button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#edit-crop-button {
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#edit-effect-button {
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#edit-border-button {
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
#edit-enhance-button {
|
||||
left: 80%;
|
||||
}
|
||||
|
||||
/* Override the styles from shared/styles/status.css */
|
||||
#edit-copy-save-banner.banner, #edit-enhance-banner.banner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 4.5rem;
|
||||
background-color: #0E1214;
|
||||
}
|
||||
|
||||
#edit-copy-save-banner > p, #edit-enhance-banner > p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#edit-effect-button {
|
||||
background-image: url('images/actionicon_gallery_edit_effects_30x30.png');
|
||||
}
|
||||
|
||||
#edit-border-button {
|
||||
background-image: url('images/actionicon_gallery_edit_borders_30x30.png');
|
||||
}
|
||||
|
||||
#edit-enhance-button {
|
||||
background-image: url('images/actionicon_gallery_edit_enhance_30x30.png');
|
||||
}
|
||||
|
||||
#edit-enhance-button.on {
|
||||
background-image: url('images/actionicon_gallery_edit_enhance_on_30x30.png');
|
||||
}
|
||||
|
||||
/*
|
||||
* All of these slider styles are for the exposure compensation slider
|
||||
* If this app ever needs another slider, we'll have lots of name
|
||||
* collisions. Ideally, this slider stuff should all be packaged up
|
||||
* into a reusable component. But this is one-off for now
|
||||
*/
|
||||
#exposure-slider {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
#sliderbar {
|
||||
position: relative;
|
||||
height: 2.6rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: url(images/slider-background.png);
|
||||
}
|
||||
|
||||
#sliderline {
|
||||
position: absolute;
|
||||
height: 0.5rem;
|
||||
top: 1rem;
|
||||
left: 3.5rem;
|
||||
right: 3.5rem;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
background: url(images/slider-line.png) repeat-x;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#sliderthumb {
|
||||
position: absolute;
|
||||
width: 3.6rem;
|
||||
height: 2.6rem;
|
||||
-moz-margin-start: calc(3.9rem - 1.8rem);
|
||||
background: url(images/slider-scrubber.png) no-repeat center center / 100%;
|
||||
font: 0/0 a;
|
||||
}
|
||||
|
||||
#sliderthumb.active {
|
||||
background-image: url(images/slider-scrubber-active.png);
|
||||
}
|
||||
|
||||
#sliderlabels {
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sliderlabel {
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
height: 0.8rem;
|
||||
background: url(images/slider-marker.png) no-repeat top left;
|
||||
color: #8a9699;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .sliderlabel {
|
||||
background: url(images/slider-marker.png) no-repeat top right;
|
||||
}
|
||||
|
||||
.sliderlabel:after {
|
||||
content: attr(data-label);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 0.9rem;
|
||||
width: 1rem;
|
||||
margin: 0 calc(-50% + 0.1rem);
|
||||
|
||||
/* Slider labels are numbers */
|
||||
direction: ltr;
|
||||
unicode-bidi: -moz-isolate;
|
||||
}
|
||||
|
||||
#slider-3 {
|
||||
-moz-margin-start: 3.9rem;
|
||||
}
|
||||
#slider-2 {
|
||||
-moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) / 6);
|
||||
}
|
||||
#slider-1 {
|
||||
-moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 2 / 6);
|
||||
}
|
||||
#slider0 {
|
||||
-moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 3 / 6);
|
||||
color: #fff;
|
||||
}
|
||||
#slider1 {
|
||||
-moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 4 / 6);
|
||||
}
|
||||
#slider2 {
|
||||
-moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 5 / 6);
|
||||
}
|
||||
#slider3 {
|
||||
-moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem));
|
||||
}
|
||||
709
assets/webapps/gallery.gaiamobile.org/style/gallery_tablet.css
Normal file
709
assets/webapps/gallery.gaiamobile.org/style/gallery_tablet.css
Normal file
|
|
@ -0,0 +1,709 @@
|
|||
/* separator between thumbnail list and preview picture */
|
||||
body.thumbnailListView #fullscreen-toolbar-header:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
height: 5rem;
|
||||
width: 0.2rem;
|
||||
background: url("images/ui/tablet_section_divider.png") no-repeat left;
|
||||
}
|
||||
|
||||
/* prevent user click on the preview in select mode */
|
||||
body.thumbnailSelectView #fullscreen-view {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tiny-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: rgba(28, 33, 36, 0.9);
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
/* Frames */
|
||||
#frames {
|
||||
top: 5rem;
|
||||
height: calc(100% - 5rem);
|
||||
background-color: #1c2124;
|
||||
}
|
||||
|
||||
.frame {
|
||||
top: 0.2rem;
|
||||
left: 0.2rem;
|
||||
height: calc(100% - 0.4rem);
|
||||
width: calc(100% - 0.4rem);
|
||||
}
|
||||
|
||||
body.fullscreenView #frames {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.fullscreenView #frames .frame {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.fullscreenView #fullscreen-view.toolbar-hidden #fullscreen-toolbar-header {
|
||||
transform: translateY(-5rem);
|
||||
}
|
||||
|
||||
/* player_mask for player footer */
|
||||
body.thumbnailListView #fullscreen-view.toolbar-hidden:after {
|
||||
content: '';
|
||||
background: url("images/player_mask.png") repeat-x center center / 0.1rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
body.thumbnailListView #frames:before {
|
||||
content: '';
|
||||
background: url("images/ui/pane_divider.png") no-repeat center center / 0.2rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0.2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.fullscreenView .videoPlayerFooter {
|
||||
background: url("images/player_mask.png") repeat-x center center / 0.1rem;
|
||||
}
|
||||
|
||||
/* Thumbnails */
|
||||
body.thumbnailListView #thumbnails {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
#thumbnails.offscreen {
|
||||
top: 5rem;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Header in default thumbnail list appears in tablets only */
|
||||
body.thumbnailListView #thumbnail-list-top {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#thumbnails.list {
|
||||
top: 5rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.thumbnail.selected {
|
||||
outline: 0.2rem solid #0AC;
|
||||
box-shadow: 0 0 0 4px rgb(0, 202, 242) inset;
|
||||
}
|
||||
|
||||
/* Fullscreen */
|
||||
body.fullscreenView #fullscreen-toolbar-header > menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#fullscreen-back-button-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* back button only shows in fullscreen */
|
||||
body.fullscreenView #fullscreen-back-button-large {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#fullscreen-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fullscreen-view.toolbar-hidden #fullscreen-toolbar {
|
||||
transform: translate(0, 6rem);
|
||||
}
|
||||
|
||||
#fullscreen-camera-button-large > .icon-camera {
|
||||
background-image: url('images/iconaction_camera_30x30.png');
|
||||
}
|
||||
|
||||
#fullscreen-edit-button-large > .icon-picedit {
|
||||
background-image: url('images/iconaction_camera_editphoto_30x30.png');
|
||||
}
|
||||
|
||||
#fullscreen-share-button-large > .icon-share {
|
||||
background-image: url('images/iconaction_share_30x30.png');
|
||||
}
|
||||
|
||||
#fullscreen-info-button-large > .icon-info {
|
||||
background-image: url('images/iconaction_media_info_30x30.png');
|
||||
}
|
||||
|
||||
#fullscreen-delete-button-large > .icon-delete {
|
||||
background-image: url('images/iconaction_delete_30x30.png');
|
||||
}
|
||||
|
||||
#fullscreen-view a.disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Edit */
|
||||
#save-progress {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#edit-preview-area {
|
||||
background-color: #1c2124;
|
||||
/* 100% - header 5rem
|
||||
* - margin between edit options and edit button 0.2rem
|
||||
* - edit button 6rem
|
||||
* - edit option 14.4rem
|
||||
*/
|
||||
height: calc(100% - 5rem - 0.2rem - 6rem - 14.4rem);
|
||||
}
|
||||
|
||||
/* Edit - toolbar */
|
||||
#edit-toolbar {
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
#edit-toolbar > .button {
|
||||
font-size: 1.8rem;
|
||||
line-height: 7rem;
|
||||
}
|
||||
|
||||
#edit-toolbar a.selected.radio.button {
|
||||
outline: none;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
#edit-options {
|
||||
background: url("images/slider-bg.png") repeat-x scroll 0 0 #1c2124;
|
||||
bottom: 6.2rem;
|
||||
height: 14.4rem;
|
||||
}
|
||||
|
||||
#edit-effect-options > a.radio.button {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#edit-effect-none:before,
|
||||
#edit-border-none:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: block;
|
||||
background: url("images/selection_mask_L.png") repeat-y scroll 0 0 transparent;
|
||||
height: 100%;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
#edit-border-thick-black:after,
|
||||
#edit-effect-faded:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: url("images/selection_mask_R.png") repeat-y scroll 0 0 transparent;
|
||||
height: 100%;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
/* Edit - slider */
|
||||
#exposure-slider {
|
||||
top: 7rem;
|
||||
height: 10rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
#sliderthumb {
|
||||
width: 5.4rem;
|
||||
top: -5.4rem;
|
||||
height: 8rem;
|
||||
left: calc(100% - 3rem);
|
||||
padding-top: 3.6rem;
|
||||
font-size: 1.8rem;
|
||||
text-align: center;
|
||||
background: url("images/slider-indicator.png") no-repeat scroll center center transparent;
|
||||
}
|
||||
|
||||
#sliderthumb.active {
|
||||
background: url("images/slider-indicator.png") no-repeat scroll center center transparent;
|
||||
}
|
||||
|
||||
#sliderbar {
|
||||
position: static;
|
||||
height: 1.9rem;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#sliderline {
|
||||
top: 0;
|
||||
background: white;
|
||||
height: 0.4rem;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#sliderlabels {
|
||||
top: -1.5rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sliderlabel {
|
||||
height: 1rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.sliderlabel:after {
|
||||
top: 1.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* It replaces 'save' text with image and also keep the press effect from
|
||||
* building block.
|
||||
*/
|
||||
#crop-done-button:after,
|
||||
#edit-save-button:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('images/iconaction_done_30x30.png') no-repeat center center / 3rem;
|
||||
}
|
||||
#crop-done-button,
|
||||
#edit-save-button {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* Edit - effect buttons */
|
||||
#edit-exposure-button {
|
||||
background: url("images/actionicon_gallery_edit_exposure_30x30.png") no-repeat center/3rem, url("images/tab.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-exposure-button.selected {
|
||||
background: url("images/actionicon_gallery_edit_exposure_30x30.png") no-repeat center/3rem, url("images/tab_selected.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-crop-button {
|
||||
background: url("images/actionicon_gallery_edit_crop_30x30.png") no-repeat center/3rem, url("images/tab.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-crop-button.selected {
|
||||
background: url("images/actionicon_gallery_edit_crop_30x30.png") no-repeat center/3rem, url("images/tab_selected.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-effect-button {
|
||||
background: url("images/actionicon_gallery_edit_effects_30x30.png") no-repeat center/3rem, url("images/tab.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-effect-button.selected {
|
||||
background: url("images/actionicon_gallery_edit_effects_30x30.png") no-repeat center/3rem, url("images/tab_selected.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-border-button {
|
||||
background: url("images/actionicon_gallery_edit_borders_30x30.png") no-repeat center/3rem, url("images/tab.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-border-button.selected {
|
||||
background: url("images/actionicon_gallery_edit_borders_30x30.png") no-repeat center/3rem, url("images/tab_selected.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-enhance-button {
|
||||
background: url("images/actionicon_gallery_edit_enhance_selected_30x30.png") no-repeat center/3rem, url("images/tab.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-enhance-button.on {
|
||||
background: url("images/actionicon_gallery_edit_enhance_on_selected_30x30.png") no-repeat center/3rem, url("images/tab.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-enhance-button.selected {
|
||||
background: url("images/actionicon_gallery_edit_enhance_selected_30x30.png") no-repeat center/3rem, url("images/tab_selected.png") repeat-x center;
|
||||
}
|
||||
|
||||
#edit-enhance-button.selected.on {
|
||||
background: url("images/actionicon_gallery_edit_enhance_on_selected_30x30.png") no-repeat center/3rem, url("images/tab_selected.png") repeat-x center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dialog. Since delete dialog in select mode and loading dialog
|
||||
* are managed by gallery app itself, we need aditional style here.
|
||||
* We'll modify it until 934326 is landed.
|
||||
*/
|
||||
#overlay,
|
||||
#confirm-dialog {
|
||||
background: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
#overlay section,
|
||||
#confirm-dialog section {
|
||||
position: absolute;
|
||||
padding: 1rem 6rem 0;
|
||||
left: calc((100% - 68rem) / 2);
|
||||
top: calc((100% - 53rem) / 2);
|
||||
width: 68rem;
|
||||
height: 46rem;
|
||||
box-shadow: 0 0 1rem #000;
|
||||
border: 0.1rem #000;
|
||||
font-size: 2rem;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
#overlay > section > p {
|
||||
padding: 1rem 1rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#confirm-dialog > section > p {
|
||||
margin-top: 20rem;
|
||||
}
|
||||
|
||||
#overlay > section > h1 {
|
||||
line-height: 6rem;
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
#overlay > menu,
|
||||
#confirm-dialog > menu {
|
||||
position: absolute;
|
||||
left: calc((100% - 68rem) / 2);
|
||||
top: calc((100% - 53rem) / 2 + 46rem);
|
||||
width: 68rem;
|
||||
background: #2d2d2d;
|
||||
padding: 1.5rem 14rem;
|
||||
height: 7rem;
|
||||
bottom: 0;
|
||||
box-shadow: 0 0 1rem #000;
|
||||
}
|
||||
|
||||
#overlay:after,
|
||||
#confirm-dialog:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 68rem;
|
||||
top: calc((100% - 53rem) / 2 + 45rem);
|
||||
left: calc((100% - 68rem) / 2);
|
||||
height: 1rem;
|
||||
background-color: #333;
|
||||
}
|
||||
/* video player */
|
||||
body.fullscreenView .videoPlayerFullscreenButton,
|
||||
body.thumbnailSelectView .videoPlayerFullscreenButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* We don't want the controller of videoplayer hide in preview mode */
|
||||
body.thumbnailListView #fullscreen-view.toolbar-hidden .videoPlayerFooter.hidden {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* XXX: Below css will move to building block til bug905065 is closed */
|
||||
|
||||
/*
|
||||
* 1. Introduced by bug 1059748
|
||||
* In bug 1019841 we introduced !important for .large-only styles to hide
|
||||
* tablet layout on phone devices, which will cause regression on tablet.
|
||||
* We have to use !important here to override styles from phone layout.
|
||||
*/
|
||||
#fullscreen-toolbar-header {
|
||||
display: block !important; /* 1 */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (min-height: 768px) {
|
||||
section[role="region"].skin-organic > header:first-child h1,
|
||||
.skin-organic section[role="region"] > header:first-child h1,
|
||||
section[role="region"].skin-dark > header:first-child,
|
||||
.skin-dark section[role="region"] > header:first-child {
|
||||
color: white;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child h1 {
|
||||
font-size: 2.4rem;
|
||||
line-height: 5rem;
|
||||
color: #fff;
|
||||
padding: 0 1rem 0 2rem;
|
||||
}
|
||||
|
||||
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-dark > header:first-child menu[type="toolbar"] a:after,
|
||||
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:after,
|
||||
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:after,
|
||||
section[role="region"].skin-organic > 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/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
|
||||
}
|
||||
|
||||
section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
|
||||
section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
|
||||
section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
|
||||
section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
|
||||
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
|
||||
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
|
||||
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
|
||||
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active,
|
||||
section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
|
||||
section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
|
||||
section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
|
||||
section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
|
||||
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
|
||||
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
|
||||
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
|
||||
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active {
|
||||
background: url("images/ui/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child > button,
|
||||
section[role="region"] > header:first-child > a {
|
||||
position: relative;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background: none;
|
||||
float: left;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child > button:after,
|
||||
section[role="region"] > header:first-child > a:after {
|
||||
width: 5.2rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon.icon-back,
|
||||
section[role="region"].skin-organic > header:first-child .icon.icon-back,
|
||||
.skin-organic section[role="region"] > header:first-child .icon.icon-back,
|
||||
section[role="region"].skin-dark > header:first-child .icon.icon-back,
|
||||
.skin-dark section[role="region"] > header:first-child .icon.icon-back {
|
||||
background-image: url("images/back.png");
|
||||
}
|
||||
|
||||
section[role="region"] > header:first-child .icon.icon-close,
|
||||
section[role="region"].skin-organic > header:first-child .icon.icon-close,
|
||||
.skin-organic section[role="region"] > header:first-child .icon.icon-close,
|
||||
section[role="region"].skin-dark > header:first-child .icon.icon-close,
|
||||
.skin-dark section[role="region"] > header:first-child .icon.icon-close {
|
||||
background-image: url("images/actionicon_cancel.png");
|
||||
}
|
||||
|
||||
section[role="region"].skin-dark > header:first-child,
|
||||
.skin-dark section[role="region"] > header:first-child,
|
||||
section[role="region"].skin-organic > header:first-child,
|
||||
.skin-organic section[role="region"] > header:first-child {
|
||||
background: url("images/ui/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
|
||||
}
|
||||
|
||||
section[role="region"].skin-dark > header:first-child a:after,
|
||||
.skin-dark section[role="region"] > header:first-child a:after,
|
||||
section[role="region"].skin-dark > header:first-child button:after,
|
||||
.skin-dark section[role="region"] > header:first-child button:after,
|
||||
section[role="region"].skin-organic > header:first-child a:after,
|
||||
.skin-organic 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 {
|
||||
background: url("images/ui/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
|
||||
}
|
||||
}
|
||||
|
||||
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/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
/* we have both thumbnail list and preview together when in landscape */
|
||||
body.thumbnailListView #fullscreen-view,
|
||||
body.thumbnailSelectView #fullscreen-view {
|
||||
display: block;
|
||||
width: calc(100% - 40rem);
|
||||
left: 40rem;
|
||||
}
|
||||
|
||||
body.thumbnailListView #thumbnail-views,
|
||||
body.thumbnailSelectView #thumbnail-views {
|
||||
visibility: visible;
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
/* outline the picture we're focusing on in preview mode */
|
||||
body.thumbnailListView .thumbnail.focus {
|
||||
outline: solid #00aacc 0.3rem;
|
||||
outline-offset: -0.2rem;
|
||||
}
|
||||
|
||||
/* rewrite thumbnail's original size */
|
||||
.thumbnail {
|
||||
width: calc((100% - 0.4rem) / 3);
|
||||
padding: 0 0 calc((100% - 0.4rem) / 3);
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.thumbnail:nth-child(4n) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.thumbnail:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* we don't have preview screen when in picking */
|
||||
body.pickView #thumbnails {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.pickView #thumbnails .thumbnail {
|
||||
width: calc((100% - 1rem) / 6);
|
||||
padding: 0 0 calc((100% - 1em) / 6);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
body.pickView #thumbnails .thumbnail:nth-child(3n) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
body.pickView #thumbnails .thumbnail:nth-child(4n) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
body.pickView #thumbnails .thumbnail:nth-child(6n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* slider
|
||||
* We have 7 steps located from the center of sliderline
|
||||
*/
|
||||
#sliderline {
|
||||
width: 90rem;
|
||||
left: calc(50% - 45rem);
|
||||
}
|
||||
|
||||
#slider-3 {
|
||||
left: calc(50% - 45rem);
|
||||
}
|
||||
|
||||
#slider-2 {
|
||||
left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) / 6);
|
||||
}
|
||||
|
||||
#slider-1 {
|
||||
left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 2 / 6);
|
||||
}
|
||||
|
||||
#slider0 {
|
||||
left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 3 / 6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#slider1 {
|
||||
left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 4 / 6);
|
||||
}
|
||||
|
||||
#slider2 {
|
||||
left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 5 / 6);
|
||||
}
|
||||
|
||||
#slider3 {
|
||||
left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)));
|
||||
}
|
||||
|
||||
/* video player */
|
||||
body:not(.fullscreenView) .videoPlayerPauseButton {
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
body:not(.fullscreenView) .videoPlayerSlider {
|
||||
left: 10rem;
|
||||
}
|
||||
|
||||
body:not(.fullscreenView) .videoPlayerProgress {
|
||||
left: 7rem;
|
||||
right: 15rem;
|
||||
}
|
||||
|
||||
body:not(.fullscreenView) .videoPlayerSlider .videoPlayerDurationText {
|
||||
text-align: center;
|
||||
right: 8rem;
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
@media (orientation: portrait) {
|
||||
.thumbnail:nth-child(3n) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: calc((100% - 0.6rem) / 4);
|
||||
padding: 0 0 calc((100% - 0.6rem) / 4);
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.thumbnail:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* slider */
|
||||
#sliderline {
|
||||
width: 60rem;
|
||||
left: calc(50% - 30rem);
|
||||
}
|
||||
|
||||
#slider-3 {
|
||||
left: calc(50% - 30rem);
|
||||
}
|
||||
|
||||
#slider-2 {
|
||||
left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) / 6);
|
||||
}
|
||||
|
||||
#slider-1 {
|
||||
left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 2 / 6);
|
||||
}
|
||||
|
||||
#slider0 {
|
||||
left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 3 / 6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#slider1 {
|
||||
left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 4 / 6);
|
||||
}
|
||||
|
||||
#slider2 {
|
||||
left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 5 / 6);
|
||||
}
|
||||
|
||||
#slider3 {
|
||||
left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)));
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
assets/webapps/gallery.gaiamobile.org/style/icons/gallery_84.png
Normal file
BIN
assets/webapps/gallery.gaiamobile.org/style/icons/gallery_84.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 434 B |
Binary file not shown.
|
After Width: | Height: | Size: 387 B |
Binary file not shown.
|
After Width: | Height: | Size: 282 B |
Binary file not shown.
|
After Width: | Height: | Size: 364 B |
Binary file not shown.
|
After Width: | Height: | Size: 382 B |
Binary file not shown.
|
After Width: | Height: | Size: 395 B |
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
Binary file not shown.
|
After Width: | Height: | Size: 229 B |
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
Binary file not shown.
|
After Width: | Height: | Size: 332 B |
Binary file not shown.
|
After Width: | Height: | Size: 323 B |
Binary file not shown.
|
After Width: | Height: | Size: 233 B |
Binary file not shown.
|
After Width: | Height: | Size: 286 B |
Binary file not shown.
|
After Width: | Height: | Size: 319 B |
Binary file not shown.
|
After Width: | Height: | Size: 408 B |
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
Binary file not shown.
|
After Width: | Height: | Size: 277 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
Binary file not shown.
|
After Width: | Height: | Size: 108 B |
Binary file not shown.
|
After Width: | Height: | Size: 106 B |
Binary file not shown.
|
After Width: | Height: | Size: 234 B |
BIN
assets/webapps/gallery.gaiamobile.org/style/images/slider-bg.png
Normal file
BIN
assets/webapps/gallery.gaiamobile.org/style/images/slider-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 B |
Binary file not shown.
|
After Width: | Height: | Size: 234 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 815 B |
Binary file not shown.
|
After Width: | Height: | Size: 708 B |
BIN
assets/webapps/gallery.gaiamobile.org/style/images/tab.png
Normal file
BIN
assets/webapps/gallery.gaiamobile.org/style/images/tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 B |
Binary file not shown.
|
After Width: | Height: | Size: 125 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 B |
Binary file not shown.
|
After Width: | Height: | Size: 128 B |
Binary file not shown.
|
After Width: | Height: | Size: 130 B |
Binary file not shown.
|
After Width: | Height: | Size: 131 B |
Binary file not shown.
|
After Width: | Height: | Size: 115 B |
Binary file not shown.
|
After Width: | Height: | Size: 321 B |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
50
assets/webapps/gallery.gaiamobile.org/style/info.css
Normal file
50
assets/webapps/gallery.gaiamobile.org/style/info.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
#info-view > section {
|
||||
vertical-align: top; /* override confirm.css */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#info-view > section > dl {
|
||||
border-top: none; /* override confirm.css */
|
||||
margin: 0.6rem 2rem 0 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#info-view > section > dl > dt {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
color: #8a9699;
|
||||
margin: 1rem 0 0.3rem 0;
|
||||
padding: 0 1rem;
|
||||
|
||||
/* override confirm.css */
|
||||
width: 100% !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
#info-view > section > dl > dd {
|
||||
display: block;
|
||||
color: #ffffff;
|
||||
font-size: 1.9rem;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding: 0 1rem 1.2rem 1rem;
|
||||
border-bottom: 0.1rem solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
#info-view > section > dl > dd:last-child {
|
||||
/* no separator after the last item in the list */
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#info-view > section > dl > dd.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#info-name {
|
||||
/* file name is not directional and stays LTR */
|
||||
direction: ltr;
|
||||
}
|
||||
70
assets/webapps/gallery.gaiamobile.org/style/open.css
Normal file
70
assets/webapps/gallery.gaiamobile.org/style/open.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
* { -moz-box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
#open {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* like .frame in gallery.css */
|
||||
#frame {
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#frame > .image-view {
|
||||
top: 0; /* javascript modifies this position with a transform */
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
*.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#message {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#filename {
|
||||
/* file name is not directional and stays LTR */
|
||||
direction: ltr;
|
||||
}
|
||||
Loading…
Reference in a new issue