overhaul syntax highlighting and line numbering for large pastes

view/static/style.css

@@ -4,9 +4,7 @@
     --text-dim: #8b949e;
     --border: #30363d;
     --primary: #238636;
-    --primary-hover: #2ea043;
     --secondary: #21262d;
-    --secondary-hover: #30363d;
     --accent: #58a6ff;
     --highlight: rgba(241, 250, 140, 0.1);
 
@@ -138,77 +136,81 @@ textarea {
     flex-grow: 1;
     width: 100%;
     font-family: inherit;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     line-height: var(--line-height);
     border: none;
     outline: none;
     background-color: transparent !important;
     color: inherit;
     resize: none;
-    padding: 0.5rem;
-    white-space: pre;
+    padding: 0;
+    margin: 0;
     overflow: auto;
 }
 
-pre,
+pre {
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    font-family: inherit !important;
+    font-size: 0.9rem !important;
+    line-height: var(--line-height) !important;
+    flex-grow: 1;
+    padding-left: 1rem !important;
+    overflow: visible;
+}
+
 code {
     background: transparent !important;
     padding: 0 !important;
     margin: 0 !important;
     font-family: inherit !important;
-    font-size: inherit !important;
+    font-size: 0.9rem !important;
     line-height: var(--line-height) !important;
-}
-
-code.with-line-numbers {
+    white-space: pre !important;
+    word-wrap: normal !important;
     display: block;
 }
 
-.line {
-    display: grid;
-    grid-template-columns: calc(var(--digits, 1) * 1ch + 2rem) minmax(0, 1fr);
-    width: 100%;
-    min-height: calc(1em * var(--line-height));
-    scroll-margin-top: 2rem;
-    content-visibility: auto;
-    contain-intrinsic-size: 1px calc(1em * var(--line-height));
-    contain: paint;
+#paste-content {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
 }
 
-.line-number {
-    grid-column: 1;
+.line-numbers {
+    flex-shrink: 0;
     text-align: right;
     padding-right: 1rem;
     color: var(--text-dim);
-    opacity: 0.3;
     border-right: 1px solid var(--border);
     user-select: none;
-    text-decoration: none;
-    cursor: pointer;
     font-size: 0.9rem;
+    line-height: var(--line-height);
+    min-width: calc(var(--digits, 1) * 1ch + 2rem);
+    display: flex;
+    flex-direction: column;
 }
 
-.line-number:hover {
+.line-numbers a {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    display: block;
+    opacity: 0.3;
+}
+
+.line-numbers a:hover {
     opacity: 0.8;
     color: var(--accent);
 }
 
-.line-code {
-    grid-column: 2;
-    padding-left: 1rem;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-}
-
-.line:target {
-    background-color: var(--highlight);
-}
-
-.line:target .line-number {
+.line-numbers a:target,
+.line-numbers a.active {
     opacity: 1;
     color: #f1fa8c;
-    border-right-color: #f1fa8c;
-    border-right-width: 2px;
+    border-right: 2px solid #f1fa8c;
+    margin-right: -1px;
 }
 
 ::selection {
@@ -258,15 +260,11 @@ code.with-line-numbers {
         display: none;
     }
 
-    .line {
-        grid-template-columns: 1fr;
-    }
-
-    .line-number {
+    .line-numbers {
         display: none;
     }
 
-    .line-code {
+    pre {
         padding-left: 0;
     }
 }