diff options
| -rw-r--r-- | src/App.scss | 7 | ||||
| -rw-r--r-- | src/App.vue | 4 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 2 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 26 |
4 files changed, 26 insertions, 13 deletions
diff --git a/src/App.scss b/src/App.scss index a5f190cb..15c908d9 100644 --- a/src/App.scss +++ b/src/App.scss @@ -33,9 +33,14 @@ 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; + font-family: sans-serif; &:hover { - opacity: 0.8; + box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3); } } diff --git a/src/App.vue b/src/App.vue index b2d8df8b..79eded08 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,8 +13,8 @@ </nav> <div class="container" id="content"> <div class="panel-switcher"> - <button @click="activatePanel('sidebar')">Sidebar</button> - <button @click="activatePanel('timeline')">Timeline</button> + <button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button> + <button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button> </div> <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}"> <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }"> 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..a9162120 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: sans-serif; + 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; - } } |