Improve readability and styling of shortcut keys in the Help section
This commit is contained in:
parent
8ecacc9978
commit
883b6dbef2
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user