forked from FoundKeyGang/FoundKey
🎨
This commit is contained in:
parent
3a5f55c471
commit
4a93dadc1c
4 changed files with 24 additions and 22 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-note-detail" tabindex="-1">
|
<div class="mk-note-detail" tabindex="-1" :class="{ shadow: $store.state.device.useShadow }">
|
||||||
<button
|
<button
|
||||||
class="more"
|
class="more"
|
||||||
v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
|
v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
|
||||||
|
@ -165,6 +165,8 @@ export default Vue.extend({
|
||||||
text-align left
|
text-align left
|
||||||
background var(--face)
|
background var(--face)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
|
&.shadow
|
||||||
box-shadow 0 4px 16px rgba(#000, 0.1)
|
box-shadow 0 4px 16px rgba(#000, 0.1)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
|
@ -180,7 +182,7 @@ export default Vue.extend({
|
||||||
width 100%
|
width 100%
|
||||||
font-size 1em
|
font-size 1em
|
||||||
text-align center
|
text-align center
|
||||||
color #999
|
color var(--text)
|
||||||
cursor pointer
|
cursor pointer
|
||||||
background var(--subNoteBg)
|
background var(--subNoteBg)
|
||||||
outline none
|
outline none
|
||||||
|
@ -289,7 +291,7 @@ export default Vue.extend({
|
||||||
> .location
|
> .location
|
||||||
margin 4px 0
|
margin 4px 0
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color #ccc
|
color var(--text)
|
||||||
|
|
||||||
> .map
|
> .map
|
||||||
width 100%
|
width 100%
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ivaojijs">
|
<div class="ivaojijs" :class="{ shadow: $store.state.device.useShadow }">
|
||||||
<div class="empty" v-if="notes.length == 0 && !fetching && inited">{{ $t('@.no-notes') }}</div>
|
<div class="empty" v-if="notes.length == 0 && !fetching && inited">{{ $t('@.no-notes') }}</div>
|
||||||
|
|
||||||
<mk-error v-if="!fetching && !inited" @retry="init()"/>
|
<mk-error v-if="!fetching && !inited" @retry="init()"/>
|
||||||
|
@ -192,6 +192,8 @@ export default Vue.extend({
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background var(--face)
|
background var(--face)
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
|
|
||||||
|
&.shadow
|
||||||
box-shadow 0 4px 16px rgba(#000, 0.1)
|
box-shadow 0 4px 16px rgba(#000, 0.1)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
|
@ -239,13 +241,7 @@ export default Vue.extend({
|
||||||
padding 32px
|
padding 32px
|
||||||
max-width 400px
|
max-width 400px
|
||||||
text-align center
|
text-align center
|
||||||
color #999
|
color var(--text)
|
||||||
|
|
||||||
> [data-icon]
|
|
||||||
display block
|
|
||||||
margin-bottom 16px
|
|
||||||
font-size 3em
|
|
||||||
color #ccc
|
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
text-align center
|
text-align center
|
||||||
|
@ -258,7 +254,7 @@ export default Vue.extend({
|
||||||
margin 0
|
margin 0
|
||||||
padding 16px
|
padding 16px
|
||||||
width 100%
|
width 100%
|
||||||
color #ccc
|
color var(--text)
|
||||||
|
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
padding 20px
|
padding 20px
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="header" ref="root">
|
<div class="header" ref="root" :class="{ shadow: $store.state.device.useShadow }">
|
||||||
<p class="warn" v-if="env != 'production'">{{ $t('@.do-not-use-in-production') }} <a href="/assets/flush.html?force">Flush</a></p>
|
<p class="warn" v-if="env != 'production'">{{ $t('@.do-not-use-in-production') }} <a href="/assets/flush.html?force">Flush</a></p>
|
||||||
<div class="main" ref="main">
|
<div class="main" ref="main">
|
||||||
<div class="backdrop"></div>
|
<div class="backdrop"></div>
|
||||||
|
@ -47,6 +47,8 @@ export default Vue.extend({
|
||||||
z-index 1024
|
z-index 1024
|
||||||
width calc(100% + 16px)
|
width calc(100% + 16px)
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
|
|
||||||
|
&.shadow
|
||||||
box-shadow 0 0px 8px rgba(0, 0, 0, 0.25)
|
box-shadow 0 0px 8px rgba(0, 0, 0, 0.25)
|
||||||
|
|
||||||
&, *
|
&, *
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<nav v-if="$route.name == 'user'">
|
<nav v-if="$route.name == 'user'" :class="{ shadow: $store.state.device.useShadow }">
|
||||||
<div class="nav-container">
|
<div class="nav-container">
|
||||||
<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> {{ $t('overview') }}</a>
|
<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> {{ $t('overview') }}</a>
|
||||||
<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</a>
|
<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</a>
|
||||||
|
@ -315,10 +315,12 @@ export default Vue.extend({
|
||||||
position -webkit-sticky
|
position -webkit-sticky
|
||||||
position sticky
|
position sticky
|
||||||
top 47px
|
top 47px
|
||||||
box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
|
|
||||||
background-color $bg
|
background-color $bg
|
||||||
z-index 2
|
z-index 2
|
||||||
|
|
||||||
|
&.shadow
|
||||||
|
box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
|
||||||
|
|
||||||
> .nav-container
|
> .nav-container
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
justify-content center
|
||||||
|
|
Loading…
Reference in a new issue