supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve readability and styling of shortcut keys in the Help section

Browse Source
This commit is contained in:
Jérémie Astori 2018-03-13 22:24:59 -04:00
parent 8ecacc9978
commit 883b6dbef2
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
4 changed files with 77 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/css/style.css
View File

@ -80,7 +80,6 @@ button {
}
code,
kbd,
pre,
.irc-monospace,
textarea#user-specified-css-input {
@ -89,7 +88,7 @@ textarea#user-specified-css-input {
code,
.irc-monospace {
font-size: 12px;
font-size: 13px;
padding: 2px 4px;
color: #e74c3c;
background-color: #f9f2f4;
@ -111,16 +110,19 @@ pre {
kbd {
display: inline-block;
font-size: 11px;
line-height: 10px;
padding: 3px 5px;
color: #555;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb;
font-family: inherit;
line-height: 1em;
min-width: 28px; /* Ensure 1-char keys have the same width */
margin: 0 1px;
padding: 4px 6px;
color: #444;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: white;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent);
border: 1px solid #bbb;
border-radius: 4px;
box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
}
.btn {

9
client/themes/morning.css
View File

@ -213,6 +213,15 @@ code,
color: #f3f3f3;
}
kbd {
color: #eee;
text-shadow: 0 -1px 0 #000;
border-color: #000;
background-color: #333;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), transparent);
box-shadow: 0 2px 0 #000, inset 0 1px 1px #777, inset 0 -1px 3px #222;
}
/* Embeds */
#chat .toggle-content {
background: #242a33;

9
client/themes/zenburn.css
View File

@ -239,6 +239,15 @@ code,
color: #dcdccc;
}
kbd {
color: #eee;
text-shadow: 0 -1px 0 #000;
border-color: #000;
background-color: #333;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), transparent);
box-shadow: 0 2px 0 #000, inset 0 1px 1px #777, inset 0 -1px 3px #222;
}
/* Previews */
#chat .toggle-content {

61
client/views/windows/help.tpl
View File

@ -49,25 +49,48 @@
<div class="help-item">
<div class="subject">
<kbd class="key-all">Alt</kbd><kbd class="key-apple">⌥</kbd> + <kbd>Shift</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd>
<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↓</kbd></span>
<span class="key-apple"><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↓</kbd></span>
</div>
<div class="description">
<p>Switch to the previous/next lobby in the channel list.</p>
<p>Switch to the next lobby in the channel list.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd class="key-all">Alt</kbd><kbd class="key-apple">⌥</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd>
<span class="key-all"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↑</kbd></span>
<span class="key-apple"><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↑</kbd></span>
</div>
<div class="description">
<p>Switch to the previous/next window in the channel list.</p>
<p>Switch to the previous lobby in the channel list.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>K</kbd>
<span class="key-all"><kbd>Alt</kbd> <kbd>↓</kbd></span>
<span class="key-apple"><kbd>⌥</kbd> <kbd>↓</kbd></span>
</div>
<div class="description">
<p>Switch to the next window in the channel list.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Alt</kbd> <kbd>↑</kbd></span>
<span class="key-apple"><kbd>⌥</kbd> <kbd>↑</kbd></span>
</div>
<div class="description">
<p>Switch to the previous window in the channel list.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<span class="key-all"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
<span class="key-apple"><kbd>⌘</kbd> <kbd>K</kbd></span>
</div>
<div class="description">
<p>
@ -90,52 +113,58 @@
<div class="help-item">
<div class="subject">
<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>B</kbd>
<span class="key-all"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
<span class="key-apple"><kbd>⌘</kbd> <kbd>B</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as bold.</p>
<p>Mark all text typed after this shortcut as <span class="irc-bold">bold</span>.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>U</kbd>
<span class="key-all"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
<span class="key-apple"><kbd>⌘</kbd> <kbd>U</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as underlined.</p>
<p>Mark all text typed after this shortcut as <span class="irc-underline">underlined</span>.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>I</kbd>
<span class="key-all"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
<span class="key-apple"><kbd>⌘</kbd> <kbd>I</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as italics.</p>
<p>Mark all text typed after this shortcut as <span class="irc-italic">italics</span>.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>S</kbd>
<span class="key-all"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
<span class="key-apple"><kbd>⌘</kbd> <kbd>S</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as struck through.</p>
<p>Mark all text typed after this shortcut as <span class="irc-strikethrough">struck through</span>.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>M</kbd>
<span class="key-all"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
<span class="key-apple"><kbd>⌘</kbd> <kbd>M</kbd></span>
</div>
<div class="description">
<p>Mark all text typed after this shortcut as monospaced.</p>
<p>Mark all text typed after this shortcut as <span class="irc-monospace">monospaced</span>.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<kbd class="key-all">Ctrl</kbd><kbd class="key-apple">⌘</kbd> + <kbd>O</kbd>
<span class="key-all"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
<span class="key-apple"><kbd>⌘</kbd> <kbd>O</kbd></span>
</div>
<div class="description">
<p>