Add styling with base16.

Solarized-dark for now.
2017-01-15 15:44:56 +01:00 · 2017-01-15 15:44:56 +01:00 · fc7e13e7bb
commit fc7e13e7bb
parent 590782701d
18 changed files with 83 additions and 70 deletions
--- 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>
--- 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;
        }
    }
--- 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>
--- 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 */
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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;
 }
--- 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">
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- a/static/css/theme.css
+++ 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 */