mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update slideshow
This commit is contained in:
parent
1c296d8d87
commit
658f5052da
32 changed files with 834 additions and 174 deletions
|
@ -34,11 +34,13 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
|
|||
<iron-iconset-svg name="slideshow" size="24">
|
||||
<svg>
|
||||
<defs>
|
||||
<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
|
||||
<g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></g>
|
||||
<g id="pause"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></g>
|
||||
<g id="skip-next"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" /></g>
|
||||
<g id="skip-previous"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" /></g>
|
||||
<g id="keyboard-arrow-left"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" /></g>
|
||||
<g id="keyboard-arrow-right"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" /></g>
|
||||
<g id="play-arrow"><path d="M8 5v14l11-7z" /></g>
|
||||
<g id="file-download"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" /></g>
|
||||
<g id="share"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" /></g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
||||
|
|
|
@ -1,16 +1,117 @@
|
|||
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'css!./style', 'html!./icons', 'iron-icon-set', 'paper-fab', 'paper-icon-button', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager) {
|
||||
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'apphost', 'css!./style', 'html!./icons', 'iron-icon-set', 'paper-icon-button', 'paper-spinner'], function (dialogHelper, inputmanager, connectionManager, layoutManager, focusManager, appHost) {
|
||||
|
||||
function getImageUrl(item, options, apiClient) {
|
||||
|
||||
options = options || {};
|
||||
options.type = options.type || "Primary";
|
||||
|
||||
if (typeof (item) === 'string') {
|
||||
return apiClient.getScaledImageUrl(item, options);
|
||||
}
|
||||
|
||||
if (item.ImageTags && item.ImageTags[options.type]) {
|
||||
|
||||
options.tag = item.ImageTags[options.type];
|
||||
return apiClient.getScaledImageUrl(item.Id, options);
|
||||
}
|
||||
|
||||
if (options.type == 'Primary') {
|
||||
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
|
||||
options.tag = item.AlbumPrimaryImageTag;
|
||||
return apiClient.getScaledImageUrl(item.AlbumId, options);
|
||||
}
|
||||
|
||||
//else if (item.AlbumId && item.SeriesPrimaryImageTag) {
|
||||
|
||||
// imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
|
||||
// type: "Primary",
|
||||
// width: downloadWidth,
|
||||
// tag: item.SeriesPrimaryImageTag,
|
||||
// minScale: minScale
|
||||
// });
|
||||
|
||||
//}
|
||||
//else if (item.ParentPrimaryImageTag) {
|
||||
|
||||
// imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
|
||||
// type: "Primary",
|
||||
// width: downloadWidth,
|
||||
// tag: item.ParentPrimaryImageTag,
|
||||
// minScale: minScale
|
||||
// });
|
||||
//}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function getBackdropImageUrl(item, options, apiClient) {
|
||||
|
||||
options = options || {};
|
||||
options.type = options.type || "Backdrop";
|
||||
|
||||
options.width = null;
|
||||
delete options.width;
|
||||
options.maxWidth = null;
|
||||
delete options.maxWidth;
|
||||
options.maxHeight = null;
|
||||
delete options.maxHeight;
|
||||
options.height = null;
|
||||
delete options.height;
|
||||
|
||||
// If not resizing, get the original image
|
||||
if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
|
||||
options.quality = 100;
|
||||
}
|
||||
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
||||
options.tag = item.BackdropImageTags[0];
|
||||
return apiClient.getScaledImageUrl(item.Id, options);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function getImgUrl(item, original) {
|
||||
|
||||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
||||
var imageOptions = {};
|
||||
|
||||
if (!original) {
|
||||
imageOptions.maxWidth = screen.availWidth;
|
||||
}
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
return getBackdropImageUrl(item, imageOptions, apiClient);
|
||||
} else {
|
||||
|
||||
if (item.MediaType == 'Photo' && original) {
|
||||
return apiClient.getUrl("Items/" + item.Id + "/Download", {
|
||||
api_key: apiClient.accessToken()
|
||||
});
|
||||
}
|
||||
imageOptions.type = "Primary";
|
||||
return getImageUrl(item, imageOptions, apiClient);
|
||||
}
|
||||
}
|
||||
|
||||
return function (options) {
|
||||
|
||||
var self = this;
|
||||
var swiperInstance;
|
||||
var dlg;
|
||||
var currentTimeout;
|
||||
var currentIntervalMs;
|
||||
var currentOptions;
|
||||
var currentIndex;
|
||||
|
||||
function createElements(options) {
|
||||
|
||||
dlg = dialogHelper.createDialog({
|
||||
exitAnimationDuration: options.interactive ? 400 : 800,
|
||||
size: 'fullscreen'
|
||||
size: 'fullscreen',
|
||||
autoFocus: false
|
||||
});
|
||||
|
||||
dlg.classList.add('slideshowDialog');
|
||||
|
@ -22,13 +123,21 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
html += '<div>';
|
||||
html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
|
||||
|
||||
html += '<paper-fab mini icon="slideshow:arrow-back" class="btnSlideshowExit" tabindex="-1"></paper-fab>';
|
||||
html += '<paper-icon-button icon="slideshow:keyboard-arrow-left" class="btnSlideshowPrevious slideshowButton" tabindex="-1"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="slideshow:keyboard-arrow-right" class="btnSlideshowNext slideshowButton" tabindex="-1"></paper-icon-button>';
|
||||
|
||||
html += '<div class="slideshowControlBar">';
|
||||
html += '<paper-icon-button icon="slideshow:skip-previous" class="btnSlideshowPrevious slideshowButton"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="slideshow:close" class="btnSlideshowExit" tabindex="-1"></paper-icon-button>';
|
||||
|
||||
html += '<div class="slideshowBottomBar hide">';
|
||||
|
||||
//html += '<paper-icon-button icon="slideshow:share" class="btnShare slideshowButton"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="slideshow:pause" class="btnSlideshowPause slideshowButton" autoFocus></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="slideshow:skip-next" class="btnSlideshowNext slideshowButton"></paper-icon-button>';
|
||||
if (appHost.supports('filedownload')) {
|
||||
html += '<paper-icon-button icon="slideshow:file-download" class="btnDownload slideshowButton"></paper-icon-button>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
} else {
|
||||
|
@ -44,7 +153,21 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
});
|
||||
dlg.querySelector('.btnSlideshowNext').addEventListener('click', nextImage);
|
||||
dlg.querySelector('.btnSlideshowPrevious').addEventListener('click', previousImage);
|
||||
dlg.querySelector('.btnSlideshowPause').addEventListener('click', playPause);
|
||||
|
||||
var btnPause = dlg.querySelector('.btnSlideshowPause');
|
||||
if (btnPause) {
|
||||
btnPause.addEventListener('click', playPause);
|
||||
}
|
||||
|
||||
var btnDownload = dlg.querySelector('.btnDownload');
|
||||
if (btnDownload) {
|
||||
btnDownload.addEventListener('click', download);
|
||||
}
|
||||
|
||||
var btnShare = dlg.querySelector('.btnShare');
|
||||
if (btnShare) {
|
||||
btnShare.addEventListener('click', share);
|
||||
}
|
||||
}
|
||||
|
||||
document.body.appendChild(dlg);
|
||||
|
@ -56,6 +179,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
});
|
||||
|
||||
inputmanager.on(window, onInputCommand);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
dlg.addEventListener('close', onDialogClosed);
|
||||
|
||||
|
@ -101,7 +225,8 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
function getSwiperSlideHtmlFromItem(item) {
|
||||
|
||||
return getSwiperSlideHtmlFromSlide({
|
||||
imageUrl: getImgUrl(item)
|
||||
imageUrl: getImgUrl(item),
|
||||
originalImage: getImgUrl(item, true)
|
||||
//title: item.Name,
|
||||
//description: item.Overview
|
||||
});
|
||||
|
@ -128,7 +253,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
function getSwiperSlideHtmlFromSlide(item) {
|
||||
|
||||
var html = '';
|
||||
html += '<div class="swiper-slide">';
|
||||
html += '<div class="swiper-slide" data-original="' + item.originalImage + '">';
|
||||
html += '<img data-src="' + item.imageUrl + '" class="swiper-lazy">';
|
||||
html += '<paper-spinner></paper-spinner>';
|
||||
if (item.title || item.subtitle) {
|
||||
|
@ -179,6 +304,32 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
}
|
||||
}
|
||||
|
||||
function getCurrentImageUrl() {
|
||||
|
||||
|
||||
if (swiperInstance) {
|
||||
return document.querySelector('.swiper-slide-active').getAttribute('data-original');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function download() {
|
||||
|
||||
var url = getCurrentImageUrl();
|
||||
|
||||
require(['fileDownloader'], function (fileDownloader) {
|
||||
fileDownloader.download([
|
||||
{
|
||||
url: url
|
||||
}]);
|
||||
});
|
||||
}
|
||||
|
||||
function share() {
|
||||
|
||||
}
|
||||
|
||||
function play() {
|
||||
|
||||
dlg.querySelector('.btnSlideshowPause').icon = "slideshow:pause";
|
||||
|
@ -212,13 +363,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
}
|
||||
|
||||
inputmanager.off(window, onInputCommand);
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
}
|
||||
|
||||
var currentTimeout;
|
||||
var currentIntervalMs;
|
||||
var currentOptions;
|
||||
var currentIndex;
|
||||
|
||||
function startInterval(options) {
|
||||
|
||||
currentOptions = options;
|
||||
|
@ -232,93 +379,137 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
}
|
||||
}
|
||||
|
||||
function getImgUrl(item) {
|
||||
var _osdOpen = false;
|
||||
function isOsdOpen() {
|
||||
return _osdOpen;
|
||||
}
|
||||
|
||||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
return getBackdropImageUrl(item, {
|
||||
maxWidth: screen.availWidth
|
||||
}, apiClient);
|
||||
} else {
|
||||
return getImageUrl(item, {
|
||||
type: "Primary",
|
||||
maxWidth: screen.availWidth
|
||||
}, apiClient);
|
||||
function getOsdBottom() {
|
||||
return dlg.querySelector('.slideshowBottomBar');
|
||||
}
|
||||
|
||||
function showOsd() {
|
||||
|
||||
slideUpToShow(getOsdBottom());
|
||||
startHideTimer();
|
||||
}
|
||||
|
||||
function hideOsd() {
|
||||
|
||||
slideDownToHide(getOsdBottom());
|
||||
}
|
||||
|
||||
var hideTimeout;
|
||||
function startHideTimer() {
|
||||
stopHideTimer();
|
||||
hideTimeout = setTimeout(hideOsd, 4000);
|
||||
}
|
||||
function stopHideTimer() {
|
||||
if (hideTimeout) {
|
||||
clearTimeout(hideTimeout);
|
||||
hideTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
function getBackdropImageUrl(item, options, apiClient) {
|
||||
function slideUpToShow(elem) {
|
||||
|
||||
options = options || {};
|
||||
options.type = options.type || "Backdrop";
|
||||
|
||||
options.width = null;
|
||||
delete options.width;
|
||||
options.maxWidth = null;
|
||||
delete options.maxWidth;
|
||||
options.maxHeight = null;
|
||||
delete options.maxHeight;
|
||||
options.height = null;
|
||||
delete options.height;
|
||||
|
||||
// If not resizing, get the original image
|
||||
if (!options.maxWidth && !options.width && !options.maxHeight && !options.height) {
|
||||
options.quality = 100;
|
||||
if (!elem.classList.contains('hide')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
_osdOpen = true;
|
||||
elem.classList.remove('hide');
|
||||
|
||||
options.tag = item.BackdropImageTags[0];
|
||||
return apiClient.getScaledImageUrl(item.Id, options);
|
||||
}
|
||||
requestAnimationFrame(function () {
|
||||
|
||||
return null;
|
||||
var keyframes = [
|
||||
{ transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
|
||||
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }];
|
||||
var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
|
||||
elem.animate(keyframes, timing).onfinish = function () {
|
||||
focusManager.focus(elem.querySelector('.btnSlideshowPause'));
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getImageUrl(item, options, apiClient) {
|
||||
function slideDownToHide(elem) {
|
||||
|
||||
options = options || {};
|
||||
options.type = options.type || "Primary";
|
||||
|
||||
if (typeof (item) === 'string') {
|
||||
return apiClient.getScaledImageUrl(item, options);
|
||||
if (elem.classList.contains('hide')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.ImageTags && item.ImageTags[options.type]) {
|
||||
requestAnimationFrame(function () {
|
||||
|
||||
options.tag = item.ImageTags[options.type];
|
||||
return apiClient.getScaledImageUrl(item.Id, options);
|
||||
var keyframes = [
|
||||
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
|
||||
{ transform: 'translate3d(0,' + elem.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }];
|
||||
var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
|
||||
elem.animate(keyframes, timing).onfinish = function () {
|
||||
elem.classList.add('hide');
|
||||
_osdOpen = false;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
var lastMouseMoveData;
|
||||
function onMouseMove(e) {
|
||||
|
||||
var eventX = e.screenX || 0;
|
||||
var eventY = e.screenY || 0;
|
||||
|
||||
var obj = lastMouseMoveData;
|
||||
if (!obj) {
|
||||
lastMouseMoveData = {
|
||||
x: eventX,
|
||||
y: eventY
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.type == 'Primary') {
|
||||
if (item.AlbumId && item.AlbumPrimaryImageTag) {
|
||||
|
||||
options.tag = item.AlbumPrimaryImageTag;
|
||||
return apiClient.getScaledImageUrl(item.AlbumId, options);
|
||||
}
|
||||
|
||||
//else if (item.AlbumId && item.SeriesPrimaryImageTag) {
|
||||
|
||||
// imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
|
||||
// type: "Primary",
|
||||
// width: downloadWidth,
|
||||
// tag: item.SeriesPrimaryImageTag,
|
||||
// minScale: minScale
|
||||
// });
|
||||
|
||||
//}
|
||||
//else if (item.ParentPrimaryImageTag) {
|
||||
|
||||
// imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
|
||||
// type: "Primary",
|
||||
// width: downloadWidth,
|
||||
// tag: item.ParentPrimaryImageTag,
|
||||
// minScale: minScale
|
||||
// });
|
||||
//}
|
||||
// if coord are same, it didn't move
|
||||
if (Math.abs(eventX - obj.x) < 10 && Math.abs(eventY - obj.y) < 10) {
|
||||
return;
|
||||
}
|
||||
|
||||
return null;
|
||||
obj.x = eventX;
|
||||
obj.y = eventY;
|
||||
|
||||
showOsd();
|
||||
}
|
||||
|
||||
function onInputCommand(e) {
|
||||
|
||||
switch (e.detail.command) {
|
||||
|
||||
case 'left':
|
||||
if (!isOsdOpen()) {
|
||||
e.preventDefault();
|
||||
previousImage();
|
||||
}
|
||||
break;
|
||||
case 'right':
|
||||
if (!isOsdOpen()) {
|
||||
e.preventDefault();
|
||||
nextImage();
|
||||
}
|
||||
break;
|
||||
case 'up':
|
||||
case 'down':
|
||||
case 'select':
|
||||
case 'menu':
|
||||
case 'info':
|
||||
case 'play':
|
||||
case 'playpause':
|
||||
case 'pause':
|
||||
case 'fastforward':
|
||||
case 'rewind':
|
||||
case 'next':
|
||||
case 'previous':
|
||||
showOsd();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function showNextImage(index, skipPreload) {
|
||||
|
@ -397,33 +588,6 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'c
|
|||
}
|
||||
}
|
||||
|
||||
function onInputCommand(e) {
|
||||
|
||||
switch (e.detail.command) {
|
||||
|
||||
case 'left':
|
||||
previousImage();
|
||||
break;
|
||||
case 'right':
|
||||
nextImage();
|
||||
break;
|
||||
case 'play':
|
||||
play();
|
||||
break;
|
||||
case 'pause':
|
||||
pause();
|
||||
break;
|
||||
case 'playpause':
|
||||
playPause();
|
||||
break;
|
||||
default:
|
||||
return
|
||||
break;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
self.show = function () {
|
||||
startInterval(options);
|
||||
};
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
@ -46,43 +45,84 @@
|
|||
top: 50%;
|
||||
}
|
||||
|
||||
.btnSlideshowExit {
|
||||
.slideshowDialog paper-icon-button {
|
||||
width: 5.2vh;
|
||||
height: 5.2vh;
|
||||
color: #fff;
|
||||
opacity: .7;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.layout-tv .slideshowDialog paper-icon-button {
|
||||
width: 7vh;
|
||||
height: 7vh;
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 120dpi) {
|
||||
.slideshowDialog paper-icon-button {
|
||||
width: 11vmin;
|
||||
height: 11vmin;
|
||||
}
|
||||
}
|
||||
|
||||
.btnSlideshowPrevious {
|
||||
left: .5vh;
|
||||
top: 45vh;
|
||||
z-index: 1002;
|
||||
position: absolute;
|
||||
top: 1.5vh;
|
||||
left: 1.5vh;
|
||||
width: 6vh;
|
||||
height: 6vh;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
paper-fab.btnSlideshowExit {
|
||||
background-color: #444;
|
||||
.btnSlideshowNext {
|
||||
right: .5vh;
|
||||
top: 45vh;
|
||||
z-index: 1002;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slideshowControlBar {
|
||||
.btnSlideshowExit {
|
||||
right: .5vh;
|
||||
top: .5vh;
|
||||
z-index: 1002;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slideshowBottomBar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1002;
|
||||
background: rgba(0,0,0,.5);
|
||||
text-align: center;
|
||||
color: #eee;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
color: #fff;
|
||||
padding: .5%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mouseIdle .btnSlideshowExit {
|
||||
.slideshowTopBar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
color: #fff;
|
||||
padding: .5%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mouseIdle .btnSlideshowPrevious, .mouseIdle .btnSlideshowNext, .mouseIdle .btnSlideshowExit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mouseIdle .slideshowControlBar {
|
||||
transform: translateY(100%);
|
||||
transition: transform 600ms ease-out;
|
||||
}
|
||||
|
||||
.slideshowButton {
|
||||
width: 8vh;
|
||||
height: 8vh;
|
||||
.slideshowExtraButtons {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.slideText {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue