@projektemacher/storymapjs 0.10.6 → 0.10.8

package/src/scss/slider/VCO.SlideNav.scss

@@ -0,0 +1,332 @@
+@use "sass:color";
+@use "../Variables" as *;
+@use "../core/Mixins" as *;
+
+/* SlideNav
+================================================== */
+
+/* NAVIGATION
+================================================== */
+.vco-slidenav-previous,
+.vco-slidenav-next {
+    position: absolute;
+    top: 45%;
+    z-index: 10;
+    cursor: pointer;
+
+    .vco-slidenav-content-container {
+        height: 200px;
+        width: 00;
+        position: absolute;
+    }
+
+    .vco-slidenav-title,
+    .vco-slidenav-description {
+        width: 100%;
+
+        // word-break:break-all;
+
+        word-break: break-all;
+        overflow-wrap: anywhere;
+        hyphens: auto;
+        opacity: 0.15;
+    }
+
+    .vco-slidenav-title {
+        margin-top: 10px;
+        font-size: $base-font-size-small;
+        line-height: $base-font-size-small;
+
+        // font-weight: bold;
+    }
+}
+
+.vco-slidenav-next,
+.vco-slidenav-previous {
+    .vco-slidenav-icon {
+        // 44px minimum touch target (issues #288, #434); the negative
+        // margins keep the glyph exactly where it was
+        padding: 10px;
+        min-width: 24px;
+        margin: -10px -10px -5px;
+    }
+}
+
+/* ICONS AND NAVIGATION HOVER AND COLOR
+================================================== */
+.vco-slidenav-next,
+.vco-slidenav-previous {
+    .vco-slidenav-content-container {
+        .vco-slidenav-icon,
+        .vco-slidenav-title,
+        .vco-slidenav-description {
+            text-shadow: 1px 1px 1px $color-background;
+
+            // color: $color-foreground;
+            color: $color-background;
+        }
+
+        &.vco-slidenav-inverted {
+            .vco-slidenav-icon,
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                // color:$color-background;
+                color: $color-foreground;
+                text-shadow: 1px 1px 1px $color-foreground;
+            }
+        }
+    }
+
+    .vco-slidenav-icon {
+        font-family: vco-icons, sans-serif;
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        font-size: 32px;
+        margin-bottom: 5px;
+    }
+
+    &:hover {
+        .vco-slidenav-title,
+        .vco-slidenav-description {
+            opacity: 1;
+        }
+    }
+}
+
+.vco-slidenav-next {
+    text-align: right;
+    margin-right: 10px;
+    right: 100px;
+
+    .vco-slidenav-icon {
+        margin-left: 100 - 24px;
+
+        &::before {
+            content: "\e64f";
+        }
+    }
+
+    &:hover {
+        .vco-slidenav-icon {
+            margin-left: 100 - 20px;
+        }
+    }
+}
+
+.vco-slidenav-previous {
+    text-align: left;
+
+    .vco-slidenav-icon {
+        margin-left: 0;
+
+        &::before {
+            content: "\e650";
+        }
+    }
+
+    &:hover {
+        .vco-slidenav-icon {
+            margin-left: -4px;
+        }
+    }
+}
+
+/* Skinny
+================================================== */
+.vco-skinny {
+    .vco-slidenav-next {
+        right: 32px;
+
+        .vco-slidenav-icon {
+            margin-left: 32 - 24px;
+        }
+
+        &:hover {
+            .vco-slidenav-icon {
+                margin-left: 32 - 20px;
+                opacity: 1;
+            }
+        }
+    }
+
+    .vco-slidenav-previous {
+        &:hover {
+            .vco-slidenav-icon {
+                margin-left: -4px;
+                opacity: 1;
+            }
+        }
+    }
+
+    .vco-slidenav-previous,
+    .vco-slidenav-next {
+        .vco-slidenav-content-container {
+            width: 32px;
+            height: 32px;
+
+            .vco-slidenav-icon,
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                // color:$color-background;
+            }
+
+            &.vco-slidenav-inverted {
+                .vco-slidenav-icon,
+                .vco-slidenav-title,
+                .vco-slidenav-description {
+                    color: $color-background;
+
+                    // color: $color-foreground;
+                }
+            }
+        }
+
+        .vco-slidenav-title,
+        .vco-slidenav-description {
+            display: none;
+        }
+
+        .vco-slidenav-icon {
+            opacity: 0.33;
+        }
+    }
+}
+
+/* Mobile and Landscape
+================================================== */
+.vco-layout-landscape.vco-mobile {
+    .vco-slidenav-next {
+        &:hover {
+            right: 70px;
+
+            .vco-slidenav-icon {
+                margin-left: 32 - 24px;
+                opacity: 1;
+            }
+        }
+
+        &:active {
+            .vco-slidenav-icon {
+                margin-left: 0;
+                opacity: 1;
+            }
+        }
+    }
+
+    .vco-slidenav-previous {
+        &:hover {
+            .vco-slidenav-icon {
+                // margin-left: 0px;
+                margin-left: 100 - 20px;
+                opacity: 1;
+            }
+        }
+
+        &:active {
+            .vco-slidenav-icon {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+/* Mobile and Portrait
+================================================== */
+.vco-layout-portrait.vco-mobile {
+    .vco-slidenav-next,
+    .vco-slidenav-previous {
+        &:hover {
+            .vco-slidenav-icon {
+                opacity: 0.33;
+            }
+        }
+
+        &:active {
+            .vco-slidenav-icon {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+/* Mobile
+================================================== */
+.vco-mobile,
+.vco-skinny.vco-mobile,
+.vco-skinny.vco-layout-landscape.vco-mobile,
+.vco-skinny.vco-layout-portrait.vco-mobile {
+    .vco-slidenav-previous,
+    .vco-slidenav-next {
+        display: none;
+    }
+}
+
+/* Landscape
+================================================== */
+.vco-layout-landscape {
+    .vco-storyslider {
+        .vco-slidenav-next,
+        .vco-slidenav-previous {
+            .vco-slidenav-icon {
+                &::before {
+                    // background-color:$color-background;
+                    background-color: $color-foreground;
+
+                    // .translucent-background($color-background, .85);
+                    // .box-shadow(1px 1px 7px rgba(0,0,0,.30));
+                    padding: 20px;
+                    border: 1px solid color.adjust($color-background, $lightness: -30%);
+                }
+            }
+
+            .vco-slidenav-icon,
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                text-shadow: none;
+            }
+
+            .vco-slidenav-title,
+            .vco-slidenav-description {
+                display: none;
+            }
+        }
+
+        .vco-slidenav-previous {
+            left: -100%;
+            margin-left: 0;
+
+            // z-index:26;
+            .vco-slidenav-icon {
+                &::before {
+                    @include border-right-radius(7px);
+
+                    // the tap-target padding (10px) pushes the black box
+                    // right — pull it flush against the left edge like the
+                    // original design (square left corners)
+                    margin-left: -10px;
+                }
+            }
+
+            &:hover {
+                .vco-slidenav-icon {
+                    margin-left: -4px;
+                }
+            }
+        }
+
+        .vco-slidenav-next {
+            // margin-left:0px;
+            right: 130px;
+
+            .vco-slidenav-icon {
+                &::before {
+                    @include border-left-radius(7px);
+                }
+            }
+        }
+    }
+}

package/src/scss/slider/VCO.StorySlider.scss

@@ -0,0 +1,66 @@
+@use "../core/Mixins" as *;
+
+/* StorySlider
+================================================== */
+
+/* SLIDER CONTAINERS 
+================================================== */
+.vco-storyslider {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    // horizontal drags belong to the slider; vertical panning passes
+    // through to the page (mobile navigation, #288)
+    touch-action: pan-y;
+    user-select: none;
+    position: relative;
+
+    img,
+    embed,
+    object,
+    video,
+    iframe {
+        max-width: 100%;
+        position: relative;
+    }
+
+    .vco-slider-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    .vco-slider-touch-mask {
+        z-index: 25;
+        top: 0;
+        left: 0;
+    }
+
+    .vco-slider-container-mask {
+        text-align: center;
+
+        // overflow: scroll;
+        z-index: 5;
+
+        .vco-slider-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+
+            .vco-slider-item-container {
+                width: 100%;
+                height: 100%;
+                display: table-cell;
+                vertical-align: middle;
+            }
+        }
+    }
+}

package/src/scss/snapmap/VCO.SnapMap.scss

@@ -0,0 +1,103 @@
+@use "sass:color";
+@use "../Variables" as *;
+
+.vco-storymap {
+    h2.vco-headline-title {
+        .vco-snapmap-instagram,
+        .vco-snapmap-flickr {
+            text-align: center;
+            display: block;
+            text-transform: none !important;
+
+            a {
+                color: color.adjust($color-dark, $lightness: 40%);
+            }
+        }
+    }
+
+    .vco-media-instagram-likes {
+        display: inline-block;
+        font-family: $font-main;
+        font-weight: bold;
+        margin-top: 10px;
+        font-size: 12px;
+        color: color.adjust($color-dark, $lightness: 40%);
+
+        /*
+		&:before {
+			content:'\2665';
+			margin-right:3px;
+			font-weight:normal;
+			font-size:14px;
+		}
+		*/
+        &::after {
+            content: "Likes";
+            margin-left: 3px;
+            color: #999;
+            margin-right: 10px;
+        }
+    }
+
+    .vco-snapmap-user-description,
+    .vco-snapmap-user-location {
+        // font-size:12px;
+        // width:50%;
+        display: block;
+    }
+
+    .vco-snapmap-instagram-text {
+        text-align: center;
+        display: none;
+
+        a {
+            color: #000;
+        }
+
+        .vco-snapmap-instagram-posts,
+        .vco-snapmap-instagram-followed-by,
+        .vco-snapmap-instagram-follows,
+        .vco-snapmap-instagram-website,
+        .vco-snapmap-instagram-website a {
+            display: inline-block;
+            font-family: $font-main;
+            font-weight: bold;
+            margin-top: 10px;
+            font-size: 12px;
+            margin-left: 20px;
+
+            &::after {
+                margin-left: 3px;
+                color: #999;
+                font-weight: normal;
+            }
+        }
+
+        .vco-snapmap-instagram-posts::after {
+            content: "Posts";
+        }
+
+        .vco-snapmap-instagram-followed-by::after {
+            content: "Followers";
+        }
+
+        .vco-snapmap-instagram-follows::after {
+            content: "Following";
+        }
+
+        .vco-snapmap-instagram-website,
+        .vco-snapmap-instagram-website a {
+            margin: 0;
+
+            &::after {
+                margin-left: 0;
+            }
+        }
+    }
+
+    .vco-snapmap-flickr-views {
+        &::after {
+            content: "Views";
+        }
+    }
+}

package/src/scss/ui/VCO.Consent.scss

@@ -0,0 +1,121 @@
+@use "../Variables" as *;
+
+/* GDPR consent ask (consent_required option)
+================================================== */
+
+.vco-consent {
+    position: absolute;
+    inset: 0;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 20px;
+    background-color: rgb(255 255 255 / 94%);
+    font-family: $font-sanserif;
+    text-align: center;
+
+    .vco-consent-title {
+        margin: 0;
+        font-weight: bold;
+        color: $color-foreground;
+    }
+
+    .vco-consent-message {
+        margin: 0;
+        color: $color-dark;
+    }
+
+    .vco-consent-buttons {
+        display: flex;
+        gap: 10px;
+        margin-top: 6px;
+
+        button {
+            padding: 8px 18px;
+            border: 1px solid $color-dark;
+            border-radius: 4px;
+            background-color: transparent;
+            color: $color-dark;
+            font-family: $font-sanserif;
+            cursor: pointer;
+
+            &:hover {
+                background-color: $color-dark;
+                color: $color-background;
+            }
+
+            &.vco-consent-allow {
+                background-color: $color-theme;
+                border-color: $color-theme;
+                color: $color-background;
+
+                &:hover {
+                    background-color: $color-theme-dark;
+                    border-color: $color-theme-dark;
+                }
+            }
+        }
+    }
+}
+
+.vco-consent-blocked {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-height: 120px;
+    padding: 20px;
+    background-color: $color-background;
+    color: $color-dark;
+    font-family: $font-sanserif;
+    font-size: $base-font-size;
+    text-align: center;
+}
+
+/* Start-of-story consent: allow all / individually / decline all
+================================================= */
+.vco-consent-start {
+    .vco-consent-services {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        max-width: 420px;
+        width: 100%;
+        margin-top: 6px;
+    }
+
+    .vco-consent-service {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 4px 0;
+        border-bottom: 1px solid rgb(0 0 0 / 10%);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .vco-consent-service-label {
+        color: $color-dark;
+        text-align: left;
+    }
+
+    .vco-consent-buttons {
+        margin-top: 0;
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: default;
+        }
+    }
+
+    .vco-consent-start-actions {
+        margin-top: 12px;
+    }
+}

package/src/scss/ui/VCO.MenuBar.Button.scss

@@ -0,0 +1,107 @@
+@use "sass:color";
+@use "../Variables" as *;
+
+/* MenuBar Button
+================================================== */
+
+.vco-menubar-button {
+    border-left: 1px solid color.adjust($color-background, $lightness: -10%);
+    font-size: 14px;
+    padding: 6px 12px;
+
+    // position:relative;
+    // top:-24px;
+    background-color: fadeout($ui-background-color, 10%);
+    background-color: $color-background;
+    cursor: pointer;
+    font-weight: bold;
+    color: $color-text;
+
+    .vco-icon-arrow-up,
+    .vco-icon-arrow-down {
+        display: inline-block;
+        height: 14px;
+        overflow: hidden;
+        font-size: 20px;
+        position: relative;
+        top: -2px;
+    }
+
+    &:hover {
+        background: $color-theme;
+        color: $color-background;
+    }
+
+    // keyboard focus parity with the hover state
+    &:focus-visible {
+        background: $color-theme;
+        color: $color-background;
+        outline: 2px solid $color-theme;
+        outline-offset: -2px;
+    }
+}
+
+.vco-mobile {
+    .vco-menubar-button {
+        &:hover {
+            background-color: fadeout($ui-background-color, 33%);
+            color: $color-text;
+        }
+
+        &:active {
+            background: $color-theme;
+            color: $color-background;
+        }
+    }
+}
+
+@keyframes invert-to-black {
+    from {
+        background-color: #fff;
+    }
+
+    to {
+        background-color: #000;
+    }
+}
+
+@keyframes invert-to-white {
+    from {
+        background-color: #000;
+    }
+
+    to {
+        background-color: #fff;
+    }
+}
+
+/* Progress indicator (issue #247)
+================================================== */
+.vco-menubar-progress {
+    display: inline-block;
+    width: 80px;
+    height: 6px;
+    margin: 0 12px;
+    vertical-align: middle;
+    background-color: color.adjust($color-background, $lightness: -10%);
+    border-radius: 3px;
+    overflow: hidden;
+
+    .vco-menubar-progress-fill {
+        display: block;
+        height: 100%;
+        width: 0;
+        background-color: $color-theme;
+        border-radius: 3px;
+    }
+}
+
+/* Route distance display (issue #341)
+================================================== */
+.vco-menubar-distance {
+    display: inline-block;
+    margin: 0 12px;
+    vertical-align: middle;
+    font-size: $base-font-size-small;
+    color: $color-dark;
+}