plumes
Version:
Flying-fast Metro future vision components
1 lines • 5.86 kB
CSS
.pl-layout-platform{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.pl-layout-platform .pl-layout-platform-header{z-index:1000;position:fixed;top:-5rem;left:50%;color:#333;margin-left:-8rem;-webkit-transition:all .35s cubic-bezier(.165,.84,.44,1);-moz-transition:all .35s cubic-bezier(.165,.84,.44,1);-ms-transition:all .35s cubic-bezier(.165,.84,.44,1);-o-transition:all .35s cubic-bezier(.165,.84,.44,1);transition:all .35s cubic-bezier(.165,.84,.44,1)}.pl-layout-platform .pl-layout-platform-header.empty{opacity:0}.pl-layout-platform .pl-layout-platform-header.show{top:1rem}.pl-layout-platform .pl-layout-platform-header .pl-layout-platform-title-bg{position:absolute;top:-1rem;left:50%;width:0;height:0;background:#333;-webkit-transition:width .15s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);-moz-transition:width .15s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);-ms-transition:width .15s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);-o-transition:width .15s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);transition:width .15s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1)}.pl-layout-platform .pl-layout-platform-header .pl-layout-platform-title-bg.opened{-webkit-transition:width .25s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);-moz-transition:width .25s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);-ms-transition:width .25s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);-o-transition:width .25s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1);transition:width .25s cubic-bezier(.165,.84,.44,1),margin-left .35s cubic-bezier(.165,.84,.44,1),opacity .35s cubic-bezier(.165,.84,.44,1)}.pl-layout-platform .pl-layout-platform-header .pl-layout-title{cursor:default;display:block}.pl-layout-platform .pl-layout-platform-header .pl-layout-title.opened{color:#fff}.pl-layout-platform .pl-layout-platform-header .pl-layout-title.opened h2{text-shadow:none;color:#fff}.pl-layout-platform .pl-layout-platform-header .pl-layout-title h2{text-shadow:1px 0 1px #fff;color:rgba(0,0,0,.75)}.pl-layout-platform .pl-layout-platform-context-left,.pl-layout-platform .pl-layout-platform-context-right{z-index:1;position:fixed;top:0;width:0;bottom:0;overflow:hidden}.pl-layout-platform .pl-layout-platform-context-left .pl-context-panel-require,.pl-layout-platform .pl-layout-platform-context-right .pl-context-panel-require{position:absolute;top:0;left:0;right:0;bottom:0}.pl-layout-platform .pl-layout-platform-context-left .pl-context-panel-require .pl-context-panel.use-title .pl-context-panel-content,.pl-layout-platform .pl-layout-platform-context-right .pl-context-panel-require .pl-context-panel.use-title .pl-context-panel-content{top:11rem}.pl-layout-platform .pl-layout-platform-context-left .pl-context-panel-require .pl-context-panel-title,.pl-layout-platform .pl-layout-platform-context-right .pl-context-panel-require .pl-context-panel-title{padding-top:5rem}.pl-layout-platform .pl-layout-platform-context-left .pl-context-panel-require .pl-context-panel-title::after,.pl-layout-platform .pl-layout-platform-context-left .pl-context-panel-require .pl-context-panel-title::before,.pl-layout-platform .pl-layout-platform-context-right .pl-context-panel-require .pl-context-panel-title::after,.pl-layout-platform .pl-layout-platform-context-right .pl-context-panel-require .pl-context-panel-title::before{top:8rem}.pl-layout-platform .pl-layout-platform-context-left .pl-context-panel-require .pl-context-panel-title-cross,.pl-layout-platform .pl-layout-platform-context-right .pl-context-panel-require .pl-context-panel-title-cross{top:6rem}.pl-layout-platform .pl-layout-platform-context-left{left:0}.pl-layout-platform .pl-layout-platform-context-right{right:0}.pl-layout-platform .pl-layout-platform-flyout-left,.pl-layout-platform .pl-layout-platform-flyout-right{z-index:1001;cursor:default;position:fixed;top:1rem;height:4rem}.pl-layout-platform .pl-layout-platform-flyout-left rv-require,.pl-layout-platform .pl-layout-platform-flyout-right rv-require{height:100%}.pl-layout-platform .pl-layout-platform-flyout-left{left:1.5rem}.pl-layout-platform .pl-layout-platform-flyout-right{right:2rem}.pl-layout-platform .pl-layout-platform-content-template{z-index:-1;position:fixed;top:0;bottom:0;left:0;right:0}.pl-layout-platform .pl-layout-platform-content{position:fixed;top:0;bottom:0;left:0;right:0;background:#fff;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-transition:left .25s cubic-bezier(.165,.84,.44,1),right .25s cubic-bezier(.165,.84,.44,1);-moz-transition:left .25s cubic-bezier(.165,.84,.44,1),right .25s cubic-bezier(.165,.84,.44,1);-ms-transition:left .25s cubic-bezier(.165,.84,.44,1),right .25s cubic-bezier(.165,.84,.44,1);-o-transition:left .25s cubic-bezier(.165,.84,.44,1),right .25s cubic-bezier(.165,.84,.44,1);transition:left .25s cubic-bezier(.165,.84,.44,1),right .25s cubic-bezier(.165,.84,.44,1)}.pl-layout-platform .pl-layout-mask{cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99999;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff}