mirror of
https://github.com/PluralKit/PluralKit.git
synced 2026-02-13 01:00:12 +00:00
A lot more style/content changes
This commit is contained in:
Ske
parent
ead1ae4e7c
commit
3d7a6ec72f
18 changed files with 223 additions and 153 deletions
|
|
@ -1,38 +1,30 @@
|
|||
<template>
|
||||
<span class="command-argument"><slot/></span>
|
||||
<span class="cmd-arg"><slot/></span>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.command-argument {
|
||||
.cmd-arg {
|
||||
font-weight: bold;
|
||||
line-height: 1.75;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0 0.6rem;
|
||||
|
||||
font-size: $exampleFontSize;
|
||||
font-family: $exampleFontFamily;
|
||||
border-bottom: 1px solid darken($exampleArgColor, 15%);
|
||||
color: $exampleTextColor;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
background-color: $exampleArgColor;
|
||||
border-radius: 4px;
|
||||
|
||||
line-height: 1.7;
|
||||
background-color: $argBgPlain;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-block.tip .command-argument {
|
||||
background-color: $exampleArgColorInTip;
|
||||
|
||||
.cmd-inline .cmd-arg {
|
||||
background-color: $argBgInline;
|
||||
}
|
||||
|
||||
.command-example .command-argument {
|
||||
background-color: $exampleArgColorInExample;
|
||||
}
|
||||
|
||||
.custom-block.tip .command-example .command-argument {
|
||||
background-color: $exampleArgColorInBoth;
|
||||
|
||||
.cmd-block .cmd-arg {
|
||||
background-color: $argBgBlock;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["optional", "name", "edit", "value"],
|
||||
props: [],
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,55 +1,70 @@
|
|||
<template>
|
||||
<p class="command-example">
|
||||
<span class="example-comment" v-if="comment">// {{ comment }}</span>
|
||||
<span class="bot-prefix">pk;</span><slot v-if="usage === undefined"/><span v-if="usage !== undefined">
|
||||
<div v-bind:class="{ cmd: true, 'cmd-block': inline === undefined, 'cmd-inline': inline !== undefined }">
|
||||
<div class="comment" v-if="comment">// {{ comment }}</div>
|
||||
<span class="prefix">pk;</span><slot v-if="usage === undefined"/><span v-if="usage !== undefined">
|
||||
<span v-for="part in parse(usage)">
|
||||
<span v-if="part.type === 'str'">{{ part.str }}</span>
|
||||
<span v-else-if="part.type === 'arg'"><Arg>{{ part.arg }}</Arg></span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.command-example {
|
||||
font-size: $exampleFontSize;
|
||||
font-family: $exampleFontFamily;
|
||||
color: $exampleTextColor;
|
||||
|
||||
background-color: $exampleBgColor;
|
||||
.cmd {
|
||||
// Universal command styles (text)
|
||||
line-height: 1.7;
|
||||
|
||||
color: $cmdColor;
|
||||
|
||||
.comment {
|
||||
font-weight: bold;
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
font-weight: bold;
|
||||
color: $accentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.cmd-block {
|
||||
// Base block command styles (also see CmdGroup)
|
||||
background-color: $cmdBgBlock;
|
||||
border-radius: 6px;
|
||||
|
||||
/*margin: 1rem 0;*/
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.75rem 1.25rem;
|
||||
|
||||
clear: both;
|
||||
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.custom-block.tip .command-example {
|
||||
background-color: $exampleBgColorInTip;
|
||||
|
||||
.details > .cmd-block {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.bot-prefix {
|
||||
color: $examplePrefixColor;
|
||||
|
||||
.cmd-group .cmd-block {
|
||||
// Disable most parameters above for grouped commands
|
||||
// (they'll get added back by CmdGroup below)
|
||||
background-color: transparent;
|
||||
padding: 0.1rem 1.25rem;
|
||||
}
|
||||
|
||||
.example-comment {
|
||||
color: $exampleCommentColor;
|
||||
//float: right;
|
||||
|
||||
//@media (max-width: $MQNarrow) {
|
||||
display: block;
|
||||
//float: none;
|
||||
margin-bottom: -0.15rem;
|
||||
//}
|
||||
|
||||
.cmd-inline {
|
||||
display: inline-block;
|
||||
|
||||
color: $textColor;
|
||||
background-color: $cmdBgInline;
|
||||
border-radius: 3px;
|
||||
padding: 0 0.7rem;
|
||||
margin: 0 0.1rem;
|
||||
}
|
||||
|
||||
.tip .cmd-inline {
|
||||
background-color: $cmdBgInlineTip;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["usage", "comment"],
|
||||
props: ["usage", "comment", "inline"],
|
||||
methods: {
|
||||
parse(usage) {
|
||||
const parts = [];
|
||||
|
|
|
|||
|
|
@ -1,30 +1,18 @@
|
|||
<template>
|
||||
<div class="command-example-group">
|
||||
<div class="cmd-group">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.command-example-group {
|
||||
background-color: $exampleBgColor;
|
||||
.cmd-group {
|
||||
background-color: $codeBgColor;
|
||||
border-radius: 6px;
|
||||
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.75rem 1.25rem;
|
||||
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.custom-block.tip .command-example-group {
|
||||
background-color: $exampleBgColorInTip;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.command-example-group .command-example {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.command-example-group .command-example:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
.details .cmd-group {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<template>
|
||||
<span class="example-inline"><span class="inline-bot-prefix">pk;</span><slot /></span>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.example-inline {
|
||||
font-size: $exampleFontSize;
|
||||
font-family: $exampleFontFamily;
|
||||
|
||||
background-color: $exampleArgColor;
|
||||
color: $exampleTextColor;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
border-bottom: 1px solid darken($exampleArgColor, 15%);
|
||||
}
|
||||
|
||||
.custom-block.tip .example-inline {
|
||||
background-color: $exampleArgColorInTip;
|
||||
}
|
||||
|
||||
.inline-bot-prefix {
|
||||
color: $examplePrefixColor;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="command-info">
|
||||
<div class="cmd-info">
|
||||
<h3 :id="cmd">
|
||||
<a class="header-anchor" :href="'#' + cmd">#</a>
|
||||
{{ command.title }}
|
||||
</h3>
|
||||
<p>{{ command.summary }}</p>
|
||||
<p class="summary">{{ command.summary }}</p>
|
||||
|
||||
<slot></slot>
|
||||
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
<h4 v-if="command.arguments">Arguments <small>(fill in above)</small></h4>
|
||||
<div class="info-arg" v-for="(arg, key) in command.arguments">
|
||||
<Arg>{{ key }}</Arg>
|
||||
(<strong v-if="arg.type === 'string'">text</strong><strong v-if="arg.type === 'system'">system
|
||||
ID</strong><span v-if="arg.optional">, <em>optional</em></span>) - {{ arg.desc }}.
|
||||
(<span v-if="arg.type === 'string'">text</span><span v-if="arg.type === 'system'">system
|
||||
reference</span><span v-if="arg.optional">, <em>optional</em></span>) - {{ arg.desc }}.
|
||||
</div>
|
||||
|
||||
<h4 v-if="command.flags">Flags <small>(all optional, starts with a hyphen, place anywhere in the
|
||||
|
|
@ -46,24 +46,14 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.command-info {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.command-info h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.command-info p {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.command-info h4 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.info-arg, .info-flag {
|
||||
margin-bottom: 0.5rem;
|
||||
<style lang="stylus">
|
||||
.cmd-info {
|
||||
.summary { margin-top: 0; }
|
||||
h3, h4 { margin-bottom: 0.5rem; }
|
||||
|
||||
.info-arg, .info-flag {
|
||||
line-height: 1.5;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue