Visual improvements of keyboard shortcut popup

css/keyboard-shortcuts.css

@@ -4,51 +4,16 @@
     bottom: 20px;
     left: 20px;
     overflow: hidden;
+    padding: 20px;
     z-index: 1;
-    opacity: .85;
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-    border-bottom-right-radius: 15px;
-    border-bottom-left-radius: 15px;
-    background-color: rgb(0, 0, 0);
-    background-image: none;
-    background-repeat: repeat;
+    border-radius: 15px;
     background-attachment: scroll;
-    background-position: 0px center;
-    background-clip: border-box;
-    background-origin: padding-box;
     background-size: auto auto;
+    color: rgba(255, 255, 255, .8);
+    background-color: rgba(0, 0, 0, .8);
 }
 
-#keyboard-shortcuts.header {
-    font-size: 15pt; 
-}
-
-#keyboard-shortcuts.content {
-    font-size: 10pt; 
-    color: #ffffff;
-}
-
-#keyboard-shortcuts.item {
-    color: #ffffff;
-    font-size: 10pt; 
-}
-#keyboard-shortcuts.item-details {
-    color: #ffffff;
-    font-size: 10pt; 
-}
-
-#keyboard-shortcuts.item-action {
-    color: #ffffff;
-    font-size: 10pt; 
-}
-
-#keyboard-shortcuts.item-description {
-    color: #ffffff;
-    font-size: 10pt; 
-}
-
-#keyboard-shortcuts.regular-key {
-    color: #ffffff;
-    font-size: 10pt; 
-}
+#keyboard-shortcuts .item-action {
+    color: #209EFF;
+    font-size: 14pt;
+}

index.html

@@ -283,65 +283,65 @@
         <div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div>
         <div class="content">
             <ul class="item">
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">M</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.mute"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.mute"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">V</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.videoMute"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.videoMute"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">C</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleChat"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.toggleChat"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">R</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.raiseHand"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.raiseHand"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">T</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.pushToTalk"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.pushToTalk"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">D</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleScreensharing"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.toggleScreensharing"></span>
                 </li>
                 <li class="item-details">
                     <span class="item-action">
                         <kbd class="regular-key">F</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleFilmstrip"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.toggleFilmstrip"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">?</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleShortcuts"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.toggleShortcuts"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">0</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.focusLocal"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.focusLocal"></span>
                 </li>
-                <li class="item-details">
+                <li>
                     <span class="item-action">
                         <kbd class="regular-key">1-9</kbd>
                     </span>
-                    <strong class="item-description" data-i18n="keyboardShortcuts.focusRemote"></strong>
+                    <span class="item-description" data-i18n="keyboardShortcuts.focusRemote"></span>
                 </li>
             </ul>
         </div>