💄 Site > Mark all as read > Add style

site/src/components/files-tree/style.styl

@@ -18,5 +18,21 @@
     border-bottom 1px solid rgba(255, 255, 255, 0.2)
 
 .content
+    padding-bottom 60px
     line-height 28px
     font-size 14px
+
+.all-read
+    position fixed
+    bottom 20px
+    left 20px
+    height 20px
+    padding-left 4px
+    padding-right 4px
+    line-height 20px
+    background #393855
+    font-size 12px
+    text-transform uppercase
+
+    &:hover
+        color #4BD1C5

site/src/components/files-tree/template.html

@@ -1,7 +1,5 @@
 <div class="file-tree" :style="`right: calc(100vw - 290px - ${scrollbarWidth}px);`">
     <input class="search" type="text" v-model="searchValue" placeholder="Search for files ...">
     <files-tree-folder class="content" v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
-    <div>
      <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
-    </div>
 </div>