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
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)));
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue