Add styling with base16.

Solarized-dark for now.
This commit is contained in:
Roger Braun 2017-01-15 15:44:56 +01:00
parent 590782701d
commit fc7e13e7bb
18 changed files with 83 additions and 70 deletions

View file

@ -9,7 +9,7 @@
<a class="image-attachment" v-if="type === 'image' && !hidden"
:href="attachment.url" target="_blank">
<img referrerpolicy="no-referrer" :src="attachment.url"></img>
<img class="base05-border" referrerpolicy="no-referrer" :src="attachment.url"></img>
</a>
<video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
@ -97,10 +97,6 @@
h1 {
font-size: 14px;
margin: 0px;
a {
color: black;
}
}
}
}
@ -111,7 +107,8 @@
img {
width: 100%;
border: 1px solid;
border-style: solid;
border-width: 1px;
border-radius: 0.5em;
width: 100%;
height: 100%; /* If this isn't here, chrome will stretch the images */

View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">Status</div>
<div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04">Status</div>
<div class="panel-body">
<div class="timeline">
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>

View file

@ -8,14 +8,13 @@
<script src="./favorite_button.js" ></script>
<style lang='scss'>
@import '../../_variables.scss';
.favorite-button {
cursor: pointer;
&:hover {
color: $main-color;
color: orange;
}
}
.icon-star {
color: $main-color;
color: orange;
}
</style>

View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">Friends Timeline</div>
<div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04">Friends Timeline</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
</div>

View file

@ -1,7 +1,7 @@
<template>
<div class="login panel panel-default">
<div class="login panel panel-default base00-background">
<!-- Default panel contents -->
<div class="panel-heading">
<div class="panel-heading base01-background base04">
Log in
</div>
<div class="panel-body">

View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">Mentions</div>
<div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04">Mentions</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
</div>

View file

@ -1,6 +1,6 @@
<template>
<div class="nav-panel">
<div class="panel panel-default">
<div class="panel panel-default base01-background">
<ul>
<li v-if='currentUser'>
<router-link to='/main/friends'>
@ -38,7 +38,7 @@
}
.nav-panel li {
border-bottom: 1px solid silver;
border-bottom: 1px solid;
padding: 0.5em;
padding-left: 1em;
}

View file

@ -1,7 +1,7 @@
<template>
<div class="notifications">
<div class="panel panel-default">
<div class="panel-heading">Notifications ({{visibleNotifications.length}})</div>
<div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div>
<div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification">
<a :href="notification.action.user.statusnet_profile_url">

View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">THE WHOLE KNOWN NETWORK</div>
<div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
</div>

View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">Public Timeline</div>
<div class="timeline panel panel-default base00-background">
<div class="panel-heading base01-background base04">Public Timeline</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
</div>

View file

@ -120,10 +120,10 @@
.status {
padding: 0.5em;
padding-right: 1em;
border-bottom: 1px solid silver;
border-bottom: 1px solid;
}
.status-el:last-child .status {
border: none
border-bottom: none
}
</style>

View file

@ -1,7 +1,7 @@
<template>
<div class="timeline">
<a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
<div class="new-status-notification">
<div class="base01-background base05-border new-status-notification">
<p class="text-center" >
{{timeline.newStatusCount}} new statuses
</p>
@ -9,7 +9,7 @@
</a>
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="new-status-notification">
<div class="base01-background base05-border new-status-notification">
<p class="text-center" >
Load older statuses.
</p>
@ -18,3 +18,16 @@
</div>
</template>
<script src="./timeline.js"></script>
<style lang="scss">
.new-status-notification {
border-style: solid;
border-width: 1px;
font-size: 1.1em;
p {
margin: 0px;
padding: 10px;
}
}
</style>

View file

@ -26,7 +26,7 @@
</div>
</div>
</div>
<div class="panel-body">
<div class="panel-body base00-background">
<div class="user-counts">
<div class="user-count">
<h5>Statuses</h5>

View file

@ -4,7 +4,7 @@
<user-card-content :user="user"></user-card-content>
<div class="panel-footer">
<div class="panel-footer base00-background">
<post-status-form v-if='user'></post-status-form>
</div>
</div>