x_ite 5.0.3 → 6.1.0

package/src/x_ite.css

@@ -1,71 +1,73 @@
 /* X_ITE CSS StyleSheet */
 
+/* Do not include this file directly! This is not needed anymore. */
+
 @charset "utf-8";
 
-@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);
-@import url(spinner.css);
+@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic");
 
+:host,
 X3DCanvas {
-  overflow: hidden;
-  position: relative;
   display: inline-block;
+  overflow: hidden;
   outline: none;
   margin: 0;
-  padding: 0;
   border: 0;
   border-radius: 0;
+  padding: 0;
   width: 300px;
   height: 150px;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-X3DCanvas.x_ite-fullscreen {
+:host([hidden]) {
+  display: none;
+}
+
+:host(.x_ite-fullscreen) {
   width: 100vw !important;
   height: 100vh !important;
 }
 
-X3DCanvas > *:not(.x_ite-fallback) {
+X3DCanvas > :not(.x_ite-private-browser, .x_ite-private-menu) {
   display: none;
 }
 
-.x_ite-console {
-  font-family: monospace;
-  white-space: pre;
-}
-
-X3DCanvas .x_ite-private-browser {
-  z-index: 0;
-  display: block;
-  position: absolute;
-  inset: 0;
+.x_ite-private-browser {
+  overflow: hidden;
+  position: relative;
   margin: 0;
-  padding: 0;
   border: 0;
   border-radius: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-X3DCanvas .x_ite-private-surface {
+.x_ite-private-surface {
+  position: absolute; /* Must be absolute to get ResizeSensor work. */
   margin: 0;
-  padding: 0;
   border: 0;
   border-radius: 0;
-  height: 100%;
-  margin-right: 0;
+  padding: 0;
+  inset: 0;
 }
 
-X3DCanvas canvas.x_ite-private-canvas {
+.x_ite-private-canvas {
   display: block;
   outline: none;
   margin: 0;
-  padding: 0;
   border: 0;
   border-radius: 0;
+  padding: 0;
   width: 100%;
   height: 100%;
 }
 
-X3DCanvas .x_ite-private-notification {
-  display: none;
-  padding: 5px;
+.x_ite-private-notification {
   position: absolute;
   top: 20px;
   right: -4px;
@@ -75,10 +77,11 @@ X3DCanvas .x_ite-private-notification {
   background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  border: 4px solid rgba(60,60,60,0.61803);
-  border-radius: 5px;
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+  border: 4px solid rgba(60,60,60,0.61803);
+  border-radius: 5px;
+  padding: 5px;
   color: white;
   font-family: PT Sans, sans-serif;
   font-size: 10pt;
@@ -88,28 +91,27 @@ X3DCanvas .x_ite-private-notification {
   pointer-events: none;
 }
 
-X3DCanvas .x_ite-private-notification span {
+.x_ite-private-notification span {
   padding: 0 24px 0 20px;
-  background: url(assets/images/icon.bw.png) no-repeat 0 2px;
+  background: url("assets/images/icon.bw.png") no-repeat 0 2px;
 }
 
-X3DCanvas .x_ite-private-browser-timings {
-  display: none;
+.x_ite-private-browser-timings {
   position: absolute;
   bottom: -4px;
   left: -4px;
-  padding: 10px 15px 14px 14px;
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   background: rgba(0,0,0,0.61803);
   background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  -webkit-background-clip: padding-box; /* for Safari */
+  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   border-top: 4px solid rgba(60,60,60,0.61803);
   border-right: 4px solid rgba(60,60,60,0.61803);
   border-radius: 5px;
-  -webkit-background-clip: padding-box; /* for Safari */
-  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+  padding: 10px 15px 14px 14px;
   color: white;
   font-family: PT Sans, sans-serif;
   font-size: 9pt;
@@ -117,13 +119,13 @@ X3DCanvas .x_ite-private-browser-timings {
   pointer-events: none;
 }
 
-X3DCanvas .x_ite-private-browser-timings table,
-X3DCanvas .x_ite-private-browser-timings thead,
-X3DCanvas .x_ite-private-browser-timings tbody,
-X3DCanvas .x_ite-private-browser-timings tfoot,
-X3DCanvas .x_ite-private-browser-timings tr,
-X3DCanvas .x_ite-private-browser-timings th,
-X3DCanvas .x_ite-private-browser-timings td {
+.x_ite-private-browser-timings table,
+.x_ite-private-browser-timings thead,
+.x_ite-private-browser-timings tbody,
+.x_ite-private-browser-timings tfoot,
+.x_ite-private-browser-timings tr,
+.x_ite-private-browser-timings th,
+.x_ite-private-browser-timings td {
   box-sizing: border-box;
   outline: 0;
   margin: 0;
@@ -140,9 +142,9 @@ X3DCanvas .x_ite-private-browser-timings td {
   text-align: left;
 }
 
-X3DCanvas .x_ite-private-browser-timings table {
+.x_ite-private-browser-timings table {
   overflow: hidden;
-  background: url(assets/images/Time.png) no-repeat;
+  background: url("assets/images/Time.png") no-repeat;
   width: 100%;
   max-width: 100%;
   border-collapse: separate;
@@ -150,33 +152,33 @@ X3DCanvas .x_ite-private-browser-timings table {
   empty-cells: show;
 }
 
-X3DCanvas .x_ite-private-browser-timings thead th {
+.x_ite-private-browser-timings thead th {
   padding-left: 20px;
   padding-bottom: 5px;
   font-weight: bold;
 }
 
-X3DCanvas .x_ite-private-browser-timings td:first-child {
+.x_ite-private-browser-timings td:first-child {
   padding-right: 10px;
 }
 
-X3DCanvas .x_ite-private-browser-timings tr.x_ite-private-more td {
+.x_ite-private-browser-timings tr.x_ite-private-more td {
   padding-bottom: 5px;
 }
 
-X3DCanvas .x_ite-private-browser-timings td {
+.x_ite-private-browser-timings td {
   padding-bottom: 2px;
 }
 
-X3DCanvas .x_ite-private-browser-timings tfoot td:first-child {
+.x_ite-private-browser-timings tfoot td:first-child {
   padding-right: 0;
 }
 
-X3DCanvas .x_ite-private-browser-timings tfoot td {
+.x_ite-private-browser-timings tfoot td {
   padding-top: 4px;
 }
 
-X3DCanvas .x_ite-private-browser-timings button {
+.x_ite-private-browser-timings button {
   box-sizing: border-box;
   border: 0;
   border-radius: 10px;
@@ -194,28 +196,33 @@ X3DCanvas .x_ite-private-browser-timings button {
   cursor: pointer;
 }
 
-X3DCanvas .x_ite-private-world-info-overlay {
+.x_ite-private-world-info-overlay {
   position: absolute;
   inset: 0;
 }
 
-X3DCanvas .x_ite-private-world-info {
+.x_ite-private-world-info {
   overflow-y: auto;
   position: absolute;
   inset: 0;
+  margin: 21pt;
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   background: rgba(0,0,0,0.61803);
-  margin: 21pt;
+  background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  -webkit-background-clip: padding-box; /* for Safari */
+  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   border: 4px solid rgba(60,60,60,0.61803);
   border-radius: 15px;
   padding: 21pt;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-top,
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-title,
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info,
-X3DCanvas .x_ite-private-world-info p {
+.x_ite-private-world-info .x_ite-private-world-info-top,
+.x_ite-private-world-info .x_ite-private-world-info-title,
+.x_ite-private-world-info .x_ite-private-world-info-info,
+.x_ite-private-world-info p {
   box-sizing: border-box;
   outline: 0;
   margin: 0;
@@ -233,159 +240,123 @@ X3DCanvas .x_ite-private-world-info p {
   text-align: left;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-top {
+.x_ite-private-world-info .x_ite-private-world-info-top {
   font-weight: bold;
   font-style: italic;
   font-size: 9pt;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-title {
+.x_ite-private-world-info .x_ite-private-world-info-title {
   margin: 0.3em 0 1em 0;
   font-weight: bold;
   font-size: 21pt;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info,
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info p {
+.x_ite-private-world-info .x_ite-private-world-info-info,
+.x_ite-private-world-info .x_ite-private-world-info-info p {
   margin: 1em 0 1em 0;
   font-size: 14pt;
 }
 
-X3DCanvas .x_ite-private-world-info a {
+.x_ite-private-world-info a {
   text-decoration: underline;
   color: #fd9f2e;
 }
 
-/*!
- * jQuery contextMenu - Plugin for simple contextMenu handling
- *
- * Version: v1.8.1
- *
- * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
- * Web: http://swisnl.github.io/jQuery-contextMenu/
- *
- * Copyright (c) 2011-2015 SWIS BV and contributors
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
-
- * Date: 2015-09-20T18:47:54.927Z
- */
+/* Context Menu */
 
-/* fullscreen support */
-X3DCanvas #context-menu-layer {
-  z-index: 0 !important;
+.x_ite-private-menu.context-menu-layer {
+  position: fixed;
+  z-index: 10000;
+  inset: 0;
 }
 
-/* menu title */
-.x_ite-private-menu.x_ite-private-menu-title:before {
-   content: "X_ITE Browser";
-   display: block;
-   padding: 4px 32px 4px 8px;
-   font-weight: bold;
+.x_ite-private-menu.context-menu-list {
+  position: fixed;
+  z-index: 10000;
+  isolation: isolate;
 }
 
-.x_ite-private-menu .context-menu-selected {
-  font-weight: bold;
-  font-style: italic;
+.x_ite-private-menu .context-menu-list {
+  position: absolute;
 }
 
 .x_ite-private-menu.context-menu-list,
 .x_ite-private-menu .context-menu-list {
-  position: absolute;
-  display: inline-block;
+  display: block;
+  box-sizing: border-box;
   min-width: 120px;
-  padding: 0;
   margin: 0;
   margin-left: 1px;
-  white-space: pre;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background: rgba(0,0,0,0.61803);
+  background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  -webkit-background-clip: padding-box; /* for Safari */
+  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+  border: 4px solid rgba(60,60,60,0.61803);
+  border-radius: 5px;
+  padding: 5px 10px 9px 9px;
+  color: white;
   font-family: PT Sans, sans-serif;
   font-size: 10pt;
+  white-space: pre;
   line-height: 1.2;
   list-style-type: none;
-  background: #222;
-  color: #eee;
-  border: 0 solid #ddd;
-  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
-          box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
 }
 
 .x_ite-private-menu .context-menu-item {
+  cursor: pointer;
   position: relative;
-  background-color: #222;
+  border-radius: 5px;
   margin: 0;
-  border-top: 1px solid #222;
-  border-bottom: 1px solid #222;
-  padding: 3px 24px 3px 24px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  padding: 5px 24px;
   font-size: 10pt;
   line-height: 1;
   letter-spacing: unset;
   text-align: left;
 }
 
-.x_ite-private-menu .context-menu-item > label > input,
-.x_ite-private-menu .context-menu-item > label > textarea {
-  all: revert;
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
+.x_ite-private-menu .context-menu-item:hover:not(.context-menu-not-selectable) {
+  background-color: rgba(255, 69, 58, 0.8);
 }
 
-.x_ite-private-menu .context-menu-input > label > input[type="checkbox"] {
-  -webkit-appearance: checkbox;
-  -moz-appearance: checkbox;
-}
-
-.x_ite-private-menu .context-menu-input > label > input[type="radio"] {
-  -webkit-appearance: radio;
-  -moz-appearance: radio;
+.x_ite-private-menu .context-menu-item:hover > .context-menu-list {
+  display: block;
 }
 
-.x_ite-private-menu .context-menu-item:hover {
-  cursor: pointer;
-  background-color: #444;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
+.x_ite-private-menu .context-menu-not-selectable {
+  cursor: default;
 }
 
-.x_ite-private-menu .context-menu-item.context-menu-separator {
+.x_ite-private-menu .context-menu-separator {
+  cursor: default;
+  margin: 2px 0;
+  border-top: 0;
+  border-bottom: 1px solid rgb(138, 138, 138);
   padding-top: 0;
   padding-bottom: 0;
-  border-top: 0;
-  border-bottom: 1px solid #111;
 }
 
 .x_ite-private-menu .context-menu-separator + .context-menu-separator {
   display: none !important;
 }
 
-.x_ite-private-menu .context-menu-disabled {
-  color: #666;
-}
-
-.x_ite-private-menu .context-menu-input.context-menu-hover,
-.x_ite-private-menu .context-menu-disabled.context-menu-hover {
-  cursor: default;
-}
-
 .x_ite-private-menu .context-menu-submenu:after {
   content: "";
   position: absolute;
   display: block;
   right: 0;
-  top: 5px;
+  top: 8px;
   margin-right: 2px;
   /* CSS triangle */
-  width: 0;
-  height: 0;
   border-style: solid;
   border-width: 4px 0 4px 5px;
   border-color: transparent transparent transparent #eee;
+  width: 0;
+  height: 0;
 }
 
 /* icons
@@ -395,9 +366,16 @@ X3DCanvas #context-menu-layer {
   .context-menu-item.icon:before {}
  */
 
-.x_ite-private-menu .context-menu-item.context-menu-icon {
-  background-repeat: no-repeat;
-  background-position: 3px 2px;
+.x_ite-private-menu .context-menu-input > label {
+  cursor: pointer;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  font-size: 10pt;
+  letter-spacing: unset;
+  line-height: 1;
 }
 
 /* vertically align inside labels */
@@ -409,36 +387,24 @@ X3DCanvas #context-menu-layer {
   line-height: 1;
 }
 
+.x_ite-private-menu .context-menu-item > label > input {
+  all: revert;
+  cursor: pointer;
+}
+
 /* position checkboxes and radios like icons */
 .x_ite-private-menu .context-menu-input > label > input[type="checkbox"],
 .x_ite-private-menu .context-menu-input > label > input[type="radio"] {
+  accent-color: rgb(255, 69, 58);
   display: inline;
+  width: 12px;
   margin: 0;
   margin-left: -20px;
-  margin-right: 3px;
   padding: 0;
 }
 
 .x_ite-private-menu .context-menu-input > label > span {
-  margin-left: 2px;
-}
-
-.x_ite-private-menu .context-menu-input > label,
-.x_ite-private-menu .context-menu-input > label > input[type="text"],
-.x_ite-private-menu .context-menu-input > label > textarea,
-.x_ite-private-menu .context-menu-input > label > select {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  font-size: 10pt;
-  letter-spacing: unset;
-  line-height: 1;
-}
-
-.x_ite-private-menu .context-menu-input > label > textarea {
-  height: 100px;
+  padding-left: 8px;
 }
 
 .x_ite-private-menu .context-menu-item > .context-menu-list {
@@ -448,21 +414,25 @@ X3DCanvas #context-menu-layer {
   display: none;
 }
 
-/* display submenus on left side if there is no space on right side */
-.x_ite-private-menu.x_ite-private-menu-submenus-left .context-menu-item > .context-menu-list {
-  left: unset !important;
-}
+/* Item styles */
 
-.x_ite-private-menu .context-menu-item:hover > .context-menu-list {
-  display: block;
+.x_ite-private-menu .context-menu-title {
+  font-weight: bold;
+  padding: 4px 32px 4px 8px;
 }
 
-.x_ite-private-menu .context-menu-accesskey {
-  text-decoration: underline;
+.x_ite-private-menu .context-menu-selected {
+  font-weight: bold;
+  font-style: italic;
 }
 
 /* Icons */
 
+.x_ite-private-menu .context-menu-icon {
+  background-repeat: no-repeat;
+  background-position: 2px 3px;
+}
+
 .x_ite-private-icon-viewpoint {
   background: url("assets/images/Viewpoint.png");
 }
@@ -507,7 +477,11 @@ X3DCanvas #context-menu-layer {
   background: url("assets/images/TextureQuality.png");
 }
 
-.x_ite-private-icon-fullscreen {
+.x_ite-private-icon-shading {
+  background: url("assets/images/Shading.png");
+}
+
+.x_ite-private-icon-enter-fullscreen {
   background: url("assets/images/gtk-fullscreen.png");
 }
 
@@ -522,3 +496,70 @@ X3DCanvas #context-menu-layer {
 .x_ite-private-icon-help-about {
   background: url("assets/images/help-about.png");
 }
+
+/* Spinner */
+
+.x_ite-private-splash-screen {
+  position: absolute;
+  inset: 0;
+  background: #1b1d21;
+  background: -moz-radial-gradient(center, ellipse cover, #2f3135 0%, #1b1d21 100%);
+  background: -webkit-radial-gradient(center, ellipse cover, #2f3135 0%,#1b1d21 100%);
+  background: radial-gradient(ellipse at center, #2f3135 0%,#1b1d21 100%);
+}
+
+.x_ite-private-spinner {
+  position: absolute;
+  top: calc(50% - (138px / 2));
+  left: calc(50% - (134px / 2));
+  width: 138px;
+  height: 134px;
+  background: url("assets/images/logo.128.png") no-repeat;
+  -webkit-animation: spinner-animation-spin 32s linear infinite;
+  -moz-animation: spinner-animation-spin 32s linear infinite;
+  animation: spinner-animation-spin 32s linear infinite;
+}
+@-moz-keyframes spinner-animation-spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spinner-animation-spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spinner-animation-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+
+.x_ite-private-progress {
+  position: absolute;
+  top: calc(50% - 28pt - 11pt);
+  left: calc(50% - 100px);
+  width: 200px;
+}
+
+.x_ite-private-x_ite {
+  color: white;
+  font-size: 28pt;
+  text-align: center;
+  text-shadow: 1px 1px 0 black;
+  font-family: PT Sans, sans-serif;
+}
+
+.x_ite-private-x_ite span.x_ite-private-x3d {
+  font-weight: bold;
+}
+
+.x_ite-private-spinner-text {
+  color: white;
+  font-size: 11pt;
+  text-align: center;
+  text-shadow: 1px 1px 0 black;
+  font-family: PT Sans, sans-serif;
+}
+
+.x_ite-private-progressbar {
+  margin: 8px;
+  border-left:  2px solid rgba(255, 255, 255, 0.5);
+  border-right: 2px solid rgba(255, 255, 255, 0.5);
+  padding: 0 2px;
+  text-align: left;
+}
+
+.x_ite-private-progressbar div {
+  width: 0%;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.5);
+}