subtype/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Make buttons stand out with some shading.

Browse source
This commit is contained in:
Shpuld Shpuldson 2017-06-21 17:15:45 +03:00
parent 8e5d17a659
commit bf84a87821
3 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App.scss
View file

@ -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);
}
}

2
src/components/notifications/notifications.vue
View file

@ -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}'>

26
src/components/timeline/timeline.vue
View file

@ -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;
}
}