@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/scss/slider/VCO.Slide.scss

@@ -0,0 +1,457 @@
+@use "sass:color";
+@use "../Variables" as *;
+@use "../core/Mixins" as *;
+
+/* SLIDE 
+================================================== */
+.vco-slide {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+
+    // display:table;
+    // table-layout: fixed;
+    overflow: hidden auto;
+
+    // Visible, app-styled vertical scrollbar whenever the slide content
+    // overflows (desktop); touch devices get a wider one
+    scrollbar-width: thin;
+    scrollbar-color: $color-theme transparent;
+
+    //	overflow-y:auto;
+    // z-index:26;
+
+    .vco-slide-calltoaction {
+        cursor: pointer;
+        font-weight: bold;
+        padding-top: 10px;
+        margin-bottom: 10px;
+        padding-bottom: 10px;
+
+        .vco-slide-calltoaction-button-text {
+            display: inline-block;
+            background-color: $color-theme;
+            color: $color-background;
+
+            // padding:10px;
+            padding: 10px 15px;
+            border-radius: 7px;
+        }
+
+        &:hover {
+            .vco-slide-calltoaction-button-text {
+                background-color: $color-theme-dark;
+                color: $color-background;
+            }
+        }
+    }
+
+    .vco-slide-background {
+        background-color: var(--vco-color-text-background, #{$color-background});
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: cover;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        overflow: hidden;
+        display: none;
+        opacity: 0.5;
+    }
+
+    .vco-slide-scrollable-container {
+        display: table;
+        table-layout: fixed;
+        height: 100%;
+        z-index: 1;
+    }
+
+    .vco-slide-content-container {
+        display: table-cell;
+        vertical-align: middle;
+        position: relative;
+        z-index: 3;
+
+        .vco-slide-content {
+            // width:100%;
+            // display:table;
+            vertical-align: middle;
+            padding-left: 100px;
+            padding-right: 100px;
+            position: relative;
+            max-width: 100%;
+
+            .vco-media {
+                // display:table-cell;
+                // vertical-align:middle;
+                position: relative;
+                width: 100%;
+                min-width: 50%;
+
+                // height:100%;
+                float: left;
+                margin-top: auto;
+                margin-bottom: auto;
+
+                // margin-right:auto;
+                img,
+                embed,
+                object,
+                video,
+                iframe {
+                    // width:100%;
+                }
+            }
+
+            .vco-text {
+                width: 50%;
+                max-width: 50%;
+                min-width: 120px;
+
+                // height:100%;
+                // overflow-y:auto;
+                padding: 0 20px;
+                display: table-cell;
+                vertical-align: middle;
+                text-align: left;
+
+                // float:left;
+                .vco-slide-calltoaction {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+
+// touch devices (the container carries .vco-mobile on Browser.touch):
+// a wider scrollbar for finger input — darker thumb on a visible track for
+// contrast (standard scrollbar-width/color only; browsers without support
+// keep their system overlay scrollbars)
+.vco-mobile .vco-slide {
+    scrollbar-width: auto;
+    scrollbar-color: $color-theme-dark rgb(0 0 0 / 12%);
+}
+
+/* Scroll hint: a bouncing downward arrow when the slide content overflows
+   (the slide box is scrollable) — tappable to scroll down, hidden after the
+   first scroll of any kind. Anchored to the bottom of the visible slide area
+   (absolute children resolve against the slide's height, so top 100% minus
+   the chip is the visible bottom at scroll 0).
+================================================== */
+@keyframes vco-scroll-hint-bounce {
+    0%,
+    100% {
+        transform: translate(-50%, 0);
+    }
+
+    50% {
+        transform: translate(-50%, 8px);
+    }
+}
+
+.vco-slide-scroll-hint {
+    position: absolute;
+    left: 50%;
+    top: calc(100% - 72px);
+    z-index: 4;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: rgb(0 0 0 / 40%);
+    color: #fff;
+    cursor: pointer;
+    animation: vco-scroll-hint-bounce 1.2s ease-in-out infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        transform: translate(-50%, 0);
+    }
+
+    [class^="vco-icon-"],
+    [class*=" vco-icon-"] {
+        font-size: 26px;
+        line-height: 1;
+    }
+}
+
+/* Only Media (no text)
+================================================== */
+.vco-slide-media-only {
+    .vco-slide-content-container {
+        .vco-slide-content {
+            // width:100%;
+            text-align: center;
+
+            .vco-media {
+                // display:table-cell;
+                // vertical-align:middle;
+                text-align: center;
+                max-width: 100%;
+
+                // height:100%;
+                float: none;
+
+                // margin-right:auto;
+                img,
+                embed,
+                object,
+                video,
+                iframe {
+                    // width:100%;
+                }
+            }
+
+            .vco-text {
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+
+                h2 {
+                    margin-top: 20px;
+                    margin-bottom: 20px;
+                }
+
+                // float:left;
+            }
+        }
+    }
+}
+
+/* Only Text (no media)
+================================================== */
+.vco-slide-text-only {
+    .vco-slide-content-container {
+        .vco-slide-content {
+            // width:100%;
+            .vco-text {
+                max-width: 80%;
+                width: 80%;
+
+                // float:left;
+            }
+        }
+    }
+}
+
+/* Background 
+================================================== */
+
+.vco-slide.vco-full-image-background,
+.vco-slide.vco-full-color-background {
+    @include slide-text-shadow;
+
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @include slide-text-shadow;
+    }
+
+    a,
+    a:hover,
+    b,
+    i,
+    blockquote,
+    blockquote p {
+        @include slide-text-shadow;
+
+        color: color.adjust($color-theme, $lightness: 90%);
+    }
+
+    .vco-caption,
+    .vco-credit {
+        @include slide-text-shadow;
+    }
+
+    .vco-media-twitter,
+    .vco-media-blockquote {
+        blockquote {
+            @include slide-text-shadow;
+
+            p {
+                @include slide-text-shadow;
+            }
+        }
+    }
+
+    .vcard {
+        a,
+        .nickname {
+            @include slide-text-shadow;
+        }
+    }
+}
+
+/* Landscape
+================================================== */
+.vco-layout-landscape {
+    .vco-slide {
+        // .translucent-background(#FFF, 0.85);
+        .vco-slide-content-container {
+            .vco-slide-content {
+                // .translucent-background(#FFF, 0.85);
+            }
+        }
+    }
+}
+
+/* Full Image Background 
+================================================== */
+.vco-slide.vco-full-image-background {
+    background: no-repeat center center;
+    background-size: cover;
+    background-position: center 25%;
+    text-shadow: 1px 1px 2px #000;
+
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        text-shadow: 1px 1px 2px #000;
+    }
+
+    .vco-media-twitter,
+    .vco-media-blockquote {
+        blockquote {
+            text-shadow: 1px 1px 2px #000 !important;
+
+            p {
+                text-shadow: 1px 1px 2px #000 !important;
+            }
+        }
+    }
+}
+
+/* Text alignment (issue #244)
+================================================== */
+.vco-text-content-container.vco-text-align-center {
+    text-align: center;
+}
+
+.vco-text-content-container.vco-text-align-right {
+    text-align: right;
+}
+
+/* Extra iframe media in slide text (issue #358)
+================================================== */
+.vco-text-content {
+    iframe {
+        width: 100%;
+        min-height: 280px;
+        border: 0;
+    }
+}
+
+/* Text Background 
+================================================== */
+.vco-slide.vco-text-background {
+    .vco-text {
+        .vco-text-content-container {
+            padding: 20px;
+
+            @include background-color-opacity(0, 0, 0, 60);
+
+            border-radius: 7px;
+
+            h2 {
+                margin-top: 5px;
+            }
+        }
+    }
+}
+
+/* Landscape
+================================================== */
+.vco-layout-landscape {
+    .vco-slide {
+        .vco-slide-content-container {
+            .vco-slide-content {
+                .vco-media {
+                    display: block;
+
+                    // position:static;
+                    vertical-align: baseline;
+                    height: auto;
+                    max-height: 50%;
+                }
+
+                .vco-text {
+                    // position:static;
+                    max-width: 100%;
+                    min-width: 0;
+                    float: none;
+                    padding: 0;
+
+                    .vco-text-content-container {
+                        // padding-left:10px;
+                        // padding-right:10px;
+                        // padding-bottom:100px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Skinny 500px or less
+.vco-skinny {
+    .vco-slide {
+        display: block;
+
+        .vco-slide-content-container {
+            display: block;
+            position: static;
+            height: auto;
+            vertical-align: baseline;
+
+            .vco-slide-content {
+                position: static;
+                vertical-align: baseline;
+                height: auto;
+
+                .vco-media {
+                    position: static;
+                }
+
+                .vco-text {
+                    .vco-text-content-container {
+                        padding-left: 10px;
+                        padding-right: 10px;
+                        padding-bottom: 10px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.vco-mobile.vco-skinny {
+    .vco-slide-content-container {
+        .vco-slide-content {
+            .vco-media {
+                img,
+                embed,
+                object,
+                video,
+                iframe {
+                    max-height: 175px;
+                }
+            }
+        }
+    }
+}