sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'develop' into improve-media

Browse Source
This commit is contained in:
tamaina
2018-09-15 22:15:56 +09:00
committed by GitHub
parent 4257fed500 ce659f9926
commit 8f8c67ad6d
200 changed files with 6781 additions and 2331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/app/common/views/components/acct.vue
View File

@ -1,19 +1,25 @@
<template>
<span class="mk-acct">
<span class="name">@{{ user.username }}</span>
<span class="host" v-if="user.host">@{{ user.host }}</span>
<span class="host" :class="{ fade: $store.state.settings.contrastedAcct }" v-if="user.host || detail || $store.state.settings.showFullAcct">@{{ user.host || host }}</span>
</span>
</template>
<script lang="ts">
import Vue from 'vue';
import { host } from '../../../config';
export default Vue.extend({
props: ['user']
props: ['user', 'detail'],
data() {
return {
host
};
}
});
</script>
<style lang="stylus" scoped>
.mk-acct
> .host
> .host.fade
opacity 0.5
</style>

21
src/client/app/common/views/components/avatar.vue
View File

@ -1,15 +1,15 @@
<template>
<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
<span class="inner" :style="style"></span>
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
<span class="inner" :style="icon"></span>
</span>
<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
<span class="inner" :style="style"></span>
<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
<span class="inner" :style="icon"></span>
</span>
<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
<span class="inner" :style="style"></span>
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
<span class="inner" :style="icon"></span>
</router-link>
<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
<span class="inner" :style="style"></span>
<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
<span class="inner" :style="icon"></span>
</router-link>
</template>
@ -42,6 +42,11 @@ export default Vue.extend({
return this.user.isCat && this.$store.state.settings.circleIcons;
},
style(): any {
return {
borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
};
},
icon(): any {
return {
backgroundColor: this.lightmode
? `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`

44
src/client/app/common/views/components/cw-button.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? '%i18n:@hide%' : '%i18n:@show%' }}</button>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
value: {
type: Boolean,
required: true
}
},
methods: {
toggle() {
this.$emit('input', !this.value);
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
display inline-block
padding 4px 8px
font-size 0.7em
color isDark ? #393f4f : #fff
background isDark ? #687390 : #b1b9c1
border-radius 2px
cursor pointer
user-select none
&:hover
background isDark ? #707b97 : #bbc4ce
.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
root(true)
.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
root(false)
</style>

16
src/client/app/common/views/components/games/reversi/reversi.game.vue
View File

@ -50,15 +50,15 @@
</div>
<div class="player" v-if="game.isEnded">
<el-button-group>
<el-button type="primary" @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</el-button>
<el-button type="primary" @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</el-button>
</el-button-group>
<div>
<button @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</button>
<button @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</button>
</div>
<span>{{ logPos }} / {{ logs.length }}</span>
<el-button-group>
<el-button type="primary" @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</el-button>
<el-button type="primary" @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</el-button>
</el-button-group>
<div>
<button @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</button>
<button @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</button>
</div>
</div>
<div class="info">

1
src/client/app/common/views/components/games/reversi/reversi.index.vue
View File

@ -3,7 +3,6 @@
<h1>%i18n:@title%</h1>
<p>%i18n:@sub-title%</p>
<div class="play">
<!--<el-button round>フリーマッチ(準備中)</el-button>-->
<form-button primary round @click="match">%i18n:@invite%</form-button>
<details>
<summary>%i18n:@rule%</summary>

7
src/client/app/common/views/components/games/reversi/reversi.room.vue
View File

@ -59,11 +59,6 @@
</header>
<div>
<el-alert v-for="message in messages"
:title="message.text"
:type="message.type"
:key="message.id"/>
<template v-for="item in form">
<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch>
@ -93,7 +88,7 @@
</header>
<div>
<el-input v-model="item.value" @change="onChangeForm(item)"/>
<input v-model="item.value" @change="onChangeForm(item)"/>
</div>
</div>
</template>

4
src/client/app/common/views/components/index.ts
View File

@ -1,5 +1,7 @@
import Vue from 'vue';
import cwButton from './cw-button.vue';
import tagCloud from './tag-cloud.vue';
import trends from './trends.vue';
import analogClock from './analog-clock.vue';
import menu from './menu.vue';
@ -42,6 +44,8 @@ import uiSelect from './ui/select.vue';
import formButton from './ui/form/button.vue';
import formRadio from './ui/form/radio.vue';
Vue.component('mk-cw-button', cwButton);
Vue.component('mk-tag-cloud', tagCloud);
Vue.component('mk-trends', trends);
Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-menu', menu);

2
src/client/app/common/views/components/menu.vue
View File

@ -108,7 +108,7 @@ export default Vue.extend({
easing: 'easeInBack',
complete: () => {
this.$emit('closed');
this.$destroy();
this.destroyDom();
}
});
}

57
src/client/app/common/views/components/misskey-flavored-markdown.ts
View File

@ -1,4 +1,4 @@
import Vue from 'vue';
import Vue, { VNode } from 'vue';
import * as emojilib from 'emojilib';
import { length } from 'stringz';
import parse from '../../../../../mfm/parse';
@ -6,10 +6,7 @@ import getAcct from '../../../../../misc/acct/render';
import { url } from '../../../config';
import MkUrl from './url.vue';
import MkGoogle from './google.vue';
const flatten = list => list.reduce(
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
);
import { concat } from '../../../../../prelude/array';
export default Vue.component('misskey-flavored-markdown', {
props: {
@ -32,20 +29,20 @@ export default Vue.component('misskey-flavored-markdown', {
},
render(createElement) {
let ast;
let ast: any[];
if (this.ast == null) {
// Parse text to ast
ast = parse(this.text);
} else {
ast = this.ast;
ast = this.ast as any[];
}
let bigCount = 0;
let motionCount = 0;
// Parse ast to DOM
const els = flatten(ast.map(token => {
const els = concat(ast.map((token): VNode[] => {
switch (token.type) {
case 'text': {
const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
@ -56,12 +53,12 @@ export default Vue.component('misskey-flavored-markdown', {
x[x.length - 1].pop();
return x;
} else {
return createElement('span', text.replace(/\n/g, ' '));
return [createElement('span', text.replace(/\n/g, ' '))];
}
}
case 'bold': {
return createElement('b', token.bold);
return [createElement('b', token.bold)];
}
case 'big': {
@ -95,23 +92,23 @@ export default Vue.component('misskey-flavored-markdown', {
}
case 'url': {
return createElement(MkUrl, {
return [createElement(MkUrl, {
props: {
url: token.content,
target: '_blank'
}
});
})];
}
case 'link': {
return createElement('a', {
return [createElement('a', {
attrs: {
class: 'link',
href: token.url,
target: '_blank',
title: token.url
}
}, token.title);
}, token.title)];
}
case 'mention': {
@ -129,16 +126,16 @@ export default Vue.component('misskey-flavored-markdown', {
}
case 'hashtag': {
return createElement('a', {
return [createElement('a', {
attrs: {
href: `${url}/tags/${encodeURIComponent(token.hashtag)}`,
target: '_blank'
}
}, token.content);
}, token.content)];
}
case 'code': {
return createElement('pre', {
return [createElement('pre', {
class: 'code'
}, [
createElement('code', {
@ -146,15 +143,15 @@ export default Vue.component('misskey-flavored-markdown', {
innerHTML: token.html
}
})
]);
])];
}
case 'inline-code': {
return createElement('code', {
return [createElement('code', {
domProps: {
innerHTML: token.html
}
});
})];
}
case 'quote': {
@ -164,43 +161,45 @@ export default Vue.component('misskey-flavored-markdown', {
const x = text2.split('\n')
.map(t => [createElement('span', t), createElement('br')]);
x[x.length - 1].pop();
return createElement('div', {
return [createElement('div', {
attrs: {
class: 'quote'
}
}, x);
}, x)];
} else {
return createElement('span', {
return [createElement('span', {
attrs: {
class: 'quote'
}
}, text2.replace(/\n/g, ' '));
}, text2.replace(/\n/g, ' '))];
}
}
case 'title': {
return createElement('div', {
return [createElement('div', {
attrs: {
class: 'title'
}
}, token.title);
}, token.title)];
}
case 'emoji': {
const emoji = emojilib.lib[token.emoji];
return createElement('span', emoji ? emoji.char : token.content);
return [createElement('span', emoji ? emoji.char : token.content)];
}
case 'search': {
return createElement(MkGoogle, {
return [createElement(MkGoogle, {
props: {
q: token.query
}
});
})];
}
default: {
console.log('unknown ast type:', token.type);
return [];
}
}
}));

8
src/client/app/common/views/components/note-menu.vue
View File

@ -64,7 +64,7 @@ export default Vue.extend({
(this as any).api('i/pin', {
noteId: this.note.id
}).then(() => {
this.$destroy();
this.destroyDom();
});
},
@ -73,7 +73,7 @@ export default Vue.extend({
(this as any).api('notes/delete', {
noteId: this.note.id
}).then(() => {
this.$destroy();
this.destroyDom();
});
},
@ -81,13 +81,13 @@ export default Vue.extend({
(this as any).api('notes/favorites/create', {
noteId: this.note.id
}).then(() => {
this.$destroy();
this.destroyDom();
});
},
closed() {
this.$nextTick(() => {
this.$destroy();
this.destroyDom();
});
}
}

3
src/client/app/common/views/components/poll-editor.vue
View File

@ -20,6 +20,7 @@
<script lang="ts">
import Vue from 'vue';
import { erase } from '../../../../../prelude/array';
export default Vue.extend({
data() {
return {
@ -53,7 +54,7 @@ export default Vue.extend({
get() {
return {
choices: this.choices.filter(choice => choice != '')
choices: erase('', this.choices)
}
},

3
src/client/app/common/views/components/poll.vue
View File

@ -21,6 +21,7 @@
<script lang="ts">
import Vue from 'vue';
import { sum } from '../../../../../prelude/array';
export default Vue.extend({
props: ['note'],
data() {
@ -33,7 +34,7 @@ export default Vue.extend({
return this.note.poll;
},
total(): number {
return this.poll.choices.reduce((a, b) => a + b.votes, 0);
return sum(this.poll.choices.map(x => x.votes));
},
isVoted(): boolean {
return this.poll.choices.some(c => c.isVoted);

22
src/client/app/common/views/components/reaction-icon.vue
View File

@ -1,17 +1,17 @@
<template>
<span class="mk-reaction-icon">
<img v-if="reaction == 'like'" src="/assets/reactions/like.png" alt="%i18n:common.reactions.like%">
<img v-if="reaction == 'love'" src="/assets/reactions/love.png" alt="%i18n:common.reactions.love%">
<img v-if="reaction == 'laugh'" src="/assets/reactions/laugh.png" alt="%i18n:common.reactions.laugh%">
<img v-if="reaction == 'hmm'" src="/assets/reactions/hmm.png" alt="%i18n:common.reactions.hmm%">
<img v-if="reaction == 'surprise'" src="/assets/reactions/surprise.png" alt="%i18n:common.reactions.surprise%">
<img v-if="reaction == 'congrats'" src="/assets/reactions/congrats.png" alt="%i18n:common.reactions.congrats%">
<img v-if="reaction == 'angry'" src="/assets/reactions/angry.png" alt="%i18n:common.reactions.angry%">
<img v-if="reaction == 'confused'" src="/assets/reactions/confused.png" alt="%i18n:common.reactions.confused%">
<img v-if="reaction == 'rip'" src="/assets/reactions/rip.png" alt="%i18n:common.reactions.rip%">
<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" alt="%i18n:common.reactions.like%">
<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" alt="%i18n:common.reactions.love%">
<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" alt="%i18n:common.reactions.laugh%">
<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" alt="%i18n:common.reactions.hmm%">
<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" alt="%i18n:common.reactions.surprise%">
<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" alt="%i18n:common.reactions.congrats%">
<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" alt="%i18n:common.reactions.angry%">
<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" alt="%i18n:common.reactions.confused%">
<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" alt="%i18n:common.reactions.rip%">
<template v-if="reaction == 'pudding'">
<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="/assets/reactions/sushi.png" alt="%i18n:common.reactions.pudding%">
<img v-else src="/assets/reactions/pudding.png" alt="%i18n:common.reactions.pudding%">
<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" alt="%i18n:common.reactions.pudding%">
<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" alt="%i18n:common.reactions.pudding%">
</template>
</span>
</template>

4
src/client/app/common/views/components/reaction-picker.vue
View File

@ -95,7 +95,7 @@ export default Vue.extend({
reaction: reaction
}).then(() => {
if (this.cb) this.cb();
this.$destroy();
this.destroyDom();
});
},
onMouseover(e) {
@ -120,7 +120,7 @@ export default Vue.extend({
scale: 0.5,
duration: 200,
easing: 'easeInBack',
complete: () => this.$destroy()
complete: () => this.destroyDom()
});
}
}

90
src/client/app/common/views/components/tag-cloud.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<div class="jtivnzhfwquxpsfidertopbmwmchmnmo">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p class="empty" v-else-if="tags.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
<div v-else>
<vue-word-cloud
:words="tags.slice(0, 20).map(x => [x.name, x.count])"
:color="color"
:spacing="1">
<template slot-scope="{word, text, weight}">
<div style="cursor: pointer;" :title="weight">
{{ text }}
</div>
</template>
</vue-word-cloud>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as VueWordCloud from 'vuewordcloud';
export default Vue.extend({
components: {
[VueWordCloud.name]: VueWordCloud
},
data() {
return {
tags: [],
fetching: true,
clock: null
};
},
mounted() {
this.fetch();
this.clock = setInterval(this.fetch, 1000 * 60);
},
beforeDestroy() {
clearInterval(this.clock);
},
methods: {
fetch() {
(this as any).api('aggregation/hashtags').then(tags => {
this.tags = tags;
this.fetching = false;
});
},
color([, weight]) {
const peak = Math.max.apply(null, this.tags.map(x => x.count));
const w = weight / peak;
if (w > 0.9) {
return this.$store.state.device.darkmode ? '#ff4e69' : '#ff4e69';
} else if (w > 0.5) {
return this.$store.state.device.darkmode ? '#3bc4c7' : '#3bc4c7';
} else {
return this.$store.state.device.darkmode ? '#fff' : '#555';
}
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
height 100%
width 100%
> .fetching
> .empty
margin 0
padding 16px
text-align center
color #aaa
> [data-fa]
margin-right 4px
> div
height 100%
width 100%
.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
root(true)
.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
root(false)
</style>

27
src/client/app/common/views/components/ui/card.vue
View File

@ -24,19 +24,34 @@ export default Vue.extend({
root(isDark)
margin 16px
padding 16px
color isDark ? #fff : #000
background isDark ? #282C37 : #fff
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
@media (min-width 500px)
padding 32px
> header
font-weight normal
font-size 24px
padding 16px
font-weight bold
font-size 20px
color isDark ? #fff : #444
@media (min-width 500px)
padding 24px 32px
> section
padding 20px 16px
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
@media (min-width 500px)
padding 32px
&.fit-top
padding-top 0
> header
margin-bottom 16px
font-weight bold
color isDark ? #fff : #444
.ui-card[data-darkmode]
root(true)

2
src/client/app/common/views/components/ui/radio.vue
View File

@ -55,7 +55,7 @@ export default Vue.extend({
root(isDark)
display inline-block
margin 32px 32px 32px 0
margin 0 32px 0 0
cursor pointer
transition all 0.3s

7
src/client/app/common/views/components/ui/switch.vue
View File

@ -64,6 +64,12 @@ root(isDark)
cursor pointer
transition all 0.3s
&:first-child
margin-top 0
&:last-child
margin-bottom 0
> *
user-select none
@ -89,6 +95,7 @@ root(isDark)
> .button
display inline-block
flex-shrink 0
margin 3px 0 0 0
width 34px
height 14px

2
src/client/app/common/views/components/url-preview.vue
View File

@ -14,7 +14,7 @@
<header>
<h1>{{ title }}</h1>
</header>
<p>{{ description }}</p>
<p>{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
<footer>
<img class="icon" v-if="icon" :src="icon"/>
<p>{{ sitename }}</p>

10
src/client/app/common/views/components/visibility-chooser.vue
View File

@ -47,7 +47,7 @@ export default Vue.extend({
props: ['source', 'compact'],
data() {
return {
v: this.$store.state.device.visibility || 'public'
v: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility
}
},
mounted() {
@ -97,9 +97,11 @@ export default Vue.extend({
},
methods: {
choose(visibility) {
this.$store.commit('device/setVisibility', visibility);
if (this.$store.state.settings.rememberNoteVisibility) {
this.$store.commit('device/setVisibility', visibility);
}
this.$emit('chosen', visibility);
this.$destroy();
this.destroyDom();
},
close() {
(this.$refs.backdrop as any).style.pointerEvents = 'none';
@ -117,7 +119,7 @@ export default Vue.extend({
scale: 0.5,
duration: 200,
easing: 'easeInBack',
complete: () => this.$destroy()
complete: () => this.destroyDom()
});
}
}

131
src/client/app/common/views/components/welcome-timeline.vue
View File

@ -1,22 +1,24 @@
<template>
<div class="mk-welcome-timeline">
<div v-for="note in notes">
<mk-avatar class="avatar" :user="note.user" target="_blank"/>
<div class="body">
<header>
<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
<span class="username">@{{ note.user | acct }}</span>
<div class="info">
<router-link class="created-at" :to="note | notePage">
<mk-time :time="note.createdAt"/>
</router-link>
<transition-group name="ldzpakcixzickvggyixyrhqwjaefknon" tag="div">
<div v-for="note in notes" :key="note.id">
<mk-avatar class="avatar" :user="note.user" target="_blank"/>
<div class="body">
<header>
<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
<span class="username">@{{ note.user | acct }}</span>
<div class="info">
<router-link class="created-at" :to="note | notePage">
<mk-time :time="note.createdAt"/>
</router-link>
</div>
</header>
<div class="text">
<misskey-flavored-markdown v-if="note.text" :text="note.text"/>
</div>
</header>
<div class="text">
<misskey-flavored-markdown v-if="note.text" :text="note.text"/>
</div>
</div>
</div>
</transition-group>
</div>
</template>
@ -63,7 +65,7 @@ export default Vue.extend({
local: true,
reply: false,
renote: false,
media: false,
file: false,
poll: false
}).then(notes => {
this.notes = notes;
@ -83,64 +85,73 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.ldzpakcixzickvggyixyrhqwjaefknon-enter
.ldzpakcixzickvggyixyrhqwjaefknon-leave-to
opacity 0
transform translateY(-30px)
root(isDark)
background isDark ? #282C37 : #fff
> div
padding 16px
overflow-wrap break-word
font-size .9em
color isDark ? #fff : #4C4C4C
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
> *
transition transform .3s ease, opacity .3s ease
&:after
content ""
display block
clear both
> div
padding 16px
overflow-wrap break-word
font-size .9em
color isDark ? #fff : #4C4C4C
border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
> .avatar
display block
float left
position -webkit-sticky
position sticky
top 16px
width 42px
height 42px
border-radius 6px
&:after
content ""
display block
clear both
> .body
float right
width calc(100% - 42px)
padding-left 12px
> .avatar
display block
float left
position -webkit-sticky
position sticky
top 16px
width 42px
height 42px
border-radius 6px
> header
display flex
align-items center
margin-bottom 4px
white-space nowrap
> .body
float right
width calc(100% - 42px)
padding-left 12px
> .name
display block
margin 0 .5em 0 0
padding 0
overflow hidden
font-weight bold
text-overflow ellipsis
color isDark ? #fff : #627079
> header
display flex
align-items center
margin-bottom 4px
white-space nowrap
> .username
margin 0 .5em 0 0
color isDark ? #606984 : #ccc
> .name
display block
margin 0 .5em 0 0
padding 0
overflow hidden
font-weight bold
text-overflow ellipsis
color isDark ? #fff : #627079
> .info
margin-left auto
font-size 0.9em
> .username
margin 0 .5em 0 0
color isDark ? #606984 : #ccc
> .created-at
color isDark ? #606984 : #c0c0c0
> .info
margin-left auto
font-size 0.9em
> .text
text-align left
> .created-at
color isDark ? #606984 : #c0c0c0
> .text
text-align left
.mk-welcome-timeline[data-darkmode]
root(true)