💄 Site > Viewer > Improve line highlights and questions

site/src/components/viewer/style.styl

@@ -18,7 +18,6 @@
     right 0
     width 100%
     bottom 0
-    font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
     line-height 20px
     letter-spacing 0.5px
     font-size 15px
@@ -32,6 +31,8 @@
     position absolute
     top 0
     left 0
+    right 0
+    width 65px
 
     .line
         position relative
@@ -39,36 +40,47 @@
         opacity 0.75
         letter-spacing -1px
         padding-left 25px
-        cursor pointer
+        font-size 12px
 
-        .added
+        .highlight
             position absolute
             top 0
-            left 9px
-            color #00ffa5
+            left 0
+            width calc(100vw - 315px)
+            pointer-events none
+
+            .version-active &
+                width calc(100vw - 315px - 202px)
+
+        .added
+            height 20px
+            background #41FF79
+            opacity 0.2
 
         .removed
-            position absolute
-            top -10px
-            left 9px
-            color #ff8157
+            height 1px
+            background #FD4141
+            opacity 0.4
+
+        .active
+            height 20px
+            background #00d8ff
+            opacity 0.2
 
         .question
             display none
             position absolute
             top 0
-            right -8px
-            font-size 12px
-            color #00d8ff
-
-        .active
-            position absolute
-            top 0
-            right -14px
-            font-size 12px
+            left 0
+            width 65px
+            text-align right
+            padding-right 8px
             color #00d8ff
+            cursor pointer
 
         &:hover
+            color #00d8ff
+
             .question
                 display block
 
@@ -79,6 +91,8 @@
     right 0
     height 100%
     outline none
+    font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
+
     ::-moz-selection
         background #bdb9bf
     ::selection

site/src/components/viewer/template.html

@@ -1,14 +1,14 @@
 <div class="viewer" v-if="version">
     <div class="scroll-hack" :style="`bottom:-${scrollbarWidth}px;right:-${scrollbarWidth}px;`">
-        <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
         <div class="lines">
-            <div class="line" v-for="line in linesCount" @click.prevent="onLineClick(line)">
-                <span class="added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive">+</span>
-                <span class="removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">-</span>
+            <div class="line" v-for="line in linesCount">
+                <span class="highlight active" v-if="line === currentLine">!</span>
+                <span class="highlight added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive"></span>
+                <span class="highlight removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive"></span>
                 <span class="index">{{ line }}.</span>
-                <span class="question">?</span>
-                <span class="active" v-if="line === currentLine">!</span>
+                <span class="question" @click.prevent="onLineClick(line)">?</span>
             </div>
         </div>
+        <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
     </div>
 </div>