Fix line-numbers and highlight styling

source/css/prism.css

@@ -21,13 +21,7 @@ pre[class*="language-"] {
 	word-wrap: normal;
 	line-height: 1.5;
 
-	-moz-tab-size: 2;
-	-o-tab-size: 2;
 	tab-size: 2;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
 	hyphens: none;
 
 }
@@ -78,17 +72,13 @@ pre[class*="language-"].line-numbers > code {
 	position: absolute;
 	pointer-events: none;
 	top: 0;
+	margin-top: -2px;
 	font-size: 100%;
 	left: -3.8em;
 	width: 3em; /* works for line-numbers below 1000 lines */
 	letter-spacing: -1px;
-	border-right: 1px solid #999;
-
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
+	border-right: 1px solid color-mod(var(--accent) blend(#999 90%) a(20%));
 	user-select: none;
-
 }
 
 .line-numbers-rows > span {
@@ -99,7 +89,7 @@ pre[class*="language-"].line-numbers > code {
 
 .line-numbers-rows > span:before {
 	content: counter(linenumber);
-	color: #999;
+	color: color-mod(var(--accent) blend(#999 90%) a(40%));
 	display: block;
 	padding-right: 0.8em;
 	text-align: right;
@@ -160,9 +150,7 @@ div.code-toolbar > .toolbar button {
 	line-height: normal;
 	overflow: visible;
 	padding: 0;
-	-webkit-user-select: none; /* for button */
-	-moz-user-select: none;
-	-ms-user-select: none;
+	user-select: none;
 }
 
 div.code-toolbar > .toolbar a,
@@ -194,15 +182,10 @@ div.code-toolbar > .toolbar span:focus {
 	letter-spacing: -1px;
 	margin-right: 1em;
 	pointer-events: none;
-
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 }
 
 .command-line-prompt > span:before {
-	color: #999;
 	content: ' ';
 	display: block;
 	padding-right: 0.8em;

source/css/syntax.css

@@ -31,7 +31,8 @@ code.language-scss,
 .token.property,
 .token.function,
 code.language-javascript,
-code.language-html {
+code.language-html,
+.command-line-prompt > span:before {
   color: color-mod(var(--accent) blend(#999 90%));
 }
 
@@ -54,18 +55,15 @@ code.language-html {
 
 pre[data-line] {
   position: relative;
-  padding: 1em 0 1em 3em;
 }
 
 .line-highlight {
   position: absolute;
   left: 0;
   right: 0;
-  padding: inherit 0;
-  margin-top: 1em;
-  /* Same as .prism’s padding-top */
-  background: hsla(24, 20%, 50%, .08);
-  background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0));
+  padding: 0;
+  margin: 0;
+  background: color-mod(var(--accent) blend(#999 90%) a(8%));
   pointer-events: none;
   line-height: inherit;
   white-space: pre;
@@ -75,7 +73,7 @@ pre[data-line] {
 .line-highlight[data-end]:after {
   content: attr(data-start);
   position: absolute;
-  top: .4em;
+  /* top: .4em; */
   left: .6em;
   min-width: 1em;
   padding: 0 .5em;