eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-12 08:40:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

A lot more style/content changes

Browse source
This commit is contained in:
Ske 2020-06-12 15:18:51 +02:00
parent ead1ae4e7c
commit 3d7a6ec72f
18 changed files with 223 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

81
docs/content/.vuepress/components/Cmd.vue
View file

@ -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 = [];