diff options
| -rw-r--r-- | src/App.scss | 8 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 2 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 26 |
3 files changed, 24 insertions, 12 deletions
diff --git a/src/App.scss b/src/App.scss index a5f190cb..3ba79f3f 100644 --- a/src/App.scss +++ b/src/App.scss @@ -33,9 +33,13 @@ button{ border: none; border-radius: 5px; cursor: pointer; - + border-top: 1px solid rgba(255, 255, 255, 0.2); + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 2px black; + font-size: 14px; + &:hover { - opacity: 0.8; + box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index f5950ac9..6c0419a5 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -4,7 +4,7 @@ <div class="panel-heading base01-background base04"> <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span> Notifications - <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button> + <button @click.prevent="markAsSeen" class="base05 base01-background read-button">Read!</button> </div> <div class="panel-body base03-border"> <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'> diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 08733f4f..9c13fd99 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -4,15 +4,15 @@ <div class="title"> {{title}} </div> - <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> + <button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> Show new ({{timeline.newStatusCount}}) </button> - <button @click.prevent class="base06 error no-press loadmore-button" v-if="timelineError"> + <div @click.prevent class="base06 error loadmore-text" v-if="timelineError"> Error fetching updates - </button> - <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timelineError"> + </div> + <div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError"> Up-to-date - </button> + </div> </div> <div class="panel-body"> <div class="timeline"> @@ -43,18 +43,26 @@ .loadmore-button { position: absolute; right: 0.6em; + font-size: 14px; min-width: 6em; height: 1.8em; line-height: 100%; } + .loadmore-text { + position: absolute; + right: 0.6em; + font-size: 14px; + min-width: 6em; + border-radius: 5px; + font-family: arial; + text-align: center; + padding: 0 0.5em 0 0.5em; + opacity: 0.8; + } .error { background-color: rgba(255, 48, 16, 0.65); } - .no-press { - opacity: 0.8; - cursor: default; - } } |