openhistoricalmap-inspector.scss

$slideshow-slide-size: 290px;


div.openhistoricalmap-inspector-panel {
    /* padding to match edges */
    padding: 0 1em;

    /* general font size and paragraph settings */
    font-size: 13px;
    line-height: 1.25;

    .openhistoricalmap-inspector-panel-paragraph {
        margin-bottom: 1em;
        &.openhistoricalmap-inspector-panel-paragraph-nomargin {
            margin-bottom: 0.5em;
        }
    }

    a {
    }

    .openhistoricalmap-inspector-panel-small {
        font-size: 80%;
    }
    .openhistoricalmap-inspector-panel-strong {
        font-weight: bold;
    }

    /* the images form a slideshow and have a lightbox behavior */
    .openhistoricalmap-inspector-panel-slideshow {
        position: relative;

        width: $slideshow-slide-size;
        min-height: $slideshow-slide-size;
        overflow: hidden;

        margin-bottom: 1em;

        a.openhistoricalmap-inspector-panel-slideshow-prevnext {
            position: absolute;
            top: 145px;
            z-index: 1000;

            display: inline-block;  /* the link itself: white circle, fixed size, positioned */
            width: 40px;
            height: 40px;
            background-color: rgba(255,255,255,0.6) !important;
            border-radius: 50%;

            span {  /* the arrow images: span with background image */
                display: inline-block;
                width: 100%;
                height: 100%;
                background-size: 20px auto !important;
                background-repeat: no-repeat;
            }

            &.openhistoricalmap-inspector-panel-slideshow-prev {
                left: 5px;  /* the white circle A button */

                span {  /* the empty span with a background-image */
                    background-image: url(./etc/Octicons-chevron-left.svg);
                    position: relative;
                    left: 8px;
                    top: -2px;
                }
            }
            &.openhistoricalmap-inspector-panel-slideshow-next {
                right: 5px;  /* the white circle A button */

                span {  /* the empty span with a background-image */
                    background-image: url(./etc/Octicons-chevron-right.svg);
                    position: relative;
                    left: 12px;
                    top: -2px;
                }
            }

            &.openhistoricalmap-inspector-panel-slideshow-hidden {
                display: none;
            }
        }

        div.openhistoricalmap-inspector-panel-slideshow-slide {
            height: 100%;
            display: block;

            &.openhistoricalmap-inspector-panel-slideshow-hidden {
                display: none;
            }

            img {
                width: $slideshow-slide-size;
                height: $slideshow-slide-size;
                object-fit: cover;

                cursor: pointer;
            }

            span.openhistoricalmap-inspector-panel-slideshow-caption {
                display: block;
                text-align: left;
                font-style: italic;
            }
        }
    }

    /* moreinfo is a paragraph, with a list of links and a dead simple left-right grid */
    .openhistoricalmap-inspector-panel-moreinfo {
        display: flex;
        > span { flex: 1; }
        ul { flex: 3; }
    }

    /* at the end */
    hr:last-child {
        margin-top: 1em;
    }
}