🎨
This commit is contained in:
syuilo
parent
80a4aa6fa6
commit
532fa9c5f9
1 changed files with 90 additions and 85 deletions
|
|
@ -1,9 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="qyqbqfal" v-size="{ max: [500] }">
|
<div class="qyqbqfal" v-size="{ max: [500] }">
|
||||||
<div class="title">{{ title }}</div>
|
<div class="main">
|
||||||
<div class="body" v-html="body"></div>
|
<div class="title">{{ title }}</div>
|
||||||
<div class="footer">
|
<div class="body" v-html="body"></div>
|
||||||
<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
|
<div class="footer">
|
||||||
|
<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -105,103 +107,106 @@ export default defineComponent({
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.qyqbqfal {
|
.qyqbqfal {
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
|
|
||||||
&.max-width_500px {
|
&.max-width_500px {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .title {
|
> .main {
|
||||||
font-size: 1.5em;
|
max-width: 800px;
|
||||||
font-weight: bold;
|
margin: 0 auto;
|
||||||
padding: 0 0 0.75em 0;
|
|
||||||
margin: 0 0 1em 0;
|
|
||||||
border-bottom: solid 2px var(--divider);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .body {
|
> .title {
|
||||||
> *:first-child {
|
font-size: 1.5em;
|
||||||
margin-top: 0;
|
font-weight: bold;
|
||||||
|
padding: 0 0 0.75em 0;
|
||||||
|
margin: 0 0 1em 0;
|
||||||
|
border-bottom: solid 2px var(--divider);
|
||||||
}
|
}
|
||||||
|
|
||||||
> *:last-child {
|
> .body {
|
||||||
margin-bottom: 0;
|
> *:first-child {
|
||||||
}
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
::v-deep(a) {
|
> *:last-child {
|
||||||
color: var(--link);
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep(blockquote) {
|
::v-deep(a) {
|
||||||
display: block;
|
color: var(--link);
|
||||||
margin: 8px;
|
}
|
||||||
padding: 6px 0 6px 12px;
|
|
||||||
color: var(--fg);
|
|
||||||
border-left: solid 3px var(--fg);
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
p {
|
::v-deep(blockquote) {
|
||||||
margin: 0;
|
display: block;
|
||||||
|
margin: 8px;
|
||||||
|
padding: 6px 0 6px 12px;
|
||||||
|
color: var(--fg);
|
||||||
|
border-left: solid 3px var(--fg);
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(h2) {
|
||||||
|
font-size: 1.25em;
|
||||||
|
padding: 0 0 0.5em 0;
|
||||||
|
margin: 1.5em 0 1em 0;
|
||||||
|
border-bottom: solid 0.5px var(--divider);
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(table) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(kbd.group) {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px;
|
||||||
|
border: 1px solid var(--divider);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(kbd.key) {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border: solid 0.5px var(--divider);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(code) {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||||
|
tab-size: 2;
|
||||||
|
background: #272822;
|
||||||
|
color: #f8f8f2;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 4px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(pre) {
|
||||||
|
background: #272822;
|
||||||
|
color: #f8f8f2;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
> code {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep(h2) {
|
> .footer {
|
||||||
font-size: 1.25em;
|
padding: 1.5em 0 0 0;
|
||||||
padding: 0 0 0.5em 0;
|
margin: 1.5em 0 0 0;
|
||||||
margin: 1.5em 0 1em 0;
|
border-top: solid 2px var(--divider);
|
||||||
border-bottom: solid 0.5px var(--divider);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep(table) {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep(kbd.group) {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 2px;
|
|
||||||
border: 1px solid var(--divider);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep(kbd.key) {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border: solid 0.5px var(--divider);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep(code) {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
|
||||||
tab-size: 2;
|
|
||||||
background: #272822;
|
|
||||||
color: #f8f8f2;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 4px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep(pre) {
|
|
||||||
background: #272822;
|
|
||||||
color: #f8f8f2;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
|
|
||||||
> code {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .footer {
|
|
||||||
padding: 1.5em 0 0 0;
|
|
||||||
margin: 1.5em 0 0 0;
|
|
||||||
border-top: solid 2px var(--divider);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue