style.css.patch

--- /dev/null
+++ src/main/java/com/lushprojects/circuitjs1/public/style.css
@@ -1,123 +1,94 @@
 @charset "UTF-8";
 
-/*Hide all mobile elements when in desktop usage*/
-.trigger, .toptrigger, .triggerLabel, toptriggerlabel {
+.trigger, .toptrigger, .triggerLabel, .toptriggerlabel {
 	display: none;
 }
 
-@media only screen and (max-width: 600px) {
-	.triggerLabel {
-		display: initial;
-		border-radius: 10px 0px 0px 10px;
-		background: white;
-		width: 20px;
-		height: 50px;
-		position: absolute;
-		top: 50px;
-		right: 0;
-		z-index: 1;
-		transition: right 1s;
-	}
-	.triggerLabel:before {
-		content: "‖";
-		font-size: 32px;
-		padding-left: 3px;
-		position: absolute;
-		padding-top: 5px;
-	}
-	.toptriggerlabel {
-		z-index: 1;
-		top: 5px;
-		right: 5px;
-		width: 20px;
-		height: 20px;
-		position: absolute;
-	}
-	.toptriggerlabel:before {
-		content: "☰";
-		font-size: 16px;
-		padding-left: 2px;
-		pointer-events: none;
-	}
+.triggerLabel {
+	display: initial;
+	border: 1px solid #bbb;
+	border-radius: 10px 0px 0px 10px;
+	background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
+	width: 25px;
+	height: 60px;
+	position: absolute;
+	top: 50px;
+	right: 0;
+	z-index: 1;
+	/*transition: right 1s;*/
+	cursor: pointer;
+}
+.triggerLabel:before {
+	content: "\25C0";
+	font-size: 22px;
+	padding-left: 3px;
+	position: absolute;
+	padding-top: 5px;
+	margin: 35% 0;
+}
 
-	/*Trick to hide the menu when the user taps out of the menu*/
-	.toptrigger:checked {
-		display: block;
-		opacity: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 2;
-		position: absolute;
-	}
-	.trigger:checked+.triggerLabel {
-		right: 128px;
-	}
+/*Trick to hide the menu when the user taps out of the menu*/
+.toptrigger:checked {
+	display: block;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	position: absolute;
+}
+.trigger:checked+.triggerLabel {
+	right: 166px;
+}
 
-	/* selects the top panel */
-	.gwt-MenuBar-horizontal>table {
-		display: none;
-	}
+.trigger:checked+.triggerLabel:before {
+	content: "\25B6";
+}
 
-	/* shows the top menu when the user taps the menu icon */
-	.toptrigger:checked+label+div>div>table {
-		display: block !important;
-	}
+/* shows the top menu when the user taps the menu icon */
+.toptrigger:checked+label+div>div>table {
+	display: block !important;
+}
 
-	/* selects the side panel */
-	.trigger+.triggerLabel+div {
-		width: 0 !important;
-		background: white;
-		z-index: 1;
-		transition: width 1s;
-	}
-	.trigger:checked+.triggerLabel+div {
-		width: 128px !important;
-	}
+/* selects the side panel */
+.trigger+.triggerLabel+div {
+	width: 0 !important;
+	background: white;
+	z-index: 1;
+	/*transition: width 1s;*/
+	border-left: 1px solid #bbb;
+}
+.trigger:checked+.triggerLabel+div {
+	width: 166px !important;
+}
 
-	/* selects the top menu */
-	.gwt-MenuBar-horizontal>table {
-		height: auto;
-		position: fixed;
-		width: 100%;
-		text-align: center;
-		top: 30px;
-		background: white;
-		z-index: 2;
-	}
-	.gwt-MenuBar-horizontal * {
-		display: block;
-	}
-	.gwt-MenuBarPopup {
-		z-index: 2;
-		width: 100%;
-		left: 0 !important;
-	}
-	.gwt-MenuBarPopup>div {
-		overflow: scroll;
-		z-index: 2;
-		width: 100%;
-		height: 300px;
-		position: fixed;
-		top: 30px;
-		/* trick to prevent sub menus from opening in the same touch */
-		transition:all 0.1s;
-	}
-	.gwt-MenuBarPopup>div>table {
-		width: 100%;
-		height: 100%;
-	}
-	.menuPopupMiddleCenterInner>div>table {
-		width: 100%;
-		text-align: center;
-	}
-	.menuPopupTopLeft, .menuPopupTopCenter, .menuPopupTopRight,
-		.menuPopupMiddleLeft, .menuPopupMiddleRight, .menuPopupMiddleCenter,
-		.menuPopupBottomLeft, .menuPopupBottomCenter, .menuPopupBottomRight {
-		background: white !important;
-	}
+/* selects the div containing the canvas */
+.trigger+.triggerLabel+div+div {
+	width: 100% !important;
+}
+
+/*
+for triggerLabel:
+	width: 25px;
+	height: 60px;
+for display width < 1000px:
+	width = 2.5vw (2.5 percent of 1000px and etc.)
+	height = 6vw
 
-	/* selects the div containing the canvas */
-	.trigger+.triggerLabel+div+div {
-		width: 100% !important;
++ font-size=22px => font-size: 2.5vw
++ border-radius=10px => border-radius=1vw
+
+try it:
+*/
+
+@media (max-width: 1000px) {
+	.triggerLabel {
+		width: 2.5vw;
+		height: 6vw;
+		border-radius: 1vw 0px 0px 1vw;
+	}
+	.triggerLabel:before{
+		font-size: 2.5vw;
+		padding-left: 0.3vw;
+		padding-top: 0.5vw;
 	}
-}
+}
\ No newline at end of file