#panel { -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0.8, 0, 1); -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0.8, 0, 1); -o-transition: -o-transform 0.4s cubic-bezier(0, 0.8, 0, 1); -ms-transition: -ms-transform 0.4s cubic-bezier(0, 0.8, 0, 1); transition: transform 0.4s cubic-bezier(0, 0.8, 0, 1); background: #282828; } .autoplace-true #panel { width: 245px; position: fixed; top: 0; } .autoplace-true.touch-true #panel { width: 320px; } .docked-false #panel { right: 20px; } .docked-true #panel { right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .docked-true.open-false #panel { -webkit-transform: translate3d(245px, 0, 0); -moz-transform: translate3d(245px, 0, 0); -o-transform: translate3d(245px, 0, 0); -ms-transform: translate3d(245px, 0, 0); transform: translate3d(245px, 0, 0); overflow: visible; } .docked-true.open-false.touch-true #panel { -webkit-transform: translate3d(320px, 0, 0); -moz-transform: translate3d(320px, 0, 0); -o-transform: translate3d(320px, 0, 0); -ms-transform: translate3d(320px, 0, 0); transform: translate3d(320px, 0, 0); } #controllers { font: 10px 'Lucida Grande', sans-serif; color: #ecebe0; } .touch-true #controllers { font-size: 13.5px; } .docked-true #controllers { position: absolute; width: 100%; } #closeButton { font: 10px 'Lucida Grande', sans-serif; color: #ecebe0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; text-align: center; padding: 6.75px 9px; } .touch-true #closeButton { font-size: 13.5px; } #dockedContent:not(:empty) { position: fixed; top: 0; left: 0; bottom: 0; right: 245px; } .open-false #dockedContent:not(:empty) { right: 0; } gui-button { font: 10px 'Lucida Grande', sans-serif; color: #ecebe0; background: #282828; height: 3em; position: absolute; -webkit-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); -moz-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); -o-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); -ms-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); } .touch-true gui-button { font-size: 13.5px; } .docked-true gui-button { top: 0; right: 0; width: 4.5em; height: 4.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #282828; } .docked-true.open-false gui-button { -webkit-transform: translate3d(-245px, 0, 0); -moz-transform: translate3d(-245px, 0, 0); -o-transform: translate3d(-245px, 0, 0); -ms-transform: translate3d(-245px, 0, 0); transform: translate3d(-245px, 0, 0); } .docked-true.open-false.touch-true gui-button { -webkit-transform: translate3d(-320px, 0, 0); -moz-transform: translate3d(-320px, 0, 0); -o-transform: translate3d(-320px, 0, 0); -ms-transform: translate3d(-320px, 0, 0); transform: translate3d(-320px, 0, 0); } .docked-false gui-button { right: 0; left: 0; }