From 124b1fcbd78c4c7260f0c5bb44b227d1b2dd0f1a Mon Sep 17 00:00:00 2001
From: Aroy-Art <39088602+Aroy-Art@users.noreply.github.com>
Date: Fri, 8 Oct 2021 10:23:07 +0200
Subject: [PATCH] Version 2 of Code blocks

---
 assets/css/style.css | 98 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 94 insertions(+), 4 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 54cf16d..d4a6e35 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -476,15 +476,105 @@ nav[aria-label="breadcrumb"] li:last-child a{
     Code Blocks
 =================================================================*/
 
+.highlight-wrapper {
+    display: block;
+    margin: 2.5em 0 1em;;
+}
+  
 .highlight {
-    margin: .825rem 0;
+    position: relative;
+    z-index: 0;
+    padding: 0;
+    margin: 0;
+    border-radius: 0 4px 4px 4px;
 }
-
-.chroma{
-    border: 2px solid #00fff9;
+  
+.highlight > .chroma {
+    color: #d0d0d0;
+    background-color: #212121;
+    position: static;
+    z-index: 1;
+    border-top-left-radius: 0;
+    border-radius: 0 4px 4px 4px;
     padding: 10px;
+    overflow: auto;
 }
 
+pre.chroma {
+    margin: 0;
+    background-color: #212121;
+}
+
+.chroma .lntable {
+    display: table;
+    width: 100%;
+    padding: 0 0 5px;
+    
+}
+
+.chroma .lntd:first-child {
+    padding: 0;
+    margin: 0;
+}
+  
+.chroma .lntd:last-child {
+    padding: 0;
+    margin: 0;
+}
+
+.chroma [data-lang]:before {
+    position:absolute;
+    z-index:0;
+    top: -24px;
+    left:0;
+    content:attr(data-lang);
+    font-size:1em;
+    font-weight:700;
+    color: #00fff9;
+    background-color: #212121;
+    border-radius: 4px 4px 0 0;
+    border:none;
+    padding:5px 10px 7px;
+    line-height:1;
+}
+
+.copy-code-button {
+    position: absolute;
+    z-index: 2;
+    right: 0;
+    top: 0;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 14px;
+    letter-spacing: 0.5px;
+    width: 65px;
+    color: #232326;
+    background-color: #7f7f7f;
+    border: 1.25px solid #232326;
+    border-radius: 0 4px 0 4px;
+    white-space: nowrap;
+    padding: 4px 4px 5px 4px;
+    margin: 0 0 0 1px;
+    cursor: pointer;
+    opacity: 0.6;
+}
+  
+.copy-code-button:hover,
+.copy-code-button:focus,
+.copy-code-button:active,
+.copy-code-button:active:hover {
+    color: #222225;
+    background-color: #b3b3b3;
+    opacity: 0.8;
+}
+  
+.copyable-text-area {
+    position: absolute;
+    height: 0;
+    z-index: -1;
+    opacity: .01;
+}
+  
 
 /*=================================================================
     Navigation