.ejs_parent { background: #000; overflow: hidden; --ejs-primary-color: 26,175,255; position: relative; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-weight: 500; line-height: 1.7; width: 100%; height: 100%; } .ejs_game {/* todo. User selectable background loading image */ width: 100%; height: 100%; background-color: rgb(51, 51, 51); cursor: default; } .ejs_start_button { position: absolute; bottom: 65px; left: 50%; transform: translateX(-50%); cursor: pointer; box-sizing: inherit; display: flex; justify-content: center; text-shadow: 0 1px 1px rgba(0,0,0,0.5); font-size: 20px; line-height: 45px; text-transform: uppercase; font-weight: bolder; position: relative; text-decoration: none; width: 200px; height: 45px; border: 0; color: #fff !important; border-radius: 35px; text-align: center; background-color: rgba(var(--ejs-primary-color),1); } .ejs_start_button:active { box-shadow: 0 0 0 0 #222, 0 3px 7px 0 #111, inset 0 1px 1px 0 rgba(250,250,250,0.2), inset 0 -10px 35px 5px rgba(0,0,0,0.5); bottom: 64px; } .ejs_loading_text { position: absolute; bottom: 20px; font-weight: 500; left: 50%; transform: translateX(-50%); box-sizing: inherit; font-size: 12px; color: #bcbcbc; } .ejs_canvas { width: 100%; height: 100%; } .ejs_context_menu { position: absolute; display: none; z-index: 9; background: rgba(16,16,16,0.9); border-radius: 3px; font-size: 13px; min-width: 140px; padding: 8px; box-sizing: inherit; } .ejs_context_menu li { padding: 4px 11px; text-align: center; } .ejs_context_menu li a { color: #999; display: block; font-size: 13px; } .ejs_context_menu ul { color: #999; display: block; font-size: 13px; list-style: none; margin: 0; padding: 0; } .ejs_context_menu li:hover { background: rgba(var(--ejs-primary-color),1); border-radius: 4px; box-shadow: 0 0 0 5px rgba(var(--ejs-primary-color),0.5); outline: 0; } .ejs_menu_bar { padding: 15px 10px 10px; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; bottom: 0; color: #fff; left: 0; position: absolute; right: 0; transition: opacity .4s ease-in-out,transform .4s ease-in-out; z-index: 3; align-items: center; display: flex; justify-content: flex-start; text-align: center; } .ejs_menu_bar svg { display: block; fill: currentColor; height: 18px; pointer-events: none; width: 18px; } .ejs_menu_bar_hidden { opacity: 0; pointer-events: none; transform: translateY(100%); } .ejs_menu_button { margin-right: 2px; touch-action: manipulation; background: transparent; border: 0; border-radius: 3px; color: inherit; cursor: pointer; flex-shrink: 0; overflow: visible; padding: 7px; position: relative; transition: all .3s ease; } .ejs_menu_button:hover { background: rgba(var(--ejs-primary-color),1); color: #fff; } .ejs_menu_button:hover .ejs_menu_text { transform: translate(0,0) scale(1); opacity: 1; } .ejs_menu_text { left: 0; background: rgba(255,255,255,0.9); border-radius: 3px; bottom: 100%; box-shadow: 0 1px 2px rgba(0,0,0,0.15); color: #4f5b5f; font-size: 14px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; opacity: 0; padding: 5px 7.5px; pointer-events: none; position: absolute; transform: translate(0,10px) scale(0.8); transform-origin: 0 100%; transition: transform .2s .1s ease,opacity .2s .1s ease; white-space: nowrap; z-index: 2; } .ejs_menu_text::before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(255,255,255,0.9); bottom: -4px; content: ''; height: 0; left: 16px; position: absolute; transform: translateX(-50%); width: 0; z-index: 2; }