49169ee Highlight entire code line — radicle-explorer

Radicle web interface

Highlight entire code line

Sebastian Martinez committed 4 years ago

commit 49169eeeeb31bd1f52fe919b41ee7e7a14b9af5c
parent 57a3a1c7b764900e7ed456e01395e00dd7839758

1 file changed +17 -0

modified src/base/projects/Blob.svelte

@@ -76,6 +76,7 @@

   }
   .container {
     position: relative;
     display: flex;
     border: 1px solid var(--color-foreground-subtle);
     border-top-style: dashed;

@@ -96,6 +97,15 @@

     margin-bottom: 1rem;
   }
   .highlight {
     position: absolute;
     width: 100%;
     height: 1.5rem;
     opacity: 0.3;
     top: 1rem;
     background-color: var(--color-yellow);
   }
   .no-scrollbar {
     scrollbar-width: none;
   }

@@ -108,6 +118,10 @@

     .code, .line-numbers {
       font-size: 0.875rem;
     }
     .highlight {
       transform: translateY(-3px);
       height: 1.2rem;
     }
   }
 </style>

@@ -131,6 +145,9 @@

           <span class="small">Binary content</span>
         </div>
       {:else}
         {#if line}
           <div class="highlight" style="top: {line == 1 ? 1 : (1.5 * line) - 0.5}rem" />
         {/if}
         <pre class="line-numbers">
           {#each lineNumbers as lineNumber}
             <a href="#L{lineNumber}"