b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
709 lines
18 KiB
CSS
709 lines
18 KiB
CSS
/* 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)));
|
|
}
|
|
}
|