fixed some bugs of menu

Author: oxxostudio

code.js

@@ -454,7 +454,7 @@ Code.loadDemoArea = function () {
 
   if (localStorage.demoArea == 'open') {
     area.className = area.className + "show";
-    btn.style.opacity = 1;
+      btn.className = "notext toolMenu opened";
   }
 
   if (!localStorage.demoAreaSelect) {
@@ -496,19 +496,19 @@ Code.loadDemoArea = function () {
     if (localStorage.demoArea == 'open') {
       area.className = area.className.replace("show", "");
       localStorage.demoArea = 'close';
-      btn.style.opacity = 0.8;
+      btn.className = "notext toolMenu";
     } else {
       area.className += " show";
       localStorage.demoArea = 'open';
-      btn.style.opacity = 1;
+      btn.className = "notext toolMenu opened";
     }
     Code.reloadSandbox();
   };
 
   close.onclick = function () {
     area.className = area.className.replace("show", "");
     localStorage.demoArea = 'close';
-    btn.style.opacity = 0.8;
+    btn.className = "notext toolMenu";
   };
 
   select.onchange = function () {
@@ -539,13 +539,13 @@ Code.loadSample = function () {
     if(!sampleMenuOpen){
       sampleMenuOpen = true;
       sampleMenu.style.display = 'block';
-      sampleBtn.style.opacity = 1;
+      sampleBtn.className = "notext toolMenu opened";
       sampleMenu.focus();
     }else{
       sampleMenuOpen = false;
       sampleMenu.style.display = 'none';
       sampleBtn.style.color = '#000';
-      sampleBtn.style.opacity = 0.8;
+      sampleBtn.className = "notext toolMenu";
     }
   };
 
@@ -554,7 +554,7 @@ Code.loadSample = function () {
       sampleMenuOpen = false;
       sampleMenu.style.display = 'none';
       sampleBtn.style.color = '#000';
-      sampleBtn.style.opacity = 0.8;
+      sampleBtn.className = "notext toolMenu";
     }
   };
 
@@ -986,7 +986,7 @@ Code.toggleRunning = function () {
     document.querySelector('#runButton div').innerHTML = "停止執行";
     select.disabled = true;
     demoBtn.disabled = true;
-    demoBtn.style.opacity = 0.5;
+    demoBtn.className = "notext toolMenu running";
     demoBtn.style.pointerEvents = 'none';
     demoStopBtn.style.pointerEvents = 'none';
     demoStopBtn.style.opacity = 0.2;
@@ -998,9 +998,9 @@ Code.toggleRunning = function () {
     select.disabled = false;
     demoBtn.disabled = false;
     if (localStorage.demoArea == 'open') {
-      demoBtn.style.opacity = 1;
+      demoBtn.className = "notext toolMenu opened";
     }else{
-      demoBtn.style.opacity = 0.8;
+      demoBtn.className = "notext toolMenu";
     }
     demoBtn.style.pointerEvents = 'auto';
     demoStopBtn.style.pointerEvents = 'auto';

css/style.css

@@ -22,10 +22,10 @@ html[dir="RTL"] .farSide {
 /* Buttons */
 
 button {
-  margin: 5px;
+  margin: 5px 3px;
   padding: 10px;
   border-radius: 4px;
-  border: 1px solid #ddd;
+  border: none;
   font-size: large;
   background-color: #fff;
   color: #000;
@@ -50,10 +50,6 @@ button:hover>img {
   opacity: 1;
 }
 
-button:active {
-  border: 1px solid #888 !important;
-}
-
 button:hover {
   box-shadow: 2px 2px 5px #888;
 }
@@ -104,9 +100,7 @@ td.tabmin {
 }
 
 td.tabmax {
-  border-top-style: none !important;
-  border-left-style: none !important;
-  border-right-style: none !important;
+  border:none!important;
   width: 99%;
   padding-left: 10px;
   padding-right: 10px;
@@ -163,8 +157,7 @@ pre.content {
 
 #check-device-online {
   display: inline-block;
-  background: #fff;
-  opacity: .8;
+  background: #ddd;
   box-sizing: border-box;
   padding: 0 0 0 5px;
   margin: -7px 0 4px;
@@ -206,7 +199,7 @@ pre.content {
 }
 
 #check-device-online:hover {
-  opacity: 1;
+  background:#fff;
 }
 
 
@@ -424,6 +417,9 @@ table.nav {
 table.nav td {
   background: #fff;
 }
+table.nav>tr:first-child>td {
+  background: none;
+}
 
 table.nav td.tabmax,
 table td.tabmin {
@@ -434,13 +430,20 @@ table.nav td.tabmax {
   padding-right: 0;
 }
 
+table.nav td.tabmax a,
+table.nav td.tabmax div,
+table.nav td.tabmax button{
+  display:inline-block;
+  height:28px;
+}
+
 table.nav td.tabmax button {
   margin: -3px 0 4px;
   /*padding: 3px 12px;*/
   outline: none;
   cursor: pointer;
   transition: .2s;
-  opacity: .8;
+  background:#ddd;
   vertical-align: bottom;
 }
 
@@ -450,12 +453,7 @@ table.nav td.tabmax button img {
 
 table.nav td.tabmax button:hover {
   box-shadow: none;
-  opacity: 1;
-}
-
-table.nav td.tabmax button:active {
-  opacity: .7;
-  border: 1px solid rgba(0, 0, 0, 0)!important;
+  background:#fff;
 }
 
 table.nav table {
@@ -467,6 +465,19 @@ table.nav td.tabon {
   background: #ddd;
 }
 
+button#runButton{
+  background:#dd4b39;
+  border-color:#dd4b39;
+}
+
+table.nav td.tabmax button.opened{
+  background:#fff;
+}
+
+table.nav td.tabmax button.running{
+  background:#999;
+}
+
 
 td#copyCode {
   background-image: linear-gradient(top, #ddd 0%, #fff 100%);
@@ -573,8 +584,7 @@ td#copyCode div {
   display: inline-block;
   font-size: 16px;
   color: #000;
-  background: #fff;
-  opacity:.8;
+  background: #ddd;
   transition: .3s;
   border-radius: 5px;
   margin: -7px 0 4px;
@@ -595,7 +605,7 @@ td#copyCode div {
 }
 
 .linkButton:hover {
-  opacity:1;
+  background: #fff;
 }
 
 .linkButton:active {