koduck.scss

* {
    margin: 0; 
    padding: 0;
}

#spare_parts {
    visibility: hidden;
}

html, body, input {
    font-size: 11pt;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.container {
    border: 1px solid rgba(0,0,0,.3);
    position: absolute;
    left: .5em;
    right: .5em;
    top: 2.5em;
    bottom: 5em;
    overflow: scroll;
}

#heading {
    font-size: 1.25em;
    margin-left: .5em;
    line-height: 2em;
    color: rgba(0,0,0,.8);
    text-align: center;

    a {
        text-decoration: none;
        color: #11c;
        &:hover {
            text-decoration: underline;
        }
    }
}

#save_image_button {
    position: absolute;
    bottom: .5em;
    left: 50%;
    height: 4em;
    width: 45%;
    padding: 0 1em;
    border: none;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    font-size: 100%;
    font-weight: normal;
    letter-spacing: .1em;
    box-sizing: border-box;
    background: rgba(0,200,0,.5);
    color: #fff;
    text-shadow: rgba(0,0,0,.3) 0 .1em .5em, #000 0 .1em .5em;
    cursor: pointer;
    outline : none;
    em {
        font-style: normal;
        font-weight: 800;
    }

    .alt { display: none; }
    .default { display: inline-block; }
    .mobile { display: none; }

    &.shift {
        .alt { display: inline-block; }
        .default { display: none; }
    }

}

ul.images {
    position: relative;
    list-style: none;
    display: inline-block;
    max-width: 100%;

    > li {
        list-style: none;
        display: inline-block;
        width: 17em;
        height: 21em;
        vertical-align: top;
    }
    li#credit {
        display: none;
    }
    li#add_image {
        background: rgba(0,0,0,.3);
        position:relative;
        #add_image_button {
            padding: 1em;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -transform: translate(-50%, -50%);

            outline: none;
            cursor: pointer;
            font-size: 2em;
            color: #fff;
            border: none;
            background: transparent;
        }
    }
    li.images_item {
        position: relative; 

        .background {
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }

        .caption_area {
            position: absolute;
            top: 57%;
            left: 2.5%;
            right: 2.5%;
            width: auto;
            box-sizing: border-box;
            vertical-align: top;
            * { vertical-align: middle }
        }

        .text_box {

            display: none;
        }

        .display_caption {
            text-align: center;
            overflow: hidden;
        }
        a.caption {
            text-decoration: none;
            color: #466b6e;
            font-weight: lighter;
            font-size: 1.3em;
            line-height: 1.7em;
            letter-spacing: 0em;
            padding-left: .8em;
            white-space: nowrap;
            max-width: 85%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block; 
            cursor: text;
        }
        img.pencil {
            height: 1em;
        }
    }
    li.images_item.editing {
        .display_caption { display: none; }
        .text_box {
            color: #466b6e;
            text-align: center;
            display: inline-block;
            border: 1px dashed rgba(0, 0, 0, 0.3);
            background: transparent;
            font-size: 110%;
            outline: none;
            box-sizing: border-box;
            position: absolute;
            left: 5%;
            width: 90%;

        }
    }

    .image_change_button, .delete_button {
        text-shadow: rgba(0,0,0,.3) 0 .1em .5em, #000 0 .1em .5em;
        position: absolute;
        color: #fff;
        &:active {
            color: #466b6e;
        }
        background: transparent;
        font-size: 1.2em;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .image_change_button {
        top: 31%;
        padding: 3% 5%;
   
        &.image_prev_button { left: 17%; }
        &.image_next_button { left: 64%; }
    }

    .delete_button {
        top: 2%;
        left: 5%;
    }
}

ul.images.saving {
    border: none;
    
    .delete_button, .image_change_button, #add_image
    { 
        display: none !important; 
        visibility: hidden !important; 
    }
    li.images_item {
        a.caption {
            font-size: 1.2em;
            line-height: 1.6em;
        }
    }
    li#credit {
        display: inline-block;
        position: absolute;
        bottom: .2em;
        left: .6em;
        color: #fff;
        width: auto;
        height: auto;
        font-size: .4em;
        font-weight: 600;
        letter-spacing: .08em;
        /* outer shadow */
        color: rgba(0,0,0,.7);
        text-shadow: #fff 0 0 1em, #fff 0 0 .5em;
    }
}



#loading {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
    }
}


@media only screen and (max-device-width : 736px) {  
#heading {
    position: fixed;
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    background: rgba(0, 180, 180, 0.3);
    z-index: 999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.container {
    position: relative;
    left: 0;
    margin: 0;
    text-align: center;
}

ul.images {
    width: 17em;
}

#save_image_button {
    position: relative;
    bottom: inherit;
    left: 0;
    height: 4em;
    width: 100%;
    outline: none;
    margin-top: 2.5em;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;

    .alt { display: none; }
    .default { display: none; }
    .mobile { display: inline-block; }
}

ul.images.saving {
    li#credit {
        font-size: .6em;
    }
}



} /* end media query */