vuepress-playground/lib/style.css

vuepress demo box

.vuepress-playground-code-box{height:0;padding:0!important;overflow:hidden;background-color:#282c34;border-radius:0!important;transition:height .5s}.vuepress-playground-code-box pre{margin:0!important}.vuepress-playground-wrapper{border:1px solid #ebebeb;border-radius:4px;transition:all .2s;margin-top:10px}.vuepress-playground-wrapper:hover{box-shadow:0 0 11px rgba(33,33,33,.2)}.vuepress-playground-wrapper .vuepress-playground-display-box{padding:20px;border-bottom:1px solid #ebebeb}.vuepress-playground-wrapper .vuepress-playground-control-box{text-align:center;padding:10px 0;position:relative}.vuepress-playground-wrapper .vuepress-playground-control-box form:nth-last-child(2){right:80px}.vuepress-playground-wrapper .vuepress-playground-control-box form:last-child{right:10px}.vuepress-playground-wrapper .vuepress-playground-control-box .vuepress-playground-codepen,.vuepress-playground-wrapper .vuepress-playground-control-box .vuepress-playground-jsfiddle{position:absolute;top:10px;opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px);transition:all .5s}.vuepress-playground-wrapper .vuepress-playground-control-box .vuepress-playground-expand-btn{position:relative;-webkit-transform:translateX(24px);transform:translateX(24px);transition:all .5s}.vuepress-playground-wrapper .vuepress-playground-control-box .vuepress-playground-expand-btn:before{content:"";position:absolute;left:-10px;top:9px;width:0;height:0;border-top:6px solid #ccc;border-left:6px solid transparent;border-right:6px solid transparent}.vuepress-playground-wrapper .vuepress-playground-control-box .vuepress-playground-expand-btn span{opacity:0;transition:all .5s}.vuepress-playground-wrapper .vuepress-playground-control-box .vuepress-playground-btn-text{border-color:transparent;background-color:transparent;font-size:14px;color:#3eaf7c;cursor:pointer;outline:none;margin:0}.vuepress-playground-wrapper .vuepress-playground-control-box:hover .vuepress-playground-codepen,.vuepress-playground-wrapper .vuepress-playground-control-box:hover .vuepress-playground-expand-btn,.vuepress-playground-wrapper .vuepress-playground-control-box:hover .vuepress-playground-expand-btn span,.vuepress-playground-wrapper .vuepress-playground-control-box:hover .vuepress-playground-jsfiddle{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.vuepress-playground-wrapper .vuepress-playground-control-box:hover .vuepress-playground-expand-btn:before{border-top-color:#3eaf7c;border-bottom-color:#3eaf7c}.vuepress-playground-wrapper .vuepress-playground-control-box.vuepress-playground-control-box-show-link .vuepress-playground-codepen,.vuepress-playground-wrapper .vuepress-playground-control-box.vuepress-playground-control-box-show-link .vuepress-playground-jsfiddle{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.vuepress-playground-wrapper .vuepress-playground-control-box.vuepress-playground-control-box-show-link .vuepress-playground-expand-btn:before{border-bottom:6px solid #ccc;border-left:6px solid transparent;border-right:6px solid transparent;border-top:none}