diff --git a/index.html b/index.html
index ec831c415f1559fe5f1f20bba2e9a50e860e63d2..6224224f7e85d0cfff20451160f84b9f4dcf7dd5 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
<title>Pleroma</title>
<link rel="stylesheet" href="/static/font/css/fontello.css">
<link rel="stylesheet" href="/static/font/css/animation.css">
+ <link rel="stylesheet" href="/static/css/theme.css">
</head>
<body>
<div id="app"></div>
diff --git a/src/App.scss b/src/App.scss
index ced2d06990997274e58d5e0f37c926553ac86182..377c629731c6cfd768141460a38e17135dcc06f8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,5 @@
@import './_variables.scss';
#app {
- background-color: $main-color;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
@@ -28,7 +27,6 @@ body {
a {
text-decoration: none;
- color: $main-color;
}
.container {
@@ -55,7 +53,6 @@ a {
}
nav {
- background: black;
width: 100%;
align-items: center;
position: fixed;
@@ -72,27 +69,6 @@ main-router {
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 {
color: rgba(0, 0, 0, 0.42);
font-weight: 300;
@@ -108,7 +84,6 @@ main-router {
.panel {
display: flex;
flex-direction: column;
- background-color: $main-background;
margin: 0.5em;
border-radius: 0.5em;
@@ -117,7 +92,6 @@ main-router {
.panel-heading {
border-radius: 0.5em 0.5em 0 0;
background-size: cover;
- background-color: bisque;
padding-top: 0.3em;
padding-bottom: 0.3em;
text-align: center;
@@ -125,12 +99,12 @@ main-router {
}
.panel-footer {
- background-color: bisque;
border-radius: 0 0 0.5em 0.5em;
}
.panel-body > p {
- margin: 1em;
+ padding: 1em;
+ margin: 0;
}
@@ -176,10 +150,6 @@ main-router {
font-weight: lighter;
margin: 0;
}
-
- span {
- color: $main-color;
- }
}
.fa {
@@ -200,17 +170,12 @@ status-text-container {
display: block;
}
-attention {
- color: $main-color;
-}
-
.status-el {
line-height: 18px;
.notify {
.avatar {
border-width: 3px;
- border-color: $main-color;
border-style: solid;
}
}
diff --git a/src/App.vue b/src/App.vue
index 2cd6d079393232280eac9e4b52c8a771a72c588f..18a8ad150f21b324a72c57484e55f6de5491669a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
<template>
- <div id="app" v-bind:style="style">
- <nav class='container'>
+ <div id="app" v-bind:style="style" class="base02-background">
+ <nav class='container base01-background base04'>
<div class='item'>
<a route-to='friends-timeline' href="#">Pleroma FE</a>
</div>
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index e16cc7cddaa12c3603ffba103562e98b2df99256..fe57924e52392b0966c6f54abd2f90d9f7b23a7c 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -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 */
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 60b3f0440f880314fe92ed2048f9691b2043cad4..00d3e062cccbf0b7b27a663123a630e8ec487f66 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -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>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 6eaf0607b5d16d24359209e4e85f4ff77cbefac1..fd53b5055e2279c3a45816afe23439b3441f4624 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -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>
diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue
index af8ba5fee5371da8ea78868b50e1fd5b0218fe77..88c477abc2a95fc5968509865ef78a7134422a40 100644
--- a/src/components/friends_timeline/friends_timeline.vue
+++ b/src/components/friends_timeline/friends_timeline.vue
@@ -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>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index be1e970c054c861a5d7af7e0ddbdd3e6fc57668c..c0169a08540b34085add2f9d3e189491426e8a81 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -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">
diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue
index 6287ca117bc8b828885e660733ee2c348915cbfd..cf97f9ee56546e82ad17d35cbf57f4dbbbed82e1 100644
--- a/src/components/mentions/mentions.vue
+++ b/src/components/mentions/mentions.vue
@@ -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>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index b709d9140b7210a5cf6f93675823fba076959032..2082f41ac9466aefc019b9f8e084b1f3c4b2106d 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -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;
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 6f5dd721f9d24255beb47f7b39c8aa15e8777112..ba5d897100c99e0d83fda5f70e7d3b0b8160c8ce 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -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">
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue
index 94cdaf17fb5a4d0382289313c3c8a082d75c0ddc..282bb15ba0aceab612465c0143a9e76808ffa480 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.vue
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue
@@ -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>
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 22a2a2b8fc101f254ba4d9d45cef3bbbb3be6e45..ada40005c7634383775303d03aa0226f58619215 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -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>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 42499407385c58e2a49f6cf9cf146684ff429f40..e043f6e20a9e18507d5ff8a0adfcce25e664e655 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -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>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 7de3ffcace0114649a9ca6b75c9b70e3819dafae..9338682c4f1c293cdaf01b762bb0fd9e1007fe5d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -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>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index d9e661a9ec4ff64e0ce526d0ab48cdc5a1739fbf..fb121e3cff87552317548dadf6dd2fdbce1e1a89 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -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>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 8ecf1391d3ebe08026b657e6015dfb537163f128..c5a5ff43d30bd6c364b15d7c96d2cc2ba401af79 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -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>
diff --git a/static/css/theme.css b/static/css/theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..803b051cb951916cbf0b8283a4b97bbf85cb4dc7
--- /dev/null
+++ b/static/css/theme.css
@@ -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 */