/* ----

# Pio Plugin
# By: Dreamer-Paul
# Last Update: 2019.8.8

一个支持更换 Live2D 模型的 Typecho 插件。

本代码为奇趣保罗原创，并遵守 GPL 2.0 开源协议。欢迎访问我的博客：https://paugram.com

---- */

.pio-container{
    bottom: 0;
    z-index: 52;
    color: #666;
    position: fixed;
    user-select: none;
}
.pio-container.left{ left: 0 }
.pio-container.right{ right: 0 }
.pio-container.top{ top: 0 }
.pio-container.active{ cursor: move }
.pio-container.static{ pointer-events: none }

.pio-container .pio-action{
    top: 3em;
    opacity: 0;
    position: absolute;
    transition: opacity .3s;
}
.pio-container.left .pio-action{ right: 0 }
.pio-container.right .pio-action{ left: 0 }
.pio-container:hover .pio-action{ opacity: 1 }

.pio-action span{
    color: #515151;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 24px;
    display: block;
    cursor: pointer;
    text-align: center;
    border-radius: 66%;
    margin-bottom: .5em;
    border: 1px solid #515151;
    background: #fff center/70% no-repeat;
}
/*
.pio-action span{
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    display: block;
    cursor: pointer;
    text-align: center;
    border-radius: 66%;
    margin-bottom: .5em;
    border: 1px solid #666;
    background: #fff center/70% no-repeat;
}
*/
.pio-container .pio-dialog{
    top: -2em;
    left: 1em;
    right: 1em;
    opacity: 0;
    z-index: -1;
    font-size: .8em;
    background: #fff;
    padding: .75em 1em;
    border-radius: 1em;
    visibility: hidden;
    position: absolute;
    word-break: break-all;
    border: 1px solid #eee;
    transition: opacity .3s, visibility .3s;
}
.pio-container .pio-dialog.active{
    opacity: 1;
    visibility: visible;
}

#pio{ vertical-align: middle }

@media screen and (max-width: 768px){
    #pio{ display: none; }
    .pio-container{ pointer-events: none }
    .pio-container.hidden, .pio-action, .pio-dialog{ display: none }
    .pio-action{ display: none }
}