diff options
Diffstat (limited to 'src/components/timeline')
| -rw-r--r-- | src/components/timeline/timeline.vue | 28 |
1 files changed, 16 insertions, 12 deletions
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index d6ecfd2f..b6a5ab14 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,48 +1,48 @@ <template> <div class="timeline panel panel-default" v-if="viewing == 'statuses'"> - <div class="panel-heading timeline-heading base02-background base04"> + <div class="panel-heading timeline-heading"> <div class="title"> {{title}} </div> - <button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> + <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> {{$t('timeline.show_new')}}{{newStatusCountStr}} </button> - <div @click.prevent class="base06 error loadmore-text" v-if="timelineError"> + <div @click.prevent class="loadmore-text" v-if="timelineError"> {{$t('timeline.error_fetching')}} </div> - <div @click.prevent class="base04 base02-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError"> + <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError"> {{$t('timeline.up_to_date')}} </div> </div> - <div class="panel-body base01-background"> + <div class="panel-body"> <div class="timeline"> <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation> <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading"> - <div class="base02-background base03-border new-status-notification text-center">{{$t('timeline.load_older')}}</div> + <div class="new-status-notification text-center">{{$t('timeline.load_older')}}</div> </a> - <div class="base02-background base03-border new-status-notification text-center" v-else>...</div> + <div class="new-status-notification text-center" v-else>...</div> </div> </div> </div> <div class="timeline panel panel-default" v-else-if="viewing == 'followers'"> - <div class="panel-heading timeline-heading base02-background base04"> + <div class="panel-heading timeline-heading"> <div class="title"> {{$t('user_card.followers')}} </div> </div> - <div class="panel-body base01-background"> + <div class="panel-body"> <div class="timeline"> <user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card> </div> </div> </div> <div class="timeline panel panel-default" v-else-if="viewing == 'friends'"> - <div class="panel-heading timeline-heading base02-background base04"> + <div class="panel-heading timeline-heading"> <div class="title"> {{$t('user_card.followees')}} </div> </div> - <div class="panel-body base01-background"> + <div class="panel-body"> <div class="timeline"> <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card> </div> @@ -79,13 +79,16 @@ font-size: 14px; min-width: 6em; border-radius: 5px; + background-color: transparent; + color: var(--faint); font-family: sans-serif; text-align: center; padding: 0 0.5em 0 0.5em; opacity: 0.8; } .error { - background-color: rgba(255, 48, 16, 0.65); + color: var(--lightFg); + background-color: var(--cRed); } } @@ -96,6 +99,7 @@ border-width: 1px 0 0 0; border-style: solid; border-radius: 0 0 10px 10px; + border-color: var(--border); padding: 10px; z-index: 1; } |