From 4c9c1c60bbeb90a4f3e85d6c469db3b4e5aeb34e Mon Sep 17 00:00:00 2001
From: atlasan <gmorittu@gmail.com>
Date: Sun, 3 Oct 2021 18:12:46 +0200
Subject: [PATCH] FIX: css touch-action

ensure to put this to make touch working
---
 editor/style.css | 515 ++++++++++++++++++++++++-----------------------
 1 file changed, 260 insertions(+), 255 deletions(-)

diff --git a/editor/style.css b/editor/style.css
index 02f642f79..feb73e77b 100755
--- a/editor/style.css
+++ b/editor/style.css
@@ -1,255 +1,260 @@
-html,body {
-	width: 100%;
-	height: 100%;
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	background-color: #333;
-	color: #EEE;
-	font: 14px Tahoma;
-}
-
-h1 {
-	font-family: "Metro Light",Tahoma;
-}
-
-h2 {
-	font-family: "Metro Light";
-}
-
-#main {
-	width: 100%;
-	height: 100%;
-	background-color: #222;
-}
-
-
-#status {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-	color: #FAA;
-	font-size: 18px;
-	padding: 5px;
-	/*border-radius: 5px;*/
-	width: -moz-calc( 50% - 30px);
-	min-height: 30px;
-	overflow: hidden;
-	background-color: #644;
-}
-
-#help-message {
-	padding: 2px;
-	font-size: 0.8em;
-	background-color: #464;
-	/*border-radius: 2px;*/
-}
-
-#content {
-	position: relative;
-	min-height: 500px;
-	overflow: hidden;
-}
-
-.fullscreen #content {
-	min-height: -moz-calc(100% - 80px);
-	min-height: -webkit-calc(100% - 80px);
-	min-height: calc(100% - 80px);
-}
-
-.info-section p {
-	padding-left: 20px;
-	margin: 2px;
-}
-
-.info-section strong {
-	color: #FEA;
-}
-
-#visual {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: black;
-	width: 100%;
-	height: 100%;
-}
-
-
-.item-list .item {
-	margin: 5px;
-	padding: 5px;
-	font-size: 1.2em;
-
-	background-color: transparent;
-	color: #999;
-	padding-left: 5px;
-	transition: background-color 300ms, color 300ms, padding-left 300ms;
-	-moz-transition: background-color 300ms, color 300ms, padding-left 300ms;
-	-webkit-transition: background-color 300ms, color 300ms, padding-left 300ms;
-}
-
-.item-list .item:hover {
-	background-color: #33A;
-	/*border-radius: 4px;*/
-	color: white;
-	padding-left: 15px;
-	transition: background-color 300ms, color 300ms, padding-left 300ms;
-	-moz-transition: background-color 300ms, color 300ms, padding-left 300ms;
-	-webkit-transition: background-color 300ms, color 300ms, padding-left 300ms;
-	cursor: pointer;
-}
-
-#gallery .item-list .item:hover {
-	background-color: #A83;
-}
-
-.item-list .item strong {
-	display: inline-block;
-	width: 200px;
-}
-
-.form label {
-	font-size: 1.2em;
-	width: 200px;
-	display: inline-block;
-	text-align: right;
-}
-
-label {
-	font-weight: bold;
-	color: #AAF;
-}
-
-.header input { 
-	color: #EEE;
-	background-color: #555;
-	font-size: 1.2em;
-	border: 1px solid black;
-	/*border-radius: 4px;*/
-	padding: 2px;
-	/*box-shadow: inset 0 0 3px #333; */
-	font-family: Verdana;
-	width: 250px;
-}
-
-textarea {
-	vertical-align: top;
-}
-
-#block-app {
-	width:100%;
-	height:100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: rgba(0,0,0,0.5);
-	text-align: center;
-	z-index: 6;
-}
-
-#block-app span {
-	display: block;
-	font-size: 30px;
-	margin: auto;
-	margin-top: 300px;
-}
-
-#block-app span a {
-	display: inline-block;
-	/*border-radius: 4px;*/
-	text-decoration: none;
-	color: black;
-	background-color: red;
-	padding: 0 4px 0 4px;
-}
-
-::-webkit-scrollbar {
-    height: 12px;
-	width: 6px;
-	background: #222;
-}
-::-webkit-scrollbar-thumb {
-    background: rgba(200,200,200,0.4);
-}
-::-webkit-scrollbar-corner {
-    background: #766;
-}
-
-#editor {
-	position: relative;
-	width: 50%;
-	height: 100%;
-	display: inline-block;
-	margin: 0;
-	padding: 0;
-}
-
-#editor .toolsbar {
-	width: 100%;
-	height: 30px;
-	background-color: #262626;
-	margin: 0;
-	padding: 0;
-}
-
-#editor .toolsbar button {
-	padding: 2px;
-	padding-left: 10px;
-	padding-right: 10px;
-	margin: 3px 0 0 3px;
-}
-
-#editor .toolsbar button.enabled {
-	background-color: #66A;
-}
-
-#world {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 50%;
-	height: 100%;
-}
-
-#worldcanvas {
-	background-color: #343;
-}
-
-.popup {
-	position: absolute;
-	top: 0;
-	background-color: rgba(50,50,90,0.8);
-	width: 100%;
-	height: 100%;
-}
-
-.popup .header, .nodepanel .header {
-	width: 100%;
-	height: 30px;
-	font-size: 20px;
-	padding: 2px;
-}
-
-#help {
-	color: #eee;
-}
-
-#help p {
-	margin: 10px;
-}
-
-.selector {
-	font-size: 1.8em;
-}
-
-
-.selector select {
-	color: white;
-	background-color: black;
-	border: 0;
-	font-size: 1em;
-}
-
+html,body {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background-color: #333;
+	color: #EEE;
+	font: 14px Tahoma;
+}
+
+h1 {
+	font-family: "Metro Light",Tahoma;
+}
+
+h2 {
+	font-family: "Metro Light";
+}
+
+#main {
+	width: 100%;
+	height: 100%;
+	background-color: #222;
+}
+
+
+#status {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	color: #FAA;
+	font-size: 18px;
+	padding: 5px;
+	/*border-radius: 5px;*/
+	width: -moz-calc( 50% - 30px);
+	min-height: 30px;
+	overflow: hidden;
+	background-color: #644;
+}
+
+#help-message {
+	padding: 2px;
+	font-size: 0.8em;
+	background-color: #464;
+	/*border-radius: 2px;*/
+}
+
+#content {
+	position: relative;
+	min-height: 500px;
+	overflow: hidden;
+}
+
+.fullscreen #content {
+	min-height: -moz-calc(100% - 80px);
+	min-height: -webkit-calc(100% - 80px);
+	min-height: calc(100% - 80px);
+}
+
+.info-section p {
+	padding-left: 20px;
+	margin: 2px;
+}
+
+.info-section strong {
+	color: #FEA;
+}
+
+#visual {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: black;
+	width: 100%;
+	height: 100%;
+}
+
+
+.item-list .item {
+	margin: 5px;
+	padding: 5px;
+	font-size: 1.2em;
+
+	background-color: transparent;
+	color: #999;
+	padding-left: 5px;
+	transition: background-color 300ms, color 300ms, padding-left 300ms;
+	-moz-transition: background-color 300ms, color 300ms, padding-left 300ms;
+	-webkit-transition: background-color 300ms, color 300ms, padding-left 300ms;
+}
+
+.item-list .item:hover {
+	background-color: #33A;
+	/*border-radius: 4px;*/
+	color: white;
+	padding-left: 15px;
+	transition: background-color 300ms, color 300ms, padding-left 300ms;
+	-moz-transition: background-color 300ms, color 300ms, padding-left 300ms;
+	-webkit-transition: background-color 300ms, color 300ms, padding-left 300ms;
+	cursor: pointer;
+}
+
+#gallery .item-list .item:hover {
+	background-color: #A83;
+}
+
+.item-list .item strong {
+	display: inline-block;
+	width: 200px;
+}
+
+.form label {
+	font-size: 1.2em;
+	width: 200px;
+	display: inline-block;
+	text-align: right;
+}
+
+label {
+	font-weight: bold;
+	color: #AAF;
+}
+
+.header input { 
+	color: #EEE;
+	background-color: #555;
+	font-size: 1.2em;
+	border: 1px solid black;
+	/*border-radius: 4px;*/
+	padding: 2px;
+	/*box-shadow: inset 0 0 3px #333; */
+	font-family: Verdana;
+	width: 250px;
+}
+
+textarea {
+	vertical-align: top;
+}
+
+#block-app {
+	width:100%;
+	height:100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: rgba(0,0,0,0.5);
+	text-align: center;
+	z-index: 6;
+}
+
+#block-app span {
+	display: block;
+	font-size: 30px;
+	margin: auto;
+	margin-top: 300px;
+}
+
+#block-app span a {
+	display: inline-block;
+	/*border-radius: 4px;*/
+	text-decoration: none;
+	color: black;
+	background-color: red;
+	padding: 0 4px 0 4px;
+}
+
+::-webkit-scrollbar {
+    height: 12px;
+	width: 6px;
+	background: #222;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(200,200,200,0.4);
+}
+::-webkit-scrollbar-corner {
+    background: #766;
+}
+
+#editor {
+	position: relative;
+	width: 50%;
+	height: 100%;
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+
+#editor .toolsbar {
+	width: 100%;
+	height: 30px;
+	background-color: #262626;
+	margin: 0;
+	padding: 0;
+}
+
+#editor .toolsbar button {
+	padding: 2px;
+	padding-left: 10px;
+	padding-right: 10px;
+	margin: 3px 0 0 3px;
+}
+
+#editor .toolsbar button.enabled {
+	background-color: #66A;
+}
+
+#world {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 50%;
+	height: 100%;
+}
+
+#worldcanvas {
+	background-color: #343;
+}
+
+.popup {
+	position: absolute;
+	top: 0;
+	background-color: rgba(50,50,90,0.8);
+	width: 100%;
+	height: 100%;
+}
+
+.popup .header, .nodepanel .header {
+	width: 100%;
+	height: 30px;
+	font-size: 20px;
+	padding: 2px;
+}
+
+#help {
+	color: #eee;
+}
+
+#help p {
+	margin: 10px;
+}
+
+.selector {
+	font-size: 1.8em;
+}
+
+
+.selector select {
+	color: white;
+	background-color: black;
+	border: 0;
+	font-size: 1em;
+}
+
+.graphcanvas{
+	/*touch-action: manipulation; WONT WORK*/
+	/*touch-action: none; DESIDERABLE: implement zoom and pan*/
+	touch-action: pinch-zoom;
+}
\ No newline at end of file