haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Visual improvements of keyboard shortcut popup

This commit is contained in:
yanas 2016-06-14 14:10:24 -05:00
parent d79971a737
commit 97237470af
2 changed files with 27 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/keyboard-shortcuts.css
View File

@ -4,51 +4,16 @@
bottom: 20px; bottom: 20px;
left: 20px; left: 20px;
overflow: hidden; overflow: hidden;
padding: 20px;
z-index: 1; z-index: 1;
opacity: .85; border-radius: 15px;
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;
background-attachment: scroll; background-attachment: scroll;
background-position: 0px center;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto; background-size: auto auto;
color: rgba(255, 255, 255, .8);
background-color: rgba(0, 0, 0, .8);
} }
#keyboard-shortcuts.header { #keyboard-shortcuts .item-action {
font-size: 15pt; color: #209EFF;
} font-size: 14pt;
#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;
} }

38
index.html
View File

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