💄 Site > File > Header > Add style

site/src/components/application/style.styl

@@ -7,6 +7,8 @@
     height 100%
     overflow hidden
     font-family Helvetica, Arial
+    -webkit-font-smoothing antialiased
+    -moz-osx-font-smoothing grayscale
 
 a
     text-decoration none

site/src/components/file/style.styl

@@ -10,4 +10,104 @@
 header
     position absolute
     top 0
-    left 0
+    left 0
+    right 0
+    height 50px
+    background #1E202F
+
+    a
+        &.active
+            background #26283B
+
+        .icon
+            &.default
+                display inline-block
+
+            &.hover
+                display none
+
+        &:hover
+            .icon
+                &.default
+                    display none
+
+                &.hover
+                    display inline-block
+
+    .versions-toggle
+        display block
+        position absolute
+        top 0
+        left 0
+        width 50px
+        height 50px
+        padding-top 13px
+        padding-left 18px
+
+        .icon
+            &.default
+                opacity 0.5
+
+        &.active
+            background #26283B
+
+    .differences-toggle
+        display block
+        position absolute
+        top 0
+        left 50px
+        width 58px
+        height 50px
+        padding-top 13px
+        padding-left 19px
+
+        .icon
+            &.default
+                opacity 0.7
+
+        &.active
+            background #26283B
+
+    .copy
+        display block
+        position absolute
+        top 0
+        right 58px
+        width 58px
+        height 50px
+        padding-top 14px
+        padding-left 22px
+
+        .icon
+            &.default
+                opacity 0.8
+
+        &.active
+            background #26283B
+
+    .download
+        display block
+        position absolute
+        top 0
+        right 0
+        width 58px
+        height 50px
+        padding-top 14px
+        padding-left 22px
+
+        .icon
+            &.default
+                opacity 0.5
+
+    .path
+        position absolute
+        top 20px
+        left 0
+        right 0
+        text-align center
+        font-size 14px
+        color #fff
+        letter-spacing 0.25px
+
+        .directory
+            opacity 0.3

site/src/components/file/template.html

@@ -1,18 +1,46 @@
 <div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">
+
+    <!-- Header -->
     <header>
-        <a href="#" @click.prevent="onDifferencesClick" v-if="isCode">Differences <span v-if="differencesActive">(on)</span></a>
-        <a href="#" @click.prevent="onVersionsClick" v-if="isCode">Versions <span v-if="versionsActive">(on)</span></a>
-        <a :href="downloadUrl" download>Download</a>
-        <a href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">{{ this.copied ? 'Copied' : 'Copy' }}</a>
-        {{ content.path.directory }}/{{ content.name }}
+
+        <div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>
+
+        <a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/versions.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
+        </a>
+
+        <a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/differences.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
+        </a>
+
+        <a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/copy.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
+        </a>
+
+        <a class="download" :href="downloadUrl" download>
+            <img class="icon default" src="../../../static/svg/download.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
+        </a>
+
     </header>
+
+    <!-- Versions -->
     <versions :file="content" :content="content.versions" v-if="versionsActive && isCode"></versions>
+
+    <!-- Viewer / Code -->
     <viewer :differences-active="differencesActive" v-if="isCode"></viewer>
+
+    <!-- Preview -->
     <div class="preview" v-if="isImage">
-    	<img :src="downloadUrl">
+        <img :src="downloadUrl">
     </div>
+
+    <!-- Can't read -->
     <div class="cant-read" v-if="!isCode && !isImage">
-    	<br>Sorry, I can't read this file.
-    	<br>But you can <a :href="downloadUrl" download>download it</a>
+        <br>Sorry, I can't read this file.
+        <br>But you can <a :href="downloadUrl" download>download it</a>
     </div>
 </div>

site/src/components/versions/style.styl

@@ -1,6 +1,6 @@
 .versions
     position absolute
-    top 30px
+    top 50px
     left 0
     width 202px
     bottom 0

site/src/components/viewer/style.styl

@@ -14,7 +14,7 @@
 // Viewer
 .viewer
     position absolute
-    top 30px
+    top 50px
     right 0
     width 100%
     bottom 0
@@ -105,6 +105,8 @@
     height 100%
     outline none
     font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
+    -webkit-font-smoothing initial
+    -moz-osx-font-smoothing initial
 
     ::-moz-selection
         background #bdb9bf