Merge pull request #1558 from syuilo/better-mobile-design
Better mobile design
This commit is contained in:
syuilo
GitHub
commit
0bbfbfc762
20 changed files with 189 additions and 122 deletions
|
|
@ -8,6 +8,10 @@
|
|||
|
||||
html
|
||||
height 100%
|
||||
background #ececed
|
||||
|
||||
&[data-darkmode]
|
||||
background #191B22
|
||||
|
||||
body
|
||||
display flex
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ export default Vue.extend({
|
|||
font-size 0.9em
|
||||
padding 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 24px 32px
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
font-size 12px
|
||||
border-bottom solid 1px #eaeaea
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
|
||||
&:first-child
|
||||
border-radius 8px 8px 0 0
|
||||
|
|
@ -266,6 +266,9 @@ root(isDark)
|
|||
@media (min-width 500px)
|
||||
padding 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 16px 32px
|
||||
|
||||
.avatar-anchor
|
||||
display inline-block
|
||||
|
||||
|
|
@ -308,7 +311,10 @@ root(isDark)
|
|||
background transparent
|
||||
|
||||
> article
|
||||
padding 14px 16px 9px 16px
|
||||
padding 16px 16px 9px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 32px 32px 22px
|
||||
|
||||
&:after
|
||||
content ""
|
||||
|
|
|
|||
|
|
@ -199,10 +199,13 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-notes
|
||||
background #fff
|
||||
root(isDark)
|
||||
background isDark ? #282C37 : #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
|
||||
|
||||
.transition
|
||||
.mk-notes-enter
|
||||
|
|
@ -260,8 +263,8 @@ export default Vue.extend({
|
|||
> footer
|
||||
text-align center
|
||||
border-top solid 1px #eaeaea
|
||||
border-bottom-left-radius 4px
|
||||
border-bottom-right-radius 4px
|
||||
border-bottom-left-radius 8px
|
||||
border-bottom-right-radius 8px
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
|
@ -270,10 +273,18 @@ export default Vue.extend({
|
|||
margin 0
|
||||
padding 16px
|
||||
width 100%
|
||||
color $theme-color
|
||||
border-radius 0 0 8px 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 20px
|
||||
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
|
||||
.mk-notes[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notes:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<div class="mk-notification">
|
||||
<div class="notification reaction" v-if="notification.type == 'reaction'">
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
<router-link class="avatar-anchor" :to="notification.user | userPage">
|
||||
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
<div class="text">
|
||||
<p>
|
||||
<div>
|
||||
<header>
|
||||
<mk-reaction-icon :reaction="notification.reaction"/>
|
||||
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
|
||||
</p>
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
</header>
|
||||
<router-link class="note-ref" :to="notification.note | notePage">
|
||||
%fa:quote-left%{{ getNoteSummary(notification.note) }}
|
||||
%fa:quote-right%
|
||||
|
|
@ -18,38 +18,54 @@
|
|||
</div>
|
||||
|
||||
<div class="notification renote" v-if="notification.type == 'renote'">
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
<router-link class="avatar-anchor" :to="notification.user | userPage">
|
||||
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
<div class="text">
|
||||
<p>
|
||||
<div>
|
||||
<header>
|
||||
%fa:retweet%
|
||||
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
|
||||
</p>
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
</header>
|
||||
<router-link class="note-ref" :to="notification.note | notePage">
|
||||
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notification follow" v-if="notification.type == 'follow'">
|
||||
<router-link class="avatar-anchor" :to="notification.user | userPage">
|
||||
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
<div>
|
||||
<header>
|
||||
%fa:user-plus%
|
||||
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
|
||||
<router-link class="avatar-anchor" :to="notification.user | userPage">
|
||||
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
<div>
|
||||
<header>
|
||||
%fa:chart-pie%
|
||||
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
</header>
|
||||
<router-link class="note-ref" :to="notification.note | notePage">
|
||||
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="notification.type == 'quote'">
|
||||
<mk-note :note="notification.note"/>
|
||||
</template>
|
||||
|
||||
<div class="notification follow" v-if="notification.type == 'follow'">
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
<router-link class="avatar-anchor" :to="notification.user | userPage">
|
||||
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
<div class="text">
|
||||
<p>
|
||||
%fa:user-plus%
|
||||
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="notification.type == 'reply'">
|
||||
<mk-note :note="notification.note"/>
|
||||
</template>
|
||||
|
|
@ -57,22 +73,6 @@
|
|||
<template v-if="notification.type == 'mention'">
|
||||
<mk-note :note="notification.note"/>
|
||||
</template>
|
||||
|
||||
<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
|
||||
<mk-time :time="notification.createdAt"/>
|
||||
<router-link class="avatar-anchor" :to="notification.user | userPage">
|
||||
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||
</router-link>
|
||||
<div class="text">
|
||||
<p>
|
||||
%fa:chart-pie%
|
||||
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
|
||||
</p>
|
||||
<router-link class="note-ref" :to="notification.note | notePage">
|
||||
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -95,44 +95,57 @@ export default Vue.extend({
|
|||
|
||||
> .notification
|
||||
padding 16px
|
||||
font-size 12px
|
||||
overflow-wrap break-word
|
||||
|
||||
@media (min-width 350px)
|
||||
font-size 14px
|
||||
|
||||
@media (min-width 500px)
|
||||
font-size 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 32px
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .mk-time
|
||||
display inline
|
||||
position absolute
|
||||
top 16px
|
||||
right 12px
|
||||
vertical-align top
|
||||
color rgba(0, 0, 0, 0.6)
|
||||
font-size 0.9em
|
||||
|
||||
> .avatar-anchor
|
||||
display block
|
||||
float left
|
||||
|
||||
img
|
||||
min-width 36px
|
||||
min-height 36px
|
||||
max-width 36px
|
||||
max-height 36px
|
||||
width 36px
|
||||
height 36px
|
||||
border-radius 6px
|
||||
|
||||
> .text
|
||||
@media (min-width 500px)
|
||||
width 42px
|
||||
height 42px
|
||||
|
||||
> div
|
||||
float right
|
||||
width calc(100% - 36px)
|
||||
padding-left 8px
|
||||
|
||||
p
|
||||
margin 0
|
||||
@media (min-width 500px)
|
||||
width calc(100% - 42px)
|
||||
|
||||
> header
|
||||
display flex
|
||||
align-items center
|
||||
white-space nowrap
|
||||
|
||||
i, .mk-reaction-icon
|
||||
margin-right 4px
|
||||
|
||||
> .mk-time
|
||||
margin-left auto
|
||||
color rgba(0, 0, 0, 0.3)
|
||||
font-size 0.9em
|
||||
|
||||
> .note-preview
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
|
||||
|
|
@ -147,11 +160,11 @@ export default Vue.extend({
|
|||
margin-right 3px
|
||||
|
||||
&.renote
|
||||
.text p i
|
||||
> div > header i
|
||||
color #77B255
|
||||
|
||||
&.follow
|
||||
.text p i
|
||||
> div > header i
|
||||
color #53c7ce
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<template>
|
||||
<div class="mk-notifications">
|
||||
<div class="notifications" v-if="notifications.length != 0">
|
||||
<transition-group name="mk-notifications" class="transition notifications">
|
||||
<template v-for="(notification, i) in _notifications">
|
||||
<mk-notification :notification="notification" :key="notification.id"/>
|
||||
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
|
||||
<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
|
||||
<span>%fa:angle-up%{{ notification._datetext }}</span>
|
||||
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
|
||||
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
|
||||
{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
|
||||
</button>
|
||||
|
||||
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
</div>
|
||||
|
|
@ -102,23 +104,26 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-notifications
|
||||
margin 8px auto
|
||||
padding 0
|
||||
max-width 500px
|
||||
width calc(100% - 16px)
|
||||
margin 0 auto
|
||||
background #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 16px auto
|
||||
width calc(100% - 32px)
|
||||
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
|
||||
|
||||
.transition
|
||||
.mk-notifications-enter
|
||||
.mk-notifications-leave-to
|
||||
opacity 0
|
||||
transform translateY(-30px)
|
||||
|
||||
> *
|
||||
transition transform .3s ease, opacity .3s ease
|
||||
|
||||
> .notifications
|
||||
|
||||
> .mk-notification
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:last-child
|
||||
|
|
|
|||
|
|
@ -175,11 +175,15 @@ export default Vue.extend({
|
|||
margin 8px auto
|
||||
background #fff
|
||||
border-radius 8px
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 16px auto
|
||||
width calc(100% - 32px)
|
||||
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
|
||||
|
||||
@media (min-width 600px)
|
||||
margin 32px auto
|
||||
|
||||
> header
|
||||
z-index 1
|
||||
|
|
|
|||
|
|
@ -143,14 +143,14 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.header
|
||||
root(isDark)
|
||||
$height = 48px
|
||||
|
||||
position fixed
|
||||
top 0
|
||||
z-index 1024
|
||||
width 100%
|
||||
box-shadow 0 1px 0 rgba(#000, 0.075)
|
||||
//box-shadow 0 1px 0 rgba(#000, 0.075)
|
||||
|
||||
&, *
|
||||
user-select none
|
||||
|
|
@ -167,7 +167,7 @@ export default Vue.extend({
|
|||
-webkit-backdrop-filter blur(12px)
|
||||
backdrop-filter blur(12px)
|
||||
//background-color rgba(#1b2023, 0.75)
|
||||
background-color #1b2023
|
||||
background-color isDark ? #313543 : #595f6f
|
||||
|
||||
> p
|
||||
display none
|
||||
|
|
@ -244,4 +244,10 @@ export default Vue.extend({
|
|||
line-height $height
|
||||
border-left solid 1px rgba(#000, 0.1)
|
||||
|
||||
.header[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.header:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,9 +65,3 @@ export default Vue.extend({
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-user-timeline
|
||||
max-width 600px
|
||||
margin 0 auto
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,6 @@ export default Vue.extend({
|
|||
|
||||
mounted() {
|
||||
document.title = 'Misskey';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -40,9 +40,6 @@ export default Vue.extend({
|
|||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
|
|
|
|||
|
|
@ -39,9 +39,6 @@ export default Vue.extend({
|
|||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@ export default Vue.extend({
|
|||
|
||||
mounted() {
|
||||
document.title = 'Misskey';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
|
||||
Progress.start();
|
||||
},
|
||||
|
|
@ -163,11 +162,14 @@ main
|
|||
background #eee
|
||||
|
||||
> .tl
|
||||
max-width 600px
|
||||
max-width 680px
|
||||
margin 0 auto
|
||||
padding 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 32px
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ export default Vue.extend({
|
|||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@
|
|||
<mk-ui>
|
||||
<span slot="header">%fa:R bell%%i18n:@notifications%</span>
|
||||
<template slot="func"><button @click="fn">%fa:check%</button></template>
|
||||
<mk-notifications @fetched="onFetched"/>
|
||||
|
||||
<main>
|
||||
<mk-notifications @fetched="onFetched"/>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,7 +16,6 @@ import Progress from '../../../common/scripts/loading';
|
|||
export default Vue.extend({
|
||||
mounted() {
|
||||
document.title = 'Misskey | %i18n:@notifications%';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
|
||||
Progress.start();
|
||||
},
|
||||
|
|
@ -30,3 +32,20 @@ export default Vue.extend({
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
main
|
||||
width 100%
|
||||
max-width 680px
|
||||
margin 0 auto
|
||||
padding 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 32px
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ export default Vue.extend({
|
|||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey | %i18n:@title%';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
setAvatar() {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ export default Vue.extend({
|
|||
},
|
||||
mounted() {
|
||||
document.title = `%i18n:@search%: ${this.q} | Misskey`;
|
||||
document.documentElement.style.background = '#313a42';
|
||||
|
||||
this.fetch();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ export default Vue.extend({
|
|||
},
|
||||
mounted() {
|
||||
document.title = 'Misskey | %i18n:@settings%';
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
signout() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<template slot="header" v-if="!fetching"><img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">{{ user | userName }}</template>
|
||||
<main v-if="!fetching">
|
||||
<main v-if="!fetching" :data-darkmode="_darkmode_">
|
||||
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
|
||||
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
|
||||
<header>
|
||||
|
|
@ -45,9 +45,9 @@
|
|||
</header>
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a :data-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
|
||||
<a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
|
||||
<a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
|
||||
<a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a>
|
||||
<a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a>
|
||||
<a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="body">
|
||||
|
|
@ -88,9 +88,6 @@ export default Vue.extend({
|
|||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
mounted() {
|
||||
document.documentElement.style.background = '#313a42';
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Progress.start();
|
||||
|
|
@ -110,7 +107,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
main
|
||||
root(isDark)
|
||||
> .is-suspended
|
||||
> .is-remote
|
||||
&.is-suspended
|
||||
|
|
@ -138,7 +135,7 @@ main
|
|||
|
||||
> .banner
|
||||
padding-bottom 33.3%
|
||||
background-color #1b1b1b
|
||||
background-color isDark ? #0e0e0e : #cacaca
|
||||
background-size cover
|
||||
background-position center
|
||||
|
||||
|
|
@ -165,13 +162,13 @@ main
|
|||
left -2px
|
||||
bottom -2px
|
||||
width 100%
|
||||
border 3px solid #313a42
|
||||
border 3px solid isDark ? #191b22 : #ececed
|
||||
border-radius 6px
|
||||
|
||||
@media (min-width 500px)
|
||||
left -4px
|
||||
bottom -4px
|
||||
border 4px solid #313a42
|
||||
border 4px solid isDark ? #191b22 : #ececed
|
||||
border-radius 12px
|
||||
|
||||
> .mk-follow-button
|
||||
|
|
@ -185,14 +182,14 @@ main
|
|||
margin 0
|
||||
line-height 22px
|
||||
font-size 20px
|
||||
color #fff
|
||||
color isDark ? #fff : #757c82
|
||||
|
||||
> .username
|
||||
display inline-block
|
||||
line-height 20px
|
||||
font-size 16px
|
||||
font-weight bold
|
||||
color #657786
|
||||
color isDark ? #657786 : #969ea5
|
||||
|
||||
> .followed
|
||||
margin-left 8px
|
||||
|
|
@ -204,7 +201,7 @@ main
|
|||
|
||||
> .description
|
||||
margin 8px 0
|
||||
color #fff
|
||||
color isDark ? #fff : #757c82
|
||||
|
||||
> .info
|
||||
margin 8px 0
|
||||
|
|
@ -212,14 +209,14 @@ main
|
|||
> p
|
||||
display inline
|
||||
margin 0 16px 0 0
|
||||
color #a9b9c1
|
||||
color isDark ? #a9b9c1 : #90989c
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
> .status
|
||||
> a
|
||||
color #657786
|
||||
color isDark ? #657786 : #818a92
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 16px
|
||||
|
|
@ -227,7 +224,7 @@ main
|
|||
> b
|
||||
margin-right 4px
|
||||
font-size 16px
|
||||
color #fff
|
||||
color isDark ? #fff : #787e86
|
||||
|
||||
> i
|
||||
font-size 14px
|
||||
|
|
@ -235,9 +232,9 @@ main
|
|||
> nav
|
||||
position -webkit-sticky
|
||||
position sticky
|
||||
top 48px
|
||||
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
|
||||
background-color #313a42
|
||||
top 47px
|
||||
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
|
||||
background-color isDark ? #191b22 : #ececed
|
||||
z-index 1
|
||||
|
||||
> .nav-container
|
||||
|
|
@ -253,7 +250,7 @@ main
|
|||
line-height 52px
|
||||
font-size 14px
|
||||
text-decoration none
|
||||
color #657786
|
||||
color isDark ? #657786 : #9ca1a5
|
||||
border-bottom solid 2px transparent
|
||||
|
||||
&[data-active]
|
||||
|
|
@ -262,9 +259,20 @@ main
|
|||
border-color $theme-color
|
||||
|
||||
> .body
|
||||
max-width 680px
|
||||
margin 0 auto
|
||||
padding 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 16px
|
||||
|
||||
@media (min-width 600px)
|
||||
padding 32px
|
||||
|
||||
main[data-darkmode]
|
||||
root(true)
|
||||
|
||||
main:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,11 +64,14 @@ export default Vue.extend({
|
|||
> section
|
||||
background #eee
|
||||
border-radius 8px
|
||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||
box-shadow 0 4px 16px rgba(#000, 0.1)
|
||||
|
||||
&:not(:last-child)
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-bottom 16px
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
padding 8px 10px
|
||||
|
|
|
|||
Loading…
Reference in a new issue