supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 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, code,
kbd,
pre, pre,
.irc-monospace, .irc-monospace,
textarea#user-specified-css-input { textarea#user-specified-css-input {
@ -89,7 +88,7 @@ textarea#user-specified-css-input {
code, code,
.irc-monospace { .irc-monospace {
font-size: 12px; font-size: 13px;
padding: 2px 4px; padding: 2px 4px;
color: #e74c3c; color: #e74c3c;
background-color: #f9f2f4; background-color: #f9f2f4;
@ -111,16 +110,19 @@ pre {
kbd { kbd {
display: inline-block; display: inline-block;
font-size: 11px; font-family: inherit;
line-height: 10px; line-height: 1em;
padding: 3px 5px; min-width: 28px; /* Ensure 1-char keys have the same width */
color: #555; margin: 0 1px;
vertical-align: middle; padding: 4px 6px;
background-color: #fcfcfc; color: #444;
border: solid 1px #ccc; text-align: center;
border-bottom-color: #bbb; text-shadow: 0 1px 0 #fff;
border-radius: 3px; background-color: white;
box-shadow: inset 0 -1px 0 #bbb; 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 { .btn {

9
client/themes/morning.css
View File

@ -213,6 +213,15 @@ code,
color: #f3f3f3; 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 */ /* Embeds */
#chat .toggle-content { #chat .toggle-content {
background: #242a33; background: #242a33;

9
client/themes/zenburn.css
View File

@ -239,6 +239,15 @@ code,
color: #dcdccc; 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 */ /* Previews */
#chat .toggle-content { #chat .toggle-content {

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

@ -49,25 +49,48 @@
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <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> </div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <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> </div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <div class="description">
<p> <p>
@ -90,52 +113,58 @@
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <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> </div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <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> </div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <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> </div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <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> </div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <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> </div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <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>
<div class="description"> <div class="description">
<p> <p>