diff --git a/README.md b/README.md index 6a444f1..e10e990 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Example: ``` --> ```html - ``` diff --git a/cosmoz-image-viewer-overlay.js b/cosmoz-image-viewer-overlay.js index 0c540de..636d20a 100644 --- a/cosmoz-image-viewer-overlay.js +++ b/cosmoz-image-viewer-overlay.js @@ -15,8 +15,12 @@ class CosmozImageViewerOverlay extends mixinBehaviors([IronOverlayBehavior], Pol height: 100vh; width: 100vw; } + cosmoz-image-viewer { + height: 100%; + } :host { @@ -29,8 +29,8 @@ export const template = html` .flex { flex: auto; } #imageContainer { + height: 100%; overflow-y: auto; - will-change: transform; } .actions { @@ -68,51 +68,13 @@ export const template = html` visibility: hidden; } - div:hover .nav { + :host(:hover) .nav { visibility: visible; } - #carousel { - --skeleton-carousel-item-selected: { - height: auto; - text-align: center; - }; - - --skeleton-carousel-item: { - height: 0; - text-align: center; - }; - - --skeleton-carousel-nav: { - background-color: rgba(0, 0, 0, 0.44); - color: rgba(255, 255, 255, 0.87); - top: 12px; - position: absolute; - }; - - --skeleton-carousel-nav-disabled: { - /* otherwise fullscreen gets triggerd on tap */ - pointer-events: all !important; - }; - - --skeleton-carousel-nav-next: { - left: 56px; - }; - - --skeleton-carousel-nav-prev: { - left: 12px; - }; - - --skeleton-carousel-controls: { - padding: 0; - } - } - .image { background-color: gray; pointer-events: none; - --iron-image-width: 100%; - --iron-image-height: auto; /* Needed to override Chrome 73+ handling of iron-image overflow hidden */ overflow: visible; @apply --cosmoz-image-viewer-image; @@ -134,6 +96,7 @@ export const template = html` transform: translate(-50%, -50%); color: white; z-index: +1; + text-align: center; @apply --cosmoz-image-viewer-error; } @@ -142,56 +105,41 @@ export const template = html` opacity: 0.8; font-size: 0.8em; } + + cosmoz-slider { + min-height: 150px; + overflow-y: auto !important; + height:100%; + } -
- + -
- - - - -
- - - - - - - - - - - - -
+
+ + + + +
+ + + + + + + + + + + + +
-
-

[[ _('No image loaded.', t) ]]

- - - -
+
+

[[ _('No image loaded.', t) ]]

+