Jelajahi Sumber

Switched from using a list to absolute positions to achieve more
consistant behavior across different browsers.

samhed 12 tahun lalu
induk
melakukan
bd88b94393
2 mengubah file dengan 43 tambahan dan 36 penghapusan
  1. 26 19
      include/base.css
  2. 17 17
      vnc.html

+ 26 - 19
include/base.css

@@ -413,14 +413,6 @@ html {
   margin-left: 0px;
   margin-left: 0px;
 }
 }
 
 
-#noVNC_extra_keys {
-  float: none;
-  top: 0px;
-}
-#noVNC_extra_keys li {  
-  display: inline;
-}
-
 #showExtraKeysButton { display: none; }
 #showExtraKeysButton { display: none; }
 #toggleCtrlButton { display: inline; }
 #toggleCtrlButton { display: inline; }
 #toggleAltButton {  display: inline; }
 #toggleAltButton {  display: inline; }
@@ -454,19 +446,34 @@ html {
   .noVNC-buttons-right {
   .noVNC-buttons-right {
     padding-right: 0px;
     padding-right: 0px;
   }
   }
-  #noVNC_extra_keys {
-    float: right;
-    top: -35px;
+  /* collapse the extra keys on lower resolutions */
+  #showExtraKeysButton {
+    display: inline;
   }
   }
-  #noVNC_extra_keys li {
-    display: block;
+  #toggleCtrlButton {
+    display: none;
+    position: absolute;
+    top: 30px;
+    left: 0px;
+  }
+  #toggleAltButton {
+    display: none;
+    position: absolute;
+    top: 65px;
+    left: 0px;
+  }
+  #sendTabButton {
+    display: none;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+  }
+  #sendEscButton {
+    display: none;
+    position: absolute;
+    top: 135px;
+    left: 0px;
   }
   }
-  /* collapse the extra keys on lower resolutions */
-  #showExtraKeysButton { display: inline; }
-  #toggleCtrlButton { display: none; }
-  #toggleAltButton {  display: none; }
-  #sendTabButton { display: none; }
-  #sendEscButton { display: none; }
 }
 }
 
 
 @media screen and (min-width: 321px) and (max-width: 480px) {
 @media screen and (min-width: 321px) and (max-width: 480px) {

+ 17 - 17
vnc.html

@@ -68,23 +68,23 @@
                     value="Keyboard" title="Show Keyboard"/>
                     value="Keyboard" title="Show Keyboard"/>
                 <input type="email" autocapitalize="off" autocorrect="off"
                 <input type="email" autocapitalize="off" autocorrect="off"
                     id="keyboardinput" class=""/>
                     id="keyboardinput" class=""/>
-                <ul id="noVNC_extra_keys">
-                    <li><input type="image" src="images/showextrakeys.png"
-                            id="showExtraKeysButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/ctrl.png"
-                            id="toggleCtrlButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/alt.png"
-                            id="toggleAltButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/tab.png"
-                            id="sendTabButton"
-                            class="noVNC_status_button"></li>
-                    <li><input type="image" src="images/esc.png"
-                            id="sendEscButton"
-                            class="noVNC_status_button"></li>
-                </ul>
+                <div id="noVNC_extra_keys">
+                    <input type="image" src="images/showextrakeys.png"
+                        id="showExtraKeysButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/ctrl.png"
+                        id="toggleCtrlButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/alt.png"
+                        id="toggleAltButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/tab.png"
+                        id="sendTabButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/esc.png"
+                        id="sendEscButton"
+                        class="noVNC_status_button">
+                </div>
             </div>
             </div>
         </div>
         </div>