💄 Site > Versions > Add style

site/src/components/application/style.styl

@@ -6,6 +6,17 @@
     width 100%
     height 100%
     overflow hidden
+    font-family Helvetica, Arial
+
+a
+    text-decoration none
+
+// Scroll hack
+.scroll-hack
+    position absolute
+    top 0
+    left 0
+    overflow scroll
 
 // Reset
 html, body, div, span, applet, object, iframe,

site/src/components/file/style.styl

@@ -2,7 +2,8 @@
     position absolute
     top 0
     right 0
-    width 75%
+    left 315px
+    right 0
     height 100%
     background rgba(0, 255, 0, 0.3)
 

site/src/components/version/style.styl

@@ -1,2 +1,55 @@
 .version
+    position relative
     display block
+    width 200px
+    height 50px
+    background #232733
+    margin-top 1px
+    margin-bottom 2px
+    margin-left 1px
+    color #F6F6F6
+
+    &.active
+        width 202px
+        margin-left 0
+        background #2D2D49
+
+    .date
+        position absolute
+        top 14px
+        left 8px
+        opacity 0.6
+        font-size 10px
+
+    .from-now
+        position absolute
+        top 28px
+        left 8px
+        opacity 0.6
+        font-size 7px
+        text-transform uppercase
+
+    .modified-lines
+        position absolute
+        top 25px
+        right 8px
+        opacity 0.6
+        font-size 10px
+
+    .repartition
+        position absolute
+        top 17px
+        right 6px
+        font-size 0
+
+        .block
+            display inline-block
+            width 4px
+            height 4px
+            margin-right 2px
+
+            &.added
+                background #41FF79
+
+            &.removed
+                background #FD4141

site/src/components/version/template.html

@@ -6,7 +6,8 @@
         {{ fromNow }}
     </div>
     <div class="repartition">
-        <span v-for="added in repartition.added">1</span><span v-for="removed in repartition.removed">0</span>
+        <span class="block added" v-for="block in repartition.added"></span>
+        <span class="block removed" v-for="block in repartition.removed"></span>
     </div>
     <div class="modified-lines">
         {{ modifiedLines }}

site/src/components/versions/script.js

@@ -29,6 +29,11 @@ export default
             })
 
             return versions
+        },
+
+        scrollbarWidth()
+        {
+            return this.$store.state.scrollbarWidth
         }
     },
 

site/src/components/versions/style.styl

@@ -2,7 +2,7 @@
     position absolute
     top 30px
     left 0
-    width 25%
+    width 202px
-    height 100%
+    bottom 0
-    overflow-y scroll
+    overflow hidden
-    background rgba(255, 0, 0, 0.3)
+    background #1E202F

site/src/components/versions/template.html

@@ -1,3 +1,5 @@
 <div class="versions">
+    <div class="scroll-hack" :style="`bottom:-${scrollbarWidth}px;right:-${scrollbarWidth}px;`">
         <version v-for="(version, key) of versions" :key="version.date" :content="version" @click.native.prevent="onVersionClick(version, key)"></version>
+    </div>
 </div>

site/src/components/viewer/style.styl

@@ -26,16 +26,7 @@
     overflow hidden
 
     .version-active &
-        width 75%
+        width calc(100% - 202px)
-
-.scroll-hack
-    position absolute
-    top 0
-    left 0
-    bottom -15px
-    right -15px
-    overflow scroll
-
 
 .lines
     position absolute