moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -5,6 +5,7 @@
<title>Pleroma</title> <title>Pleroma</title>
<link rel="stylesheet" href="/static/font/css/fontello.css"> <link rel="stylesheet" href="/static/font/css/fontello.css">
<link rel="stylesheet" href="/static/font/css/animation.css"> <link rel="stylesheet" href="/static/font/css/animation.css">
<link rel="stylesheet" href="/static/css/theme.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

39
src/App.scss
View File

@ -1,6 +1,5 @@
@import './_variables.scss'; @import './_variables.scss';
#app { #app {
background-color: $main-color;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -28,7 +27,6 @@ body {
a { a {
text-decoration: none; text-decoration: none;
color: $main-color;
} }
.container { .container {
@ -55,7 +53,6 @@ a {
} }
nav { nav {
background: black;
width: 100%; width: 100%;
align-items: center; align-items: center;
position: fixed; position: fixed;
@ -72,27 +69,6 @@ main-router {
flex: 1; flex: 1;
} }
.status:hover {
background-color: $darkened-background;
}
.new-status-notification {
font-size: 1.1em;
background-color: $darkened-background;
border-bottom-color: darken($darkened-background, 5%);
border-bottom-style: solid;
border-bottom-width: 1px;
&:hover {
background-color: darken($darkened-background, 5%);
}
p {
margin: 0px;
padding: 10px;
}
}
.status.compact { .status.compact {
color: rgba(0, 0, 0, 0.42); color: rgba(0, 0, 0, 0.42);
font-weight: 300; font-weight: 300;
@ -108,7 +84,6 @@ main-router {
.panel { .panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: $main-background;
margin: 0.5em; margin: 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
@ -117,7 +92,6 @@ main-router {
.panel-heading { .panel-heading {
border-radius: 0.5em 0.5em 0 0; border-radius: 0.5em 0.5em 0 0;
background-size: cover; background-size: cover;
background-color: bisque;
padding-top: 0.3em; padding-top: 0.3em;
padding-bottom: 0.3em; padding-bottom: 0.3em;
text-align: center; text-align: center;
@ -125,12 +99,12 @@ main-router {
} }
.panel-footer { .panel-footer {
background-color: bisque;
border-radius: 0 0 0.5em 0.5em; border-radius: 0 0 0.5em 0.5em;
} }
.panel-body > p { .panel-body > p {
margin: 1em; padding: 1em;
margin: 0;
} }
@ -176,10 +150,6 @@ main-router {
font-weight: lighter; font-weight: lighter;
margin: 0; margin: 0;
} }
span {
color: $main-color;
}
} }
.fa { .fa {
@ -200,17 +170,12 @@ status-text-container {
display: block; display: block;
} }
attention {
color: $main-color;
}
.status-el { .status-el {
line-height: 18px; line-height: 18px;
.notify { .notify {
.avatar { .avatar {
border-width: 3px; border-width: 3px;
border-color: $main-color;
border-style: solid; border-style: solid;
} }
} }

4
src/App.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="app" v-bind:style="style"> <div id="app" v-bind:style="style" class="base02-background">
<nav class='container'> <nav class='container base01-background base04'>
<div class='item'> <div class='item'>
<a route-to='friends-timeline' href="#">Pleroma FE</a> <a route-to='friends-timeline' href="#">Pleroma FE</a>
</div> </div>

9
src/components/attachment/attachment.vue
View File

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

4
src/components/conversation/conversation.vue
View File

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

5
src/components/favorite_button/favorite_button.vue
View File

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

4
src/components/friends_timeline/friends_timeline.vue
View File

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

4
src/components/login_form/login_form.vue
View File

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

4
src/components/mentions/mentions.vue
View File

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

4
src/components/nav_panel/nav_panel.vue
View File

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

4
src/components/notifications/notifications.vue
View File

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

4
src/components/public_and_external_timeline/public_and_external_timeline.vue
View File

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

4
src/components/public_timeline/public_timeline.vue
View File

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

4
src/components/status/status.vue
View File

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

17
src/components/timeline/timeline.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="timeline"> <div class="timeline">
<a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0"> <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" > <p class="text-center" >
{{timeline.newStatusCount}} new statuses {{timeline.newStatusCount}} new statuses
</p> </p>
@ -9,7 +9,7 @@
</a> </a>
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status> <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"> <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" > <p class="text-center" >
Load older statuses. Load older statuses.
</p> </p>
@ -18,3 +18,16 @@
</div> </div>
</template> </template>
<script src="./timeline.js"></script> <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>

2
src/components/user_card_content/user_card_content.vue
View File

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

2
src/components/user_panel/user_panel.vue
View File

@ -4,7 +4,7 @@
<user-card-content :user="user"></user-card-content> <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> <post-status-form v-if='user'></post-status-form>
</div> </div>
</div> </div>

38
static/css/theme.css Normal file
View File

@ -0,0 +1,38 @@
.base00-background { background-color: #002b36; }
.base01-background { background-color: #073642; }
.base02-background { background-color: #586e75; }
.base03-background { background-color: #657b83; }
.base04-background { background-color: #839496; }
.base05-background { background-color: #93a1a1; }
.base06-background { background-color: #eee8d5; }
.base07-background { background-color: #fdf6e3; }
.base08-background { background-color: #dc322f; }
.base09-background { background-color: #cb4b16; }
.base0A-background { background-color: #b58900; }
.base0B-background { background-color: #859900; }
.base0C-background { background-color: #2aa198; }
.base0D-background { background-color: #268bd2; }
.base0E-background { background-color: #6c71c4; }
.base0F-background { background-color: #d33682; }
.base00 { color: #002b36; }
.base01 { color: #073642; }
.base02 { color: #586e75; }
.base03 { color: #657b83; }
.base04 { color: #839496; }
.base05 { color: #93a1a1; }
.base06 { color: #eee8d5; }
.base07 { color: #fdf6e3; }
.base08 { color: #dc322f; }
.base09 { color: #cb4b16; }
.base0A { color: #b58900; }
.base0B { color: #859900; }
.base0C { color: #2aa198; }
.base0D { color: #268bd2; }
.base0E { color: #6c71c4; }
.base0F { color: #d33682; }
.base05-border { border-color: #93a1a1; }
a { color: #dc322f; } /* base08 */
body { color: #93a1a1; } /* base05 */