elation-engine/css/engine.css

WebGL/WebVR engine written in Javascript

engine-systems-render-view {
  display: block;
  position: relative;
}
.engine_view_fullsize {
  position: fixed;
  overflow: hidden;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.engine_view.vr_presenting {
  margin: 0 auto;
  overflow: hidden;
  width: 50%;
  transform: scaleX(2);
}
.engine_view.vr_presenting canvas {
  width: 200% !important;
  height: 100% !important;
  object-fit: cover;
}
.engine_view.state_cursor {
  cursor: pointer;
}
.engine_view_crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAbrwAAG68BXhqRHAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANnSURBVGiB7ZrNbhMxEMd/3qS0TQWJ4AUQZ0SFBDeQOPAKvAZ3jkhIXHgDEE+DKoT4UA9wae+cKm1AkJImaw6eyTrJfnizblNQ/pKV1cad8czYM39PY6y1xIQxxhS9t7EVqb5YcmXhBkjk04cFMpwdUQ1JYggxxiTAQ+A9cAaMvXEAPAKuAB2ZGw/W2lYD5+0u8AHn6aLxGbgO9GSuaatXRwxvqAH3AdI0nQlP01Tn3AX6wI4aEEEv0HILyb5PcIsCoN/vU/QMXAV2ZW5SdtibIlYEOgHzesg54LJEwEPIgraIvHiIF4GQRSXkKfbSRSAEUT2vuEgDzgUbA9aNjQHrRnQDhsNh4TOOE0VHd/FFwxLvzz0E9geDQdG8I3Jit5KqMho+i4BxSHDVsitjq2boPAO8BL4V6DgG3gATMcDQXH7HGFPIn4y1Vvn8A+AVwiob4BPwXBY/wLHOPVkAuPvBL+Am8BTYbyj/I/AMeIdzQmatzWYGkJOxgxUWrzgEnuDI2g6wTU7wpsAf4C1wZ0X5X4DHwCnukjS13mUkEcUjcHx+gQaXYjgc4u352yI8o/hKedxS/i1gCPwGxhoF3Y87wE+AkrNSCm9b3gNS3HYZkx9Yg3PQ95by94ETMeIUiYIewBA+X4dtkTUWBRN5v5TpVkQP5+Q5Sq5ZaPZiIXdXYmGuCra4xU9laPZpK79LwX3C905VHq/DUcCcc5GvEbDAC+DrCsI1z0+Zz/Md8ppSVSdC5L8mj+rcIfIPcR+4IWMPd/CWtphAhWTU5/mqOhEifyzyTyg4xH4a7Ynwa7jugSooq/dKDSbU5/miOqGRqZKvDhoBPyhJo5qFVPguefegjuz5zaulPF9TJ0Luxhlu24zFiOVC5lEJ7e/4pz2EbVXm+YA6UQV1jmazJSrRFaWZMUZDNvEWHmJAaJ4vqxN1BuhnYXN4ply+sGJIKNTAkL/RPa/nZq4+1KGMTi95r0n7u2F3cHFLRmm1b/pC68bGgHVjY8C68f/1hVaAlvu6vlAmY7E/1AqxIlB1n9D7whkFfL4tWv2jWxpNHcrvE1DD51dWLmi1hay11hijBHCEu3QbeVbZ/ncjckYZJRKxzsAE51VwHtf7BCzz+UYkrg5RfitRcZ+AGj7fWve//mOPaAbMBF7wz23+ArJn7VcYWZetAAAAAElFTkSuQmCC') no-repeat;
  width: 48px;
  height: 48px;
  opacity: .4;
  transform: translate(-24px, -24px);
  z-index: 50;
  pointer-events: none;
}
.state_cursor .engine_view_crosshair {
}
.engine_view_rendermode_oculus .engine_view_crosshair {
  position: absolute;
  top: 50%;
  background-position: 27%;
  width: 100%;
  left: 0;
}
.engine_view_rendermode_oculus .engine_view_crosshair::after {
  content: ' ';
  position: absolute;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAbrwAAG68BXhqRHAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANnSURBVGiB7ZrNbhMxEMd/3qS0TQWJ4AUQZ0SFBDeQOPAKvAZ3jkhIXHgDEE+DKoT4UA9wae+cKm1AkJImaw6eyTrJfnizblNQ/pKV1cad8czYM39PY6y1xIQxxhS9t7EVqb5YcmXhBkjk04cFMpwdUQ1JYggxxiTAQ+A9cAaMvXEAPAKuAB2ZGw/W2lYD5+0u8AHn6aLxGbgO9GSuaatXRwxvqAH3AdI0nQlP01Tn3AX6wI4aEEEv0HILyb5PcIsCoN/vU/QMXAV2ZW5SdtibIlYEOgHzesg54LJEwEPIgraIvHiIF4GQRSXkKfbSRSAEUT2vuEgDzgUbA9aNjQHrRnQDhsNh4TOOE0VHd/FFwxLvzz0E9geDQdG8I3Jit5KqMho+i4BxSHDVsitjq2boPAO8BL4V6DgG3gATMcDQXH7HGFPIn4y1Vvn8A+AVwiob4BPwXBY/wLHOPVkAuPvBL+Am8BTYbyj/I/AMeIdzQmatzWYGkJOxgxUWrzgEnuDI2g6wTU7wpsAf4C1wZ0X5X4DHwCnukjS13mUkEcUjcHx+gQaXYjgc4u352yI8o/hKedxS/i1gCPwGxhoF3Y87wE+AkrNSCm9b3gNS3HYZkx9Yg3PQ95by94ETMeIUiYIewBA+X4dtkTUWBRN5v5TpVkQP5+Q5Sq5ZaPZiIXdXYmGuCra4xU9laPZpK79LwX3C905VHq/DUcCcc5GvEbDAC+DrCsI1z0+Zz/Md8ppSVSdC5L8mj+rcIfIPcR+4IWMPd/CWtphAhWTU5/mqOhEifyzyTyg4xH4a7Ynwa7jugSooq/dKDSbU5/miOqGRqZKvDhoBPyhJo5qFVPguefegjuz5zaulPF9TJ0Luxhlu24zFiOVC5lEJ7e/4pz2EbVXm+YA6UQV1jmazJSrRFaWZMUZDNvEWHmJAaJ4vqxN1BuhnYXN4ply+sGJIKNTAkL/RPa/nZq4+1KGMTi95r0n7u2F3cHFLRmm1b/pC68bGgHVjY8C68f/1hVaAlvu6vlAmY7E/1AqxIlB1n9D7whkFfL4tWv2jWxpNHcrvE1DD51dWLmi1hay11hijBHCEu3QbeVbZ/ncjckYZJRKxzsAE51VwHtf7BCzz+UYkrg5RfitRcZ+AGj7fWve//mOPaAbMBF7wz23+ArJn7VcYWZetAAAAAElFTkSuQmCC') no-repeat;
  background-position: 73%;
  display: block;
  width: 100%;
  height: 48px;
  transform: translate(-24px, -24px);
  top: 50%;
}
.ui_window .ui_window_content.engine_configuration {
  width: 60em;
  padding: 1em 3em;
}
.engine_configuration .ui_tabs>ul>li {
  border: 0px solid black;
  border-radius: 0;
  background: black;
  padding: .3em;
  width: 25%;
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  text-transform: uppercase;
  box-sizing: border-box;
}
.engine_configuration .ui_tabs>ul>li.state_selected {
  background: white;
  color: black;
}
.engine_configuration label {
  width: 10em;
  display: inline-block;
}
.engine_view.cursor_default,
engine-systems-render-view.cursor_default {
  cursor: default;
}
.engine_view.cursor_pointer,
engine-systems-render-view.cursor_pointer {
  cursor: pointer;
}
.engine_view.cursor_crosshair,
engine-systems-render-view.cursor_crosshair {
  cursor: crosshair;
}