refactor, add dynamic word wrap for code blocks

Author: denco

media/css/confluence.css

@@ -1,15 +1,5 @@
 body {
-	font-family: -apple-system,
-		BlinkMacSystemFont,
-		"Segoe UI",
-		Roboto,
-		Helvetica,
-		Arial,
-		sans-serif,
-		"Apple Color Emoji",
-		"Segoe UI Emoji",
-		"Segoe UI Symbol";
-	font-size: 14px;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	padding: 0 26px;
 	line-height: 1em;
 	word-wrap: break-word;
@@ -24,11 +14,7 @@ a {
 	color: #4080D0;
 	text-decoration: none;
 }
-
-a:focus,
-input:focus,
-select:focus,
-textarea:focus {
+a:focus, input:focus, select:focus, textarea:focus {
 	outline: 1px solid -webkit-focus-ring-color;
 	outline-offset: -1px;
 }
@@ -46,9 +32,7 @@ h1 {
 	border-bottom-style: solid;
 }
 
-h1,
-h2,
-h3 {
+h1, h2, h3 {
 	font-weight: normal;
 }
 
@@ -58,29 +42,26 @@ blockquote {
 	border-left: 5px solid;
 }
 
-table,
-th,
-td {
+table, th, td {
 	border: 1px solid;
 	border-collapse: collapse;
 	padding: 7px;
 }
 
-pre>code {
-	display: inline-block;
-	width: 90%;
-	color: white;
+pre > code {
+	display: block;
+	background:rgba(0, 0, 0, 0.15);
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	word-break: break-all;
+	white-space: normal;
 	margin: 0px 5px;
-	font-size: 14px;
-	background-color: black;
-	cursor: pointer;
 	padding: 5px 1em;
-	box-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
 	line-height: 1.5em;
 }
 
 pre > code > p {
-	margin: 0px
+	margin: 0px;
 }
 
 ul {
@@ -95,10 +76,10 @@ ol.initial {
 	list-style: decimal;
 }
 
-ol.initial>ol {
+ol.initial > ol {
 	list-style-type: lower-alpha;
 }
 
-ol.initial>ol>ol {
+ol.initial > ol > ol {
 	list-style-type: lower-roman;
-}
+}